fn/hyperzine
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: fn:1376ed101cab947ec86c28279370e1f89d39d5de
Branches Tags
fn:main
...
compare: fn:3f059905d885f2508ed472ec0b090eb168a64edf
Branches Tags
fn:main

10 Commits
1376ed101c ... 3f059905d8

Author SHA1 Message Date
xylophonez
3f059905d8 fix: loading speeds 2026-04-17 11:27:21 +01:00
xylophonez
c08e5e986f blog: stake 3 2026-04-16 14:10:38 +01:00
xylophonez
138f8536dc blog: stake 2 2026-04-16 14:08:09 +01:00
xylophonez
76491f4d81 blog: stake 2026-04-16 12:54:35 +01:00
xylophonez
57364eaaa9 chore: update permalink url for blog 2026-04-08 11:10:55 +01:00
xylophonez
982f4fbb89 chore: update manifest id for blog 2026-04-08 10:58:08 +01:00
xylophonez
a4f3e3a4bb style: overhaul 2026-04-07 10:05:00 +00:00
xylophonez
852a4a348c fix: prerender 2026-04-02 14:12:13 +01:00
xylophonez
cb858438ef feat: favicon 2026-04-02 14:03:23 +01:00
xylophonez
0fa058cd8c fix: blogname & url 2026-04-02 14:00:19 +01:00
16 changed files with 266 additions and 130 deletions
Expand all files Collapse all files

0
.codex Normal file
View File

2
AGENTS.md
View File

@@ -15,4 +15,4 @@ The look and feel is a modern, elegant, developer-focused light-theme blog. No r
Ideal flow going forward: I update some const with the manifest view whenever I make an update to the blog. Ideal flow going forward: I update some const with the manifest view whenever I make an update to the blog.
The blog is called Hyperzine. The blog is called hyperzine.

1
index.html
View File

@@ -3,6 +3,7 @@
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" href="/src/favicon.ico" />
<title>hyperzine</title> <title>hyperzine</title>
</head> </head>
<body> <body>

6
scripts/prerender-meta.mjs
View File

@@ -7,9 +7,9 @@ const DIST_INDEX_HTML = path.join(DIST_DIR, "index.html");
const SRC_CONFIG = path.join(ROOT, "src", "config.ts"); const SRC_CONFIG = path.join(ROOT, "src", "config.ts");
const DEFAULTS = { const DEFAULTS = {
BLOG_NAME: "Hyperzine", BLOG_NAME: "hyperzine",
BLOG_SITE_URL: "https://example.com", BLOG_SITE_URL: "https://hyperzine.xyz",
BLOG_DEFAULT_DESCRIPTION: "Hyperzine", BLOG_DEFAULT_DESCRIPTION: "hyperzine",
MANIFEST_TX_ID: "" MANIFEST_TX_ID: ""
}; };

89
src/App.tsx
View File

@@ -3,11 +3,18 @@ import { Link, Navigate, Route, Routes, useLocation, useParams } from "react-rou
import { import {
BLOG_DEFAULT_DESCRIPTION, BLOG_DEFAULT_DESCRIPTION,
BLOG_NAME, BLOG_NAME,
BLOG_PERMALINK_PREFIX,
BLOG_SITE_URL, BLOG_SITE_URL,
BLOG_TWITTER_HANDLE BLOG_TWITTER_HANDLE
} from "./config"; } from "./config";
import { arweaveUrl, getReadableDate, loadManifest, loadPostContent } from "./lib"; import { arweaveUrl, getReadableDate, loadManifest, loadPostContent } from "./lib";
import type { Frontmatter, ManifestPost } from "./types"; import type { Frontmatter, ManifestPost } from "./types";
import load1 from "./load1.png";
import load2 from "./load2.png";
import load3 from "./load3.png";
import load4 from "./load4.png";
import load5 from "./load5.png";
import load6 from "./load6.png";
type LoadState = "idle" | "loading" | "error"; type LoadState = "idle" | "loading" | "error";
@@ -21,7 +28,11 @@ type MetaInput = {
modifiedTime?: string; modifiedTime?: string;
}; };
const LOADER_FRAMES = [load1, load2, load3, load4, load5, load6];
const FORCE_LOADER_PREVIEW = false;
const toAbsoluteUrl = (path = "/"): string => new URL(path, BLOG_SITE_URL).toString(); const toAbsoluteUrl = (path = "/"): string => new URL(path, BLOG_SITE_URL).toString();
const toPermalinkUrl = (path = "/"): string => new URL(path, BLOG_PERMALINK_PREFIX).toString();
const setMetaTag = (attribute: "name" | "property", key: string, content?: string): void => { const setMetaTag = (attribute: "name" | "property", key: string, content?: string): void => {
if (!content) return; if (!content) return;
@@ -91,16 +102,26 @@ const usePageMetadata = ({
}; };
function BlisterLoader() { function BlisterLoader() {
const [frame, setFrame] = useState(0);
useEffect(() => {
const timer = window.setInterval(() => {
setFrame((value) => (value + 1) % LOADER_FRAMES.length);
}, 70);
return () => window.clearInterval(timer);
}, []);
return ( return (
<div className="loader-screen" aria-live="polite" aria-label="Loading article"> <div className="loader-screen" aria-live="polite" aria-label="Loading article">
<span className="loader-square" /> <img className="loader-frame" src={LOADER_FRAMES[frame]} alt="" aria-hidden="true" />
</div> </div>
); );
} }
function App() { function App() {
const [posts, setPosts] = useState<ManifestPost[]>([]); const [posts, setPosts] = useState<ManifestPost[]>([]);
const [state, setState] = useState<LoadState>("idle"); const [state, setState] = useState<LoadState>("loading");
const [error, setError] = useState<string>(""); const [error, setError] = useState<string>("");
useEffect(() => { useEffect(() => {
@@ -137,18 +158,23 @@ function App() {
return ( return (
<div className="page"> <div className="page">
<header className="header"> <header className="header">
<Link to="/" className="brand"> <div className="header-row">
<span className="brand-mark" aria-hidden="true"> <Link to="/" className="brand">
<span className="brand-square brand-square-red" /> <span className="brand-mark" aria-hidden="true">
<span className="brand-square brand-square-purple" /> <span className="brand-square brand-square-red" />
<span className="brand-square brand-square-blue" /> <span className="brand-square brand-square-purple" />
<span className="brand-square brand-square-yellow" /> <span className="brand-square brand-square-blue" />
<span className="brand-square brand-square-green" /> <span className="brand-square brand-square-yellow" />
</span> <span className="brand-square brand-square-green" />
<span className="brand-text">{BLOG_NAME}</span> </span>
</Link> <span className="brand-text">{BLOG_NAME}</span>
</Link>
</div>
</header> </header>
<main className="content"> <main className="content">
{FORCE_LOADER_PREVIEW ? (
<BlisterLoader />
) : (
<Routes> <Routes>
<Route <Route
path="/" path="/"
@@ -160,6 +186,7 @@ function App() {
/> />
<Route path="*" element={<Navigate to="/" replace />} /> <Route path="*" element={<Navigate to="/" replace />} />
</Routes> </Routes>
)}
</main> </main>
</div> </div>
); );
@@ -313,16 +340,34 @@ function PostPage({
const bannerTxId = postFrontmatter.banner || post?.frontmatter?.banner || post?.bannerTxId; const bannerTxId = postFrontmatter.banner || post?.frontmatter?.banner || post?.bannerTxId;
const publishedDate = getReadableDate(postFrontmatter.date || post?.publishedAt); const publishedDate = getReadableDate(postFrontmatter.date || post?.publishedAt);
const updatedDate = getReadableDate(postFrontmatter.updated || post?.updated || undefined); const updatedDate = getReadableDate(postFrontmatter.updated || post?.updated || undefined);
const permalink = post ? toAbsoluteUrl(`/${post.slug}`) : toAbsoluteUrl(location.pathname); const permalink = post
? toPermalinkUrl(`/${post.slug}`)
: toPermalinkUrl(location.pathname);
const metadataTitle =
state === "loading"
? `${BLOG_NAME} | Loading`
: state === "error"
? `${BLOG_NAME} | Error`
: post
? `${title} | ${BLOG_NAME}`
: `${BLOG_NAME} | Post Not Found`;
const metadataDescription =
state === "loading"
? `Loading ${BLOG_NAME}...`
: state === "error"
? manifestError || BLOG_DEFAULT_DESCRIPTION
: post
? description
: `Post not found on ${BLOG_NAME}.`;
usePageMetadata({ usePageMetadata({
title: post ? `${title} | ${BLOG_NAME}` : `${BLOG_NAME} | Post Not Found`, title: metadataTitle,
description, description: metadataDescription,
path: location.pathname, path: location.pathname,
image: bannerTxId ? arweaveUrl(bannerTxId) : undefined, image: bannerTxId ? arweaveUrl(bannerTxId) : undefined,
type: "article", type: post ? "article" : "website",
publishedTime: postFrontmatter.date || post?.publishedAt, publishedTime: post ? postFrontmatter.date || post.publishedAt : undefined,
modifiedTime: postFrontmatter.updated || post?.updated || undefined modifiedTime: post ? postFrontmatter.updated || post.updated || undefined : undefined
}); });
if (state === "loading") return <BlisterLoader />; if (state === "loading") return <BlisterLoader />;
@@ -336,14 +381,20 @@ function PostPage({
<header className="post-header"> <header className="post-header">
<h1>{title}</h1> <h1>{title}</h1>
<p>{description}</p> <p>{description}</p>
<div className="meta-row"> <div className="meta-row post-meta-row">
{publishedDate && <span>Published {publishedDate}</span>} {publishedDate && <span>Published {publishedDate}</span>}
{updatedDate && <span>Updated {updatedDate}</span>} {updatedDate && <span>Updated {updatedDate}</span>}
{post.readingTime && <span>{post.readingTime} min read</span>} {post.readingTime && <span>{post.readingTime} min read</span>}
{post.wordCount && <span>{post.wordCount} words</span>} {post.wordCount && <span>{post.wordCount} words</span>}
<span>{post.postTxId.slice(0, 8)}...</span>
<span> <span>
<a href={permalink}>[permalink]</a> <a href={permalink}>[permalink]</a>
</span> </span>
<span>
<a href={arweaveUrl(post.postTxId)} target="_blank" rel="noreferrer">
[arweave]
</a>
</span>
</div> </div>
</header> </header>
{bannerTxId && ( {bannerTxId && (

3
src/config.ts
View File

@@ -1,9 +1,10 @@
export const BLOG_NAME = "hyperzine"; export const BLOG_NAME = "hyperzine";
export const BLOG_SITE_URL = "https://zpz3tbjvlwkkrkn2talxgib6plcj62d3r3gpjebyinbcu7oa7bjq.arweave.net"; export const BLOG_SITE_URL = "https://zpz3tbjvlwkkrkn2talxgib6plcj62d3r3gpjebyinbcu7oa7bjq.arweave.net";
export const BLOG_PERMALINK_PREFIX = "https://386464538491k.arweave.net";
export const BLOG_DEFAULT_DESCRIPTION = export const BLOG_DEFAULT_DESCRIPTION =
"A blog about cyberspace decentralization"; "A blog about cyberspace decentralization";
export const BLOG_TWITTER_HANDLE = ""; export const BLOG_TWITTER_HANDLE = "";
export const MANIFEST_TX_ID = "N2zjKSSh5PtGKzCekTJF50yTv3mTIpQnaIXieyPxie8"; export const MANIFEST_TX_ID = "BHVszJ1X-i3hnlNRflQccP_ESXZbWsSCJOfBOuNDePQ";
export const ARWEAVE_GATEWAY = "https://arweave.net"; export const ARWEAVE_GATEWAY = "https://arweave.net";
export const AO_URL = "https://push-1.forward.computer"; export const AO_URL = "https://push-1.forward.computer";

BIN
src/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.8 KiB

24
src/lib.ts
View File

@@ -113,14 +113,24 @@ const getLatestManifestFromAo = async (): Promise<string | null> => {
}; };
export const loadManifest = async (): Promise<ManifestPost[]> => { export const loadManifest = async (): Promise<ManifestPost[]> => {
const manifestTxId = (await getLatestManifestFromAo()) ?? MANIFEST_TX_ID; const loadByTxId = async (manifestTxId: string): Promise<ManifestPost[]> => {
const response = await fetch(arweaveUrl(manifestTxId)); const response = await fetch(arweaveUrl(manifestTxId));
if (!response.ok) { if (!response.ok) {
throw new Error(`Failed to load manifest (${response.status})`); throw new Error(`Failed to load manifest (${response.status})`);
} }
const payload: unknown = await response.json();
return parseManifest(payload);
};
const payload: unknown = await response.json(); try {
return parseManifest(payload); return await loadByTxId(MANIFEST_TX_ID);
} catch (manifestError) {
const latestManifestTxId = await getLatestManifestFromAo();
if (!latestManifestTxId || latestManifestTxId === MANIFEST_TX_ID) {
throw manifestError;
}
return loadByTxId(latestManifestTxId);
}
}; };
const isObject = (value: unknown): value is Record<string, unknown> => const isObject = (value: unknown): value is Record<string, unknown> =>

BIN
src/load1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 618 B

BIN
src/load2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 656 B

BIN
src/load3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 700 B

BIN
src/load4.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 711 B

BIN
src/load5.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 654 B

BIN
src/load6.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 633 B

270
src/styles.css
View File

@@ -1,23 +1,39 @@
@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500&display=swap");
:root { :root {
color: #0a0a0a; color: #101010;
background: #ffffff; background: #ffffff;
font-family: "IBM Plex Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; font-family: "DM Sans", sans-serif;
line-height: 1.6; line-height: 1.55;
--site-max-width: 760px;
--brand-red: #f60000; --brand-red: #f60000;
--brand-purple: #9611ff; --brand-purple: #9611ff;
--brand-blue: #86dafe; --brand-blue: #86dafe;
--brand-yellow: #fee55f; --brand-yellow: #fee55f;
--brand-green: #33f22f; --brand-green: #33f22f;
--line: #121212;
--line-soft: #d8d8d8;
--muted: #585858;
--accent: #0072c8;
} }
* { * {
box-sizing: border-box; box-sizing: border-box;
border-radius: 0;
}
html,
body,
#root {
min-height: 100%;
} }
body { body {
margin: 0; margin: 0;
background: #ffffff; background: #ffffff;
color: #111111; color: #111111;
font-family: "DM Sans", sans-serif;
font-weight: 400;
} }
a { a {
@@ -26,21 +42,32 @@ a {
text-underline-offset: 3px; text-underline-offset: 3px;
} }
a:hover {
color: var(--accent);
}
.page { .page {
min-height: 100vh; min-height: 100vh;
padding: 24px; width: min(var(--site-max-width), 100% - 48px);
margin: 0 auto;
padding: 0 0 48px;
} }
.header { .header {
border-bottom: 2px solid #111111; border-bottom: 1px solid var(--line);
padding-bottom: 14px; }
margin-bottom: 28px;
.header-row {
display: flex;
align-items: center;
min-height: 72px;
padding: 0 24px;
} }
.brand { .brand {
font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, Consolas, monospace; font-family: "DM Sans", sans-serif;
font-size: 1.3rem; font-size: 1.3rem;
font-weight: 600; font-weight: 500;
letter-spacing: 0.08em; letter-spacing: 0.08em;
text-decoration: none; text-decoration: none;
display: inline-flex; display: inline-flex;
@@ -87,12 +114,14 @@ a {
} }
.content { .content {
max-width: 860px; max-width: 100%;
margin: 0 auto;
} }
.status { .status {
font-size: 1rem; margin: 0;
padding: 24px;
border-top: 1px solid var(--line);
font-size: 0.95rem;
} }
.loader-screen { .loader-screen {
@@ -101,58 +130,39 @@ a {
place-items: center; place-items: center;
} }
.loader-square { .loader-frame {
width: 22px; display: block;
height: 22px; width: min(45px, 11vw);
background: var(--brand-red); height: auto;
animation: blister-flicker 180ms steps(1, end) infinite; image-rendering: pixelated;
} border-radius: 8px;
@keyframes blister-flicker {
0% {
background: var(--brand-red);
}
20% {
background: var(--brand-purple);
}
40% {
background: var(--brand-blue);
}
60% {
background: var(--brand-yellow);
}
80% {
background: var(--brand-green);
}
100% {
background: var(--brand-red);
}
} }
.index { .index {
display: grid; border-top: 0;
gap: 28px; }
.post-card {
padding: 22px 24px 26px;
border-bottom: 1px solid var(--line-soft);
}
.post-card-featured {
border-bottom: 1px solid var(--line-soft);
background: linear-gradient(180deg, #ffffff 0%, #fcfcfc 100%);
} }
.index-grid { .index-grid {
display: grid; display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: 28px;
row-gap: 28px;
} }
.post-card { .index-grid .post-card {
padding-top: 0; border-bottom: 0;
} }
.index-grid .post-card:nth-child(n + 3) { .index-grid .post-card:nth-child(odd) {
border-top: 1px solid #111111; border-right: 0;
padding-top: 18px;
}
.post-card-featured {
border-top: 0;
padding-top: 0;
} }
.banner-link { .banner-link {
@@ -164,36 +174,43 @@ a {
display: block; display: block;
width: 100%; width: 100%;
height: auto; height: auto;
border: 1px solid #111111; border: 1px solid var(--line);
} }
.post-title-link { .post-title-link {
text-decoration: none; text-decoration: none;
} }
.post-title-link:hover .post-title {
color: var(--accent);
}
.post-title { .post-title {
margin: 0; margin: 0;
font-size: 1.8rem; font-size: clamp(1.32rem, 2.15vw, 1.7rem);
line-height: 1.2; font-weight: 500;
line-height: 1.18;
letter-spacing: -0.02em;
} }
.post-description { .post-description {
margin: 10px 0 12px; margin: 12px 0 14px;
font-size: 1.04rem; font-size: 0.97rem;
color: #222222;
} }
.meta-row { .meta-row {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
gap: 0; gap: 0;
font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, Consolas, monospace; font-size: 0.82rem;
font-size: 0.86rem; color: var(--muted);
} }
.meta-row > span + span { .meta-row > span + span {
position: relative; position: relative;
margin-left: 14px; margin-left: 12px;
padding-left: 14px; padding-left: 12px;
} }
.meta-row > span + span::before { .meta-row > span + span::before {
@@ -203,42 +220,61 @@ a {
top: 50%; top: 50%;
width: 6px; width: 6px;
height: 1px; height: 1px;
background: #111111; background: #7d7d7d;
transform: translateY(-50%); transform: translateY(-50%);
} }
.post { .post {
max-width: 760px; border-top: 0;
} }
.post-topline { .post-header {
margin-bottom: 16px; max-width: 100%;
} margin: 0;
padding: 24px 24px 0;
.home-link { border-bottom: 0;
text-decoration: none;
border-bottom: 1px solid #111111;
} }
.post-header h1 { .post-header h1 {
margin: 0; margin: 0;
line-height: 1.15; line-height: 1.07;
font-size: clamp(2rem, 6vw, 3.4rem); font-size: clamp(2rem, 5vw, 3rem);
font-weight: 500;
letter-spacing: -0.03em;
max-width: 26ch;
} }
.post-header p { .post-header p {
margin: 12px 0; margin: 14px 0 0;
font-size: 1.06rem; max-width: 70ch;
font-size: 1rem;
color: #1b1b1b;
}
.post-meta-row {
margin-top: 14px;
}
.post-meta-row a {
color: #1f1f1f;
} }
.post-hero { .post-hero {
margin-top: 24px; max-width: 100%;
margin: 0;
padding: 24px 24px 0;
border-bottom: 0;
}
.post-hero .post-banner {
width: 100%;
margin: 0;
} }
.article { .article {
margin-top: 32px; max-width: 100%;
border-top: 1px solid #111111; margin: 0;
padding-top: 24px; padding: 30px 24px 52px;
} }
.article > *:first-child { .article > *:first-child {
@@ -248,56 +284,92 @@ a {
.article h2, .article h2,
.article h3, .article h3,
.article h4 { .article h4 {
margin-top: 1.9em; margin-top: 1.6em;
line-height: 1.25; margin-bottom: 0.55em;
line-height: 1.2;
font-weight: 500;
}
.article p,
.article li,
.article blockquote {
font-size: 1.04rem;
}
.article ul,
.article ol {
padding-left: 1.3rem;
}
.article a {
color: var(--accent);
} }
.article pre { .article pre {
border: 1px solid #111111; border: 1px solid var(--line);
padding: 14px; padding: 14px;
overflow: auto; overflow: auto;
background: #ffffff; background: #f7f7f7;
font-size: 0.9rem;
} }
.article code { .article code {
font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, Consolas, monospace; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
"Courier New", monospace;
font-size: 0.9em;
}
.article pre,
.article kbd,
.article samp {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
"Courier New", monospace;
} }
.article blockquote { .article blockquote {
margin-left: 0; margin: 1.2em 0;
padding-left: 16px; padding: 0 0 0 14px;
border-left: 2px solid #111111; border-left: 2px solid var(--line);
color: #292929;
} }
.article img { .article img {
max-width: 100%; max-width: 100%;
height: auto; height: auto;
border: 0;
} }
@media (max-width: 740px) { @media (max-width: 860px) {
.page { .page {
padding: 16px; width: 100%;
border-left: 0;
border-right: 0;
padding-top: 0;
} }
.index { .header-row {
grid-template-columns: 1fr; min-height: 64px;
padding: 0 16px;
}
.post-card,
.post-header,
.post-hero,
.article,
.status {
padding-left: 16px;
padding-right: 16px;
} }
.index-grid { .index-grid {
grid-template-columns: 1fr; grid-template-columns: 1fr;
} }
.index-grid .post-card:nth-child(n + 3) { .index-grid .post-card:nth-child(odd) {
border-top: 0; border-right: 0;
padding-top: 0;
}
.index-grid .post-card + .post-card {
border-top: 1px solid #111111;
padding-top: 18px;
} }
.post-title { .post-title {
font-size: 1.45rem; font-size: 1.38rem;
} }
} }

1
src/vite-env.d.ts vendored Normal file
View File

@@ -0,0 +1 @@
/// <reference types="vite/client" />