fix: loading speeds

blog: stake 3
blog: stake 2
2026-04-17 11:27:21 +01:00 · 2026-04-16 14:10:38 +01:00 · 2026-04-16 14:08:09 +01:00 · 2026-04-16 12:54:35 +01:00 · 2026-04-08 11:10:55 +01:00 · 2026-04-08 10:58:08 +01:00
16 changed files with 266 additions and 130 deletions
--- a/.codex
+++ b/.codex
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -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.

-The blog is called Hyperzine. 
+The blog is called hyperzine. 
--- a/index.html
+++ b/index.html
@@ -3,6 +3,7 @@
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="icon" href="/src/favicon.ico" />
    <title>hyperzine</title>
  </head>
  <body>
--- a/scripts/prerender-meta.mjs
+++ b/scripts/prerender-meta.mjs
@@ -7,9 +7,9 @@ const DIST_INDEX_HTML = path.join(DIST_DIR, "index.html");
 const SRC_CONFIG = path.join(ROOT, "src", "config.ts");

 const DEFAULTS = {
-  BLOG_NAME: "Hyperzine",
-  BLOG_SITE_URL: "https://example.com",
-  BLOG_DEFAULT_DESCRIPTION: "Hyperzine",
+  BLOG_NAME: "hyperzine",
+  BLOG_SITE_URL: "https://hyperzine.xyz",
+  BLOG_DEFAULT_DESCRIPTION: "hyperzine",
  MANIFEST_TX_ID: ""
 };

--- a/src/App.tsx
+++ b/src/App.tsx
@@ -3,11 +3,18 @@ import { Link, Navigate, Route, Routes, useLocation, useParams } from "react-rou
 import {
  BLOG_DEFAULT_DESCRIPTION,
  BLOG_NAME,
+  BLOG_PERMALINK_PREFIX,
  BLOG_SITE_URL,
  BLOG_TWITTER_HANDLE
 } from "./config";
 import { arweaveUrl, getReadableDate, loadManifest, loadPostContent } from "./lib";
 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";

@@ -21,7 +28,11 @@ type MetaInput = {
  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 toPermalinkUrl = (path = "/"): string => new URL(path, BLOG_PERMALINK_PREFIX).toString();

 const setMetaTag = (attribute: "name" | "property", key: string, content?: string): void => {
  if (!content) return;
@@ -91,16 +102,26 @@ const usePageMetadata = ({
 };

 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 (
    <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>
  );
 }

 function App() {
  const [posts, setPosts] = useState<ManifestPost[]>([]);
-  const [state, setState] = useState<LoadState>("idle");
+  const [state, setState] = useState<LoadState>("loading");
  const [error, setError] = useState<string>("");

  useEffect(() => {
@@ -137,6 +158,7 @@ function App() {
  return (
    <div className="page">
      <header className="header">
+        <div className="header-row">
          <Link to="/" className="brand">
            <span className="brand-mark" aria-hidden="true">
              <span className="brand-square brand-square-red" />
@@ -147,8 +169,12 @@ function App() {
            </span>
            <span className="brand-text">{BLOG_NAME}</span>
          </Link>
+        </div>
      </header>
      <main className="content">
+        {FORCE_LOADER_PREVIEW ? (
+          <BlisterLoader />
+        ) : (
        <Routes>
          <Route
            path="/"
@@ -160,6 +186,7 @@ function App() {
          />
          <Route path="*" element={<Navigate to="/" replace />} />
        </Routes>
+        )}
      </main>
    </div>
  );
@@ -313,16 +340,34 @@ function PostPage({
  const bannerTxId = postFrontmatter.banner || post?.frontmatter?.banner || post?.bannerTxId;
  const publishedDate = getReadableDate(postFrontmatter.date || post?.publishedAt);
  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({
-    title: post ? `${title} | ${BLOG_NAME}` : `${BLOG_NAME} | Post Not Found`,
-    description,
+    title: metadataTitle,
+    description: metadataDescription,
    path: location.pathname,
    image: bannerTxId ? arweaveUrl(bannerTxId) : undefined,
-    type: "article",
-    publishedTime: postFrontmatter.date || post?.publishedAt,
-    modifiedTime: postFrontmatter.updated || post?.updated || undefined
+    type: post ? "article" : "website",
+    publishedTime: post ? postFrontmatter.date || post.publishedAt : undefined,
+    modifiedTime: post ? postFrontmatter.updated || post.updated || undefined : undefined
  });

  if (state === "loading") return <BlisterLoader />;
@@ -336,14 +381,20 @@ function PostPage({
      <header className="post-header">
        <h1>{title}</h1>
        <p>{description}</p>
-        <div className="meta-row">
+        <div className="meta-row post-meta-row">
          {publishedDate && <span>Published {publishedDate}</span>}
          {updatedDate && <span>Updated {updatedDate}</span>}
          {post.readingTime && <span>{post.readingTime} min read</span>}
          {post.wordCount && <span>{post.wordCount} words</span>}
+          <span>{post.postTxId.slice(0, 8)}...</span>
          <span>
            <a href={permalink}>[permalink]</a>
          </span>
+          <span>
+            <a href={arweaveUrl(post.postTxId)} target="_blank" rel="noreferrer">
+              [arweave]
+            </a>
+          </span>
        </div>
      </header>
      {bannerTxId && (
--- a/src/config.ts
+++ b/src/config.ts
@@ -1,9 +1,10 @@
 export const BLOG_NAME = "hyperzine";
 export const BLOG_SITE_URL = "https://zpz3tbjvlwkkrkn2talxgib6plcj62d3r3gpjebyinbcu7oa7bjq.arweave.net";
+export const BLOG_PERMALINK_PREFIX = "https://386464538491k.arweave.net";
 export const BLOG_DEFAULT_DESCRIPTION =
  "A blog about cyberspace decentralization";
 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 AO_URL = "https://push-1.forward.computer";
--- a/src/favicon.ico
+++ b/src/favicon.ico
--- a/src/lib.ts
+++ b/src/lib.ts
@@ -113,14 +113,24 @@ const getLatestManifestFromAo = async (): Promise<string | null> => {
 };

 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));
    if (!response.ok) {
      throw new Error(`Failed to load manifest (${response.status})`);
    }
-
    const payload: unknown = await response.json();
    return parseManifest(payload);
+  };
+
+  try {
+    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> =>
--- a/src/load1.png
+++ b/src/load1.png
--- a/src/load2.png
+++ b/src/load2.png
--- a/src/load3.png
+++ b/src/load3.png
--- a/src/load4.png
+++ b/src/load4.png
--- a/src/load5.png
+++ b/src/load5.png
--- a/src/load6.png
+++ b/src/load6.png
--- a/src/styles.css
+++ b/src/styles.css
@@ -1,23 +1,39 @@
+@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500&display=swap");
+
 :root {
-  color: #0a0a0a;
+  color: #101010;
  background: #ffffff;
-  font-family: "IBM Plex Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
-  line-height: 1.6;
+  font-family: "DM Sans", sans-serif;
+  line-height: 1.55;
+  --site-max-width: 760px;
  --brand-red: #f60000;
  --brand-purple: #9611ff;
  --brand-blue: #86dafe;
  --brand-yellow: #fee55f;
  --brand-green: #33f22f;
+  --line: #121212;
+  --line-soft: #d8d8d8;
+  --muted: #585858;
+  --accent: #0072c8;
 }

 * {
  box-sizing: border-box;
+  border-radius: 0;
+}
+
+html,
+body,
+#root {
+  min-height: 100%;
 }

 body {
  margin: 0;
  background: #ffffff;
  color: #111111;
+  font-family: "DM Sans", sans-serif;
+  font-weight: 400;
 }

 a {
@@ -26,21 +42,32 @@ a {
  text-underline-offset: 3px;
 }

+a:hover {
+  color: var(--accent);
+}
+
 .page {
  min-height: 100vh;
-  padding: 24px;
+  width: min(var(--site-max-width), 100% - 48px);
+  margin: 0 auto;
+  padding: 0 0 48px;
 }

 .header {
-  border-bottom: 2px solid #111111;
-  padding-bottom: 14px;
-  margin-bottom: 28px;
+  border-bottom: 1px solid var(--line);
+}
+
+.header-row {
+  display: flex;
+  align-items: center;
+  min-height: 72px;
+  padding: 0 24px;
 }

 .brand {
-  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, Consolas, monospace;
+  font-family: "DM Sans", sans-serif;
  font-size: 1.3rem;
-  font-weight: 600;
+  font-weight: 500;
  letter-spacing: 0.08em;
  text-decoration: none;
  display: inline-flex;
@@ -87,12 +114,14 @@ a {
 }

 .content {
-  max-width: 860px;
-  margin: 0 auto;
+  max-width: 100%;
 }

 .status {
-  font-size: 1rem;
+  margin: 0;
+  padding: 24px;
+  border-top: 1px solid var(--line);
+  font-size: 0.95rem;
 }

 .loader-screen {
@@ -101,58 +130,39 @@ a {
  place-items: center;
 }

-.loader-square {
-  width: 22px;
-  height: 22px;
-  background: var(--brand-red);
-  animation: blister-flicker 180ms steps(1, end) infinite;
-}
-
-@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);
-  }
+.loader-frame {
+  display: block;
+  width: min(45px, 11vw);
+  height: auto;
+  image-rendering: pixelated;
+  border-radius: 8px;
 }

 .index {
-  display: grid;
-  gap: 28px;
+  border-top: 0;
+}
+
+.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 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
-  column-gap: 28px;
-  row-gap: 28px;
 }

-.post-card {
-  padding-top: 0;
+.index-grid .post-card {
+  border-bottom: 0;
 }

-.index-grid .post-card:nth-child(n + 3) {
-  border-top: 1px solid #111111;
-  padding-top: 18px;
-}
-
-.post-card-featured {
-  border-top: 0;
-  padding-top: 0;
+.index-grid .post-card:nth-child(odd) {
+  border-right: 0;
 }

 .banner-link {
@@ -164,36 +174,43 @@ a {
  display: block;
  width: 100%;
  height: auto;
-  border: 1px solid #111111;
+  border: 1px solid var(--line);
 }

 .post-title-link {
  text-decoration: none;
 }

+.post-title-link:hover .post-title {
+  color: var(--accent);
+}
+
 .post-title {
  margin: 0;
-  font-size: 1.8rem;
-  line-height: 1.2;
+  font-size: clamp(1.32rem, 2.15vw, 1.7rem);
+  font-weight: 500;
+  line-height: 1.18;
+  letter-spacing: -0.02em;
 }

 .post-description {
-  margin: 10px 0 12px;
-  font-size: 1.04rem;
+  margin: 12px 0 14px;
+  font-size: 0.97rem;
+  color: #222222;
 }

 .meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
-  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, Consolas, monospace;
-  font-size: 0.86rem;
+  font-size: 0.82rem;
+  color: var(--muted);
 }

 .meta-row > span + span {
  position: relative;
-  margin-left: 14px;
-  padding-left: 14px;
+  margin-left: 12px;
+  padding-left: 12px;
 }

 .meta-row > span + span::before {
@@ -203,42 +220,61 @@ a {
  top: 50%;
  width: 6px;
  height: 1px;
-  background: #111111;
+  background: #7d7d7d;
  transform: translateY(-50%);
 }

 .post {
-  max-width: 760px;
+  border-top: 0;
 }

-.post-topline {
-  margin-bottom: 16px;
-}
-
-.home-link {
-  text-decoration: none;
-  border-bottom: 1px solid #111111;
+.post-header {
+  max-width: 100%;
+  margin: 0;
+  padding: 24px 24px 0;
+  border-bottom: 0;
 }

 .post-header h1 {
  margin: 0;
-  line-height: 1.15;
-  font-size: clamp(2rem, 6vw, 3.4rem);
+  line-height: 1.07;
+  font-size: clamp(2rem, 5vw, 3rem);
+  font-weight: 500;
+  letter-spacing: -0.03em;
+  max-width: 26ch;
 }

 .post-header p {
-  margin: 12px 0;
-  font-size: 1.06rem;
+  margin: 14px 0 0;
+  max-width: 70ch;
+  font-size: 1rem;
+  color: #1b1b1b;
+}
+
+.post-meta-row {
+  margin-top: 14px;
+}
+
+.post-meta-row a {
+  color: #1f1f1f;
 }

 .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 {
-  margin-top: 32px;
-  border-top: 1px solid #111111;
-  padding-top: 24px;
+  max-width: 100%;
+  margin: 0;
+  padding: 30px 24px 52px;
 }

 .article > *:first-child {
@@ -248,56 +284,92 @@ a {
 .article h2,
 .article h3,
 .article h4 {
-  margin-top: 1.9em;
-  line-height: 1.25;
+  margin-top: 1.6em;
+  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 {
-  border: 1px solid #111111;
+  border: 1px solid var(--line);
  padding: 14px;
  overflow: auto;
-  background: #ffffff;
+  background: #f7f7f7;
+  font-size: 0.9rem;
 }

 .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 {
-  margin-left: 0;
-  padding-left: 16px;
-  border-left: 2px solid #111111;
+  margin: 1.2em 0;
+  padding: 0 0 0 14px;
+  border-left: 2px solid var(--line);
+  color: #292929;
 }

 .article img {
  max-width: 100%;
  height: auto;
+  border: 0;
 }

-@media (max-width: 740px) {
+@media (max-width: 860px) {
  .page {
-    padding: 16px;
+    width: 100%;
+    border-left: 0;
+    border-right: 0;
+    padding-top: 0;
  }

-  .index {
-    grid-template-columns: 1fr;
+  .header-row {
+    min-height: 64px;
+    padding: 0 16px;
+  }
+
+  .post-card,
+  .post-header,
+  .post-hero,
+  .article,
+  .status {
+    padding-left: 16px;
+    padding-right: 16px;
  }

  .index-grid {
    grid-template-columns: 1fr;
  }

-  .index-grid .post-card:nth-child(n + 3) {
-    border-top: 0;
-    padding-top: 0;
-  }
-
-  .index-grid .post-card + .post-card {
-    border-top: 1px solid #111111;
-    padding-top: 18px;
+  .index-grid .post-card:nth-child(odd) {
+    border-right: 0;
  }

  .post-title {
-    font-size: 1.45rem;
+    font-size: 1.38rem;
  }
 }
--- a/src/vite-env.d.ts
+++ b/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
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