chore: add indicator for metadata, add 404 page

Author: Xecades

docs/404.md

@@ -4,4 +4,10 @@ comment: false
 timestamp: false
 ---
 
-TODO: 这里应该加一些东西
+:v{7rem}
+
+<center>你从哪里来，要到哪里去。</center>
+
+:v{8rem}
+
+你可以在左上角搜索，或者点击[这里](/)返回主页。

src/assets/ts/fontawesome.ts

@@ -9,6 +9,7 @@ import {
     faBoxArchive,
     faCaretLeft,
     faCaretRight,
+    faChevronLeft,
     faChevronRight,
     faCode,
     faCube,
@@ -52,5 +53,6 @@ library.add(
     faCode,
     faAtom,
     faBoxArchive,
-    faFlag
+    faFlag,
+    faChevronLeft
 );

src/components/Metadata.vue

@@ -12,6 +12,9 @@ defineProps<{
         <span class="breadcrumb">
             <template v-for="(item, index) in breadcrumb" :key="index">
                 <router-link :to="item.link" class="text">
+                    <span class="back" v-if="breadcrumb.length === 1">
+                        <font-awesome-icon :icon="['fas', 'chevron-left']" />
+                    </span>
                     {{ item.title }}
                 </router-link>
                 <span class="icon" v-if="index !== breadcrumb.length - 1">
@@ -49,13 +52,17 @@ $breadcrumb-hover-color = $theme-color;
     .icon
         width: 20px;
         text-align: center;
-        font-size: 0.7em;
+        font-size: 0.7rem;
         opacity: 0.85;
 
     .text
-        font-size: 0.9em;
+        font-size: 0.9rem;
         transition: color 0.1s ease;
 
+        .back
+            font-size: 0.8rem;
+            opacity: 0.85;
+
         &:hover
             color: $breadcrumb-hover-color;
 </style>

todo.md

@@ -1,23 +1,29 @@
 ## 近期
 
- - ToC 层级关系看起来很怪
+ - ToC 层级关系看起来很怪（align left，参考 obsidian）
  - ToC：默认折叠，hover 或滚动到目标位置展开（？）
 
+ - 标题英文字体要改一下
+ - 桌面端的 root 不要 index comp，换成别的
+ - index comp，hover 范围广一点
+ - migrate comment system
  - 添加 ::active 以提升移动端体验
- - 完成 404 页
- - root 页，标题下面加点东西
+ - root 页，标题下面加点东西（word count）
  - 中文字体 cdn，目前加载太慢了
  - 添加 backtotop 按钮
  - 提供行内左中右布局
  - 提供文字颜色组件
  - 侧边栏（左右），允许折叠 / 滚动
  - 添加从 note 主页回到总主页的按钮
 
+## 灵感
+
+ - 元胞自动机、陨石雨、Gravity
+
 ## 长期
 
  - 搓一个 counter
  - 重新设计 logo
- - 图片懒加载用 ThumbHash / BlurHash（考虑改成一个 API）
  - 搓一个评论系统（考虑使用 Serverless）
  - Status 页面（如果有了后端）
  - CDN