Added search

main
Timo Montalto 2025-04-03 14:26:28 +02:00
parent 4dfa066b22
commit 66afbb611a
11 changed files with 170 additions and 10 deletions

View File

@ -219,3 +219,78 @@ a:hover {
} }
/* Pagefind UI */
#toggle-search {
color: #ddd;
border-bottom: 3px solid var(--darkMaincolor);
}
.pagefind-ui__form::before {
background-color: #ddd !important;
}
.pagefind-ui__search-input {
background-color: #333 !important;
border-color: #333 !important;
outline: none !important;
outline: 2px solid var(--darkMaincolor) !important;
color: #ddd !important;
}
.pagefind-ui__search-clear {
background-color: #333 !important;
color: #ddd !important;
}
.pagefind-ui__message {
color: #ddd;
}
.pagefind-ui__result {
border-color: rgb(102, 51, 153) !important;
border-style: dotted !important;
border-width: 6px 0 0 0 !important;
}
.pagefind-ui__result:last-child {
border-bottom-width: 6px !important;
}
.pagefind-ui__result-title {
font-family: "Roboto Mono", monospace;
}
.pagefind-ui__result-excerpt {
font-family: Montserrat, sans-serif;
color: #ddd;
}
.pagefind-ui__result-title::before {
color: var(--darkMaincolor);
content: '# ';
}
.pagefind-ui__result-title .pagefind-ui__result-link {
color: #ddd !important;
border-bottom: 3px solid var(--darkMaincolor);
text-decoration: none;
}
.pagefind-ui__result-title .pagefind-ui__result-link:hover {
text-decoration: none !important;
color: black !important;
}
.pagefind-ui__button {
background-color: #333 !important;
border-color: #333 !important;
color: #ddd !important;
}
.pagefind-ui__button:hover {
border-color: var(--darkMaincolor) !important;
}

View File

@ -456,4 +456,66 @@ table td{
.translations-block a:hover { .translations-block a:hover {
background-color: #000000; background-color: #000000;
color: var(--callouctcolor); color: var(--callouctcolor);
} }
.pagefind-ui__result-title.svelte-j9e30.svelte-j9e30 {
display: inline-block;
font-weight: 700;
font-size: calc(21px * var(--pagefind-ui-scale));
margin-top: 0;
margin-bottom: 0;
}
/* Pagefind UI */
#toggle-search {
background: transparent;
border: none;
border-bottom: 3px solid var(--maincolor);
margin: 0;
padding: 0 ;
}
.pagefind-ui__search-input {
outline-color: var(--maincolor);
}
.pagefind-ui__result {
border-color: rgb(102, 51, 153) !important;
border-style: dotted !important;
border-width: 6px 0 0 0 !important;
}
.pagefind-ui__result:last-child {
border-bottom-width: 6px !important;
}
.pagefind-ui__result-title {
font-family: "Roboto Mono", monospace;
}
.pagefind-ui__result-excerpt {
font-family: Montserrat, sans-serif;
}
.pagefind-ui__result-title::before {
color: var(--maincolor);
content: '# ';
}
.pagefind-ui__result-title .pagefind-ui__result-link {
color: var(--pagefind-ui-text);
border-bottom: 3px solid var(--maincolor);
text-decoration: none;
}
.pagefind-ui__result-title .pagefind-ui__result-link:hover {
text-decoration: none !important;
color: white !important;
}
.pagefind-ui__button:hover {
border-color: var(--maincolor) !important;
}

View File

@ -1,5 +1,5 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html lang="{{ .Site.Language.LanguageCode | default "de-de" }}">
{{ partial "header.html" . }} {{ partial "header.html" . }}
<body> <body>
<div class="content"> <div class="content">

View File

@ -1,5 +1,5 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html lang="{{ .Site.Language.LanguageCode | default "de-de" }}">
{{- partial "header.html" . -}} {{- partial "header.html" . -}}
<body> <body>
<div class="content"> <div class="content">

View File

@ -5,7 +5,7 @@
<h1 class="page-title">All articles</h1> <h1 class="page-title">All articles</h1>
{{ end }} {{ end }}
<ul class="posts"> <ul class="posts" data-pagefind-ignore="all">
{{- range .Data.Pages -}} {{- range .Data.Pages -}}
{{- if (not (in (.Site.Params.excludedTypes | default (slice "page")) .Type)) -}} {{- if (not (in (.Site.Params.excludedTypes | default (slice "page")) .Type)) -}}
<li class="post"> <li class="post">

View File

@ -1,11 +1,11 @@
{{ define "main" }} {{ define "main" }}
{{ if isset .Data "Term" }} {{ if isset .Data "Term" }}
<h1>{{ i18n "EntriesTagged" }} - "{{ .Data.Term }}"</h1> <h1 data-pagefind-ignore="all">{{ i18n "EntriesTagged" }} - "{{ .Data.Term }}"</h1>
{{ else }} {{ else }}
<h1 class="page-title">All articles</h1> <h1 class="page-title">All articles</h1>
{{ end }} {{ end }}
<ul class="posts"> <ul class="posts" data-pagefind-ignore="all">
{{- range .Data.Pages -}} {{- range .Data.Pages -}}
{{- if (not (in (.Site.Params.excludedTypes | default (slice "page")) .Type)) -}} {{- if (not (in (.Site.Params.excludedTypes | default (slice "page")) .Type)) -}}
<li class="post"> <li class="post">

View File

@ -8,7 +8,7 @@
{{ $size := $min }} {{ $size := $min }}
{{ $data := .Data }} {{ $data := .Data }}
<div class="tag-cloud"> <div class="tag-cloud" data-pagefind-ignore="all">
<ul class="tags"> <ul class="tags">
{{ range $key, $value := .Data.Terms.ByCount }} {{ range $key, $value := .Data.Terms.ByCount }}
{{ $size := (add (mul (div $value.Count $biggest) (sub $max $min)) $min) }} {{ $size := (add (mul (div $value.Count $biggest) (sub $max $min)) $min) }}

View File

@ -1,11 +1,11 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html lang="{{ .Site.Language.LanguageCode | default "de-de" }}">
{{ partial "header.html" . }} {{ partial "header.html" . }}
<body> <body>
<div class="content"> <div class="content">
{{ partial "head.html" . }} {{ partial "head.html" . }}
<main class="list"> <main class="list" data-pagefind-ignore="all">
<div class="site-description"> <div class="site-description">
{{- if isset .Site.Params "subtitle" -}} {{- if isset .Site.Params "subtitle" -}}
<p>{{ .Site.Params.Subtitle | .Page.RenderString }}</p> <p>{{ .Site.Params.Subtitle | .Page.RenderString }}</p>

View File

@ -16,3 +16,9 @@
{{ end }} {{ end }}
</div> </div>
</footer> </footer>
<script>
window.addEventListener('DOMContentLoaded', (event) => {
new PagefindUI({ element: "#search", showSubResults: false });
});
</script>

View File

@ -30,5 +30,17 @@
{{ else -}} {{ else -}}
| <a href="{{ .Site.BaseURL }}">DE</a> | <a href="{{ .Site.BaseURL }}">DE</a>
{{ end }} {{ end }}
| <button id="toggle-search" onclick="toggleSearch()" aria-label="Toggle Search">
{{ template "feathericon" (dict "UseCDN" .Site.Params.useCDN "Icon" "search") }}
</button>
</nav> </nav>
</header> </header>
<div id="search" style="display: none;"></div>
<script>
function toggleSearch() {
const searchField = document.getElementById('search');
searchField.style.display = searchField.style.display === 'none' ? 'block' : 'none';
}
</script>

View File

@ -1,4 +1,4 @@
<head lang="{{ .Site.Language.Lang }}"> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
{{- $title := ( .Title ) -}} {{- $title := ( .Title ) -}}
@ -33,6 +33,10 @@
{{- end -}} {{- end -}}
{{- end -}} {{- end -}}
{{- end -}} {{- end -}}
<link href="/pagefind/pagefind-ui.css" rel="stylesheet">
<script src="/pagefind/pagefind-ui.js"></script>
{{ if .Site.Params.useCDN | default false -}} {{ if .Site.Params.useCDN | default false -}}
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@1,500&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@1,500&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Fira+Sans&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Fira+Sans&display=swap" rel="stylesheet">
@ -115,4 +119,5 @@
<script src="{{ absURL . }}"></script> <script src="{{ absURL . }}"></script>
{{- end }} {{- end }}
{{- end }} {{- end }}
</head> </head>