feat: [init]

.github/workflows/build.yml

@@ -0,0 +1,83 @@
+# This script creates a nice README.md with an index of all TIL files.
+# TIL files are Markdown files named anything other than README.md.
+#
+# The readme is split into two sections: the "header" and the "index",
+# separated by three hyphens on their own line.
+# Anything above the three hyphens is the "header" and will be kept as is.
+# Anything below will be replaced by the "index".
+
+# Source: https://github.com/jakelazaroff/til/blob/main/.github/workflows/build.yml
+
+name: Build README
+
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check out repo
+        uses: actions/checkout@v3
+        with:
+          fetch-depth: 0 # get full history or else it'll be overwritten
+
+      - name: Regenerate README
+        uses: actions/github-script@v6
+        with:
+          script: |
+            const { readFile, writeFile } = require("node:fs/promises");
+
+            console.log("Building index…");
+
+            // load readme
+            let readme = await readFile("README.md").then(file => file.toString());
+
+            // add header separator
+            const separator = "\n---\n";
+            const index = readme.indexOf(separator);
+            if (index === -1) readme += separator;
+            else readme = readme.substring(0, index + separator.length);
+
+            // collect entries
+            const files = await glob.create("./**/*.md").then(globber => globber.glob());
+            const entries = files
+              .filter(name => !name.endsWith("/README.md")) // exclude README.md
+              .sort()
+              .map(name => name.split("/").slice(-2));
+
+            // add summary
+            readme += `\n${entries.length} TILs so far:\n`;
+
+            // create category map
+            const categories = new Map();
+            for (const [category, file] of entries) {
+              const list = categories.get(category) || [];
+              categories.set(category, [...list, file]);
+            }
+
+            // create a section for each category
+            for (const [category, entries] of categories.entries()) {
+              // write category header
+              readme += `\n## ${category}\n\n`;
+
+              // write link for each file
+              for (const file of entries) {
+                const filepath = [category, file].join("/");
+                const contents = await readFile(filepath).then(file => file.toString());
+                const [, title] = contents.match(/^# (.+)$/m);
+                readme += `- [${title}](/${filepath})\n`;
+              }
+            }
+
+            // write readme
+            await writeFile("README.md", readme);
+
+      - name: Commit and push if README or RSS changed
+        run: |-
+          git config --global user.email "actions@users.noreply.github.com"
+          git config --global user.name "tilbot"
+          git diff --quiet || git commit --all --message "Update README.md or rss.xml"
+          git push

github/run-github-actions-locally.md

@@ -0,0 +1,24 @@
+# Run GitHub Actions locally
+
+A common pain point with GitHub Actions is that the feedback loop is so long: make a change, push, wait for it to run, find an error, try to debug, repeat. Which is why I was so happy to discover [`act`](https://github.com/nektos/act), a tool for running GitHub Actions locally! The only prerequisite is Docker, which `act` uses to pull the appropriate images to run your actions.
+
+By default, `act` will run the action for the `push` event, although you can configure it to run specific events or jobs:
+
+```bash
+# run the `push` event:
+act
+
+# run a specific event:
+act pull_request
+
+# run a specific job:
+act -j test
+```
+
+If your action needs a GitHub token (for example, if you're checking out your code with [`actions/checkout`](https://github.com/actions/checkout)) you can supply it with the `-s` flag (for "secrets") and the `GITHUB_TOKEN` environment variable. This is easiest if you have the [GitHub CLI](https://cli.github.com/) installed:
+
+```bash
+act -s GITHUB_TOKEN="$(gh auth token)"
+```
+
+Note that the [official docs](https://github.com/nektos/act#github_token) note that supplying your token in this way can leak it to the shell history.

tailwind/import-tailwind.md

@@ -0,0 +1,11 @@
+# Difference between `@tailwind` and `@import tailwind/`
+
+While contributing in the [nodejs.org](https://github.com/nodejs/nodejs.org/) repository, the imported css file styles were not getting applied. It was covered in the Tailwind Docs [here](https://tailwindcss.com/docs/using-with-preprocessors#build-time-imports).
+
+The solution was to import the directives, from the `node_modules`.
+
+[@ovflowd](https://github.com/ovflowd) [explained](https://github.com/nodejs/nodejs.org/pull/5957#discussion_r1344718097) the difference as:
+
+> @tailwind hooks directly into PostCSS engine, as @tailwind is a custom PostCSS plugin, this usually has faster loading and building of CSS and has some optimizations. But for us at least the performance impact isn't noticeable. The regular import also imports the whole Tailwind styles instead of invoking Tailwind's plugin to simply add what we need (it prescans the codebase); The Tailwind PostCSS plugin will still do transformations and afterwards remove what we don't use (with regular imports).
+
+TIL - October 4th 2023.