Use absolute refs transformed to relative

Write all links as absolute refs from the virtual root of the website's
path namespace and then transform these into relative links with the
resolveRefs utility function.
This commit is contained in:
Hornwitser 2025-01-22 09:03:37 +01:00
parent 17f8693eae
commit d003ea01d0
5 changed files with 37 additions and 20 deletions

25
cli.ts
View file

@ -1,6 +1,23 @@
import { pages } from "./content/pages.js"
import * as fs from "node:fs";
import * as posix from "node:path/posix";
import { prettify, htmlDocument } from "antihtml";
import * as fs from "node:fs"
import { pages } from "./content/pages.js";
import type { Page } from "./content/types.js";
import { resolveRefs } from "./utils/resolve-refs.js";
function pageToHtml(page: Page) {
if (!page.ref.startsWith("/")) {
throw new Error(`ref "${page.ref}" for "${page.title}" is not absolute.`);
}
return htmlDocument(
prettify(
resolveRefs(
page.content,
posix.dirname(page.ref),
)
)
)
}
const outDir = "build/web";
if (!fs.existsSync(outDir)) {
@ -15,8 +32,8 @@ for (const page of pages) {
fs.mkdirSync(dir);
}
}
console.log(`writing ${outDir}/${page.ref}`);
fs.writeFileSync(`${outDir}/${page.ref}`, htmlDocument(prettify(page.content)));
console.log(`writing ${outDir}${page.ref}`);
fs.writeFileSync(`${outDir}${page.ref}`, pageToHtml(page));
}
console.log(`writing ${outDir}/style.css`);

View file

@ -9,12 +9,12 @@ export function BasePage(props: BaseProps) {
<head>
<meta charset="utf-8" />
<title>{props.title}</title>
<link rel="stylesheet" href="./style.css" />
<link rel="stylesheet" href="/style.css" />
</head>
<body>
<header class="header">
<nav>
<a href="./index.html">Home</a> <a href="./updates.html">Updates</a> <a href="./projects.html">Projects</a>
<a href="/index.html">Home</a> <a href="/updates.html">Updates</a> <a href="/projects.html">Projects</a>
</nav>
</header>
{props.children}

View file

@ -5,7 +5,7 @@ import { updates } from "./updates.js"
const title = "Hornwitser's Site";
export const index = {
title,
ref: "index.html",
ref: "/index.html",
content: <BasePage title={title}>
<main>
<div class="hero" />
@ -21,13 +21,13 @@ export const index = {
<p>
I'm a red dragon that mostly dabble in hobby programming and the occasional artwork.
</p>
<h2>Latest <a href="./updates.html">Updates</a></h2>
<h2>Latest <a href="/updates.html">Updates</a></h2>
<ul>
{ updates.map(update => <li><a href={"./" + update.ref}>{update.title}</a></li>)}
{ updates.map(update => <li><a href={update.ref}>{update.title}</a></li>)}
</ul>
<h2>Projects</h2>
<ul>
{ projects.map(project => <li><a href={"./" + project.ref}>{project.title}</a></li>)}
{ projects.map(project => <li><a href={project.ref}>{project.title}</a></li>)}
</ul>
</main>
</BasePage>,

View file

@ -4,23 +4,23 @@ import type { Page } from "./types.js";
export const projects: Page[] = [
{
title: "Buddhabrot renderer",
ref: "projects/buddhabrot.html",
ref: "/projects/buddhabrot.html",
},
{
title: "Wooden Drawing Board",
ref: "projects/drafting-board.html",
ref: "/projects/drafting-board.html",
},
{
title: "Flying Hornwitser Paper Craft",
ref: "projects/paper-hornwitser.html",
ref: "/projects/paper-hornwitser.html",
},
{
title: "Prototype Soren Plush",
ref: "projects/plush-soren.html",
ref: "/projects/plush-soren.html",
},
{
title: "Blender to CSS export script",
ref: "projects/blender-css.html",
ref: "/projects/blender-css.html",
},
].map(page => ({
title: page.title,
@ -35,12 +35,12 @@ export const projects: Page[] = [
const title = "Hornwitser's Projects";
export const projectsIndex: Page = {
title,
ref: "projects.html",
ref: "/projects.html",
content: <BasePage title={title}>
<main>
<h1>{title}</h1>
<ul>
{ projects.map(project => <li><a href={"./" + project.ref}>{project.title}</a></li>)}
{ projects.map(project => <li><a href={project.ref}>{project.title}</a></li>)}
</ul>
</main>
</BasePage>

View file

@ -5,7 +5,7 @@ export const updates: Page[] = [
{
published: "2025-xx-xx",
title: "Website Launch",
ref: "updates/site-launch.html",
ref: "/updates/site-launch.html",
}
].map(page => ({
title: page.title,
@ -20,12 +20,12 @@ export const updates: Page[] = [
const title = "Website Updates";
export const updatesIndex: Page = {
title,
ref: "updates.html",
ref: "/updates.html",
content: <BasePage title={title}>
<main>
<h1>{title}</h1>
<ul>
{ updates.map(update => <li><a href={"./" + update.ref}>{update.title}</a></li>)}
{ updates.map(update => <li><a href={update.ref}>{update.title}</a></li>)}
</ul>
</main>
</BasePage>