mirror of
https://github.com/pbakaus/impeccable.git
synced 2026-09-11 21:57:14 +03:00
Paul Bakaus
7d7f77d2ba
Two changes bundled:
1. Before/after split demos on every skill detail page.
- loadCommandDemos() in sub-pages-data.js: dynamically imports each
module in public/js/demos/commands (the same files the homepage
uses), returning a { skillId: { id, caption, before, after } } map.
Falls back to a warn-and-continue if a demo file can't be loaded
so one bad demo doesn't break the whole generator.
- buildSubPageData becomes async; caller in build-sub-pages.js
awaits it.
- Each skill object gets a .demo field (may be null for /shape).
- renderSkillDemo() produces the .split-comparison markup matching
the homepage: .split-container with .split-before + .split-after
+ .split-divider, plus Before/After labels and the caption. The
block sits between the detail header and the editorial wrapper
so readers see the visual before reading any prose.
- sub-pages.css ports the core .split-* layout from main.css (the
.slop-* and .impeccable-* helpers are homepage-specific and not
copied). Height is 360px to match the docs column.
- render-page.js grows a lightweight inline split-compare init
script (60 lines of vanilla JS) that handles drag and the skewed
clip-path without depending on the homepage's full lerp/ResizeObserver
module. Runs only on pages that actually have .split-container.
2. Sidebar reorder: Tutorials first, then skills.
Walk-throughs are the on-ramp; they belong at the top of the sidebar
where a new visitor will find them. Add <hr class="skills-sidebar-divider">
between the Tutorials group and the first skill category so the two
sections read as distinct.
Verified: /skills/polish, /skills/bolder, /skills/critique all render
the demo block. /skills/shape correctly has none. Sidebar on any /skills
or /tutorials page shows Tutorials first, then a thin mist divider,
then Create / Evaluate / Refine / Simplify / Harden / System skill
categories.
191 lines
6.7 KiB
JavaScript
191 lines
6.7 KiB
JavaScript
/**
|
|
* Page template wrapper for generated sub-pages.
|
|
*
|
|
* Reads the shared site header partial once and wraps content bodies with
|
|
* a minimal HTML scaffold that imports tokens.css + sub-pages.css.
|
|
*
|
|
* Used by scripts/build-sub-pages.js (wired up in commit 3).
|
|
*/
|
|
|
|
import fs from 'node:fs';
|
|
import path from 'node:path';
|
|
import { fileURLToPath } from 'node:url';
|
|
|
|
const __dirname = path.dirname(fileURLToPath(import.meta.url));
|
|
const ROOT_DIR = path.resolve(__dirname, '..', '..');
|
|
const HEADER_PARTIAL = path.join(ROOT_DIR, 'content', 'site', 'partials', 'header.html');
|
|
|
|
let cachedHeader = null;
|
|
|
|
/**
|
|
* Read the shared site header partial.
|
|
* Cached after first read.
|
|
*/
|
|
export function readHeaderPartial() {
|
|
if (cachedHeader === null) {
|
|
cachedHeader = fs.readFileSync(HEADER_PARTIAL, 'utf8').trim();
|
|
}
|
|
return cachedHeader;
|
|
}
|
|
|
|
/**
|
|
* Mark a nav item as current by adding aria-current="page" and removing
|
|
* the default nav href state. Matches on `data-nav="{activeNav}"`.
|
|
*
|
|
* @param {string} headerHtml
|
|
* @param {string} activeNav - one of: home, skills, anti-patterns, tutorials, gallery, github
|
|
* @returns {string}
|
|
*/
|
|
export function applyActiveNav(headerHtml, activeNav) {
|
|
if (!activeNav) return headerHtml;
|
|
return headerHtml.replace(
|
|
new RegExp(`data-nav="${activeNav}"`, 'g'),
|
|
`data-nav="${activeNav}" aria-current="page"`,
|
|
);
|
|
}
|
|
|
|
/**
|
|
* Wrap body HTML in a full page shell.
|
|
*
|
|
* @param {object} opts
|
|
* @param {string} opts.title - <title> text
|
|
* @param {string} opts.description - meta description
|
|
* @param {string} opts.bodyHtml - main content HTML (will be placed inside <main>)
|
|
* @param {string} [opts.activeNav] - which nav item to mark current
|
|
* @param {string} [opts.canonicalPath] - relative URL path for <link rel="canonical">
|
|
* @param {string} [opts.extraHead] - raw HTML to inject into <head>
|
|
* @param {string} [opts.bodyClass] - optional class on <body>
|
|
* @param {number} [opts.assetDepth] - how many `..` to prepend for Bun's HTML loader to resolve on-disk paths. 1 = page is one dir deep under public/ (e.g. public/skills/polish.html). Defaults to 1.
|
|
* @returns {string} full HTML document
|
|
*/
|
|
export function renderPage({
|
|
title,
|
|
description,
|
|
bodyHtml,
|
|
activeNav,
|
|
canonicalPath,
|
|
extraHead = '',
|
|
bodyClass = 'sub-page',
|
|
assetDepth = 1,
|
|
}) {
|
|
const header = applyActiveNav(readHeaderPartial(), activeNav);
|
|
const safeTitle = escapeHtml(title);
|
|
const safeDesc = escapeAttr(description || '');
|
|
const canonical = canonicalPath
|
|
? `<link rel="canonical" href="https://impeccable.style${canonicalPath}">`
|
|
: '';
|
|
|
|
// Relative prefix for on-disk resolution by Bun's HTML loader.
|
|
// Bun rewrites these to hashed absolute URLs at build time, so runtime
|
|
// serving works regardless of the request path.
|
|
const rel = assetDepth > 0 ? '../'.repeat(assetDepth) : './';
|
|
|
|
return `<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>${safeTitle}</title>
|
|
<meta name="description" content="${safeDesc}">
|
|
<meta name="theme-color" content="#fafafa">
|
|
${canonical}
|
|
<link rel="icon" type="image/svg+xml" href="${rel}favicon.svg">
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,600;1,400&family=Instrument+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="${rel}css/sub-pages.css">
|
|
${extraHead}
|
|
</head>
|
|
<body class="${bodyClass}">
|
|
<a href="#main" class="skip-link">Skip to content</a>
|
|
${header}
|
|
<main id="main">
|
|
${bodyHtml}
|
|
</main>
|
|
<script>
|
|
// Copy buttons on rendered code blocks
|
|
document.addEventListener('click', (e) => {
|
|
const btn = e.target.closest('[data-copy]');
|
|
if (!btn) return;
|
|
const text = btn.getAttribute('data-copy');
|
|
if (!text) return;
|
|
navigator.clipboard.writeText(text).then(() => {
|
|
btn.classList.add('is-copied');
|
|
setTimeout(() => btn.classList.remove('is-copied'), 1500);
|
|
}).catch(() => {});
|
|
});
|
|
|
|
// Lightweight split-compare interaction for before/after demos.
|
|
// Drag or hover horizontally over .split-container to sweep the
|
|
// divider. No lerp, no ResizeObserver — good enough for docs.
|
|
(function initSplitCompare() {
|
|
const containers = document.querySelectorAll('.split-container');
|
|
if (containers.length === 0) return;
|
|
for (const container of containers) {
|
|
const splitAfter = container.querySelector('.split-after');
|
|
const splitDivider = container.querySelector('.split-divider');
|
|
if (!splitAfter || !splitDivider) continue;
|
|
|
|
const skewAngle = 10 * Math.PI / 180;
|
|
const tanAngle = Math.tan(skewAngle);
|
|
let skewOffset = 8;
|
|
const recalcSkew = () => {
|
|
const r = container.getBoundingClientRect();
|
|
if (r.width > 0 && r.height > 0) {
|
|
skewOffset = 50 * r.height * tanAngle / r.width;
|
|
}
|
|
};
|
|
recalcSkew();
|
|
window.addEventListener('resize', recalcSkew, { passive: true });
|
|
|
|
const update = (pct) => {
|
|
const x = Math.max(-skewOffset, Math.min(100 + skewOffset, pct));
|
|
splitAfter.style.clipPath = \`polygon(\${x + skewOffset}% 0%, 100% 0%, 100% 100%, \${x - skewOffset}% 100%)\`;
|
|
splitDivider.style.left = \`\${x}%\`;
|
|
};
|
|
update(50);
|
|
|
|
let tracking = false;
|
|
const onMove = (clientX) => {
|
|
const rect = container.getBoundingClientRect();
|
|
const pct = ((clientX - rect.left) / rect.width) * 100;
|
|
update(pct);
|
|
};
|
|
container.addEventListener('pointerdown', (e) => {
|
|
tracking = true;
|
|
container.setPointerCapture(e.pointerId);
|
|
onMove(e.clientX);
|
|
});
|
|
container.addEventListener('pointermove', (e) => {
|
|
if (!tracking) return;
|
|
onMove(e.clientX);
|
|
});
|
|
const stop = (e) => {
|
|
if (!tracking) return;
|
|
tracking = false;
|
|
try { container.releasePointerCapture(e.pointerId); } catch {}
|
|
};
|
|
container.addEventListener('pointerup', stop);
|
|
container.addEventListener('pointercancel', stop);
|
|
container.addEventListener('pointerleave', stop);
|
|
}
|
|
})();
|
|
</script>
|
|
</body>
|
|
</html>
|
|
`;
|
|
}
|
|
|
|
function escapeHtml(str) {
|
|
return String(str || '')
|
|
.replace(/&/g, '&')
|
|
.replace(/</g, '<')
|
|
.replace(/>/g, '>')
|
|
.replace(/"/g, '"')
|
|
.replace(/'/g, ''');
|
|
}
|
|
|
|
function escapeAttr(str) {
|
|
return String(str || '').replace(/"/g, '"');
|
|
}
|