feat: Zen mode (#299)

g1eny0ung · Aug 19, 2024 · b24b842 · b24b842
1 parent e661c89
commit b24b842
Show file tree

Hide file tree

Showing 18 changed files with 196 additions and 7 deletions.
diff --git a/docs/pages/_meta.json b/docs/pages/_meta.json
@@ -1,5 +1,5 @@
 {
-  "contact": {
+  "docs-v2": {
     "title": "Docs (v2)",
     "type": "page",
     "href": "https://hugo-theme-dream-docs-v2.netlify.app",
@@ -8,6 +8,7 @@
   "index": "Quick Start",
   "base-configurations": "Base Configurations",
   "params-configurations": "Params Configurations",
+  "zen-mode": "Zen Mode",
   "i18n": "i18n",
   "website-analytics": "Website Analytics",
   "social-comments": "Social Comments",

diff --git a/docs/pages/index.mdx b/docs/pages/index.mdx
@@ -13,6 +13,27 @@ Create `hugo.toml` if it doesn't exist in your site folder.
 You can download and use this [default configuration file](https://github.com/g1eny0ung/hugo-theme-dream/blob/master/hugo.example.toml). It contains all params used in Dream.
 </Callout>
 
+## Default or Zen Mode
+
+Dream has two out-of-the-box modes: **Default** and **Zen**.
+
+Default mode will display your posts in a masonry layout.
+
+Zen mode will display your posts in a single column layout.
+It is more suitable for people who prefer a simple and clean interface.
+And it is more concentrated on reading and writing.
+
+Here is a demo of the Zen mode: https://g1en-site-zen-mode-preview.netlify.app/.
+
+You can enable Zen mode by adding `zenMode = true` to the configuration file.
+
+```toml
+[params]
+zenMode = true
+```
+
+View [Zen Mode](./zen-mode.md) for more details.
+
 ## Set language for your site
 
 Open `hugo.toml` and write:
@@ -94,7 +115,7 @@ headless: true
 ---
 ```
 
-After that, you will see a "About" on the top right navagation bar. Click it to view your about page.
+You will then see **About** in the top right navagation bar. Click it to view your about page.
 
 ## Write your first article
 
@@ -150,3 +171,5 @@ in your blog folder, the `-D` represent to build draft posts.
 ## End
 
 View more details and configurations on the left sidebar.
+
+Wish you a happy journey with 🌱 Dream!
diff --git a/docs/pages/params-configurations.mdx b/docs/pages/params-configurations.mdx
@@ -8,6 +8,8 @@ This doc introduces all the parameters that can be configured in the `[params]`.
 
 ```toml
 [params]
+# zenMode = true
+
 lightTheme = "emerald"
 darkTheme = "forest"
 
@@ -62,6 +64,13 @@ jsDateFormat = "yyyy年MM月dd日"
 
 ## Basic
 
+### zenMode
+
+Zen mode is a simple layout that allows you to concentrate on reading and writing.
+It uses a simple and clean interface rather than the default masonry layout.
+
+👉 View [Zen Mode](zen-mode.md) for more details.
+
 ### Light and Dark Mode
 
 > Required.

diff --git a/docs/pages/zen-mode.mdx b/docs/pages/zen-mode.mdx
@@ -0,0 +1,25 @@
+# Zen Mode
+
+What is Zen mode?
+
+Zen mode is a simple layout that allows you to concentrate on reading and writing.
+It is a minimalist design that removes all distractions from the page.
+This mode is more suitable for people who prefer a simple and clean interface
+rather than the default masonry layout.
+
+Here is a demo of the Zen mode: https://g1en-site-zen-mode-preview.netlify.app/.
+
+And below is a screenshot of the Zen mode:
+
+<div className="nx-mt-6" style={{ width: '75%' }}>
+  ![Zen Mode](/images/zen-mode.png)
+</div>
+
+## Enable Zen Mode
+
+To enable Zen mode, just add `zenMode = true` to the configuration file.
+
+```toml
+[params]
+zenMode = true
+```
diff --git a/docs/public/images/zen-mode.png b/docs/public/images/zen-mode.png
diff --git a/docs/theme.config.jsx b/docs/theme.config.jsx
@@ -31,9 +31,9 @@ export default {
     ),
   },
   banner: {
-    key: '3.0-release',
+    key: 'zen-mode',
     text: (
-      <a href="https://g1en.site/hugo-theme-dream/migrate-to-v3">🎉 Hugo Theme Dream 3.0 is released. Read more →</a>
+      <a href="https://g1en.site/hugo-theme-dream/zen-mode">🍃 Hugo Theme Dream 3.5 introduces Zen mode. Read more →</a>
     ),
   },
 }
diff --git a/hugo.example.toml b/hugo.example.toml
@@ -11,6 +11,8 @@ theme = "hugo-theme-dream"
 # ID = ""
 
 [params]
+# zenMode = true
+
 lightTheme = "emerald"
 darkTheme = "forest"
 

diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
@@ -33,15 +33,23 @@
           <div class="container">
             {{ block "main" . }} {{ end }}
 
+            {{ if site.Params.zenMode }}
+            <footer class="flex justify-between items-center gap-2 max-w-[65ch] mx-auto px-4 md:px-0 py-12">
+            {{ else }}
             <footer class="flex justify-between items-center gap-2 px-4 py-12">
+            {{ end }}
               {{ partial "footerLeft.html" . }}
               {{ partial "footerRight.html" . }}
             </footer>
           </div>
         </div>
         <div class="back">
           <div class="container">
+            {{ if site.Params.zenMode }}
+            {{ partial "zen-back.html" . }}
+            {{ else }}
             {{ partial "back.html" . }}
+            {{ end }}
           </div>
         </div>
       </div>

diff --git a/layouts/_default/term.html b/layouts/_default/term.html
@@ -4,7 +4,11 @@
 
 {{ define "main"}}
 
+{{ if site.Params.zenMode }}
+<div class="max-w-[65ch] mt-4 mx-auto">
+{{ else }}
 <div class="flex flex-col md:flex-row mt-4">
+{{ end }}
   <div class="md:basis-[200px] lg:basis-[300px] p-4 prose dark:prose-invert">
     <h1 class="text-2xl">
       {{- .Title -}}
@@ -28,16 +32,29 @@ <h1 class="text-2xl">
       {{ end }}
     </div>
   </div>
+  {{ if site.Params.zenMode }}
+  <div class="divider divider-vertical"></div>
+  {{ else }}
   <div class="divider divider-vertical md:divider-horizontal px-4 md:px-0"></div>
+  {{ end }}
   <div class="flex-1">
     {{ $paginator := .Paginate .Pages }}
+
+    {{ if site.Params.zenMode }}
+    <div class="dream-zen-posts px-4 space-y-8">
+      {{ range $paginator.Pages }}
+        {{ .Render "zen-summary" }}
+      {{ end }}
+    </div>
+    {{ else }}
     <div class="dream-grid">
     {{ range $paginator.Pages }}
       <div class="w-full md:w-1/2 lg:w-1/3 p-4 dream-column">
         {{ .Render "summary" }}
       </div>
     {{ end }}
     </div>
+    {{ end }}
 
     {{ if gt $paginator.TotalPages 1 }}
     <div class="flex justify-center pt-8">

diff --git a/layouts/_default/terms.html b/layouts/_default/terms.html
@@ -6,7 +6,11 @@
 
 {{ define "main"}}
 
+{{ if site.Params.zenMode }}
+<div class="max-w-[65ch] mt-4 mx-auto">
+{{ else }}
 <div class="flex flex-col md:flex-row mt-4">
+{{ end }}
   <div class="md:basis-[200px] lg:basis-[300px] p-4 prose dark:prose-invert">
     <h1 class="text-2xl">
       {{- $title := T (print "all" (strings.FirstUpper .Data.Plural)) }}
@@ -27,16 +31,29 @@ <h1 class="text-2xl">
       {{ end }}
     </div>
   </div>
+  {{ if site.Params.zenMode }}
+  <div class="divider divider-vertical"></div>
+  {{ else }}
   <div class="divider divider-vertical md:divider-horizontal px-4 md:px-0"></div>
+  {{ end }}
   <div class="flex-1">
     {{ $paginator := .Paginate (where site.RegularPages (print ".Params." .Data.Plural) "ne" nil) }}
+
+    {{ if site.Params.zenMode }}
+    <div class="dream-zen-posts px-4 space-y-8">
+      {{ range $paginator.Pages }}
+        {{ .Render "zen-summary" }}
+      {{ end }}
+    </div>
+    {{ else }}
     <div class="dream-grid">
     {{ range $paginator.Pages }}
       <div class="w-full md:w-1/2 lg:w-1/3 p-4 dream-column">
         {{ .Render "summary" }}
       </div>
     {{ end }}
     </div>
+    {{ end }}
 
     {{ if gt $paginator.TotalPages 1 }}
     <div class="flex justify-center pt-8">

diff --git a/layouts/_default/zen-summary.html b/layouts/_default/zen-summary.html
@@ -0,0 +1,34 @@
+<a class="flex justify-between items-center gap-4" href="{{ .RelPermalink }}">
+  <div>
+    <h2 class="text-lg font-medium underline">{{ .Title }}</h2>
+    <span class="date text-base-content/60 text-sm">
+    {{ if site.Params.Experimental.jsDate }}
+      <span data-format="luxon">{{ .Date.Format "2006-01-02T15:04:05Z07:00" }}</span>
+    {{ else }}
+      {{ .Date | time.Format "Monday, Jan 2, 2006" }}
+    {{ end }}
+    </span>
+  </div>
+
+  <figure>
+  {{ if .Params.cover }}
+    {{ with .Resources.Get .Params.cover }}
+    {{ $webp := .Resize (printf "%dx%d webp" .Width .Height) }}
+    <picture>
+      <source srcset="{{ $webp.RelPermalink }}" type="image/webp" />
+      <img class="w-24 max-w-none rounded-lg" src="{{ .RelPermalink }}" alt="{{ .Title }}" />
+    </picture>
+    {{ else }}
+    <img src="{{ .Params.cover }}" alt="{{ .Title }}" />
+    {{ end }}
+  {{ else }}
+    {{ with resources.Get (printf "images/default%d.jpg" (index (seq 4 | shuffle) 0)) }}
+    {{ $webp := .Resize (printf "%dx%d webp" .Width .Height) }}
+    <picture>
+      <source srcset="{{ $webp.RelPermalink }}" type="image/webp" />
+      <img src="{{ .RelPermalink }}" alt="{{ .Title }}" />
+    </picture>
+    {{ end }}
+  {{ end }}
+  </figure>
+</a>
diff --git a/layouts/index.html b/layouts/index.html
@@ -2,13 +2,21 @@
 
 {{ $paginator := .Paginate (where site.RegularPages "Type" "posts") }}
 
+{{ if site.Params.zenMode }}
+<div class="dream-zen-posts max-w-[65ch] mt-8 mx-auto px-4 space-y-8">
+{{ range $paginator.Pages }}
+  {{ .Render "zen-summary" }}
+{{ end }}
+</div>
+{{ else }}
 <div class="dream-grid">
   {{ range $paginator.Pages }}
   <div class="w-full md:w-1/2 lg:w-1/3 xl:w-1/4 p-4 dream-column">
     {{ .Render "summary" }}
   </div>
   {{ end }}
 </div>
+{{ end }}
 
 {{ if gt $paginator.TotalPages 1 }}
 <div class="flex justify-center mt-8">

diff --git a/layouts/partials/nav.html b/layouts/partials/nav.html
@@ -6,7 +6,11 @@
 {{ else }}
 <nav class="mt-4 lg:mt-8 py-4">
 {{ end }}
+  {{ if site.Params.zenMode }}
+  <div class="container flex justify-between max-w-[65ch] mx-auto px-4 md:px-0">
+  {{ else }}
   <div class="container flex justify-between px-4">
+  {{ end }}
     <section class="flex items-center gap-4">
       <div class="avatar cursor-pointer hover:online" @click="flip = !flip" title="{{ T "flip" }}">
         <div class="h-10 rounded-full">

diff --git a/layouts/partials/scripts.html b/layouts/partials/scripts.html
@@ -24,7 +24,9 @@
     })(document, 'script', 'twitter-wjs')
   }
 </script>
+{{ if not site.Params.zenMode }}
 <script src="https://cdn.jsdelivr.net/npm/imagesloaded@5.0.0/imagesloaded.pkgd.min.js" integrity="sha256-htrLFfZJ6v5udOG+3kNLINIKh2gvoKqwEhHYfTTMICc=" crossorigin="anonymous"></script>
 <script src="https://cdn.jsdelivr.net/npm/masonry-layout@4.2.2/dist/masonry.pkgd.min.js" integrity="sha256-Nn1q/fx0H7SNLZMQ5Hw5JLaTRZp0yILA/FRexe19VdI=" crossorigin="anonymous"></script>
 <script src="{{ "js/grid.js" | relURL }}"></script>
+{{ end }}
 <script src="{{ "js/main.js" | relURL }}"></script>
diff --git a/layouts/partials/socials.html b/layouts/partials/socials.html
@@ -1,4 +1,4 @@
-<ul class="menu menu-horizontal flex-wrap w-full [&_ion-icon]:text-lg">
+<ul class="menu menu-horizontal flex-wrap w-full px-0 [&_ion-icon]:text-lg">
   {{ if site.Params.email }}
   <li>
     <a href="mailto:{{ site.Params.email }}" title="Email">

diff --git a/layouts/partials/zen-back.html b/layouts/partials/zen-back.html
@@ -0,0 +1,34 @@
+<div class="max-w-[65ch] mt-8 mx-auto px-4">
+  {{ with site.GetPage "/about" }}
+  {{ $aboutPages := .Resources.ByType "page" }}
+  {{ range (sort $aboutPages "Date" "asc") }}
+  <div>
+    <div class="mb-4 text-lg font-medium">{{ .Title }}</div>
+
+    <div class="prose dark:prose-invert">
+      {{ .Content | emojify }}
+    </div>
+  </div>
+  <div class="divider divider-vertical"></div>
+  {{ end }}
+  {{ end }}
+
+  {{ if (fileExists "data/socials.toml") }}
+  {{ if and site.Config.Services.Disqus.Shortname .IsHome }}
+  <div>
+  {{ else }}
+  <div class="pb-4">
+  {{ end }}
+    <div class="mb-4 text-lg font-medium">{{ T "socialLinks" }}</div>
+
+    {{ partialCached "socials.html" . }}
+  </div>
+  {{ end }}
+
+  {{ if and site.Config.Services.Disqus.Shortname .IsHome }}
+  <div class="divider divider-vertical"></div>
+  <div class="pb-4">
+    {{ partial "disqus.html" (dict "Context" . "Identifier" "/") }}
+  </div>
+  {{ end }}
+</div>
diff --git a/layouts/section/search.html b/layouts/section/search.html
@@ -4,7 +4,12 @@
 
 {{ define "main" }}
 
-<div class="mt-8 lg:mt-12 px-4" x-data="{
+{{ if site.Params.zenMode }}
+<div class="max-w-[65ch] mt-8 lg:mt-12 mx-auto px-4"
+{{ else }}
+<div class="mt-8 lg:mt-12 px-4"
+{{ end }}
+x-data="{
   search: '',
   get posts() { return this.search !== '' ? window.fuse.search(this.search) : [] },
 }">

diff --git a/static/css/output.css b/static/css/output.css