asw-v01: archive deferred content (packs, site, lab, legacy examples)
- 2.1: packs/ -> archive/packs/ - 2.2: site/ -> archive/site/ - 2.3: src/lab/ -> archive/lab/ - 2.4: examples/ -> archive/examples-legacy/ (SSI-based)
This commit is contained in:
exe.dev user
parent
416fe2f180
commit
e47a9f4401
173 changed files with 11 additions and 5 deletions
138
archive/site/static/admin/config.yml
Normal file
138
archive/site/static/admin/config.yml
Normal file
|
|
@ -0,0 +1,138 @@
|
|||
# Decap CMS — ASW site content manager
|
||||
#
|
||||
# LOCAL MODE: run `npx decap-server` from site/ directory
|
||||
# No OAuth, no Forgejo auth — reads/writes files directly.
|
||||
#
|
||||
# PRODUCTION MODE: switch backend to gitea (see packs/hugo/admin/config.yml)
|
||||
|
||||
local_backend: true
|
||||
|
||||
backend:
|
||||
name: git-gateway
|
||||
|
||||
media_folder: static/images
|
||||
public_folder: /images
|
||||
|
||||
slug:
|
||||
encoding: ascii
|
||||
clean_accents: true
|
||||
|
||||
# ── Site settings (file-based collections) ───────────────────────────
|
||||
|
||||
collections:
|
||||
- name: settings
|
||||
label: Settings
|
||||
files:
|
||||
- name: nav
|
||||
label: Navigation
|
||||
file: data/nav.yml
|
||||
fields:
|
||||
- label: Navigation Links
|
||||
name: items
|
||||
widget: list
|
||||
fields:
|
||||
- { label: Name, name: name, widget: string }
|
||||
- { label: URL, name: url, widget: string }
|
||||
- { label: Weight, name: weight, widget: number, hint: "Sort order (lower = first)" }
|
||||
|
||||
# ── Content collections ──────────────────────────────────────────────
|
||||
|
||||
- name: docs-getting-started
|
||||
label: "Docs: Getting Started"
|
||||
folder: content/docs/getting-started
|
||||
create: true
|
||||
slug: "{{slug}}"
|
||||
fields: &doc-fields
|
||||
- { label: Title, name: title, widget: string }
|
||||
- { label: Description, name: description, widget: string, required: false }
|
||||
- { label: Type, name: type, widget: hidden, default: docs }
|
||||
- { label: Weight, name: weight, widget: number, required: false, hint: "Sort order in sidebar" }
|
||||
- { label: Date, name: date, widget: datetime, format: "YYYY-MM-DD" }
|
||||
- { label: Tags, name: tags, widget: list, required: false }
|
||||
- { label: AI Disclosure, name: ai-disclosure, widget: select, options: ["generated", "assisted", "none"], default: "assisted" }
|
||||
- { label: AI Model, name: ai-model, widget: string, required: false }
|
||||
- { label: AI Provider, name: ai-provider, widget: string, required: false, default: "Anthropic" }
|
||||
- { label: Body, name: body, widget: markdown }
|
||||
|
||||
- name: docs-core
|
||||
label: "Docs: Core"
|
||||
folder: content/docs/core
|
||||
create: true
|
||||
slug: "{{slug}}"
|
||||
fields: *doc-fields
|
||||
|
||||
- name: docs-components
|
||||
label: "Docs: Components"
|
||||
folder: content/docs/components
|
||||
create: true
|
||||
slug: "{{slug}}"
|
||||
fields: *doc-fields
|
||||
|
||||
- name: docs-reference
|
||||
label: "Docs: Reference"
|
||||
folder: content/docs/reference
|
||||
create: true
|
||||
slug: "{{slug}}"
|
||||
fields: *doc-fields
|
||||
|
||||
- name: articles
|
||||
label: Articles
|
||||
label_singular: Article
|
||||
folder: content/articles
|
||||
create: true
|
||||
slug: "{{slug}}"
|
||||
fields:
|
||||
- { label: Title, name: title, widget: string }
|
||||
- { label: Description, name: description, widget: string, required: false }
|
||||
- { label: Date, name: date, widget: datetime, format: "YYYY-MM-DD" }
|
||||
- { label: Categories, name: categories, widget: list, required: false, hint: "e.g. framework, tutorial, deep-dive" }
|
||||
- { label: Tags, name: tags, widget: list, required: false }
|
||||
- { label: AI Disclosure, name: ai-disclosure, widget: select, options: ["generated", "assisted", "none"], default: "assisted" }
|
||||
- { label: AI Model, name: ai-model, widget: string, required: false }
|
||||
- { label: AI Provider, name: ai-provider, widget: string, required: false, default: "Anthropic" }
|
||||
- { label: Body, name: body, widget: markdown }
|
||||
|
||||
- name: essays
|
||||
label: Essays
|
||||
label_singular: Essay
|
||||
folder: content/essays
|
||||
create: true
|
||||
slug: "{{slug}}"
|
||||
fields:
|
||||
- { label: Title, name: title, widget: string }
|
||||
- { label: Description, name: description, widget: string }
|
||||
- { label: Abstract, name: abstract, widget: text, required: false }
|
||||
- { label: Author, name: author, widget: string, required: false }
|
||||
- { label: Eyebrow, name: eyebrow, widget: string, required: false, default: "Essay" }
|
||||
- { label: Type, name: type, widget: hidden, default: essay }
|
||||
- { label: Date, name: date, widget: datetime, format: "YYYY-MM-DD" }
|
||||
- { label: Tags, name: tags, widget: list, required: false }
|
||||
- { label: Draft, name: draft, widget: boolean, default: true }
|
||||
- { label: Categories, name: categories, widget: list, required: false }
|
||||
- { label: AI Disclosure, name: ai-disclosure, widget: select, options: ["generated", "assisted", "none"], default: "assisted" }
|
||||
- { label: AI Model, name: ai-model, widget: string, required: false }
|
||||
- { label: AI Provider, name: ai-provider, widget: string, required: false, default: "Anthropic" }
|
||||
- { label: Body, name: body, widget: markdown }
|
||||
|
||||
- name: notes
|
||||
label: Notes
|
||||
label_singular: Note
|
||||
folder: content/notes
|
||||
create: true
|
||||
slug: "{{slug}}"
|
||||
fields:
|
||||
- { label: Title, name: title, widget: string }
|
||||
- { label: Date, name: date, widget: datetime, format: "YYYY-MM-DD" }
|
||||
- { label: Tags, name: tags, widget: list, required: false }
|
||||
- { label: Body, name: body, widget: markdown }
|
||||
|
||||
- name: pages
|
||||
label: Pages
|
||||
label_singular: Page
|
||||
folder: content/pages
|
||||
create: true
|
||||
slug: "{{slug}}"
|
||||
fields:
|
||||
- { label: Title, name: title, widget: string }
|
||||
- { label: Description, name: description, widget: string, required: false }
|
||||
- { label: Body, name: body, widget: markdown }
|
||||
11
archive/site/static/admin/index.html
Normal file
11
archive/site/static/admin/index.html
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>ASW Content Manager</title>
|
||||
</head>
|
||||
<body>
|
||||
<script src="https://unpkg.com/decap-cms@^3.0.0/dist/decap-cms.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
233
archive/site/static/palette-test.html
Normal file
233
archive/site/static/palette-test.html
Normal file
|
|
@ -0,0 +1,233 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>ASW Palette Explorer</title>
|
||||
<link rel="stylesheet" href="https://unpkg.com/open-props/open-props.min.css">
|
||||
<style>
|
||||
* { box-sizing: border-box; margin: 0; }
|
||||
|
||||
body {
|
||||
font-family: system-ui, sans-serif;
|
||||
background: oklch(12% 0.01 250);
|
||||
color: oklch(85% 0.02 250);
|
||||
padding: 2rem;
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
h1 { font-size: 1.5rem; font-weight: 400; margin-bottom: 0.5rem; }
|
||||
h2 { font-size: 1.1rem; font-weight: 400; margin: 2rem 0 1rem; color: oklch(70% 0.02 250); }
|
||||
p { line-height: 1.6; margin-bottom: 1rem; color: oklch(75% 0.02 250); }
|
||||
code { font-family: monospace; background: oklch(18% 0.01 250); padding: 0.15em 0.4em; border-radius: 3px; }
|
||||
|
||||
/* ── Controls ─────────────────────────── */
|
||||
.controls {
|
||||
display: flex; gap: 1.5rem; flex-wrap: wrap;
|
||||
padding: 1.5rem; margin: 1.5rem 0;
|
||||
background: oklch(16% 0.01 250);
|
||||
border-radius: 8px;
|
||||
}
|
||||
.controls label { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.85rem; }
|
||||
.controls input[type="range"] { width: 200px; }
|
||||
.controls .val { font-family: monospace; font-size: 0.8rem; color: oklch(65% 0.02 250); }
|
||||
|
||||
/* ── Palette strip ────────────────────── */
|
||||
.palette {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(16, 1fr);
|
||||
gap: 2px;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
.swatch {
|
||||
aspect-ratio: 1;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
align-items: end;
|
||||
justify-content: center;
|
||||
font-size: 0.65rem;
|
||||
font-family: monospace;
|
||||
padding: 0.2rem;
|
||||
}
|
||||
.swatch.light-text { color: oklch(95% 0.01 0); }
|
||||
.swatch.dark-text { color: oklch(15% 0.01 0); }
|
||||
|
||||
/* ── Live demo ────────────────────────── */
|
||||
.demo {
|
||||
padding: 2rem;
|
||||
border-radius: 8px;
|
||||
margin: 1.5rem 0;
|
||||
}
|
||||
.demo h3 { font-size: 1.2rem; font-weight: 400; margin-bottom: 0.75rem; }
|
||||
.demo p { margin-bottom: 0.75rem; }
|
||||
.demo a { text-decoration: underline; text-underline-offset: 2px; }
|
||||
.demo .muted { opacity: 0.7; font-size: 0.9rem; }
|
||||
.demo .accent-pill {
|
||||
display: inline-block;
|
||||
padding: 0.3em 0.8em;
|
||||
border-radius: 100px;
|
||||
font-size: 0.85rem;
|
||||
margin: 0.25rem;
|
||||
}
|
||||
|
||||
/* ── Ludo's dark mode spec ─────────────── */
|
||||
.ludo-spec {
|
||||
margin: 2rem 0;
|
||||
padding: 1.5rem;
|
||||
border: 1px solid oklch(25% 0.02 250);
|
||||
border-radius: 8px;
|
||||
}
|
||||
.ludo-spec dt { font-weight: 500; margin-top: 0.75rem; }
|
||||
.ludo-spec dd { margin-left: 0; color: oklch(70% 0.02 250); }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1>ASW Palette Explorer</h1>
|
||||
<p>Open Props gives you 16 oklch steps from one <code>--palette-hue</code> value. Drag the slider — the whole palette shifts.</p>
|
||||
|
||||
<div class="controls">
|
||||
<label>
|
||||
Hue <span class="val" id="hue-val">250</span>
|
||||
<input type="range" id="hue" min="0" max="360" value="250">
|
||||
</label>
|
||||
<label>
|
||||
Chroma <span class="val" id="chroma-val">0.15</span>
|
||||
<input type="range" id="chroma" min="0" max="40" value="15">
|
||||
</label>
|
||||
<label>
|
||||
Hue rotate <span class="val" id="rotate-val">0</span>
|
||||
<input type="range" id="rotate" min="0" max="30" value="0">
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<h2>The 16 steps — <code>--color-1</code> to <code>--color-16</code></h2>
|
||||
<div class="palette" id="palette"></div>
|
||||
|
||||
<h2>Your dark mode mapped to this palette</h2>
|
||||
<div class="demo" id="demo">
|
||||
<h3>On the Craft of Invisible Systems</h3>
|
||||
<p>There is a particular quality to systems that work well. They recede. The thermostat that holds a room at precisely the right temperature.</p>
|
||||
<p><a href="#" id="demo-link">A link in blue — the OG HTML blue</a></p>
|
||||
<p class="muted">Muted secondary text for metadata and captions.</p>
|
||||
<div style="margin-top: 1rem;">
|
||||
<span class="accent-pill" id="pill-ok">OK</span>
|
||||
<span class="accent-pill" id="pill-warn">Warn</span>
|
||||
<span class="accent-pill" id="pill-error">Error</span>
|
||||
<span class="accent-pill" id="pill-info">Info</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2>What this means for ASW</h2>
|
||||
<dl class="ludo-spec">
|
||||
<dt><code>--surface</code> = <code>--color-16</code></dt>
|
||||
<dd>10% lightness — body background. Currently <code>--gray-12</code> (#030507)</dd>
|
||||
|
||||
<dt><code>--surface-1</code> = <code>--color-15</code></dt>
|
||||
<dd>16% lightness — cards, sidebars</dd>
|
||||
|
||||
<dt><code>--text</code> = <code>--color-3</code></dt>
|
||||
<dd>93% lightness — primary text, easy on the eyes (not pure white)</dd>
|
||||
|
||||
<dt><code>--text-2</code> = <code>--color-5</code></dt>
|
||||
<dd>80% lightness — secondary text</dd>
|
||||
|
||||
<dt><code>--text-3</code> = <code>--color-7</code></dt>
|
||||
<dd>66% lightness — muted text</dd>
|
||||
|
||||
<dt><code>--link</code> = blue at hue 250, chroma pushed</dt>
|
||||
<dd>Links stay blue regardless of palette hue — the OG HTML convention</dd>
|
||||
|
||||
<dt><code>--accent</code> = <code>--color-8</code></dt>
|
||||
<dd>58% lightness, peak chroma — the most vivid step in the palette</dd>
|
||||
</dl>
|
||||
|
||||
<p>Change the hue above: 250 = indigo (current), 220 = blue, 145 = green, 45 = amber, 0 = red, 330 = pink. The whole surface/text system shifts. Links stay blue.</p>
|
||||
|
||||
<script>
|
||||
// oklch palette definition (matching Open Props)
|
||||
const steps = [
|
||||
{ l: 98, cm: 0.03 }, // 1
|
||||
{ l: 97, cm: 0.06 }, // 2
|
||||
{ l: 93, cm: 0.10 }, // 3
|
||||
{ l: 93, cm: 0.12 }, // 4 (corrected: OP uses 84 but let's be accurate)
|
||||
{ l: 80, cm: 0.16 }, // 5
|
||||
{ l: 71, cm: 0.19 }, // 6
|
||||
{ l: 66, cm: 0.20 }, // 7
|
||||
{ l: 58, cm: 0.21 }, // 8 ← peak chroma
|
||||
{ l: 53, cm: 0.20 }, // 9
|
||||
{ l: 49, cm: 0.19 }, // 10
|
||||
{ l: 42, cm: 0.17 }, // 11
|
||||
{ l: 35, cm: 0.15 }, // 12
|
||||
{ l: 27, cm: 0.12 }, // 13
|
||||
{ l: 20, cm: 0.09 }, // 14
|
||||
{ l: 16, cm: 0.07 }, // 15
|
||||
{ l: 10, cm: 0.05 }, // 16
|
||||
];
|
||||
|
||||
// Fix step 4 to match actual OP
|
||||
steps[3].l = 84;
|
||||
|
||||
function color(step, hue, chroma, rotate) {
|
||||
const h = hue + rotate * (step - 1);
|
||||
const c = chroma * steps[step - 1].cm;
|
||||
const l = steps[step - 1].l;
|
||||
return `oklch(${l}% ${c.toFixed(4)} ${h})`;
|
||||
}
|
||||
|
||||
function update() {
|
||||
const hue = +document.getElementById('hue').value;
|
||||
const chroma = +document.getElementById('chroma').value / 100;
|
||||
const rotate = +document.getElementById('rotate').value;
|
||||
|
||||
document.getElementById('hue-val').textContent = hue;
|
||||
document.getElementById('chroma-val').textContent = chroma.toFixed(2);
|
||||
document.getElementById('rotate-val').textContent = rotate;
|
||||
|
||||
// Palette strip
|
||||
const pal = document.getElementById('palette');
|
||||
pal.innerHTML = '';
|
||||
for (let i = 1; i <= 16; i++) {
|
||||
const c = color(i, hue, chroma, rotate);
|
||||
const div = document.createElement('div');
|
||||
div.className = 'swatch ' + (i <= 8 ? 'dark-text' : 'light-text');
|
||||
div.style.background = c;
|
||||
div.textContent = i;
|
||||
pal.appendChild(div);
|
||||
}
|
||||
|
||||
// Demo: Ludo's dark mode
|
||||
const demo = document.getElementById('demo');
|
||||
const surface = color(16, hue, chroma, rotate);
|
||||
const text = color(3, hue, chroma, rotate);
|
||||
const textMuted = color(7, hue, chroma, rotate);
|
||||
// Links stay blue — fixed hue 250
|
||||
const link = `oklch(65% 0.15 250)`;
|
||||
|
||||
demo.style.background = surface;
|
||||
demo.style.color = text;
|
||||
demo.querySelector('h3').style.color = color(2, hue, chroma, rotate);
|
||||
demo.querySelector('.muted').style.color = textMuted;
|
||||
demo.querySelector('a').style.color = link;
|
||||
|
||||
// State pills — these use FIXED hues, not the palette hue
|
||||
const pill = (id, h) => {
|
||||
const el = document.getElementById(id);
|
||||
el.style.background = `oklch(25% 0.04 ${h})`;
|
||||
el.style.color = `oklch(75% 0.15 ${h})`;
|
||||
};
|
||||
pill('pill-ok', 145);
|
||||
pill('pill-warn', 80);
|
||||
pill('pill-error', 25);
|
||||
pill('pill-info', 250);
|
||||
}
|
||||
|
||||
document.getElementById('hue').addEventListener('input', update);
|
||||
document.getElementById('chroma').addEventListener('input', update);
|
||||
document.getElementById('rotate').addEventListener('input', update);
|
||||
update();
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Add table
Add a link
Reference in a new issue