ob/fonts
1
0
Fork 0
mirror of https://github.com/hex248/fonts.git synced 2026-02-07 18:23:06 +00:00
Code Issues Packages Projects Releases Wiki Activity

dynamic homepage

Browse Source
This commit is contained in:
Oliver Bryan
2026-02-04 15:54:52 +00:00
parent 31d2909eef
commit 35c830632d
2 changed files with 145 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
public/index.html
View File

@@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<title>fonts.ob248.com</title> <title>fonts.ob248.com</title>
<link rel="stylesheet" href="/index.css" /> <link rel="stylesheet" href="/index.css" />
<style id="font-import"></style> <style id="font-import">/* FONT_IMPORT */</style>
</head> </head>
<body class="page"> <body class="page">
<header class="decal-grid decal-grid--header"> <header class="decal-grid decal-grid--header">
@@ -21,27 +21,7 @@
<main class="page__main"> <main class="page__main">
<section class="catalog"> <section class="catalog">
<article class="font-card" data-font-card data-font-name="basteleur"> <!-- FONT_CARDS -->
<div class="font-card__header">
<h2 class="font-card__title">BASTELEUR</h2>
</div>
<div class="font-card__demo">
<p class="font-card__demo-primary">
The quick brown fox jumps over the lazy dog.
</p>
</div>
<div class="font-card__footer">
<p class="font-card__label">IMPORT SNIPPET</p>
<div class="font-card__snippet">
<code class="font-card__code" data-import></code>
<button type="button" data-copy class="font-card__copy">
COPY
</button>
</div>
</div>
</article>
</section> </section>
<footer class="decal-grid" style="margin-top: 2rem; border-top: 1.5px solid var(--border-color); padding-top: 1rem;"> <footer class="decal-grid" style="margin-top: 2rem; border-top: 1.5px solid var(--border-color); padding-top: 1rem;">
@@ -55,33 +35,23 @@
</main> </main>
<script> <script>
const copyButton = document.querySelector("[data-copy]");
const importOutput = document.querySelector("[data-import]");
const importStyle = document.querySelector("#font-import");
const searchInput = document.querySelector("#font-search"); const searchInput = document.querySelector("#font-search");
const fontCards = document.querySelectorAll("[data-font-card]"); const fontCards = document.querySelectorAll("[data-font-card]");
const importSnippet = `@import url("${window.location.origin}/basteleur");`; const buildImportSnippet = (importUrl) => {
if (!importUrl) {
if (importStyle) { return "";
importStyle.textContent = importSnippet;
} }
return `@import url("${window.location.origin}${importUrl}");`;
};
if (importOutput) { const copyText = async (text) => {
importOutput.textContent = importSnippet;
}
if (copyButton) {
copyButton.addEventListener("click", async () => {
try { try {
await navigator.clipboard.writeText(importSnippet); await navigator.clipboard.writeText(text);
copyButton.textContent = "Copied"; return true;
setTimeout(() => {
copyButton.textContent = "Copy";
}, 1500);
} catch (error) { } catch (error) {
const textarea = document.createElement("textarea"); const textarea = document.createElement("textarea");
textarea.value = importSnippet; textarea.value = text;
textarea.setAttribute("readonly", "true"); textarea.setAttribute("readonly", "true");
textarea.style.position = "absolute"; textarea.style.position = "absolute";
textarea.style.left = "-9999px"; textarea.style.left = "-9999px";
@@ -89,9 +59,35 @@
textarea.select(); textarea.select();
document.execCommand("copy"); document.execCommand("copy");
document.body.removeChild(textarea); document.body.removeChild(textarea);
return true;
}
};
fontCards.forEach((card) => {
const importUrl = card.getAttribute("data-import-url");
const importSnippet = buildImportSnippet(importUrl);
const importOutput = card.querySelector("[data-import]");
const copyButton = card.querySelector("[data-copy]");
if (importOutput) {
importOutput.textContent = importSnippet;
}
if (copyButton) {
copyButton.addEventListener("click", async () => {
if (!importSnippet) {
return;
}
const copied = await copyText(importSnippet);
if (copied) {
copyButton.textContent = "Copied";
setTimeout(() => {
copyButton.textContent = "Copy";
}, 1500);
} }
}); });
} }
});
if (searchInput) { if (searchInput) {
searchInput.addEventListener("input", (event) => { searchInput.addEventListener("input", (event) => {

99
src/server.ts
View File

@@ -1,15 +1,108 @@
import { readdir } from "node:fs/promises"; import { readdir } from "node:fs/promises";
import { join } from "node:path"; import { join, parse } from "node:path";
import { Hono } from "hono"; import { Hono } from "hono";
import { serveStatic } from "hono/bun"; import { serveStatic } from "hono/bun";
const app = new Hono(); const app = new Hono();
const cssDir = "css";
const templatePath = join("public", "index.html");
const cardPlaceholder = "<!-- FONT_CARDS -->";
const importPlaceholder = "/* FONT_IMPORT */";
const escapeHtml = (value: string) =>
value
.replaceAll("&", "&amp;")
.replaceAll("<", "&lt;")
.replaceAll(">", "&gt;")
.replaceAll('"', "&quot;")
.replaceAll("'", "&#39;");
const escapeAttr = (value: string) => escapeHtml(value);
const normalizeFamily = (value: string) => value.replace(/^['"]|['"]$/g, "").trim();
const slugify = (value: string) =>
value
.toLowerCase()
.replace(/\s+/g, " ")
.trim();
const parseFontFamilies = (css: string) => {
const families = new Set<string>();
const blocks = css.match(/@font-face\s*{[^}]*}/gms) ?? [];
for (const block of blocks) {
const match = block.match(/font-family\s*:\s*([^;]+);/i);
if (!match) {
continue;
}
const family = normalizeFamily(match[1]);
if (family) {
families.add(family);
}
}
return [...families];
};
const buildFontCatalog = async () => {
const entries = await readdir(cssDir, { withFileTypes: true });
const cssFiles = entries
.filter((entry) => entry.isFile() && entry.name.endsWith(".css"))
.map((entry) => entry.name)
.sort((a, b) => a.localeCompare(b));
const cards: string[] = [];
const importUrls: string[] = [];
for (const fileName of cssFiles) {
const baseName = parse(fileName).name;
const route = `/${baseName}`;
const filePath = join(cssDir, fileName);
const css = await Bun.file(filePath).text();
const families = parseFontFamilies(css);
if (families.length === 0) {
continue;
}
importUrls.push(route);
for (const family of families) {
const displayName = family || baseName;
const dataName = slugify(displayName);
const fontFamily = family || displayName;
const card = `\n <article class="font-card" data-font-card data-font-name="${escapeAttr(
dataName,
)}" data-import-url="${escapeAttr(route)}">\n <div class="font-card__header">\n <h2 class="font-card__title">${escapeHtml(
displayName,
)}</h2>\n </div>\n\n <div class="font-card__demo">\n <p class="font-card__demo-primary" style="font-family: '${escapeAttr(
fontFamily,
)}', serif;">\n The quick brown fox jumps over the lazy dog.\n </p>\n </div>\n\n <div class="font-card__footer">\n <p class="font-card__label">IMPORT SNIPPET</p>\n <div class="font-card__snippet">\n <code class="font-card__code" data-import></code>\n <button type="button" data-copy class="font-card__copy">\n COPY\n </button>\n </div>\n </div>\n </article>`;
cards.push(card);
}
}
const importCss = importUrls
.map((url) => `@import url(\"${url}\");`)
.join("\n");
return {
cards: cards.join("\n"),
importCss,
};
};
const templateHtml = await Bun.file(templatePath).text();
const { cards, importCss } = await buildFontCatalog();
const indexHtml = templateHtml
.replace(cardPlaceholder, cards)
.replace(importPlaceholder, importCss);
app.get("/", (c) => c.html(indexHtml));
app.use("/fonts/*", serveStatic({ root: "." })); app.use("/fonts/*", serveStatic({ root: "." }));
app.use("/*", serveStatic({ root: "./public" })); app.use("/*", serveStatic({ root: "./public" }));
const cssDir = "css";
const cssRoutes = async () => { const cssRoutes = async () => {
const entries = await readdir(cssDir, { withFileTypes: true }); const entries = await readdir(cssDir, { withFileTypes: true });
for (const entry of entries) { for (const entry of entries) {