fix: Dart Sass compatibility + feat: add imagePreview config for home page (#741)

* Dart Sass calc compatibility

* Fix: Default to Dart Sass transpiler + silence deprecations

* Fix: Add imagePreview config toggle — wrap the featured image block

* Implement featured image preview in summary.html

Added featured image preview functionality to summary layout.

* Add imagePreview parameter to home posts configuration

Added option to control featured image preview in home posts.

* Enable image preview in home page post list

assets/css/_page/_single/_toc.scss

@@ -126,7 +126,7 @@
   .toc-content {
     overflow-y: scroll;
     // TODO 这里计算错误，待重构使用 JS 计算
-    max-height: calc(100vh - #{2 * #{fixit-var(header-height)}});
+    max-height: calc(100vh - 2 * var(--fi-header-height));
     @include scrollbar-width(none, 0);
 
     &.always-active ul,

hugo.toml

@@ -710,6 +710,8 @@ disclaimer = ""
 enable = true
 # special amount of posts in each home posts page
 paginate = 6
+# whether to show featured image preview in home page post list
+imagePreview = true
 
 # FixIt 0.2.16 | CHANGED Social config about the author
 [params.social]

layouts/_partials/plugin/style.html

@@ -15,7 +15,7 @@
       {{- $resource = $resource | resources.ExecuteAsTemplate . $.Context -}}
     {{- end -}}
     {{- with .ToCSS -}}
-      {{- $options := . | merge (dict "outputStyle" "compressed") -}}
+      {{- $options := . | merge (dict "outputStyle" "compressed" "transpiler" "dartsass" "silenceDeprecations" (slice "import" "global-builtin" "color-functions" "function-units")) -}}
       {{- $resource = $resource | toCSS $options -}}
     {{- end -}}
     {{- if .Minify -}}
@@ -44,3 +44,4 @@
     <link rel="stylesheet" {{ $attrs | safeHTMLAttr }}>
   {{- end -}}
 {{- end -}}
+

layouts/summary.html

@@ -1,6 +1,7 @@
 {{- $params := .Params | merge .Site.Params.page -}}
 
 <article class="single summary" itemscope itemtype="http://schema.org/Article">
+  {{- if not (eq .Site.Params.home.posts.imagePreview false) -}}
   {{- /* Featured image */ -}}
   {{- $image := $params.featuredimagepreview | default $params.featuredimage -}}
   {{- $matches := slice -}}
@@ -12,15 +13,16 @@
   {{- if $image | or (gt (len $matches) 0) -}}
     <div class="featured-image-preview">
       <a href="{{ $.RelPermalink }}" aria-label="{{ $.Title }}">
-        {{- $optim := slice 
+        {{- $optim := slice
           (dict "Process" "fill 800x336 Center webp" "descriptor" "800w")
           (dict "Process" "fill 1200x504 Center webp" "descriptor" "1200w")
-          (dict "Process" "fill 1600x672 Center webp" "descriptor" "1600w") 
+          (dict "Process" "fill 1600x672 Center webp" "descriptor" "1600w")
         -}}
         {{- dict "Src" $image "Title" $.Title "Resources" $.Resources "Matches" $matches "Loading" "eager" "Width" "800" "Height" "336" "Sizes" "(max-width: 680px) 100vw, (max-width: 960px) 80vw, (max-width: 1440px) 56vw, 800px" "OptimConfig" $optim "Alt" (printf "Featured image for %v" $.Title) | partial "plugin/image.html" -}}
       </a>
     </div>
   {{- end -}}
+  {{- end -}}
 
   {{- /* Title */ -}}
   <h2 class="single-title" itemprop="name headline">