feat(blog): Add DigestEntry component and migrate digest series to MDX (#89)

- Create DigestEntry component for structured article entries with
  title, href, category, and MDX content support
- Migrate all 22 digest files (001-022) from Hugo shortcode format to
  DigestEntry component format
- Add Image component alias to MDXComponents for markdown image support
- Create reading-digest-zh.mdx series page
- Extract source URLs and categories from original Hugo files

The DigestEntry component provides a card-style layout for curated
article entries with external link indicators and category badges.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-authored-by: Claude Opus 4.5 <noreply@anthropic.com>

Author: planeyang

apps/blog/components/editorial/DigestEntry.tsx

@@ -0,0 +1,87 @@
+'use client';
+
+import * as React from 'react';
+import { cn } from '@/lib/utils';
+
+export interface DigestEntryProps {
+  /** Article title */
+  title: string;
+  /** Source URL */
+  href: string;
+  /** Category tag */
+  category?: string;
+  /** Child content (MDX prose) */
+  children?: React.ReactNode;
+  /** Additional CSS classes */
+  className?: string;
+}
+
+/**
+ * DigestEntry - Card component for digest article entries
+ *
+ * Displays an article with:
+ * - Linked title (h3 level, but rendered as styled div to avoid TOC)
+ * - Category badge
+ * - Full prose content as children
+ */
+export function DigestEntry({
+  title,
+  href,
+  category,
+  children,
+  className,
+}: DigestEntryProps) {
+  const isExternal = href.startsWith('http');
+
+  return (
+    <article
+      className={cn(
+        'digest-entry',
+        'p-6 my-6',
+        'border border-border-muted',
+        'bg-ground-primary',
+        className
+      )}
+    >
+      {/* Title as link */}
+      <div className="mb-3 pb-2 border-b border-border-muted">
+        <a
+          href={href}
+          target={isExternal ? '_blank' : undefined}
+          rel={isExternal ? 'noopener noreferrer' : undefined}
+          className={cn(
+            'font-serif text-figure-primary type-h3',
+            'hover:text-link transition-colors',
+            'hover:underline underline-offset-4 decoration-1'
+          )}
+        >
+          {title}
+          {isExternal && (
+            <span
+              className="inline-block ml-2 text-figure-muted text-base"
+              aria-hidden="true"
+            >
+              ↗
+            </span>
+          )}
+        </a>
+      </div>
+
+      {/* Category badge */}
+      {category && (
+        <div className="mb-4">
+          <span className="inline-flex items-center justify-center font-medium text-label px-2 py-0.5 rounded bg-ground-tertiary text-figure-secondary">
+            {category}
+          </span>
+        </div>
+      )}
+
+      {/* Content */}
+      {children && (
+        <div className="digest-entry-content prose prose-sm max-w-none">
+          {children}
+        </div>
+      )}
+    </article>
+  );
+}

apps/blog/components/editorial/index.ts

@@ -11,3 +11,6 @@ export type { FeaturedCardProps } from './FeaturedCard';
 
 export { EditorialGrid } from './EditorialGrid';
 export type { EditorialGridProps } from './EditorialGrid';
+
+export { DigestEntry } from './DigestEntry';
+export type { DigestEntryProps } from './DigestEntry';

apps/blog/components/layout/SiteHeader.tsx

@@ -37,7 +37,6 @@ function useLocalizedNav() {
 
   const links: NavLink[] = [
     { href: `${basePath}/essays`, label: translate(language, 'nav.essays') },
-    { href: `${basePath}/periodics`, label: translate(language, 'nav.periodics') },
     { href: `${basePath}/series`, label: translate(language, 'nav.series') },
     { href: `${basePath}/about`, label: translate(language, 'nav.about') },
   ];

apps/blog/components/mdx/MDXComponents.tsx

@@ -24,7 +24,7 @@ import {
 import { Note, Marginnote, Reference, References, WideBlock, TimelineMap } from '../content';
 
 // Editorial components for magazine-style layouts
-import { EditorialGrid, EditorialSection, FeaturedCard, Item } from '../editorial';
+import { EditorialGrid, EditorialSection, FeaturedCard, Item, DigestEntry } from '../editorial';
 
 // Vision100 subway map visualization
 import { Vision100Map } from '../vision100';
@@ -264,6 +264,16 @@ export function getMDXComponents(): MDXComponentMap {
     Figure,
     FigureImage,
 
+    // Image component alias (for compatibility with common MDX patterns)
+    Image: ({ src, alt }: { src?: string; alt?: string }) => {
+      if (!src) return null;
+      return (
+        <Figure caption={alt} className="my-6">
+          <FigureImage src={src} alt={alt || ''} />
+        </Figure>
+      );
+    },
+
     // Tabs
     Tabs,
     TabsList,
@@ -287,6 +297,7 @@ export function getMDXComponents(): MDXComponentMap {
     EditorialSection,
     FeaturedCard,
     Item,
+    DigestEntry,
   };
 }
 

apps/blog/content/periodics/digest-001.mdx

@@ -10,118 +10,121 @@ lang: "zh"
 
 ## 文章
 
-
-### Birds do have a brain cortex—and think
-
+<DigestEntry title="Birds do have a brain cortex—and think" href="https://science.sciencemag.org/content/369/6511/1567" category="神经科学">
 
 这篇Science评论从以下两篇Science文章出发，更新了我们对于鸟类的大脑结构和认知功能的看法。
+
 - [A neural correlate of sensory consciousness in a corvid bird](https://science.sciencemag.org/content/369/6511/1626)
 - [A cortex-like canonical circuit in the avian forebrain](https://science.sciencemag.org/content/369/6511/eabc5534)
 
-我们对于哺乳动物大脑的研究已经比较丰富了，一般认为很多认知功能都是由大脑皮层实现的，而皮层下结构往往只是负责一些生理功能和比较初级的认知加工。相比之下，我们对于鸟类大脑的结构和功能的还不是很清楚。之前我们对于鸟类大脑结构的理解一直没有找到“大脑皮层”这样类似的结果，很多脑区在比较生物学上都被对应到了哺乳动物比较原始的脑区和皮层下结构。所以我们以为鸟类的认知功能也会比较简单。但是，近年越来越多的神经科学研究发现鸟类可以完成很多复杂的认知任务，所以神经科学家逐渐认为鸟类具有比较高级的认知过程。这几篇文章旨在更新我们对于鸟类大脑结构和功能的看法，让我们认识到鸟类大脑确实有与哺乳动物大脑皮层相类似的结构，而这些大脑结构为鸟类的高级认知提供了神经基础。
+我们对于哺乳动物大脑的研究已经比较丰富了，一般认为很多认知功能都是由大脑皮层实现的，而皮层下结构往往只是负责一些生理功能和比较初级的认知加工。相比之下，我们对于鸟类大脑的结构和功能的还不是很清楚。之前我们对于鸟类大脑结构的理解一直没有找到"大脑皮层"这样类似的结果，很多脑区在比较生物学上都被对应到了哺乳动物比较原始的脑区和皮层下结构。所以我们以为鸟类的认知功能也会比较简单。但是，近年越来越多的神经科学研究发现鸟类可以完成很多复杂的认知任务，所以神经科学家逐渐认为鸟类具有比较高级的认知过程。这几篇文章旨在更新我们对于鸟类大脑结构和功能的看法，让我们认识到鸟类大脑确实有与哺乳动物大脑皮层相类似的结构，而这些大脑结构为鸟类的高级认知提供了神经基础。
 
+</DigestEntry>
 
-### How I got into linguistics, and what I got out of it
+<DigestEntry title="How I got into linguistics, and what I got out of it" href="https://www.ling.upenn.edu/~wlabov/HowIgot.html" category="回忆录">
 
 社会语言学家William Labov讲述了他的研究生涯：他如何成为一个社会语言学家，他在过去的这些年里研究了哪些课题，这些课题是如何转变的，以及他的研究如何对社会产生影响，以及他如何看待自己的研究生涯。
 
 William Labov在新泽西长大，他很早就注意到不同的社区（纽约和新泽西）的语言会有非常明显的特点，这个兴趣后来成为了他研究的方向。他提到了几个特别有意思的经历。
 
-其一，他在哥伦比亚大学期间去Harlem社群研究黑人所使用的语言系统。之前，美国社会一直认为黑人智力水平天生差，其语言系统也是土土的且缺乏逻辑。后来，William Labov写了一篇题为《The Logic of Nonstandard English》的论文，说明黑人社群自身的语言方式能够充分表达逻辑思维，也不会影响学习。所以他建议用黑人社群自己熟悉的语言系统和表达方式来教黑人学生知识，而不是套用白人的所谓“更有逻辑的语言系统”来教授知识。但是这个观点等了几十年才被黑人社群逐渐接受并应用。
+其一，他在哥伦比亚大学期间去Harlem社群研究黑人所使用的语言系统。之前，美国社会一直认为黑人智力水平天生差，其语言系统也是土土的且缺乏逻辑。后来，William Labov写了一篇题为《The Logic of Nonstandard English》的论文，说明黑人社群自身的语言方式能够充分表达逻辑思维，也不会影响学习。所以他建议用黑人社群自己熟悉的语言系统和表达方式来教黑人学生知识，而不是套用白人的所谓"更有逻辑的语言系统"来教授知识。但是这个观点等了几十年才被黑人社群逐渐接受并应用。
 
 其二，他通过判断不同社群口音的不同来为一个嫌疑人做无罪辩护。1987年，泛美航空认为一名运货员Paul Prinzivalli多次通过电话给泛美航空制造炸弹威胁。泛美航空的证据是**这个运货员的声音听起来像电话录音里面的那个人**。结果William Labov一听录音，就知道录音里面那个人是个波士顿人，而Prinzivalli是个纽约人。William Labov向法庭提交了关于不同地区口音的各种量化标准和证据来说明这两地口音之间的差别，从而洗脱了Prinzivalli的嫌疑。
 
 最后，摘抄一下William Labov对成功的看法：
 
 > What is success? If you get to be 70 years old, and you can look back without feeling that you've wasted your time, you've been successful.
 
+</DigestEntry>
 
-### Why is Snowflake so Valuable?
-
+<DigestEntry title="Why is Snowflake so Valuable?" href="https://www.freshpaint.io/blog/why-is-snowflake-so-valuable" category="商业分析">
 
 Snowflake最近上市了，而且股价非常高。我挺好奇为什么Snowflake这么值钱的，这篇文章就分析了这个问题。基本的因素包括：
+
 - 成长速度快
 - 留存率高
 - 用户满意度高
 - 订单平均价值高，且有好几个大客户
 
 **这篇文章值得细细品味**
 
+</DigestEntry>
 
-### Six Figures in 6 days
-
+<DigestEntry title="Six Figures in 6 days" href="https://tr.af/6" category="分享经验">
 
 作者分享了他的iOS图标包六天卖了10万刀的经验。作者喜欢画图标，早在多年前作者就画了一些手机APP的图标。最近iOS突然允许用户定制自己的APP的图标（虽然好像安卓系统早就可以了），于是作者第一时间把自己之前做的图标和新做的图标打包放在了网上卖，定价十几刀，然后在Twitter上发布了这个图标包。几天后，Youtube红人MKBHD在视频中推荐了了作者的图标包，结果作者这个图标包在网上大卖，6天卖了10万美元。
 
 我的体会是：
+
 - 机会是给有准备的人的。（作者之前就已经绘制了各种图标，只是没卖出去。）
 - 行动要快，想到了就要去做。（作者看到iOS更新之后，第一时间更新了图标包，并放了出去。）
 - 要记得分享。（作者在Twitter上发布了他的图标包，这是唯一个信息来源。所以社交网络还是挺重要的。）
 - 定价不要太低。（作者这个包定价十几刀，他说如果定价3-5刀的话，就根本卖不了这个总价。）
 - 要有大V带货。（作者的销售量暴增是在MKBHD推荐之后的事情。）
 - 机会总是有的，要保持积累。（作者放在六年前，没有什么收获；等了六年，机会来了，一下子大卖。）
 
+</DigestEntry>
 
-### Bringing the Mona Lisa Effect to Life with TensorFlow.js
-
+<DigestEntry title="Bringing the Mona Lisa Effect to Life with TensorFlow.js" href="https://blog.tensorflow.org/2020/09/bringing-mona-lisa-effect-to-life-tensorflow-js.html" category="技术展示">
 
 作者用Tensorflow-js写了一个让蒙娜丽莎活起来的小应用。读完了整个文章以后，我感觉这个代码难度并不是很高，值得自己去尝试！这个展示真的挺好玩的，我决定把展示图片放在这里。(作者分享了代码，代码仓库[在这里](https://github.com/emilyxxie/mona_lisa_eyes))
 
-![monalisa](/images/monalisa.gif)
-
+<Figure caption="Mona Lisa Effect Demo">
+  <FigureImage src="/images/monalisa.gif" alt="Mona Lisa Effect Demo" />
+</Figure>
 
-### The Art of PNG Glitch
+</DigestEntry>
 
-这篇文章教你如何制造png故障。这是一篇通过制造问题来了解png编码格式的教学文章，典型的Learning by Hacking。文章前半段是介绍如何产生各种效果的png故障，然后后半段是仔细分析各种故障背后的原理。[这篇文章值得细细品味]()。
+<DigestEntry title="The Art of PNG Glitch" href="https://ucnv.github.io/pnglitch/" category="技术研究">
 
-## 网络学习
+这篇文章教你如何制造png故障。这是一篇通过制造问题来了解png编码格式的教学文章，典型的Learning by Hacking。文章前半段是介绍如何产生各种效果的png故障，然后后半段是仔细分析各种故障背后的原理。这篇文章值得细细品味。
 
+</DigestEntry>
 
-### What's the difference between a Future and a Promise?
+## 网络学习
 
+<DigestEntry title="What's the difference between a Future and a Promise?" href="https://stackoverflow.com/questions/14541975/whats-the-difference-between-a-future-and-a-promise" category="技术问答">
 
 我最近在写Javascript的时候第一次遇到了Promise这个概念，以及伴随而来的整个异步编程模型。但是我一直搞不清Future和Promise之间的差异，这个算是一个比较好的问答合集。
 
 *题外话：问答系统的好处在于，给定同一个问题，你可以看到不同的人从不同的角度来回答这个问题，或者解释问题中的概念。这本身是有好处的。但是现在中文问答网站有一个很大的问题在于提出的问题非常模糊，然后导致下面的回答其实并不是通过不同的方面来回答同一个问题，而是在完全回答不一样的问题。*
 
+</DigestEntry>
 
-### The Frontend Developer Career Path
-
-
+<DigestEntry title="The Frontend Developer Career Path" href="https://scrimba.com/learn/frontend" category="网络课程">
 
 Scrimba是一个教前端编程的网站，教授的内容也基本上就是和前端开发相关的相关工具和语言。这上面大部分的课程并不长，但是这一款《The Frontend Developer Career Path》是个例外，全长72小时。HackerNews对Scrimba和这个课程的评价好像还不错。我还没有试过，不过看了一下要完成的几个编程项目，还是挺不错的。
 
 *题外话：现在这种类型的网络教学（或者知识付费服务）还挺多的。尤其是国内，现在简直是**卖课成风**。如果课程设计精良、内容丰富，我并不反对卖课。但是我也不希望卖课成了网上唯一分享知识的方法。*
 
+</DigestEntry>
 
-### Hugo Tutorial
-
-
+<DigestEntry title="Hugo Tutorial" href="https://www.youtube.com/playlist?list=PLLAZ4kZ9dFpOnyRlyS-liKL5ReHDcj4G3" category="视频教程">
 
 这是一个简单易懂，内容又相对比较全面的Hugo教程。一共23集，每集大概5-10分钟，2倍速看的话，大概两个小时可以对Hugo的整个系统有一个大概的了解。
 
 Hugo网站也基本上把这个系列的视频当作了主要教学视频，在不同的文档页面上都嵌入了相应的教学视频。不得不说，这个系列讲的挺好的，看完这个视频集合以后再去看Hugo的文档或者去网上搜材料就会简单不少。
 
-## 多媒体
-
+</DigestEntry>
 
-### Hacking with Andrew and Brad: tip.golang.org
+## 多媒体
 
+<DigestEntry title="Hacking with Andrew and Brad: tip.golang.org" href="https://www.youtube.com/watch?v=1rZ-JorHJEY" category="编程实况">
 
 本来我是想找一些视频来学习Go这个语言的，结果找到了这个视频。厉害的程序员不仅仅是程序写得好，写程序相关的工具也用的非常溜啊。我看到了作为码农，跟他们的巨大差距。这个视频不仅仅是讲编程，其实还讲了不少设计方面的想法。
 
-## 工具、技术、展示
-
-
-### kitty - the fast, featureful, GPU based terminal emulator
+</DigestEntry>
 
+## 工具、技术、展示
 
+<DigestEntry title="kitty - the fast, featureful, GPU based terminal emulator" href="https://sw.kovidgoyal.net/kitty/" category="终端模拟">
 
 基于GPU的终端模拟器，用C+Python写的。Kovid Goyal以一己之力写了Cablire和Kitty这两款软件，还是蛮厉害的。很多人说Kitty挺好用的，但是因为我连Tmux/Shell/Vim都用的不太好，还是老老实实用VS Code这种IDE算了。
 
+</DigestEntry>
 
-### Gitalk
-
+<DigestEntry title="Gitalk" href="https://github.com/gitalk/gitalk#gitalk" category="小工具">
 
 Gitalk是一个基于Github Issue和Preact的评论组件。我花了些力气才把这个站点的Gitalk设置成功。整体看起来蛮好用的，感谢作者。
 
+</DigestEntry>