Build plugins docs during the website build

.gitignore

@@ -5,6 +5,7 @@ Thumbs.db
 # Generated files
 *.html
 api
+plugins
 
 # Cache
 .cache

README.md

@@ -240,10 +240,11 @@ Couldn’t find the language you were looking for? [Request it](https://github.c
 Plugins are additional scripts (and CSS code) that extend Prism’s functionality. Many of the following plugins are official, but are released as plugins to keep the Prism Core small for those who don’t need the extra functionality.
 
 <ul class="plugin-list">
-	{% for id, plugin in plugins -%}
+	{% for plugin in collections.plugin -%}
+	{%- set meta = plugin.data -%}
 	<li>
-		<a href="https://plugins.prismjs.com/{{ id }}">{{ plugin.title }}</a>
-		<div>{{ plugin.description | safe }}</div>
+		<a href="plugins/{{ meta.id }}">{{ meta.title | md }}</a>
+		<div>{{ meta.description | md }}</div>
 	</li>
 	{% endfor -%}
 </ul>

_build/copy-plugins.mjs

@@ -0,0 +1,47 @@
+import fs from "fs/promises";
+import path from "path";
+import { fileURLToPath } from "url";
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+
+const sourcePath = path.resolve(__dirname, "../node_modules/prismjs/src/plugins");
+const destPath = path.resolve(__dirname, "../plugins");
+
+async function copy () {
+	// We need { recursive: true } so the script doesn't fail if the folder already exists
+	await fs.mkdir(destPath, { recursive: true });
+
+	let plugins = await fs.readdir(sourcePath, { withFileTypes: true });
+	for (let plugin of plugins) {
+		if (!plugin.isDirectory()) {
+			continue;
+		}
+
+		let source = path.join(sourcePath, plugin.name);
+		let dest = path.join(destPath, plugin.name);
+		await fs.mkdir(dest, { recursive: true });
+
+		let files = await fs.readdir(source, { withFileTypes: true });
+		for (let file of files) {
+			if (!file.isFile()) {
+				continue;
+			}
+
+			let name = path.parse(file.name).name;
+			// Don't copy the plugin source files
+			if (!name.endsWith(plugin.name)) {
+				await fs.copyFile(path.join(source, file.name), path.join(dest, file.name));
+			}
+		}
+	}
+}
+
+await copy();
+
+// Create plugins.json in the plugins folder with global data
+let json = {
+	permalink: "{{ page.filePathStem.replace('README', '') }}/index.html",
+	tags: ["plugin"],
+};
+
+await fs.writeFile(path.join(destPath, "plugins.json"), JSON.stringify(json, null, "\t"));

_build/eleventy.js

@@ -4,7 +4,7 @@ import markdownItDeflist from "markdown-it-deflist";
 import pluginTOC from "eleventy-plugin-toc";
 import * as filters from "./filters.js";
 
-import components from "prismjs/src/components.json" with { type: "json" };
+import components from "../node_modules/prismjs/src/components.json" with { type: "json" };
 
 /** @param {import("@11ty/eleventy").UserConfig} config */
 export default config => {
@@ -72,6 +72,9 @@ export default config => {
 		ul: true,
 	});
 
+	// Don't ignore the folders that are gitignored (plugins, examples, themes, etc.)
+	config.setUseGitIgnore(false);
+
 	return {
 		markdownTemplateEngine: "njk",
 		templateFormats: ["md", "njk"],

_data/eleventyComputed.js

@@ -1,13 +1,6 @@
 export default {
 	components (data) {
-		let components = { ...data.components };
-		components.plugins = { ...(data.pluginsWithMeta ?? {}) };
-		return components;
-	},
-	plugins (data) {
-		let plugins = { ...data.pluginsWithMeta };
-		delete plugins.meta;
-		return plugins;
+		return { ...data.components };
 	},
 	themes (data) {
 		let themes = { ...data.components.themes };
@@ -29,6 +22,14 @@ export default {
 
 		return languages;
 	},
+	// Plugin id
+	id (data) {
+		let parts = data.page.inputPath.slice(2).split("/");
+		if (parts[0] === "plugins") {
+			// Folder name ↔ plugin id
+			return parts[1];
+		}
+	},
 	title (data) {
 		if (data.title) {
 			return data.title;
@@ -46,6 +47,26 @@ export default {
 
 		return title[0].toUpperCase() + title.slice(1);
 	},
+	resources (data) {
+		let { id, resources = [] } = data;
+		let ret = [];
+
+		resources = Array.isArray(resources) ? resources : [resources];
+		ret.push(...resources);
+
+		if (!id) {
+			return ret;
+		}
+
+		// We are working with plugin resources
+		ret.push(`./prism-${id}.js { type="module" }`);
+
+		if (!data.noCSS) {
+			ret.push(`./prism-${id}.css`);
+		}
+
+		return ret;
+	},
 	files_sizes (data) {
 		let ret = {};
 		for (let file of data.tree) {

_redirects

@@ -0,0 +1,10 @@
+# Do not redirect
+/plugins/:plugin/index.html    /plugins/:plugin/index.html                    200
+/plugins/:plugin/demo.html     /plugins/:plugin/demo.html                     200
+/plugins/:plugin/demo.js       /plugins/:plugin/demo.js                       200
+
+# Components: languages, themes, plugins, etc.
+/plugins/:plugin/:file         https://dev.prismjs.com/plugins/:plugin/:file  301
+
+# Make the autoloader plugin work
+/plugins/:plugin/components/*  https://dev.prismjs.com/components/:splat      301

assets/style.css

@@ -905,3 +905,14 @@ ul.plugin-list {
 		border-bottom-left-radius: 0;
 	}
 }
+
+/* Decorate only the first link in headings */
+section :is(h1, h2, h3)[id] {
+	a:not(:first-of-type) {
+		text-decoration: revert;
+
+		&::before {
+			display: none;
+		}
+	}
+}

package.json

@@ -4,6 +4,7 @@
 	"description": "The website of prismjs.com",
 	"type": "module",
 	"scripts": {
+		"postinstall": "node _build/copy-plugins.mjs",
 		"dependencies": "npm install --prefix node_modules/prismjs",
 		"dev": "netlify dev -p 8844",
 		"serve": "npx @11ty/eleventy --config=_build/eleventy.js --serve --quiet",