Fix syntax highlighting, add og meta/404/sitemap, appendix intros, title typos

Author: turinglambdaai

app/book/[part]/chapter/[slug]/page.tsx

@@ -7,6 +7,11 @@ import ChapterNav from '@/components/ChapterNav'
 import remarkGfm from 'remark-gfm'
 import rehypeSlug from 'rehype-slug'
 import rehypeHighlight from 'rehype-highlight'
+import type { PluggableList } from 'unified'
+// highlight.js ships no racket grammar; scheme shares the s-expression shape.
+import scheme from 'highlight.js/lib/languages/scheme'
+
+const mdxPlugins: PluggableList = [rehypeSlug, [rehypeHighlight, { languages: { racket: scheme } }]]
 
 export function generateStaticParams() {
   return getAllChapterPaths().map(p => ({ part: p.part, slug: p.slug }))
@@ -42,7 +47,7 @@ export default async function ChapterPage({ params }: { params: { part: string;
           options={{
             mdxOptions: {
               remarkPlugins: [remarkGfm],
-              rehypePlugins: [rehypeSlug, rehypeHighlight],
+              rehypePlugins: mdxPlugins,
             },
           }}
         />

app/book/preface/page.tsx

@@ -7,6 +7,8 @@ import { mdxComponents } from '@/app/mdx-components'
 import remarkGfm from 'remark-gfm'
 import rehypeSlug from 'rehype-slug'
 import rehypeHighlight from 'rehype-highlight'
+// highlight.js ships no racket grammar; scheme shares the s-expression shape.
+import scheme from 'highlight.js/lib/languages/scheme'
 
 export const metadata = {
   title: '写在前面 | Racket 编程入门',
@@ -31,7 +33,7 @@ export default function PrefacePage() {
           options={{
             mdxOptions: {
               remarkPlugins: [remarkGfm],
-              rehypePlugins: [rehypeSlug, rehypeHighlight],
+              rehypePlugins: [rehypeSlug, [rehypeHighlight, { languages: { racket: scheme } }]],
             },
           }}
         />

app/globals.css

@@ -24,18 +24,38 @@
 ::-webkit-scrollbar-thumb:hover { background: #b8b3a8; }
 
 /* Code blocks */
-pre {
-  position: relative;
-  border: 1px solid #E8E5DE;
-}
 pre code {
   display: block;
   line-height: 1.7;
 }
 
-/* Racket syntax highlighting */
-.language-racket .keyword { color: #D97757; }
-.language-racket .string { color: #5E8C4A; }
-.language-racket .number { color: #8B6BAE; }
-.language-racket .comment { color: #A39E93; font-style: italic; }
-.language-racket .function { color: #3A7CA5; }
+/* Inline code chips (outside <pre>) — block code inside <pre> stays bare */
+.prose :not(pre) > code {
+  background: #F5F3EE;
+  color: #C4683F;
+  padding: 0.15em 0.375em;
+  border-radius: 0.25rem;
+  font-size: 0.875em;
+  font-family: var(--font-mono);
+}
+.prose pre > code {
+  background: transparent;
+  padding: 0;
+  border-radius: 0;
+  font-size: inherit;
+  color: inherit;
+}
+
+/* Syntax highlighting (highlight.js classes emitted by rehype-highlight) */
+.hljs-keyword, .hljs-selector-tag, .hljs-built_in, .hljs-symbol { color: #E08A67; }
+.hljs-string, .hljs-regexp { color: #97B87A; }
+.hljs-number, .hljs-literal { color: #B48ED8; }
+.hljs-comment, .hljs-quote { color: #8A857A; font-style: italic; }
+.hljs-title, .hljs-name { color: #7AADD3; }
+.hljs-type, .hljs-class { color: #63B0B0; }
+.hljs-attr, .hljs-attribute, .hljs-variable, .hljs-template-variable { color: #D9A967; }
+.hljs-section, .hljs-bullet { color: #E08A67; }
+.hljs-meta, .hljs-meta .hljs-keyword { color: #A39E93; }
+.hljs-operator, .hljs-punctuation { color: #C7C2B8; }
+.hljs-emphasis { font-style: italic; }
+.hljs-strong { font-weight: 700; }

app/layout.tsx

@@ -2,8 +2,22 @@ import type { Metadata } from 'next'
 import './globals.css'
 
 export const metadata: Metadata = {
+  metadataBase: new URL('https://racket.jrtx.site'),
   title: 'Racket 编程入门',
   description: '从零基础到独立开发应用，全面掌握 Racket 编程。',
+  openGraph: {
+    type: 'website',
+    siteName: 'Racket 编程入门',
+    title: 'Racket 编程入门',
+    description: '从零基础到独立开发应用，全面掌握 Racket 编程。',
+    images: [{ url: '/og.jpg', width: 1200, height: 630, alt: 'Racket 编程入门' }],
+  },
+  twitter: {
+    card: 'summary_large_image',
+    title: 'Racket 编程入门',
+    description: '从零基础到独立开发应用，全面掌握 Racket 编程。',
+    images: ['/og.jpg'],
+  },
 }
 
 export default function RootLayout({

app/mdx-components.tsx

@@ -26,21 +26,14 @@ export const mdxComponents: MDXComponents = {
     <ol className="text-sand-800 mb-5 space-y-2 list-decimal pl-6 marker:text-sand-400">{children}</ol>
   ),
   li: ({ children }) => <li className="leading-[1.8] pl-1">{children}</li>,
-  code: ({ children, className }) => {
-    const isBlock = className?.includes('language-')
-    if (isBlock) {
-      return (
-        <pre className="bg-sand-900 text-sand-100 rounded-lg p-5 overflow-x-auto text-sm my-8 font-mono leading-[1.7]">
-          <code className={className}>{children}</code>
-        </pre>
-      )
-    }
-    return (
-      <code className="bg-sand-100 text-accent-600 px-1.5 py-0.5 rounded text-[0.875em] font-mono">
-        {children}
-      </code>
-    )
-  },
+  pre: ({ children }) => (
+    <pre className="!bg-sand-900 !text-sand-100 !rounded-lg !p-5 overflow-x-auto !text-sm my-8 font-mono !leading-[1.7] border border-sand-800">
+      {children}
+    </pre>
+  ),
+  code: ({ children, className }) => (
+    <code className={className}>{children}</code>
+  ),
   blockquote: ({ children }) => (
     <blockquote className="border-l-2 border-accent-400 pl-4 py-2 my-8 text-sand-600 italic">
       {children}

app/not-found.tsx

@@ -0,0 +1,33 @@
+import Link from 'next/link'
+
+export const metadata = {
+  title: '页面不存在 | Racket 编程入门',
+}
+
+export default function NotFound() {
+  return (
+    <div className="min-h-screen bg-sand-50 flex flex-col items-center justify-center px-6 text-center">
+      <p className="text-xs tracking-widest uppercase text-sand-500 mb-4">404</p>
+      <h1 className="text-3xl font-bold text-sand-900 tracking-tight mb-4">
+        这一页不存在
+      </h1>
+      <p className="text-sand-600 mb-10 max-w-sm leading-relaxed">
+        你找的章节可能换了地址，也可能还没写出来。
+      </p>
+      <div className="flex items-center gap-4">
+        <Link
+          href="/"
+          className="inline-flex items-center px-5 py-2.5 bg-sand-900 text-sand-50 rounded-lg text-sm font-medium hover:bg-sand-800 transition-colors"
+        >
+          回到首页
+        </Link>
+        <Link
+          href="/book/part-1/chapter/1"
+          className="inline-flex items-center px-5 py-2.5 border border-sand-300 text-sand-700 rounded-lg text-sm font-medium hover:bg-sand-100 transition-colors"
+        >
+          从第 1 章开始
+        </Link>
+      </div>
+    </div>
+  )
+}

app/sitemap.ts

@@ -0,0 +1,19 @@
+import type { MetadataRoute } from 'next'
+import { getParts, getPreface } from '@/lib/content'
+
+const BASE = 'https://racket.jrtx.site'
+
+export default function sitemap(): MetadataRoute.Sitemap {
+  const entries: MetadataRoute.Sitemap = [{ url: BASE }]
+
+  const preface = getPreface()
+  if (preface) entries.push({ url: `${BASE}${preface.href}` })
+
+  for (const part of getParts()) {
+    entries.push({ url: `${BASE}/book/${part.id}` })
+    for (const ch of part.chapters) {
+      entries.push({ url: `${BASE}/book/${part.id}/chapter/${ch.slug}` })
+    }
+  }
+  return entries
+}

content/appendix/1.mdx

@@ -1,5 +1,7 @@
 # Noise 精读（一）：三层架构与异步模型
 
+> 想在 iOS 或 macOS 应用里嵌入一个像 Racket 这样的 Lisp 运行时？这一篇从 Noise 的三层架构与异步模型讲起，为整个系列搭好骨架。
+
 你是否想过在你的 iOS 或 macOS 应用中嵌入一个像 Racket 这样的 Lisp 运行时？或者，你是否在使用其他语言（如 Python, Rust, Go）时，想要引入某种脚本语言的能力，却苦于不知道如何优雅地实现跨语言交互？
 
 [Noise](https://github.com/Bogdanp/Noise) 项目提供了一个非常精彩的范例。它不仅仅是一个简单的 FFI 绑定，更是一套完整的、类型安全的、支持异步并发的 **嵌入式后端架构**。

content/appendix/10.mdx

@@ -1,5 +1,7 @@
 # Racket 编译完全指南
 
+> 从源代码编译 Racket：Linux、macOS、Windows 三平台的完整步骤，以及编译过程中值得看懂的那些实现细节。
+
 作为一名开发者，从源代码编译 Racket 不仅能让你获得最新的功能和性能优化，还能深入了解这个强大的语言实现。无论你是在 Linux、macOS 还是 Windows 上，这篇指南都会带你一步步完成编译过程。
 
 ## 仓库结构

content/appendix/11.mdx

@@ -1,5 +1,7 @@
 # Racket 语言实现剖析
 
+> 跳过语法和生态，直接看一门语言的实现本身：Racket 从 Chez Scheme 继承了什么，编译管线与运行时如何协作。
+
 很多语言在介绍时都会强调语法、范式、库生态，但当你真正开始研究一门语言的 **实现本身** 时，关注点会自然转向另一些问题：
 
 > 这门语言的 “ 本体 ” 是什么？