docs(site): add a favicon so link cards show a thumbnail

docs/docusaurus.config.js

@@ -14,6 +14,18 @@ const config = {
   projectName: "Qoderian",
   trailingSlash: false,
 
+  headTags: [
+    {
+      tagName: "link",
+      attributes: {
+        rel: "icon",
+        type: "image/svg+xml",
+        // headTags hrefs are emitted verbatim, so the baseUrl prefix is manual.
+        href: "/Qoderian/img/favicon.svg",
+      },
+    },
+  ],
+
   onBrokenLinks: "throw",
 
   i18n: {

docs/scripts/sync-assets.mjs

@@ -1,6 +1,6 @@
 // Copies shared repository assets into the website's static dir so the
 // published site can reference them without committing duplicates.
-import { copyFileSync, mkdirSync } from "node:fs";
+import { copyFileSync, mkdirSync, readFileSync, writeFileSync } from "node:fs";
 import { dirname, join } from "node:path";
 import { fileURLToPath } from "node:url";
 
@@ -19,3 +19,20 @@ for (const [from, to] of targets) {
   copyFileSync(join(repoRoot, from), dest);
   console.log(`synced ${from} -> docs/${to}`);
 }
+
+// The favicon reuses the plugin icon, but a favicon has no surrounding text
+// color for currentColor to inherit, so the theme switch is made explicit:
+// black mark on light browser chrome, white on dark.
+const favicon = readFileSync(join(repoRoot, "src/assets/qoder-icon.svg"), "utf8")
+  .replace('fill="currentColor"', 'class="qf"')
+  .replace('stroke="currentColor"', 'class="qs"')
+  .replace(
+    /<svg[^>]*>/,
+    (tag) =>
+      `${tag}<style>.qf{fill:#000}.qs{fill:none;stroke:#000}` +
+      "@media (prefers-color-scheme: dark){.qf{fill:#fff}.qs{stroke:#fff}}</style>",
+  );
+const faviconDest = join(siteDir, "static/img/favicon.svg");
+mkdirSync(dirname(faviconDest), { recursive: true });
+writeFileSync(faviconDest, favicon);
+console.log("built src/assets/qoder-icon.svg -> docs/static/img/favicon.svg");