Switch to 11ty (#16)

Author: DmitrySharabin

.gitignore

@@ -0,0 +1,9 @@
+node_modules
+.DS_Store
+Thumbs.db
+
+# Generated files
+*.html
+
+# Cache
+.cache

.prettierrc.json

@@ -0,0 +1,18 @@
+
+{
+	"plugins": [
+		"prettier-plugin-brace-style",
+		"prettier-plugin-space-before-function-paren",
+		"prettier-plugin-merge"
+	],
+	"braceStyle": "stroustrup",
+	"arrowParens": "avoid",
+	"bracketSpacing": true,
+	"endOfLine": "auto",
+	"semi": true,
+	"singleQuote": false,
+	"tabWidth": 4,
+	"useTabs": true,
+	"trailingComma": "all",
+	"printWidth": 100
+}

.vscode/settings.json

@@ -0,0 +1,6 @@
+{
+	"editor.formatOnSave": true,
+	"editor.defaultFormatter": "esbenp.prettier-vscode",
+	"prettier.enable": true,
+	"debug.enableStatusBarColor": false
+}

README.json

@@ -0,0 +1,7 @@
+{
+	"layout": "home.njk",
+	"resources": [
+		"https://plugins.prismjs.com/keep-markup/prism-keep-markup.js",
+		"https://dev.prismjs.com/components/prism-bash.js"
+	]
+}

README.md

@@ -0,0 +1,58 @@
+import markdownItAnchor from "markdown-it-anchor";
+import markdownItAttrs from "markdown-it-attrs";
+import markdownItDeflist from "markdown-it-deflist";
+import pluginTOC from "eleventy-plugin-toc";
+import * as filters from "./filters.js";
+
+import components from "prismjs/components.json" with { type: "json" };
+
+export default config => {
+	let data = {
+		components,
+		layout: "page.njk",
+		autoloader: true,
+		theme_switcher: true,
+		toc: true,
+		permalink: `{{ "index" if page.filePathStem == "/README" else page.filePathStem }}.html`,
+	};
+
+	for (let p in data) {
+		config.addGlobalData(p, data[p]);
+	}
+
+	for (let f in filters) {
+		config.addFilter(f, filters[f]);
+	}
+
+	config.amendLibrary("md", md => {
+		md.options.typographer = true;
+		md.options.linkify = true;
+		md.use(markdownItAnchor, {
+			permalink: markdownItAnchor.permalink.headerLink(),
+		});
+		md.use(markdownItAttrs);
+		md.use(markdownItDeflist);
+
+		// Allow setting attributes on the outer <pre>, not the inner <code>
+		md.renderer.rules.fence = function (tokens, idx, options, env, slf) {
+			let token = tokens[idx];
+			let lang = token.info ? `class="language-${token.info}"` : "";
+			let content = md.utils.escapeHtml(token.content).trim();
+			return `<pre ${slf.renderAttrs(token)}><code ${lang}>${content}</code></pre>`;
+		};
+	});
+
+	config.addPlugin(pluginTOC, {
+		tags: ["h1", "h2", "h3"],
+		ul: true,
+	});
+
+	return {
+		markdownTemplateEngine: "njk",
+		templateFormats: ["md", "njk"],
+		dir: {
+			layouts: "_layouts",
+			output: ".",
+		},
+	};
+};

_build/eleventy.js

@@ -0,0 +1,56 @@
+import * as path from "path";
+
+export function relative (page) {
+	if (!page.url) {
+		return "";
+	}
+
+	let pagePath = page.url.replace(/[^/]+$/, "");
+	let ret = path.relative(pagePath, "/");
+
+	return ret || ".";
+}
+
+export function back_to_top (content) {
+	// Add “↑ Back to top” at the end of each `<section>`
+	return content.replace(/<\/section>/g, `<p><a href="#toc" class="back-to-top">↑ Back to top</a></p></section>`);
+}
+
+export function pretty_size (size) {
+	return Math.round(100 * size / 1024) / 100 + "KB";
+}
+
+export function parse_resources (resources = []) {
+	let ret = [];
+
+	resources = Array.isArray(resources) ? resources : [resources];
+	for (let resource of resources) {
+		resource = resource.trim();
+		let url = resource;
+
+		// Attributes are defined as in markdown-it-attrs but we don't parse them and use them as-is.
+		// For example: `{ data-autoloader-path="https://dev.prismjs.com/components/" }`
+		let attributes = resource.match(/\{.*\}$/)?.[0];
+		if (!attributes) {
+			attributes = "";
+		}
+		else {
+			url = url.replace(attributes, "").trim();
+			attributes = attributes.slice(1, -1).trim(); // remove the curly braces
+		}
+
+		let extension = url.match(/\.([^.]+)$/)?.[1];
+		if (extension === "js" || extension === "mjs") {
+			ret.push(`<script src="${url}" ${attributes}></script>`);
+		}
+		else if (extension === "css") {
+			ret.push(`<link rel="stylesheet" href="${url}" ${attributes} />`);
+		}
+		else {
+			// Raw HTML
+			ret.push(url);
+		}
+	}
+
+	return ret;
+}

_build/filters.js

@@ -0,0 +1,51 @@
+export default {
+	plugins (data) {
+		let plugins = { ...data.components.plugins };
+		delete plugins.meta;
+		return plugins;
+	},
+	themes (data) {
+		let themes = { ...data.components.themes };
+		delete themes.meta;
+		return themes;
+	},
+	languages (data) {
+		let languages = { ...data.components.languages };
+		delete languages.meta;
+
+		for (let id in languages) {
+			let ret = [id];
+			let alias = languages[id].alias;
+			if (alias) {
+				ret = ret.concat(Array.isArray(alias) ? alias : [alias]);
+			}
+			languages[id].alias = ret;
+		}
+
+		return languages;
+	},
+	title (data) {
+		if (data.title) {
+			return data.title;
+		}
+
+		let path = data.page.inputPath;
+		path = path.slice(2);
+
+		let title = path.replace(".md", "");
+		if (title === "README") {
+			return;
+		}
+
+		title = title.replace(/-/g, " ");
+
+		return title[0].toUpperCase() + title.slice(1);
+	},
+	files_sizes (data) {
+		let ret = {};
+		for (let file of data.tree) {
+			ret[file.path] = file.size;
+		}
+		return ret;
+	},
+};

_data/eleventyComputed.js

@@ -0,0 +1,14 @@
+import Fetch from "@11ty/eleventy-fetch";
+
+export default async () => {
+	let repo = await Fetch(
+		// TODO: Replace with "https://api.github.com/repos/PrismJS/prism/git/trees/main?recursive=1" when v2 is launched
+		"https://api.github.com/repos/PrismJS/prism/git/trees/master?recursive=1",
+		{
+			duration: "1d",
+			type: "json",
+		},
+	);
+
+	return repo.tree;
+};

_data/tree.js

@@ -0,0 +1,37 @@
+{% extends "./page.njk" %}
+
+{% block head_extra -%}
+<script>
+	// Just a lil’ script to show off that inline JS gets highlighted
+	console.log("foo");
+</script>
+{%- endblock %}
+
+{% block header_extra -%}
+<ul id="features">
+	<li>
+		<strong>Dead simple</strong>
+		Include prism.css and prism.js, use proper HTML5 code tags (<code>code.language-xxxx</code>), done!
+	</li>
+	<li>
+		<strong>Intuitive</strong>
+		Language classes are inherited so you can only define the language once for multiple code snippets.
+	</li>
+	<li>
+		<strong>Light as a feather</strong>
+		The core is 2KB minified &amp; gzipped. Languages add 0.3-0.5KB each, themes are around 1KB.
+	</li>
+	<li>
+		<strong>Blazing fast</strong>
+		Supports parallelism with Web Workers, if available.
+	</li>
+	<li>
+		<strong>Extensible</strong>
+		Define new languages or extend existing ones. Add new features thanks to Prism’s plugin architecture.
+	</li>
+	<li>
+		<strong>Easy styling</strong>
+		All styling is done through CSS, with sensible class names like <code>.comment</code>, <code>.string</code>, <code>.property</code> etc
+	</li>
+</ul>
+{%- endblock %}