Skip to content

feat: performance optimizations #551

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
therobrob wants to merge 10 commits into
base: main
Choose a base branch
from
Open

feat: performance optimizations #551

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
16ea1c9
feat: modified font and loading config
therobrob Dec 28, 2025
b8a2fea
refactor: merged pagefind css
therobrob Dec 28, 2025
497c7a0
refactor: merged pagefind css
therobrob Dec 28, 2025
f7c726e
refactor: Simplify fetchpriority
MoritzWeber0 Dec 29, 2025
8441080
refactor: Remove unnecessary comments
MoritzWeber0 Dec 29, 2025
06d03c3
Merge branch 'main' into feat/performance-optimizations
therobrob Jan 8, 2026
50c0adf
fix: rearranged head-order
therobrob Jan 8, 2026
96466e6
prettier
therobrob Jan 8, 2026
50551c4
fix: removed font metric overrides
therobrob Jan 8, 2026
b5f7174
fix: fixed search.scss
therobrob Jan 8, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion assets/sass/fonts.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -119,7 +119,6 @@
U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
U+2212, U+2215, U+FEFF, U+FFFD;
font-display: block; // Do not display icons until font is fully loaded
}

body,
Expand Down
269 changes: 158 additions & 111 deletions assets/sass/search.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,138 +10,185 @@ $search-z-index-focus: 12;
display: none;
}

.pagefind-ui__search-input,
.pagefind-ui__message {
font-family: "Roboto", Arial, Helvetica, sans-serif;
font-weight: 400;
}

.pagefind-ui__message {
padding: 1rem;
}
.pagefind-ui {
width: 100%;

.pagefind-ui__results-area {
margin-top: 0;
max-height: 50vh;
padding: 0 1rem;
overflow-y: scroll;
&__form {
position: relative;

&::before {
content: "search";
position: absolute;
top: 23px;
left: 20px;
z-index: $search-z-index + 1;
font-family: "Material Symbols Rounded";
opacity: 0.7;
pointer-events: none;
line-height: 1;
}
}

@media (max-width: #{$breakpoint-md}) {
max-height: calc(100dvh - 17rem);
&__message {
padding: 1rem;
margin-bottom: 0;
}
}

.pagefind-ui__results li:last-child {
border-bottom: none;
}
&__results-area {
max-height: 50vh;
padding: 0 1rem;
overflow-y: scroll;

input.pagefind-ui__search-input {
z-index: $search-z-index;
outline: 0.2rem solid transparent;
border: var(--border);
box-shadow: var(--box-shadow);
border-radius: var(--border-radius-l);
@media (max-width: #{$breakpoint-md}) {
max-height: calc(100dvh - 17rem);
}
}

@include focus-indicator(0.2rem);
&__results {
padding-left: 0;
margin-bottom: 0;
}

&::placeholder {
opacity: 0.7;
&__search-input {
z-index: $search-z-index;
outline: 0.2rem solid transparent;
border: var(--border);
box-shadow: var(--box-shadow);
border-radius: var(--border-radius-l);
height: 64px;
background-color: var(--bg-default);
color: var(--color-body);
padding: 0 70px 0 54px;
font-size: 2rem;
position: relative;
display: flex;
width: 100%;
box-sizing: border-box;
font-family: "Roboto", Arial, Helvetica, sans-serif;

@include focus-indicator(0.2rem);

&::placeholder {
opacity: 0.7;
color: var(--color-body);
}

// When results are visible
&:has(
+ .pagefind-ui__search-clear
+ .pagefind-ui__drawer
.pagefind-ui__results-area
) {
border-radius: var(--border-radius-l) var(--border-radius-l) 0 0;
}
}

// This selector is used to identify if search results are visible
&:has(
+ .pagefind-ui__search-clear
+ .pagefind-ui__drawer
.pagefind-ui__results-area
) {
border-radius: var(--border-radius-l) var(--border-radius-l) 0 0;
&__search-clear {
display: none;
}
}

button.pagefind-ui__search-clear {
display: none;
}

.pagefind-ui__suppressed {
display: none;
}

.pagefind-ui__form::before {
z-index: $search-z-index + 1;
}

.pagefind-ui__drawer {
background-color: var(--bg-default);
padding: 0;
overscroll-behavior: contain;
overflow: hidden;
position: absolute;
width: 100%;
z-index: $search-z-index;
border: var(--border);
border-radius: 0 0 var(--border-radius-l) var(--border-radius-l);
}

.pagefind-ui__result {
padding: 2rem 0;
margin: 0 1rem;
border-top: 0.2rem solid grey;
}

.pagefind-ui__result-inner,
.pagefind-ui__result-thumb {
margin-top: 0;
}

.pagefind-ui__result-thumb {
width: 10rem;

@media (max-width: #{$breakpoint-md}) {
&__suppressed {
display: none;
}
}

.pagefind-ui__result-link {
color: var(--link-default);
text-decoration: underline;
border-radius: var(--border-radius-s);

&:hover,
&:focus {
color: var(--link-hovered);
&__drawer {
background-color: var(--bg-default);
overscroll-behavior: contain;
overflow: hidden;
position: absolute;
width: 100%;
z-index: $search-z-index;
border: var(--border);
border-radius: 0 0 var(--border-radius-l) var(--border-radius-l);
box-sizing: border-box;
}
}

.pagefind-ui__result-link:hover,
.pagefind-ui__result-link:focus {
color: var(--link-hovered);
}
&__result {
list-style-type: none;
display: flex;
align-items: flex-start;
gap: 3.2rem;
padding: 2rem 0;
border-top: 0.2rem solid grey;
margin: 0 1rem;

&-inner,
&-thumb {
margin-top: 0;
}

&-thumb {
width: 10rem;

@media (max-width: #{$breakpoint-md}) {
display: none;
}
}

&-title {
display: inline-block;
font-weight: 700;
margin: 0;
}

&-nested {
display: flex;
flex-direction: column;
padding-top: 0.8rem;
padding-left: 2.4rem;

.pagefind-ui__result-link {
font-size: 1.8rem;
}

.pagefind-ui__result-link::before {
content: "subdirectory_arrow_right";
font-family: "Material Symbols Rounded";
position: absolute;
left: -2.4rem;
}
}

&-excerpt {
margin-bottom: 0;
}
}

.pagefind-ui__result-link {
@include focus-indicator(0.2rem);
}
&__result-link {
position: relative;
font-size: 2.2rem;
}

.pagefind-ui__result-link::before {
top: -0.2rem;
}
&__button {
border: 0.2rem solid var(--link-default);
border-radius: var(--border-radius-m);
background: transparent;
color: var(--body-color);
height: 4.8rem;
padding: 1.2rem;
margin-bottom: 1rem;
width: 100%;
text-align: center;
font-weight: 700;
transition:
background 0.2s,
color 0.2s;

&:hover,
&:focus {
background: rgba($link-hovered, 0.15);
}
}

.pagefind-ui--reset mark {
background-color: var(--bg-accent);
color: black;
}
&__hidden {
display: none;
}

button.pagefind-ui__button {
border: 0.2rem solid var(--link-default);
border-radius: var(--border-radius-m);
background: transparent;
color: var(--body-color);
margin-top: 0;
margin-bottom: 1rem;

&:hover,
&:focus {
background: rgba($link-hovered, 0.15);
&--reset {
mark {
background-color: var(--bg-accent);
color: black;
}
}
}
}
Expand Down
2 changes: 1 addition & 1 deletion layouts/_default/home.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
</div>
<div class="o-startpage__image">
{{ $image := resources.Get "images/startpage.webp" }}
{{ partial "image" (dict "image" $image "eager" true) }}
{{ partial "image" (dict "image" $image "eager" true "fetchpriority" "high") }}
</div>
</div>

Expand Down
5 changes: 3 additions & 2 deletions layouts/partials/head.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@
{{ printf "%s | %s" .Title site.Title }}
{{ end }}
</title>
{{ partialCached "head/js" . }}
{{ $options := (dict "targetPath" "css/styles.css" "outputStyle" "compressed") }}
{{ with resources.Get "sass/main.scss" }}
{{ $style := (resources.ExecuteAsTemplate "sass/main_templated.scss" $ .) | toCSS $options | minify }}
Expand All @@ -19,13 +18,15 @@
as="style"
/>
{{ end }}
<link rel="stylesheet" href="/pagefind/pagefind-ui.css" />
<script src="/pagefind/pagefind-ui.js" defer></script>
<script type="module">
await import("/pagefind/pagefind-highlight.js");
new PagefindHighlight({ highlightParam: "highlight" });
</script>

{{ partialCached "head/js" . }}


<!-- include a favicon for your site if you have it, else omit the line below
Location of favicon can be in mytheme/static/favicon.ico -->
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />
Expand Down
1 change: 1 addition & 0 deletions layouts/partials/head/js.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@
src="{{ .RelPermalink }}"
integrity="{{- .Data.Integrity }}"
crossorigin="anonymous"
defer
></script>
{{- end }}
{{- end }}
Expand Down
1 change: 1 addition & 0 deletions layouts/partials/image.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,7 @@
data-decorative="true"
{{- end }}
loading="{{ $loading }}"
{{ with .fetchpriority }}fetchpriority="{{ . }}"{{ end }}
srcset="{{ delimit $srcset ", " }}"
sizes="(max-width: 576px) calc(100vw - 3.2rem), (max-width: 768px) 540px, (max-width: 992px) 720px, (max-width: 1200px) 960px, (max-width: 1400px) 1140px, 1320px"
style="{{ delimit $styles "; " | safeCSS }}"
Expand Down
Loading