Hugo/playground: updates packages

- updated hugo packages
- updated playground packages
- updated node to v20 in hugo and playground
- updated readme's with correct version numbers
- Fix linter issues caused by updated packages

For https://linear.app/usmedia/issue/CUE-198

Closes #441 as merged as of commit 37bcc87d.

Signed-off-by: Anne van Gorkom <[email protected]>
Change-Id: I97d59b7b7f761c4b42fe28e410d514d4c62d42d1
Dispatch-Trailer: {"type":"trybot","CL":1172288,"patchset":1,"ref":"refs/changes/88/1172288/1","targetBranch":"alpha"}

README.md

@@ -18,7 +18,7 @@ issue a `cuelang.org: ` prefix.
 
 ### Requirements for local development
 
-* [NodeJS](https://nodejs.org/) `v18.x`
+* [NodeJS](https://nodejs.org/) `v20.x`
 * [Go](https://golang.org/dl/) `>= go1.21` (not needed for only running `hugo`)
 * [Hugo](https://github.com/gohugoio/hugo/releases) `>= v0.120.3`
   (["extended"](https://gohugo.io/troubleshooting/faq/#i-get-this-feature-is-not-available-in-your-current-hugo-version)

hugo/.eslintrc.json

@@ -6,15 +6,18 @@
     },
     "extends": [
         "eslint:recommended",
-        "plugin:@typescript-eslint/recommended"
+        "plugin:@typescript-eslint/recommended",
+        "plugin:import/errors",
+        "plugin:import/warnings",
+        "plugin:import/typescript"
     ],
     "overrides": [],
     "parser": "@typescript-eslint/parser",
     "parserOptions": {
         "ecmaVersion": "latest",
         "sourceType": "module",
         "project": [
-            "tsconfig.json"
+            "**/tsconfig.json"
         ]
     },
     "plugins": [
@@ -138,7 +141,13 @@
         "import/no-unresolved": "off",
         "jsdoc/check-alignment": "error",
         "jsdoc/check-indentation": "error",
-        "jsdoc/newline-after-description": "error",
+        "jsdoc/tag-lines": [
+            2,
+            "any",
+            {
+              "startLines": 1
+            }
+        ],
         "jsdoc/no-types": "error",
         "complexity": "warn",
         "max-len": [

hugo/README.md

@@ -4,8 +4,8 @@ This folder contains all hugo code for the website.
 
 ## Requirements for local development
 
-- [NodeJS](https://nodejs.org/) `== v18.x`
-- [Hugo](https://github.com/gohugoio/hugo/releases) `== v0.117.0`
+- [NodeJS](https://nodejs.org/) `== v20.x`
+- [Hugo](https://github.com/gohugoio/hugo/releases) `== v0.120.x`
 
 ## Developing the site locally
 

hugo/assets/scss/components/docs.scss

@@ -13,23 +13,17 @@
     }
 
     &__aside {
-        bottom: 0;
         display: none;
-        left: 0;
+        inset: 0;
         position: fixed;
-        right: 0;
-        top: 0;
         z-index: 9;
     }
 
     &__backdrop {
         background-color: transparent;
-        bottom: 0;
         cursor: pointer;
-        left: 0;
+        inset: 0;
         position: absolute;
-        right: 0;
-        top: 0;
         transition: background-color 0.2s ease-in-out;
     }
 
@@ -93,15 +87,12 @@
             @include scrollbars;
 
             background-color: var(--docs-aside-background, $c-blue--lighter);
-            bottom: auto;
             display: block;
             grid-area: aside;
             height: 100%;
-            left: auto;
+            inset: auto;
             overflow: auto;
             position: relative;
-            right: auto;
-            top: auto;
             z-index: initial;
         }
 

hugo/assets/scss/components/drawer.scss

@@ -6,22 +6,16 @@
 .drawer {
     $self: &;
 
-    bottom: 0;
     display: none;
-    left: 0;
+    inset: 0;
     position: fixed;
-    right: 0;
-    top: 0;
     z-index: 11;
 
     &__backdrop {
         background-color: transparent;
-        bottom: 0;
         cursor: pointer;
-        left: 0;
+        inset: 0;
         position: absolute;
-        right: 0;
-        top: 0;
         transition: background-color 0.2s ease-in-out;
     }
 
@@ -57,8 +51,7 @@
         flex: 1;
         margin: 0 auto;
         max-width: $w-site;
-        overflow-x: hidden;
-        overflow-y: auto;
+        overflow: hidden auto;
         padding: $p-gutter;
         width: 100%;
     }

hugo/assets/scss/components/popover.scss

@@ -10,16 +10,12 @@
 
     --popover-close-size: 54px;
 
-    align-items: center;
-    bottom: 0;
     display: flex;
-    justify-items: center;
-    left: 0;
+    inset: 0;
     opacity: 0;
     padding: 0;
+    place-items: center;
     position: fixed;
-    right: 0;
-    top: 0;
     transition: opacity 0.2s;
     z-index: 600;
 

hugo/assets/ts/helpers/search.ts

@@ -63,6 +63,7 @@ export const queryToUrlParams = (query: ParsedQuery): string => {
     return queryString;
 };
 
+// eslint-disable-next-line max-lines-per-function
 export const parseQuery = (query: string): ParsedQuery => {
     if (!query) {
         return {

hugo/assets/ts/widgets/search-filter.ts

@@ -1,3 +1,4 @@
+// eslint-disable-next-line
 import Fuse from 'fuse.js';
 import { BaseWidget } from './base-widget';
 import { FilterEvent, FilterItem, ParsedQuery, SearchEvents } from '../interfaces/search';