Editorial Blog Article Layout

Design a long-form editorial blog article page. The layout should include:

1. **Top navigation** — Same site navbar.

2. **Reading progress bar** — A thin blue bar fixed at the very top of the viewport that fills from 0% to 100% as the user scrolls through the article.

3. **Article header section (above the fold):**
   - Category badge (e.g., "Engineering") linking to the category page.
   - H1 headline (large, 2–3 lines max).
   - Subheadline / excerpt paragraph (gray text).
   - Author row: small avatar, author name (linked), "·" separator, publication date, "·" estimated read time (e.g., "8 min read"). 
   - Social share buttons: X (Twitter), LinkedIn, Copy link icon.
   - Full-width hero image (16:9 aspect ratio) with an optional caption below.

4. **Content body — 2 column layout with max-width 76ch for the article:**
   - **Table of Contents sidebar** (sticky, left of content on wide screens, hidden on mobile): numbered list of section headings with "active" highlight as user scrolls. On mobile, collapsed into a "Table of contents ▾" disclosure at the top of the article body.
   - **Main content area** — Supports standard typography: h2/h3 headings, paragraphs, blockquotes (left border accent, italic), inline code, code blocks with syntax highlighting and a copy button, ordered/unordered lists, callout boxes (info, warning, tip in blue/yellow/green), images with captions.

5. **Author bio card** — Below the article body: author avatar (larger, ~64px), name, short bio (2 sentences), social links (Twitter, GitHub, LinkedIn).

6. **Newsletter CTA** — Soft-background banner: "Enjoyed this article? Get more like it in your inbox." Email input + subscribe button.

7. **Related articles** — "More from the blog" section with 3 cards (thumbnail, category, title, date).

8. **Footer** — Standard site footer.

[NAVBAR]
[READING PROGRESS BAR — fixed top, thin blue line]

[ARTICLE HEADER — centered, max-w-3xl]
  [Engineering]  ← category badge

  How We Cut Our Build Time in Half Using Turborepo

  "A deep-dive into how the Acme engineering team migrated a 200-module
   monorepo and went from 18-minute CI builds to under 9."

  [Avatar] Jane Liu  ·  Feb 19, 2026  ·  8 min read
  [Share on 𝕏]  [Share on LinkedIn]  [🔗 Copy link]

  ┌────────────────────────────────────────────────────────────┐
  │                  [Hero image — 16:9]                       │
  │  Caption: The Acme CI pipeline before and after migration. │
  └────────────────────────────────────────────────────────────┘

[TWO-COLUMN — TOC left, article right]

[STICKY TOC — left sidebar]          [ARTICLE BODY — max 76ch]
  Table of Contents
  1. The problem                        ## The problem
  2. Why Turborepo          (active ●)  Paragraph text... lorem...
  3. Migration steps
  4. Results                            > Blockquote with left border
  5. Lessons learned
                                        ```typescript
                                        // Code block with copy button
                                        const pipeline = buildGraph();
                                        ```

                                        ℹ️ [INFO CALLOUT]
                                        Tip: You can run this locally...

                                        ## Migration steps
                                        1. Step one...
                                        2. Step two...

[AUTHOR BIO CARD]
  ┌────────────────────────────────────────────────────────────┐
  │  [Avatar 64px]  Jane Liu                                   │
  │                 Staff Engineer at Acme. Writes about       │
  │                 build systems, DX, and distributed teams.  │
  │                 [𝕏 Twitter]  [GitHub]  [LinkedIn]          │
  └────────────────────────────────────────────────────────────┘

[NEWSLETTER CTA — soft bg]
  Enjoyed this article? Get more like it in your inbox.
  [your@email.com__________]  [Subscribe]

[RELATED ARTICLES]
  More from the blog
  [Card: thumb + category + title + date]
  [Card: thumb + category + title + date]
  [Card: thumb + category + title + date]

[FOOTER]