Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 4 additions & 3 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -142,9 +142,10 @@ per file, whatever is added to the link, and a browser keeps what it fetched fro
`?q=button,card` to show some of them, `?theme=light`, `?hover=<selector>` to show what matches as
if the pointer were on it, and `?click=<selector>` to press something and look at what it opens.

`SOLID_GLASS_ORIGIN` is the address the site is served from (Solid Glass's own components name one
another by it) and `SOLID_GLASS_BASE` the path it lives under there; the defaults are this
repository's GitHub Pages.
`SOLID_GLASS_ORIGIN` defaults to `https://deeplethe.github.io/solid-glass` and
`SOLID_GLASS_BASE` to `/`; the Pages workflow sets both explicitly. See the
[installation page](https://deeplethe.github.io/solid-glass/docs/installation#self-hosted-registries)
for self-hosting.

## Add a component of Solid Glass's own

Expand Down
26 changes: 26 additions & 0 deletions content/docs/installation.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,8 @@ Then import it after Tailwind and shadcn's stylesheet, and delete the `:root` an
@import "./solid-glass.css";
```

The import above assumes the installed stylesheet is beside `src/index.css`. Check the path printed by the command and adjust the relative import if your main stylesheet lives elsewhere.

Dark is the material as designed. It follows the `dark` class on `<html>`. A project made by `shadcn init` has a `ThemeProvider` that sets that class from the system's setting; to start in dark whatever the system says:

```tsx title="src/main.tsx"
Expand Down Expand Up @@ -59,6 +61,30 @@ Solid Glass's own components are installed with the same command, from the repos
npx shadcn@latest add deeplethe/solid-glass/status-glyph
```

## Self-hosted registries

Build this repository with a matching full site URL and base path:

```bash
# Domain root
SOLID_GLASS_ORIGIN=https://design.example.com SOLID_GLASS_BASE=/ npm run build

# Deployment subpath
SOLID_GLASS_ORIGIN=https://example.com/design SOLID_GLASS_BASE=/design/ npm run build
```

`SOLID_GLASS_ORIGIN` includes the subpath and has no trailing slash; `SOLID_GLASS_BASE` is its path with leading and trailing slashes. Both are build-time settings. Serve `dist/` at that location, with a fallback to its `index.html` for client routes. Rebuild when either changes; server environment variables cannot update already-built files.

Install from that registry by its URL:

```bash
npx shadcn@latest add https://example.com/design/r/status-glyph.json
```

Solid Glass's own dependencies in the served JSON files use the configured site URL. Installing by `deeplethe/solid-glass/<item>` still reads the source registry in GitHub.

Stock components such as `button` and `kbd` still come from shadcn/ui, and packages from npm or your configured mirror. Offline installations need those sources prepared too.

## Fonts

The stylesheet sets `--font-sans` to Geist and `--font-mono` to Geist Mono, and falls back to the system's. To use them, add the font files yourself:
Expand Down
Loading