书架页面微调,使用 toml

Author: CatCodeMe

.gitignore

@@ -99,4 +99,10 @@ lighthouse-reports/
 # Font source files (large files, should be downloaded separately)
 fonts-source/*.otf
 !fonts-source/.gitkeep
-public/fonts/N*
+public/fonts/N*
+# Tencent Cloud EdgeOne
+.env
+.edgeone/*
+!.edgeone/project.json
+.tef_dist/*
+  

bun.lock

@@ -40,12 +40,14 @@
     "astro-lightgallery": "^2.0.1",
     "astro-mermaid": "^1.1.0",
     "astro-pure": "1.3.1",
+    "edgeone": "^1.1.20",
     "katex": "^0.16.22",
     "mermaid": "^11.12.1",
     "rehype-katex": "^7.0.1",
     "remark-breaks": "^4.0.0",
     "remark-math": "^6.0.0",
     "sharp": "^0.34.3",
+    "toml": "^3.0.0",
     "typescript": "^5.8.3"
   },
   "devDependencies": {

package.json

@@ -3,14 +3,15 @@ import config from 'virtual:config'
 
 import { getPlatformLabel, hasIcon } from '../../libs/social'
 import { Icon } from '../user'
+import type { IconName } from '../../libs/icons'
 
 const footerConf = config.footer
 const footerLink1 = footerConf.links?.filter(({ pos }) => pos === 1) || []
 
 // Normalize social links data format to unified structure
 // Schema transform may return array or object, handle both cases
 const normalizeSocialLinks = (
-  social: any
+  social: typeof footerConf.social
 ): Array<{ platform: string; label: string; url: string; textOnly: boolean }> => {
   if (!social) return []
 
@@ -131,7 +132,7 @@ const socialLinks = normalizeSocialLinks(footerConf.social)
                     {shouldShowText ? (
                       <span class='text-sm'>{label}</span>
                     ) : (
-                      <Icon name={platform as any} />
+                      <Icon name={platform as IconName} />
                     )}
                   </a>
                 )

packages/pure/components/basic/Footer.astro

@@ -4,7 +4,6 @@
 body {
   font-family: "Noto Serif CJK", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
   font-weight: normal;
-  text-autospace: normal;
 }
 
 @font-face {

public/styles/global.css

@@ -7,7 +7,8 @@ interface Props {
     title: string;
     type: 'book' | 'paper' | 'article';
     status: 'read' | 'reading' | 'to-read';
-    description?: string;
+    description?: string;  // 详细描述，最多300字
+    summary?: string;     // 一句话描述
     rating?: number;
     identifier?: string;
     sourceUrl?: string;
@@ -74,11 +75,13 @@ if (item.type === 'article' && item.sourceUrl) {
       )}
     </div>
 
-    <!-- Description -->
+    <!-- Description - 支持长文本显示，最多300字 -->
     {item.description && (
-      <p class="mt-3 border-l-2 border-border pl-3 text-sm text-muted-foreground">
-        {item.description}
-      </p>
+      <div class="mt-3 border-l-2 border-border pl-3">
+        <p class="text-sm text-muted-foreground leading-relaxed max-h-48 overflow-y-auto pr-2">
+          {item.description}
+        </p>
+      </div>
     )}
 
     <!-- Tags -->

src/components/shelf/ReadingCard.astro

@@ -0,0 +1,39 @@
+# 书架数据
+
+[[items]]
+title = "潜规则"
+type = "book"
+status = "reading"
+summary = "揭示社会运行的潜规则，视角有些狭隘"
+description = """
+这本书里使用了比较多古代的历史案例, 试图揭示社会运行的潜规则, 但是视角有些狭隘,符合成书的 2000 年代初期的政治气候
+"""
+tags = ["历史", "社会学", "中国历史", "政治", "文化", "社会规则", "制度分析"]
+identifier = "9787506331744"
+rating = 7.1
+progress = 20
+startDate = "2025-10-25"
+order = 1
+coverImage = "/src/assets/shelf/1_qian_gui_ze.png"
+sourceUrl = "https://book.douban.com/subject/1025723/"
+links = ["igv0", "o2yb"]
+
+[[items]]
+title = "雪国"
+type = "book"
+status = "read"
+summary = "名不副实的劣质作品"
+description = """
+可能是翻译的问题, 全书读完回味了几天，再来评价这本书, 也还是只能给个5 分。
+除了偶有的几处风景描写、对恋爱脑驹子行为的刻画很生活化之外，没有其他亮点。
+这本书就像川端康成在给你讲他做的梦, 作者本人沉浸其中, 读者感受却是莫名其妙，很难入戏。
+切入点也很奇怪是一个出轨中年人的视角, 文中的火车似乎也有这种隐喻。我个人也很难理解日本艺妓的地位，想来不会很高，给女主这样一种身份，难道是什么恶趣味？
+总之和诺奖级的期待相差太远，目前的 70% 左右的推荐度还是高了
+"""
+tags = ["文学", "日本文学", "小说", "川端康成", "诺贝尔文学奖"]
+rating = 5.3
+progress = 100
+startDate = "2025-11-03"
+order = 2
+coverImage = "/src/assets/shelf/2_xue_guo.png"
+sourceUrl = "https://book.douban.com/subject/1007305/"

src/components/shelf/bookshelf.json

@@ -1,11 +1,13 @@
-import bookshelfData from './bookshelf.json'
+import bookshelfToml from './bookshelf.toml?raw'
+import { parse } from 'toml'
 import { getBlogCollection, sortMDByDate } from 'astro-pure/server'
 
 export type ShelfItem = {
   title: string
   type: 'book' | 'paper' | 'article'
   status: 'read' | 'reading' | 'to-read'
-  description?: string
+  description?: string  // 详细描述，最多300字，用于书卡展示
+  summary?: string      // 一句话描述，用于首页等简短展示场景
   rating?: number
   identifier?: string
   sourceUrl?: string
@@ -18,11 +20,14 @@ export type ShelfItem = {
   endDate?: string
 }
 
+// 解析 TOML 数据
+const bookshelfData = parse(bookshelfToml).items as ShelfItem[]
+
 /**
  * Get all bookshelf items
  */
 export function getAllBookshelfItems(): ShelfItem[] {
-  return bookshelfData as ShelfItem[]
+  return bookshelfData
 }
 
 /**
@@ -99,8 +104,8 @@ export async function getTotalWords(): Promise<number> {
     if (post.body) {
       const text = post.body
         .replace(/<[^>]*>/g, '')
-        .replace(/\[([^\]]*)\]\([^\)]*\)/g, '$1')
-        .replace(/!\[([^\]]*)\]\([^\)]*\)/g, '')
+        .replace(/\[([^\]]*)\]\([^)]*\)/g, '$1')
+        .replace(/!\[([^\]]*)\]\([^)]*\)/g, '')
         .replace(/[#*`_~]/g, '')
         .replace(/\n/g, ' ')
       const chineseChars = text.match(/[\u4e00-\u9fa5]/g) || []

src/components/shelf/bookshelf.toml

@@ -10,15 +10,15 @@ import { MdxRepl, Aside } from '@/custom/components/user';
 import { TabItem, Tabs } from 'astro-pure/user';
 import ReadingCard from '@/components/shelf/ReadingCard.astro';
 
-"书架"页面是一个独立的看板, 用于展示您的阅读轨迹. 其所有内容都通过一个单独的 JSON 文件进行管理, 不依赖于任何文章的 frontmatter.
+"书架"页面是一个独立的看板, 用于展示您的阅读轨迹. 其所有内容都通过一个单独的 TOML 文件进行管理, 不依赖于任何文章的 frontmatter.
 
 ## 1. 核心配置文件
 
-您需要维护的唯一文件是位于项目根目录下 `public/` 文件夹中的 `bookshelf.json`。
+您需要维护的唯一文件是位于 `src/components/shelf/` 目录下的 `bookshelf.toml` 文件。
 
 ## 2. 数据结构详解
 
-该 JSON 文件是一个包含多个“阅读条目”对象的数组. 每个对象代表一张卡片, 其结构如下:
+该 TOML 文件是一个包含多个“阅读条目”对象的数组. 每个对象代表一张卡片, 其结构如下:
 
 <Aside type="note" title="字段说明">
 | 字段 | 类型 | 是否必需 | 说明 |
@@ -40,17 +40,17 @@ import ReadingCard from '@/components/shelf/ReadingCard.astro';
 
 1.  **撰写笔记**: 像往常一样, 在 `src/content/blog/` 目录下创建您的 `.mdx` 笔记文件. 完成文章后, 记下您在 frontmatter 中为它设置的 `slug`.
 
-2.  **打开配置文件**: 打开 `public/bookshelf.json` 文件.
+2.  **打开配置文件**: 打开 `src/components/shelf/bookshelf.toml` 文件.
 
-3.  **添加新条目**: 在 JSON 数组中添加一个新的对象, 代表您读完的这本书. 填写 `title`, `type`, `status` 等信息.
+3.  **添加新条目**: 在 TOML 文件中添加一个新的 `[[items]]` 条目, 代表您读完的这本书. 填写 `title`, `type`, `status` 等信息.
 
 4.  **关联笔记**: 在该对象的 `links` 数组中, 添加您刚刚记下的笔记 `slug` 字符串.
 
 5.  **保存**: 保存文件. 网站下次构建时, 书架页面就会自动更新.
 
 ## 4. 卡片效果预览
 
-下面是不同类型卡片的渲染效果和对应的 JSON 数据结构。
+下面是不同类型卡片的渲染效果和对应的 TOML 数据结构。
 
 ### 书籍 (Book) 示例
 
@@ -70,17 +70,16 @@ import ReadingCard from '@/components/shelf/ReadingCard.astro';
     index={1}
   />
   <Fragment slot="desc">
-  ````json
-  {
-    "title": "人类简史",
-    "type": "book",
-    "status": "read",
-    "description": "从石器时代到人工智能, 一部宏大的人类历史.",
-    "rating": 5,
-    "identifier": "978-7-5086-6074-3",
-    "tags": ["历史", "人类学"],
-    "links": ["sapiens-note-1"]
-  }
+  ````toml
+  [[items]]
+  title = "人类简史"
+  type = "book"
+  status = "read"
+  description = "从石器时代到人工智能, 一部宏大的人类历史."
+  rating = 5
+  identifier = "978-7-5086-6074-3"
+  tags = ["历史", "人类学"]
+  links = ["sapiens-note-1"]
   ````
   </Fragment>
 </MdxRepl>
@@ -103,17 +102,16 @@ import ReadingCard from '@/components/shelf/ReadingCard.astro';
     index={2}
   />
   <Fragment slot="desc">
-  ````json
-  {
-    "title": "Attention Is All You Need",
-    "type": "paper",
-    "status": "read",
-    "description": "Transformer 架构的开山之作, 奠定了现代大语言模型的基础.",
-    "rating": 5,
-    "identifier": "10.48550/arXiv.1706.03762",
-    "tags": ["NLP", "Transformer"],
-    "links": ["transformer-explained"]
-  }
+  ````toml
+  [[items]]
+  title = "Attention Is All You Need"
+  type = "paper"
+  status = "read"
+  description = "Transformer 架构的开山之作, 奠定了现代大语言模型的基础."
+  rating = 5
+  identifier = "10.48550/arXiv.1706.03762"
+  tags = ["NLP", "Transformer"]
+  links = ["transformer-explained"]
   ````
   </Fragment>
 </MdxRepl>
@@ -134,15 +132,14 @@ import ReadingCard from '@/components/shelf/ReadingCard.astro';
     index={3}
   />
   <Fragment slot="desc">
-  ````json
-  {
-    "title": "Working with TCP Sockets",
-    "type": "article",
-    "status": "reading",
-    "description": "一篇关于 TCP Socket 编程的优秀文章.",
-    "sourceUrl": "https://www.google.com",
-    "tags": ["Network", "Socket"]
-  }
+  ````toml
+  [[items]]
+  title = "Working with TCP Sockets"
+  type = "article"
+  status = "reading"
+  description = "一篇关于 TCP Socket 编程的优秀文章."
+  sourceUrl = "https://www.google.com"
+  tags = ["Network", "Socket"]
   ````
   </Fragment>
 </MdxRepl>