@@ -0,0 +1,46 @@
|
||||
name: Deploy website
|
||||
|
||||
on:
|
||||
push:
|
||||
branches:
|
||||
- master
|
||||
workflow_dispatch:
|
||||
|
||||
jobs:
|
||||
deploy:
|
||||
runs-on: ubuntu-latest
|
||||
|
||||
steps:
|
||||
- name: Check out source
|
||||
uses: actions/checkout@v4
|
||||
|
||||
- name: Install Bun
|
||||
uses: oven-sh/setup-bun@v2
|
||||
with:
|
||||
bun-version: latest
|
||||
|
||||
- name: Install dependencies
|
||||
run: bun install --no-progress
|
||||
|
||||
- name: Build site
|
||||
run: bun run build
|
||||
|
||||
- name: Configure SSH
|
||||
env:
|
||||
DEPLOY_SSH_KEY: ${{ secrets.DEPLOY_SSH_KEY }}
|
||||
DEPLOY_KNOWN_HOSTS: ${{ secrets.DEPLOY_KNOWN_HOSTS }}
|
||||
run: |
|
||||
install -d -m 700 "$HOME/.ssh"
|
||||
printf '%s\n' "$DEPLOY_SSH_KEY" > "$HOME/.ssh/deploy_key"
|
||||
chmod 600 "$HOME/.ssh/deploy_key"
|
||||
printf '%s\n' "$DEPLOY_KNOWN_HOSTS" > "$HOME/.ssh/known_hosts"
|
||||
|
||||
- name: Deploy dist/
|
||||
env:
|
||||
DEPLOY_HOST: ${{ secrets.DEPLOY_HOST }}
|
||||
DEPLOY_USER: ${{ secrets.DEPLOY_USER }}
|
||||
DEPLOY_PATH: ${{ secrets.DEPLOY_PATH }}
|
||||
run: |
|
||||
rsync -az --delete \
|
||||
-e "ssh -i $HOME/.ssh/deploy_key -o IdentitiesOnly=yes" \
|
||||
dist/ "$DEPLOY_USER@$DEPLOY_HOST:$DEPLOY_PATH/"
|
||||
@@ -0,0 +1,7 @@
|
||||
{
|
||||
"printWidth": 120,
|
||||
"semi": false,
|
||||
"useTabs": false,
|
||||
"singleQuote": true,
|
||||
"ignorePatterns": ["**/*.md"]
|
||||
}
|
||||
@@ -1,67 +1,79 @@
|
||||
import { readdir, readFile, stat } from 'node:fs/promises';
|
||||
import { join } from 'node:path';
|
||||
import { readdir, readFile, stat } from 'node:fs/promises'
|
||||
import { join } from 'node:path'
|
||||
|
||||
const generatedRoot = '.generated';
|
||||
const generatedRoot = '.generated'
|
||||
|
||||
const walk = async (directory) => {
|
||||
const files = [];
|
||||
const files = []
|
||||
for (const entry of await readdir(directory, { withFileTypes: true })) {
|
||||
const path = join(directory, entry.name);
|
||||
if (entry.isDirectory()) files.push(...await walk(path));
|
||||
else files.push(path);
|
||||
const path = join(directory, entry.name)
|
||||
if (entry.isDirectory()) files.push(...(await walk(path)))
|
||||
else files.push(path)
|
||||
}
|
||||
return files;
|
||||
};
|
||||
return files
|
||||
}
|
||||
|
||||
const exists = async (path) => {
|
||||
try {
|
||||
await stat(path);
|
||||
return true;
|
||||
await stat(path)
|
||||
return true
|
||||
} catch {
|
||||
return false;
|
||||
return false
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
const errors = [];
|
||||
const htmlFiles = (await walk(generatedRoot)).filter((file) => file.endsWith('.html'));
|
||||
const clientSource = await readFile('src/main.js', 'utf8');
|
||||
const builtInPrismLanguages = new Set(['markup', 'html', 'xml', 'svg', 'css', 'clike', 'javascript', 'js', 'plain', 'plaintext', 'text', 'txt']);
|
||||
const prismLanguageAliases = { sh: 'bash', shell: 'bash' };
|
||||
const errors = []
|
||||
const htmlFiles = (await walk(generatedRoot)).filter((file) => file.endsWith('.html'))
|
||||
const clientSource = await readFile('src/main.js', 'utf8')
|
||||
const builtInPrismLanguages = new Set([
|
||||
'markup',
|
||||
'html',
|
||||
'xml',
|
||||
'svg',
|
||||
'css',
|
||||
'clike',
|
||||
'javascript',
|
||||
'js',
|
||||
'plain',
|
||||
'plaintext',
|
||||
'text',
|
||||
'txt',
|
||||
])
|
||||
const prismLanguageAliases = { sh: 'bash', shell: 'bash' }
|
||||
|
||||
for (const file of htmlFiles) {
|
||||
const html = await readFile(file, 'utf8');
|
||||
const ids = [...html.matchAll(/\sid="([^"]+)"/g)].map((match) => match[1]);
|
||||
const duplicateIds = ids.filter((id, index) => ids.indexOf(id) !== index);
|
||||
if (duplicateIds.length > 0) errors.push(`${file}: duplicate IDs: ${[...new Set(duplicateIds)].join(', ')}`);
|
||||
if (!html.includes('<meta name="viewport"')) errors.push(`${file}: missing viewport metadata`);
|
||||
if (html.includes('<heading')) errors.push(`${file}: contains a nonstandard <heading> element`);
|
||||
const html = await readFile(file, 'utf8')
|
||||
const ids = [...html.matchAll(/\sid="([^"]+)"/g)].map((match) => match[1])
|
||||
const duplicateIds = ids.filter((id, index) => ids.indexOf(id) !== index)
|
||||
if (duplicateIds.length > 0) errors.push(`${file}: duplicate IDs: ${[...new Set(duplicateIds)].join(', ')}`)
|
||||
if (!html.includes('<meta name="viewport"')) errors.push(`${file}: missing viewport metadata`)
|
||||
if (html.includes('<heading')) errors.push(`${file}: contains a nonstandard <heading> element`)
|
||||
|
||||
for (const [, fragment] of html.matchAll(/href="#([^"]+)"/g)) {
|
||||
if (!ids.includes(fragment)) errors.push(`${file}: missing fragment target #${fragment}`);
|
||||
if (!ids.includes(fragment)) errors.push(`${file}: missing fragment target #${fragment}`)
|
||||
}
|
||||
|
||||
for (const [, href] of html.matchAll(/href="(\/[^"]*)"/g)) {
|
||||
if (href === '/') continue;
|
||||
const pathname = href.split(/[?#]/, 1)[0];
|
||||
let target;
|
||||
if (pathname.startsWith('/src/')) target = `.${pathname}`;
|
||||
else if (pathname.startsWith('/assets/') || pathname === '/favicon.ico') target = `public${pathname}`;
|
||||
else target = pathname.endsWith('/')
|
||||
? join(generatedRoot, pathname, 'index.html')
|
||||
: join(generatedRoot, pathname);
|
||||
if (!await exists(target)) errors.push(`${file}: broken internal link ${href}`);
|
||||
if (href === '/') continue
|
||||
const pathname = href.split(/[?#]/, 1)[0]
|
||||
let target
|
||||
if (pathname.startsWith('/src/')) target = `.${pathname}`
|
||||
else if (pathname.startsWith('/assets/') || pathname === '/favicon.ico') target = `public${pathname}`
|
||||
else target = pathname.endsWith('/') ? join(generatedRoot, pathname, 'index.html') : join(generatedRoot, pathname)
|
||||
if (!(await exists(target))) errors.push(`${file}: broken internal link ${href}`)
|
||||
}
|
||||
|
||||
for (const [, language] of html.matchAll(/class="language-([\w-]+)"/g)) {
|
||||
if (builtInPrismLanguages.has(language)) continue;
|
||||
const component = prismLanguageAliases[language] ?? language;
|
||||
if (!clientSource.includes(`prism-${component}`)) errors.push(`${file}: Prism grammar is not imported for ${language}`);
|
||||
if (builtInPrismLanguages.has(language)) continue
|
||||
const component = prismLanguageAliases[language] ?? language
|
||||
if (!clientSource.includes(`prism-${component}`))
|
||||
errors.push(`${file}: Prism grammar is not imported for ${language}`)
|
||||
}
|
||||
}
|
||||
|
||||
if (errors.length > 0) {
|
||||
console.error(errors.join('\n'));
|
||||
process.exitCode = 1;
|
||||
console.error(errors.join('\n'))
|
||||
process.exitCode = 1
|
||||
} else {
|
||||
console.log(`Checked ${htmlFiles.length} generated pages.`);
|
||||
console.log(`Checked ${htmlFiles.length} generated pages.`)
|
||||
}
|
||||
|
||||
@@ -1,6 +1,3 @@
|
||||
import { rm } from 'node:fs/promises';
|
||||
import { rm } from 'node:fs/promises'
|
||||
|
||||
await Promise.all([
|
||||
rm('.generated', { recursive: true, force: true }),
|
||||
rm('dist', { recursive: true, force: true }),
|
||||
]);
|
||||
await Promise.all([rm('.generated', { recursive: true, force: true }), rm('dist', { recursive: true, force: true })])
|
||||
|
||||
+267
-175
@@ -1,16 +1,18 @@
|
||||
import { execFileSync } from 'node:child_process';
|
||||
import { mkdir, readdir, readFile, rm, stat, writeFile } from 'node:fs/promises';
|
||||
import { join } from 'node:path';
|
||||
import { escapeHtml, h, raw, render } from './html.js';
|
||||
import { marked } from 'marked';
|
||||
import { execFileSync } from 'node:child_process'
|
||||
import { mkdir, readdir, readFile, rm, stat, writeFile } from 'node:fs/promises'
|
||||
import { join } from 'node:path'
|
||||
import { escapeHtml, h, raw, render } from './html.js'
|
||||
import { marked } from 'marked'
|
||||
|
||||
const siteName = 'PaulW.XYZ'
|
||||
const output = '.generated'
|
||||
const markdownDirs = ['notes', 'posts']
|
||||
|
||||
const siteName = 'PaulW.XYZ';
|
||||
const output = '.generated';
|
||||
const markdownDirs = ['notes', 'posts'];
|
||||
const standalonePages = [
|
||||
{ source: 'README.md', path: 'about', title: 'About' },
|
||||
{ source: 'THIRD_PARTY_LICENSES.md', path: 'licenses', title: 'Licenses' },
|
||||
];
|
||||
]
|
||||
|
||||
const languageLabels = {
|
||||
ini: 'INI',
|
||||
js: 'JavaScript',
|
||||
@@ -18,213 +20,269 @@ const languageLabels = {
|
||||
lua: 'Lua',
|
||||
sh: 'Shell',
|
||||
bash: 'Shell',
|
||||
};
|
||||
}
|
||||
|
||||
const slug = (value) => {
|
||||
let result = '';
|
||||
let dash = false;
|
||||
let result = ''
|
||||
let dash = false
|
||||
for (const character of String(value).toLowerCase()) {
|
||||
const valid = (character >= 'a' && character <= 'z') || (character >= '0' && character <= '9');
|
||||
if (valid) { if (dash && result) result += '-'; result += character; dash = false; }
|
||||
else if (result) dash = true;
|
||||
const valid = (character >= 'a' && character <= 'z') || (character >= '0' && character <= '9')
|
||||
if (valid) {
|
||||
if (dash && result) result += '-'
|
||||
result += character
|
||||
dash = false
|
||||
} else if (result) dash = true
|
||||
}
|
||||
return result;
|
||||
};
|
||||
const headingLabel = (tokens) => tokens.map((token) => {
|
||||
if (token.type === 'image') return token.text ?? '';
|
||||
if (token.tokens) return headingLabel(token.tokens);
|
||||
return token.text ?? token.raw ?? '';
|
||||
}).join('').trim();
|
||||
return result
|
||||
}
|
||||
|
||||
const headingLabel = (tokens) =>
|
||||
tokens
|
||||
.map((token) => {
|
||||
if (token.type === 'image') return token.text ?? ''
|
||||
if (token.tokens) return headingLabel(token.tokens)
|
||||
return token.text ?? token.raw ?? ''
|
||||
})
|
||||
.join('')
|
||||
.trim()
|
||||
|
||||
const createSlugger = () => {
|
||||
const counts = new Map();
|
||||
const counts = new Map()
|
||||
return (tokens) => {
|
||||
const base = slug(headingLabel(tokens)) || 'section';
|
||||
const count = counts.get(base) ?? 0;
|
||||
counts.set(base, count + 1);
|
||||
return count === 0 ? base : `${base}-${count + 1}`;
|
||||
};
|
||||
};
|
||||
const base = slug(headingLabel(tokens)) || 'section'
|
||||
const count = counts.get(base) ?? 0
|
||||
counts.set(base, count + 1)
|
||||
return count === 0 ? base : `${base}-${count + 1}`
|
||||
}
|
||||
}
|
||||
|
||||
const pageShell = (title, body, path = '/', navTitle = '') => `<!DOCTYPE html>${render(h('html', { lang: 'en-US' }, [
|
||||
const pageShell = (title, body, path = '/', navTitle = '') =>
|
||||
`<!DOCTYPE html>${render(
|
||||
h('html', { lang: 'en-US' }, [
|
||||
h('head', {}, [
|
||||
h('meta', { charset: 'utf-8' }),
|
||||
h('meta', { name: 'viewport', content: 'width=device-width, initial-scale=1' }),
|
||||
h('meta', {
|
||||
name: 'viewport',
|
||||
content: 'width=device-width, initial-scale=1',
|
||||
}),
|
||||
h('title', {}, [title ? `${title} | ${siteName}` : siteName]),
|
||||
h('link', { rel: 'icon', href: '/favicon.ico' }),
|
||||
h('link', { rel: 'stylesheet', href: '/src/global.css' }),
|
||||
h('script', { type: 'module', src: '/src/main.js' }),
|
||||
]),
|
||||
h('body', {}, [raw(body), h('nav', { 'aria-label': 'Breadcrumb' }, [raw(nav(path, navTitle))])]),
|
||||
]))}`;
|
||||
]),
|
||||
)}`
|
||||
|
||||
const nav = (path, currentTitle = '') => {
|
||||
if (path === '/') {
|
||||
if (!currentTitle) return render(h('span', {}, [siteName]));
|
||||
return render([h('a', { href: '/' }, [siteName]), ' / ', currentTitle]);
|
||||
if (!currentTitle) return render(h('span', {}, [siteName]))
|
||||
return render([h('a', { href: '/' }, [siteName]), ' / ', currentTitle])
|
||||
}
|
||||
const parts = path.split('/').filter(Boolean);
|
||||
const children = [h('a', { href: '/' }, [siteName])];
|
||||
const sectionTitle = { notes: 'Notes', posts: 'Posts', about: 'About', licenses: 'Licenses' }[parts[0]] ?? parts[0];
|
||||
if (parts.length >= 1) children.push(' / ', parts.length > 1 ? h('a', { href: `/${parts[0]}/` }, [sectionTitle]) : sectionTitle);
|
||||
if (parts.length > 1) children.push(' / ', currentTitle);
|
||||
return render(children);
|
||||
};
|
||||
const parts = path.split('/').filter(Boolean)
|
||||
const children = [h('a', { href: '/' }, [siteName])]
|
||||
const sectionTitle = { notes: 'Notes', posts: 'Posts', about: 'About', licenses: 'Licenses' }[parts[0]] ?? parts[0]
|
||||
if (parts.length >= 1)
|
||||
children.push(' / ', parts.length > 1 ? h('a', { href: `/${parts[0]}/` }, [sectionTitle]) : sectionTitle)
|
||||
if (parts.length > 1) children.push(' / ', currentTitle)
|
||||
return render(children)
|
||||
}
|
||||
|
||||
const dateFor = async (file) => {
|
||||
try {
|
||||
const gitDate = execFileSync('git', ['log', '-1', '--date=format-local:%Y-%m-%dT%H:%M:%SZ', '--format=%ad', '--', file], { env: { ...process.env, TZ: 'UTC' } }).toString().trim();
|
||||
if (gitDate) return gitDate;
|
||||
const gitDate = execFileSync(
|
||||
'git',
|
||||
['log', '-1', '--date=format-local:%Y-%m-%dT%H:%M:%SZ', '--format=%ad', '--', file],
|
||||
{ env: { ...process.env, TZ: 'UTC' } },
|
||||
)
|
||||
.toString()
|
||||
.trim()
|
||||
if (gitDate) return gitDate
|
||||
} catch {}
|
||||
try { return (await stat(file)).mtime.toISOString(); }
|
||||
catch { return ''; }
|
||||
};
|
||||
try {
|
||||
return (await stat(file)).mtime.toISOString()
|
||||
} catch {
|
||||
return ''
|
||||
}
|
||||
}
|
||||
|
||||
const readPages = async (dir) => {
|
||||
const entries = await readdir(dir, { withFileTypes: true });
|
||||
const entries = await readdir(dir, { withFileTypes: true })
|
||||
const markdownEntries = entries
|
||||
.filter((entry) => entry.isFile() && entry.name.endsWith('.md') && !entry.name.startsWith('.'))
|
||||
.sort((a, b) => a.name.localeCompare(b.name));
|
||||
const pages = await Promise.all(markdownEntries.map(async (entry) => {
|
||||
const file = join(dir, entry.name);
|
||||
const source = await readFile(file, 'utf8');
|
||||
const titleLine = source.split(/\r?\n/).find((line) => line.startsWith('# '));
|
||||
if (!titleLine) return undefined;
|
||||
.sort((a, b) => a.name.localeCompare(b.name))
|
||||
const pages = await Promise.all(
|
||||
markdownEntries.map(async (entry) => {
|
||||
const file = join(dir, entry.name)
|
||||
const source = await readFile(file, 'utf8')
|
||||
const titleLine = source.split(/\r?\n/).find((line) => line.startsWith('# '))
|
||||
if (!titleLine) return undefined
|
||||
return {
|
||||
name: entry.name.slice(0, -3),
|
||||
title: stripSidenotes(titleLine.slice(2).trim()),
|
||||
file,
|
||||
source,
|
||||
date: await dateFor(file),
|
||||
};
|
||||
}));
|
||||
return pages.filter(Boolean);
|
||||
};
|
||||
}
|
||||
}),
|
||||
)
|
||||
return pages.filter(Boolean)
|
||||
}
|
||||
|
||||
let nextHeadingId = createSlugger();
|
||||
let sidenoteNumber = 0;
|
||||
let nextHeadingId = createSlugger()
|
||||
let sidenoteNumber = 0
|
||||
|
||||
marked.use({
|
||||
extensions: [{
|
||||
extensions: [
|
||||
{
|
||||
name: 'sidenote',
|
||||
level: 'inline',
|
||||
start: (source) => source.indexOf('^['),
|
||||
tokenizer(source) {
|
||||
if (!source.startsWith('^[')) return undefined;
|
||||
let depth = 1;
|
||||
if (!source.startsWith('^[')) return undefined
|
||||
let depth = 1
|
||||
for (let index = 2; index < source.length; index += 1) {
|
||||
if (source[index] === '\\') {
|
||||
index += 1;
|
||||
index += 1
|
||||
} else if (source[index] === '[') {
|
||||
depth += 1;
|
||||
depth += 1
|
||||
} else if (source[index] === ']') {
|
||||
depth -= 1;
|
||||
depth -= 1
|
||||
if (depth === 0) {
|
||||
const text = source.slice(2, index);
|
||||
const text = source.slice(2, index)
|
||||
return {
|
||||
type: 'sidenote',
|
||||
raw: source.slice(0, index + 1),
|
||||
tokens: this.lexer.inlineTokens(text),
|
||||
};
|
||||
}
|
||||
}
|
||||
}
|
||||
return undefined;
|
||||
}
|
||||
return undefined
|
||||
},
|
||||
renderer({ tokens }) {
|
||||
sidenoteNumber += 1;
|
||||
const id = `sidenote-${sidenoteNumber}`;
|
||||
const content = this.parser.parseInline(tokens);
|
||||
return `<input type="checkbox" id="${id}" class="sidenote-toggle visually-hidden"><label for="${id}" class="margin-toggle sidenote-number"><span class="visually-hidden">Toggle sidenote ${sidenoteNumber}</span></label><span class="sidenote">${content}</span>`;
|
||||
sidenoteNumber += 1
|
||||
const id = `sidenote-${sidenoteNumber}`
|
||||
const content = this.parser.parseInline(tokens)
|
||||
return `<input type="checkbox" id="${id}" class="sidenote-toggle visually-hidden"><label for="${id}" class="margin-toggle sidenote-number"><span class="visually-hidden">Toggle sidenote ${sidenoteNumber}</span></label><span class="sidenote">${content}</span>`
|
||||
},
|
||||
}],
|
||||
},
|
||||
],
|
||||
renderer: {
|
||||
code({ text, lang, escaped }) {
|
||||
const language = lang?.trim().split(/\s+/, 1)[0].toLowerCase() || 'plain';
|
||||
const label = languageLabels[language]
|
||||
?? language.charAt(0).toUpperCase() + language.slice(1);
|
||||
const source = escaped ? text : escapeHtml(text.replace(/\n$/, ''));
|
||||
return `<div class="code-block"><div class="code-block-header"><span>${escapeHtml(label)}</span><button type="button" class="copy-code" aria-label="Copy ${escapeHtml(label)} code" aria-live="polite">Copy</button></div><pre><code class="language-${escapeHtml(language)}">${source}\n</code></pre></div>\n`;
|
||||
const language = lang?.trim().split(/\s+/, 1)[0].toLowerCase() || 'plain'
|
||||
const label = languageLabels[language] ?? language.charAt(0).toUpperCase() + language.slice(1)
|
||||
const source = escaped ? text : escapeHtml(text.replace(/\n$/, ''))
|
||||
return `<div class="code-block"><div class="code-block-header"><span>${escapeHtml(label)}</span><button type="button" class="copy-code" aria-label="Copy ${escapeHtml(label)} code" aria-live="polite">Copy</button></div><pre><code class="language-${escapeHtml(language)}">${source}\n</code></pre></div>\n`
|
||||
},
|
||||
heading({ tokens, depth }) {
|
||||
const text = this.parser.parseInline(tokens);
|
||||
const id = nextHeadingId(tokens);
|
||||
return `<h${depth} id="${id}">${text}</h${depth}>\n`;
|
||||
const text = this.parser.parseInline(tokens)
|
||||
const id = nextHeadingId(tokens)
|
||||
return `<h${depth} id="${id}">${text}</h${depth}>\n`
|
||||
},
|
||||
},
|
||||
});
|
||||
})
|
||||
|
||||
const withoutTitle = (source) => {
|
||||
const lines = source.split('\n');
|
||||
const index = lines.findIndex((line) => line.startsWith('# '));
|
||||
if (index >= 0) lines.splice(index, 1);
|
||||
return lines.join('\n');
|
||||
};
|
||||
const lines = source.split('\n')
|
||||
const index = lines.findIndex((line) => line.startsWith('# '))
|
||||
if (index >= 0) lines.splice(index, 1)
|
||||
return lines.join('\n')
|
||||
}
|
||||
|
||||
const stripSidenotes = (text) => {
|
||||
let result = '';
|
||||
let result = ''
|
||||
for (let index = 0; index < text.length;) {
|
||||
if (text[index] === '^' && text[index + 1] === '[') {
|
||||
const end = text.indexOf(']', index + 2);
|
||||
if (end >= 0) { index = end + 1; continue; }
|
||||
const end = text.indexOf(']', index + 2)
|
||||
if (end >= 0) {
|
||||
index = end + 1
|
||||
continue
|
||||
}
|
||||
result += text[index++];
|
||||
}
|
||||
return result;
|
||||
};
|
||||
const stripHeadingSidenotes = (source) => source.split('\n').map((line) => {
|
||||
const content = line.trimStart();
|
||||
return content.startsWith('# ') || content.startsWith('## ') || content.startsWith('### ') || content.startsWith('#### ') || content.startsWith('##### ') || content.startsWith('###### ')
|
||||
result += text[index++]
|
||||
}
|
||||
return result
|
||||
}
|
||||
|
||||
const stripHeadingSidenotes = (source) =>
|
||||
source
|
||||
.split('\n')
|
||||
.map((line) => {
|
||||
const content = line.trimStart()
|
||||
return content.startsWith('# ') ||
|
||||
content.startsWith('## ') ||
|
||||
content.startsWith('### ') ||
|
||||
content.startsWith('#### ') ||
|
||||
content.startsWith('##### ') ||
|
||||
content.startsWith('###### ')
|
||||
? line.slice(0, line.length - content.length) + stripSidenotes(content)
|
||||
: line;
|
||||
}).join('\n');
|
||||
: line
|
||||
})
|
||||
.join('\n')
|
||||
|
||||
const renderMarkdown = (source) => {
|
||||
nextHeadingId = createSlugger();
|
||||
sidenoteNumber = 0;
|
||||
const html = marked.parse(withoutTitle(stripHeadingSidenotes(source)));
|
||||
let result = '';
|
||||
let cursor = 0;
|
||||
nextHeadingId = createSlugger()
|
||||
sidenoteNumber = 0
|
||||
const html = marked.parse(withoutTitle(stripHeadingSidenotes(source)))
|
||||
let result = ''
|
||||
let cursor = 0
|
||||
while (cursor < html.length) {
|
||||
const start = html.indexOf('<table', cursor);
|
||||
if (start < 0) { result += html.slice(cursor); break; }
|
||||
const end = html.indexOf('</table>', start);
|
||||
if (end < 0) { result += html.slice(cursor); break; }
|
||||
result += html.slice(cursor, start);
|
||||
result += `<div class="table-scroll">${html.slice(start, end + 8)}</div>`;
|
||||
cursor = end + 8;
|
||||
const start = html.indexOf('<table', cursor)
|
||||
if (start < 0) {
|
||||
result += html.slice(cursor)
|
||||
break
|
||||
}
|
||||
return result;
|
||||
};
|
||||
const end = html.indexOf('</table>', start)
|
||||
if (end < 0) {
|
||||
result += html.slice(cursor)
|
||||
break
|
||||
}
|
||||
result += html.slice(cursor, start)
|
||||
result += `<div class="table-scroll">${html.slice(start, end + 8)}</div>`
|
||||
cursor = end + 8
|
||||
}
|
||||
return result
|
||||
}
|
||||
|
||||
const toc = (source) => {
|
||||
const headings = marked.lexer(withoutTitle(stripHeadingSidenotes(source))).filter((token) => token.type === 'heading');
|
||||
if (headings.length === 0) return '';
|
||||
const root = { depth: 0, children: [] };
|
||||
const stack = [root];
|
||||
const headingId = createSlugger();
|
||||
const headings = marked.lexer(withoutTitle(stripHeadingSidenotes(source))).filter((token) => token.type === 'heading')
|
||||
if (headings.length === 0) return ''
|
||||
const root = { depth: 0, children: [] }
|
||||
const stack = [root]
|
||||
const headingId = createSlugger()
|
||||
for (const heading of headings) {
|
||||
while (stack.length > 1 && stack.at(-1).depth >= heading.depth) stack.pop();
|
||||
const node = { depth: heading.depth, heading, children: [] };
|
||||
stack.at(-1).children.push(node);
|
||||
stack.push(node);
|
||||
while (stack.length > 1 && stack.at(-1).depth >= heading.depth) stack.pop()
|
||||
const node = { depth: heading.depth, heading, children: [] }
|
||||
stack.at(-1).children.push(node)
|
||||
stack.push(node)
|
||||
}
|
||||
const renderItems = (items) => `<ol>${items.map(({ heading, children }) => {
|
||||
const id = headingId(heading.tokens);
|
||||
const nested = children.length > 0 ? renderItems(children) : '';
|
||||
return `<li><a href="#${id}">${escapeHtml(headingLabel(heading.tokens))}</a>${nested}</li>`;
|
||||
}).join('')}</ol>`;
|
||||
return renderItems(root.children);
|
||||
};
|
||||
const renderItems = (items) =>
|
||||
`<ol>${items
|
||||
.map(({ heading, children }) => {
|
||||
const id = headingId(heading.tokens)
|
||||
const nested = children.length > 0 ? renderItems(children) : ''
|
||||
return `<li><a href="#${id}">${escapeHtml(headingLabel(heading.tokens))}</a>${nested}</li>`
|
||||
})
|
||||
.join('')}</ol>`
|
||||
return renderItems(root.children)
|
||||
}
|
||||
|
||||
const writePage = async (path, html) => {
|
||||
const directory = join(output, path);
|
||||
await mkdir(directory, { recursive: true });
|
||||
await writeFile(join(directory, 'index.html'), html);
|
||||
};
|
||||
const directory = join(output, path)
|
||||
await mkdir(directory, { recursive: true })
|
||||
await writeFile(join(directory, 'index.html'), html)
|
||||
}
|
||||
|
||||
const titleHeading = (title, className = '') => `
|
||||
<header class="page-heading${className ? ` ${className}` : ''}">
|
||||
<h1 class="title">${escapeHtml(title)}</h1>
|
||||
</header>`;
|
||||
</header>`
|
||||
|
||||
const renderHome = (externalLinks, sectionLinks, recentLinks) => pageShell('', `
|
||||
const renderHome = (externalLinks, sectionLinks, recentLinks) =>
|
||||
pageShell(
|
||||
'',
|
||||
`
|
||||
${titleHeading(siteName)}
|
||||
<main class="container">
|
||||
<section class="block">${sectionLinks}${externalLinks}</section>
|
||||
@@ -232,97 +290,131 @@ const renderHome = (externalLinks, sectionLinks, recentLinks) => pageShell('', `
|
||||
<h2>Recent</h2>
|
||||
<ul>${recentLinks || '<li>Nothing to show yet.</li>'}</ul>
|
||||
</section>
|
||||
</main>`);
|
||||
</main>`,
|
||||
)
|
||||
|
||||
const renderNotesTable = (pages, directory) => {
|
||||
const rows = pages.map((page) => `
|
||||
const rows = pages
|
||||
.map(
|
||||
(page) => `
|
||||
<tr>
|
||||
<td><a href="/${directory}/${page.name}/">${escapeHtml(page.title)}</a></td>
|
||||
<td>${page.date ? `<time class="table-last-updated" datetime="${escapeHtml(page.date)}" data-value="${escapeHtml(page.date)}">${escapeHtml(page.date)}</time>` : ''}</td>
|
||||
</tr>`).join('');
|
||||
return `<table class="${directory}-table"><caption class="visually-hidden">${escapeHtml(directory)} pages</caption><thead><tr><th scope="col">Page</th><th scope="col">Last updated</th></tr></thead><tbody>${rows}</tbody></table>`;
|
||||
};
|
||||
</tr>`,
|
||||
)
|
||||
.join('')
|
||||
return `<table class="${directory}-table"><caption class="visually-hidden">${escapeHtml(directory)} pages</caption><tbody>${rows}</tbody></table>`
|
||||
}
|
||||
|
||||
const renderPostsList = (pages, directory) => {
|
||||
const items = pages.map((page) => `
|
||||
const items = pages
|
||||
.map(
|
||||
(page) => `
|
||||
<li>
|
||||
<a href="/${directory}/${page.name}/">${escapeHtml(page.title)}</a>
|
||||
${page.date ? `<time datetime="${escapeHtml(page.date)}" data-value="${escapeHtml(page.date)}">${escapeHtml(page.date)}</time>` : ''}
|
||||
</li>`).join('');
|
||||
return `<ul class="posts-list">${items}</ul>`;
|
||||
};
|
||||
</li>`,
|
||||
)
|
||||
.join('')
|
||||
return `<ul class="posts-list">${items}</ul>`
|
||||
}
|
||||
|
||||
const renderEmptySection = () => `
|
||||
<div class="text center">
|
||||
<p><strong>crickets</strong></p>
|
||||
<p>**crickets**</p>
|
||||
<p>Nothing to list...</p>
|
||||
<a class="link button back" href="/">Go Home</a>
|
||||
</div>`;
|
||||
</div>`
|
||||
|
||||
const renderNotFound = () =>
|
||||
pageShell(
|
||||
'Page not found',
|
||||
`${titleHeading('404: Page Not Found')}<main class="container"><section class="block text center"><p><strong>Uh oh! The page you are looking for does not exist...</strong></p><a class="link button back" href="/">Go Home</a><a class='button blue link extern' href='https://en.wikipedia.org/wiki/HTTP_404'>More on 404</a></section></main>`,
|
||||
'/',
|
||||
' ... ??? / 404: Page Not Found',
|
||||
)
|
||||
|
||||
const renderSection = (directory, pages) => {
|
||||
const title = directory[0].toUpperCase() + directory.slice(1);
|
||||
const listing = pages.length === 0
|
||||
const title = directory[0].toUpperCase() + directory.slice(1)
|
||||
const listing =
|
||||
pages.length === 0
|
||||
? renderEmptySection()
|
||||
: directory === 'posts'
|
||||
? renderPostsList(pages, directory)
|
||||
: renderNotesTable(pages, directory);
|
||||
: renderNotesTable(pages, directory)
|
||||
|
||||
return pageShell(
|
||||
title,
|
||||
`${titleHeading(title)}<main class="container"><section class="block">${listing}</section></main>`,
|
||||
`/${directory}`,
|
||||
title,
|
||||
);
|
||||
};
|
||||
)
|
||||
}
|
||||
|
||||
const renderArticle = (directory, page, navigationPath = `/${directory}/${page.name}`) => {
|
||||
const updated = page.date
|
||||
? `<time class="last-updated" datetime="${escapeHtml(page.date)}" data-value="${escapeHtml(page.date)}">Last updated: ${escapeHtml(page.date)}</time>`
|
||||
: '';
|
||||
const heading = titleHeading(page.title, `${directory}-heading`);
|
||||
const tableOfContents = toc(page.source);
|
||||
: ''
|
||||
const heading = titleHeading(page.title, `${directory}-heading`)
|
||||
const tableOfContents = toc(page.source)
|
||||
const contents = tableOfContents
|
||||
? `<section class="block toc"><details open><summary>Contents</summary>${tableOfContents}</details></section><hr>`
|
||||
: '';
|
||||
const article = `<section class="block">${renderMarkdown(page.source)}</section>`;
|
||||
const body = `${heading}<main class="article-page ${directory}-page container">${updated}${contents}${article}</main>`;
|
||||
: ''
|
||||
const article = `<section class="block">${renderMarkdown(page.source)}</section>`
|
||||
const body = `${heading}<main class="article-page ${directory}-page container">${updated}${contents}${article}</main>`
|
||||
|
||||
return pageShell(page.title, body, navigationPath, page.title);
|
||||
};
|
||||
return pageShell(page.title, body, navigationPath, page.title)
|
||||
}
|
||||
|
||||
if (process.argv.includes('--clean')) await rm(output, { recursive: true, force: true });
|
||||
await mkdir(output, { recursive: true });
|
||||
const sections = Object.fromEntries(await Promise.all(markdownDirs.map(async (dir) => [dir, await readPages(dir)])));
|
||||
if (process.argv.includes('--clean')) await rm(output, { recursive: true, force: true })
|
||||
await mkdir(output, { recursive: true })
|
||||
const sections = Object.fromEntries(await Promise.all(markdownDirs.map(async (dir) => [dir, await readPages(dir)])))
|
||||
|
||||
const external = JSON.parse(await readFile('external.json', 'utf8'))
|
||||
|
||||
const externalLinks = Object.entries(external)
|
||||
.map(([text, href]) => `<a class="button blue link extern" href="${escapeHtml(href)}">${escapeHtml(text)}</a>`)
|
||||
.join('')
|
||||
|
||||
const sectionLinks = markdownDirs
|
||||
.map((dir) => `<a class="button link" href="/${dir}/">${dir[0].toUpperCase() + dir.slice(1)}</a>`)
|
||||
.join('')
|
||||
|
||||
const external = JSON.parse(await readFile('external.json', 'utf8'));
|
||||
const externalLinks = Object.entries(external).map(([text, href]) => `<a class="button blue link extern" href="${escapeHtml(href)}">${escapeHtml(text)}</a>`).join('');
|
||||
const sectionLinks = markdownDirs.map((dir) => `<a class="button link" href="/${dir}/">${dir[0].toUpperCase() + dir.slice(1)}</a>`).join('');
|
||||
const standaloneLinks = standalonePages
|
||||
.filter((page) => page.path !== 'licenses')
|
||||
.map((page) => `<a class="button link" href="/${page.path}/">${page.title}</a>`)
|
||||
.join('');
|
||||
const recentPages = markdownDirs.flatMap((dir) => sections[dir].map((page) => ({ ...page, dir })))
|
||||
.join('')
|
||||
|
||||
const recentPages = markdownDirs
|
||||
.flatMap((dir) => sections[dir].map((page) => ({ ...page, dir })))
|
||||
.sort((a, b) => b.date.localeCompare(a.date))
|
||||
.slice(0, 5);
|
||||
const recentLinks = recentPages.map((page) => `<li>${page.date ? `<time class="recent-date" datetime="${escapeHtml(page.date)}" data-value="${escapeHtml(page.date)}" data-tooltip="${escapeHtml(page.date)}">${escapeHtml(page.date)}</time>` : ''}<span class="recent-gap" aria-hidden="true"></span><span class="recent-type">${page.dir}</span><a href="/${page.dir}/${page.name}/">${escapeHtml(page.title)}</a></li>`).join('');
|
||||
await writeFile(join(output, 'index.html'), renderHome(externalLinks, sectionLinks + standaloneLinks, recentLinks));
|
||||
.slice(0, 5)
|
||||
|
||||
const recentLinks = recentPages
|
||||
.map(
|
||||
(page) =>
|
||||
`<li>${page.date ? `<time class="recent-date" datetime="${escapeHtml(page.date)}" data-value="${escapeHtml(page.date)}" data-tooltip="${escapeHtml(page.date)}">${escapeHtml(page.date)}</time>` : ''}<span class="recent-gap" aria-hidden="true"></span><span class="recent-type">${page.dir}</span><a href="/${page.dir}/${page.name}/">${escapeHtml(page.title)}</a></li>`,
|
||||
)
|
||||
.join('')
|
||||
await writeFile(join(output, 'index.html'), renderHome(externalLinks, sectionLinks + standaloneLinks, recentLinks))
|
||||
await writeFile(join(output, '404.html'), renderNotFound())
|
||||
|
||||
for (const dir of markdownDirs) {
|
||||
const pages = sections[dir];
|
||||
await writePage(dir, renderSection(dir, pages));
|
||||
const pages = sections[dir]
|
||||
await writePage(dir, renderSection(dir, pages))
|
||||
|
||||
for (const page of pages) {
|
||||
await writePage(join(dir, page.name), renderArticle(dir, page));
|
||||
await writePage(join(dir, page.name), renderArticle(dir, page))
|
||||
}
|
||||
}
|
||||
|
||||
for (const page of standalonePages) {
|
||||
const source = await readFile(page.source, 'utf8');
|
||||
const source = await readFile(page.source, 'utf8')
|
||||
const generatedPage = {
|
||||
name: page.path,
|
||||
title: page.title,
|
||||
source,
|
||||
date: await dateFor(page.source),
|
||||
};
|
||||
await writePage(page.path, renderArticle(page.path, generatedPage, '/'));
|
||||
}
|
||||
await writePage(page.path, renderArticle(page.path, generatedPage, '/'))
|
||||
}
|
||||
|
||||
@@ -1,24 +1,45 @@
|
||||
const voidElements = new Set(['area', 'base', 'br', 'col', 'embed', 'hr', 'img', 'input', 'link', 'meta', 'source', 'track', 'wbr']);
|
||||
const voidElements = new Set([
|
||||
'area',
|
||||
'base',
|
||||
'br',
|
||||
'col',
|
||||
'embed',
|
||||
'hr',
|
||||
'img',
|
||||
'input',
|
||||
'link',
|
||||
'meta',
|
||||
'source',
|
||||
'track',
|
||||
'wbr',
|
||||
])
|
||||
|
||||
export const raw = (html) => ({ type: 'raw', html });
|
||||
export const raw = (html) => ({ type: 'raw', html })
|
||||
export const h = (tag, attributes = {}, children = []) => ({
|
||||
type: 'element', tag, attributes, children: Array.isArray(children) ? children : [children],
|
||||
});
|
||||
type: 'element',
|
||||
tag,
|
||||
attributes,
|
||||
children: Array.isArray(children) ? children : [children],
|
||||
})
|
||||
|
||||
export const escapeHtml = (value) => String(value)
|
||||
.replaceAll('&', '&').replaceAll('<', '<').replaceAll('>', '>')
|
||||
.replaceAll('"', '"').replaceAll("'", ''');
|
||||
export const escapeHtml = (value) =>
|
||||
String(value)
|
||||
.replaceAll('&', '&')
|
||||
.replaceAll('<', '<')
|
||||
.replaceAll('>', '>')
|
||||
.replaceAll('"', '"')
|
||||
.replaceAll("'", ''')
|
||||
|
||||
export const render = (node) => {
|
||||
if (node == null || node === false) return '';
|
||||
if (Array.isArray(node)) return node.map(render).join('');
|
||||
if (typeof node === 'string' || typeof node === 'number') return escapeHtml(node);
|
||||
if (node.type === 'raw') return node.html;
|
||||
if (node == null || node === false) return ''
|
||||
if (Array.isArray(node)) return node.map(render).join('')
|
||||
if (typeof node === 'string' || typeof node === 'number') return escapeHtml(node)
|
||||
if (node.type === 'raw') return node.html
|
||||
const attributes = Object.entries(node.attributes)
|
||||
.filter(([, value]) => value !== false && value != null)
|
||||
.map(([name, value]) => value === true ? name : `${name}="${escapeHtml(value)}"`)
|
||||
.join(' ');
|
||||
const opening = attributes ? `<${node.tag} ${attributes}>` : `<${node.tag}>`;
|
||||
if (voidElements.has(node.tag)) return opening;
|
||||
return `${opening}${node.children.map(render).join('')}</${node.tag}>`;
|
||||
};
|
||||
.map(([name, value]) => (value === true ? name : `${name}="${escapeHtml(value)}"`))
|
||||
.join(' ')
|
||||
const opening = attributes ? `<${node.tag} ${attributes}>` : `<${node.tag}>`
|
||||
if (voidElements.has(node.tag)) return opening
|
||||
return `${opening}${node.children.map(render).join('')}</${node.tag}>`
|
||||
}
|
||||
|
||||
+2
-2
@@ -2,7 +2,6 @@
|
||||
"name": "paulw-xyz",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"packageManager": "bun@1.3.8",
|
||||
"scripts": {
|
||||
"generate": "node generator.js",
|
||||
"check": "node generator.js --clean && node check.js",
|
||||
@@ -20,5 +19,6 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"vite": "^7.0.0"
|
||||
}
|
||||
},
|
||||
"packageManager": "bun@1.3.8"
|
||||
}
|
||||
|
||||
+52
-71
@@ -1,6 +1,7 @@
|
||||
:root {
|
||||
--main-background-color: #0d1117;
|
||||
--main-border-color: #555555;
|
||||
--secondary-border-color: #30363d;
|
||||
--link-color: #009dff;
|
||||
--primary-green: #099945;
|
||||
--secondary-green: #1a3a15;
|
||||
@@ -45,7 +46,7 @@ body {
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
[tabindex="-1"]:focus {
|
||||
[tabindex='-1']:focus {
|
||||
outline: 0 !important;
|
||||
}
|
||||
|
||||
@@ -161,72 +162,54 @@ code {
|
||||
}
|
||||
|
||||
table {
|
||||
margin: 1rem auto;
|
||||
width: 100%;
|
||||
width: max-content;
|
||||
margin: 1rem 0;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.notes-table {
|
||||
overflow: hidden;
|
||||
border-radius: 0.5rem;
|
||||
border: 1px solid var(--main-border-color);
|
||||
border-spacing: 0;
|
||||
box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.2);
|
||||
table th,
|
||||
table td {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.notes-table thead + tbody tr {
|
||||
border-radius: 0;
|
||||
table th + th,
|
||||
table td + td {
|
||||
border-left: 1px solid var(--secondary-border-color);
|
||||
}
|
||||
|
||||
table tbody tr:nth-child(even) {
|
||||
background-color: var(--table-even-color);
|
||||
}
|
||||
|
||||
table tbody tr:nth-child(odd) {
|
||||
background-color: var(--table-odd-color);
|
||||
}
|
||||
|
||||
.notes-table {
|
||||
width: 100%;
|
||||
border: 1px solid var(--main-border-color);
|
||||
}
|
||||
|
||||
.notes-table th + th,
|
||||
.notes-table td + td,
|
||||
.posts-table th + th,
|
||||
.posts-table td + td {
|
||||
border-left: 0;
|
||||
}
|
||||
|
||||
.notes-table thead {
|
||||
background: var(--secondary-green);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.notes-table tbody,
|
||||
.notes-table tr:last-of-type {
|
||||
border-bottom-left-radius: 0.5rem;
|
||||
border-bottom-right-radius: 0.5rem;
|
||||
}
|
||||
|
||||
.notes-table tbody tr:nth-of-type(2n) {
|
||||
background-color: var(--table-even-color);
|
||||
}
|
||||
|
||||
.notes-table tbody tr:nth-of-type(2n+1) {
|
||||
background-color: var(--table-odd-color);
|
||||
}
|
||||
|
||||
.notes-table tbody tr {
|
||||
border-left: 3px solid transparent;
|
||||
transition: 100ms ease-in-out all;
|
||||
}
|
||||
|
||||
.notes-table tbody tr:hover {
|
||||
background: var(--tertiary-blue);
|
||||
border-left-color: var(--link-color);
|
||||
transform: translateX(0.15rem);
|
||||
}
|
||||
|
||||
.notes-table tbody tr td:first-child {
|
||||
width: 75%;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.notes-table tbody tr td:first-child a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.notes-table tbody tr td:first-child a::after {
|
||||
content: ' →';
|
||||
opacity: 0;
|
||||
transition: 100ms ease-in-out all;
|
||||
}
|
||||
|
||||
.notes-table tbody tr:hover td:first-child a::after {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.notes-table tbody tr td:last-child {
|
||||
color: #bbbbbb;
|
||||
font-family: var(--monospace-font);
|
||||
@@ -264,7 +247,7 @@ table {
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 7.75rem;
|
||||
border-left: 1px solid var(--main-border-color);
|
||||
border-left: 1px solid var(--secondary-border-color);
|
||||
}
|
||||
|
||||
.recent li {
|
||||
@@ -319,7 +302,7 @@ table {
|
||||
|
||||
table thead tr th,
|
||||
table tbody tr td {
|
||||
padding: .25rem 0.75rem;
|
||||
padding: 0.25rem 0.75rem;
|
||||
}
|
||||
|
||||
.table-last-updated {
|
||||
@@ -497,7 +480,7 @@ ul li {
|
||||
border: 1px solid var(--main-border-color);
|
||||
background-color: var(--secondary-green);
|
||||
font-family: var(--sans-serif-font);
|
||||
font-size: 0.80rem;
|
||||
font-size: 0.8rem;
|
||||
font-weight: bold;
|
||||
line-height: 1.5;
|
||||
}
|
||||
@@ -507,7 +490,7 @@ ul li {
|
||||
min-width: 5.5rem;
|
||||
padding: 0.25rem 0.75rem;
|
||||
border: 0;
|
||||
border-left: 1px solid var(--main-border-color);
|
||||
border-left: 1px solid var(--secondary-border-color);
|
||||
color: #ffffff;
|
||||
background: transparent;
|
||||
font: inherit;
|
||||
@@ -542,16 +525,14 @@ ul li {
|
||||
}
|
||||
|
||||
.article-page table {
|
||||
display: table;
|
||||
width: max-content;
|
||||
min-width: 100%;
|
||||
border: 1px solid var(--main-border-color);
|
||||
border-radius: 0.25rem;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.table-scroll {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
@@ -565,14 +546,6 @@ ul li {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.article-page table tbody tr:nth-child(even) {
|
||||
background-color: var(--table-even-color);
|
||||
}
|
||||
|
||||
.article-page table tbody tr:nth-child(odd) {
|
||||
background-color: var(--table-odd-color);
|
||||
}
|
||||
|
||||
.margin-toggle {
|
||||
display: none;
|
||||
}
|
||||
@@ -583,7 +556,7 @@ ul li {
|
||||
margin-right: 0;
|
||||
margin-top: 0.25rem;
|
||||
color: #bbbbbb;
|
||||
font-size: 0.90rem;
|
||||
font-size: 0.9rem;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
@@ -743,10 +716,12 @@ ul li {
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
margin-left: 0.3rem;
|
||||
vertical-align: -0.125em;
|
||||
vertical-align: -.175rem;
|
||||
background-color: currentColor;
|
||||
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14m-6-6 6 6-6 6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
|
||||
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14m-6-6 6 6-6 6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
|
||||
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14m-6-6 6 6-6 6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
|
||||
center / contain no-repeat;
|
||||
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14m-6-6 6 6-6 6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
|
||||
center / contain no-repeat;
|
||||
transition: transform 50ms ease-in-out;
|
||||
}
|
||||
|
||||
@@ -759,8 +734,12 @@ ul li {
|
||||
transform: translateX(0.25rem) scale(1.3);
|
||||
}
|
||||
|
||||
.button.link.extern::after {
|
||||
transform: rotateZ(-45deg);
|
||||
}
|
||||
|
||||
.button.link.extern:hover::after {
|
||||
transform: rotateZ(-45deg) scale(1.5);
|
||||
transform: rotateZ(0) translateX(0.25rem) scale(1.3);
|
||||
}
|
||||
|
||||
.button.link.back::before {
|
||||
@@ -769,10 +748,12 @@ ul li {
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
margin-right: 0.3rem;
|
||||
vertical-align: -0.125em;
|
||||
vertical-align: -0.175em;
|
||||
background-color: currentColor;
|
||||
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14m-6-6 6 6-6 6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
|
||||
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14m-6-6 6 6-6 6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
|
||||
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14m-6-6 6 6-6 6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
|
||||
center / contain no-repeat;
|
||||
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14m-6-6 6 6-6 6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
|
||||
center / contain no-repeat;
|
||||
transform: rotate(180deg);
|
||||
transition: transform 100ms ease-in-out;
|
||||
}
|
||||
@@ -793,7 +774,7 @@ ul li {
|
||||
}
|
||||
|
||||
.page-heading .title {
|
||||
border-bottom: 1px solid #FFFFFF;
|
||||
border-bottom: 1px solid #ffffff;
|
||||
max-width: 95%;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
+62
-51
@@ -1,22 +1,24 @@
|
||||
import Prism from 'prismjs';
|
||||
import './fonts.css';
|
||||
import 'prismjs/components/prism-bash';
|
||||
import 'prismjs/components/prism-ini';
|
||||
import 'prismjs/components/prism-lua';
|
||||
import 'prismjs/plugins/line-numbers/prism-line-numbers.js';
|
||||
import 'prismjs/themes/prism-tomorrow.css';
|
||||
import 'prismjs/plugins/line-numbers/prism-line-numbers.css';
|
||||
import './prism.css';
|
||||
import Prism from 'prismjs'
|
||||
import './fonts.css'
|
||||
import 'prismjs/components/prism-bash'
|
||||
import 'prismjs/components/prism-ini'
|
||||
import 'prismjs/components/prism-lua'
|
||||
import 'prismjs/plugins/line-numbers/prism-line-numbers.js'
|
||||
import 'prismjs/themes/prism-tomorrow.css'
|
||||
import 'prismjs/plugins/line-numbers/prism-line-numbers.css'
|
||||
import './prism.css'
|
||||
|
||||
const absoluteDateFormatter = new Intl.DateTimeFormat(undefined, {
|
||||
dateStyle: 'long',
|
||||
timeStyle: 'short',
|
||||
});
|
||||
})
|
||||
const tooltipDateFormatter = new Intl.DateTimeFormat(undefined, {
|
||||
dateStyle: 'long',
|
||||
timeStyle: 'long',
|
||||
});
|
||||
const relativeDateFormatter = new Intl.RelativeTimeFormat(undefined, { numeric: 'auto' });
|
||||
})
|
||||
const relativeDateFormatter = new Intl.RelativeTimeFormat(undefined, {
|
||||
numeric: 'auto',
|
||||
})
|
||||
const relativeTimeUnits = [
|
||||
[31536000, 'year'],
|
||||
[2592000, 'month'],
|
||||
@@ -24,66 +26,75 @@ const relativeTimeUnits = [
|
||||
[86400, 'day'],
|
||||
[3600, 'hour'],
|
||||
[60, 'minute'],
|
||||
];
|
||||
]
|
||||
|
||||
document.querySelectorAll('pre > code').forEach((code) => {
|
||||
if (![...code.classList].some((name) => name.startsWith('language-'))) {
|
||||
code.classList.add('language-plain');
|
||||
code.classList.add('language-plain')
|
||||
}
|
||||
code.closest('pre').classList.add('line-numbers');
|
||||
});
|
||||
Prism.highlightAll();
|
||||
code.closest('pre').classList.add('line-numbers')
|
||||
})
|
||||
Prism.highlightAll()
|
||||
|
||||
const sidebarTocMedia = window.matchMedia('(min-width: 1400px)')
|
||||
const syncSidebarToc = () => {
|
||||
if (!sidebarTocMedia.matches) return
|
||||
document.querySelectorAll('.article-page .toc details').forEach((details) => {
|
||||
details.open = true
|
||||
})
|
||||
}
|
||||
|
||||
syncSidebarToc()
|
||||
sidebarTocMedia.addEventListener('change', syncSidebarToc)
|
||||
|
||||
const copyText = async (text) => {
|
||||
if (navigator.clipboard?.writeText) {
|
||||
await navigator.clipboard.writeText(text);
|
||||
return;
|
||||
await navigator.clipboard.writeText(text)
|
||||
return
|
||||
}
|
||||
|
||||
const textarea = document.createElement('textarea');
|
||||
textarea.value = text;
|
||||
textarea.setAttribute('readonly', '');
|
||||
textarea.style.position = 'fixed';
|
||||
textarea.style.opacity = '0';
|
||||
document.body.append(textarea);
|
||||
textarea.select();
|
||||
const copied = document.execCommand('copy');
|
||||
textarea.remove();
|
||||
if (!copied) throw new Error('Copy command failed');
|
||||
};
|
||||
const textarea = document.createElement('textarea')
|
||||
textarea.value = text
|
||||
textarea.setAttribute('readonly', '')
|
||||
textarea.style.position = 'fixed'
|
||||
textarea.style.opacity = '0'
|
||||
document.body.append(textarea)
|
||||
textarea.select()
|
||||
const copied = document.execCommand('copy')
|
||||
textarea.remove()
|
||||
if (!copied) throw new Error('Copy command failed')
|
||||
}
|
||||
|
||||
document.querySelectorAll('.copy-code').forEach((button) => {
|
||||
button.addEventListener('click', async () => {
|
||||
const code = button.closest('.code-block')?.querySelector('code');
|
||||
if (!code) return;
|
||||
const code = button.closest('.code-block')?.querySelector('code')
|
||||
if (!code) return
|
||||
|
||||
try {
|
||||
await copyText(code.textContent);
|
||||
button.textContent = 'Copied';
|
||||
await copyText(code.textContent)
|
||||
button.textContent = 'Copied'
|
||||
} catch {
|
||||
button.textContent = 'Copy failed';
|
||||
button.textContent = 'Copy failed'
|
||||
}
|
||||
|
||||
window.setTimeout(() => {
|
||||
button.textContent = 'Copy';
|
||||
}, 1500);
|
||||
});
|
||||
});
|
||||
button.textContent = 'Copy'
|
||||
}, 1500)
|
||||
})
|
||||
})
|
||||
|
||||
document.querySelectorAll('[data-value]').forEach((element) => {
|
||||
const date = new Date(element.dataset.value);
|
||||
if (Number.isNaN(date.valueOf())) return;
|
||||
const date = new Date(element.dataset.value)
|
||||
if (Number.isNaN(date.valueOf())) return
|
||||
|
||||
if (element.classList.contains('recent-date')) {
|
||||
element.dataset.tooltip = tooltipDateFormatter.format(date);
|
||||
const seconds = Math.round((date.valueOf() - Date.now()) / 1000);
|
||||
const unit = relativeTimeUnits.find(([size]) => Math.abs(seconds) >= size) ?? [1, 'second'];
|
||||
element.textContent = relativeDateFormatter.format(Math.round(seconds / unit[0]), unit[1]);
|
||||
return;
|
||||
element.dataset.tooltip = tooltipDateFormatter.format(date)
|
||||
const seconds = Math.round((date.valueOf() - Date.now()) / 1000)
|
||||
const unit = relativeTimeUnits.find(([size]) => Math.abs(seconds) >= size) ?? [1, 'second']
|
||||
element.textContent = relativeDateFormatter.format(Math.round(seconds / unit[0]), unit[1])
|
||||
return
|
||||
}
|
||||
|
||||
const formatted = absoluteDateFormatter.format(date);
|
||||
element.textContent = element.classList.contains('last-updated')
|
||||
? `Last updated: ${formatted}`
|
||||
: formatted;
|
||||
});
|
||||
const formatted = absoluteDateFormatter.format(date)
|
||||
element.textContent = element.classList.contains('last-updated') ? `Last updated: ${formatted}` : formatted
|
||||
})
|
||||
|
||||
+44
-41
@@ -1,48 +1,48 @@
|
||||
import fs from 'node:fs';
|
||||
import { spawn } from 'node:child_process';
|
||||
import path from 'node:path';
|
||||
import { defineConfig } from 'vite';
|
||||
import fs from 'node:fs'
|
||||
import { spawn } from 'node:child_process'
|
||||
import path from 'node:path'
|
||||
import { defineConfig } from 'vite'
|
||||
|
||||
function generatedPages(directory) {
|
||||
const inputs = {};
|
||||
const inputs = {}
|
||||
for (const entry of fs.readdirSync(directory, { withFileTypes: true })) {
|
||||
const filePath = path.join(directory, entry.name);
|
||||
if (entry.isDirectory()) Object.assign(inputs, generatedPages(filePath));
|
||||
const filePath = path.join(directory, entry.name)
|
||||
if (entry.isDirectory()) Object.assign(inputs, generatedPages(filePath))
|
||||
else if (entry.name === 'index.html') {
|
||||
const relativePath = path.relative('.generated', filePath);
|
||||
const key = relativePath.endsWith('/index.html')
|
||||
? relativePath.slice(0, -'/index.html'.length)
|
||||
: relativePath;
|
||||
inputs[key] = path.resolve(filePath);
|
||||
const relativePath = path.relative('.generated', filePath)
|
||||
const key = relativePath.endsWith('/index.html') ? relativePath.slice(0, -'/index.html'.length) : relativePath
|
||||
inputs[key] = path.resolve(filePath)
|
||||
} else if (entry.name === '404.html' && directory === '.generated') {
|
||||
inputs['404'] = path.resolve(filePath)
|
||||
}
|
||||
}
|
||||
return inputs;
|
||||
return inputs
|
||||
}
|
||||
|
||||
function contentGenerator() {
|
||||
let timer;
|
||||
let generator;
|
||||
let rerun = false;
|
||||
let timer
|
||||
let generator
|
||||
let rerun = false
|
||||
|
||||
const generate = (server) => {
|
||||
if (generator) {
|
||||
rerun = true;
|
||||
return;
|
||||
rerun = true
|
||||
return
|
||||
}
|
||||
|
||||
generator = spawn(process.execPath, ['generator.js'], { stdio: 'inherit' });
|
||||
generator = spawn(process.execPath, ['generator.js'], { stdio: 'inherit' })
|
||||
generator.on('error', (error) => {
|
||||
console.error(`Content generation failed: ${error.message}`);
|
||||
});
|
||||
console.error(`Content generation failed: ${error.message}`)
|
||||
})
|
||||
generator.on('close', (code) => {
|
||||
generator = undefined;
|
||||
if (code === 0) server.ws.send({ type: 'full-reload' });
|
||||
generator = undefined
|
||||
if (code === 0) server.ws.send({ type: 'full-reload' })
|
||||
if (rerun) {
|
||||
rerun = false;
|
||||
generate(server);
|
||||
rerun = false
|
||||
generate(server)
|
||||
}
|
||||
})
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
return {
|
||||
name: 'content-generator',
|
||||
@@ -55,22 +55,25 @@ function contentGenerator() {
|
||||
path.resolve('external.json'),
|
||||
path.resolve('generator.js'),
|
||||
path.resolve('html.js'),
|
||||
];
|
||||
server.watcher.add(sources);
|
||||
]
|
||||
server.watcher.add(sources)
|
||||
server.watcher.on('all', (event, file) => {
|
||||
if (!['add', 'change', 'unlink'].includes(event)) return;
|
||||
const isMarkdown = file.endsWith('.md') && (file.startsWith(`${path.resolve('notes')}/`) || file.startsWith(`${path.resolve('posts')}/`));
|
||||
const isExternal = file === path.resolve('external.json');
|
||||
const isStandaloneMarkdown = file === resolve('README.md') || file === path.resolve('THIRD_PARTY_LICENSES.md');
|
||||
const isGenerator = file === path.resolve('generator.js') || file === path.resolve('html.js');
|
||||
if (!isMarkdown && !isStandaloneMarkdown && !isExternal && !isGenerator) return;
|
||||
clearTimeout(timer);
|
||||
if (!['add', 'change', 'unlink'].includes(event)) return
|
||||
const isMarkdown =
|
||||
file.endsWith('.md') &&
|
||||
(file.startsWith(`${path.resolve('notes')}/`) || file.startsWith(`${path.resolve('posts')}/`))
|
||||
const isExternal = file === path.resolve('external.json')
|
||||
const isStandaloneMarkdown =
|
||||
file === path.resolve('README.md') || file === path.resolve('THIRD_PARTY_LICENSES.md')
|
||||
const isGenerator = file === path.resolve('generator.js') || file === path.resolve('html.js')
|
||||
if (!isMarkdown && !isStandaloneMarkdown && !isExternal && !isGenerator) return
|
||||
clearTimeout(timer)
|
||||
timer = setTimeout(() => {
|
||||
generate(server);
|
||||
}, 100);
|
||||
});
|
||||
generate(server)
|
||||
}, 100)
|
||||
})
|
||||
},
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
export default defineConfig({
|
||||
@@ -94,4 +97,4 @@ export default defineConfig({
|
||||
input: generatedPages('.generated'),
|
||||
},
|
||||
},
|
||||
});
|
||||
})
|
||||
|
||||
Reference in New Issue
Block a user