[Docs Site] Adopt eslint (#19263)

* [Docs Site] Adopt eslint * Demonstrate a fixable suggestion, add VSCode plugin and package.json script * Fix slice in ModelCatalog * Remove test error in AnchorHeading * recreate package-lock.json * update new .jsx components to .tsx * amend deps, fix react types, organise ec plugins * another attempt at fixing platform-specific deps * fix FieldCatalog filters, remove test block from code.mdx * use opacity instead of brightness for ruleid * fix lockfile * amend ruleid opacity styling * test onetrust * enable prefer const rule, remove onetrust test * add save-dev
cloudflare · Jan 21, 2025 · a1bf485 · a1bf485
1 parent 8adca6b
commit a1bf485
Show file tree

Hide file tree

Showing 49 changed files with 15,003 additions and 11,651 deletions.
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -30,6 +30,12 @@ jobs:
       - run: npm ci
       - run: npm run check
 
+      - uses: reviewdog/action-eslint@v1
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          reporter: github-pr-review
+          fail_level: "error"
+
       - run: npm run format:core:check
       ## TODO: content formatting checks
       - run: npm run build

diff --git a/.npmrc b/.npmrc
@@ -0,0 +1,2 @@
+save-dev=true
+save-exact=true
diff --git a/.vscode/extensions.json b/.vscode/extensions.json
@@ -6,6 +6,7 @@
 		"unifiedjs.vscode-mdx",
 		"bradlc.vscode-tailwindcss",
 		"redhat.vscode-yaml",
-		"esbenp.prettier-vscode"
+		"esbenp.prettier-vscode",
+		"dbaeumer.vscode-eslint"
 	]
 }
diff --git a/bin/validate-redirects.ts b/bin/validate-redirects.ts
@@ -6,7 +6,8 @@ async function main() {
 	let numInfiniteRedirects = 0;
 	let numUrlsWithFragment = 0;
 	let numDuplicateRedirects = 0;
-	let redirectSourceUrls: string[] = [];
+
+	const redirectSourceUrls: string[] = [];
 
 	for (const line of redirects.split("\n")) {
 		if (line.startsWith("#") || line.trim() === "") continue;

diff --git a/ec.config.mjs b/ec.config.mjs
@@ -2,162 +2,17 @@
 import darkTheme from "solarflare-theme/themes/cloudflare-dark-color-theme.json" with { type: "json" };
 import lightTheme from "solarflare-theme/themes/cloudflare-light-color-theme.json" with { type: "json" };
 
-import { definePlugin } from "@expressive-code/core";
-import { h } from "@expressive-code/core/hast";
+import pluginWorkersPlayground from "./plugins/expressive-code/workers-playground.js";
+import pluginOutputFrame from "./plugins/expressive-code/output-frame.js";
+import pluginDefaultTitles from "./plugins/expressive-code/default-titles.js";
 
 import { pluginCollapsibleSections } from "@expressive-code/plugin-collapsible-sections";
 
-import lzstring from "lz-string";
-
-/**
- * @param {string} code
- */
-export function serialiseWorker(code) {
-	const formData = new FormData();
-
-	const metadata = {
-		main_module: "index.js",
-	};
-
-	formData.set(
-		"index.js",
-		new Blob([code], {
-			type: "application/javascript+module",
-		}),
-		"index.js",
-	);
-
-	formData.set(
-		"metadata",
-		new Blob([JSON.stringify(metadata)], { type: "application/json" }),
-	);
-
-	return formData;
-}
-
-/**
- * @param {FormData} worker
- */
-export async function compressWorker(worker) {
-	const serialisedWorker = new Response(worker);
-	return lzstring.compressToEncodedURIComponent(
-		`${serialisedWorker.headers.get(
-			"content-type",
-		)}:${await serialisedWorker.text()}`,
-	);
-}
-
-function workersPlaygroundButton() {
-	return definePlugin({
-		name: "Adds 'Run Worker' button to JS codeblocks",
-		baseStyles: `
-        .run {
-            display: flex;
-            gap: 0.25rem;
-            flex-direction: row;
-            position: absolute;
-            inset-block-start: calc(var(--ec-brdWd) + var(--button-spacing));
-            inset-inline-end: calc(var(--ec-brdWd) + var(--ec-uiPadInl) * 3);
-            direction: ltr;
-            unicode-bidi: isolate;
-
-            text-decoration-color: var(--sl-color-accent);
-            span {
-                color: var(--sl-color-white);
-                font-family: var(--sl-font-system);
-            }
-        }
-        `,
-		hooks: {
-			postprocessRenderedBlock: async (context) => {
-				if (!context.codeBlock.meta.includes("playground")) return;
-
-				const serialised = await compressWorker(
-					serialiseWorker(context.codeBlock.code),
-				);
-
-				const url = `https://workers.cloudflare.com/playground#${serialised}`;
-
-				const runButton = h("a.run", { href: url, target: "__blank" }, [
-					h("span", "Run Worker in Playground"),
-				]);
-
-				const ast = context.renderData.blockAst;
-				ast.children.push(runButton);
-
-				context.renderData.blockAst = ast;
-			},
-		},
-	});
-}
-
-function outputCodeblocks() {
-	return definePlugin({
-		name: "Adds the '.code-output' class if 'output' is passed on the opening codefence.",
-		hooks: {
-			preprocessMetadata: async (context) => {
-				if (!context.codeBlock.meta.includes("output")) return;
-				context.codeBlock.props.frame = "none";
-			},
-			postprocessRenderedBlock: async (context) => {
-				if (!context.codeBlock.meta.includes("output")) return;
-				context.renderData.blockAst.properties.className ??= [];
-				if (Array.isArray(context.renderData.blockAst.properties.className)) {
-					context.renderData.blockAst.properties.className.push("code-output");
-				}
-				context.addStyles(`
-					div.expressive-code:has(figure.code-output) {
-						margin-top: 0 !important;
-					}
-
-					.code-output .copy {
-						display: none !important;
-					}
-
-					.code-output > pre {
-						border-top-width: 0 !important;
-						background: var(--sl-color-gray-6) !important;
-					}
-
-					.code-output > pre > code {
-						user-select: none;
-						transition: opacity 0.5s ease;
-					}
-
-					.code-output > pre > code:hover {
-						cursor: default;
-						opacity: 0.5;
-					}
-				`);
-			},
-		},
-	});
-}
-
-function defaultLanguageTitles() {
-	return definePlugin({
-		name: "Adds language-specific default titles.",
-		hooks: {
-			preprocessLanguage: async (context) => {
-				switch (context.codeBlock.language) {
-					case "powershell": {
-						context.codeBlock.props.title ??= "PowerShell";
-						break;
-					}
-					default: {
-						return;
-					}
-				}
-			},
-		},
-	});
-}
-
 export default {
 	plugins: [
-		workersPlaygroundButton(),
-		outputCodeblocks(),
-		defaultLanguageTitles(),
+		pluginWorkersPlayground(),
+		pluginOutputFrame(),
+		pluginDefaultTitles(),
 		pluginCollapsibleSections(),
 	],
 	themes: [darkTheme, lightTheme],

diff --git a/eslint.config.js b/eslint.config.js
@@ -0,0 +1,42 @@
+import pluginJavaScript from "@eslint/js";
+import pluginTypeScript from "typescript-eslint";
+import pluginReact from "eslint-plugin-react";
+import pluginAstro from "eslint-plugin-astro";
+import pluginReactA11y from "eslint-plugin-jsx-a11y";
+
+import globals from "globals";
+
+/** @type {import('eslint').Linter.Config[]} */
+export default [
+	{
+		languageOptions: {
+			globals: {
+				...globals.node,
+			},
+		},
+	},
+	pluginJavaScript.configs.recommended,
+	...pluginTypeScript.configs.recommended,
+	...pluginAstro.configs.recommended,
+	...pluginAstro.configs["jsx-a11y-recommended"],
+	{
+		files: ["**/*.{js,mjs,cjs,jsx,mjsx,ts,tsx,mtsx}"],
+		...pluginReact.configs.flat.recommended,
+		...pluginReactA11y.flatConfigs.recommended,
+		...pluginReact.configs.flat["jsx-runtime"],
+	},
+	{
+		ignores: [".astro/", ".wrangler/", "dist/", ".github/"],
+	},
+	{
+		rules: {
+			"no-var": "error",
+			"@typescript-eslint/no-explicit-any": "off",
+			"@typescript-eslint/triple-slash-reference": "off",
+			"@typescript-eslint/no-unused-vars": [
+				"error",
+				{ ignoreRestSiblings: true },
+			],
+		},
+	},
+];