generate index for webgpu folder

webgpu · Nov 24, 2024 · 79c5acf · 79c5acf
1 parent 5afc66c
commit 79c5acf
Show file tree

Hide file tree

Showing 2 changed files with 115 additions and 1 deletion.
diff --git a/Gruntfile.js b/Gruntfile.js
@@ -12,6 +12,7 @@ const path = require('path');
 const c = require('ansi-colors');
 const liveEditor = require('@gfxfundamentals/live-editor');
 const fixLinks = require('./build/fix-links.js');
+const generateIndex = require('./build/generate-index.js');
 const liveEditorPath = path.dirname(require.resolve('@gfxfundamentals/live-editor'));
 const webgpuTypesPath = path.join(__dirname, 'node_modules', '@webgpu', 'types');
 const dataDir = require('./build/appdata')('servez-cli');
@@ -192,6 +193,10 @@ module.exports = function(grunt) {
     buildStuff(buildSettings).finally(finish);
   });
 
+  grunt.registerTask('buildindex', function() {
+    generateIndex('out/webgpu');
+  });
+
   grunt.registerTask('serve', function() {
     //const done = this.async();
     const logger = {
@@ -227,7 +232,7 @@ module.exports = function(grunt) {
     });
   });
 
-  grunt.registerTask('build', ['clean', 'copy:main', 'buildlessons']);
+  grunt.registerTask('build', ['clean', 'copy:main', 'buildlessons', 'buildindex']);
   grunt.registerTask('buildwatch', ['build', 'serve', 'watch']);
 
   grunt.registerTask('default', ['eslint', 'build']);

diff --git a/build/generate-index.js b/build/generate-index.js
@@ -0,0 +1,109 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+/*eslint-env node*/
+
+const fs = require('fs');
+const path = require('path');
+
+const shortSize = (function() {
+  const suffixes = ['b', 'k', 'mb', 'gb', 'tb', 'pb'];
+  return function(size) {
+    const suffixNdx = Math.log2(Math.abs(size)) / 10 | 0;
+    const suffix = suffixes[Math.min(suffixNdx, suffixes.length - 1)];
+    const base = 2 ** (suffixNdx * 10);
+    return `${(size / base).toFixed(0)}${suffix}`;
+  };
+})();
+
+const pad2 = v => v.toString().padStart(2, '0');
+
+// I get this is unsafe as a bad filename will generate bad HTML
+// but I don't care because I control the filenames.
+// TODO: dates should come from git
+module.exports = function generateIndex(folder) {
+  const files = fs.readdirSync(folder, { withFileTypes: true });
+  const html = `\
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
+    <style>
+    :root {
+      color-scheme: light dark;
+      --cell-border: #ddd;
+      --odd-bg-color: rgba(0, 0, 0, 0.05);
+      --hover-bg-color: rgba(0, 0, 255, 0.1);
+    }
+    @media (prefers-color-scheme: dark) {
+      :root {
+        --cell-border: #333;
+        --odd-bg-color: rgba(255, 255, 255, 0.05);
+        --hover-bg-color: rgba(192, 192, 255, 0.2);
+      }
+    }
+
+    html {
+      box-sizing: border-box;
+    }
+    *, *:before, *:after {
+      box-sizing: inherit;
+    }
+    html, body {
+      font-family: monospace;
+    }
+    a {
+      text-decoration: none;
+    }
+    table {
+      width: 100%;
+      border-collapse: collapse;
+    }
+    td {
+      border: 1px solid var(--cell-border);
+      padding-left: 0.5em;
+      padding-right: 0.5em;
+    }
+    tbody td:nth-child(2) {
+      text-align: right;
+      width: 1%;
+    }
+    tbody td:nth-child(3) {
+      text-align: center;
+      white-space: pre;
+      width: 1%;
+    }
+    tr:nth-child(even) {
+      background-color: var(--odd-bg-color);
+    }
+    tr:hover {
+      background-color: var(--hover-bg-color);
+    }
+
+    </style>
+  </head>
+  <body>
+    <table>
+      <thead>
+        <tr><th>filename</th><th>size</th><th>date</th></tr>
+      </thead>
+      <tbody>
+${files
+  .filter(f => f.isFile())
+  .map(({name}) => {
+    const s = fs.statSync(path.join(folder, name));
+    const size = shortSize(s.size);
+    const d = new Date(s.ctimeMs);
+    const date = `${d.getFullYear()}-${pad2(d.getMonth())}-${pad2(d.getDay())}`;
+    return `<tr><td><a href="${name}">${name}</a></td><td>${size}</td><td>${date}</td></tr>`;
+  })
+  .join('\n')
+}
+      </tbody>
+    </table>
+  </body>
+</html>
+`;
+  const filename = path.join(folder, 'index.html');
+  console.log('writing:', filename);
+  fs.writeFileSync(filename, html);
+};