Skip to content

Commit 6ce6890

Browse files
netops2devopsnetops2devops
committed
Replaces the static headline with a TypeIt-powered animated version
1 parent 481c9fd commit 6ce6890

File tree

1 file changed

+133
-0
lines changed

1 file changed

+133
-0
lines changed

‎layouts/partials/home/background.html‎

Lines changed: 133 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,133 @@
1+
{{ $disableImageOptimization := .Site.Params.disableImageOptimization | default false }}
2+
{{/* Load TypeIt library for headline animation */}}
3+
{{ $typeitLib := resources.Get "lib/typeit/typeit.umd.js" | resources.Fingerprint (.Site.Params.fingerprintAlgorithm | default "sha512") }}
4+
<script src="{{ $typeitLib.RelPermalink }}" integrity="{{ $typeitLib.Data.Integrity }}"></script>
5+
<article class="prose dark:prose-invert max-w-full">
6+
<div class="relative">
7+
<div class="absolute inset-x-0 bottom-0 h-1/2"></div>
8+
<div class="mx-auto max-w-7xl p-0">
9+
<div class="relative sm:overflow-hidden">
10+
<div class="fixed inset-x-0 top-0 -z-10">
11+
{{ $useDefault := true }}
12+
{{ $homepageImage := "" }}
13+
{{ with .Site.Params.defaultBackgroundImage }}
14+
{{ if or (strings.HasPrefix . "http:") (strings.HasPrefix . "https:") }}
15+
{{ $homepageImage = resources.GetRemote . }}
16+
{{ else }}
17+
{{ $homepageImage = resources.Get . }}
18+
{{ end }}
19+
{{ end }}
20+
{{ with .Site.Params.homepage.homepageImage }}
21+
{{ if or (strings.HasPrefix . "http:") (strings.HasPrefix . "https:") }}
22+
{{ $homepageImage = resources.GetRemote . }}
23+
{{ $useDefault = false }}
24+
{{ else }}
25+
{{ $homepageImage = resources.Get . }}
26+
{{ $useDefault = false }}
27+
{{ end }}
28+
{{ end }}
29+
{{ if $homepageImage }}
30+
{{ $style := "" }}
31+
{{ $defaultPosition := cond $useDefault site.Params.imagePosition false }}
32+
{{ with $.Params.imagePosition | default $defaultPosition }}
33+
{{ $style = printf "object-position: %s;" . }}
34+
{{ end }}
35+
<img
36+
id="background-image"
37+
class="nozoom mt-0 mr-0 mb-0 ml-0 h-[1000px] w-full object-cover"
38+
src="{{ $homepageImage.RelPermalink }}"
39+
role="presentation"
40+
{{ if $style }}style="{{ $style | safeCSS }}"{{ end }}>
41+
<div
42+
class="from-neutral absolute inset-0 h-[1000px] bg-gradient-to-t to-transparent mix-blend-normal dark:from-neutral-800"></div>
43+
<div
44+
class="from-neutral absolute inset-0 h-[1000px] bg-gradient-to-t to-neutral-100 opacity-60 mix-blend-normal dark:from-neutral-800 dark:to-neutral-800"></div>
45+
{{ end }}
46+
</div>
47+
<div class="relative flex flex-col items-center justify-center px-1 py-1 text-center">
48+
{{ with .Site.Params.Author.image }}
49+
{{ $authorImage := "" }}
50+
{{ if or (strings.HasPrefix . "http:") (strings.HasPrefix . "https:") }}
51+
{{ $authorImage = resources.GetRemote . }}
52+
{{ else }}
53+
{{ $authorImage = resources.Get . }}
54+
{{ end }}
55+
{{ if $authorImage }}
56+
{{ $final := $authorImage }}
57+
{{ $squareImage := $authorImage }}
58+
{{ if not (or $disableImageOptimization (eq $authorImage.MediaType.SubType "svg")) }}
59+
{{ $final = $authorImage.Fill (print "288x288 q" ( $.Site.Params.Author.imagequality | default "96" )) }}
60+
{{ $shortSide := int (math.Min $authorImage.Width $authorImage.Height) }}
61+
{{ $squareImage = $authorImage.Crop (printf "%dx%d" $shortSide $shortSide ) }}
62+
{{ end }}
63+
<img
64+
class="mb-2 h-36 w-36 rounded-full"
65+
width="144"
66+
height="144"
67+
alt="{{ $.Site.Params.Author.name | default `Author` }}"
68+
src="{{ $final.RelPermalink }}"
69+
data-zoom-src="{{ $squareImage.RelPermalink }}">
70+
{{ end }}
71+
{{ end }}
72+
<h1 class="mb-2 text-4xl font-extrabold text-neutral-800 dark:text-neutral-200">
73+
{{ .Site.Params.Author.name | default .Site.Title }}
74+
</h1>
75+
{{/* TypeIt headline with typewriter effect */}}
76+
{{ with .Site.Params.Author.headline }}
77+
<h2 id="typeit-headline" class="mt-0 mb-0 text-xl text-neutral-800 dark:text-neutral-300"></h2>
78+
<script>
79+
document.addEventListener("DOMContentLoaded", function () {
80+
new TypeIt("#typeit-headline", {
81+
strings: ["{{ . }}"],
82+
speed: 50,
83+
lifeLike: true,
84+
startDelay: 500,
85+
waitUntilVisible: true,
86+
loop: false,
87+
cursor: true
88+
}).go();
89+
});
90+
</script>
91+
{{ end }}
92+
<div class="mt-3 mb-10 text-2xl">
93+
{{ with .Site.Params.Author.links }}
94+
<div class="flex flex-wrap">
95+
{{ range $links := . }}
96+
{{ range $name, $url := $links }}
97+
<a
98+
class="hover:text-primary-400 text-primary-800 dark:text-primary-200 px-1"
99+
href="{{ $url }}"
100+
target="_blank"
101+
aria-label="{{ $name | title }}"
102+
title="{{ $name | title }}"
103+
rel="me noopener noreferrer">
104+
{{ partial "icon.html" $name }}
105+
</a>
106+
{{ end }}
107+
{{ end }}
108+
</div>
109+
{{ end }}
110+
</div>
111+
<section class="prose dark:prose-invert w-full">{{ .Content }}</section>
112+
</div>
113+
</div>
114+
</div>
115+
</div>
116+
</article>
117+
<section>
118+
{{ partial "recent-articles/main.html" . }}
119+
</section>
120+
{{ if .Site.Params.homepage.layoutBackgroundBlur | default false }}
121+
<div
122+
id="background-blur"
123+
class="fixed opacity-0 inset-x-0 top-0 h-full single_hero_background nozoom backdrop-blur-xl bg-neutral-100/75 dark:bg-neutral-800/60"></div>
124+
{{ $backgroundBlur := resources.Get "js/background-blur.js" }}
125+
{{ $backgroundBlur = $backgroundBlur | resources.Minify | resources.Fingerprint (.Site.Params.fingerprintAlgorithm | default "sha512") }}
126+
<script
127+
type="text/javascript"
128+
src="{{ $backgroundBlur.RelPermalink }}"
129+
integrity="{{ $backgroundBlur.Data.Integrity }}"
130+
data-blur-id="background-blur"
131+
data-image-id="background-image"
132+
{{ if $homepageImage }}data-image-url="{{ $homepageImage.RelPermalink }}"{{ end }}></script>
133+
{{ end }}

0 commit comments

Comments
 (0)