alice.pds.demo.boltless.dev
This repository has no description
1// generates src/styles/sidebar-icons.css from lucide-astro's icons.
2// sidebar entries opt in via `attrs: { "data-icon": "<name>" }` in
3// astro.config.mjs. to add an icon, extend the map below and run:
4//
5// node scripts/gen-sidebar-icons.mjs
6import { readFileSync, writeFileSync } from "node:fs";
7import { dirname, join } from "node:path";
8import { fileURLToPath } from "node:url";
9
10// data-icon name -> lucide-astro component
11const ICONS = {
12 rocket: "Rocket",
13 "at-sign": "AtSign",
14 globe: "Globe",
15 "life-buoy": "LifeBuoy",
16 server: "Server",
17 "hard-drive": "HardDrive",
18 workflow: "Workflow",
19 play: "Play",
20 "key-round": "KeyRound",
21 network: "Network",
22 webhook: "Webhook",
23 cable: "Cable",
24 "arrow-up-circle": "ArrowUpCircle",
25 hammer: "Hammer",
26 "git-pull-request": "GitPullRequest",
27};
28
29const root = join(dirname(fileURLToPath(import.meta.url)), "..");
30
31const svgFor = (component) => {
32 const source = readFileSync(
33 join(root, "node_modules/lucide-astro/dist", `${component}.astro`),
34 "utf8",
35 );
36 const body = source
37 .split("\n")
38 .filter((line) => line.trim().startsWith("<") && !line.includes("Layout"))
39 .map((line) => line.trim())
40 .join("");
41 return (
42 '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" ' +
43 'stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">' +
44 body +
45 "</svg>"
46 );
47};
48
49let css = `/* GENERATED by scripts/gen-sidebar-icons.mjs — do not edit by hand */
50
51#starlight__sidebar a[data-icon]::before {
52 content: "";
53 display: inline-block;
54 width: 1rem;
55 height: 1rem;
56 margin-inline-end: 0.4em;
57 vertical-align: -0.19em;
58 background-color: currentColor;
59 -webkit-mask-size: 100%;
60 mask-size: 100%;
61}
62`;
63
64for (const [name, component] of Object.entries(ICONS)) {
65 const url = `url("data:image/svg+xml,${encodeURIComponent(svgFor(component))}")`;
66 css += `
67#starlight__sidebar a[data-icon="${name}"]::before {
68 -webkit-mask-image: ${url};
69 mask-image: ${url};
70}
71`;
72}
73
74writeFileSync(join(root, "src/styles/sidebar-icons.css"), css);
75console.log(`wrote src/styles/sidebar-icons.css (${Object.keys(ICONS).length} icons)`);