Use Heliotrope on homepage
Some checks are pending
Build / build (push) Waiting to run

This commit is contained in:
Neeldhara Misra 2026-06-13 23:28:43 +02:00
parent a927c5c8d9
commit 32969f0953
7 changed files with 45 additions and 4 deletions

View file

@ -3,6 +3,7 @@ FROM node:22-alpine AS build
WORKDIR /app
COPY package.json ./
COPY scripts ./scripts
COPY webfonts ./webfonts
RUN npm run build
FROM nginx:1.27-alpine AS runtime

View file

@ -3,7 +3,8 @@
Minimal static homepage for `neeldhara.blog`.
The build script fetches the RSS feed from each blog and writes `dist/index.html`
with the latest two entries per blog.
with the latest two entries per blog. It also copies the bundled Heliotrope
fonts into `dist/webfonts/`.
```sh
npm run build

View file

@ -1,4 +1,4 @@
import { mkdir, writeFile } from "node:fs/promises";
import { copyFile, mkdir, writeFile } from "node:fs/promises";
const blogs = [
{
@ -41,6 +41,13 @@ const blogs = [
const rssHostSuffix = process.env.RSS_HOST_SUFFIX ?? "neeldhara.email";
const publicHostSuffix = process.env.PUBLIC_HOST_SUFFIX ?? "neeldhara.blog";
const outDir = new URL("../dist/", import.meta.url);
const fontDir = new URL("../webfonts/", import.meta.url);
const fontFiles = [
"heliotrope_3_regular.woff2",
"heliotrope_3_italic.woff2",
"heliotrope_3_bold.woff2",
"heliotrope_3_bold_italic.woff2",
];
function decodeXml(value) {
return value
@ -123,7 +130,7 @@ function renderSiteIcon(blog) {
}
function renderBlog(blog, posts) {
return `<details class="blog" open>
return `<details class="blog">
<summary>
<span>${escapeHtml(blog.label)}</span>
<span class="blog-actions">
@ -149,13 +156,41 @@ const html = `<!doctype html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>neeldhara.blog</title>
<style>
@font-face {
font-family: "Heliotrope";
src: url("/webfonts/heliotrope_3_regular.woff2") format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Heliotrope";
src: url("/webfonts/heliotrope_3_italic.woff2") format("woff2");
font-weight: 400;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "Heliotrope";
src: url("/webfonts/heliotrope_3_bold.woff2") format("woff2");
font-weight: 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Heliotrope";
src: url("/webfonts/heliotrope_3_bold_italic.woff2") format("woff2");
font-weight: 700;
font-style: italic;
font-display: swap;
}
html { color-scheme: light; }
* { box-sizing: border-box; }
body {
margin: 0;
background: #f0f0f0;
color: #111;
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
font-family: "Heliotrope", ui-serif, Georgia, serif;
font-size: 15px;
line-height: 1.45;
}
@ -359,3 +394,7 @@ const html = `<!doctype html>
await mkdir(outDir, { recursive: true });
await writeFile(new URL("index.html", outDir), html);
await mkdir(new URL("webfonts/", outDir), { recursive: true });
await Promise.all(
fontFiles.map((file) => copyFile(new URL(file, fontDir), new URL(`webfonts/${file}`, outDir))),
);

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.