Fix lint

client/app/components/ui/icons/name.d.ts

@@ -1,7 +1,7 @@
 // This file is generated by npm run build:icons
-
-export type IconName =
-	| "arrow-down"
+  
+  export type IconName =
+  	| "arrow-down"
 	| "arrow-left"
 	| "arrow-up"
 	| "atom"
@@ -56,3 +56,4 @@ export type IconName =
 	| "text-cursor-input"
 	| "x"
 	| "zap";
+

client/package.json

@@ -75,7 +75,6 @@
 		"rehype-slug": "^6.0.0",
 		"remark-frontmatter": "^5.0.0",
 		"remark-mdx-frontmatter": "^4.0.0",
-		"remark-mdx-images": "^3.0.0",
 		"remix-flat-routes": "^0.6.4",
 		"shiki": "^1.1.7",
 		"svg-icons-cli": "^0.0.7",

client/remark-mdx-images.ts

@@ -0,0 +1,112 @@
+import type { ImportDeclaration } from "estree";
+import type { Root } from "mdast";
+import type { MdxJsxTextElement } from "mdast-util-mdx";
+import type { Plugin } from "unified";
+import { visit } from "unist-util-visit";
+
+export interface RemarkMdxImagesOptions {
+	/**
+	 * By default imports are resolved relative to the markdown file. This matches default markdown
+	 * behaviour. If this is set to false, this behaviour is removed and URLs are no longer processed.
+	 * This allows to import images from `node_modules`. If this is disabled, local images can still
+	 * be imported by prepending the path with `./`.
+	 *
+	 * @default true
+	 */
+	resolve?: boolean;
+}
+
+const urlPattern = /^(https?:)?\//;
+const relativePathPattern = /\.\.?\//;
+
+/**
+ * A Remark plugin for converting Markdown images to MDX images using imports for the image source.
+ */
+const remarkMdxImages: Plugin<[RemarkMdxImagesOptions?], Root> =
+	({ resolve = true } = {}) =>
+	(ast) => {
+		const imports: ImportDeclaration[] = [];
+		const imported = new Map<string, string>();
+
+		visit(ast, "image", (node, index, parent) => {
+			let { alt = null, title, url } = node;
+			url = decodeURIComponent(url);
+			if (urlPattern.test(url)) {
+				return;
+			}
+			if (!relativePathPattern.test(url) && resolve) {
+				url = `./${url}`;
+			}
+
+			let name = imported.get(url);
+			if (!name) {
+				name = `__${imported.size}_${url.replaceAll(/\W/g, "_")}__`;
+
+				imports.push({
+					type: "ImportDeclaration",
+					source: { type: "Literal", value: url },
+					specifiers: [
+						{
+							type: "ImportDefaultSpecifier",
+							local: { type: "Identifier", name },
+						},
+					],
+				});
+				imported.set(url, name);
+			}
+
+			const textElement: MdxJsxTextElement = {
+				type: "mdxJsxTextElement",
+				name: "img",
+				children: [],
+				attributes: [
+					{ type: "mdxJsxAttribute", name: "alt", value: alt },
+					{
+						type: "mdxJsxAttribute",
+						name: "src",
+						value: {
+							type: "mdxJsxAttributeValueExpression",
+							value: name,
+							data: {
+								estree: {
+									type: "Program",
+									sourceType: "module",
+									comments: [],
+									body: [
+										{
+											type: "ExpressionStatement",
+											expression: { type: "Identifier", name },
+										},
+									],
+								},
+							},
+						},
+					},
+				],
+			};
+			if (title) {
+				textElement.attributes.push({
+					type: "mdxJsxAttribute",
+					name: "title",
+					value: title,
+				});
+			}
+			parent!.children.splice(index!, 1, textElement);
+		});
+
+		if (imports.length) {
+			ast.children.unshift({
+				type: "mdxjsEsm",
+				value: "",
+				data: {
+					estree: {
+						type: "Program",
+						sourceType: "module",
+						body: imports,
+					},
+				},
+			});
+		}
+	};
+
+export default remarkMdxImages;

client/vite.config.ts

@@ -6,7 +6,7 @@ import { setDefaultResultOrder } from "node:dns";
 import mdx from "@mdx-js/rollup";
 import remarkFrontmatter from "remark-frontmatter";
 import remarkMdxFrontmatter from "remark-mdx-frontmatter";
-import remarkMdxImages from "remark-mdx-images";
+import remarkMdxImages from "./remark-mdx-images";
 import rehypeAutolinkHeadings from "rehype-autolink-headings";
 import rehypeSlug from "rehype-slug";
 import rehypeShiki from "@shikijs/rehype";
@@ -15,7 +15,12 @@ setDefaultResultOrder("ipv4first");
 export default defineConfig({
 	plugins: [
 		mdx({
-			remarkPlugins: [remarkFrontmatter, remarkMdxFrontmatter, remarkMdxImages],
+			remarkPlugins: [
+				remarkFrontmatter,
+				remarkMdxFrontmatter,
+				// @ts-ignore
+				remarkMdxImages,
+			],
 			rehypePlugins: [
 				rehypeSlug,
 				rehypeAutolinkHeadings,