@dcl-regenesislabs/artifacts 1.0.0
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 +357 -0
- package/cli/artifacts.mjs +706 -0
- package/package.json +48 -0
- package/shared/artifact-id.js +175 -0
- package/templates/artifact/assets/dcl.css +279 -0
- package/templates/artifact/assets/dcl.js +62 -0
- package/templates/artifact/index.html +161 -0
|
@@ -0,0 +1,161 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
6
|
+
<meta name="robots" content="noindex, nofollow">
|
|
7
|
+
<title>Artifact template</title>
|
|
8
|
+
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
9
|
+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
10
|
+
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap">
|
|
11
|
+
<link rel="stylesheet" href="./assets/dcl.css">
|
|
12
|
+
<script src="./assets/dcl.js"></script>
|
|
13
|
+
<!-- Per-page tuning goes here. Usually nothing; at most the accent. -->
|
|
14
|
+
<style>
|
|
15
|
+
/* :root { --accent: #b4531a; --accent-soft: #fbeee3; } */
|
|
16
|
+
</style>
|
|
17
|
+
</head>
|
|
18
|
+
<body>
|
|
19
|
+
<div class="wrap">
|
|
20
|
+
|
|
21
|
+
<header>
|
|
22
|
+
<div class="top">
|
|
23
|
+
<div>
|
|
24
|
+
<p class="eyebrow">DCL Regenesis Labs · prose template</p>
|
|
25
|
+
<h1>Artifact template</h1>
|
|
26
|
+
<p class="lede">The starting point for a <b>prose</b> page — a spec, a runbook, a long memo. It carries the <b>palette, type, dark mode and the building blocks</b>, so a new artifact is a matter of writing the content, not designing a page. The page is <b>one self-contained file</b> — styles and the theme toggle are inlined at the top — so it works on the host, in a download, or anywhere else. Every block below is real usage of itself: copy the one you need, delete the rest.</p>
|
|
27
|
+
<div class="toc">
|
|
28
|
+
<a href="#text">Text</a><a href="#callouts">Callouts</a><a href="#tables">Tables</a><a href="#cards">Cards</a><a href="#sequence">Sequence</a><a href="#checklist">Checklist</a><a href="#code">Code</a><a href="#diff">Diff</a>
|
|
29
|
+
</div>
|
|
30
|
+
</div>
|
|
31
|
+
<button class="toggle" type="button" data-theme-toggle aria-label="Toggle theme">◐ theme</button>
|
|
32
|
+
</div>
|
|
33
|
+
</header>
|
|
34
|
+
|
|
35
|
+
<h2 id="text">Text</h2>
|
|
36
|
+
<p class="sub">A section is an <code>h2</code> followed by an optional <code>.sub</code> line like this one, then paragraphs. Running text is capped at about 78 characters so it stays readable at any width.</p>
|
|
37
|
+
<p>Headings are for structure, not decoration. Use <code>h2</code> for the sections in the table of contents and <code>h3</code> for subdivisions inside them. Inline <code>code</code> is for identifiers, paths and commands; <b>bold</b> is for the one clause the reader must not miss. Keyboard hints look like <kbd>⌘K</kbd>.</p>
|
|
38
|
+
<p>Numbers that line up in a column get <code>.num</code> for tabular figures. <span class="muted">Secondary remarks take <code>.muted</code>.</span> Inline state takes a pill: <span class="pill ok">done</span> <span class="pill warn">in review</span> <span class="pill bad">blocked</span> <span class="pill accent">default</span> — or the outlined <span class="tag info">tag</span> variant when it sits next to prose.</p>
|
|
39
|
+
|
|
40
|
+
<h2 id="callouts">Callouts</h2>
|
|
41
|
+
<p class="sub">Two shapes. <code>.callout</code> is filled and holds the thing the page exists to say; <code>.note</code> is quieter, with a colored rail, for context and caveats. Both take <code>ok</code>, <code>warn</code>, <code>bad</code>, <code>info</code>.</p>
|
|
42
|
+
<div class="callout">
|
|
43
|
+
<p><b>Lead with the conclusion.</b> A callout at the top of a section carries the claim; the rest of the section is the evidence. If a reader only sees this box they should still leave with the right answer.</p>
|
|
44
|
+
<p>A second paragraph is fine. A third usually means this should be a section.</p>
|
|
45
|
+
</div>
|
|
46
|
+
<div class="note warn">
|
|
47
|
+
<p><b>A note holds a caveat, not the headline.</b> Something the reader should know before acting: a limitation, a dependency, a thing that looks done but is not.</p>
|
|
48
|
+
</div>
|
|
49
|
+
<div class="callout ok">
|
|
50
|
+
<p><b>Verified.</b> Use the green one only for things actually checked — a test that passed, a value read from source — and say what was checked.</p>
|
|
51
|
+
</div>
|
|
52
|
+
|
|
53
|
+
<h2 id="tables">Tables</h2>
|
|
54
|
+
<p class="sub">Wrap every table in <code>.tblwrap</code> so it scrolls sideways on a phone instead of the page. Cell classes: <code>.n</code> for a name column, <code>.t</code> for short no-wrap values, <code>.src</code> for file references, <code>.r</code> for right-aligned numbers.</p>
|
|
55
|
+
<div class="tblwrap"><table>
|
|
56
|
+
<thead><tr><th>Component</th><th>Type</th><th>Where</th><th>Files</th><th>Status</th></tr></thead>
|
|
57
|
+
<tbody>
|
|
58
|
+
<tr><td class="n">Worker</td><td class="t">Cloudflare Worker</td><td class="src"><b>src/index.ts</b> routes <code>/_api</code> and reads</td><td class="r">6</td><td class="yes">deployed</td></tr>
|
|
59
|
+
<tr><td class="n">CLI</td><td class="t">Node, zero deps</td><td class="src"><b>cli/artifacts.mjs</b> new, push, info, ls, rm</td><td class="r">1</td><td class="yes">deployed</td></tr>
|
|
60
|
+
<tr><td class="n">Access</td><td class="t">Zero Trust</td><td class="src"><b>scripts/setup-access.mjs</b> four apps, email rule</td><td class="r">1</td><td class="chg">re-run to change</td></tr>
|
|
61
|
+
<tr><td class="n">Bar</td><td class="t">injected by the Worker</td><td class="src"><b>src/bar-script.ts</b> versions, public switch, checkboxes</td><td class="r">1</td><td class="yes">deployed</td></tr>
|
|
62
|
+
</tbody>
|
|
63
|
+
</table></div>
|
|
64
|
+
|
|
65
|
+
<h3>Key / value</h3>
|
|
66
|
+
<p class="sub">For a handful of facts about one thing, a <code>.kv</code> list beats a two-column table.</p>
|
|
67
|
+
<dl class="kv">
|
|
68
|
+
<dt>host</dt><dd>artifacts.dclregenesislabs.xyz</dd>
|
|
69
|
+
<dt>storage</dt><dd>R2 bucket <code>dcl-artifacts</code>: one record per artifact, blobs by digest under <code>a/{id}/</code></dd>
|
|
70
|
+
<dt>id</dt><dd>a UUID v4, minted on the first push and kept for life; every push after that is a new version</dd>
|
|
71
|
+
<dt>limits</dt><dd>25 MB per file, 2000 files per artifact</dd>
|
|
72
|
+
</dl>
|
|
73
|
+
|
|
74
|
+
<h2 id="cards">Cards</h2>
|
|
75
|
+
<p class="sub"><code>.grid2</code> or <code>.grid3</code> of <code>.card</code>. The left rail takes the card's role: <code>ok</code>, <code>warn</code>, <code>bad</code>, <code>info</code>, or <code>plain</code>. A card is for a thing with a name and a few attributes — not for every paragraph.</p>
|
|
76
|
+
<div class="grid2">
|
|
77
|
+
<div class="card info">
|
|
78
|
+
<div class="card-h"><span class="name">shared</span><span class="badge">default</span><span class="lang">/{id}</span></div>
|
|
79
|
+
<p class="covers">Behind the work-email login.</p>
|
|
80
|
+
<ul>
|
|
81
|
+
<li>Opens for <code>@dclregenesislabs.xyz</code> and <code>@decentraland.org</code></li>
|
|
82
|
+
<li>One-time code by email, session lasts a week</li>
|
|
83
|
+
<li>Shows the bar: versions, the public switch, checkboxes that stick</li>
|
|
84
|
+
</ul>
|
|
85
|
+
</div>
|
|
86
|
+
<div class="card warn">
|
|
87
|
+
<div class="card-h"><span class="name">public</span><span class="badge">switch in the bar</span><span class="lang">/p/{alias}</span></div>
|
|
88
|
+
<p class="covers">A second URL that skips the login.</p>
|
|
89
|
+
<ul>
|
|
90
|
+
<li>Anyone holding the link can open it; no bar, checkboxes read-only</li>
|
|
91
|
+
<li>Turned on and off from the page, by anyone who can open it</li>
|
|
92
|
+
<li>Turning it off is permanent — the next link is different</li>
|
|
93
|
+
</ul>
|
|
94
|
+
</div>
|
|
95
|
+
</div>
|
|
96
|
+
|
|
97
|
+
<h3>Numbers</h3>
|
|
98
|
+
<p class="sub">A row of <code>.stat</code> tiles, only when the figures are the point of the page.</p>
|
|
99
|
+
<div class="grid3">
|
|
100
|
+
<div class="stat"><div class="v num">19</div><div class="l">smoke checks passing</div></div>
|
|
101
|
+
<div class="stat"><div class="v num">6.7 KB</div><div class="l">Worker, gzipped</div></div>
|
|
102
|
+
<div class="stat"><div class="v num">0</div><div class="l">CLI dependencies</div></div>
|
|
103
|
+
</div>
|
|
104
|
+
|
|
105
|
+
<h2 id="sequence">Sequence</h2>
|
|
106
|
+
<p class="sub"><code>ol.phases</code> is numbered on purpose: use it only when the order carries meaning — a rollout, a procedure, a timeline. For a plain list, use a plain list.</p>
|
|
107
|
+
<ol class="phases">
|
|
108
|
+
<li><b>Scaffold.</b><p><code>node cli/artifacts.mjs new ./my-page --name "Page title"</code> writes a single <code>index.html</code> into a fresh directory.</p></li>
|
|
109
|
+
<li><b>Write.</b><p>Replace everything inside <code>.wrap</code>. Leave the big <code><style></code> and <code><script></code> at the top alone; the small <code><style></code> after them is for per-page tuning. Inline images as data URIs or put them next to the file and reference them relatively — a single file travels best.</p></li>
|
|
110
|
+
<li><b>Publish.</b><p><code>node cli/artifacts.mjs push ./my-page</code> prints the link. To change the page later, push again with <code>--id</code> and the same link: that is a new version, and the bar at the top lets readers step back through them.</p></li>
|
|
111
|
+
</ol>
|
|
112
|
+
|
|
113
|
+
<h2 id="checklist">Checklist</h2>
|
|
114
|
+
<p class="sub">A checkbox with <code>data-persist</code> remembers its state <b>on the host</b>: tick it, reload, open it on another machine, it stays ticked — and the bar shows who ticked it. The key is the identity, so keep it stable when you push a new version. Only the team can change them; the public link shows them read-only.</p>
|
|
115
|
+
<ul class="checklist">
|
|
116
|
+
<li><label><input type="checkbox" data-persist="deploy-worker"> Deploy the Worker <span class="hint">npx wrangler deploy</span></label></li>
|
|
117
|
+
<li><label><input type="checkbox" data-persist="run-smoke"> Run the smoke test against production</label></li>
|
|
118
|
+
<li><label><input type="checkbox" data-persist="share-link"> Send the link to the team</label></li>
|
|
119
|
+
</ul>
|
|
120
|
+
|
|
121
|
+
<h2 id="code">Code</h2>
|
|
122
|
+
<p class="sub">A <code>pre</code> block scrolls sideways on its own and gets a Copy button by itself. Three spans for light markup: <code>.c</code> comment, <code>.k</code> keyword, <code>.o</code> output.</p>
|
|
123
|
+
<pre><code><span class="c"># once per machine: sign in with your work email</span>
|
|
124
|
+
node cli/artifacts.mjs login
|
|
125
|
+
<span class="c"># publish, then hand the audience the printed link</span>
|
|
126
|
+
node cli/artifacts.mjs push ./my-page --name "weekly report"
|
|
127
|
+
<span class="o">https://artifacts.dclregenesislabs.xyz/3f2b9c1e-4d5a-4b6c-8e7f-9a0b1c2d3e4f</span>
|
|
128
|
+
<span class="c"># later: a new version of the same page, same link</span>
|
|
129
|
+
node cli/artifacts.mjs push ./my-page --id https://artifacts.dclregenesislabs.xyz/3f2b9c1e-4d5a-4b6c-8e7f-9a0b1c2d3e4f</code></pre>
|
|
130
|
+
|
|
131
|
+
<h2 id="diff">Diff</h2>
|
|
132
|
+
<p class="sub">Before / after columns for a code change. <code>.path</code> names the file, <code>.row</code> lines take <code>del</code>, <code>add</code>, <code>ctx</code> or <code>pad</code> (an empty line that keeps the columns aligned).</p>
|
|
133
|
+
<p class="path"><b>cli/artifacts.mjs</b> · <span class="fn">push()</span></p>
|
|
134
|
+
<div class="split">
|
|
135
|
+
<div class="col">
|
|
136
|
+
<div class="colhead before">before</div>
|
|
137
|
+
<div class="code">
|
|
138
|
+
<div class="row ctx"><span class="num">228</span><span class="sign"> </span><span class="src">async function push(target, client, opts, log) {</span></div>
|
|
139
|
+
<div class="row del"><span class="num">230</span><span class="sign">-</span><span class="src"> const id = await computeId(manifest);</span></div>
|
|
140
|
+
<div class="row del"><span class="num">231</span><span class="sign">-</span><span class="src"> log(`${manifest.name} → ${id}`);</span></div>
|
|
141
|
+
<div class="row pad"><span class="num"> </span><span class="sign"> </span><span class="src"> </span></div>
|
|
142
|
+
</div>
|
|
143
|
+
</div>
|
|
144
|
+
<div class="col">
|
|
145
|
+
<div class="colhead after">after</div>
|
|
146
|
+
<div class="code">
|
|
147
|
+
<div class="row ctx"><span class="num">228</span><span class="sign"> </span><span class="src">async function push(target, client, opts, log) {</span></div>
|
|
148
|
+
<div class="row add"><span class="num">230</span><span class="sign">+</span><span class="src"> const creating = opts.id === null;</span></div>
|
|
149
|
+
<div class="row add"><span class="num">231</span><span class="sign">+</span><span class="src"> const id = creating ? newId() : requireId(opts.id, "--id");</span></div>
|
|
150
|
+
<div class="row ctx"><span class="num">301</span><span class="sign"> </span><span class="src">}</span></div>
|
|
151
|
+
</div>
|
|
152
|
+
</div>
|
|
153
|
+
</div>
|
|
154
|
+
|
|
155
|
+
<footer>
|
|
156
|
+
<p><b>How this page was made:</b> <code>node cli/artifacts.mjs new</code>, from <code>templates/artifact/</code> in <code>dcl-regenesislabs/ia-generated-artifacts</code> — where the CSS and JS live as editable files and get inlined at scaffold time. The one per-page knob is <code>--accent</code> in the small <code><style></code> block in the head.</p>
|
|
157
|
+
</footer>
|
|
158
|
+
|
|
159
|
+
</div>
|
|
160
|
+
</body>
|
|
161
|
+
</html>
|