DioCrafts
81a93a489b
Backend — Photos timeline now groups by real capture date instead of upload time. New MediaMetadataService (FileLifecycleHook) extracts EXIF DateTimeOriginal from images and container creation_time from videos (mov/mp4/mkv) via nom-exif, timezone-correct (OffsetTimeOriginal), persisting captured_at so the existing media_sort_date trigger takes over. Adds POST /admin/photos/metadata/reextract to backfill existing media. Falls back to upload date when no embedded date exists. Frontend — premium grid cards: combined metadata line (relative date · size, owner avatar when shared), custom selection checkbox with a clear checked state, uniform full-width 4:3 thumbnail tiles independent of filename length, centered file-type icons, and a hit-test fix so checkbox/star/kebab clicks reach the controls (the decorative thumbnail no longer captures pointer events). Notification messages internationalised across all 16 locales. Broader polish: design tokens, a11y/focus-visible states, brand + PWA assets. Chore — bump semver-compatible dependencies (cargo upgrade); add nom-exif 3.6.1. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
63 lines
2.6 KiB
JavaScript
63 lines
2.6 KiB
JavaScript
#!/usr/bin/env node
|
|
// Generates docs/TOKENS.md — a grouped reference of every design token defined
|
|
// in static/css/base/variables.css. Run after changing tokens:
|
|
// node scripts/gen-token-docs.mjs
|
|
import { readFileSync, writeFileSync } from 'node:fs';
|
|
import { join, dirname } from 'node:path';
|
|
import { fileURLToPath } from 'node:url';
|
|
|
|
const repo = join(dirname(fileURLToPath(import.meta.url)), '..');
|
|
const src = readFileSync(join(repo, 'static', 'css', 'base', 'variables.css'), 'utf8');
|
|
|
|
const tokens = [];
|
|
for (const m of src.matchAll(/^\s*(--[a-z0-9-]+)\s*:\s*([^;]+);/gim)) {
|
|
if (!tokens.some((t) => t[0] === m[1])) tokens.push([m[1], m[2].trim().replace(/\s+/g, ' ')]);
|
|
}
|
|
|
|
const CATEGORIES = [
|
|
['Spacing (4px grid)', /^--space-/],
|
|
['Radius', /^--radius/],
|
|
['Typography', /^--(text-|leading-|weight-|tracking-|font-|measure-|icon-)/],
|
|
['Z-index layers', /^--z-/],
|
|
['Motion (durations + easing)', /^--(motion-|ease-|spin-)/],
|
|
['Elevation (composed shadows)', /^--shadow-/],
|
|
['Breakpoints (reference)', /^--bp-/],
|
|
['Density', /^--density-/],
|
|
['Layout shell', /^--(sidebar-width|gutter|grid-card)/],
|
|
['Color — text', /^--color-text/],
|
|
['Color — background', /^--color-bg/],
|
|
['Color — border', /^--color-border/],
|
|
['Color — accent / brand', /^--color-(accent|logo|focus|on-accent|primary)/],
|
|
['Color — semantic (success/warn/danger/info)', /^--color-(success|error|danger|warning|info)/],
|
|
['Color — shadow alphas / overlays', /^--color-(shadow|overlay|on-overlay)/],
|
|
['Color — sidebar', /^--color-sidebar/],
|
|
['Color — file types', /^--color-ft/],
|
|
['Color — calendar dots', /^--color-cal/],
|
|
['Color — badges', /^--color-badge/],
|
|
['Color — other', /^--color-/],
|
|
['Other', /.*/]
|
|
];
|
|
|
|
const buckets = new Map(CATEGORIES.map(([name]) => [name, []]));
|
|
for (const [name, value] of tokens) {
|
|
const cat = CATEGORIES.find(([, re]) => re.test(name))[0];
|
|
buckets.get(cat).push([name, value]);
|
|
}
|
|
|
|
let md = `# Design tokens
|
|
|
|
> Auto-generated from \`static/css/base/variables.css\` by \`scripts/gen-token-docs.mjs\`.
|
|
> Do not edit by hand — re-run the generator after changing tokens.
|
|
|
|
**${tokens.length} tokens** across ${[...buckets].filter(([, v]) => v.length).length} groups.
|
|
\n`;
|
|
|
|
for (const [name, rows] of buckets) {
|
|
if (!rows.length) continue;
|
|
md += `\n## ${name}\n\n| Token | Value |\n| --- | --- |\n`;
|
|
for (const [tok, val] of rows) md += `| \`${tok}\` | \`${val.replace(/\|/g, '\\|')}\` |\n`;
|
|
}
|
|
|
|
writeFileSync(join(repo, 'docs', 'TOKENS.md'), md);
|
|
console.log(`✓ Wrote docs/TOKENS.md (${tokens.length} tokens).`);
|