miyagi-dev · dependabot · Jul 20, 2024 · Jul 21, 2024 · Jul 21, 2024 · Jul 22, 2024
diff --git a/.github/workflows/node.js.yml b/.github/workflows/node.js.yml
@@ -12,7 +12,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [16.10.0, 17.x, 18.x]
+        node-version: [20.x]
 
     steps:
       - uses: actions/checkout@v3
@@ -22,4 +22,4 @@ jobs:
           node-version: ${{ matrix.node-version }}
       - run: npm ci
       - run: npm run lint
-      - run: npm test
+      - run: npm run build && npm test
diff --git a/.gitignore b/.gitignore
@@ -1,5 +1,6 @@
-node_modules/
+build/
 coverage/
 dist/
+node_modules/
 vendor/
 .DS_Store
diff --git a/.miyagi.js b/.miyagi.js
@@ -0,0 +1,31 @@
+import fs from "node:fs";
+import { createEnvironment, createFilesystemLoader } from "twing";
+
+const loader = createFilesystemLoader(fs);
+const twing = createEnvironment(loader);
+
+export default {
+	components: {
+		folder: "tests/_setup/components",
+	},
+	docs: null,
+	engine: {
+		name: "twing",
+		async render({ name, context, cb }) {
+			try {
+				return cb(null, await twing.render(name, context));
+			} catch (err) {
+				return cb(err.toString());
+			}
+		},
+	},
+	files: {
+		templates: {
+			name: "<component>",
+			extension: "twig",
+		},
+	},
+	schema: {
+		strict: false,
+	},
+};
diff --git a/11ty/.eleventy.js b/11ty/.eleventy.js
@@ -0,0 +1,37 @@
+import navigationPlugin from "@11ty/eleventy-navigation";
+import EleventyNavigation from "@11ty/eleventy-navigation";
+import syntaxHighlightPlugin from "@11ty/eleventy-plugin-syntaxhighlight";
+import path from "node:path";
+import fs from "node:fs";
+
+export default function (eleventyConfig) {
+	const input = "../docs";
+	const output = "./_site";
+
+	eleventyConfig.addPassthroughCopy("css/pico.conditional.min.css");
+	eleventyConfig.addPassthroughCopy("css/prism-light.css");
+	eleventyConfig.addPassthroughCopy("css/prism-dark.css");
+	eleventyConfig.addPassthroughCopy("css/base.css");
+
+	// PLUGINS
+	eleventyConfig.addPlugin(navigationPlugin);
+	eleventyConfig.addPlugin(syntaxHighlightPlugin);
+	eleventyConfig.addPlugin(EleventyNavigation);
+
+	eleventyConfig.addGlobalData(
+		"version",
+		JSON.parse(fs.readFileSync("../package.json")).version,
+	);
+
+	return {
+		dir: {
+			input,
+			output,
+			data: path.relative("../docs", path.join(import.meta.dirname, "_data")),
+			includes: path.relative(
+				"../docs",
+				path.join(import.meta.dirname, "_includes"),
+			),
+		},
+	};
+}
diff --git a/11ty/.gitignore b/11ty/.gitignore
@@ -0,0 +1 @@
+_site/
diff --git a/11ty/_data/eleventyComputed.js b/11ty/_data/eleventyComputed.js
@@ -0,0 +1,27 @@
+import path from "node:path";
+
+import getHeadlines from "../lib/get-headlines.js";
+
+export default {
+	layout() {
+		return "layout.liquid";
+	},
+	eleventyNavigation(data) {
+		const dirName = path.dirname(data.page.filePathStem);
+
+		return {
+			key: data.page.fileSlug,
+			title: data.title,
+			parent: dirName.length > 1 ? dirName.slice(1) : null,
+			order: data.eleventyNavigation.order,
+		};
+	},
+	title(data) {
+		if (data.title) return data.title;
+
+		const headlines = getHeadlines(data.page.inputPath);
+		if (headlines.h1[0]) return headlines.h1[0].content;
+
+		return data.page.fileSlug || data.project_name;
+	},
+};
diff --git a/11ty/_includes/layout.liquid b/11ty/_includes/layout.liquid
@@ -0,0 +1,68 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>{{ title }}</title>
+		<link rel="stylesheet" href="/css/pico.conditional.min.css">
+		<link rel="stylesheet" href="/css/prism-light.css" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)">
+		<link rel="stylesheet" href="/css/prism-dark.css" media="(prefers-color-scheme: dark)">
+		<link rel="stylesheet" href="/css/base.css">
+  </head>
+  <body>
+		<details class="nav-mobile">
+			<summary>
+				<span>
+					<span>Navigation></span>
+				</span>
+				<svg aria-label="miyagi" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 787.99 159.5" width="98.5" height="20"><path fill="currentColor" d="M153.09 2.43l-67.6 83.06L17.9 2.43H0v154.65h171V2.43zm-1.76 135.65H19.66V33.8l65.83 80.63 65.84-80.63v104.28zm55-135.65v154.65h19.66V2.43zm215.39 0h-79.09l-12.15 19h55.67l-49.7 76.21-62.12-95.21h-23l75.56 114.87v39.78h19.66V117.3L421.72 2.43zM482.47.66l-86.14 156.42h172.3L482.47.66zm-52.8 137.42l52.8-97.87 53 97.87zm212.08-63.86l44 60.75a58.31 58.31 0 01-54.57-2.65 58.64 58.64 0 01-21.2-22.09 61.67 61.67 0 01-7.74-30.48 61 61 0 017.85-30.49 59.24 59.24 0 0121.43-22.09 58.7 58.7 0 0154-3 69.15 69.15 0 0120.51 14.27l13.92-12.36a80.75 80.75 0 00-26.07-19.12 75.25 75.25 0 00-32-7q-23.19 0-41.2 11.6a80 80 0 00-27.83 30 80 80 0 00-9.83 38.11 81.4 81.4 0 009.61 38.1 78.8 78.8 0 0027.39 30.05q17.77 11.6 41 11.6a70.76 70.76 0 0038.44-10.83 76.71 76.71 0 0027.06-29 82.68 82.68 0 009.81-39.84v-5.53zm58.54 51l-23.86-32.88h40.65a40.23 40.23 0 01-4.64 17.12 55.1 55.1 0 01-12.11 15.79zM768.33 2.43v154.64h19.66V2.43h-19.66z"/></svg>
+			</summary>
+			<nav>
+				{% assign navPages = collections.all | eleventyNavigation %}
+				<ul>
+					{%- for entry in navPages %}
+						<li>
+							<a href="{{ entry.url }}"{% if entry.url == page.url %} aria-current="page"{% endif %}>{{ entry.title }}</a>
+							{%- if entry.children -%}
+								<ul>
+									{%- for child in entry.children %}
+										<li>
+											<a href="{{ child.url }}"{% if child.url == page.url %} aria-current="page"{% endif %}>{{ child.title }}</a>
+										</li>
+									{%- endfor %}
+								</ul>
+							{%- endif %}
+						</li>
+					{%- endfor %}
+				</ul>
+				<small>v{{ version }} &middot; <a class="github-link" href="https://github.com/miyagi-dev">github.com/miyagi-dev</a></small>
+			</nav>
+		</details>
+		<nav class="nav-desktop">
+			<a href="/" style="color: var(--color-copy);" aria-label="miyagi">
+				<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 787.99 159.5" width="157.6" height="32"><path fill="currentColor" d="M153.09 2.43l-67.6 83.06L17.9 2.43H0v154.65h171V2.43zm-1.76 135.65H19.66V33.8l65.83 80.63 65.84-80.63v104.28zm55-135.65v154.65h19.66V2.43zm215.39 0h-79.09l-12.15 19h55.67l-49.7 76.21-62.12-95.21h-23l75.56 114.87v39.78h19.66V117.3L421.72 2.43zM482.47.66l-86.14 156.42h172.3L482.47.66zm-52.8 137.42l52.8-97.87 53 97.87zm212.08-63.86l44 60.75a58.31 58.31 0 01-54.57-2.65 58.64 58.64 0 01-21.2-22.09 61.67 61.67 0 01-7.74-30.48 61 61 0 017.85-30.49 59.24 59.24 0 0121.43-22.09 58.7 58.7 0 0154-3 69.15 69.15 0 0120.51 14.27l13.92-12.36a80.75 80.75 0 00-26.07-19.12 75.25 75.25 0 00-32-7q-23.19 0-41.2 11.6a80 80 0 00-27.83 30 80 80 0 00-9.83 38.11 81.4 81.4 0 009.61 38.1 78.8 78.8 0 0027.39 30.05q17.77 11.6 41 11.6a70.76 70.76 0 0038.44-10.83 76.71 76.71 0 0027.06-29 82.68 82.68 0 009.81-39.84v-5.53zm58.54 51l-23.86-32.88h40.65a40.23 40.23 0 01-4.64 17.12 55.1 55.1 0 01-12.11 15.79zM768.33 2.43v154.64h19.66V2.43h-19.66z"/></svg>
+			</a>
+			{% assign navPages = collections.all | eleventyNavigation %}
+			<ul>
+				{%- for entry in navPages %}
+					<li>
+						<a href="{{ entry.url }}"{% if entry.url == page.url %} aria-current="page"{% endif %}>{{ entry.title }}</a>
+						{%- if entry.children -%}
+							<ul>
+								{%- for child in entry.children %}
+									<li>
+										<a href="{{ child.url }}"{% if child.url == page.url %} aria-current="page"{% endif %}>{{ child.title }}</a>
+									</li>
+								{%- endfor %}
+							</ul>
+						{%- endif %}
+					</li>
+				{%- endfor %}
+			</ul>
+			<small>v{{ version }} &middot; <a class="github-link" href="https://github.com/miyagi-dev">github.com/miyagi-dev</a></small>
+		</nav>
+		<main class="container">
+    	{{ content }}
+		</main>
+  </body>
+</html>
diff --git a/11ty/css/base.css b/11ty/css/base.css
@@ -0,0 +1,178 @@
+html {
+	--hs: 220deg 24%;
+	--color-copy: light-dark(hsl(208deg 40% 20%), hsl(208deg 40% 80%));
+	--color-code: light-dark(hsl(var(--hs) 95%), hsl(var(--hs) 15%));
+	--color-divider: light-dark(hsl(var(--hs) 75%), hsl(var(--hs) 25%));
+	--color-bg: light-dark(#fff, hsl(var(--hs) 10%));
+	--gap: clamp(2rem, 5vi, 5rem);
+	--pico-font-size: 100% !important;
+
+	color-scheme: light;
+	background: var(--color-bg);
+}
+
+body {
+	display: grid;
+	gap: var(--gap);
+	color: var(--color-copy);
+	max-inline-size: 72em;
+	margin-inline: auto;
+	font-size: 1.125rem;
+}
+
+pre {
+	background: var(--color-code);
+	border: 0.0625rem solid transparent;
+}
+
+:not(pre) > code {
+	background: var(--color-code);
+	font-size-adjust: 0.45;
+	padding: 0.2em;
+}
+
+h1 {
+	margin-block-start: 0;
+}
+
+a {
+	color: light-dark(hsl(312deg 35% 25%), hsl(312deg 35% 75%));
+}
+
+[aria-current="page"] {
+	font-weight: bold;
+	text-decoration: underline;
+}
+
+nav {
+	font-size: 1rem;
+}
+
+nav a {
+	text-decoration: none;
+}
+
+nav a:hover {
+	text-decoration: underline;
+}
+
+nav svg {
+	margin-block-start: 0.75em;
+}
+
+nav ul {
+	list-style: "";
+	padding-inline-start: 0;
+}
+
+nav > ul {
+	border-block-end: 0.0625em solid var(--color-divider);
+	padding-block-end: 2em;
+	margin-block-end: 2em;
+}
+
+nav > ul > li > a {
+	font-weight: 500;
+}
+
+nav ul ul {
+	padding-inline-start: 1.5em;
+	font-size: 0.875em;
+}
+
+nav li {
+	margin-block-start: 0.5em;
+}
+
+main {
+	overflow-x: hidden;
+}
+
+@media (width <= 64em) {
+	.nav-desktop {
+		display: none;
+	}
+
+	.nav-mobile {
+		position: sticky;
+		inset-block-start: 0;
+		background: var(--color-bg);
+		padding-inline: 1rem;
+		max-block-size: 100dvb;
+		overflow-y: auto;
+		overscroll-behavior: contain;
+	}
+
+	.nav-mobile summary {
+		list-style: none;
+		display: flex;
+		align-items: center;
+		gap: 1rem;
+		position: sticky;
+		inset-block-start: 0;
+		background: var(--color-bg);
+		padding-block: 1rem;
+	}
+
+	.nav-mobile summary::-webkit-details-marker {
+		display: none;
+	}
+
+	.nav-mobile summary > span {
+		display: block;
+		inline-size: 1.25em;
+		height: 1em;
+		background: linear-gradient(
+			to bottom,
+			var(--color-copy) 17.5%,
+			transparent 17.5%,
+			transparent 42.5%,
+			var(--color-copy) 42.5%,
+			var(--color-copy) 57.5%,
+			transparent 57.5%,
+			transparent 82.5%,
+			var(--color-copy) 82.5%
+		);
+	}
+
+	.nav-mobile summary span span {
+		position: absolute;
+		width: 1px;
+		height: 1px;
+		margin: -1px;
+		border: 0;
+		padding: 0;
+		clip-path: inset(100%);
+		clip: rect(0 0 0 0);
+		overflow: hidden;
+	}
+
+	.nav-mobile nav {
+		padding-block-end: 1rem;
+	}
+}
+
+.github-link {
+	font-weight: 600;
+}
+
+@media (width > 64em) {
+	body {
+		grid-template-columns: 14rem 1fr;
+		padding: var(--gap);
+	}
+
+	.nav-mobile {
+		display: none;
+	}
+
+	.nav-desktop > ul {
+		margin-block-start: 2rem;
+	}
+}
+
+@media (prefers-color-scheme: dark) {
+	html {
+		color-scheme: dark;
+	}
+}
diff --git a/11ty/css/pico.conditional.min.css b/11ty/css/pico.conditional.min.css
diff --git a/11ty/css/prism-dark.css b/11ty/css/prism-dark.css
diff --git a/11ty/css/prism-light.css b/11ty/css/prism-light.css