Add a userstyles page.

.gitignore

@@ -105,3 +105,6 @@ dist
 
 # Build directory.
 public/
+
+submodules/*
+!submodules/.gitkeep

README.md

@@ -8,6 +8,8 @@
 
 To build the site [Node](https://nodejs.org) and [Yarn](https://yarnpkg.com) are required.
 
+Make sure the dependencies are installed in the project root and the submodules with `yarn --silent`. For more information see the [`.gitkeep` file in `submodules/`](https://git.holllo.cc/Bauke/bauke.xyz/src/branch/main/submodules/.gitkeep).
+
 Then, run `yarn build`. The site will be built to the `public/` directory.
 
 ## License

package.json

@@ -1,16 +1,17 @@
 {
   "name": "bauke.xyz",
   "description": "My personal website.",
-  "version": "0.1.5",
+  "version": "0.1.6",
   "author": "Bauke <me@bauke.xyz>",
   "homepage": "https://bauke.xyz",
   "repository": "https://git.holllo.cc/Bauke/bauke.xyz",
   "license": "MIT",
   "scripts": {
     "start": "nodemon --watch 'source/' --exec 'yarn build' --ext 'html css'",
-    "build": "cpy '**' '../public/' --cwd='source' --parents && yarn build:css",
+    "build": "cpy '**' '!index.js' '!userstyles/*' '../public/' --cwd='source' --parents && yarn build:css && yarn build:userstyles",
     "build:css": "cpy 'node_modules/modern-normalize/modern-normalize.css' 'public/css/'",
-    "test": "stylelint 'source/css/*.css'",
+    "build:userstyles": "node 'source/index.js'",
+    "test": "xo && stylelint 'source/css/*.css'",
     "deploy": "rm -rf 'public/' && yarn build && yarn deploy:netlify",
     "deploy:netlify": "netlify deploy --prod --dir 'public/' -s 37bb1f7c-2abb-419f-9a31-a4b72209c1c8"
   },
@@ -22,8 +23,10 @@
     "husky": "^4.2.5",
     "netlify-cli": "^2.58.0",
     "nodemon": "^2.0.4",
+    "nunjucks": "^3.2.2",
     "stylelint": "^13.6.1",
-    "stylelint-config-xo-space": "^0.14.0"
+    "stylelint-config-xo-space": "^0.14.0",
+    "xo": "^0.32.1"
   },
   "stylelint": {
     "extends": [
@@ -33,6 +36,16 @@
       "no-descending-specificity": null
     }
   },
+  "xo": {
+    "ignores": [
+      "submodules/**/*.js"
+    ],
+    "prettier": true,
+    "rules": {
+      "no-await-in-loop": "off"
+    },
+    "space": true
+  },
   "husky": {
     "hooks": {
       "pre-commit": "yarn test",

source/css/userstyles.css

@@ -0,0 +1,28 @@
+header {
+  align-items: center;
+  background-color: #2a2041;
+  border: 1px solid #3bd18a;
+  display: flex;
+  justify-content: center;
+  padding: 16px;
+  width: 100%;
+}
+
+h2 {
+  margin-right: auto;
+  padding: 0;
+}
+
+a.install {
+  background-color: #3bd18a;
+  color: #1f1731;
+}
+
+a.install:hover {
+  background-color: #96c839;
+}
+
+.remove-padding,
+.remove-a-padding a {
+  padding: 0;
+}

source/index.js

@@ -0,0 +1,58 @@
+const {promises: fsp} = require('fs');
+const nunjucks = require('nunjucks');
+const {join} = require('path');
+
+const {build} = require('../submodules/userstyles/source');
+const {
+  readStyleMetadata
+} = require('../submodules/userstyles/source/utilities');
+
+async function main() {
+  // Make sure the `public/userstyles` directory exists.
+  await fsp.mkdir(join(__dirname, '../public/userstyles/'), {recursive: true});
+
+  // Configure Nunjucks to use the current directory for templates.
+  nunjucks.configure(__dirname, {
+    lstripBlocks: true,
+    trimBlocks: true,
+    throwOnUndefined: true
+  });
+
+  // Build the userstyles.
+  await build();
+
+  // Define the build directory where the userstyles will be built to.
+  const buildDir = join(__dirname, '../submodules/userstyles/build/');
+
+  // Read and sort the files in the build directory.
+  const styles = await fsp.readdir(buildDir);
+  styles.sort((a, b) => a.localeCompare(b));
+
+  // Create an array to hold all the style metadatas we'll use to render the template.
+  const styleMetadatas = [];
+
+  for (const style of styles) {
+    // Remove the `.user.css` so we get just the style name.
+    const styleName = style.slice(0, style.indexOf('.'));
+
+    // Read the style metadata and add it to our array.
+    styleMetadatas.push(await readStyleMetadata(styleName));
+
+    // Copy all the built userstyles to the `public/userstyles/` directory.
+    await fsp.copyFile(
+      join(buildDir, style),
+      join(__dirname, '../public/userstyles/', style)
+    );
+  }
+
+  // Render the userstyles template and write it to file.
+  await fsp.writeFile(
+    join(__dirname, '../public/userstyles/index.html'),
+    nunjucks.render('userstyles/index.html', {styles: styleMetadatas})
+  );
+}
+
+// Run `main()` if this script was called directly (like `node source/index.js`).
+if (require.main === module) {
+  main();
+}

source/userstyles/index.html

@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Userstyles</title>
+  <link rel="stylesheet" href="../css/modern-normalize.css">
+  <link rel="stylesheet" href="../css/index.css">
+  <link rel="stylesheet" href="../css/userstyles.css">
+</head>
+
+<body>
+  <main>
+    <h1>Userstyles</h1>
+
+    <ul class="remove-a-padding">
+      <li>A collection of all my userstyles for various websites.</li>
+
+      <li>
+        Don't know how to install userstyles? Install the
+        <a href="https://add0n.com/stylus.html" target="_blank">Stylus web extension</a>
+        and then click on the "Install" button. This will open a new tab where Stylus
+        will ask you to install the userstyle in question.
+      </li>
+
+      <li>
+        Encounter an issue with any of the styles?
+        <a href="mailto:me@bauke.xyz">Email (me@bauke.xyz)</a>
+        or message me on Matrix (@baukexyz:matrix.org) and I'll try to fix
+        your problem as soon as possible.
+      </li>
+
+      <li>
+        Open-sourced with the MIT license, available at
+        <a href="git.holllo.cc/Bauke/userstyles" target="_blank">git.holllo.cc/Bauke/userstyles</a>.
+      </li>
+    </ul>
+
+    <div class="divider"></div>
+
+    {% for style in styles %}
+    <header>
+      <h2 id="{{ style.name | lower | replace(" ", "-") }}">
+        {{ style.name }}
+      </h2>
+      <a class="install" href="{{ style.updateURL }}" target="_blank">Install</a>
+    </header>
+
+    <ul>
+      <li>{{ style.description }}</li>
+      <li>Version {{ style.version }}</li>
+      <li>Licensed under {{ style.license }}.</li>
+      <li>
+        Applies to
+        <a class="remove-padding" href="https://{{ style.domain }}">{{ style.domain }}</a>.
+      </li>
+    </ul>
+
+    {% if not loop.last %}
+    <div class="divider"></div>
+    {% endif %}
+    {% endfor %}
+  </main>
+
+  <footer>
+    <p>
+      &copy; Bauke
+      <a href="https://creativecommons.org/licenses/by-sa/4.0/" target="_blank">CC BY-SA 4.0</a>
+    </p>
+  </footer>
+</body>
+
+</html>

submodules/.gitkeep

@@ -0,0 +1,12 @@
+# This `submodules` directory exists to hold external projects, but without using
+# Git's submodule functionality (because they're kind of a pain in the ass to use).
+
+# To initialize the submodules needed to build the website, run the following
+# commands in this directory.
+
+git clone git@git.holllo.cc/Bauke/userstyles.git
+cd userstyles
+yarn --silent
+
+# Then, if they ever need to be updated, just pull the changes and run Yarn
+# again, if necessary.