Skip to content

Commit 5cdcb06

Browse files
servedsmartservedsmart
committed
♻️ Refactor: Move inline styles containing background-image: out of line
This greatly reduces the number of inline styles in the project and enhances maintainability by avoiding a lot of duplicate code. This also reduces the number of hashes required for a CSP since all previous background-image inline styles are now in main.css.
1 parent 2f12b8d commit 5cdcb06

File tree

8 files changed

+242
-244
lines changed

8 files changed

+242
-244
lines changed

‎layouts/partials/article-link/card-related.html‎

Lines changed: 21 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
{{ $disableImageOptimization := .Page.Site.Params.disableImageOptimization | default false }}
21
{{ with .Params.externalUrl }}
32
<a href="{{ . }}" target="_blank" rel="external" class="min-w-full">
43
{{ else }}
@@ -10,30 +9,30 @@
109
{{- range first 6 . }}
1110
<meta property="og:image" content="{{ . | absURL }}" />{{ end -}}
1211
{{- else -}}
13-
{{- $images := $.Resources.ByType "image" -}}
14-
{{- $featured := $images.GetMatch "*feature*" -}}
15-
{{- if not $featured }}{{ $featured = $images.GetMatch "{*cover*,*thumbnail*}" }}{{ end -}}
16-
{{ if and .Params.featureimage (not $featured) }}
17-
{{- $url:= .Params.featureimage -}}
18-
{{ $featured = resources.GetRemote $url }}
19-
{{ end }}
20-
{{- if not $featured }}{{ with .Site.Params.defaultFeaturedImage }}{{ $featured = resources.Get . }}{{ end }}{{ end -}}
21-
{{- with $featured -}}
22-
{{ if or $disableImageOptimization (strings.HasSuffix $featured ".svg")}}
23-
{{ with . }}
24-
<div class="w-full thumbnail_card_related nozoom" style="background-image:url({{ .RelPermalink }});"></div>
12+
{{ $images := $.Resources.ByType "image" }}
13+
{{ $featuredImage := $images.GetMatch "*feature*" }}
14+
{{ if not $featuredImage }}
15+
{{ $featuredImage = $images.GetMatch "{*cover*,*thumbnail*}" }}
16+
{{ end }}
17+
{{ if and (not $featuredImage) .Params.featureimage }}
18+
{{ $featuredImage = resources.GetRemote .Params.featureimage }}
19+
{{ end }}
20+
{{ if not $featuredImage }}
21+
{{ $featuredImage = resources.Get .Site.Params.defaultFeaturedImage }}
22+
{{ end }}
23+
{{ $disableImageOptimization := .Page.Site.Params.disableImageOptimization | default false }}
24+
{{ if and ($featuredImage) (not (or ($disableImageOptimization) (strings.HasSuffix $featuredImage.Name ".svg"))) }}
25+
{{ $featuredImage = $featuredImage.Resize "600x" }}
2526
{{ end }}
26-
{{ else }}
27-
{{ with .Resize "600x" }}
28-
<div class="w-full thumbnail_card_related nozoom" style="background-image:url({{ .RelPermalink }});"></div>
27+
{{ with $featuredImage }}
28+
{{ $className := printf "background-image-%s" (md5 .RelPermalink) }}
29+
<div class="w-full thumbnail_card_related nozoom {{ $className }}"></div>
30+
{{ else }}
31+
{{ with $.Site.Params.images }}
32+
<meta property="og:image" content="{{ index . 0 | absURL }}" />
2933
{{ end }}
3034
{{ end }}
31-
{{- else -}}
32-
{{- with $.Site.Params.images }}
33-
<meta property="og:image" content="{{ index . 0 | absURL }}" />{{ end -}}
34-
{{- end -}}
35-
{{- end -}}
36-
35+
{{ end }}
3736

3837
{{ if and .Draft .Site.Params.article.showDraftLabel }}
3938
<span class="absolute top-0 right-0 m-2">

‎layouts/partials/article-link/card.html‎

Lines changed: 24 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
{{ $disableImageOptimization := .Page.Site.Params.disableImageOptimization | default false }}
21
{{ with .Params.externalUrl }}
32
<a href="{{ . }}" target="_blank" rel="external" class="min-w-full">
43
{{ else }}
@@ -10,30 +9,33 @@
109
{{- range first 6 . }}
1110
<meta property="og:image" content="{{ . | absURL }}" />{{ end -}}
1211
{{- else -}}
13-
{{- $images := $.Resources.ByType "image" -}}
14-
{{- $featured := $images.GetMatch "*feature*" -}}
15-
{{- if not $featured }}{{ $featured = $images.GetMatch "{*cover*,*thumbnail*}" }}{{ end -}}
16-
{{ if and .Params.featureimage (not $featured) }}
17-
{{- $url:= .Params.featureimage -}}
18-
{{ $featured = resources.GetRemote $url }}
19-
{{ end }}
20-
{{- if not $featured }}{{ with .Site.Params.defaultFeaturedImage }}{{ $featured = resources.Get . }}{{ end }}{{ end -}}
21-
{{ if .Params.hideFeatureImage }}{{ $featured = false }}{{ end }}
22-
{{- with $featured -}}
23-
{{ if or $disableImageOptimization (strings.HasSuffix $featured ".svg")}}
24-
{{ with . }}
25-
<div class="w-full thumbnail_card nozoom" style="background-image:url({{ .RelPermalink }});"></div>
12+
{{ $images := $.Resources.ByType "image" }}
13+
{{ $featuredImage := $images.GetMatch "*feature*" }}
14+
{{ if not $featuredImage }}
15+
{{ $featuredImage = $images.GetMatch "{*cover*,*thumbnail*}" }}
16+
{{ end }}
17+
{{ if and (not $featuredImage) .Params.featureimage }}
18+
{{ $featuredImage = resources.GetRemote .Params.featureimage }}
19+
{{ end }}
20+
{{ if not $featuredImage }}
21+
{{ $featuredImage = resources.Get .Site.Params.defaultFeaturedImage }}
22+
{{ end }}
23+
{{ $disableImageOptimization := .Page.Site.Params.disableImageOptimization | default false }}
24+
{{ if and ($featuredImage) (not (or ($disableImageOptimization) (strings.HasSuffix $featuredImage.Name ".svg"))) }}
25+
{{ $featuredImage = $featuredImage.Resize "600x" }}
2626
{{ end }}
27-
{{ else }}
28-
{{ with .Resize "600x" }}
29-
<div class="w-full thumbnail_card nozoom" style="background-image:url({{ .RelPermalink }});"></div>
27+
{{ if .Params.hideFeatureImage }}
28+
{{ $featuredImage = false }}
29+
{{ end }}
30+
{{ with $featuredImage }}
31+
{{ $className := printf "background-image-%s" (md5 .RelPermalink) }}
32+
<div class="w-full thumbnail_card nozoom {{ $className }}"></div>
33+
{{ else }}
34+
{{ with $.Site.Params.images }}
35+
<meta property="og:image" content="{{ index . 0 | absURL }}" />
3036
{{ end }}
3137
{{ end }}
32-
{{- else -}}
33-
{{- with $.Site.Params.images }}
34-
<meta property="og:image" content="{{ index . 0 | absURL }}" />{{ end -}}
35-
{{- end -}}
36-
{{- end -}}
38+
{{ end }}
3739

3840

3941
{{ if and .Draft .Site.Params.article.showDraftLabel }}

‎layouts/partials/article-link/simple.html‎

Lines changed: 24 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,6 @@
1414
{{ $articleImageClasses = delimit (slice $articleImageClasses "thumbnailshadow md:mr-7") " " }}
1515
{{ end }}
1616

17-
{{ $disableImageOptimization := .Page.Site.Params.disableImageOptimization | default false }}
18-
1917
{{ $articleInnerClasses := "" }}
2018
{{ if .Site.Params.list.showCards }}
2119
{{ $articleInnerClasses = delimit (slice $articleInnerClasses "p-4") " " }}
@@ -37,30 +35,33 @@
3735
{{- range first 6 . }}
3836
<meta property="og:image" content="{{ . | absURL }}" />{{ end -}}
3937
{{- else -}}
40-
{{- $images := $.Resources.ByType "image" -}}
41-
{{- $featured := $images.GetMatch "*feature*" -}}
42-
{{- if not $featured }}{{ $featured = $images.GetMatch "{*cover*,*thumbnail*}" }}{{ end -}}
43-
{{ if and .Params.featureimage (not $featured) }}
44-
{{- $url:= .Params.featureimage -}}
45-
{{ $featured = resources.GetRemote $url }}
46-
{{ end }}
47-
{{- if not $featured }}{{ with .Site.Params.defaultFeaturedImage }}{{ $featured = resources.Get . }}{{ end }}{{ end -}}
48-
{{ if .Params.hideFeatureImage }}{{ $featured = false }}{{ end }}
49-
{{- with $featured -}}
50-
{{ if or $disableImageOptimization (strings.HasSuffix $featured ".svg")}}
51-
{{ with . }}
52-
<div class="{{ $articleImageClasses }}" style="background-image:url({{ .RelPermalink }});"></div>
53-
{{ end }}
38+
{{ $images := $.Resources.ByType "image" }}
39+
{{ $featuredImage := $images.GetMatch "*feature*" }}
40+
{{ if not $featuredImage }}
41+
{{ $featuredImage = $images.GetMatch "{*cover*,*thumbnail*}" }}
42+
{{ end }}
43+
{{ if and (not $featuredImage) .Params.featureimage }}
44+
{{ $featuredImage = resources.GetRemote .Params.featureimage }}
45+
{{ end }}
46+
{{ if not $featuredImage }}
47+
{{ $featuredImage = resources.Get .Site.Params.defaultFeaturedImage }}
48+
{{ end }}
49+
{{ $disableImageOptimization := .Page.Site.Params.disableImageOptimization | default false }}
50+
{{ if and ($featuredImage) (not (or ($disableImageOptimization) (strings.HasSuffix $featuredImage.Name ".svg"))) }}
51+
{{ $featuredImage = $featuredImage.Resize "600x" }}
52+
{{ end }}
53+
{{ if .Params.hideFeatureImage }}
54+
{{ $featuredImage = false }}
55+
{{ end }}
56+
{{ with $featuredImage }}
57+
{{ $className := printf "background-image-%s" (md5 .RelPermalink) }}
58+
<div class="{{ $articleImageClasses }} {{ $className }}"></div>
5459
{{ else }}
55-
{{ with .Resize "600x" }}
56-
<div class="{{ $articleImageClasses }}" style="background-image:url({{ .RelPermalink }});"></div>
60+
{{ with $.Site.Params.images }}
61+
<meta property="og:image" content="{{ index . 0 | absURL }}" />
5762
{{ end }}
5863
{{ end }}
59-
{{- else -}}
60-
{{- with $.Site.Params.images }}
61-
<meta property="og:image" content="{{ index . 0 | absURL }}" />{{ end -}}
62-
{{- end -}}
63-
{{- end -}}
64+
{{ end }}
6465

6566

6667
<div class="{{ $articleInnerClasses }}">

‎layouts/partials/head.html‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,38 @@
4545
{{ if $cssCustom }}
4646
{{ $assets.Add "css" (slice $cssCustom) }}
4747
{{ end }}
48+
49+
{{ $images := slice }}
50+
{{ $backgroundAndfeaturedImages := slice }}
51+
{{ range .Site.Pages }}
52+
{{ $images = $images | append (.Page.Resources.ByType "image") }}
53+
{{ if .Params.featureimage }}
54+
{{ $backgroundAndfeaturedImages = $backgroundAndfeaturedImages | append (resources.GetRemote .Params.featureimage) }}
55+
{{ end }}
56+
{{ end }}
57+
{{ $backgroundAndfeaturedImages = $backgroundAndfeaturedImages | append ($images.Match "{*background*,*feature*,*cover*,*thumbnail*}") }}
58+
{{ $siteParams := slice .Site.Params.defaultFeaturedImage .Site.Params.defaultBackgroundImage }}
59+
{{ range $siteParams }}
60+
{{ if or (strings.HasPrefix . "http:") (strings.HasPrefix . "https:") }}
61+
{{ $backgroundAndfeaturedImages = $backgroundAndfeaturedImages | append (resources.GetRemote .) }}
62+
{{ else }}
63+
{{ $backgroundAndfeaturedImages = $backgroundAndfeaturedImages | append (resources.Get .) }}
64+
{{ end }}
65+
{{ end }}
66+
{{ $disableImageOptimization := .Page.Site.Params.disableImageOptimization | default false }}
67+
{{ range $backgroundAndfeaturedImages }}
68+
{{ $backgroundAndfeaturedImages := . }}
69+
{{ if not (or ($disableImageOptimization) (strings.HasSuffix .Name ".svg")) }}
70+
{{ $backgroundAndfeaturedImages = .Resize "600x" }}
71+
{{ end }}
72+
{{ with $backgroundAndfeaturedImages }}
73+
{{ $className := printf "background-image-%s" (md5 .RelPermalink) }}
74+
{{ $cssBackgroundImage := printf ".%s { background-image: url(\"%s\"); }" $className .RelPermalink }}
75+
{{ $cssBackgroundImage = $cssBackgroundImage | resources.FromString "css/background-image.css" }}
76+
{{ $assets.Add "css" (slice $cssBackgroundImage) }}
77+
{{ end }}
78+
{{ end }}
79+
4880
{{ $bundleCSS := $assets.Get "css" | resources.Concat "css/main.bundle.css" | resources.Minify | resources.Fingerprint
4981
(.Site.Params.fingerprintAlgorithm | default "sha512") }}
5082
<link type="text/css" rel="stylesheet" href="{{ $bundleCSS.RelPermalink }}"

‎layouts/partials/hero/background.html‎

Lines changed: 42 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -1,62 +1,55 @@
1-
{{ $disableImageOptimization := .Page.Site.Params.disableImageOptimization | default false }}
2-
3-
{{- $images := .Resources.ByType "image" -}}
4-
{{- $featured := $images.GetMatch "*background*" -}}
5-
{{- if not $featured }}{{ $featured = $images.GetMatch "*feature*" }}{{ end -}}
6-
{{- if not $featured }}{{ $featured = $images.GetMatch "{*cover*,*thumbnail*}" }}{{ end -}}
7-
8-
{{ if and .Params.featureimage (not $featured) }}
9-
{{- $url:= .Params.featureimage -}}
10-
{{ $featured = resources.GetRemote $url }}
1+
{{ $images := .Resources.ByType "image" }}
2+
{{ $backgroundImage := $images.GetMatch "*background*" }}
3+
{{ if not $backgroundImage }}
4+
{{ $backgroundImage := $images.GetMatch "*feature*" }}
115
{{ end }}
12-
13-
{{- if not $featured }}
14-
{{ with .Site.Params.defaultBackgroundImage }}
15-
{{ if or (strings.HasPrefix . "http:") (strings.HasPrefix . "https:") }}
16-
{{ $featured = resources.GetRemote . }}
17-
{{ else }}
18-
{{ $featured = resources.Get . }}
6+
{{ if not $backgroundImage }}
7+
{{ $backgroundImage = $images.GetMatch "{*cover*,*thumbnail*}" }}
8+
{{ end }}
9+
{{ if and (not $backgroundImage) .Params.featureimage }}
10+
{{ $backgroundImage = resources.GetRemote .Params.featureimage }}
11+
{{ end }}
12+
{{ if not $backgroundImage }}
13+
{{ with .Site.Params.defaultBackgroundImage }}
14+
{{ if or (strings.HasPrefix . "http:") (strings.HasPrefix . "https:") }}
15+
{{ $backgroundImage = resources.GetRemote . }}
16+
{{ else }}
17+
{{ $backgroundImage = resources.Get . }}
18+
{{ end }}
1919
{{ end }}
20-
{{ end }}
21-
{{ end -}}
20+
{{ end }}
21+
{{ $disableImageOptimization := .Page.Site.Params.disableImageOptimization | default false }}
22+
{{ if and ($backgroundImage) (not (or ($disableImageOptimization) (strings.HasSuffix $backgroundImage.Name ".svg"))) }}
23+
{{ $backgroundImage = .Resize (print ($.Site.Params.backgroundImageWidth | default "1200") "x") }}
24+
{{ end }}
2225

2326
{{ $isParentList := eq (.Scratch.Get "scope") "list" }}
24-
{{ $shouldBlur := $.Params.layoutBackgroundBlur | default (or
25-
(and ($.Site.Params.article.layoutBackgroundBlur | default true) (not $isParentList))
27+
{{ $shouldBlur := $.Params.layoutBackgroundBlur | default (or
28+
(and ($.Site.Params.article.layoutBackgroundBlur | default true) (not $isParentList))
2629
(and ($.Site.Params.list.layoutBackgroundBlur | default true) ($isParentList))
2730
) }}
28-
{{ $shouldAddHeaderSpace := $.Params.layoutBackgroundHeaderSpace | default (or
29-
(and ($.Site.Params.article.layoutBackgroundHeaderSpace | default true) (not $isParentList))
31+
{{ $shouldAddHeaderSpace := $.Params.layoutBackgroundHeaderSpace | default (or
32+
(and ($.Site.Params.article.layoutBackgroundHeaderSpace | default true) (not $isParentList))
3033
(and ($.Site.Params.list.layoutBackgroundHeaderSpace | default true) ($isParentList))
3134
) }}
32-
{{- with $featured -}}
3335

34-
{{ if $shouldAddHeaderSpace | default true}}
35-
<div id="hero" class="h-[150px] md:h-[200px]"></div>
36-
{{ end }}
37-
38-
{{ if or $disableImageOptimization (strings.HasSuffix $featured ".svg")}}
39-
{{ with . }}
40-
<div class="fixed inset-x-0 top-0 h-[800px] single_hero_background nozoom"
41-
style="background-image:url({{ .RelPermalink }});">
42-
{{ end }}
43-
{{ else }}
44-
{{ with .Resize (print ($.Site.Params.backgroundImageWidth | default "1200") "x") }}
45-
<div class="fixed inset-x-0 top-0 h-[800px] single_hero_background nozoom"
46-
style="background-image:url({{ .RelPermalink }});">
47-
{{ end }}
48-
{{ end }}
49-
50-
<div class="absolute inset-0 bg-gradient-to-t from-neutral dark:from-neutral-800 to-transparent mix-blend-normal">
36+
{{ with $backgroundImage }}
37+
{{ if $shouldAddHeaderSpace | default true}}
38+
<div id="hero" class="h-[150px] md:h-[200px]"></div>
39+
{{ end }}
40+
{{ $className := printf "background-image-%s" (md5 .RelPermalink) }}
41+
<div class="fixed inset-x-0 top-0 h-[800px] single_hero_background nozoom {{ $className }}">
42+
<div
43+
class="absolute inset-0 bg-gradient-to-t from-neutral dark:from-neutral-800 to-transparent mix-blend-normal">
5144
</div>
5245
<div
53-
class="absolute inset-0 opacity-60 bg-gradient-to-t from-neutral dark:from-neutral-800 to-neutral-100 dark:to-neutral-800 mix-blend-normal">
46+
class="absolute inset-0 opacity-60 bg-gradient-to-t from-neutral dark:from-neutral-800 to-neutral-100 dark:to-neutral-800 mix-blend-normal">
5447
</div>
55-
</div>
56-
{{ if $shouldBlur | default false }}
57-
<div id="background-blur" class="fixed opacity-0 inset-x-0 top-0 h-full single_hero_background nozoom backdrop-blur-2xl"></div>
58-
{{ $backgroundBlur := resources.Get "js/background-blur.js" }}
59-
{{ $backgroundBlur = $backgroundBlur | resources.Minify | resources.Fingerprint ($.Site.Params.fingerprintAlgorithm | default "sha512") }}
60-
<script type="text/javascript" src="{{ $backgroundBlur.RelPermalink }}" integrity="{{ $backgroundBlur.Data.Integrity }}" data-target-id="background-blur"></script>
48+
</div>
49+
{{ if $shouldBlur | default false }}
50+
<div id="background-blur" class="fixed opacity-0 inset-x-0 top-0 h-full single_hero_background nozoom backdrop-blur-2xl"></div>
51+
{{ $backgroundBlur := resources.Get "js/background-blur.js" }}
52+
{{ $backgroundBlur = $backgroundBlur | resources.Minify | resources.Fingerprint ($.Site.Params.fingerprintAlgorithm | default "sha512") }}
53+
<script type="text/javascript" src="{{ $backgroundBlur.RelPermalink }}" integrity="{{ $backgroundBlur.Data.Integrity }}" data-target-id="background-blur"></script>
54+
{{ end }}
6155
{{ end }}
62-
{{- end -}}

‎layouts/partials/hero/basic.html‎

Lines changed: 22 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,29 @@
1-
{{ $disableImageOptimization := .Page.Site.Params.disableImageOptimization | default false }}
2-
3-
{{- $images := .Resources.ByType "image" -}}
4-
{{- $featured := $images.GetMatch "*background*" -}}
5-
{{- if not $featured }}{{ $featured = $images.GetMatch "*feature*" }}{{ end -}}
6-
{{- if not $featured }}{{ $featured = $images.GetMatch "{*cover*,*thumbnail*}" }}{{ end -}}
7-
8-
{{ if and .Params.featureimage (not $featured) }}
9-
{{- $url:= .Params.featureimage -}}
10-
{{ $featured = resources.GetRemote $url }}
1+
{{ $images := .Resources.ByType "image" }}
2+
{{ $backgroundImage := $images.GetMatch "*background*" }}
3+
{{ if not $backgroundImage }}
4+
{{ $backgroundImage := $images.GetMatch "*feature*" }}
115
{{ end }}
12-
13-
{{- if not $featured }}
6+
{{ if not $backgroundImage }}
7+
{{ $backgroundImage = $images.GetMatch "{*cover*,*thumbnail*}" }}
8+
{{ end }}
9+
{{ if and (not $backgroundImage) .Params.featureimage }}
10+
{{ $backgroundImage = resources.GetRemote .Params.featureimage }}
11+
{{ end }}
12+
{{ if not $backgroundImage }}
1413
{{ with .Site.Params.defaultBackgroundImage }}
1514
{{ if or (strings.HasPrefix . "http:") (strings.HasPrefix . "https:") }}
16-
{{ $featured = resources.GetRemote . }}
15+
{{ $backgroundImage = resources.GetRemote . }}
1716
{{ else }}
18-
{{ $featured = resources.Get . }}
17+
{{ $backgroundImage = resources.Get . }}
1918
{{ end }}
2019
{{ end }}
21-
{{ end -}}
20+
{{ end }}
21+
{{ $disableImageOptimization := .Page.Site.Params.disableImageOptimization | default false }}
22+
{{ if and ($backgroundImage) (not (or ($disableImageOptimization) (strings.HasSuffix $backgroundImage.Name ".svg"))) }}
23+
{{ $backgroundImage = .Resize (print ($.Site.Params.backgroundImageWidth | default "1200") "x") }}
24+
{{ end }}
2225

23-
{{- with $featured -}}
24-
{{ if or $disableImageOptimization (strings.HasSuffix $featured ".svg") }}
25-
{{ with . }}
26-
<div
27-
class="w-full h-36 md:h-56 lg:h-72 single_hero_basic nozoom"
28-
style="background-image:url({{ .RelPermalink }});"></div>
29-
{{ end }}
30-
{{ else }}
31-
{{ with .Resize (print ($.Site.Params.backgroundImageWidth | default "1200") "x") }}
32-
<div
33-
class="w-full h-36 md:h-56 lg:h-72 single_hero_basic nozoom"
34-
style="background-image:url({{ .RelPermalink }});"></div>
35-
{{ end }}
36-
{{ end }}
37-
{{- end -}}
26+
{{ with $backgroundImage }}
27+
{{ $className := printf "background-image-%s" (md5 .RelPermalink) }}
28+
<div class="fixed inset-x-0 top-0 h-[800px] single_hero_background nozoom {{ $className }}"></div>
29+
{{ end }}

0 commit comments

Comments
 (0)