From e68bdb374bb35bbb5349ff9e3ae7f322376fac29 Mon Sep 17 00:00:00 2001
From: Samir's Service Account
 <132539454+myServiceAccount@users.noreply.github.com>
Date: Mon, 4 May 2026 11:14:01 +0530
Subject: [PATCH] fix: Dart Sass compatibility + feat: add imagePreview config
 for home page (#741)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 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  | 2 +-
 hugo.toml                           | 2 ++
 layouts/_partials/plugin/style.html | 3 ++-
 layouts/summary.html                | 6 ++++--
 4 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/assets/css/_page/_single/_toc.scss b/assets/css/_page/_single/_toc.scss
index 73bcce6b..bf2c5182 100644
--- a/assets/css/_page/_single/_toc.scss
+++ b/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,
diff --git a/hugo.toml b/hugo.toml
index a22277fb..a3ce905c 100644
--- a/hugo.toml
+++ b/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]
diff --git a/layouts/_partials/plugin/style.html b/layouts/_partials/plugin/style.html
index f0da6a6c..705d3554 100644
--- a/layouts/_partials/plugin/style.html
+++ b/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 -}}
+
diff --git a/layouts/summary.html b/layouts/summary.html
index b891d317..f7ffff73 100644
--- a/layouts/summary.html
+++ b/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">