refactor: remove custom scrollbar styles and related variables (#1304)

* skip inaccessible images to avoid build failure

* undo changes to $result and $local

* fix: initialize $resource as a dictionary instead of an empty string

* feat: add external image processing timeout configuration

---------

Co-authored-by: Jimmy Cai <jimmy@cai.im>

assets/scss/partials/base.scss

@@ -1,6 +1,7 @@
 html {
     font-size: 62.5%;
     overflow-y: scroll;
+    scrollbar-gutter: stable;
 }
 
 * {
@@ -18,24 +19,3 @@ body {
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
 }
-
-/* scrollbar styles for Firefox */
-* {
-    scrollbar-width: auto;
-    scrollbar-color: var(--scrollbar-thumb) transparent;
-}
-/**/
-
-/* scrollbar styles for Chromium */
-::-webkit-scrollbar {
-    height: auto;
-}
-
-::-webkit-scrollbar-thumb {
-    background-color: var(--scrollbar-thumb);
-}
-
-::-webkit-scrollbar-track {
-    background-color: transparent;
-}
-/**/

assets/scss/partials/layout/article.scss

@@ -133,10 +133,6 @@
     display: flex;
     flex-direction: column;
     color: var(--card-text-color-main);
-
-    ::-webkit-scrollbar-thumb {
-        background-color: var(--card-separator-color);
-    }
 }
 
 .widget--toc {

assets/scss/variables.scss

@@ -19,17 +19,12 @@
 
     --section-separation: 40px;
 
-    --scrollbar-thumb: hsl(0, 0%, 85%);
-    --scrollbar-track: var(--body-background);
-
     &[data-scheme="dark"] {
         --body-background: #303030;
         --accent-color: #ecf0f1;
         --accent-color-darker: #bdc3c7;
         --accent-color-text: #000;
         --body-text-color: rgba(255, 255, 255, 0.7);
-        --scrollbar-thumb: hsl(0, 0%, 40%);
-        --scrollbar-track: var(--body-background);
     }
 }
 

config/_default/params.toml

@@ -1,5 +1,4 @@
 mainSections   = ["post"]
-featuredImageField = "image"
 rssFullContent = true
 # Accepted values: "default", "lastmod"
 # default = see https://gohugo.io/quick-reference/glossary/#default-sort-order
@@ -78,6 +77,9 @@ SortBy             = "default"
 [imageProcessing]
     autoOrient = false
 
+    [imageProcessing.external]
+        timeout = "5s"
+
     [imageProcessing.content]
         widths  = [800, 1600, 2400]
         enabled = true

layouts/_partials/article-list/compact.html

@@ -11,14 +11,18 @@
                 {{- $description = $description | default (T "list.page" (len .Pages)) -}}
             {{- end -}}
             {{- if or $description (not .Date.IsZero) -}}
+                {{/* 
+                    If it's a term, the date is extracted from the first page of the collection, which is not very useful.
+                    In that case, we prefer to display the description (if set), or the number of pages within the collection.
+                */}}
                 <footer class="article-meta">
-                    {{- if not .Date.IsZero -}}
+                    {{- if or $IsTerm .Date.IsZero -}}
+                        <span class="article-description">{{- $description -}}</span>
+                    {{- else if not .Date.IsZero -}}
                         <time datetime="{{ .Date.Format "2006-01-02T15:04:05Z07:00" }}">
                             {{- .Date | time.Format .Site.Params.dateFormat.published -}}
                         </time>
-                    {{- else if $description -}}
+                    {{- end }}
-                        <span class="article-description">{{- $description -}}</span>
-                    {{ end }}
                 </footer>
             {{- end -}}
         </div>

layouts/_partials/article-list/tile.html

@@ -1,16 +1,16 @@
-{{ $image := partial "helper/image" (dict "Image" .context.Params.image "Resources" .context.Resources "Context" .context) }}
+{{ $image := partial "helper/image" (dict "Image" .Params.image "Resources" .Resources "Context" .) }}
 <article class="{{ if $image }}has-image{{ end }}">
-    <a href="{{ .context.RelPermalink }}">
+    <a href="{{ .RelPermalink }}">
         {{ if $image }}
         <div class="article-image">
             {{ partial "helper/thumbnail-image" (dict 
                 "Resource" $image.Resource
                 "Width" 250
                 "Height" 150
-                "Resize" .context.Site.Params.ImageProcessing.Thumbnail.Enabled
+                "Resize" .Site.Params.ImageProcessing.Thumbnail.Enabled
                 "Attributes" (dict
                     "src" $image.Permalink
-                    "alt" (printf "Featured image of post %s" .context.Title)
+                    "alt" (printf "Featured image of post %s" .Title)
                     "loading" "lazy"
                     "width" $image.Width
                     "height" $image.Height
@@ -30,7 +30,7 @@
             {{- end -}}
         >
             <h2 class="article-title">
-                {{- .context.Title -}}
+                {{- .Title -}}
             </h2>
         </div>
     </a>

layouts/_partials/article/components/related-content.html

@@ -5,7 +5,7 @@
     <div class="subsection-list">
         <div class="article-list--tile">
             {{ range . }}
-                {{ partial "article-list/tile" (dict "context" . "size" "250x150" "Type" "articleList") }}
+                {{ partial "article-list/tile" . }}
             {{ end }}
         </div>
     </div>

layouts/_partials/helper/image.html

@@ -9,28 +9,32 @@
 ///     Height: Image height
 ///     Width: Image width
 
-{{ $result := "" }}
+{{ $result := dict }}
 
 {{ if .Image }}
     {{ $url := urls.Parse .Image }}
     {{ $permalink := .Image }}
-    {{ $resource := "" }}
+    {{ $resource := dict
+        "Resource" nil
+        "Permalink" $permalink
+        "Height" nil
+        "Width" nil
+    }}
     {{ $local := true }}
 
     {{ if not (in (slice "https" "http") $url.Scheme) }}
         {{/* Local image */}}
         {{ $resource = .Resources.Get (printf "%s" (.Image | safeURL)) }}
-        {{ $permalink = $resource.RelPermalink }}
     {{ else }}
         {{/* Remote image */}}
-        {{ with try (resources.GetRemote $url) }}
+        {{ with try (resources.GetRemote $url (dict "timeout" .Context.Site.Params.imageProcessing.external.timeout)) }}
             {{ with .Err }}
-                {{ errorf "%s" . }}
+                {{ warnf "Failed to fetch remote resource %q: %s" $url . }}
             {{ else with .Value }}
                 {{ $resource = . }}
                 {{ $local = false }}
             {{ else }}
-                {{ errorf "Unable to get remote resource %q" $url }}
+                {{ warnf "Unable to get remote resource %q" $url }}
             {{ end }}
         {{ end }}   
     {{ end }}
@@ -39,10 +43,11 @@
         {{ if and .Context.Site.Params.imageProcessing.autoOrient (reflect.IsImageResourceProcessable $resource) }}
             {{ $filter := images.AutoOrient }}
             {{ $resource = $resource | images.Filter $filter }}
+        {{ end }}
+
         {{ if $local }}
             {{ $permalink = $resource.RelPermalink }}
         {{ end }}
-        {{ end }}
 
         {{ if reflect.IsImageResourceWithMeta $resource }}
             {{ $result = dict

layouts/archives.html

@@ -8,7 +8,7 @@
         <div class="subsection-list">
             <div class="article-list--tile">
                 {{ range $terms }}
-                    {{ partial "article-list/tile" (dict "context" . "size" "250x150" "Type" "taxonomy") }}
+                    {{ partial "article-list/tile" . }}
                 {{ end }}
             </div>
         </div>

layouts/list.html

@@ -51,7 +51,7 @@
             <div class="subsection-list">
                 <div class="article-list--tile">
                     {{ range . }}
-                        {{ partial "article-list/tile" (dict "context" . "size" "250x150" "Type" "section") }}
+                        {{ partial "article-list/tile" . }}
                     {{ end }}
                 </div>
             </div>