home: rework homepage design

5 files changed, 191 insertions, 16 deletions

diff --git a/layouts/_partials/home/latest-posts.html b/layouts/_partials/home/latest-posts.html
index 6115cac..b86a4c5 100644
--- a/layouts/_partials/home/latest-posts.html
+++ b/layouts/_partials/home/latest-posts.html
@@ -1,14 +1,10 @@
 <!-- Latest Posts -->
-<section class="pagefind-exclude flex flex-col my-4">
-    {{ $firstPost := true }}
-        
-    {{ range first 12 (where site.RegularPages "Type" "in" site.Params.mainSections) }}
-        {{ if $firstPost }}
-            {{ .Render "view_postblock_summary" }}    
-        {{ else }}
-            {{ .Render "view_postblock" }}
-        {{ end }}
-        
-        {{ $firstPost = false }}
+<section class="flex flex-col my-4">
+    {{ $postsn := 8 }}
+    {{ if eq .Site.Language.Lang "zh" }}
+        {{ $postsn = 1 }}
+    {{ end }}
+    {{ range first $postsn (where site.RegularPages "Type" "in" site.Params.mainSections) }}
+        {{ .Render "view_postblock_home" }}    
     {{ end }}
 </section>
diff --git a/layouts/_partials/home/selected-works.html b/layouts/_partials/home/selected-works.html
new file mode 100644
index 0000000..4a744ad
--- /dev/null
+++ b/layouts/_partials/home/selected-works.html
@@ -0,0 +1,118 @@
+<!-- Selected Works -->
+<section>
+    <h3 class="font-mono text-secondary text-size-base font-normal">Selected works</h3>
+    {{ $selectedTags := (slice "精选") }}
+    {{ range first 3 (shuffle (where site.RegularPages "Params.tags" "intersect" $selectedTags)) }}
+    <div class="md:flex md:justify-between mt-4 mb-6">
+        <h4 class="text-lg m-0">
+            <a class="xerox noline" href="{{ .Permalink }}">{{ .LinkTitle }}</a>
+        </h4>
+        <span>
+            {{ $tags := first 3 (complement $selectedTags .Params.tags) }}
+            {{ $context := dict "Params" (dict "tags" $tags) }}
+            {{ partial "components/tags" $context }}
+        </span>
+    </div>
+    {{ end }}
+    <a class="small-button" href="/tags/精选">全部精选 →</a>
+</section>
+
+<hr />
+
+<section>
+    <div class="md:flex md:flex-wrap">
+        {{ $articles := where site.RegularPages "Section" "eq" "article" }}
+        <div class="md:w-1/2">
+            <h3 class="font-mono text-secondary text-size-base font-normal">Tech Stuff</h3>
+            {{ $techCategories := (slice "代码炼金术" "软件杂谈" "茶歇蔻芥")}}
+            {{ $tech := where $articles "Params.categories" "in" $techCategories }}
+            <ol class="home-section-posts" style="list-style-type: lower-greek;"> 
+            {{ range first 6 $tech }}
+                <li><a class="noline" href="{{ .Permalink }}">{{ .LinkTitle }}</a></li>
+            {{ end }}
+            <ol>
+        </div>
+        <div class="md:w-1/2">
+            <h3 class="font-mono text-secondary text-size-base font-normal">General Posts</h3>
+            {{ $general := where $articles "Params.categories" "not in" $techCategories }}
+            <ol class="home-section-posts" style="list-style-type: lower-roman;"> 
+            {{ range first 6 $general }}
+                <li><a class="noline" href="{{ .Permalink }}">{{ .LinkTitle }}</a></li>
+            {{ end }}
+            <ol>
+        </div>
+        {{ $weekly := where site.RegularPages "Section" "eq" "weekly" }}
+        <div class="md:w-1/2">
+            <h3 class="font-mono text-size-base font-normal">
+                <a class="text-secondary" href="/weekly">Weekly</a> 
+                <span>*</span>
+            </h3>
+            <ol class="home-section-posts" style="list-style-type: disc;"> 
+            {{ range first 6 $weekly }}
+                <li {{ if intersect .Params.tags (slice "小报") }}style="list-style-type: circle"{{ end }}>
+                    <a class="noline" href="{{ .Permalink }}">{{ .LinkTitle }}</a>
+                </li>
+            {{ end }}
+            <ol>
+        </div>
+        {{ $fiction := where site.Pages "Section" "eq" "fiction" }}
+        <div class="md:w-1/2">
+            <h3 class="font-mono text-size-base font-normal">
+                <a class="text-secondary" href="/fiction">Fictions</a> 
+            </h3>
+            <ol class="home-section-posts" style="list-style-type: hebrew;"> 
+            {{ range first 6 $fiction }}
+                <li>
+                    <a class="noline" href="{{ .Permalink }}">{{ .LinkTitle }}</a>
+                </li>
+            {{ end }}
+            <ol>
+        </div>
+        
+        <p class="text-secondary text-sm">
+            <span class="font-mono">*</span> 
+            实心圆表示正刊，空心圆表示小报。
+        </p>
+    </div>
+</section>
+
+
+<hr /> 
+
+<section>
+    <h3 class="font-mono text-secondary text-size-base font-normal">Bookshelf</h3>
+    <div class="grid grid-cols-4 md:grid-cols-6 items-center gap-4 my-8">
+    {{ $library := where site.Pages "Section" "eq" "library" }}
+    {{ $books := where $library "Params.authors" "ne" nil }}
+    {{ range first 6 $books }}
+      <div data-tooltip="{{ .Title }}">
+        {{ partial "components/book" (dict "ctx" .) }}
+      </div>
+    {{ end }}
+    </div>
+    <a class="small-button" href="{{ if eq .Site.Language.Lang "zh" }}/library{{ else }}{{ .Site.LanguagePrefix }}/library{{ end }}">
+        图书馆 →
+    </a>
+</section>
+
+<style>
+ol.home-section-posts {
+    padding-inline-start: 1rem;
+    font-size: 1.1rem;
+    line-height: 2;
+    color: #999;
+    li {
+        filter: url(#x)
+    }
+    span, a {
+        color: #1d1d1f
+    }
+}
+
+a.noline { transition: opacity 0.3s }
+a.noline:hover {
+    text-decoration: none;
+    opacity: 0.65;
+}
+</style>
+
diff --git a/layouts/_partials/taxonomy/pagefind.html b/layouts/_partials/taxonomy/pagefind.html
index 920d36d..2a57181 100644
--- a/layouts/_partials/taxonomy/pagefind.html
+++ b/layouts/_partials/taxonomy/pagefind.html
@@ -1,2 +1,6 @@
 <pagefind-searchbox></pagefind-searchbox>
 <script src="/pagefind/pagefind-component-ui.js" type="module"></script>
+<script type="module">
+    await import('/pagefind/pagefind-highlight.js');
+    new PagefindHighlight({ highlightParam: "highlight" });
+</script>
diff --git a/layouts/home.html b/layouts/home.html
index ba5b8ce..6a511bb 100644
--- a/layouts/home.html
+++ b/layouts/home.html
@@ -1,11 +1,23 @@
 {{ define "main" }}
     {{ partial "home/microformats" . }}
-    <article>
-      {{ partial "home/home-nav" . }}
+    <article class="pagefind-exclude">
       {{ partial "home/latest-posts" . }}
       {{ partial "home/more-links" . }}
-      <div class="markdown-body text-secondary">
-          {{ .Content }}
-      </div>
+      {{ if eq .Site.Language.Lang "zh" }}
+          <hr/>
+          {{ partial "home/selected-works" . }}
+          <hr />
+          <h3 class="font-mono text-secondary text-size-base font-normal">Monthly word count</h3>
+          {{ partial "stats/word-count-chart" . }}
+          <p>极客死亡计划一共发布了 {{ len .Site.RegularPages }} 篇页面，共计 
+            <span>
+            {{- $words := 0 -}}
+            {{- range (where .Site.RegularPages "Section" "!=" "") -}}
+                {{- $words = add $words .WordCount -}}
+            {{- end -}}
+            {{ lang.FormatNumber 0 $words }}
+            </span>
+            字。</p>
+      {{ end }}
     </article>
 {{ end }}
diff --git a/layouts/view_postblock_home.html b/layouts/view_postblock_home.html
new file mode 100644
index 0000000..3d78249
--- /dev/null
+++ b/layouts/view_postblock_home.html
@@ -0,0 +1,45 @@
+<!--
+    This is a Decorator of 'view_postblock',
+    with additional summary block.
+-->
+
+<div class="posts-item w-full mt-2"
+    style="view-transition-name: post-{{ .File.UniqueID }}">
+    <header class="w-full md:flex md:justify-between">
+        <div>
+            <p class="font-mono text-secondary">
+                <span>Recently</span>
+                <span>in <a href="/{{ .Section }}/">{{ .Section }}</a></span>
+                <time>on {{ .Date.Format "January 2" }}</time>
+            </p>
+            <h2 class="xerox">
+                <a class="noline" href="{{ .Permalink }}">
+                    {{ if eq .Section "library" }}
+                        读《{{ .Title }}》
+                    {{ else }}
+                        {{ .Title }}
+                    {{ end }}
+                </a>
+                {{ if eq .Section "fictions" }}
+                <span class="font-normal text-4 text-secondary">小说</span>
+                {{ end }}
+            </h2>
+        </div>
+
+        {{ $ctx := . }}
+        {{ with .Params.categories }}
+        <div class="my-4">
+            {{ partial "components/category-pill" $ctx }}
+        </div>
+        {{ end }}
+    </header>
+</div>
+
+<div class="post-summary markdown-body text-size-lg leading-relaxed mt-0"
+    style="view-transition-name: post-content-{{ .File.UniqueID }}">
+    {{ if .Params.description }}
+        {{ .Params.description }}
+    {{ else }}
+        {{ .Summary }}
+    {{ end }}
+</div>