refactor: group asset-related files

Fixes #15

website/assets/.yarnrc

@@ -0,0 +1 @@
+--modules-folder /node_modules

website/assets/esbuild.config.js

@@ -0,0 +1,29 @@
+const esbuild = require("esbuild");
+
+let minify = false;
+let sourcemap = true;
+let watch_fs = true;
+
+if (process.env.NODE_ENV === "production") {
+    minify = true;
+    sourcemap = false;
+    watch_fs = false;
+}
+
+const watch = watch_fs && {
+    onRebuild(error) {
+        if (error) console.error("[watch] build failed", error);
+        else console.log("[watch] build finished");
+    },
+};
+console.log(watch);
+
+esbuild.build({
+    entryPoints: ["./js/app.js"],
+    outfile: "../source/build/app.js",
+    bundle: true,
+    minify: minify,
+    sourcemap: sourcemap,
+    watch: watch,
+    plugins: [],
+});

website/assets/js/app.js

@@ -1,20 +1,19 @@
-import 'alpinejs'
-import 'focus-visible'
-import bash from 'highlight.js/lib/languages/bash'
-import hljs from 'highlight.js/lib/core'
-import ini from 'highlight.js/lib/languages/ini'
-import javascript from 'highlight.js/lib/languages/javascript'
-import php from 'highlight.js/lib/languages/php'
-import yaml from 'highlight.js/lib/languages/yaml'
+import "focus-visible";
+import bash from "highlight.js/lib/languages/bash";
+import hljs from "highlight.js/lib/core";
+import ini from "highlight.js/lib/languages/ini";
+import javascript from "highlight.js/lib/languages/javascript";
+import php from "highlight.js/lib/languages/php";
+import yaml from "highlight.js/lib/languages/yaml";
 
-hljs.registerLanguage('bash', bash);
-hljs.registerLanguage('ini', ini);
-hljs.registerLanguage('javascript', javascript);
-hljs.registerLanguage('php', php);
-hljs.registerLanguage('yaml', yaml);
+hljs.registerLanguage("bash", bash);
+hljs.registerLanguage("ini", ini);
+hljs.registerLanguage("javascript", javascript);
+hljs.registerLanguage("php", php);
+hljs.registerLanguage("yaml", yaml);
 
-document.addEventListener('DOMContentLoaded', event => {
-  document.querySelectorAll('pre code').forEach(block => {
-    hljs.highlightBlock(block)
-  })
-})
+document.addEventListener("DOMContentLoaded", (event) => {
+    document.querySelectorAll("pre code").forEach((element) => {
+        hljs.highlightElement(element);
+    });
+});

website/assets/package.json

@@ -0,0 +1,22 @@
+{
+  "private": true,
+  "scripts": {
+    "build:css": "./run yarn:build:css"
+  },
+  "dependencies": {
+    "@tailwindcss/aspect-ratio": "^0.2.0",
+    "@tailwindcss/forms": "^0.2.1",
+    "@tailwindcss/typography": "^0.4.0",
+    "alpinejs": "^2.3.5",
+    "autoprefixer": "^10.2.5",
+    "elliptic": ">=6.5.3",
+    "esbuild": "^0.14.10",
+    "focus-visible": "^5.1.0",
+    "highlight.js": "^10.4.1",
+    "lodash": ">=4.17.19",
+    "postcss": "^8.2.1",
+    "postcss-easy-import": "^3.0.0",
+    "postcss-nested": "^5.0.5",
+    "tailwindcss": "2"
+  }
+}

website/assets/postcss.config.js

@@ -0,0 +1,10 @@
+module.exports = {
+  plugins: {
+    'postcss-easy-import': {
+      extensions: ['.css', '.pcss']
+    },
+    tailwindcss: {},
+    'postcss-nested': {},
+    autoprefixer: {}
+  }
+}

website/assets/tailwind.config.js

@@ -0,0 +1,68 @@
+const colors = require('./tools/tailwindcss/colours')
+const defaultTheme = require('tailwindcss/defaultTheme')
+const { fontFamily } = defaultTheme
+
+module.exports = {
+  mode: 'jit',
+  darkMode: 'media',
+  important: true,
+  purge: {
+    content: [
+      'tools/tailwindcss/safelist-classes.txt',
+      'source/**/*.{md,twig}',
+    ],
+  },
+  theme: {
+    outline: {
+      black: '1px solid black',
+      white: '1px solid white'
+    },
+    extend: {
+      typography: (theme) => ({
+        DEFAULT: {
+          css: {
+            p: {
+              lineHeight: 400
+            }
+          }
+        }
+      }),
+      colors,
+      fontFamily: {
+        sans: [
+          'Roboto Condensed',
+          'Arial',
+          'Helvetica Neue',
+          'Helvetica',
+          'sans-serif',
+        ],
+        mono: [
+          'ui-monospace',
+          'SFMono-Regular',
+          'SF Mono',
+          'Consolas',
+          'Liberation Mono',
+          ...fontFamily.mono
+        ]
+      },
+      spacing: {
+        '2px': '2px'
+      },
+      borderWidth: {
+        3: '3px'
+      },
+      width: {
+        96: '24rem'
+      }
+    }
+  },
+  corePlugins: {
+    container: false
+  },
+  plugins: [
+    require('./tools/tailwindcss/plugins/focus-visible'),
+    require('@tailwindcss/aspect-ratio'),
+    require('@tailwindcss/forms'),
+    require('@tailwindcss/typography')
+  ]
+}