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

@ -457,3 +457,65 @@ table td{
background-color: #000000;
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>
<html>
<html lang="{{ .Site.Language.LanguageCode | default "de-de" }}">
{{ partial "header.html" . }}
<body>
<div class="content">

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -30,5 +30,17 @@
{{ else -}}
| <a href="{{ .Site.BaseURL }}">DE</a>
{{ end }}
| <button id="toggle-search" onclick="toggleSearch()" aria-label="Toggle Search">
{{ template "feathericon" (dict "UseCDN" .Site.Params.useCDN "Icon" "search") }}
</button>
</nav>
</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 http-equiv="X-UA-Compatible" content="IE=edge">
{{- $title := ( .Title ) -}}
@ -33,6 +33,10 @@
{{- end -}}
{{- end -}}
{{- end -}}
<link href="/pagefind/pagefind-ui.css" rel="stylesheet">
<script src="/pagefind/pagefind-ui.js"></script>
{{ 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=Fira+Sans&display=swap" rel="stylesheet">
@ -115,4 +119,5 @@
<script src="{{ absURL . }}"></script>
{{- end }}
{{- end }}
</head>