diff --git a/docs/add-a-project.md b/docs/add-a-project.md index 3c54ba4..c877807 100644 --- a/docs/add-a-project.md +++ b/docs/add-a-project.md @@ -2,8 +2,8 @@ How a Project gets into the Index and gets its Project page. Each step ends when its check holds; the next step uses what the previous one left. Fields are those of [content-model.md](content-model.md), and the result is a new entry in [content.md](content.md), with the same stored fields in `src/content/projects/.yaml`, which the site is built from. -1. **It belongs.** It is Variable Lab's own, it is published, and it isn't a fork. Today portless (a fork) and gh-actions (not a Project) stay out, and nothing private gets in until it is published. - Check: it has a published Package and a public Repository. +1. **It belongs.** It is Variable Lab's own, it is published, and it isn't a fork. Even then, the Keeper keeps only the most relevant Projects in the Index. Today portless (a fork), gh-actions (not a Project) and theme-toggle (not among the most relevant) stay out, and nothing private gets in until it is published. + Check: it has a published Package and a public Repository, and the Keeper approves it for the Index. 2. **Its Class.** `class`, by the rule in [content-model.md](content-model.md#project). Check: one Class, which matches how its README uses it. 3. **Its facts.** `package`, `executable` (Apps only), `installCommand`, `requirement` and/or `runtimes`, `repository` and `links`. diff --git a/docs/content-model.md b/docs/content-model.md index 0990bb2..d74472c 100644 --- a/docs/content-model.md +++ b/docs/content-model.md @@ -13,7 +13,7 @@ One. The page at `/`. | intro | stored | The first sentence. It names apps before libraries, as the sections run. | | unpublishedLine | stored | The Unpublished line. | | keeper | stored | One Keeper. | -| projects | stored | The Projects in order. The page groups them by Class, Apps first; within a Class they keep this order. A new Project goes last in its Class unless the Keeper places it. | +| projects | stored | The Projects in order: only the most relevant, as [add-a-project.md](add-a-project.md) says. The page groups them by Class, Apps first; within a Class they keep this order. A new Project goes last in its Class unless the Keeper places it. | | description | stored | The head description. | | address | derived | `lab.variable.land`. | | title | derived | `Variable Lab`. | @@ -39,7 +39,7 @@ One per Project in the Index. Every Project has a Project page at `lab.variable. | name | stored | Lowercase kebab-case, never `og`, which holds the `og:image`s. It is the title and the last segment of the Address. | The Project's own name, never its Executable or Package. | | class | stored | `App` or `Library`. | App if it is run (it has an Executable); Library if it is imported. | | sign | stored, optional | The Sign: one path on a 24×24 viewBox, filled with `fill-rule="evenodd"`. Without one, the page shows the Class stamp. | Copied from the Project's repository, `brand/sign.svg`. Drawing one follows the `vlab-brand` skill. | -| tagline | stored | One sentence, 34–41 characters, ending with a period. It fits one line on the Project page at desktop and tablet widths. | Says what the Project is or guarantees. Example: `The theme is set before first paint.` | +| tagline | stored | One sentence, 34–41 characters, ending with a period. It fits one line on the Project page at desktop and tablet widths. | Says what the Project is or guarantees. Example: `Only declared variables, checked at boot.` | | body | stored | One to three sentences. | Facts from the README: what it does and how. It follows the Tagline without repeating it. | | installCommand | stored | One Command. | The one the Project's README recommends, as written: `pnpm add` for a Library, `pnpm add -g` or `pnpm add -D` for an App, by where it gets installed. | | executable | stored, Apps only | The Executable. | As its `package.json` `bin` names it. | @@ -62,7 +62,7 @@ A Project has a requirement, runtimes, or both. ### Closing line -It says what the Project leaves out, as the skill's `voice.md` describes, and like every claim it is checked against the code. The pattern is "No [something concrete]. [A fact]." Example: `No CSS to import. No provider to wrap.` +It says what the Project leaves out, as the skill's `voice.md` describes, and like every claim it is checked against the code. The pattern is "No [something concrete]. [A fact]." Example: `No upgrade command. After init, the project is yours.` Before it ships: @@ -87,7 +87,7 @@ One per Project: one or more Snippets, in order. | Field | Value | | --- | --- | -| file | The file name, kebab-case: `env.ts`, `theme-switch.tsx`. | +| file | The file name, kebab-case: `env.ts`. | | placement | Optional. Where the code goes when that matters, shown after the name: `index.html · `. Placement is said here, not with more code. | | language | The language label: `TypeScript`, `TSX`, `HTML`. | | code | The lines. They are numbered on the page. | diff --git a/docs/content.md b/docs/content.md index 0276c09..f2e88df 100644 --- a/docs/content.md +++ b/docs/content.md @@ -8,9 +8,11 @@ The approved content of the site, field by field as [content-model.md](content-m | --- | --- | | intro | `A public index of apps and libraries.` | | unpublishedLine | `Variable Land also builds software that isn't published here.` | -| projects | run-run, vland, env, theme-toggle | +| projects | run-run, vland, env | | description | `A public index of apps and libraries. Variable Land also builds software that isn't published here.` | +theme-toggle is published but stays out of `projects`, as [add-a-project.md](add-a-project.md) says. + Keeper: | Field | Value | @@ -110,42 +112,3 @@ const Env = schema({ export const env = defineEnv({ schema: Env }); ``` - -## theme-toggle - -| Field | Value | -| --- | --- | -| class | Library | -| sign | `M2 2h4v20H2V2zm8 0h12v20H10V2z` | -| tagline | `The theme is set before first paint.` | -| body | `Light, dark or system. A blocking inline script puts the dark class on the html element before the page paints. A React hook reads and changes it.` | -| installCommand | `pnpm add @variablelab/theme-toggle` | -| package | `@variablelab/theme-toggle` | -| requirement | `React 18 or later` | -| repository | `https://github.com/withvariablelab/theme-toggle` | -| links | `GitHub` → the repository. It has no docs of its own. | -| closingLine | `No CSS to import. No provider to wrap.` | -| description | `The theme is set before first paint. Light, dark or system.` | - -Example: two File snippets, and the `og:image` shows the second (ogSnippet: `theme-switch.tsx`). The first is `index.html`, placement ``, language `HTML`: - -```html - -``` - -The second is `theme-switch.tsx`, language `TSX`: - -```tsx -import { useColorMode } from "@variablelab/theme-toggle"; - -export function ThemeSwitch() { - const { colorMode, setColorMode } = useColorMode(); - const next = colorMode === "dark" ? "light" : "dark"; - - return ( - - ); -} -``` diff --git a/docs/design.md b/docs/design.md index 5ce456a..7b76f5e 100644 --- a/docs/design.md +++ b/docs/design.md @@ -9,8 +9,10 @@ The canvas in Claude Design is the visual source of truth: name !== "og", { error: 'A Project is never named "og": /og/ holds the og:images.' }), class: z.enum(["App", "Library"], { error: 'class is "App" or "Library".' }), // The Sign: the d attribute of the one path in the Project's brand/sign.svg. diff --git a/src/content/index.yaml b/src/content/index.yaml index 06b32c3..e6bf681 100644 --- a/src/content/index.yaml +++ b/src/content/index.yaml @@ -16,5 +16,4 @@ index: - "run-run" - "vland" - "env" - - "theme-toggle" description: "A public index of apps and libraries. Variable Land also builds software that isn't published here." diff --git a/src/content/projects/theme-toggle.yaml b/src/content/projects/theme-toggle.yaml deleted file mode 100644 index 965e384..0000000 --- a/src/content/projects/theme-toggle.yaml +++ /dev/null @@ -1,37 +0,0 @@ -name: "theme-toggle" -class: "Library" -sign: "M2 2h4v20H2V2zm8 0h12v20H10V2z" -tagline: "The theme is set before first paint." -body: "Light, dark or system. A blocking inline script puts the dark class on the html element before the page paints. A React hook reads and changes it." -installCommand: "pnpm add @variablelab/theme-toggle" -package: "@variablelab/theme-toggle" -requirement: "React 18 or later" -repository: "https://github.com/withvariablelab/theme-toggle" -links: - - name: "GitHub" - url: "https://github.com/withvariablelab/theme-toggle" -example: - snippets: - - file: "index.html" - placement: "" - language: "HTML" - code: |- - - - file: "theme-switch.tsx" - language: "TSX" - code: |- - import { useColorMode } from "@variablelab/theme-toggle"; - - export function ThemeSwitch() { - const { colorMode, setColorMode } = useColorMode(); - const next = colorMode === "dark" ? "light" : "dark"; - - return ( - - ); - } - ogSnippet: "theme-switch.tsx" -closingLine: "No CSS to import. No provider to wrap." -description: "The theme is set before first paint. Light, dark or system." diff --git a/src/pages/[project].astro b/src/pages/[project].astro index 1e3ebbd..64cda0c 100644 --- a/src/pages/[project].astro +++ b/src/pages/[project].astro @@ -38,7 +38,7 @@ const phoneColumn = (390 - 2 * 16 - 24) / 2; const metaAdvance = 0.6 * 12; const publishedAsWide = publishedAs.executable !== undefined || [...publishedAs.package].length * metaAdvance > phoneColumn; -// A scoped Package, such as @variablelab/theme-toggle, splits after its scope: the one place it may break. +// A scoped Package, such as @variablelab/env, splits after its scope: the one place it may break. const scopeLength = publishedAs.package.startsWith("@") ? publishedAs.package.indexOf("/") + 1 : 0; const packageScope = publishedAs.package.slice(0, scopeLength); const packageName = publishedAs.package.slice(scopeLength);