/* Generic markdown post renderer
Requires window.POST_META = { id, title, sub, target, date, state, stateLabel, mdFile, tags, prev, next }
Requires marked.js loaded before this script */
function PostProgress() {
const [pct, setPct] = React.useState(0);
React.useEffect(() => {
const fn = () => {
const h = document.documentElement;
const max = h.scrollHeight - h.clientHeight;
setPct(max > 0 ? h.scrollTop / max : 0);
};
window.addEventListener('scroll', fn, { passive: true });
fn();
return () => window.removeEventListener('scroll', fn);
}, []);
const totalBytes = 0x2000;
const cur = Math.floor(pct * totalBytes);
const hex = n => '0x' + n.toString(16).padStart(4, '0');
return (
<>
{hex(cur)} / {hex(totalBytes)}
·
{Math.round(pct * 100)}%
);
}
function PostTOC({ items, active }) {
return (
);
}
function PostSide({ meta }) {
const readingWords = Math.ceil((meta.wordCount || 1200) / 200);
return (
);
}
function MarkdownBody({ html, tocItems, setActive }) {
const ref = React.useRef(null);
React.useEffect(() => {
if (!ref.current || tocItems.length === 0) return;
const fn = () => {
let cur = tocItems[0].id;
for (const it of tocItems) {
const el = document.getElementById(it.id);
if (el && el.getBoundingClientRect().top < 120) cur = it.id;
}
setActive(cur);
};
window.addEventListener('scroll', fn, { passive: true });
fn();
return () => window.removeEventListener('scroll', fn);
}, [tocItems]);
return (
);
}
function MarkdownPostPage() {
const meta = window.POST_META;
const [html, setHtml] = React.useState('');
const [toc, setToc] = React.useState([]);
const [active, setActive] = React.useState('');
const [loading, setLoading] = React.useState(true);
const [wordCount, setWordCount] = React.useState(0);
React.useEffect(() => {
const renderer = new marked.Renderer();
const slugUsed = {};
const headings = [];
renderer.heading = ({ text, depth, tokens }) => {
const rawText = tokens.map(t => t.raw || t.text || '').join('').replace(/[`*_]/g, '').trim();
let slug = rawText.toLowerCase().replace(/[^\w\s-]/g, '').replace(/\s+/g, '-').replace(/-+/g, '-').trim('-');
if (slugUsed[slug]) { slugUsed[slug]++; slug = slug + '-' + slugUsed[slug]; } else { slugUsed[slug] = 1; }
if (depth === 2) headings.push({ id: slug, label: rawText });
return `${marked.parseInline(tokens.map(t=>t.raw||'').join(''))}`;
};
renderer.code = ({ text, lang }) => {
const escaped = text.replace(/&/g,'&').replace(//g,'>');
const langLabel = lang ? `${lang}` : '';
return ``;
};
renderer.table = (token) => {
let thead = '';
token.header.forEach(cell => { thead += `| ${marked.parseInline(cell.tokens.map(t=>t.raw||'').join(''))} | `; });
thead += '
';
let tbody = '';
token.rows.forEach(row => {
tbody += '';
row.forEach(cell => { tbody += `| ${marked.parseInline(cell.tokens.map(t=>t.raw||'').join(''))} | `; });
tbody += '
';
});
tbody += '';
return ``;
};
marked.use({ renderer });
fetch(meta.mdFile)
.then(r => r.text())
.then(md => {
// strip YAML frontmatter if any
const stripped = md.replace(/^---[\s\S]*?---\n/, '');
const words = stripped.split(/\s+/).length;
setWordCount(words);
meta.wordCount = words;
const rendered = marked.parse(stripped);
setHtml(rendered);
setToc(headings);
if (headings.length > 0) setActive(headings[0].id);
setLoading(false);
})
.catch(e => {
setHtml(`Failed to load post content: ${e.message}
`);
setLoading(false);
});
}, []);
return (
<>
§ {String(meta.id).padStart(2, '0')}
{meta.date}
{loading
?
loading...
:
}
);
}
Object.assign(window, { MarkdownPostPage });