feat: new home page

- new post list structure and style
- move categories page link to postnav, a new navigation component used between homepage and categories page
- search anywhere instruction
- move posts archive page link to top navigation
- some more skeletons!

13 files changed, 164 insertions, 155 deletions

diff --git a/assets/css/components/_pages.scss b/assets/css/components/_pages.scss
index db5f83d5..3bc0de1c 100644
--- a/assets/css/components/_pages.scss
+++ b/assets/css/components/_pages.scss
@@ -1,81 +1,3 @@
-/* posts list */
-
-.posts-list {
-    min-height: 600px;
-
-    &
-        > section:nth-child(1)
-        > ul:nth-child(3)
-        > li.first-post
-        > div
-        > div.posts-title.col-xs-9.col-sm-10
-        > div {
-        align-items: flex-start;
-    }
-
-    .posts-year-section {
-        --section-height: 9rem;
-        min-height: var(--section-height);
-        position: relative;
-        margin: 2rem 0;
-
-        .posts-year-title {
-            font-size: 2rem;
-            font-weight: 900;
-            position: absolute;
-            right: 0;
-            color: var(--text-color);
-            opacity: 0.25;
-            font-size: calc(var(--section-height) / 2);
-            margin: 0;
-            line-height: 1;
-            z-index: -1;
-        }
-    }
-
-    ul {
-        list-style-type: none;
-        padding-inline-start: 0;
-        padding: 0;
-
-        .posts-line {
-            font-size: 1.2rem;
-            margin: 12px 0;
-
-            &.featured-post a.posts-title-link {
-                font-weight: 800;
-                display: block;
-            }
-
-            .posts-date {
-                font-family: var(--mono-font-family);
-                color: var(--secondary-text-color);
-            }
-
-            .posts-categories {
-                font-size: 0.8rem;
-                text-align: center;
-            }
-
-            .posts-category {
-                padding: 3px 0;
-                border: var(--border-color) 2px solid;
-                border-radius: 5px;
-                background-color: var(--background-color);
-            }
-        }
-    }
-
-    hr {
-        border: 1px solid var(--border-color);
-        margin: 3rem 0;
-    }
-}
-
-.posts-subtitle {
-    color: var(--secondary-text-color);
-}
-
 /* post series */
 
 #post-series-list {
@@ -243,6 +165,7 @@ section.taxonomy {
     }
 
     .posts-year-archive {
+        width: 100%;
         .posts-year-title {
             border-bottom: 2px solid var(--border-color);
             padding: 0.5rem 0;
diff --git a/assets/css/components/_postlist.scss b/assets/css/components/_postlist.scss
new file mode 100644
index 00000000..27016245
--- /dev/null
+++ b/assets/css/components/_postlist.scss
@@ -0,0 +1,89 @@
+.posts-list {
+    display: flex;
+    flex-direction: column;
+    margin: 1rem 0;
+    .posts-item {
+        width: 100%;
+        border-bottom: 1px solid var(--border-color);
+        margin: 0.5rem 0;
+        header {
+            width: 100%;
+
+            @media screen and (min-width: 768px) {
+                display: flex;
+                justify-content: space-between;
+            }
+
+            .posts-item-meta {
+                time {
+                    color: var(--secondary-text-color);
+                    font-family: var(--mono-font-family);
+                }
+            }
+
+            .posts-item-category {
+                margin: 0.5rem 0;
+                a {
+                    border: 2px solid var(--border-color);
+                    border-radius: 0.2rem;
+                    padding: 0.2rem 0.5rem;
+                    text-decoration: none;
+                    font-size: 0.8rem;
+                    display: inline-block;
+                }
+            }
+        }
+        .posts-item-summary {
+            h1, h2, h3, h4, h5, h6 {
+                display: none;
+            }
+            font-size: 1em;
+        }
+    }
+}
+
+#posts-list-navigation {
+    ul {
+        position: relative;
+        width: 100%;
+        padding-inline-start: 0;
+        display: flex;
+        list-style: none;
+        gap: 0.2rem;
+        li {
+            flex-shrink: 0;
+            flex-grow: 0;
+            &.active {
+                font-weight: bolder
+            }
+            a {
+                background-color: var(--block-background-color);
+                padding: 0.2rem 0.5rem;
+                text-decoration: none;
+                border-radius: 0.2rem;
+                border: 1px solid var(--background-color);
+                transition: border-color 0.3s ease;
+                &:hover, .active & {
+                    border: 1px solid var(--text-color)
+                }
+            }
+        }
+
+        .search-instruction {
+            font-size: 0.9rem;
+            color: var(--secondary-text-color);
+            margin-left: 0.5rem;
+
+        }
+
+        .list-decoration {
+            position: absolute;
+            right: 0;
+            img {
+                opacity: 0.55;
+                height: 2rem;
+                width: 2rem;
+            }
+        }
+    }
+}
diff --git a/assets/css/components/_variables.scss b/assets/css/components/_variables.scss
index b27babfc..455fa5b9 100644
--- a/assets/css/components/_variables.scss
+++ b/assets/css/components/_variables.scss
@@ -16,7 +16,7 @@
     --serif-font-family: "Noto Serif", "Noto Serif SC", serif;
     --content-font-size: 20px;
 
-    --page-width: 700px;
+    --page-width: 650px;
     --page-header-top: 5rem;
 
     /* pagefind custom css */
diff --git a/assets/css/index.scss b/assets/css/index.scss
index 80bef56e..90a9cb18 100644
--- a/assets/css/index.scss
+++ b/assets/css/index.scss
@@ -3,6 +3,7 @@
 @import "components/markdown";
 @import "components/header";
 @import "components/pages";
+@import "components/postlist";
 @import "components/post";
 @import "components/content";
 @import "components/comment";
diff --git a/hugo.yaml b/hugo.yaml
index 6eb77d70..edf6fa84 100644
--- a/hugo.yaml
+++ b/hugo.yaml
@@ -15,15 +15,15 @@ languages:
     params:
       headTitle: 極客死亡計劃
       nav:
+        - name: 文章
+          link: /posts/
+          target: _self
         - name: 卡片
           link: /cards/
           target: _self
         - name: 书籍
           link: /library/
           target: _self
-        - name: 分类
-          link: /categories/
-          target: _self
         - name: 关于
           link: /about/
           target: _self
diff --git a/i18n/en.yml b/i18n/en.yml
index 6b3573d6..4391c91a 100644
--- a/i18n/en.yml
+++ b/i18n/en.yml
@@ -9,3 +9,4 @@ postPage:
 footer:
   wordCount: '🪦 {{ . }} words are buried here'
   licenseStatement: 'Licensed under {{ . }}'
+searchInstruction: '⌘+K to search anywhere'
diff --git a/i18n/zh.yml b/i18n/zh.yml
index 85079559..38c576e1 100644
--- a/i18n/zh.yml
+++ b/i18n/zh.yml
@@ -9,3 +9,4 @@ postPage:
 footer:
   wordCount: '🪦 {{ . }} 字在这里死去'
   licenseStatement: '以 {{ . }} 协议授权'
+searchInstruction: '⌘+K 在任何地方搜索'
diff --git a/layouts/_default/section.html b/layouts/_default/section.html
index 55de607c..d18246ad 100644
--- a/layouts/_default/section.html
+++ b/layouts/_default/section.html
@@ -1,10 +1,8 @@
 {{ define "main" }}
     <article class="posts">
-      {{ partial "components/breadcrumbs.html" . }}
+      {{ partial "header.html" . }}
       <div id="posts-archive" class="posts-list">
-
         {{ partial "components/heatmap.html" . }}
-
         <!-- Post Archive List -->
         {{ range (where site.RegularPages "Type" "in" site.Params.mainSections).GroupByDate "2006" -}}
           <section class="posts-year-archive">
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index 5b64f3bc..781270f9 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -50,7 +50,8 @@
       </header>
 
       <!-- Post Content -->
-      <div id="post-content" class="post-content markdown-body">
+      <div id="post-content" class="post-content markdown-body"
+          style="view-transition-name: post-content-{{ .File.UniqueID }}">
         {{ if .Params.toc }}
         <div id="toc-container"><div id="toc"></div></div>
         {{ end }}
diff --git a/layouts/_default/taxonomy.html b/layouts/_default/taxonomy.html
index 570d920d..f0dd979a 100644
--- a/layouts/_default/taxonomy.html
+++ b/layouts/_default/taxonomy.html
@@ -1,7 +1,7 @@
 {{ define "main" }}
 <article class="taxonomy">
   {{ partial "header.html" . }}
-
+  {{ partial "components/postnav.html" . }}
   <!-- Display Tags -->
   <section class="taxonomy taxonomy-tags">
       {{ range sort .Site.Taxonomies.tags "Count" "desc" }}
@@ -12,10 +12,6 @@
       {{ end }}
   </section>
 
-    <hr />
-    {{ partial "components/welcome" . }}
-    <hr />
-
   <!-- Display Categories -->
   <section class="taxonomy taxonomy-categories row">
     {{ range .Site.Taxonomies.categories.Alphabetical }}
diff --git a/layouts/index.html b/layouts/index.html
index e866d0e2..1d1c9347 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -1,72 +1,41 @@
 {{ define "main" }}
     <article class="posts">
       {{ partial "header.html" . }}
-
-      <div id="posts-list" class="posts-list">
-        {{ $currentYear := now.Format "2006" }}  <!-- 获取当前年份 -->
-
-        {{ $isFirstPost := true }} <!-- 用于标记首页的第一篇文章 -->
-
-        {{ $currentYear := now.Format "2006" }}
-        {{ range (where (where site.RegularPages "Type" "in" site.Params.mainSections) "Date.Year" "eq" (int $currentYear)).GroupByDate "2006" -}}
-          <section class="posts-year-section">
-            <h1 class="posts-year-title">{{ .Key }}</h1>
-
-              {{ range .Pages.GroupByDate "January" }}
-                <h2>{{ .Key }}</h2>
-                <ul>
-                  {{ range .Pages }}
-                    <li class="{{ if $isFirstPost }}first-post{{ end }}">
-                      <!-- 首页第一篇文章特殊展示 -->
-                      <div class="row posts-line {{ if $isFirstPost }}featured-post{{ end }}">
-                        <div class="posts-date col-xs-3 col-sm-2">
-                          <time datetime="{{ .Date.Format "2006-01-02 15:04:05 MST" }}">{{ .Date.Format "Jan 02" }}</time>
-                        </div>
-                        <div class="posts-title col-xs-9 col-sm-10">
-                          <div class="row">
-                            <div class="col-xs-11 col-sm-10">
-                              <a
-                                  style="view-transition-name: post-{{ .File.UniqueID }}"
-                                  class="posts-title-link"
-                                  href="{{ .RelPermalink }}"
-                                  data-umami-event="Click Post Link from Index"
-                              >{{ .Title }}</a>
-                              <div class="posts-excerpt markdown-body">
-                                {{ if $isFirstPost }}
-                                  {{ if .Params.description }}
-                                    <p>{{.Params.description }}</p>
-                                  {{ else }}
-                                    <p>{{ .Summary }}</p>
-                                  {{ end }}
-                                  {{ $isFirstPost = false }}
-                                {{ end }}
-                              </div>
-                            </div>
-                            <div class="col-xs-1 col-sm-2 posts-categories">
-                              {{ with .Params.categories }}
-                              <div class="posts-category">
-                                <a
-                                    href="/categories/{{ . }}/"
-                                ><strong>{{ . }}</strong></a>
-                              </div>
-                              {{ end }}
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                    </li>
-                  {{ end }}
-                </ul>
+      {{ partial "components/postnav.html" . }}
+      <div class="posts-list">
+          {{ $firstPost := true }} <!-- 初始化标记 -->
+          {{ range first 8 (where site.RegularPages "Type" "in" site.Params.mainSections) }}
+          <div class="posts-item"
+              style="view-transition-name: post-{{ .File.UniqueID }}">
+              <header>
+                  <div class="posts-item-meta">
+                      <time>
+                          {{ .Date.Format "Jan 2" }}
+                      </time>
+                      <h3>
+                          <a href="{{ .Permalink }}">{{ .Title }}</a>
+                      </h3>
+                  </div>
+                  <div class="posts-item-category">
+                      {{ with .Params.categories }}
+                      <a href="/categories/{{ . }}" style="padding: 0.1rem 0.3rem;">
+                          {{ . }}
+                      </a>
+                      {{ end }}
+                  </div>
+              </header>
+              <!-- 如果是第一篇文章，则显示摘要 -->
+              {{ if $firstPost }}
+                  <div class="markdown-body posts-item-summary"
+                      style="view-transition-name: post-content-{{ .File.UniqueID }}">
+                      {{ .Summary }}
+                  </div>
+                  {{ $firstPost = false }} <!-- 更新为非第一篇 -->
               {{ end }}
-
-          </section>
-        {{ end }}
-        {{ if eq .Site.Language.Lang "en" }}
-        <a href="/en/posts/" class="font-mono" id="previous-post-link">PREVIOUS POSTS</a>
-        {{ else if eq .Site.Language.Lang "zh" }}
-        <a href="/posts/" id="previous-post-link">往年的文章</a>
-        {{ end }}
+          </div>
+          {{ end }}
       </div>
+      <a href="/posts">查看所有</a>
     </article>
 {{ partial "footer.html" . }}
 {{ end }}
diff --git a/layouts/partials/components/postnav.html b/layouts/partials/components/postnav.html
new file mode 100644
index 00000000..d7d21cc6
--- /dev/null
+++ b/layouts/partials/components/postnav.html
@@ -0,0 +1,16 @@
+<div id="posts-list-navigation">
+    <ul>
+        <li class="{{ if eq "/" $.Page.RelPermalink }}active{{ end }}">
+            <a href="/">最新</a>
+        </li>
+        <li class="{{ if eq "/categories/" $.Page.RelPermalink }}active{{ end }}">
+            <a href="/categories">分类</a>
+        </li>
+        <li class="search-instruction">
+            <span>{{ T "searchInstruction" }}</span>
+        </li>
+        <li class="list-decoration invert-if-dark">
+            <img src="/img/little-skeleton.svg" />
+        <li>
+    </ul>
+</div>
diff --git a/static/img/little-skeleton.svg b/static/img/little-skeleton.svg
new file mode 100644
index 00000000..2a6b9559
--- /dev/null
+++ b/static/img/little-skeleton.svg
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 400 400" fill="none" xmlns="http://www.w3.org/2000/svg">

+<path d="M170.617 50.0127C154.839 63.5877 160.47 96.3945 163.077 103.311C165.911 110.832 171.792 117.155 174.671 120.514C177.451 123.759 184.529 129.02 188.531 130.477C201.49 135.191 214.458 135.992 227.62 131.263C240.69 126.567 249.91 118.355 253.923 104.692C257.019 94.146 258.551 83.414 259.249 72.3202C259.282 64.3552 257.179 56.7668 252.991 49.7801C247.378 40.4215 238.992 34.1879 228.502 32.1187C219.568 30.3558 210.179 30.5275 201.122 32.4269C197.725 33.1376 194.444 34.8653 191.397 36.6263" stroke="#000000" stroke-opacity="0.9" stroke-width="16" stroke-linecap="round" stroke-linejoin="round"/>

+<path d="M194.906 134.437C188.25 155.312 184.922 169.306 184.922 176.417C184.922 187.083 182.316 214.603 182.316 235.181" stroke="#000000" stroke-opacity="0.9" stroke-width="16" stroke-linecap="round" stroke-linejoin="round"/>

+<path d="M148.742 156.824C194.79 158.885 219.391 161.217 222.543 163.819C227.272 167.722 239.6 201.617 243.511 205.444C246.118 207.995 262.145 196.722 291.592 171.626C292.505 169.023 294.312 166.421 297.016 163.819" stroke="#000000" stroke-opacity="0.9" stroke-width="16" stroke-linecap="round" stroke-linejoin="round"/>

+<path d="M150.143 158.223C132.165 190.376 122.211 207.132 120.28 208.489C117.383 210.526 106.167 182.431 102.3 179.478C99.7217 177.509 97.485 173.468 95.5898 167.355" stroke="#000000" stroke-opacity="0.9" stroke-width="16" stroke-linecap="round" stroke-linejoin="round"/>

+<path d="M208.891 189.005C196.294 187.14 188.015 186.207 184.054 186.207C180.093 186.207 172.985 186.207 162.73 186.207" stroke="#000000" stroke-opacity="0.9" stroke-width="16" stroke-linecap="round" stroke-linejoin="round"/>

+<path d="M159.934 216.991L206.926 212.793H210.291" stroke="#000000" stroke-opacity="0.9" stroke-width="16" stroke-linecap="round" stroke-linejoin="round"/>

+<path d="M165.633 368.107H145.945C154.472 332.34 158.735 313.12 158.735 310.447C158.735 309.299 155.921 288.475 150.292 247.976L215.619 243.576L231.273 299.776L194.804 368.107H207.298" stroke="#000000" stroke-opacity="0.9" stroke-width="16" stroke-linecap="round" stroke-linejoin="round"/>

+<path d="M200.812 84.0645C201.331 85.7576 201.59 86.9237 201.59 87.5625C201.59 89.1442 200.812 90.1359 200.812 91.0606" stroke="#000000" stroke-opacity="0.9" stroke-width="16" stroke-linecap="round" stroke-linejoin="round"/>

+<path d="M224.979 84.0645C225.238 85.6649 225.367 86.7946 225.367 87.4534C225.367 89.0844 224.59 90.1071 224.59 91.0606" stroke="#000000" stroke-opacity="0.9" stroke-width="16" stroke-linecap="round" stroke-linejoin="round"/>

+<path d="M106.781 163.82L103.705 177.996C100.839 180.672 97.668 182.01 94.1914 182.01" stroke="#000000" stroke-opacity="0.9" stroke-width="16" stroke-linecap="round" stroke-linejoin="round"/>

+<path d="M284.43 162.421C285.754 169.883 288.418 173.615 292.421 173.615C296.425 173.615 301.222 173.615 306.811 173.615" stroke="#000000" stroke-opacity="0.9" stroke-width="16" stroke-linecap="round" stroke-linejoin="round"/>

+</svg>
\ No newline at end of file