godango rewrite

.fiveserverrc

@@ -0,0 +1,6 @@
+{
+  "port": 5500,
+  "root": "build",
+  "open": false,
+  "https": "cert.cjs"
+}

.gitignore

@@ -1,3 +1,4 @@
 node_modules
 .DS_Store
 build
+cert.cjs

.vscode/extensions.json

@@ -1,3 +1,3 @@
 {
-  "recommendations": ["ritwickdey.LiveServer", "Gruntfuggly.todo-tree", "esbenp.prettier-vscode"]
+  "recommendations": ["dbaeumer.vscode-eslint", "Gruntfuggly.todo-tree", "esbenp.prettier-vscode"]
 }

.vscode/launch.json

@@ -0,0 +1,12 @@
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "type": "chrome",
+      "request": "launch",
+      "name": "dev",
+      "preLaunchTask": "dev",
+      "url": "https://localhost:5500"
+    }
+  ]
+}

.vscode/settings.json

@@ -4,18 +4,7 @@
   },
   "editor.defaultFormatter": "esbenp.prettier-vscode",
   "editor.formatOnSave": true,
-  "liveServer.settings.root": "build/",
   "todo-tree.tree.scanMode": "workspace",
-  "liveServer.settings.multiRootWorkspaceName": "routing",
-  "liveServer.settings.https": {
-    "enable": true,
-    "cert": "/Users/jordan/proj/self-signed-cert/public.crt",
-    "key": "/Users/jordan/proj/self-signed-cert/private.key",
-    "passphrase": "liveserver"
-  },
-  "liveServer.settings.donotVerifyTags": true,
-  "liveServer.settings.host": "0.0.0.0",
-  "liveServer.settings.donotShowInfoMsg": true,
   "todo-tree.regex.regexCaseSensitive": false,
   "todo-tree.general.tags": ["FIXME", "TODO", "[ ]", "CHECKME", "DELME"],
   "todo-tree.regex.regex": "(^'\\s|^\\s*\\*\\s*@|^\"\\s|//|#|<!--|;|(/|\\s)\\*+|^|^[ \\t]*(-|\\d+.))\\s*($TAGS)",

.vscode/tasks.json

@@ -4,15 +4,72 @@
   "version": "2.0.0",
   "tasks": [
     {
+      "label": "five-server",
       "type": "npm",
-      "script": "dev",
+      "script": "five-server",
+      "isBackground": true,
+      "group": {
+        "kind": "test",
+        "isDefault": true
+      },
+      // we use impossible regex (?!) to match any output
+      // since five-server never outputs problems or restarts
+      // but you need a problem matcher to get it to run
+      // in the background for a launch configuration
+      "problemMatcher": [
+        {
+          "owner": "five-server",
+          "pattern": [
+            {
+              "regexp": "(?!)",
+              "kind": "file",
+              "file": 1,
+              "message": 1
+            }
+          ],
+          "background": {
+            "activeOnStart": true,
+            "beginsPattern": "(?!)",
+            "endsPattern": "^\\s*Five Server running at:"
+          }
+        }
+      ]
+    },
+    {
+      "label": "build-watch",
+      "type": "npm",
+      "script": "build-watch",
+      "isBackground": true,
       "group": {
         "kind": "build",
         "isDefault": true
       },
-      "problemMatcher": [],
-      "label": "npm: dev",
-      "detail": "nodemon render.js -i build -e js,json,html,css,html.inc"
+      "problemMatcher": [
+        {
+          "owner": "javascript",
+          "fileLocation": ["absolute"],
+          "pattern": [
+            {
+              "regexp": "^(.*Error.*\\s+.*)$",
+              "message": 1
+            },
+            {
+              "regexp": "\\s*at\\s+file:\\/\\/(.*):(\\d+):(\\d+)$",
+              "file": 1,
+              "line": 2,
+              "column": 3
+            }
+          ],
+          "background": {
+            "beginsPattern": "^\\[nodemon\\] starting.*",
+            "endsPattern": "^\\[nodemon\\] (?:app crashed|clean exit).*"
+          }
+        }
+      ]
+    },
+    {
+      "label": "dev",
+      "dependsOn": ["five-server", "build-watch"]
     }
   ]
 }

cert.cjs.sample

@@ -0,0 +1,9 @@
+// copy this file to cert.cjs and fill in the path to your certificate and key;
+// or just set "https": true in five-server.config.js to generate a self-signed cert automatically
+
+const fs = require('fs');
+
+module.exports = {
+  cert: fs.readFileSync('/PATH/TO/YOUR/CERT.crt', { encoding: 'utf8' }),
+  key: fs.readFileSync('/PATH/TO/YOUR/KEY.key', { encoding: 'utf8' })
+};

eslint.config.js

@@ -30,19 +30,63 @@ export default defineConfig([
   },
   packageJson.configs.recommended,
   {
-    files: ['**/*.js'],
+    files: ['**/*.{js,ts}'],
     plugins: {
       prettier,
       jsdoc
     },
+    extends: [
+      eslint.configs.recommended,
+      jsdoc.configs['flat/recommended'],
+      tseslint.configs.strict,
+      tseslint.configs.stylistic,
+      eslintPluginPrettierRecommended
+    ],
     rules: {
-      ...jsdoc.configs['flat/recommended'].rules,
-      ...tseslint.configs.strict.rules,
-      ...tseslint.configs.stylistic.rules,
-      ...eslintPluginPrettierRecommended.rules,
-      ...eslint.configs.recommended.rules,
       // https://github.com/gajus/eslint-plugin-jsdoc/issues/99
-      'jsdoc/no-undefined-types': ['off']
+      'jsdoc/no-undefined-types': ['off'],
+      'jsdoc/require-jsdoc': [
+        'warn',
+        {
+          require: {
+            ArrowFunctionExpression: true,
+            ClassDeclaration: true,
+            ClassExpression: true,
+            FunctionDeclaration: true,
+            FunctionExpression: true
+          },
+          contexts: [
+            'MethodDefinition:not([kind="get"], [kind="set"], [kind="constructor"])',
+            'PropertyDefinition'
+          ]
+        }
+      ],
+      'jsdoc/require-description': [
+        'warn',
+        {
+          contexts: [
+            'ArrowFunctionExpression',
+            'ClassDeclaration',
+            'ClassExpression',
+            'FunctionDeclaration',
+            'FunctionExpression:not(MethodDefinition > FunctionExpression)',
+            'MethodDefinition:not([kind="get"], [kind="set"], [kind="constructor"])',
+            'PropertyDefinition'
+          ]
+        }
+      ],
+      'jsdoc/no-blank-blocks': 'warn',
+      quotes: ['warn', 'single', { avoidEscape: true }],
+      'prefer-template': 'warn',
+      'jsdoc/valid-types': 'off'
+    },
+    settings: {
+      jsdoc: {
+        preferredTypes: {
+          any: false,
+          '*': false
+        }
+      }
     }
   },
   {
@@ -73,7 +117,7 @@ export default defineConfig([
   },
   // root-level files are Node scripts
   {
-    files: ['*.js'],
+    files: ['*.js', '*.ts'],
     languageOptions: {
       globals: globals.node
     }

fragments/resume.html.inc

@@ -57,9 +57,8 @@
       document.querySelector('.status').remove();
     });
 
-    // intercept print shortcut to open printable viewer
-    // standard drive preview viewer is not printable for some reason!
-    // so use this workaround which previews the pdf it just exported
+    // if ctrl + p or cmd + p is the browser's print keybinding,
+    // suppress it and open the PDF in a new tab instead.
     window.addEventListener('keydown', (e) => {
       if ((e.ctrlKey || e.metaKey) && e.key === 'p') {
         e.preventDefault();
@@ -68,6 +67,14 @@
         );
       }
     });
+
+    // if the user tries to print the page using a different method,
+    // we can't prevent the dialog from showing up in this tab
+    // unless we redirect.
+    window.addEventListener('beforeprint', (e) => {
+      window.location.href =
+        'https://docs.google.com/viewerng/viewer?url=https://docs.google.com/document/d/1LcOpwM2IJcIhgiO-hPV5Ddg9txtqIGaY_wQ8Z6zRfO4/export?format%3Dpdf';
+    });
   }
 </script>
 <!--{{/main}}-->

fragments/ripple.html.inc

@@ -11,22 +11,24 @@ rippling card test
 </style>
 <!--{{/head}}-->
 <!--{{main}}-->
-<rippling-card
+<ripple-component
   d="m 6.2220957,7.1841562 c -0.2961276,0.2444863 -0.2961276,0.6394258 0,0.8839121 l 2.9460895,2.4323267 -2.9460895,2.432327 c -0.2961276,0.244485 -0.2961276,0.639426 0,0.88391 0.296127,0.244491 0.774487,0.244491 1.0706148,0 l 3.4851945,-2.877416 c 0.296127,-0.244486 0.296127,-0.639425 0,-0.883912 L 7.2927105,7.1778872 C 7.004176,6.9396697 6.5182227,6.9396697 6.2220957,7.1841562 Z M 21,3 H 3 C 1.9,3 1,3.9 1,5 v 14 c 0,1.1 0.9,2 2,2 h 18 c 1.1,0 2,-0.9 2,-2 V 5 C 23,3.9 22.1,3 21,3 Z M 20,19 H 4 C 3.45,19 3,18.55 3,18 V 6 C 3,5.45 3.45,5 4,5 h 10.5 v 1.5 c 0,0.55 0.45,1 1,1 H 21 V 18 c 0,0.55 -0.45,1 -1,1 z"
   text="Shell"
-></rippling-card>
-<rippling-card
+></ripple-component>
+<ripple-component
   d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v1c0 .55.45 1 1 1h14c.55 0 1-.45 1-1v-1c0-2.66-5.33-4-8-4z"
   text="Account"
-></rippling-card>
-<rippling-card
+></ripple-component>
+<ripple-component
   d="M3.24 6.15C2.51 6.43 2 7.17 2 8v12c0 1.1.89 2 2 2h16c1.11 0 2-.9 2-2V8c0-1.11-.89-2-2-2H8.3l8.26-3.34L15.88 1 3.24 6.15zM7 20c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3zm13-8h-2v-2h-2v2H4V8h16v4z"
   text="Grades"
-></rippling-card>
+></ripple-component>
 <script type="module">
-  import { RipplingCard } from '/static/components/ripple/ripple.js';
-  if (customElements.get('rippling-card') === undefined) {
-    customElements.define('rippling-card', RipplingCard);
-  } // fixme stops working on navigate
+  import createComponent from '/static/components/components.js';
+  await createComponent('ripple', {
+    html: true,
+    css: 'local',
+    js: true
+  });
 </script>
 <!--{{/main}}-->

fragments/utilities/dashboard.html.inc

@@ -38,6 +38,7 @@
   }
 
   /* I am so proud of this */
+  /* checkme: what is the behavior in firefox which is not webkit? */
   progress::-webkit-progress-bar {
     background-image: repeating-linear-gradient(
       to right,