feat: article page widget support (#488)

* feat: article page widget support * refactor: get rid of article toolbar Same 3 column layout for article page and homepage * add missing space
author: Jimmy Cai <github@jimmycai.com> 2022-02-27 01:45:25 +0300
committer: GitHub <noreply@github.com> 2022-02-27 01:45:25 +0300
commit: 4d552a9df58f20acd460a8df35d18eb935de8d21 (patch)
tree: 58a2dbc49e3b5623f44eeaedf032e7a8487137a8
parent: 0fbbc12949c8d59ea5ddcfb463d2c48140bfb490 (diff)
13 files changed, 72 insertions, 134 deletions
diff --git a/assets/scss/partials/layout/article.scss b/assets/scss/partials/layout/article.scss
index af5f7bb..92e1167 100644
--- a/assets/scss/partials/layout/article.scss
+++ b/assets/scss/partials/layout/article.scss
@@ -122,67 +122,6 @@
     }
 }
 
-.article-page.has-toc {
-    .left-sidebar {
-        display: none;
-    }
-
-    .right-sidebar {
-        width: 100%;
-        padding: 0;
-        display: none;
-
-        @include respond(xl) {
-            display: block;
-            top: var(--main-top-padding);
-        }
-    }
-
-    #article-toolbar {
-        display: block;
-
-        @include respond(md) {
-            padding: 0;
-        }
-
-        @include respond(xl) {
-            margin-top: 0;
-            position: sticky;
-            top: var(--main-top-padding);
-            flex-shrink: 1;
-
-            a {
-                background: transparent;
-                box-shadow: none;
-                border: 1px solid var(--body-text-color);
-                width: 100%;
-                margin-right: 0;
-
-                svg {
-                    flex-shrink: 0;
-                }
-            }
-        }
-    }
-
-    .main-container {
-        align-items: start;
-        flex-direction: column;
-
-        @include respond(xl) {
-            flex-direction: row;
-        }
-    }
-
-    .main {
-        padding-top: 0;
-
-        @include respond(xl) {
-            padding-top: var(--main-top-padding);
-        }
-    }
-}
-
 .widget--toc {
     background-color: var(--card-background);
     border-radius: var(--card-border-radius);
diff --git a/assets/scss/partials/sidebar.scss b/assets/scss/partials/sidebar.scss
index 462729d..c861f6e 100644
--- a/assets/scss/partials/sidebar.scss
+++ b/assets/scss/partials/sidebar.scss
@@ -37,7 +37,7 @@
 }
 
 .right-sidebar {
-    flex-shrink: 0;
+    width: 100%;
     display: none;
 
     &.sticky {
diff --git a/config.yaml b/config.yaml
index 0e5283c..d0e37f8 100644
--- a/config.yaml
+++ b/config.yaml
@@ -108,16 +108,8 @@ params:
             id:
 
     widgets:
-        enabled:
-            - search
-            - archives
-            - tag-cloud
-
-        archives:
-            limit: 5
-
-        tagCloud:
-            limit: 10
+        homepage: []
+        page: []
 
     opengraph:
         twitter:
diff --git a/exampleSite/config.yaml b/exampleSite/config.yaml
index d449fc9..7ff0505 100644
--- a/exampleSite/config.yaml
+++ b/exampleSite/config.yaml
@@ -132,16 +132,16 @@ params:
             host:
             id:
     widgets:
-        enabled:
-            - search
-            - archives
-            - tag-cloud
-
-        archives:
-            limit: 5
-
-        tagCloud:
-            limit: 10
+        homepage:
+            - type: search
+            - type: archives
+              params:
+                  limit: 5
+            - type: tag-cloud
+              params:
+                  limit: 10
+        page:
+            - type: toc
 
     opengraph:
         twitter:
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index 8a5ff95..db1903e 100644
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -6,7 +6,8 @@
     </head>
     <body class="{{ block `body-class` . }}{{ end }}">
         {{- partial "head/colorScheme" . -}}
-        <div class="container main-container flex {{ block `container-class` . }}on-phone--column {{ if .Site.Params.widgets.enabled }}extended{{ else }}compact{{ end }}{{ end }}">
+        {{- $hasWidget := default (gt (len .Site.Params.widgets.homepage) 0) (.Scratch.Get "hasWidget") -}}
+        <div class="container main-container flex on-phone--column {{ if $hasWidget }}extended{{ else }}compact{{ end }}">
             {{- block "left-sidebar" . -}}
                 {{ partial "sidebar/left.html" . }}
             {{- end -}}
diff --git a/layouts/_default/list.html b/layouts/_default/list.html
index 90e5b66..49a5c12 100644
--- a/layouts/_default/list.html
+++ b/layouts/_default/list.html
@@ -77,5 +77,5 @@
 {{ end }}
 
 {{ define "right-sidebar" }}
-    {{ partialCached "sidebar/right.html" . }}
+    {{ partial "sidebar/right.html" (dict "Context" . "Scope" "homepage") }}
 {{ end }}
 \ No newline at end of file
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index 8ce42e9..c70df20 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -1,15 +1,26 @@
 {{ define "body-class" }}
-    {{ $TOCEnabled := default (default false .Site.Params.article.toc) .Params.toc }}
-    {{- .Scratch.Set "hasTOC" (and (ge (len .TableOfContents) 100) $TOCEnabled) -}}
-    article-page {{ if (.Scratch.Get "hasTOC") }}has-toc{{ end }}
-{{ end }}
-
-{{ define "container-class" }}
-    {{ if (.Scratch.Get "hasTOC") }}
-        extended
-    {{ else }}
-        on-phone--column {{ if .Site.Params.widgets.enabled }}extended{{ else }}compact{{ end }}
-    {{ end }}
+    article-page
+    {{/* 
+        Enable the right sidebar if
+            - Widget different from 'TOC' is enabled
+            - TOC is enabled and not empty
+    */}}
+    {{- $HasWidgetNotTOC := false -}}
+    {{- $TOCWidgetEnabled := false -}}
+    {{- range .Site.Params.widgets.page -}}
+        {{- if ne .type "toc" -}}
+            {{ $HasWidgetNotTOC = true -}}
+        {{- else -}}
+            {{ $TOCWidgetEnabled = true -}}
+        {{- end -}}
+    {{- end -}}
+
+    {{- $TOCManuallyDisabled := eq .Params.toc false -}}
+    {{- $TOCEnabled := and (not $TOCManuallyDisabled) $TOCWidgetEnabled -}}
+    {{- $hasTOC := ge (len .TableOfContents) 100 -}}
+    {{- .Scratch.Set "TOCEnabled" (and $TOCEnabled $hasTOC) -}}
+    
+    {{- .Scratch.Set "hasWidget" (or $HasWidgetNotTOC (and $TOCEnabled $hasTOC)) -}}
 {{ end }}
 
 {{ define "main" }}
@@ -30,32 +41,6 @@
     {{ partialCached "article/components/photoswipe" . }}
 {{ end }}
 
-{{ define "left-sidebar" }}
-    {{ if (.Scratch.Get "hasTOC") }}
-        <div id="article-toolbar">
-            <a href="{{ .Site.BaseURL | relLangURL }}" class="back-home">
-                {{ (resources.Get "icons/back.svg").Content | safeHTML }}
-                <span>{{ T "article.back" }}</span>
-            </a>
-        </div>
-    {{ else }}
-        {{ partial "sidebar/left.html" . }}
-    {{ end }}
-{{ end }}
-
 {{ define "right-sidebar" }}
-    {{ if (.Scratch.Get "hasTOC") }}
-        <aside class="sidebar right-sidebar sticky">
-            <section class="widget archives">
-                <div class="widget-icon">
-                    {{ partial "helper/icon" "hash" }}
-                </div>
-                <h2 class="widget-title section-title">{{ T "article.tableOfContents" }}</h2>
-                
-                <div class="widget--toc">
-                    {{ .TableOfContents }}
-                </div>
-            </section>
-        </aside>
-    {{ end }}
+    {{ if .Scratch.Get "hasWidget" }}{{ partial "sidebar/right.html" (dict "Context" . "Scope" "page") }}{{ end}}
 {{ end }}
diff --git a/layouts/index.html b/layouts/index.html
index 576faef..0cd0b88 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -15,5 +15,5 @@
 {{ end }}
 
 {{ define "right-sidebar" }}
-    {{ partial "sidebar/right.html" . }}
+    {{ partial "sidebar/right.html" (dict "Context" . "Scope" "homepage") }}
 {{ end }}
 \ No newline at end of file
diff --git a/layouts/partials/sidebar/right.html b/layouts/partials/sidebar/right.html
index 24763bb..d2a6ae8 100644
--- a/layouts/partials/sidebar/right.html
+++ b/layouts/partials/sidebar/right.html
@@ -1,8 +1,13 @@
-{{ if .Site.Params.widgets.enabled }}
-    {{ $context := . }}
+{{- $scope := default "homepage" .Scope -}}
+{{- $context := .Context -}}
+{{- with (index .Context.Site.Params.widgets $scope) -}}
     <aside class="sidebar right-sidebar sticky">
-        {{ range $widget := .Site.Params.widgets.enabled }}
-            {{ partial (printf "widget/%s" $widget) $context }}
+        {{ range $widget := . }}
+            {{ if templates.Exists (printf "partials/widget/%s.html" .type) }}
+                {{ partial (printf "widget/%s" .type) (dict "Context" $context "Params" .params) }}
+            {{ else }}
+                {{ warnf "Widget %s not found" .type }}
+            {{ end }}
         {{ end }}
     </aside>
 {{ end }}
 \ No newline at end of file
diff --git a/layouts/partials/widget/archives.html b/layouts/partials/widget/archives.html
index 4a92a30..1f2abc5 100644
--- a/layouts/partials/widget/archives.html
+++ b/layouts/partials/widget/archives.html
@@ -1,4 +1,6 @@
-{{- $query := first 1 (where .Site.Pages "Layout" "==" "archives") -}}
+{{- $query := first 1 (where .Context.Site.Pages "Layout" "==" "archives") -}}
+{{- $context := .Context -}}
+{{- $limit := default 5 .Params.limit -}}
 {{- if $query -}}
     {{- $archivesPage := index $query 0 -}}
     <section class="widget archives">
@@ -7,17 +9,17 @@
         </div>
         <h2 class="widget-title section-title">{{ T "widget.archives.title" }}</h2>
 
-        {{ $pages := where .Site.RegularPages "Type" "in" .Site.Params.mainSections }}
-        {{ $notHidden := where .Site.RegularPages "Params.hidden" "!=" true }}
+        {{ $pages := where $context.Site.RegularPages "Type" "in" $context.Site.Params.mainSections }}
+        {{ $notHidden := where $context.Site.RegularPages "Params.hidden" "!=" true }}
         {{ $filtered := ($pages | intersect $notHidden) }}
         {{ $archives := $filtered.GroupByDate "2006" }}
         
         <div class="widget-archive--list">
-            {{ range $index, $item := first (add .Site.Params.widgets.archives.limit 1) ($archives) }}
+            {{ range $index, $item := first (add $limit 1) ($archives) }}
                 {{- $id := lower (replace $item.Key " " "-") -}}
                 <div class="archives-year">
                     <a href="{{ $archivesPage.RelPermalink }}#{{ $id }}">
-                        {{ if eq $index $.Site.Params.widgets.archives.limit }}
+                        {{ if eq $index $limit }}
                             <span class="year">{{ T "widget.archives.more" }}</span>
                         {{ else }}
                             <span class="year">{{ .Key }}</span>
diff --git a/layouts/partials/widget/search.html b/layouts/partials/widget/search.html
index 833f740..7b0fc73 100644
--- a/layouts/partials/widget/search.html
+++ b/layouts/partials/widget/search.html
@@ -1,4 +1,4 @@
-{{- $query := first 1 (where .Site.Pages "Layout" "==" "search") -}}
+{{- $query := first 1 (where .Context.Site.Pages "Layout" "==" "search") -}}
 {{- if $query -}}
     {{- $searchPage := index $query 0 -}}
     <form action="{{ $searchPage.RelPermalink }}" class="search-form widget" {{ with .OutputFormats.Get "json" -}}data-json="{{ .Permalink }}" {{- end }}>
diff --git a/layouts/partials/widget/tag-cloud.html b/layouts/partials/widget/tag-cloud.html
index 99b8e59..e64e5e2 100644
--- a/layouts/partials/widget/tag-cloud.html
+++ b/layouts/partials/widget/tag-cloud.html
@@ -1,3 +1,5 @@
+{{- $context := .Context -}}
+{{- $limit := default 10 .Params.limit -}}
 <section class="widget tagCloud">
     <div class="widget-icon">
         {{ partial "helper/icon" "tag" }}
@@ -5,7 +7,7 @@
     <h2 class="widget-title section-title">{{ T "widget.tagCloud.title" }}</h2>
 
     <div class="tagCloud-tags">
-        {{ range first .Site.Params.widgets.tagCloud.limit .Site.Taxonomies.tags.ByCount }}
+        {{ range first $limit $context.Site.Taxonomies.tags.ByCount }}
             <a href="{{ .Page.RelPermalink }}" class="font_size_{{ .Count }}">
                 {{ .Page.Title }}
             </a>
diff --git a/layouts/partials/widget/toc.html b/layouts/partials/widget/toc.html
new file mode 100644
index 0000000..e311de3
--- /dev/null
+++ b/layouts/partials/widget/toc.html
@@ -0,0 +1,12 @@
+{{ if (.Context.Scratch.Get "TOCEnabled") }}
+    <section class="widget archives">
+        <div class="widget-icon">
+            {{ partial "helper/icon" "hash" }}
+        </div>
+        <h2 class="widget-title section-title">{{ T "article.tableOfContents" }}</h2>
+        
+        <div class="widget--toc">
+            {{ .Context.TableOfContents }}
+        </div>
+    </section>
+{{ end }}
+\ No newline at end of file
author	Jimmy Cai <github@jimmycai.com>	2022-02-27 01:45:25 +0300
committer	GitHub <noreply@github.com>	2022-02-27 01:45:25 +0300
commit	4d552a9df58f20acd460a8df35d18eb935de8d21 (patch)
tree	58a2dbc49e3b5623f44eeaedf032e7a8487137a8
parent	0fbbc12949c8d59ea5ddcfb463d2c48140bfb490 (diff)