fundor333/fundor333.com
1
0
Fork 0
Code Issues Pull Requests Actions 5 Packages Projects Releases Wiki Activity

Refactor header and search components for improved structure and functionality

Browse Source
This commit is contained in:
Fundor333
2026-01-12 12:08:17 +01:00
parent 45f0f20b1a
commit 6fbdb689fb
4 changed files with 106 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files

138
layouts/partials/header.html
View File

@@ -1,75 +1,69 @@
<div class="navbar" role="navigation"> <div class="navbar" role="navigation">
<nav class="menu" aria-label="Main Navigation"> <nav class="menu" aria-label="Main Navigation">
<a href="{{ .Site.Home.Permalink }}" class="logo"> <a href="{{ .Site.Home.Permalink }}" class="logo">
<i class="fa-solid fa-code fa-xl"></i> <i class="fa-solid fa-code fa-xl"></i>
</a> </a>
<input type="checkbox" id="menu-trigger" class="menu-trigger" /> <input type="checkbox" id="menu-trigger" class="menu-trigger" />
<label for="menu-trigger"> <label for="menu-trigger">
<span class="menu-icon"> <span class="menu-icon">
<i class="fa-regular fa-bars fa-xl"></i> <i class="fa-regular fa-bars fa-xl"></i>
</span> </span>
</label> </label>
<div class="trigger"> <div class="trigger">
<ul class="trigger-container"> <ul class="trigger-container">
{{ $currentPage := . }} {{ $currentPage := . }}
{{ range .Site.Menus.main }} {{ range .Site.Menus.main }}
<li> <li>
<a class="menu-link {{ if or ($currentPage.IsMenuCurrent "main" .) <a class="menu-link {{ if or ($currentPage.IsMenuCurrent "main" .)
($currentPage.HasMenuCurrent "main" .) }}active{{ end }}" href="{{ .URL }}"> ($currentPage.HasMenuCurrent "main" .) }}active{{ end }}" href="{{ .URL }}">
{{ .Name }} {{ .Name }}
</a> </a>
{{ if .HasChildren }} {{ if .HasChildren }}
<ul> <ul>
{{ range .Children }} {{ range .Children }}
<li> <li>
<a class="menu-link {{ if $currentPage.IsMenuCurrent "main" . }}active{{ end }}" <a class="menu-link {{ if $currentPage.IsMenuCurrent "main" . }}active{{ end }}"
href="{{ .URL }}"> href="{{ .URL }}">
{{ .Name }} {{ .Name }}
</a> </a>
</li> </li>
{{ end }} {{ end }}
</ul> </ul>
{{ end }} {{ end }}
</li> </li>
{{ end }} {{ end }}
<li> <li>
{{ partial "search-form.html" . }} <a class="menu-link" href="/search">
</li> <i class="fa-solid fa-magnifying-glass"></i>
<li class="menu-separator"> </a> </li>
<span>|</span> <!-- Language List -->
</li> {{ if .IsTranslated }}
<!-- Language List --> <li>
{{ if .IsTranslated }} <select aria-label="Select Language" class="lang-list" id="select-language" onchange="location = this.value;">
<li> {{ $siteLanguages := .Site.Languages}}
<select aria-label="Select Language" class="lang-list" id="select-language" onchange="location = this.value;"> {{ $pageLang := .Page.Lang}}
{{ $siteLanguages := .Site.Languages}} {{ range .Page.AllTranslations }}
{{ $pageLang := .Page.Lang}} {{ $translation := .}}
{{ range .Page.AllTranslations }} {{ range $siteLanguages }}
{{ $translation := .}} {{ if eq $translation.Lang .Lang }}
{{ range $siteLanguages }} {{ $selected := false }}
{{ if eq $translation.Lang .Lang }} {{ if eq $pageLang .Lang}}
{{ $selected := false }} <option id="{{ $translation.Language }}" value="{{ $translation.Permalink }}" selected>{{ .LanguageCode | upper }}
{{ if eq $pageLang .Lang}} </option>
<option id="{{ $translation.Language }}" value="{{ $translation.Permalink }}" selected>{{ .LanguageCode | upper }} {{ else }}
</option> <option id="{{ $translation.Language }}" value="{{ $translation.Permalink }}">{{ .LanguageCode | upper }}</option>
{{ else }} {{ end }}
<option id="{{ $translation.Language }}" value="{{ $translation.Permalink }}">{{ .LanguageCode | upper }}</option> {{ end }}
{{ end }} {{ end }}
{{ end }} {{ end }}
{{ end }} </select>
{{ end }} </li>
</select> <li class="menu-separator">
</li> <span>|</span>
<li class="menu-separator"> </li>
<span>|</span> {{ end }}
</li> </ul>
{{ end }} </div>
</ul> </nav>
<a id="mode" href="#">
<i class="fa-regular fa-sun mode-sunny fa-xl"></i>
<i class="fa-regular fa-moon mode-moon fa-xl"></i>
</a>
</div>
</nav>
</div> </div>

34
layouts/partials/search-form.html
View File

@@ -1,6 +1,32 @@
<form id="search" <form id="search"
action='{{ with .GetPage "/search" }}{{.Permalink}}{{end}}' method="get"> action='{{ with .GetPage "/search" }}{{.Permalink}}{{end}}' method="get">
<label hidden for="search-input">Search site</label> <label hidden for="search-input">Search site</label>
<input type="text" id="search-input" name="q" <input type="text" id="search-input" name="q"
placeholder=""> placeholder>
</form> </form>
<script>
function popolaInputDaUrl(nomeParametro, idInput) {
// 1. Recupera la stringa dei parametri dall'URL corrente
const params = new URLSearchParams(window.location.search);
// 2. Estrae il valore associato alla chiave specificata
const valore = params.get(nomeParametro);
// 3. Se il valore esiste, popola l'elemento input
if (valore) {
const inputElement = document.getElementById(idInput);
if (inputElement) {
inputElement.value = valore;
}
}
}
// Esempio di utilizzo all'avvio della pagina:
window.onload = () => {
popolaInputDaUrl('q', 'search-input');
};
</script>

11
layouts/partials/search-index.html
View File

@@ -1,11 +1,12 @@
<template id="search-result" hidden> <template id="search-result" hidden>
<article class="content post post-item"> <article class="content post post-item">
<h4 class="post-title post-item-title"><a class="read-more-link"><i class="fa-duotone fa-regular fa-flag-pennant"></i> <a class="summary-title-link"></a></a></h4> <h4 class="post-title post-item-title"><a class="read-more-link"><i class="fa-duotone fa-regular fa-flag-pennant"></i> <a
<summary class="summary" hidden></summary> class="summary-title-link"></a></a></h4>
<summary class="summary" hidden></summary>
<div class="read-more-container"> <div class="read-more-container">
<time class="post-item-meta"></time> <time class="post-item-meta"></time>
</div> </div>
</article> </article>
</template> </template>

7
layouts/search/list.html
View File

@@ -3,8 +3,9 @@
{{ define "main"}} {{ define "main"}}
<div class="wrapper list-page"> <div class="wrapper list-page">
<header class="header"> <header class="header">
<h1 class="header-title center">{{ .Title }}</h1> <h1 class="header-title center">{{ .Title }}</h1>
</header> </header>
{{ partial "search-form.html" . }}
<main class="page-content" aria-label="Content"> <main class="page-content" aria-label="Content">
@@ -12,12 +13,12 @@
<div class="main-inner"> <div class="main-inner">
<script src="/js/lunr.min.js"></script> <script src="/js/lunr.min.js"></script>
</div> </div>
</div> </div>
{{ partial "search-index.html" . }}
{{ partial "search-index.html" . }}
</main> </main>
</div> </div>
{{ end }} {{ end }}