✨ Zen-mode feature

layouts/_default/single.html

@@ -31,8 +31,8 @@
     {{ $showAuthor := 0 }}
 
     {{ if .Params.showAuthor | default (.Site.Params.article.showAuthor | default true) }}
-    {{ $showAuthor = 1 }}
-    {{ partial "author.html" . }}
+      {{ $showAuthor = 1 }}
+      {{ partial "author.html" . }}
     {{ end }}
 
     {{ if not (strings.HasSuffix $baseURL "/") }}
@@ -63,7 +63,7 @@
     
     {{ if or (and (.Params.showTableOfContents | default (.Site.Params.article.showTableOfContents | default false)) (in
     .TableOfContents "<ul")) (.Site.Params.article.showRelatedPosts | default false) }} <div
-      class="order-first sm:max-w-prose lg:ml-auto px-0 lg:order-last lg:max-w-xs ltr:lg:pl-8 rtl:lg:pr-8">
+      class="order-first lg:ml-auto px-0 lg:order-last ltr:lg:pl-8 rtl:lg:pr-8">
       <div class="toc ltr:pl-5 rtl:pr-5 print:hidden lg:sticky {{ if hasPrefix .Site.Params.header.layout "fixed" -}}
         lg:top-[140px]{{ else }}lg:top-10{{ end }}">
 
@@ -77,7 +77,7 @@
         
         {{ partial "series.html" . }}
 
-        <div class="max-w-prose mb-20">
+        <div class="article-content max-w-prose mb-20">
           {{ .Content | emojify }}
         </div>
                 

layouts/partials/article-meta/basic.html

@@ -4,8 +4,8 @@
 {{ $scope := default nil }}
 
 {{ if (reflect.IsMap . ) }}
-{{ $context = .context }}
-{{ $scope = cond (not .scope) nil .scope }}
+  {{ $context = .context }}
+  {{ $scope = cond (not .scope) nil .scope }}
 {{ end }}
 
 {{ with $context }}
@@ -13,37 +13,41 @@
 
 {{/* Gather partials for this context */}}
 {{ if .Params.showDate | default (.Site.Params.article.showDate | default true) }}
-{{ $meta.Add "partials" (slice (partial "meta/date.html" .Date)) }}
+  {{ $meta.Add "partials" (slice (partial "meta/date.html" .Date)) }}
 {{ end }}
 
 {{ if and (.Params.showDateUpdated | default (.Site.Params.article.showDateUpdated | default false)) (ne (partial
 "functions/date.html" .Date) (partial "functions/date.html" .Lastmod)) }}
-{{ $meta.Add "partials" (slice (partial "meta/date-updated.html" .Lastmod)) }}
+  {{ $meta.Add "partials" (slice (partial "meta/date-updated.html" .Lastmod)) }}
 {{ end }}
 
 {{ if and (.Params.showWordCount | default (.Site.Params.article.showWordCount | default false)) (ne .WordCount 0) }}
-{{ $meta.Add "partials" (slice (partial "meta/word-count.html" .)) }}
+  {{ $meta.Add "partials" (slice (partial "meta/word-count.html" .)) }}
 {{ end }}
 
 {{ if and (.Params.showReadingTime | default (.Site.Params.article.showReadingTime | default true)) (ne .ReadingTime 0)
 }}
-{{ $meta.Add "partials" (slice (partial "meta/reading-time.html" .)) }}
+  {{ $meta.Add "partials" (slice (partial "meta/reading-time.html" .)) }}
 {{ end }}
 
 {{ if and (not .Params.externalURL) (.Params.showViews | default (.Site.Params.article.showViews | default false)) }}
-{{ $meta.Add "partials" (slice (partial "meta/views.html" .)) }}
+  {{ $meta.Add "partials" (slice (partial "meta/views.html" .)) }}
 {{ end }}
 
 {{ if and (not .Params.externalURL) (.Params.showLikes | default (.Site.Params.article.showLikes | default false)) }}
-{{ $meta.Add "partials" (slice (partial "meta/likes.html" .)) }}
+  {{ $meta.Add "partials" (slice (partial "meta/likes.html" .)) }}
 {{ end }}
 
 {{ if and (eq $scope "single") (not .Params.externalURL) (.Params.showLikes | default (.Site.Params.article.showLikes | default false)) }}
-{{ $meta.Add "partials" (slice (partial "meta/likes_button.html" .)) }}
+  {{ $meta.Add "partials" (slice (partial "meta/likes_button.html" .)) }}
 {{ end }}
 
 {{ if and (eq $scope "single") (.Params.showEdit | default (.Site.Params.article.showEdit | default false)) }}
-{{ $meta.Add "partials" (slice (partial "meta/edit.html" .)) }}
+  {{ $meta.Add "partials" (slice (partial "meta/edit.html" .)) }}
+{{ end }}
+
+{{ if and (eq $scope "single") (.Params.showZenMode | default (.Site.Params.article.showZenMode | default false)) }}
+  {{ $meta.Add "partials" (slice (partial "meta/zen-mode.html" .)) }}
 {{ end }}
 
 

layouts/partials/author-extra.html

@@ -1,5 +1,5 @@
 {{ $disableImageOptimization := .Site.Params.disableImageOptimization | default false }}
-<div class="flex mt-4">
+<div class="flex author author-extra mt-4">
   {{ with .data.image }}
   {{ $authorImage := resources.Get . }}
   {{ if $authorImage }}

layouts/partials/author.html

@@ -1,5 +1,5 @@
 {{ $disableImageOptimization := .Site.Params.disableImageOptimization | default false }}
-<div class="flex">
+<div class="flex author">
   {{ with .Site.Author.image }}
   {{ $authorImage := resources.Get . }}
   {{ if $authorImage }}

layouts/partials/meta/zen-mode.html

@@ -0,0 +1,14 @@
+{{ $jsZenMode := resources.Get "js/zen-mode.js" }}
+{{ $jsZenMode = $jsZenMode | resources.Minify | resources.Fingerprint "sha512" }}
+
+<script type="text/javascript" src="{{ $jsZenMode.RelPermalink }}" integrity="{{ $jsZenMode.Data.Integrity }}"></script>
+
+<span class="mb-[2px]">
+    <span id="zen-mode-button"
+          class="text-lg hover:text-primary-500"
+          title="{{ i18n "article.zen_mode_title.enable" }}"
+          data-title-i18n-disable="{{ i18n "article.zen_mode_title.enable" }}"
+          data-title-i18n-enable="{{ i18n "article.zen_mode_title.disable" }}">
+        <span class="inline-block align-text-bottom">{{ partial "icon.html" "expand" }}</span>
+    </span>
+</span>

layouts/partials/toc.html

@@ -1,4 +1,4 @@
-<details open class="mt-0 overflow-hidden rounded-lg ltr:-ml-5 ltr:pl-5 rtl:-mr-5 rtl:pr-5 hidden lg:block">
+<details open class="toc-right mt-0 overflow-hidden rounded-lg ltr:-ml-5 ltr:pl-5 rtl:-mr-5 rtl:pr-5 hidden lg:block">
   <summary
     class="block py-1 text-lg font-semibold cursor-pointer bg-neutral-100 text-neutral-800 ltr:-ml-5 ltr:pl-5 rtl:-mr-5 rtl:pr-5 dark:bg-neutral-700 dark:text-neutral-100 lg:hidden">
     {{ i18n "article.table_of_contents" }}
@@ -8,7 +8,7 @@
     {{ .TableOfContents | emojify }}
   </div>
 </details>
-<details class="mt-0 overflow-hidden rounded-lg ltr:-ml-5 ltr:pl-5 rtl:-mr-5 rtl:pr-5 lg:hidden">
+<details class="toc-inside mt-0 overflow-hidden rounded-lg ltr:-ml-5 ltr:pl-5 rtl:-mr-5 rtl:pr-5 lg:hidden">
   <summary
     class="py-1 text-lg font-semibold cursor-pointer bg-neutral-100 text-neutral-800 ltr:-ml-5 ltr:pl-5 rtl:-mr-5 rtl:pr-5 dark:bg-neutral-700 dark:text-neutral-100 lg:hidden">
     {{ i18n "article.table_of_contents" }}