Add blog visual redesign and engagement features

Styled blockquotes with attribution, callout/insight boxes, inline
Lattice flow diagram, source cards, author bio, discussion CTA,
share links (X, LinkedIn, HN), and Giscus comments integration.
Extended markdown renderer with blockquote, callout, and diagram
syntax. Added tests for renderer and new data fields (50 tests, up
from 29). Implements REQ-WEB-009.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: gmoon

package-lock.json

@@ -16,6 +16,7 @@
     "format:check": "prettier --check 'src/**/*.{ts,tsx}' 'scripts/**/*.ts'"
   },
   "dependencies": {
+    "@giscus/react": "^3.1.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
   },

package.json

@@ -87,7 +87,7 @@ describe('pre-rendered blog post', () => {
     const html = readFileSync(file, 'utf-8')
     expect(html).toContain('<noscript>')
     expect(html).toContain('<article')
-    expect(html).toContain(post.author)
+    expect(html).toContain(post.author.name)
   })
 
   it('noscript contains post headings', () => {

scripts/prerender.test.ts

@@ -72,7 +72,7 @@ for (const route of routes) {
       const articleHtml = [
         `<article style="max-width:800px;margin:0 auto;padding:2rem;font-family:sans-serif">`,
         `<h1>${esc(post.title)}</h1>`,
-        `<p><em>${post.date} · ${esc(post.author)}</em></p>`,
+        `<p><em>${post.date} · ${esc(post.author.name)}</em></p>`,
         contentToHtml(post.content),
         `</article>`,
       ].join('')

scripts/prerender.ts

@@ -0,0 +1,21 @@
+import Giscus from '@giscus/react'
+
+export function BlogComments({ slug }: { slug: string }) {
+  return (
+    <Giscus
+      key={slug}
+      repo="forkzero/forkzero.ai"
+      repoId="R_kgDORLeYLw"
+      category="Blog Comments"
+      categoryId="" /* TODO: Enable Discussions, create "Blog Comments" category, get ID from https://giscus.app */
+      mapping="pathname"
+      strict="0"
+      reactionsEnabled="1"
+      emitMetadata="0"
+      inputPosition="top"
+      theme="light"
+      lang="en"
+      loading="lazy"
+    />
+  )
+}

src/components/BlogComments.tsx

@@ -13,11 +13,35 @@ describe('blog posts data integrity', () => {
       expect(post.title).toBeTruthy()
       expect(post.date).toBeTruthy()
       expect(post.author).toBeTruthy()
+      expect(post.author.name).toBeTruthy()
+      expect(post.author.bio).toBeTruthy()
       expect(post.excerpt).toBeTruthy()
       expect(post.content).toBeTruthy()
     }
   })
 
+  it('posts with sources have valid source entries', () => {
+    for (const post of blogPosts) {
+      if (post.sources) {
+        expect(post.sources.length).toBeGreaterThan(0)
+        for (const source of post.sources) {
+          expect(source.name).toBeTruthy()
+          expect(source.author).toBeTruthy()
+          expect(source.description).toBeTruthy()
+          expect(source.url).toMatch(/^https?:\/\//)
+        }
+      }
+    }
+  })
+
+  it('posts with discussionPrompt have non-empty string', () => {
+    for (const post of blogPosts) {
+      if (post.discussionPrompt) {
+        expect(post.discussionPrompt.length).toBeGreaterThan(0)
+      }
+    }
+  })
+
   it('all slugs are unique', () => {
     const slugs = blogPosts.map((p) => p.slug)
     expect(new Set(slugs).size).toBe(slugs.length)

src/data/blog-posts.test.ts

@@ -1,11 +1,27 @@
+export interface BlogAuthor {
+  name: string
+  bio: string
+  github?: string
+  x?: string
+}
+
+export interface BlogSource {
+  name: string
+  author: string
+  description: string
+  url: string
+}
+
 export interface BlogPost {
   id: string
   slug: string
   title: string
   date: string
-  author: string
+  author: BlogAuthor
   excerpt: string
   content: string
+  discussionPrompt?: string
+  sources?: BlogSource[]
 }
 
 export const blogPosts: BlogPost[] = [
@@ -14,9 +30,55 @@ export const blogPosts: BlogPost[] = [
     slug: 'context-engineering-knowledge-layer',
     title: 'Context Engineering Needs a Knowledge Layer',
     date: '2026-02-10',
-    author: 'George Moon',
+    author: {
+      name: 'George Moon',
+      bio: 'Building knowledge coordination tools for human-agent collaboration.',
+      github: 'https://github.com/georgemoon',
+      x: 'https://x.com/georgemoon',
+    },
     excerpt:
       'Context engineering is the term of the moment. But most approaches focus on runtime — what fills the context window for each LLM call. The missing piece is upstream: where does the knowledge come from, and is it still valid?',
+    discussionPrompt:
+      "What's your experience with context engineering? Are your agents working from structured knowledge or just RAG?",
+    sources: [
+      {
+        name: 'Context Engineering',
+        author: 'Andrej Karpathy',
+        description: 'The tweet that popularized the term, reframing prompt engineering as context engineering.',
+        url: 'https://x.com/karpathy/status/1937902205765607626',
+      },
+      {
+        name: 'Effective Context Engineering for AI Agents',
+        author: 'Anthropic',
+        description: 'A comprehensive guide to building agents that use context effectively.',
+        url: 'https://www.anthropic.com/engineering/effective-context-engineering-for-ai-agents',
+      },
+      {
+        name: 'Context Engineering',
+        author: 'Tobi Lutke',
+        description: '"The art of providing all the context for the task to be plausibly solvable by the LLM."',
+        url: 'https://x.com/tobi/status/1935533422589399127',
+      },
+      {
+        name: 'The Rise of Context Engineering',
+        author: 'LangChain',
+        description:
+          'Harrison Chase organizes context engineering into four strategies: write, select, compress, isolate.',
+        url: 'https://blog.langchain.com/the-rise-of-context-engineering/',
+      },
+      {
+        name: 'Context Engineering for AI Agents',
+        author: 'Manus',
+        description: 'Lessons from production — KV-cache hit rate as the most important metric.',
+        url: 'https://manus.im/blog/Context-Engineering-for-AI-Agents-Lessons-from-Building-Manus',
+      },
+      {
+        name: 'Context Engineering Is In, Prompt Engineering Is Out',
+        author: 'Gartner',
+        description: 'The analyst take on why context engineering has replaced prompt engineering.',
+        url: 'https://www.gartner.com/en/articles/context-engineering',
+      },
+    ],
     content: `Context engineering is the term of the moment. Andrej Karpathy, Tobi Lutke, and Gartner all agree: it has replaced prompt engineering as the core discipline for building with LLMs.
 
 But most of the conversation focuses on runtime — what fills the context window for each call. There's a missing layer underneath.
@@ -25,7 +87,10 @@ But most of the conversation focuses on runtime — what fills the context windo
 
 Harrison Chase at LangChain organized context engineering into four strategies: **write** context (persist for later retrieval), **select** context (pull what's relevant), **compress** context (reduce tokens), and **isolate** context (segregate via sub-agents).
 
-Anthropic's guide defines the goal as finding "the smallest set of high-signal tokens that maximize the likelihood of your desired outcome." Manus reported that KV-cache hit rate is their most important metric in production.
+> Anthropic's guide defines the goal as finding "the smallest set of high-signal tokens that maximize the likelihood of your desired outcome."
+> — Anthropic, *Effective Context Engineering for AI Agents*
+
+Manus reported that KV-cache hit rate is their most important metric in production.
 
 These are useful frameworks. They describe the mechanics of filling a context window well. But they share an assumption: that the knowledge you're selecting from is already organized, versioned, and traceable.
 
@@ -48,18 +113,16 @@ This is knowledge coordination, not information retrieval. The relationships bet
 
 This is the problem Lattice solves. It's a knowledge coordination protocol that connects research, strategy, requirements, and implementation into a traversable, version-aware graph.
 
-**Typed nodes** represent different kinds of knowledge:
-- **Sources**: Primary research (papers, articles, data)
-- **Theses**: Strategic claims derived from research
-- **Requirements**: Testable specifications derived from theses
-- **Implementations**: Code that satisfies requirements
+<!-- diagram:lattice-flow -->
 
 **Version-bound edges** connect them:
 - A source *supports* a thesis
 - A thesis *derives* a requirement
 - An implementation *satisfies* a requirement
 
+:::insight
 Every edge records the version of both source and target. When a node changes, edges bound to the old version are flagged as potentially stale. This is drift detection — and it's something no vector store provides.
+:::
 
 ## In practice
 
@@ -84,7 +147,8 @@ Lattice answers: **"What is the structured knowledge that informs those decision
 
 Think of it as the coordination layer underneath. RAG selects *from* knowledge; Lattice ensures that knowledge is organized, versioned, and traceable. The four strategies Chase describes — write, select, compress, isolate — all work better when the underlying knowledge has structure.
 
-As Tobi Lutke put it: context engineering is "the art of providing all the context for the task to be plausibly solvable by the LLM." Lattice makes that context trustworthy.
+> Context engineering is "the art of providing all the context for the task to be plausibly solvable by the LLM." Lattice makes that context trustworthy.
+> — Tobi Lutke
 
 ## Get started
 
@@ -98,16 +162,6 @@ lattice init
 
 - [Lattice on GitHub](https://github.com/forkzero/lattice)
 - [Live dashboard](https://forkzero.ai/reader?url=https://forkzero.github.io/lattice/lattice-data.json)
-- [Forkzero](https://forkzero.ai)
-
----
-
-**Sources:**
-- [Andrej Karpathy on context engineering](https://x.com/karpathy/status/1937902205765607626)
-- [Anthropic: Effective Context Engineering for AI Agents](https://www.anthropic.com/engineering/effective-context-engineering-for-ai-agents)
-- [Tobi Lutke on context engineering](https://x.com/tobi/status/1935533422589399127)
-- [LangChain: The Rise of Context Engineering](https://blog.langchain.com/the-rise-of-context-engineering/)
-- [Manus: Context Engineering for AI Agents](https://manus.im/blog/Context-Engineering-for-AI-Agents-Lessons-from-Building-Manus)
-- [Gartner: Context Engineering Is In, Prompt Engineering Is Out](https://www.gartner.com/en/articles/context-engineering)`,
+- [Forkzero](https://forkzero.ai)`,
   },
 ]