diff --git a/README.md b/README.md index 06e46eb..cb39814 100644 --- a/README.md +++ b/README.md @@ -77,10 +77,9 @@ Start from a shadcn/ui project (React 19, Tailwind CSS 4, the Base UI components npx shadcn@latest init ``` -Add the stylesheet, from the site or straight from this repository: +Add the stylesheet, straight from this repository: ```bash -npx shadcn@latest add https://deeplethe.github.io/solid-glass/r/solid-glass.json npx shadcn@latest add deeplethe/solid-glass/solid-glass ``` @@ -100,7 +99,7 @@ Dark is the material as designed; light is there too. The Solid Glass's own components install the same way: ```bash -npx shadcn@latest add https://deeplethe.github.io/solid-glass/r/status-glyph.json +npx shadcn@latest add deeplethe/solid-glass/status-glyph ``` | Component | What it is | diff --git a/content/docs/installation.mdx b/content/docs/installation.mdx index a5da3db..7f5dc91 100644 --- a/content/docs/installation.mdx +++ b/content/docs/installation.mdx @@ -14,12 +14,14 @@ npx shadcn@latest init ## Add the stylesheet -The whole material is one file. Put it beside your own styles: +The whole material is one file. Put it beside your own styles; the command reads it straight from the [GitHub repository](https://github.com/deeplethe/solid-glass): ```bash -npx shadcn@latest add {origin}/r/solid-glass.json +npx shadcn@latest add deeplethe/solid-glass/solid-glass ``` +Add `#` and a tag or a commit to pin a version, as in `deeplethe/solid-glass/solid-glass#`. The same items are also served from this site, at `{origin}/r/.json`, for a command line too old to read from GitHub. + Then import it after Tailwind and shadcn's stylesheet, and delete the `:root` and `.dark` colour variables that `shadcn init` wrote. Solid Glass defines the same names. ```css title="src/index.css" @@ -51,10 +53,10 @@ Stock components are installed the usual way, from shadcn/ui: npx shadcn@latest add button ``` -Solid Glass's own components are installed with the same command, from this site: +Solid Glass's own components are installed with the same command, from the repository: ```bash -npx shadcn@latest add {origin}/r/status-glyph.json +npx shadcn@latest add deeplethe/solid-glass/status-glyph ``` ## Fonts diff --git a/content/solid/ask-card.mdx b/content/solid/ask-card.mdx index 5cf5637..7066f52 100644 --- a/content/solid/ask-card.mdx +++ b/content/solid/ask-card.mdx @@ -11,7 +11,7 @@ group: agents ```bash -npx shadcn@latest add {origin}/r/ask-card.json +npx shadcn@latest add deeplethe/solid-glass/ask-card ``` diff --git a/content/solid/composer.mdx b/content/solid/composer.mdx index bc0a97a..879f51a 100644 --- a/content/solid/composer.mdx +++ b/content/solid/composer.mdx @@ -11,7 +11,7 @@ group: agents ```bash -npx shadcn@latest add {origin}/r/composer.json +npx shadcn@latest add deeplethe/solid-glass/composer ``` ```bash diff --git a/content/solid/context-ring.mdx b/content/solid/context-ring.mdx index b54e231..12e2bdc 100644 --- a/content/solid/context-ring.mdx +++ b/content/solid/context-ring.mdx @@ -11,7 +11,7 @@ group: agents ```bash -npx shadcn@latest add {origin}/r/context-ring.json +npx shadcn@latest add deeplethe/solid-glass/context-ring ``` ```bash diff --git a/content/solid/diff-view.mdx b/content/solid/diff-view.mdx index 8377b6d..0f92a6c 100644 --- a/content/solid/diff-view.mdx +++ b/content/solid/diff-view.mdx @@ -11,7 +11,7 @@ group: agents ```bash -npx shadcn@latest add {origin}/r/diff-view.json +npx shadcn@latest add deeplethe/solid-glass/diff-view ``` diff --git a/content/solid/dot-loader.mdx b/content/solid/dot-loader.mdx index adfb8e9..f15f47c 100644 --- a/content/solid/dot-loader.mdx +++ b/content/solid/dot-loader.mdx @@ -10,7 +10,7 @@ description: Three dots flashing in turn: the smallest sign that something is st ```bash -npx shadcn@latest add {origin}/r/dot-loader.json +npx shadcn@latest add deeplethe/solid-glass/dot-loader ``` diff --git a/content/solid/panel.mdx b/content/solid/panel.mdx index d3090c9..d6a2031 100644 --- a/content/solid/panel.mdx +++ b/content/solid/panel.mdx @@ -10,7 +10,7 @@ description: The thinnest pane of glass, with a title bar: what a page is laid o ```bash -npx shadcn@latest add {origin}/r/panel.json +npx shadcn@latest add deeplethe/solid-glass/panel ``` ```bash diff --git a/content/solid/reasoning.mdx b/content/solid/reasoning.mdx index ff3108f..0980745 100644 --- a/content/solid/reasoning.mdx +++ b/content/solid/reasoning.mdx @@ -11,7 +11,7 @@ group: agents ```bash -npx shadcn@latest add {origin}/r/reasoning.json +npx shadcn@latest add deeplethe/solid-glass/reasoning ``` ```bash diff --git a/content/solid/status-glyph.mdx b/content/solid/status-glyph.mdx index 59e9d6d..385cad7 100644 --- a/content/solid/status-glyph.mdx +++ b/content/solid/status-glyph.mdx @@ -10,7 +10,7 @@ description: Three points of light that say a turn is going, and what it is doin ```bash -npx shadcn@latest add {origin}/r/status-glyph.json +npx shadcn@latest add deeplethe/solid-glass/status-glyph ``` diff --git a/content/solid/tag.mdx b/content/solid/tag.mdx index 919d46f..63ba06f 100644 --- a/content/solid/tag.mdx +++ b/content/solid/tag.mdx @@ -10,7 +10,7 @@ description: Something attached to what is being written. While it uploads, the ```bash -npx shadcn@latest add {origin}/r/tag.json +npx shadcn@latest add deeplethe/solid-glass/tag ``` ```bash diff --git a/content/solid/task-notice.mdx b/content/solid/task-notice.mdx index 6a13a13..422cbd5 100644 --- a/content/solid/task-notice.mdx +++ b/content/solid/task-notice.mdx @@ -11,7 +11,7 @@ group: agents ```bash -npx shadcn@latest add {origin}/r/task-notice.json +npx shadcn@latest add deeplethe/solid-glass/task-notice ``` diff --git a/content/solid/tool-steps.mdx b/content/solid/tool-steps.mdx index dc0995c..09bbe76 100644 --- a/content/solid/tool-steps.mdx +++ b/content/solid/tool-steps.mdx @@ -11,7 +11,7 @@ group: agents ```bash -npx shadcn@latest add {origin}/r/tool-steps.json +npx shadcn@latest add deeplethe/solid-glass/tool-steps ``` ```bash diff --git a/content/solid/turn-status.mdx b/content/solid/turn-status.mdx index 33f7aaf..9ab79a2 100644 --- a/content/solid/turn-status.mdx +++ b/content/solid/turn-status.mdx @@ -11,7 +11,7 @@ group: agents ```bash -npx shadcn@latest add {origin}/r/turn-status.json +npx shadcn@latest add deeplethe/solid-glass/turn-status ``` ```bash diff --git a/registry.json b/registry.json index 7a761ca..41828e1 100644 --- a/registry.json +++ b/registry.json @@ -182,7 +182,7 @@ "lucide-react" ], "registryDependencies": [ - "https://deeplethe.github.io/solid-glass/r/diff-view.json" + "deeplethe/solid-glass/diff-view" ], "files": [ { @@ -200,7 +200,7 @@ "lucide-react" ], "registryDependencies": [ - "https://deeplethe.github.io/solid-glass/r/status-glyph.json" + "deeplethe/solid-glass/status-glyph" ], "files": [ { @@ -219,13 +219,13 @@ ], "registryDependencies": [ "button", - "https://deeplethe.github.io/solid-glass/r/ask-card.json", - "https://deeplethe.github.io/solid-glass/r/composer.json", - "https://deeplethe.github.io/solid-glass/r/context-ring.json", - "https://deeplethe.github.io/solid-glass/r/panel.json", - "https://deeplethe.github.io/solid-glass/r/tag.json", - "https://deeplethe.github.io/solid-glass/r/tool-steps.json", - "https://deeplethe.github.io/solid-glass/r/turn-status.json", + "deeplethe/solid-glass/ask-card", + "deeplethe/solid-glass/composer", + "deeplethe/solid-glass/context-ring", + "deeplethe/solid-glass/panel", + "deeplethe/solid-glass/tag", + "deeplethe/solid-glass/tool-steps", + "deeplethe/solid-glass/turn-status", "kbd" ], "files": [ diff --git a/scripts/build-registry.mjs b/scripts/build-registry.mjs index 2389391..189b805 100644 --- a/scripts/build-registry.mjs +++ b/scripts/build-registry.mjs @@ -5,9 +5,13 @@ * * Two things come out of it. `registry.json` at the root of the repository is the source registry * (https://ui.shadcn.com/schema/registry.json): it names each item and the files it is made of, and - * is what `shadcn add //` reads straight from GitHub. `public/r/` is the same - * registry built by `shadcn build` into one JSON file an item, which the site serves and which - * `shadcn add
/r/.json` and the `@solid-glass` namespace read. + * is what `shadcn add deeplethe/solid-glass/` reads straight from GitHub — the way the docs + * install it. `public/r/` is the same registry built by `shadcn build` into one JSON file an item, + * which the site serves and which `shadcn add
/r/.json` reads. + * + * Solid Glass's own components name one another by their GitHub address in the first, so that one + * installed from a tag or a commit brings the others from the same one; and by the site's address + * in the second, which is read by whatever version of the command line is at hand. * * Only what is Solid Glass's is published: the stylesheet, and the components that have a page in * content/solid/. Everything else in src/components/ui is shadcn/ui's and is installed from there. @@ -20,8 +24,9 @@ import { fileURLToPath } from "node:url" const root = join(dirname(fileURLToPath(import.meta.url)), "..") const out = join(root, "public/r") const read = (path) => readFileSync(join(root, path), "utf8") -// Where the site is served from. Solid Glass's own components name one another by it. +// Where the site is served from, and the repository on GitHub. const origin = (process.env.SOLID_GLASS_ORIGIN ?? "https://deeplethe.github.io/solid-glass").replace(/\/$/, "") +const repo = "deeplethe/solid-glass" const own = readdirSync(join(root, "content/solid")) .map((file) => file.replace(/\.mdx$/, "")) @@ -34,7 +39,7 @@ function needs(content) { for (const [, source] of content.matchAll(/from "([^"]+)"/g)) { if (source === "react" || source === "@/lib/utils") continue const used = source.match(/^@\/components\/ui\/(.+)$/)?.[1] - if (used) others.add(own.includes(used) ? `${origin}/r/${used}.json` : used) + if (used) others.add(own.includes(used) ? `${repo}/${used}` : used) else packages.add(source.split("/").slice(0, source.startsWith("@") ? 2 : 1).join("/")) } return { dependencies: [...packages].sort(), registryDependencies: [...others].sort() } @@ -65,8 +70,8 @@ const components = own.map((name) => { for (const [, source] of content.matchAll(/from "([^"]+)"/g)) { if (source === "react" || source === "@/lib/utils") continue const used = source.match(/^@\/components\/ui\/(.+)$/)?.[1] - // One of Solid Glass's own is named by its full address; one of shadcn/ui's by its name. - if (used) others.add(own.includes(used) ? `${origin}/r/${used}.json` : used) + // One of Solid Glass's own is named by its GitHub address; one of shadcn/ui's by its name. + if (used) others.add(own.includes(used) ? `${repo}/${used}` : used) else packages.add(source.split("/").slice(0, source.startsWith("@") ? 2 : 1).join("/")) } return { @@ -102,6 +107,13 @@ writeFileSync(join(root, "registry.json"), `${JSON.stringify(registry, null, 2)} rmSync(out, { recursive: true, force: true }) execFileSync("npx", ["shadcn", "build", "registry.json", "--output", "public/r"], { cwd: root, stdio: ["ignore", "ignore", "inherit"] }) +// What the site serves names Solid Glass's own by the site's address instead (see the top). +for (const file of readdirSync(out).filter((file) => file.endsWith(".json"))) { + const path = join(out, file) + const text = readFileSync(path, "utf8") + const served = text.replaceAll(new RegExp(`"${repo}/([a-z0-9-]+)"`, "g"), (_, name) => JSON.stringify(`${origin}/r/${name}.json`)) + if (served !== text) writeFileSync(path, served) +} // The stylesheet as it is, for whoever would rather copy one file than run a command. copyFileSync(join(root, "src/solid-glass.css"), join(out, "solid-glass.css")) diff --git a/src/create/customizer.tsx b/src/create/customizer.tsx index 238ccb5..ff5da6e 100644 --- a/src/create/customizer.tsx +++ b/src/create/customizer.tsx @@ -194,7 +194,7 @@ export function Customizer({ {faces.length > 0 && } diff --git a/src/pages/blocks.tsx b/src/pages/blocks.tsx index dd4918e..5dd3db1 100644 --- a/src/pages/blocks.tsx +++ b/src/pages/blocks.tsx @@ -33,7 +33,7 @@ function BlockViewer({ block }: { block: Block }) { const frame = `${theme}-${round}` const [drawn, setDrawn] = React.useState("") // Solid Glass's own come from its registry; shadcn/ui's from shadcn/ui, and take the material from the stylesheet. - const command = block.own ? `npx shadcn@latest add ${window.location.origin}${base}/r/${block.name}.json` : `npx shadcn@latest add ${block.name}` + const command = block.own ? `npx shadcn@latest add deeplethe/solid-glass/${block.name}` : `npx shadcn@latest add ${block.name}` // The frame is a window of its own: it is told the theme, and loaded again when the theme changes. const address = `${base}/view/${block.name}?theme=${theme}`