anentrypoint-design 0.0.121 → 0.0.124
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.
- package/README.md +253 -253
- package/app-shell.css +931 -594
- package/colors_and_type.css +226 -226
- package/community.css +817 -1222
- package/dist/247420.css +2202 -2084
- package/dist/247420.js +13 -13
- package/package.json +80 -80
- package/src/bootstrap.js +25 -25
- package/src/components/chat.js +199 -199
- package/src/components/community.js +190 -208
- package/src/components/content.js +269 -269
- package/src/components/editor-primitives.js +100 -0
- package/src/components/files-modals.js +107 -107
- package/src/components/files.js +118 -118
- package/src/components/freddie/helpers.js +50 -50
- package/src/components/freddie.js +33 -33
- package/src/components/shell.js +117 -117
- package/src/components/theme-toggle.js +70 -70
- package/src/components.js +59 -57
- package/src/debug.js +30 -30
- package/src/deck-stage.js +21 -21
- package/src/highlight.js +65 -32
- package/src/index.js +86 -86
- package/src/kits/os/about-app.js +52 -52
- package/src/kits/os/app-panes.css +152 -152
- package/src/kits/os/browser-app.js +58 -58
- package/src/kits/os/files-app.js +44 -44
- package/src/kits/os/freddie/helpers.js +59 -59
- package/src/kits/os/freddie/pages-chat.js +143 -143
- package/src/kits/os/freddie/pages-core.js +101 -101
- package/src/kits/os/freddie/pages-os.js +51 -51
- package/src/kits/os/freddie/pages-tools.js +183 -183
- package/src/kits/os/freddie/routes.js +24 -24
- package/src/kits/os/freddie-dashboard.css +51 -51
- package/src/kits/os/freddie-dashboard.js +101 -101
- package/src/kits/os/icons.js +17 -17
- package/src/kits/os/index.js +17 -17
- package/src/kits/os/launcher.css +61 -61
- package/src/kits/os/launcher.js +79 -79
- package/src/kits/os/monitor-app.js +34 -34
- package/src/kits/os/shell.js +214 -214
- package/src/kits/os/terminal-app.js +45 -45
- package/src/kits/os/theme.css +450 -450
- package/src/kits/os/validate.css +19 -19
- package/src/kits/os/validator-app.js +55 -55
- package/src/kits/os/wm.css +115 -115
- package/src/kits/os/wm.js +111 -111
- package/src/markdown.js +39 -39
- package/src/motion.js +35 -35
- package/src/page-html.js +196 -196
- package/src/styles.js +25 -25
- package/src/theme.js +99 -99
- package/src/web-components/ds-chat.js +116 -116
- package/dist/.nojekyll +0 -0
- package/dist/app-shell.css +0 -594
- package/dist/colors_and_type.css +0 -197
- package/dist/favicon.svg +0 -1
- package/dist/index.html +0 -308
- package/dist/preview/buttons.html +0 -28
- package/dist/preview/colors-core.html +0 -45
- package/dist/preview/colors-lore.html +0 -28
- package/dist/preview/colors-semantic.html +0 -34
- package/dist/preview/dateline.html +0 -19
- package/dist/preview/dropzone.html +0 -30
- package/dist/preview/file-grid.html +0 -19
- package/dist/preview/file-row.html +0 -20
- package/dist/preview/file-toolbar.html +0 -40
- package/dist/preview/file-viewer.html +0 -31
- package/dist/preview/header.html +0 -24
- package/dist/preview/icons-unicode.html +0 -26
- package/dist/preview/index-row.html +0 -25
- package/dist/preview/inputs.html +0 -22
- package/dist/preview/manifesto.html +0 -52
- package/dist/preview/motion-default.js +0 -106
- package/dist/preview/rules.html +0 -16
- package/dist/preview/spacing.html +0 -18
- package/dist/preview/stamps-lore.html +0 -20
- package/dist/preview/stamps.html +0 -14
- package/dist/preview/theme-ink.html +0 -15
- package/dist/preview/type-display.html +0 -16
- package/dist/preview/type-mono.html +0 -15
- package/dist/preview/type-prose.html +0 -11
- package/dist/preview/type-scale.html +0 -20
- package/dist/preview/wordmarks.html +0 -28
- package/dist/robots.txt +0 -8
- package/dist/site/content/globals/navigation.yaml +0 -5
- package/dist/site/content/globals/site.yaml +0 -16
- package/dist/site/content/pages/freddie.yaml +0 -88
- package/dist/site/content/pages/home.yaml +0 -190
- package/dist/site/theme.mjs +0 -368
- package/dist/sitemap.xml +0 -31
- package/dist/slides/deck-stage-overlay.js +0 -63
- package/dist/slides/deck-stage-state.js +0 -81
- package/dist/slides/deck-stage-style.js +0 -117
- package/dist/slides/deck-stage.js +0 -159
- package/dist/slides/index.html +0 -276
- package/dist/src/bootstrap.js +0 -25
- package/dist/src/components/chat.js +0 -199
- package/dist/src/components/community.js +0 -167
- package/dist/src/components/content.js +0 -213
- package/dist/src/components/files-modals.js +0 -107
- package/dist/src/components/files.js +0 -118
- package/dist/src/components/freddie/helpers.js +0 -50
- package/dist/src/components/freddie.js +0 -33
- package/dist/src/components/shell.js +0 -117
- package/dist/src/components/theme-toggle.js +0 -70
- package/dist/src/components.js +0 -52
- package/dist/src/debug.js +0 -30
- package/dist/src/deck-stage.js +0 -21
- package/dist/src/highlight.js +0 -32
- package/dist/src/index.js +0 -86
- package/dist/src/kits/os/about-app.js +0 -52
- package/dist/src/kits/os/app-panes.css +0 -152
- package/dist/src/kits/os/browser-app.js +0 -58
- package/dist/src/kits/os/files-app.js +0 -44
- package/dist/src/kits/os/freddie/helpers.js +0 -59
- package/dist/src/kits/os/freddie/pages-chat.js +0 -143
- package/dist/src/kits/os/freddie/pages-core.js +0 -101
- package/dist/src/kits/os/freddie/pages-os.js +0 -51
- package/dist/src/kits/os/freddie/pages-tools.js +0 -183
- package/dist/src/kits/os/freddie/routes.js +0 -24
- package/dist/src/kits/os/freddie-dashboard.css +0 -51
- package/dist/src/kits/os/freddie-dashboard.js +0 -101
- package/dist/src/kits/os/icons.js +0 -17
- package/dist/src/kits/os/index.js +0 -5
- package/dist/src/kits/os/launcher.css +0 -61
- package/dist/src/kits/os/launcher.js +0 -79
- package/dist/src/kits/os/monitor-app.js +0 -34
- package/dist/src/kits/os/shell.js +0 -214
- package/dist/src/kits/os/terminal-app.js +0 -45
- package/dist/src/kits/os/theme.css +0 -412
- package/dist/src/kits/os/validate.css +0 -19
- package/dist/src/kits/os/validator-app.js +0 -55
- package/dist/src/kits/os/wm.css +0 -115
- package/dist/src/kits/os/wm.js +0 -111
- package/dist/src/markdown.js +0 -39
- package/dist/src/motion.js +0 -35
- package/dist/src/page-html.js +0 -196
- package/dist/src/styles.js +0 -25
- package/dist/src/theme.js +0 -99
- package/dist/src/web-components/ds-chat.js +0 -45
- package/dist/ui_kits/aicat/README.md +0 -7
- package/dist/ui_kits/aicat/app.js +0 -156
- package/dist/ui_kits/aicat/index.html +0 -26
- package/dist/ui_kits/aicat/sample-square.png +0 -0
- package/dist/ui_kits/aicat/sample-svg.svg +0 -1
- package/dist/ui_kits/aicat/sample.pdf +0 -32
- package/dist/ui_kits/blog/README.md +0 -3
- package/dist/ui_kits/blog/index.html +0 -90
- package/dist/ui_kits/chat/README.md +0 -5
- package/dist/ui_kits/chat/app.js +0 -110
- package/dist/ui_kits/chat/index.html +0 -26
- package/dist/ui_kits/chat/sample-square.png +0 -0
- package/dist/ui_kits/chat/sample-svg.svg +0 -1
- package/dist/ui_kits/chat/sample.pdf +0 -32
- package/dist/ui_kits/community/app.js +0 -134
- package/dist/ui_kits/community/index.html +0 -24
- package/dist/ui_kits/dashboard/app.js +0 -92
- package/dist/ui_kits/dashboard/index.html +0 -26
- package/dist/ui_kits/docs/README.md +0 -3
- package/dist/ui_kits/docs/index.html +0 -123
- package/dist/ui_kits/error_404/app.js +0 -56
- package/dist/ui_kits/error_404/index.html +0 -26
- package/dist/ui_kits/file_browser/README.md +0 -48
- package/dist/ui_kits/file_browser/app.js +0 -231
- package/dist/ui_kits/file_browser/index.html +0 -33
- package/dist/ui_kits/gallery/app.js +0 -121
- package/dist/ui_kits/gallery/index.html +0 -26
- package/dist/ui_kits/homepage/README.md +0 -7
- package/dist/ui_kits/homepage/app.js +0 -167
- package/dist/ui_kits/homepage/index.html +0 -46
- package/dist/ui_kits/project_page/README.md +0 -3
- package/dist/ui_kits/project_page/app.js +0 -154
- package/dist/ui_kits/project_page/index.html +0 -45
- package/dist/ui_kits/search/app.js +0 -107
- package/dist/ui_kits/search/index.html +0 -26
- package/dist/ui_kits/settings/app.js +0 -133
- package/dist/ui_kits/settings/index.html +0 -26
- package/dist/ui_kits/signin/app.js +0 -115
- package/dist/ui_kits/signin/index.html +0 -26
- package/dist/ui_kits/slide_deck/app.js +0 -174
- package/dist/ui_kits/slide_deck/index.html +0 -26
- package/dist/ui_kits/system_primer/app.js +0 -152
- package/dist/ui_kits/system_primer/index.html +0 -26
- package/dist/ui_kits/terminal/app.js +0 -150
- package/dist/ui_kits/terminal/index.html +0 -26
- package/dist/vendor/webjsx/applyDiff.js +0 -182
- package/dist/vendor/webjsx/attributes.js +0 -154
- package/dist/vendor/webjsx/constants.js +0 -4
- package/dist/vendor/webjsx/createDOMElement.js +0 -52
- package/dist/vendor/webjsx/createElement.js +0 -75
- package/dist/vendor/webjsx/elementTags.js +0 -115
- package/dist/vendor/webjsx/factory.js +0 -6
- package/dist/vendor/webjsx/index.js +0 -6
- package/dist/vendor/webjsx/jsx-dev-runtime.js +0 -2
- package/dist/vendor/webjsx/jsx-runtime.js +0 -30
- package/dist/vendor/webjsx/jsx.js +0 -2
- package/dist/vendor/webjsx/package.json +0 -39
- package/dist/vendor/webjsx/renderSuspension.js +0 -25
- package/dist/vendor/webjsx/types.js +0 -5
- package/dist/vendor/webjsx/utils.js +0 -84
- package/src/components/overlays.js +0 -151
|
@@ -1,33 +0,0 @@
|
|
|
1
|
-
<!doctype html>
|
|
2
|
-
<html lang="en" data-theme="auto" class="ds-247420"><head>
|
|
3
|
-
<meta charset="utf-8">
|
|
4
|
-
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
5
|
-
<meta name="theme-color" content="#247420" media="(prefers-color-scheme: light)">
|
|
6
|
-
<meta name="theme-color" content="#3A9A34" media="(prefers-color-scheme: dark)">
|
|
7
|
-
<meta name="color-scheme" content="light dark">
|
|
8
|
-
<title>file browser / 247420</title>
|
|
9
|
-
<meta name="description" content="file-browser surface — rails by file type, drop-zone upload, modal preview.">
|
|
10
|
-
<meta name="author" content="247420 / AnEntrypoint">
|
|
11
|
-
<link rel="canonical" href="https://anentrypoint.github.io/design/ui_kits/file_browser/">
|
|
12
|
-
<link rel="icon" type="image/svg+xml" href="../../favicon.svg">
|
|
13
|
-
<meta property="og:type" content="website">
|
|
14
|
-
<meta property="og:title" content="file browser / 247420">
|
|
15
|
-
<meta property="og:description" content="file-browser surface — rails by file type, drop-zone upload, modal preview.">
|
|
16
|
-
<meta property="og:url" content="https://anentrypoint.github.io/design/ui_kits/file_browser/">
|
|
17
|
-
<meta property="og:site_name" content="247420 / design">
|
|
18
|
-
<meta name="robots" content="index, follow">
|
|
19
|
-
<link rel="stylesheet" href="../../colors_and_type.css">
|
|
20
|
-
<link rel="stylesheet" href="../../app-shell.css">
|
|
21
|
-
|
|
22
|
-
<script type="importmap">
|
|
23
|
-
{ "imports": {
|
|
24
|
-
"webjsx": "../../vendor/webjsx/index.js",
|
|
25
|
-
"webjsx/": "../../vendor/webjsx/",
|
|
26
|
-
"webjsx/jsx-runtime": "../../vendor/webjsx/jsx-runtime.js"
|
|
27
|
-
} }
|
|
28
|
-
</script>
|
|
29
|
-
</head>
|
|
30
|
-
<body data-screen-label="08 File Browser">
|
|
31
|
-
<div id="root"></div>
|
|
32
|
-
<script type="module" src="./app.js"></script>
|
|
33
|
-
</body></html>
|
|
@@ -1,121 +0,0 @@
|
|
|
1
|
-
import * as webjsx from 'webjsx';
|
|
2
|
-
import { Topbar, Crumb, Status, Side, AppShell, Panel, Heading, Lede, Chip } from 'ds/components.js';
|
|
3
|
-
import { mountKit } from 'ds/bootstrap.js';
|
|
4
|
-
const h = webjsx.createElement;
|
|
5
|
-
|
|
6
|
-
const root = document.getElementById('root');
|
|
7
|
-
|
|
8
|
-
const swatchTokens = [
|
|
9
|
-
{ name: 'panel-0', hint: 'paper · root surface' },
|
|
10
|
-
{ name: 'panel-1', hint: 'one shade up · panel bg' },
|
|
11
|
-
{ name: 'panel-2', hint: 'two shades up · row bg' },
|
|
12
|
-
{ name: 'panel-3', hint: 'three shades up · header strip' },
|
|
13
|
-
{ name: 'panel-accent',hint: 'green ink · primary cta' },
|
|
14
|
-
{ name: 'panel-select',hint: 'mint hover/select tone' }
|
|
15
|
-
];
|
|
16
|
-
|
|
17
|
-
const items = [
|
|
18
|
-
{ id: 'a', label: 'mascot · cat', caption: '/\\_/\\\n( o.o )', tone: 'panel-1', glyph: '◐' },
|
|
19
|
-
{ id: 'b', label: 'panel · stack', caption: 'panel-on-panel rhythm', tone: 'panel-2', glyph: '▣' },
|
|
20
|
-
{ id: 'c', label: 'rail · indicator', caption: 'color-coded inset', tone: 'panel-1', glyph: '▰' },
|
|
21
|
-
{ id: 'd', label: 'mono · label', caption: 'all caps · letter-spaced', tone: 'panel-2', glyph: '§' },
|
|
22
|
-
{ id: 'e', label: 'cli · prompt', caption: '$ ship it', tone: 'panel-3', glyph: '◆' },
|
|
23
|
-
{ id: 'f', label: 'pill · radius 999', caption: 'sidebar fab tone', tone: 'panel-1', glyph: '●' },
|
|
24
|
-
{ id: 'g', label: 'badge · chip', caption: 'meta pill, dim/accent', tone: 'panel-2', glyph: '◇' },
|
|
25
|
-
{ id: 'h', label: 'glyph · unicode', caption: 'no svgs in chrome', tone: 'panel-1', glyph: '✦' },
|
|
26
|
-
{ id: 'i', label: 'manifesto · prose', caption: 'long-form, max 64ch', tone: 'panel-2', glyph: '¶' },
|
|
27
|
-
{ id: 'j', label: 'fade · in', caption: 'visibility-driven only', tone: 'panel-3', glyph: '◌' },
|
|
28
|
-
{ id: 'k', label: 'rule · divider', caption: '1px panel-2 hairline', tone: 'panel-1', glyph: '—' },
|
|
29
|
-
{ id: 'l', label: 'stamp · seal', caption: 'editorial mark', tone: 'panel-2', glyph: '◯' }
|
|
30
|
-
];
|
|
31
|
-
|
|
32
|
-
const state = { open: null, density: 'comfy' };
|
|
33
|
-
|
|
34
|
-
function Tile(it) {
|
|
35
|
-
const size = state.density === 'tight' ? '120px' : '160px';
|
|
36
|
-
return h('button', {
|
|
37
|
-
key: it.id,
|
|
38
|
-
onclick: () => { state.open = it.id; kit.render(); },
|
|
39
|
-
style: 'all:unset;cursor:pointer;display:flex;flex-direction:column;gap:6px;background:var(--' + it.tone + ');padding:12px;border-radius:10px;min-height:' + size
|
|
40
|
-
},
|
|
41
|
-
h('div', { style: 'flex:1;display:flex;align-items:center;justify-content:center;font-family:var(--ff-mono);white-space:pre-line;color:var(--panel-text-2);font-size:18px' }, it.caption),
|
|
42
|
-
h('div', { style: 'display:flex;align-items:center;justify-content:space-between;gap:6px;font-size:12px' },
|
|
43
|
-
h('span', { style: 'font-family:var(--ff-mono);color:var(--panel-text-3)' }, it.glyph),
|
|
44
|
-
h('span', { style: 'color:var(--panel-text)' }, it.label)
|
|
45
|
-
)
|
|
46
|
-
);
|
|
47
|
-
}
|
|
48
|
-
|
|
49
|
-
function Swatch(t) {
|
|
50
|
-
return h('div', { key: t.name, style: 'display:flex;flex-direction:column;gap:6px' },
|
|
51
|
-
h('div', { style: 'height:64px;border-radius:8px;background:var(--' + t.name + ')' }),
|
|
52
|
-
h('div', { style: 'display:flex;justify-content:space-between;font-family:var(--ff-mono);font-size:11px' },
|
|
53
|
-
h('span', { style: 'color:var(--panel-text)' }, t.name),
|
|
54
|
-
h('span', { style: 'color:var(--panel-text-3)' }, t.hint)
|
|
55
|
-
)
|
|
56
|
-
);
|
|
57
|
-
}
|
|
58
|
-
|
|
59
|
-
function Lightbox() {
|
|
60
|
-
if (!state.open) return null;
|
|
61
|
-
const it = items.find((i) => i.id === state.open);
|
|
62
|
-
return h('div', {
|
|
63
|
-
onclick: () => { state.open = null; kit.render(); },
|
|
64
|
-
style: 'position:fixed;inset:0;background:rgba(0,0,0,0.4);display:flex;align-items:center;justify-content:center;padding:32px;z-index:50'
|
|
65
|
-
},
|
|
66
|
-
h('div', { onclick: (e) => e.stopPropagation(),
|
|
67
|
-
style: 'background:var(--panel-0);border-radius:14px;padding:28px;min-width:320px;max-width:520px;display:flex;flex-direction:column;gap:14px' },
|
|
68
|
-
h('div', { style: 'display:flex;justify-content:space-between;align-items:center' },
|
|
69
|
-
h('span', { style: 'font-family:var(--ff-mono);font-size:11px;letter-spacing:0.06em;text-transform:uppercase;color:var(--panel-text-3)' }, 'tile · ' + it.id),
|
|
70
|
-
h('button', { class: 'btn', onclick: () => { state.open = null; kit.render(); } }, 'close')
|
|
71
|
-
),
|
|
72
|
-
h('div', { style: 'background:var(--' + it.tone + ');padding:36px;border-radius:10px;text-align:center;font-family:var(--ff-mono);white-space:pre-line;font-size:24px' }, it.caption),
|
|
73
|
-
h('p', { style: 'margin:0' }, h('strong', {}, it.label)),
|
|
74
|
-
h('p', { style: 'margin:0;color:var(--panel-text-2)' }, 'this lightbox uses the same tonal panel — no extra components, no shadow. backdrop is fixed inset, click outside dismisses.')
|
|
75
|
-
)
|
|
76
|
-
);
|
|
77
|
-
}
|
|
78
|
-
|
|
79
|
-
function App() {
|
|
80
|
-
const cols = state.density === 'tight' ? 'repeat(auto-fill, minmax(140px, 1fr))' : 'repeat(auto-fill, minmax(180px, 1fr))';
|
|
81
|
-
return AppShell({
|
|
82
|
-
topbar: Topbar({ brand: '247420', leaf: 'gallery', items: [['index', '../../'], ['source ↗', 'https://github.com/AnEntrypoint/design']] }),
|
|
83
|
-
crumb: Crumb({ trail: ['247420', 'kits'], leaf: 'gallery', right: items.length + ' tiles' }),
|
|
84
|
-
side: Side({
|
|
85
|
-
sections: [
|
|
86
|
-
{ group: 'density', items: [
|
|
87
|
-
{ glyph: state.density === 'comfy' ? '●' : '○', label: 'comfy', key: 'd1', onClick: (e) => { e.preventDefault(); state.density = 'comfy'; kit.render(); } },
|
|
88
|
-
{ glyph: state.density === 'tight' ? '●' : '○', label: 'tight', key: 'd2', onClick: (e) => { e.preventDefault(); state.density = 'tight'; kit.render(); } }
|
|
89
|
-
] },
|
|
90
|
-
{ group: 'jump', items: [
|
|
91
|
-
{ glyph: '·', label: 'tiles', key: 'j1', href: '#tiles' },
|
|
92
|
-
{ glyph: '·', label: 'swatches', key: 'j2', href: '#swatches' }
|
|
93
|
-
] }
|
|
94
|
-
]
|
|
95
|
-
}),
|
|
96
|
-
main: [
|
|
97
|
-
h('div', { class: 'ds-section', style: 'padding:8px' },
|
|
98
|
-
Heading({ level: 1, children: 'gallery' }),
|
|
99
|
-
Lede({ children: 'visual grid of tonal cards. tiles use the same panel tokens the rest of the system does — no bespoke tile component, no shadows, no borders.' }),
|
|
100
|
-
Panel({ title: 'tiles', count: items.length, style: 'margin:8px 0', children:
|
|
101
|
-
h('div', { style: 'padding:16px;display:grid;grid-template-columns:' + cols + ';gap:8px' }, ...items.map(Tile))
|
|
102
|
-
}),
|
|
103
|
-
Panel({ title: 'swatches', count: swatchTokens.length, style: 'margin:8px 0', children:
|
|
104
|
-
h('div', { style: 'padding:16px;display:grid;grid-template-columns:repeat(auto-fill, minmax(160px, 1fr));gap:12px' }, ...swatchTokens.map(Swatch))
|
|
105
|
-
}),
|
|
106
|
-
Panel({ title: 'about this kit', style: 'margin:8px 0', children: h('div', { class: 'ds-pattern-notes' },
|
|
107
|
-
h('p', {}, '· tiles are tonal panels stacked into a css grid — ', Chip({ tone: 'accent', children: 'auto-fill minmax' }), ' for the responsive default.'),
|
|
108
|
-
h('p', {}, '· lightbox reuses the panel surface; no extra component, no transitions, no z-stack circus.'),
|
|
109
|
-
h('p', {}, '· density toggle drops min tile size — same tokens, different rhythm.')
|
|
110
|
-
) })
|
|
111
|
-
),
|
|
112
|
-
Lightbox()
|
|
113
|
-
],
|
|
114
|
-
status: Status({
|
|
115
|
-
left: ['gallery', '• ' + items.length + ' tiles', '• density=' + state.density],
|
|
116
|
-
right: ['247420 / mmxxvi']
|
|
117
|
-
})
|
|
118
|
-
});
|
|
119
|
-
}
|
|
120
|
-
|
|
121
|
-
const kit = mountKit({ root, view: App, screen: '14 Gallery' });
|
|
@@ -1,26 +0,0 @@
|
|
|
1
|
-
<!doctype html>
|
|
2
|
-
<html lang="en" data-theme="auto" class="ds-247420"><head>
|
|
3
|
-
<meta charset="utf-8">
|
|
4
|
-
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
5
|
-
<meta name="theme-color" content="#247420" media="(prefers-color-scheme: light)">
|
|
6
|
-
<meta name="theme-color" content="#3A9A34" media="(prefers-color-scheme: dark)">
|
|
7
|
-
<meta name="color-scheme" content="light dark">
|
|
8
|
-
<title>gallery / 247420</title>
|
|
9
|
-
<meta name="description" content="gallery ui kit — visual grid, lightbox, tonal cards.">
|
|
10
|
-
<link rel="canonical" href="https://anentrypoint.github.io/design/ui_kits/gallery/">
|
|
11
|
-
<link rel="icon" type="image/svg+xml" href="../../favicon.svg">
|
|
12
|
-
<link rel="stylesheet" href="../../colors_and_type.css">
|
|
13
|
-
<link rel="stylesheet" href="../../app-shell.css">
|
|
14
|
-
<script type="importmap">
|
|
15
|
-
{ "imports": {
|
|
16
|
-
"webjsx": "../../vendor/webjsx/index.js",
|
|
17
|
-
"webjsx/": "../../vendor/webjsx/",
|
|
18
|
-
"webjsx/jsx-runtime": "../../vendor/webjsx/jsx-runtime.js",
|
|
19
|
-
"ds/": "../../src/"
|
|
20
|
-
} }
|
|
21
|
-
</script>
|
|
22
|
-
</head>
|
|
23
|
-
<body data-screen-label="14 Gallery">
|
|
24
|
-
<div id="root"></div>
|
|
25
|
-
<script type="module" src="./app.js"></script>
|
|
26
|
-
</body></html>
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
# 247420 — Homepage UI Kit
|
|
2
|
-
|
|
3
|
-
Portfolio index for 247420.xyz. Flush-left, dateline-header, index-card project list. One hero display line, one acid-accent stamp.
|
|
4
|
-
|
|
5
|
-
**Files**
|
|
6
|
-
- `index.html` — the full page, interactive
|
|
7
|
-
- `components.jsx` — Header, Dateline, Hero, ProjectRow, Footer, Manifesto
|
|
@@ -1,167 +0,0 @@
|
|
|
1
|
-
import * as webjsx from 'webjsx';
|
|
2
|
-
import { mountKit } from 'ds/bootstrap.js';
|
|
3
|
-
const h = webjsx.createElement;
|
|
4
|
-
|
|
5
|
-
const state = { route: 'works', opened: 0 };
|
|
6
|
-
const root = document.getElementById('root');
|
|
7
|
-
|
|
8
|
-
const navItems = [['works','#works'],['writing','#writing'],['manifesto','#manifesto'],['source ↗','https://github.com/AnEntrypoint']];
|
|
9
|
-
|
|
10
|
-
function Topbar() {
|
|
11
|
-
return h('header', { class: 'app-topbar' },
|
|
12
|
-
h('span', { class: 'brand' }, '247420', h('span', { class: 'slash' }, ' / '), 'an entrypoint'),
|
|
13
|
-
h('nav', {}, ...navItems.map(([label, href]) =>
|
|
14
|
-
h('a', {
|
|
15
|
-
key: label,
|
|
16
|
-
href,
|
|
17
|
-
class: state.route === label.replace(' ↗','') ? 'active' : '',
|
|
18
|
-
onclick: (e) => { if (!href.startsWith('http')) { e.preventDefault(); state.route = label.replace(' ↗',''); render(); } }
|
|
19
|
-
}, label)
|
|
20
|
-
))
|
|
21
|
-
);
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
function Crumb() {
|
|
25
|
-
return h('div', { class: 'app-crumb' },
|
|
26
|
-
h('span', {}, '247420'), h('span', { class: 'sep' }, '›'),
|
|
27
|
-
h('span', { class: 'leaf' }, state.route)
|
|
28
|
-
);
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
function Hero() {
|
|
32
|
-
return h('div', { style: 'padding:32px 32px 24px 32px' },
|
|
33
|
-
h('h1', { style: 'font-size:36px;font-weight:600;margin:0 0 4px 0;color:var(--panel-text);letter-spacing:-0.01em' },
|
|
34
|
-
'the creative department of the internet.'
|
|
35
|
-
),
|
|
36
|
-
h('p', { style: 'font-size:14px;line-height:1.55;color:var(--panel-text-2);max-width:64ch;margin:0 0 20px 0' },
|
|
37
|
-
'247420 is a collective of mercurials. we ship fast, break things on purpose, and document honestly. ',
|
|
38
|
-
h('span', { style: 'color:var(--panel-accent);font-weight:500' }, 'humor is load-bearing.')
|
|
39
|
-
),
|
|
40
|
-
h('div', { class: 'panel', style: 'max-width:560px;margin:0' },
|
|
41
|
-
h('div', { class: 'panel-head' }, h('span', {}, 'currently shipping'), h('span', {}, '3')),
|
|
42
|
-
h('div', { class: 'panel-body' },
|
|
43
|
-
h('div', { class: 'row' },
|
|
44
|
-
h('span', { class: 'code' }, h('span', { style: 'color:var(--panel-accent)' }, '●')),
|
|
45
|
-
h('span', { class: 'title' }, 'gm', h('span', { class: 'sub' }, 'state machine v0.4.1')),
|
|
46
|
-
h('span', { class: 'meta' }, 'live')
|
|
47
|
-
),
|
|
48
|
-
h('div', { class: 'row' },
|
|
49
|
-
h('span', { class: 'code' }, h('span', { style: 'color:var(--panel-accent)' }, '●')),
|
|
50
|
-
h('span', { class: 'title' }, 'zellous', h('span', { class: 'sub' }, 'push-to-talk')),
|
|
51
|
-
h('span', { class: 'meta' }, 'live')
|
|
52
|
-
),
|
|
53
|
-
h('div', { class: 'row' },
|
|
54
|
-
h('span', { class: 'code' }, h('span', { style: 'color:var(--panel-text-3)' }, '○')),
|
|
55
|
-
h('span', { class: 'title' }, 'thebird', h('span', { class: 'sub' }, '—')),
|
|
56
|
-
h('span', { class: 'meta' }, 'wip')
|
|
57
|
-
)
|
|
58
|
-
)
|
|
59
|
-
)
|
|
60
|
-
);
|
|
61
|
-
}
|
|
62
|
-
|
|
63
|
-
const works = [
|
|
64
|
-
{ code:'001', title:'gm', sub:'state machine for coding agents', meta:'2025 · 3k★', body:'a tiny deterministic state machine that lets llms code without losing their minds. it thinks so you don\'t have to (as much).' },
|
|
65
|
-
{ code:'002', title:'zellous', sub:'production push-to-talk', meta:'2024 · live', body:'hold the button. talk. someone on the other side hears you. opus codec, dynamic rooms, 50-message replay.' },
|
|
66
|
-
{ code:'003', title:'spoint', sub:'spawnpoint', meta:'2024 · live', body:'the directory for "where should we start?" one url, one room, everyone lands in the same place.' },
|
|
67
|
-
{ code:'004', title:'flatspace', sub:'flat-file cms', meta:'wip', body:'still figuring out what to say about this one. come back tuesday.' },
|
|
68
|
-
{ code:'005', title:'thebird', sub:'—', meta:'wip', body:'yes, the name is a reference. no, we won\'t tell you to what.' },
|
|
69
|
-
{ code:'006', title:'mcp-repl', sub:'repl for mcp', meta:'2024 · live', body:'executenodejs, executedeno, executebash, astgrep_search. if you don\'t know what those are, this one isn\'t for you.' },
|
|
70
|
-
{ code:'007', title:'mutagen', sub:'adaptogen server', meta:'2024 · live', body:'everything to do with a dapp deg3n. read the source.' },
|
|
71
|
-
{ code:'008', title:'techshaman', sub:'member site', meta:'ongoing', body:'the official website for the techshaman. an entrypoint probably emerging.' }
|
|
72
|
-
];
|
|
73
|
-
|
|
74
|
-
function Works() {
|
|
75
|
-
return h('div', { style: 'padding:20px 32px' },
|
|
76
|
-
h('h3', {}, '// works'),
|
|
77
|
-
h('div', { class: 'panel' },
|
|
78
|
-
h('div', { class: 'panel-head' },
|
|
79
|
-
h('span', {}, 'works · 08 of ~61'),
|
|
80
|
-
h('a', { href: 'https://github.com/AnEntrypoint', style: 'color:var(--panel-accent);text-decoration:none' }, 'all repos ↗')
|
|
81
|
-
),
|
|
82
|
-
h('div', { class: 'panel-body' }, ...works.map((w, i) => {
|
|
83
|
-
const isOpen = state.opened === i;
|
|
84
|
-
return h('div', { key: i },
|
|
85
|
-
h('div', {
|
|
86
|
-
class: 'row' + (isOpen ? ' active' : ''),
|
|
87
|
-
onclick: () => { state.opened = isOpen ? null : i; render(); }
|
|
88
|
-
},
|
|
89
|
-
h('span', { class: 'code' }, w.code),
|
|
90
|
-
h('span', { class: 'title' }, w.title, h('span', { class: 'sub' }, w.sub)),
|
|
91
|
-
h('span', { class: 'meta' }, w.meta + ' ' + (isOpen ? '−' : '+'))
|
|
92
|
-
),
|
|
93
|
-
isOpen ? h('div', { class: 'work-detail' },
|
|
94
|
-
h('p', { class: 'ds-prose ds-work-body' }, w.body),
|
|
95
|
-
h('div', { class: 'ds-work-actions' },
|
|
96
|
-
h('a', { class: 'btn-primary', href: '#' }, 'open ↗'),
|
|
97
|
-
h('a', { class: 'btn', href: '#' }, 'source')
|
|
98
|
-
)
|
|
99
|
-
) : null
|
|
100
|
-
);
|
|
101
|
-
}))
|
|
102
|
-
)
|
|
103
|
-
);
|
|
104
|
-
}
|
|
105
|
-
|
|
106
|
-
function Writing() {
|
|
107
|
-
const posts = [
|
|
108
|
-
{ date:'2026.04.14', title:'we were here first', tag:'lore' },
|
|
109
|
-
{ date:'2026.03.22', title:'gm v0.4 postmortem, or: why state machines', tag:'gm' },
|
|
110
|
-
{ date:'2026.02.09', title:'push-to-talk is a protocol, not a feature', tag:'zellous' },
|
|
111
|
-
{ date:'2025.12.11', title:'against the vibe-coded interface', tag:'manifesto' },
|
|
112
|
-
{ date:'2025.10.03', title:'notes on shipping weird', tag:'notes' }
|
|
113
|
-
];
|
|
114
|
-
return h('div', { style: 'padding:20px 32px' },
|
|
115
|
-
h('h3', {}, '// recent writing'),
|
|
116
|
-
h('div', { class: 'panel' },
|
|
117
|
-
h('div', { class: 'panel-body' }, ...posts.map((p, i) =>
|
|
118
|
-
h('a', { key: i, class: 'row', href: '#' },
|
|
119
|
-
h('span', { class: 'code' }, p.date),
|
|
120
|
-
h('span', { class: 'title' }, p.title),
|
|
121
|
-
h('span', { class: 'meta' }, '§ ' + p.tag)
|
|
122
|
-
)
|
|
123
|
-
))
|
|
124
|
-
)
|
|
125
|
-
);
|
|
126
|
-
}
|
|
127
|
-
|
|
128
|
-
function Manifesto() {
|
|
129
|
-
return h('div', { class: 'ds-section ds-manifesto-section' },
|
|
130
|
-
h('h3', {}, '// manifesto · rough draft'),
|
|
131
|
-
h('div', { class: 'ds-prose ds-manifesto' },
|
|
132
|
-
h('p', { class: 'ds-manifesto-para' }, 'we are the creative department of the internet. always open (24/7). always a little bit high on possibility (420).'),
|
|
133
|
-
h('p', { class: 'ds-manifesto-para' }, 'move fast. break things. document honestly. ship the rough draft. ', h('strong', {}, 'humor is load-bearing.')),
|
|
134
|
-
h('p', { class: 'ds-manifesto-para dim' }, 'we will not tolerate simpleton design patterns, trifectas, gradients, or anything silly. nothing lame. we\'re internet natives and not easily pleased.')
|
|
135
|
-
)
|
|
136
|
-
);
|
|
137
|
-
}
|
|
138
|
-
|
|
139
|
-
function Status() {
|
|
140
|
-
return h('footer', { class: 'app-status' },
|
|
141
|
-
h('span', { class: 'item' }, 'main'),
|
|
142
|
-
h('span', { class: 'item' }, '• 8 works'),
|
|
143
|
-
h('span', { class: 'item' }, '• 5 posts'),
|
|
144
|
-
h('span', { class: 'spread' }),
|
|
145
|
-
h('span', { class: 'item' }, 'probably emerging'),
|
|
146
|
-
h('span', { class: 'item' }, h('a', { href: 'https://github.com/AnEntrypoint' }, 'source ↗'))
|
|
147
|
-
);
|
|
148
|
-
}
|
|
149
|
-
|
|
150
|
-
function App() {
|
|
151
|
-
return h('div', { class: 'app' },
|
|
152
|
-
Topbar(),
|
|
153
|
-
Crumb(),
|
|
154
|
-
h('div', { class: 'app-body no-side' },
|
|
155
|
-
h('main', { class: 'app-main', style: 'padding:0' },
|
|
156
|
-
Hero(),
|
|
157
|
-
Works(),
|
|
158
|
-
Writing(),
|
|
159
|
-
Manifesto()
|
|
160
|
-
)
|
|
161
|
-
),
|
|
162
|
-
Status()
|
|
163
|
-
);
|
|
164
|
-
}
|
|
165
|
-
|
|
166
|
-
const kit = mountKit({ root, view: App, screen: '01 Homepage' });
|
|
167
|
-
function render() { kit.schedule(); }
|
|
@@ -1,46 +0,0 @@
|
|
|
1
|
-
<!doctype html>
|
|
2
|
-
<html lang="en" data-theme="auto" class="ds-247420"><head>
|
|
3
|
-
<meta charset="utf-8">
|
|
4
|
-
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
5
|
-
<meta name="theme-color" content="#247420" media="(prefers-color-scheme: light)">
|
|
6
|
-
<meta name="theme-color" content="#3A9A34" media="(prefers-color-scheme: dark)">
|
|
7
|
-
<meta name="color-scheme" content="light dark">
|
|
8
|
-
<title>homepage / 247420</title>
|
|
9
|
-
<meta name="description" content="landing surface for the 247420 collective — works, writing, manifesto.">
|
|
10
|
-
<meta name="author" content="247420 / AnEntrypoint">
|
|
11
|
-
<meta name="keywords" content="247420, anentrypoint, design system, webjsx, rippleui, creative collective">
|
|
12
|
-
<link rel="canonical" href="https://anentrypoint.github.io/design/ui_kits/homepage/">
|
|
13
|
-
<link rel="icon" type="image/svg+xml" href="../../favicon.svg">
|
|
14
|
-
<meta property="og:type" content="website">
|
|
15
|
-
<meta property="og:title" content="homepage / 247420">
|
|
16
|
-
<meta property="og:description" content="landing surface for the 247420 collective — works, writing, manifesto.">
|
|
17
|
-
<meta property="og:url" content="https://anentrypoint.github.io/design/ui_kits/homepage/">
|
|
18
|
-
<meta property="og:site_name" content="247420 / design">
|
|
19
|
-
<meta property="og:image" content="https://anentrypoint.github.io/design/og-card.png">
|
|
20
|
-
<meta property="og:image:width" content="1200">
|
|
21
|
-
<meta property="og:image:height" content="630">
|
|
22
|
-
<meta property="og:image:alt" content="247420 design system">
|
|
23
|
-
<meta property="og:locale" content="en_US">
|
|
24
|
-
<meta name="twitter:card" content="summary_large_image">
|
|
25
|
-
<meta name="twitter:title" content="homepage / 247420">
|
|
26
|
-
<meta name="twitter:description" content="landing surface for the 247420 collective — works, writing, manifesto.">
|
|
27
|
-
<meta name="twitter:image" content="https://anentrypoint.github.io/design/og-card.png">
|
|
28
|
-
<meta name="twitter:site" content="@AnEntrypoint">
|
|
29
|
-
<meta name="robots" content="index, follow">
|
|
30
|
-
<link rel="stylesheet" href="../../colors_and_type.css">
|
|
31
|
-
<link rel="stylesheet" href="../../app-shell.css">
|
|
32
|
-
|
|
33
|
-
<script type="importmap">
|
|
34
|
-
{ "imports": {
|
|
35
|
-
"webjsx": "../../vendor/webjsx/index.js",
|
|
36
|
-
"webjsx/": "../../vendor/webjsx/",
|
|
37
|
-
"webjsx/jsx-runtime": "../../vendor/webjsx/jsx-runtime.js",
|
|
38
|
-
"webjsx-router": "../../vendor/webjsx-router.js",
|
|
39
|
-
"ds/": "../../src/"
|
|
40
|
-
} }
|
|
41
|
-
</script>
|
|
42
|
-
</head>
|
|
43
|
-
<body data-screen-label="01 Homepage">
|
|
44
|
-
<div id="root"></div>
|
|
45
|
-
<script type="module" src="./app.js"></script>
|
|
46
|
-
</body></html>
|
|
@@ -1,154 +0,0 @@
|
|
|
1
|
-
import * as webjsx from 'webjsx';
|
|
2
|
-
const h = webjsx.createElement;
|
|
3
|
-
|
|
4
|
-
const state = { copied: false, tab: 'readme' };
|
|
5
|
-
const root = document.getElementById('root');
|
|
6
|
-
|
|
7
|
-
const sideSections = [
|
|
8
|
-
{ group: 'project', items: [
|
|
9
|
-
['◆', 'overview', 'readme', true],
|
|
10
|
-
['§', 'readme', 'readme', false],
|
|
11
|
-
['§', 'docs', 'docs', false],
|
|
12
|
-
['§', 'changelog', 'changelog', false]
|
|
13
|
-
]},
|
|
14
|
-
{ group: 'reference', items: [
|
|
15
|
-
['›', 'executenodejs', 'ref', false],
|
|
16
|
-
['›', 'executedeno', 'ref', false],
|
|
17
|
-
['›', 'astgrep_*', 'ref', false],
|
|
18
|
-
['›', 'batch_execute', 'ref', false]
|
|
19
|
-
]},
|
|
20
|
-
{ group: 'links', items: [
|
|
21
|
-
['↗', 'source', 'ext', false],
|
|
22
|
-
['↗', 'npm', 'ext', false],
|
|
23
|
-
['↗', 'releases', 'ext', false]
|
|
24
|
-
]}
|
|
25
|
-
];
|
|
26
|
-
|
|
27
|
-
function Topbar() {
|
|
28
|
-
return h('header', { class: 'app-topbar' },
|
|
29
|
-
h('span', { class: 'brand' }, '247420', h('span', { class: 'slash' }, ' / '), 'gm'),
|
|
30
|
-
h('nav', {},
|
|
31
|
-
h('a', { href: '../homepage/' }, '← all projects'),
|
|
32
|
-
h('a', { href: '#', class: state.tab==='readme'?'active':'' , onclick:(e)=>{e.preventDefault();state.tab='readme';render();}}, 'readme'),
|
|
33
|
-
h('a', { href: '#', class: state.tab==='docs'?'active':'' , onclick:(e)=>{e.preventDefault();state.tab='docs';render();}}, 'docs'),
|
|
34
|
-
h('a', { href: '#' }, 'source ↗')
|
|
35
|
-
)
|
|
36
|
-
);
|
|
37
|
-
}
|
|
38
|
-
|
|
39
|
-
function Crumb() {
|
|
40
|
-
return h('div', { class: 'app-crumb' },
|
|
41
|
-
h('span', {}, '247420'), h('span', { class: 'sep' }, '›'),
|
|
42
|
-
h('span', {}, 'gm'), h('span', { class: 'sep' }, '›'),
|
|
43
|
-
h('span', { class: 'leaf' }, state.tab),
|
|
44
|
-
h('span', { style: 'margin-left:auto;display:flex;gap:10px;align-items:center' },
|
|
45
|
-
h('span', { class: 'chip accent' }, '● live'),
|
|
46
|
-
h('span', { class: 'chip dim' }, 'v0.4.1')
|
|
47
|
-
)
|
|
48
|
-
);
|
|
49
|
-
}
|
|
50
|
-
|
|
51
|
-
function Side() {
|
|
52
|
-
return h('aside', { class: 'app-side' }, ...sideSections.flatMap(sec => [
|
|
53
|
-
h('div', { class: 'group', key: sec.group }, sec.group),
|
|
54
|
-
...sec.items.map(([glyph, label, kind, active], i) =>
|
|
55
|
-
h('a', { key: sec.group + i, href: '#', class: active ? 'active' : '' },
|
|
56
|
-
h('span', { class: 'glyph' }, glyph),
|
|
57
|
-
h('span', {}, label)
|
|
58
|
-
)
|
|
59
|
-
)
|
|
60
|
-
]));
|
|
61
|
-
}
|
|
62
|
-
|
|
63
|
-
function Overview() {
|
|
64
|
-
return [
|
|
65
|
-
h('h1', {}, 'gm'),
|
|
66
|
-
h('p', { class: 'lede' }, 'state machine for coding agents. it thinks, so you don\'t have to (as much).'),
|
|
67
|
-
|
|
68
|
-
h('h3', {}, 'install'),
|
|
69
|
-
Install({ cmd: 'npx -y @anentrypoint/mcp-gm' }),
|
|
70
|
-
|
|
71
|
-
h('h3', {}, 'receipt'),
|
|
72
|
-
Receipt({ rows: [
|
|
73
|
-
['status','live · ships tuesdays'],
|
|
74
|
-
['stars','3,124'],
|
|
75
|
-
['license','MIT'],
|
|
76
|
-
['lang','typescript · deno'],
|
|
77
|
-
['size','2.1mb'],
|
|
78
|
-
['deps','0 runtime'],
|
|
79
|
-
['authors','the collective'],
|
|
80
|
-
['first commit','2024.09.03']
|
|
81
|
-
]}),
|
|
82
|
-
|
|
83
|
-
h('h3', {}, 'changelog'),
|
|
84
|
-
Changelog({ entries: [
|
|
85
|
-
{ date:'2026.04.20', ver:'v0.4.1', msg:'ship it. fixed the thing everyone complained about.' },
|
|
86
|
-
{ date:'2026.03.22', ver:'v0.4.0', msg:'new state machine runtime. broke everything on purpose. read the postmortem.' },
|
|
87
|
-
{ date:'2026.02.09', ver:'v0.3.7', msg:'astgrep_search is now astgrep_enhanced_search. you will adapt.' },
|
|
88
|
-
{ date:'2025.12.11', ver:'v0.3.0', msg:'first public release. gm, world.' }
|
|
89
|
-
]})
|
|
90
|
-
];
|
|
91
|
-
}
|
|
92
|
-
|
|
93
|
-
function Install({ cmd }) {
|
|
94
|
-
return h('div', { class: 'cli' },
|
|
95
|
-
h('span', { class: 'prompt' }, '$'),
|
|
96
|
-
h('span', { class: 'cmd' }, cmd),
|
|
97
|
-
h('span', {
|
|
98
|
-
class: 'copy',
|
|
99
|
-
onclick: () => { navigator.clipboard?.writeText(cmd); state.copied = true; render(); setTimeout(() => { state.copied = false; render(); }, 1200); }
|
|
100
|
-
}, state.copied ? 'copied' : 'copy')
|
|
101
|
-
);
|
|
102
|
-
}
|
|
103
|
-
|
|
104
|
-
function Receipt({ rows }) {
|
|
105
|
-
return h('table', { class: 'kv' },
|
|
106
|
-
h('tbody', {}, ...rows.map(([k, v], i) =>
|
|
107
|
-
h('tr', { key: i },
|
|
108
|
-
h('td', {}, k),
|
|
109
|
-
h('td', {}, v)
|
|
110
|
-
)
|
|
111
|
-
))
|
|
112
|
-
);
|
|
113
|
-
}
|
|
114
|
-
|
|
115
|
-
function Changelog({ entries }) {
|
|
116
|
-
return h('div', { class: 'panel', style: 'max-width:900px' },
|
|
117
|
-
h('div', { class: 'panel-body' }, ...entries.map((e, i) =>
|
|
118
|
-
h('div', { key: i, class: 'row', style: 'grid-template-columns:100px 70px 1fr' },
|
|
119
|
-
h('span', { class: 'code' }, e.date),
|
|
120
|
-
h('span', { style: 'color:var(--panel-accent);font-family:var(--ff-mono);font-size:14px' }, e.ver),
|
|
121
|
-
h('span', { class: 'title' }, e.msg)
|
|
122
|
-
)
|
|
123
|
-
))
|
|
124
|
-
);
|
|
125
|
-
}
|
|
126
|
-
|
|
127
|
-
function Status() {
|
|
128
|
-
return h('footer', { class: 'app-status' },
|
|
129
|
-
h('span', { class: 'item' }, 'main'),
|
|
130
|
-
h('span', { class: 'item' }, '• typescript'),
|
|
131
|
-
h('span', { class: 'item' }, '• 0 errors'),
|
|
132
|
-
h('span', { class: 'item' }, '• 0 warnings'),
|
|
133
|
-
h('span', { class: 'spread' }),
|
|
134
|
-
h('span', { class: 'item' }, 'v0.4.1'),
|
|
135
|
-
h('span', { class: 'item' }, '• MIT')
|
|
136
|
-
);
|
|
137
|
-
}
|
|
138
|
-
|
|
139
|
-
function App() {
|
|
140
|
-
return h('div', { class: 'app' },
|
|
141
|
-
Topbar(),
|
|
142
|
-
Crumb(),
|
|
143
|
-
h('div', { class: 'app-body' },
|
|
144
|
-
Side(),
|
|
145
|
-
h('main', { class: 'app-main narrow' }, ...Overview())
|
|
146
|
-
),
|
|
147
|
-
Status()
|
|
148
|
-
);
|
|
149
|
-
}
|
|
150
|
-
|
|
151
|
-
function render() {
|
|
152
|
-
webjsx.applyDiff(root, App());
|
|
153
|
-
}
|
|
154
|
-
render();
|
|
@@ -1,45 +0,0 @@
|
|
|
1
|
-
<!doctype html>
|
|
2
|
-
<html lang="en" data-theme="auto" class="ds-247420"><head>
|
|
3
|
-
<meta charset="utf-8">
|
|
4
|
-
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
5
|
-
<meta name="theme-color" content="#247420" media="(prefers-color-scheme: light)">
|
|
6
|
-
<meta name="theme-color" content="#3A9A34" media="(prefers-color-scheme: dark)">
|
|
7
|
-
<meta name="color-scheme" content="light dark">
|
|
8
|
-
<title>project / gm · 247420</title>
|
|
9
|
-
<meta name="description" content="generic project landing template — install, receipt, changelog, docs sidebar.">
|
|
10
|
-
<meta name="author" content="247420 / AnEntrypoint">
|
|
11
|
-
<meta name="keywords" content="247420, anentrypoint, design system, webjsx, rippleui, creative collective">
|
|
12
|
-
<link rel="canonical" href="https://anentrypoint.github.io/design/ui_kits/project_page/">
|
|
13
|
-
<link rel="icon" type="image/svg+xml" href="../../favicon.svg">
|
|
14
|
-
<meta property="og:type" content="website">
|
|
15
|
-
<meta property="og:title" content="project / gm · 247420">
|
|
16
|
-
<meta property="og:description" content="generic project landing template — install, receipt, changelog, docs sidebar.">
|
|
17
|
-
<meta property="og:url" content="https://anentrypoint.github.io/design/ui_kits/project_page/">
|
|
18
|
-
<meta property="og:site_name" content="247420 / design">
|
|
19
|
-
<meta property="og:image" content="https://anentrypoint.github.io/design/og-card.png">
|
|
20
|
-
<meta property="og:image:width" content="1200">
|
|
21
|
-
<meta property="og:image:height" content="630">
|
|
22
|
-
<meta property="og:image:alt" content="247420 design system">
|
|
23
|
-
<meta property="og:locale" content="en_US">
|
|
24
|
-
<meta name="twitter:card" content="summary_large_image">
|
|
25
|
-
<meta name="twitter:title" content="project / gm · 247420">
|
|
26
|
-
<meta name="twitter:description" content="generic project landing template — install, receipt, changelog, docs sidebar.">
|
|
27
|
-
<meta name="twitter:image" content="https://anentrypoint.github.io/design/og-card.png">
|
|
28
|
-
<meta name="twitter:site" content="@AnEntrypoint">
|
|
29
|
-
<meta name="robots" content="index, follow">
|
|
30
|
-
<link rel="stylesheet" href="../../colors_and_type.css">
|
|
31
|
-
<link rel="stylesheet" href="../../app-shell.css">
|
|
32
|
-
|
|
33
|
-
<script type="importmap">
|
|
34
|
-
{ "imports": {
|
|
35
|
-
"webjsx": "../../vendor/webjsx/index.js",
|
|
36
|
-
"webjsx/": "../../vendor/webjsx/",
|
|
37
|
-
"webjsx/jsx-runtime": "../../vendor/webjsx/jsx-runtime.js",
|
|
38
|
-
"webjsx-router": "../../vendor/webjsx-router.js"
|
|
39
|
-
} }
|
|
40
|
-
</script>
|
|
41
|
-
</head>
|
|
42
|
-
<body data-screen-label="02 Project Page">
|
|
43
|
-
<div id="root"></div>
|
|
44
|
-
<script type="module" src="./app.js"></script>
|
|
45
|
-
</body></html>
|