Merge pull request #46 from gethinode/develop

markdumay · web-flow · commit 3e015eaa2ef9 · 2026-03-01T18:37:25.000+01:00
feat(preview): add build-time embedding detection and fallback rendering
diff --git a/component-library/components/preview/preview.bookshop.yml b/component-library/components/preview/preview.bookshop.yml
@@ -22,6 +22,8 @@ blueprint:
     subtle:
   url:
   device:
+  image:
+  show-fallback:
   controls-placement:
   desktop-responsive:
   width:
diff --git a/component-library/components/preview/preview.hugo.html b/component-library/components/preview/preview.hugo.html
@@ -16,6 +16,8 @@
 	"controls-placement" (or .controls_placement (index . "controls-placement"))
 	"desktop-responsive" (or .desktop_responsive (index . "desktop-responsive"))
 	"heading"            .heading
+	"image"              .image
+	"show-fallback"      (or .show_fallback (index . "show-fallback"))
 ) }}
 
 {{ if $raw }}
diff --git a/component-library/components/preview/preview.scss b/component-library/components/preview/preview.scss
@@ -175,13 +175,48 @@ section.preview {
         margin: 2rem auto;
         padding: 0 1rem;
 
+        // When a fallback image is present, fill the full preview area (flex column)
+        &:has(.preview-fallback-image) {
+            width: 100%;
+            height: 100%;
+            max-width: 100%;
+            margin: 0;
+            padding: 0;
+            display: flex;
+            flex-direction: column;
+
+            .preview-fallback-image {
+                flex: 1;
+                width: 100%;
+                object-fit: cover;
+                min-height: 0;
+            }
+
+            .alert {
+                flex-shrink: 0;
+                margin: 1rem;
+            }
+        }
+
         .alert {
             display: flex;
             align-items: center;
             gap: 0.5rem;
         }
     }
 
+    // Fallback state: controls are irrelevant and the image should not be height-constrained
+    &:has(.preview-error:not(.d-none)) {
+        .preview-controls {
+            display: none;
+        }
+
+        .preview-content {
+            height: auto;
+            min-height: unset;
+        }
+    }
+
     // Responsive behavior for small screens
     @media (max-width: 639px) {
         .preview-controls {
diff --git a/data/structures/preview.yml b/data/structures/preview.yml
@@ -11,3 +11,7 @@ arguments:
     optional: true
   heading:
     optional: true
+  image:
+    optional: true
+  show-fallback:
+    optional: true
diff --git a/exampleSite/go.mod b/exampleSite/go.mod
@@ -5,5 +5,5 @@ go 1.19
 require (
 	github.com/cloudcannon/bookshop/hugo/v3 v3.17.1 // indirect
 	github.com/gethinode/mod-blocks v1.7.0 // indirect
-	github.com/gethinode/mod-utils/v5 v5.13.0 // indirect
+	github.com/gethinode/mod-utils/v5 v5.14.0 // indirect
 )
diff --git a/exampleSite/go.sum b/exampleSite/go.sum
@@ -34,3 +34,5 @@ github.com/gethinode/mod-utils/v5 v5.12.0 h1:XH6/MsvgPfYVD8Ci3t20vRH3Zz1JpaqqG6X
 github.com/gethinode/mod-utils/v5 v5.12.0/go.mod h1:PwQN4oOjA6k/vet11JueJ9asZMgL0DBa3jyS9tPkBWU=
 github.com/gethinode/mod-utils/v5 v5.13.0 h1:ztkE1REey94x36UdlZ7yeitpIQid/BcZQh+wtxBTSQ8=
 github.com/gethinode/mod-utils/v5 v5.13.0/go.mod h1:PwQN4oOjA6k/vet11JueJ9asZMgL0DBa3jyS9tPkBWU=
+github.com/gethinode/mod-utils/v5 v5.14.0 h1:Nntb2ei7yTRsUmGMUHo/fgCfacIk+GD/ZbSW64gu6HM=
+github.com/gethinode/mod-utils/v5 v5.14.0/go.mod h1:PwQN4oOjA6k/vet11JueJ9asZMgL0DBa3jyS9tPkBWU=
diff --git a/go.mod b/go.mod
@@ -4,5 +4,5 @@ go 1.19
 
 require (
 	github.com/cloudcannon/bookshop/hugo/v3 v3.17.1 // indirect
-	github.com/gethinode/mod-utils/v5 v5.13.0 // indirect
+	github.com/gethinode/mod-utils/v5 v5.14.0 // indirect
 )
diff --git a/go.sum b/go.sum
@@ -10,3 +10,5 @@ github.com/gethinode/mod-utils/v5 v5.12.0 h1:XH6/MsvgPfYVD8Ci3t20vRH3Zz1JpaqqG6X
 github.com/gethinode/mod-utils/v5 v5.12.0/go.mod h1:PwQN4oOjA6k/vet11JueJ9asZMgL0DBa3jyS9tPkBWU=
 github.com/gethinode/mod-utils/v5 v5.13.0 h1:ztkE1REey94x36UdlZ7yeitpIQid/BcZQh+wtxBTSQ8=
 github.com/gethinode/mod-utils/v5 v5.13.0/go.mod h1:PwQN4oOjA6k/vet11JueJ9asZMgL0DBa3jyS9tPkBWU=
+github.com/gethinode/mod-utils/v5 v5.14.0 h1:Nntb2ei7yTRsUmGMUHo/fgCfacIk+GD/ZbSW64gu6HM=
+github.com/gethinode/mod-utils/v5 v5.14.0/go.mod h1:PwQN4oOjA6k/vet11JueJ9asZMgL0DBa3jyS9tPkBWU=
diff --git a/layouts/partials/assets/preview.html b/layouts/partials/assets/preview.html
@@ -34,6 +34,51 @@
 {{- $controlsBelow := eq $args.controlsPlacement "bottom" -}}
 
 {{ if not $error }}
+    {{/* Build-time detection of iframe embedding restrictions */}}
+    {{- $showFallback := $args.showFallback -}}
+    {{- if and $args.url (not $showFallback) -}}
+        {{- with try (resources.GetRemote $args.url (dict
+            "method"          "HEAD"
+            "responseHeaders" (slice "X-Frame-Options" "Content-Security-Policy")
+        )) -}}
+            {{- if not .Err -}}
+                {{- $headers := .Value.Data.Headers -}}
+                {{- with index $headers "X-Frame-Options" -}}
+                    {{- $showFallback = true -}}
+                    {{- partial "utilities/LogWarn.html" (dict
+                        "partial" "assets/preview.html"
+                        "warnid"  "warn-preview-restricted"
+                        "msg"     "iframe embedding blocked"
+                        "details" (slice (printf "URL '%s' sets X-Frame-Options; showing fallback" $args.url))
+                        "file"    page.File
+                    ) -}}
+                {{- end -}}
+                {{- range index $headers "Content-Security-Policy" -}}
+                    {{- if findRE `frame-ancestors\s+'none'` . -}}
+                        {{- $showFallback = true -}}
+                        {{- partial "utilities/LogWarn.html" (dict
+                            "partial" "assets/preview.html"
+                            "warnid"  "warn-preview-restricted"
+                            "msg"     "iframe embedding blocked"
+                            "details" (slice (printf "URL '%s' sets CSP frame-ancestors 'none'; showing fallback" $args.url))
+                            "file"    page.File
+                        ) -}}
+                    {{- end -}}
+                {{- end -}}
+            {{- else -}}
+                {{- if $showFallback -}}
+                    {{- partial "utilities/LogWarn.html" (dict
+                        "partial" "assets/preview.html"
+                        "warnid"  "warn-preview-restricted"
+                        "msg"     "HEAD request failed"
+                        "details" (slice (printf "Could not check '%s' for embedding restrictions; fallback shown due to show-fallback setting" $args.url))
+                        "file"    page.File
+                    ) -}}
+                {{- end -}}
+            {{- end -}}
+        {{- end -}}
+    {{- end -}}
+
     {{/* Optional section heading */}}
     {{ if $args.heading.title }}
         {{ partial "assets/section-title.html" (dict
@@ -42,7 +87,7 @@
     {{ end }}
 
     {{/* Device selection button group — rendered above or below the preview */}}
-    {{- if not $controlsBelow }}
+    {{- if and (not $showFallback) (not $controlsBelow) }}
     <div class="container-xxl">
         <div class="preview-controls d-flex justify-content-center mb-3">
             <div class="btn-group" role="tablist" aria-label="Device selection">
@@ -75,14 +120,23 @@
                  role="tabpanel"
                  aria-labelledby="{{ $id }}-{{ $device }}-tab">
                 <iframe src="{{ $args.url }}"
-                        class="preview-iframe preview-{{ $device }}"
+                        class="preview-iframe preview-{{ $device }}{{ if $showFallback }} d-none{{ end }}"
                         title="{{ or $args.heading.title (printf "Preview of %s" $args.url) }}"
                         loading="lazy"
                         allow="storage-access"
                         sandbox="allow-scripts allow-same-origin allow-forms allow-popups allow-storage-access-by-user-activation"
                         referrerpolicy="no-referrer-when-downgrade">
                 </iframe>
-                <div class="preview-error" style="display: none;">
+                <div class="preview-error{{ if not $showFallback }} d-none{{ end }}">
+                    {{- if $args.image }}
+                    {{ partial "assets/image.html" (dict
+                        "src"     $args.image
+                        "page"    page
+                        "class"   "preview-fallback-image"
+                        "title"   (or $args.heading.title (printf "Preview of %s" $args.url))
+                        "loading" "lazy"
+                    ) }}
+                    {{- end }}
                     <div class="alert alert-warning" role="alert">
                         {{ partial "assets/icon.html" (dict "icon" $previewError "spacing" false) }}
                         {{ T "previewError" }} <code>{{ $args.url }}</code>.
@@ -95,7 +149,7 @@
         {{- end -}}
     </div>
 
-    {{- if $controlsBelow }}
+    {{- if and (not $showFallback) $controlsBelow }}
     <div class="container-xxl">
         <div class="preview-controls controls-bottom d-flex justify-content-center mt-3">
             <div class="btn-group" role="tablist" aria-label="Device selection">

Original file line number	Diff line number	Diff line change
`@@ -5,5 +5,5 @@ go 1.19`
`5`	`5`	`require (`
`6`	`6`	`github.com/cloudcannon/bookshop/hugo/v3 v3.17.1 // indirect`
`7`	`7`	`github.com/gethinode/mod-blocks v1.7.0 // indirect`
`8`		`- github.com/gethinode/mod-utils/v5 v5.13.0 // indirect`
	`8`	`+ github.com/gethinode/mod-utils/v5 v5.14.0 // indirect`
`9`	`9`	`)`
Original file line number	Diff line number	Diff line change
`@@ -4,5 +4,5 @@ go 1.19`
`4`	`4`
`5`	`5`	`require (`
`6`	`6`	`github.com/cloudcannon/bookshop/hugo/v3 v3.17.1 // indirect`
`7`		`- github.com/gethinode/mod-utils/v5 v5.13.0 // indirect`
	`7`	`+ github.com/gethinode/mod-utils/v5 v5.14.0 // indirect`
`8`	`8`	`)`