feat: 头部搜索入口、首页精选更新、内容清理与标题宽屏优化

README.en.md

@@ -1,8 +1,8 @@
 # MyBlogDoc
 
-[中文](README.md) · [Personal blog](https://yihuiblog.top/) · [Chronicle design reference](https://chronicle-83v.pages.dev/)
+[中文](README.md) · [Personal blog](https://yihuiblog.top/)
 
-A personal frontend knowledge base and blog, statically generated with Astro from the original Markdown articles. The interface follows Chronicle's editorial layout, with article lists, category filters, search, and reading pages. Chinese and English interface translations share the same article content; switching languages does not translate the articles.
+A personal frontend knowledge base and blog, statically generated with Astro from the original Markdown articles. The interface uses an editorial layout, with article lists, category filters, search, and reading pages. Chinese and English interface translations share the same article content; switching languages does not translate the articles.
 
 ## Local development
 

README.md

@@ -1,8 +1,8 @@
 # MyBlogDoc
 
-[English](README.en.md) · [个人博客](https://yihuiblog.top/) · [设计参考 Chronicle](https://chronicle-83v.pages.dev/)
+[English](README.en.md) · [个人博客](https://yihuiblog.top/)
 
-个人前端知识库与博客，使用 Astro 静态生成，继续以原来的 Markdown 文章为内容源。界面参照 Chronicle 的编辑部式排版，包含文章列表、分类筛选、搜索和文章阅读页；提供中文、英文界面，切换语言不会翻译文章正文。
+个人前端知识库与博客，使用 Astro 静态生成，继续以原来的 Markdown 文章为内容源。界面采用编辑部式排版，包含文章列表、分类筛选、搜索和文章阅读页；提供中文、英文界面，切换语言不会翻译文章正文。
 
 ## 本地开发
 

src/TipTap/编辑器加载快了 60%：我们是怎么把 1.5MB 的"赘肉"切掉的.md

@@ -1,19 +1,3 @@
-## 候选标题（5 个）
-
-**① 编辑器加载快了 60%：我们是怎么把 1.5MB 的"赘肉"切掉的**
-
-**② 代码级拆解：一个富文本编辑器的"核心瘦身 + 插件外挂"架构实战**
-
-**③ 告别"全家桶"式打包——从 B 站编辑器看前端重型模块的按需加载方案**
-
-**④ 你的编辑器为什么慢？一文讲透 Addon 架构的设计哲学与工程细节**
-
-**⑤ dynamic import + globalThis + preload：大厂编辑器的三板斧瘦身术**
-
----
-
-## 正文
-
 一个富文本编辑器，功能越做越多：画板（Excalidraw，~800KB）、思维导图（MindMap，~200KB）、流程图（Mermaid，~500KB）、AI 助手（~150KB）……当这些功能全部打进一个 bundle，用户还没敲第一个字，浏览器就已经在下载 **1.5MB 以上的"死重"**——而绝大多数用户可能一辈子都不会点开画板。
 
 这不是功能的问题，**是加载策略的问题**。

src/components/ArticlePage.astro

@@ -37,7 +37,7 @@ const editUrl = `https://github.com/MoMeak9/MyBlogDoc/edit/main/src/${post.id.sp
   post={post}
 >
   <header class="article-heading">
-    <div class="container narrow">
+    <div class="container">
       <nav
         class="article-breadcrumbs"
         aria-label={locale === "en" ? "Breadcrumb" : "面包屑导航"}

src/components/HomePage.astro

@@ -16,9 +16,15 @@ const base = normalizeBase(import.meta.env.BASE_URL);
 const href = (path = "") => localePath(path, locale, base);
 const posts = (await getPosts()).filter((post) => !post.empty);
 const subjects = [...new Set(posts.map((post) => post.id.split("/")[0]))];
+const picks = [
+  "TipTap/Tiptap 深度教程（四）：终极定制 - 从零创建你的专属扩展",
+  "翻译/「译」React 服务器组件 (RSCs) 的深入分析",
+  "学习路径/JavaScript完整指南",
+];
+const highlights = picks.flatMap((id) => posts.filter((post) => post.id === id));
 const featured = [
-  ...posts.filter((post) => post.featured),
-  ...posts.filter((post) => !post.featured),
+  ...highlights,
+  ...posts.filter((post) => !highlights.includes(post)),
 ].slice(0, 3);
 const categories = new Map<string, number>();
 for (const post of posts)

src/i18n.ts

@@ -130,7 +130,6 @@ const zh = {
   emailTitle: "邮件",
   openSource: "开源项目",
   feedback: "意见反馈",
-  designCredit: "设计参考 Chronicle",
   pageNotFound: "页面未找到",
 };
 const en: typeof zh = {
@@ -272,7 +271,6 @@ const en: typeof zh = {
   emailTitle: "Email",
   openSource: "Open source",
   feedback: "Feedback",
-  designCredit: "Design inspired by Chronicle",
   pageNotFound: "Page not found",
 };
 export const ui = (locale: Locale = "zh") => (locale === "en" ? en : zh);

src/layouts/BaseLayout.astro

@@ -210,6 +210,13 @@ const nav = [
           >
             {locale === "zh" ? "EN" : "中文"}
           </a>
+          <a
+            class="header-search icon-button"
+            href={`${href("blog")}#article-search`}
+            aria-label={t.search}
+          >
+            <Icon name="search" size={17} />
+          </a>
           <button
             class="theme-toggle icon-button"
             type="button"
@@ -302,16 +309,7 @@ const nav = [
         </div>
         <div class="footer-bottom">
           <p>© {new Date().getUTCFullYear()} Yihui.</p>
-          <p>
-            {t.builtWith} <span aria-hidden="true">·</span>{" "}
-            <a
-              href="https://chronicle-83v.pages.dev/"
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              {t.designCredit}
-            </a>
-          </p>
+          <p>{t.builtWith}</p>
         </div>
       </div>
     </footer>

src/styles/global.css

@@ -1,4 +1,4 @@
-/* Chronicle's editorial proportions and two color palettes. */
+/* Editorial proportions and two color palettes. */
 .sr-only {
   position: absolute;
   width: 1px;

src/前端杂文/Google 核心 Web 指标.md

@@ -69,7 +69,6 @@ FID 测量从用户第一次与页面交互（例如当他们单击链接、点
 ### Performance API
 
 这个是HTML5新增的API。早期看见有些开发者在页面加载时，在`<head>`里面添加上一段获取时间戳的代码，然后在开始获取数据的时候在获取一次时间戳，相减来计算白屏时间。这其实是一种非常麻烦的做法，并不友好。因此W3C后面推出了Performance这个API来帮助开发者查看这些性能时间点。
-更多内容可以看我的另一篇文章，待更新......
 
 > **参考：**
 >

src/外文翻译/Islands Architecture 孤岛架构.md

@@ -1,8 +1,3 @@
-> category:
->   - 前端
->   - JavaScript
->   - 外文翻译
-
 # Islands Architecture 孤岛（岛屿）架构
 
 > 原文：https://www.patterns.dev/vanilla/islands-architecture

src/外文翻译/URL 设计最佳实践.md

@@ -1,8 +1,3 @@
-> category:
->   - 前端
->   - JavaScript
->   - 外文翻译
-
 > 原文：https://blog.jim-nielsen.com/2023/examples-of-great-urls/
 >
 > 标题：Examples of Great URL Design

src/日本/行程.md

@@ -1,5 +1,3 @@
-备选：五一假期，请2
-
 ## Day 1 东京
 
 

tests/build.test.mjs

@@ -296,6 +296,27 @@ test("absolute local navigation and media URLs resolve to published files", (t)
   );
 });
 
+test("home pages feature the curated highlight articles in both locales", () => {
+  const picks = [
+    "TipTap/Tiptap 深度教程（四）：终极定制 - 从零创建你的专属扩展",
+    "翻译/「译」React 服务器组件 (RSCs) 的深入分析",
+    "学习路径/JavaScript完整指南",
+  ];
+  for (const locale of ["zh", "en"]) {
+    const html = artifact(join(locale === "en" ? "en" : "", "index.html"));
+    const links = [...html.matchAll(/<a\b[^>]*>/gi)].map((match) =>
+      attributes(match[0]),
+    );
+    for (const id of picks) {
+      const href = localizedRoute(`posts/${encodeId(id)}`, locale);
+      assert.ok(
+        links.some((link) => link.href === href),
+        `${locale} home page must feature ${id}.`,
+      );
+    }
+  }
+});
+
 test("sitemaps include every public locale page and omit errors and legacy redirects", () => {
   const index = artifact("sitemap-index.xml");
   assert.match(index, /<sitemapindex\b/);