anentrypoint-design 0.0.16 → 0.0.17

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/README.md +147 -22
  2. package/dist/247420.app.js +2 -2
  3. package/dist/247420.css +36 -16
  4. package/dist/247420.js +4 -4
  5. package/package.json +1 -1
package/README.md CHANGED
@@ -2,49 +2,150 @@
2
2
 
3
3
  The 247420 / AnEntrypoint design system, packaged as a single-file ESM SDK.
4
4
 
5
- Bundles **WebJSX** (vendored), a modified **Ripple UI**, **Tailwind v2** utility classes, the design tokens (`colors_and_type.css`), the app shell (`app-shell.css`), the brand fonts, the `<deck-stage>` web component, and an opinionated component library — into one optimized, scope-prefixed file.
5
+ friendly rounded sans body, monospace only on real code, tonal surfaces over borders, indicator rails for color-coded separation, generous negative space, terminal-flavoured rhythm.
6
6
 
7
- ## Install
7
+ we fart in its general direction. ◰
8
+
9
+ ## install (the only step)
10
+
11
+ You have two choices. Both are one line.
12
+
13
+ **npm** (when you already have a bundler):
8
14
 
9
15
  ```bash
10
16
  npm install anentrypoint-design
11
17
  ```
12
18
 
13
- ## Use the SDK
19
+ **unpkg** (when you don't, and you don't want one):
20
+
21
+ ```html
22
+ <link rel="stylesheet" href="https://unpkg.com/anentrypoint-design/dist/247420.css">
23
+ <script type="importmap">
24
+ { "imports": { "anentrypoint-design": "https://unpkg.com/anentrypoint-design/dist/247420.js" } }
25
+ </script>
26
+ ```
27
+
28
+ Add the scope class on a wrapping element and you are done:
29
+
30
+ ```html
31
+ <html class="ds-247420" data-theme="light">
32
+ <body><div id="app"></div></body>
33
+ </html>
34
+ ```
35
+
36
+ ## use it (3-line app)
14
37
 
15
38
  ```js
16
- import { h, mount, installStyles, components as C } from 'anentrypoint-design';
39
+ import { mount, components as C } from 'anentrypoint-design';
17
40
 
18
- installStyles();
19
- const root = document.getElementById('app');
20
- mount(root, () => C.AppShell({
41
+ mount(document.getElementById('app'), () => C.AppShell({
21
42
  topbar: C.Topbar({ brand: '247420', leaf: 'gm', items: [['works','#/works']] }),
22
- main: C.HomeView({ /* … */ }),
43
+ main: C.HomeView({ /* hero, features, examples — see ./site/content/pages/home.yaml */ }),
23
44
  status: C.Status({ left: ['main'], right: ['live'] })
24
45
  }));
25
46
  ```
26
47
 
27
- `mount` automatically adds the `.ds-247420` scope class to your root.
48
+ `mount` automatically adds `.ds-247420` to your root.
28
49
 
29
- ## Use the unified app
50
+ ## use it from a buildless flatspace project
30
51
 
31
- The package also ships a complete WebJSX single-page app at `247420/app` that consolidates the homepage, project page, writing index, and manifesto under one hash-routed shell:
52
+ A canonical example lives at `c:\dev\flatspace-demo`. It has **no `package.json`**. It has a `flatspace.config.mjs`, YAML pages under `config/`, and a `src/theme.mjs` that turns each page into HTML at build-time. CI runs `npx --yes flatspace@latest build` and deploys `dist/`.
32
53
 
33
- ```html
34
- <div id="root" class="ds-247420"></div>
35
- <script type="module" src="https://unpkg.com/anentrypoint-design/dist/247420.app.js"></script>
54
+ To plug 247420 into that shape, do exactly three things:
55
+
56
+ ### 1. Reference the SDK from `<head>` in `src/theme.mjs`
57
+
58
+ ```js
59
+ export default function render({ site, page }) {
60
+ return `<!doctype html>
61
+ <html lang="en" class="ds-247420" data-theme="light">
62
+ <head>
63
+ <meta charset="utf-8">
64
+ <meta name="viewport" content="width=device-width, initial-scale=1">
65
+ <title>${page.title} — ${site.title}</title>
66
+ <link rel="stylesheet" href="https://unpkg.com/anentrypoint-design/dist/247420.css">
67
+ <script type="importmap">
68
+ { "imports": { "anentrypoint-design": "https://unpkg.com/anentrypoint-design/dist/247420.js" } }
69
+ </script>
70
+ </head>
71
+ <body>
72
+ <div id="app"></div>
73
+ <script type="module">
74
+ import { mount, components as C } from 'anentrypoint-design';
75
+ const data = ${JSON.stringify({ site, page })};
76
+ mount(document.getElementById('app'), () => C.AppShell({
77
+ topbar: C.Topbar({ brand: data.site.title, items: data.site.nav }),
78
+ crumb: C.Crumb({ leaf: data.page.title }),
79
+ main: data.page.template === 'home' ? C.HomeView(data.page) : C.Section(data.page),
80
+ status: C.Status({ left: ['main'], right: ['live'] }),
81
+ }));
82
+ </script>
83
+ </body>
84
+ </html>`;
85
+ }
86
+ ```
87
+
88
+ ### 2. Author pages in YAML
89
+
90
+ ```yaml
91
+ # config/pages/home.yaml
92
+ id: home
93
+ title: home
94
+ template: home
95
+ hero:
96
+ heading: tigers
97
+ subheading: large striped cats
98
+ body: a flatspace site, styled by 247420.
99
+ badges: [ { label: encyclopedic }, { label: lowercase }, { label: 100% YAML } ]
100
+ features:
101
+ heading: why tigers
102
+ items:
103
+ - { name: stripes, desc: structurally redundant, semiotically loud. }
104
+ - { name: silence, desc: we like ambush as a design pattern. }
105
+ examples:
106
+ heading: pages
107
+ items:
108
+ - { name: about, href: ./about.html, cta: open }
109
+ - { name: species, href: ./species.html, cta: open }
36
110
  ```
37
111
 
38
- `app.html` in this repo is the local consumer.
112
+ ### 3. CI workflow (`.github/workflows/build.yml`)
113
+
114
+ ```yaml
115
+ name: Deploy
116
+ on: { push: { branches: [main] }, workflow_dispatch: }
117
+ permissions: { contents: read, pages: write, id-token: write }
118
+ concurrency: { group: pages, cancel-in-progress: false }
119
+ jobs:
120
+ build:
121
+ runs-on: ubuntu-latest
122
+ steps:
123
+ - uses: actions/checkout@v4
124
+ - uses: actions/setup-node@v4
125
+ with: { node-version: '20' }
126
+ - run: npx --yes flatspace@latest build
127
+ - uses: actions/configure-pages@v5
128
+ - uses: actions/upload-pages-artifact@v3
129
+ with: { path: ./dist }
130
+ deploy:
131
+ needs: build
132
+ runs-on: ubuntu-latest
133
+ environment: { name: github-pages, url: ${{ steps.deployment.outputs.page_url }} }
134
+ steps:
135
+ - id: deployment
136
+ uses: actions/deploy-pages@v4
137
+ ```
39
138
 
40
- ## Components
139
+ That is the whole integration. No `package.json`, no install, no bundler, no copy step. Push a YAML change to `main`, GH Actions builds, GH Pages serves.
41
140
 
42
- Primitives: `Brand`, `Chip`, `Btn`, `Glyph`, `Heading`, `Lede`.
141
+ ## components
142
+
143
+ Primitives: `Brand`, `Chip`, `Btn`, `Glyph`, `Heading`, `Lede`, `Dot`, `Rail`.
43
144
  Chrome: `Topbar`, `Crumb`, `Side`, `Status`, `AppShell`.
44
145
  Surfaces: `Panel`, `Row`, `RowLink`, `Section`, `Install`, `Receipt`, `Changelog`.
45
146
  Pages: `Hero`, `WorksList`, `WritingList`, `Manifesto`, `HomeView`, `ProjectView`.
46
147
 
47
- All factories are pure: they take props, return a WebJSX tree.
148
+ All factories are pure: props in, WebJSX tree out.
48
149
 
49
150
  ## DeckStage
50
151
 
@@ -54,18 +155,36 @@ await registerDeckStage();
54
155
  // <deck-stage width="1920" height="1080">…<section>…</section></deck-stage>
55
156
  ```
56
157
 
57
- ## Why scope-prefixed
158
+ ## tokens (override anywhere)
159
+
160
+ The system runs entirely on CSS custom properties under `.ds-247420`. To rebrand a single surface, declare overrides at any level:
161
+
162
+ ```html
163
+ <div class="ds-247420" style="
164
+ --panel-accent: #6FA9FF;
165
+ --panel-select: #DCE8FF;
166
+ --green: #6FA9FF;
167
+ ">
168
+ …same components, sky-blue accent…
169
+ </div>
170
+ ```
171
+
172
+ The full token list lives in `colors_and_type.css`. The voice rules and the storytelling pass live in `SKILL.md`.
173
+
174
+ ## why scope-prefixed
58
175
 
59
- Every selector in the bundle is namespaced under `.ds-247420` via PostCSS. The bundle ships Tailwind, RippleUI, and the design tokens **without** colliding with whatever optimized bundle the host app already runs. Add the class to a root element to opt in.
176
+ Every selector in the bundle is namespaced under `.ds-247420` via PostCSS. The bundle ships Nunito + Archivo + JetBrains Mono + the design tokens **without** colliding with whatever the host app already runs. Add the class to a root element to opt in.
60
177
 
61
- ## CSS only
178
+ ## CSS only (no JS)
62
179
 
63
180
  ```html
64
181
  <link rel="stylesheet" href="https://unpkg.com/anentrypoint-design/dist/247420.css">
65
182
  <div class="ds-247420">…</div>
66
183
  ```
67
184
 
68
- ## Publishing
185
+ You get the tokens, primitives, and utility classes. You write the markup.
186
+
187
+ ## publishing
69
188
 
70
189
  Every push to `main` runs `.github/workflows/publish.yml`:
71
190
 
@@ -75,3 +194,9 @@ Every push to `main` runs `.github/workflows/publish.yml`:
75
194
  4. Commits the bump back to `main` and pushes a `vX.Y.Z` tag.
76
195
 
77
196
  Skip publish for any commit by including `[skip publish]` in the message; release commits use that automatically to prevent loops.
197
+
198
+ ## links
199
+
200
+ - live: <https://anentrypoint.github.io/design/>
201
+ - npm: <https://www.npmjs.com/package/anentrypoint-design>
202
+ - skill: see `SKILL.md` for the full visual paradigm and storytelling rules.