37ng/37ng.github.io

Purpose and runtime

This is an Astro-based static personal/blog site centered on an interactive, visual Bitcoin article experience. It combines Astro pages and layouts with React/TSX islands for client-side animation, interaction, and 3D rendering. The deploy pipeline is defined at .github/workflows/deploy.yml; runtime/package choices are in package.json.

HTTP entry points and routing

• Homepage: src/pages/index.astro

• Dynamic blog-post route: src/pages/blog/[slug].astro

• Content originates from MDX files under src/content/blog/, including src/content/blog/bitcoin.mdx and src/content/blog/prologue.mdx.

• src/content.config.ts defines the Astro content collection boundary used to validate and load post metadata/content.

The slug route resolves a requested post from the content collection and renders it through the post layout rather than exposing a separate application API.

Layout and document shell

src/layouts/BaseLayout.astro is the shared document-level shell: it centralizes global page structure and styling concerns. src/layouts/PostLayout.astro composes the article-specific experience around rendered MDX content.

Global visual tokens and site-wide CSS are rooted in src/styles/global.css. The layout boundary keeps static Astro rendering and MDX composition separate from interactive React components.

Content-to-page flow

Blog MDX is the primary data source:

1. Posts are discovered/queried through src/content.config.ts and src/lib/posts.ts.

2. src/pages/blog/[slug].astro maps a slug to its content entry.

3. src/layouts/PostLayout.astro renders the resolved article and embeds relevant visual components.

4. Homepage presentation can use post-derived display data and fan-layout calculations from src/lib/posts.ts and src/lib/fan.ts.

This is a content-driven static-site flow, not a database-backed service.

Interactive presentation islands

React components provide isolated browser-side behavior within Astro-rendered pages:

• src/components/Clock.tsx supplies a live/time-based display.

• src/components/ThemeToggle.tsx manages user theme interaction.

• src/components/PostsFan.tsx presents posts in a fan-like interactive layout.

• src/components/HeroStage.astro and src/components/stages/PaperSheet.astro define higher-level staged visual composition.

Reusable primitives in src/components/ui/Button.tsx, src/components/ui/Panel.tsx, and src/components/ui/Tag.tsx support consistent component-level presentation.

Bitcoin visualization subsystem

The Bitcoin post has a dedicated visualization domain:

• src/components/diagrams/BitcoinTimeline.astro integrates the timeline into Astro/MDX composition.

• src/components/diagrams/BitcoinTimeline.tsx implements the interactive timeline island.

• src/components/diagrams/BitcoinCoin3D.tsx renders the 3D coin visual, backed by the static model public/bitcoin.glb.

Domain data and computation are separated from rendering: src/lib/bitcoin-timeline.ts supplies timeline-oriented data, while src/lib/bitcoin-blocks.ts and src/lib/sha256.ts model block/hash-related logic. The 3D model is served as a public static asset rather than generated server-side.

Build, static assets, and delivery boundaries

Astro configuration is in astro.config.mjs; TypeScript behavior is controlled by tsconfig.json. Static browser assets are served from public/, notably public/bitcoin.glb. Git hooks in .githooks/ enforce local workflow checks, while .github/workflows/deploy.yml is the infrastructure boundary for publishing the built site.