public/hornwitser.no
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Use absolute refs transformed to relative

Browse source 
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
Download patch file Download diff file Expand all files Collapse all files

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 { 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"; const outDir = "build/web";
if (!fs.existsSync(outDir)) { if (!fs.existsSync(outDir)) {
@ -15,8 +32,8 @@ for (const page of pages) {
fs.mkdirSync(dir); fs.mkdirSync(dir);
} }
} }
console.log(`writing ${outDir}/${page.ref}`); console.log(`writing ${outDir}${page.ref}`);
fs.writeFileSync(`${outDir}/${page.ref}`, htmlDocument(prettify(page.content))); fs.writeFileSync(`${outDir}${page.ref}`, pageToHtml(page));
} }
console.log(`writing ${outDir}/style.css`); console.log(`writing ${outDir}/style.css`);

4
content/bases.tsx
View file

@ -9,12 +9,12 @@ export function BasePage(props: BaseProps) {
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<title>{props.title}</title> <title>{props.title}</title>
<link rel="stylesheet" href="./style.css" /> <link rel="stylesheet" href="/style.css" />
</head> </head>
<body> <body>
<header class="header"> <header class="header">
<nav> <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> </nav>
</header> </header>
{props.children} {props.children}

8
content/index.tsx
View file

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

14
content/projects.tsx
View file

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

6
content/updates.tsx
View file

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