From ade244c72af62827c4c30151404abf755597f243 Mon Sep 17 00:00:00 2001 From: Arne Rief Date: Mon, 1 Sep 2025 21:57:30 +0200 Subject: Search & socials --- assets/js/main.js | 113 ++++++++++++++++++++++++++++++++++ hugo.toml | 25 +++++++- i18n/de.toml | 8 +++ i18n/en.toml | 8 +++ layouts/_default/list.html | 28 +++++---- layouts/_default/search.html | 69 +++++++++++++++++++++ layouts/index.json | 14 +++++ layouts/partials/footer.html | 42 ++++++++++++- layouts/partials/header.html | 4 +- layouts/partials/select-language.html | 39 ++++++++++++ layouts/partials/select-theme.html | 15 +++++ layouts/partials/selectLanguage.html | 39 ------------ layouts/partials/selectTheme.html | 15 ----- 13 files changed, 348 insertions(+), 71 deletions(-) create mode 100644 layouts/_default/search.html create mode 100644 layouts/index.json create mode 100644 layouts/partials/select-language.html create mode 100644 layouts/partials/select-theme.html delete mode 100644 layouts/partials/selectLanguage.html delete mode 100644 layouts/partials/selectTheme.html diff --git a/assets/js/main.js b/assets/js/main.js index c3218f1..08cfcf5 100644 --- a/assets/js/main.js +++ b/assets/js/main.js @@ -33,6 +33,119 @@ }); } + // SEARCH + function initSearch() { + const input = document.getElementById("search-input"); + const resetBtn = document.getElementById("search-reset"); + const resultsCount = document.querySelector(".search-results__count"); + const resultsList = document.querySelector(".search-results__list"); + const template = document.getElementById("search-result-template"); + + // Only initialize search on the search page + if (!input || !template) return; + + let allPosts = []; + let searchTimeout; + + // Get JSON file with data of all posts + fetch(input.dataset.indexUrl ?? "/index.json") + .then((res) => res.json()) + .then((data) => allPosts = data) + .catch((err) => console.error("Search index.json failed to load", err)); + + function clearResults() { + resultsCount.hidden = true; + resultsList.innerHTML = ""; + resultsList.hidden = true; + } + + // Hydrate post-card list item(s) from the template with JSON data + function renderSearchResults(matches) { + clearResults(); + + resultsCount.hidden = false; + resultsCount.querySelector("#search-results-number").textContent = String(matches.length ?? 0); + + // No posts matching query found + if (!matches.length) return; + + matches.forEach((post) => { + const li = template.content.firstElementChild.cloneNode(true); + + const link = li.querySelector(".post-card__link"); + link.href = post.url; + link.tile = post.title; + + const date = li.querySelector(".post-card__date"); + date.textContent = new Date(post.date).toLocaleDateString(); + date.setAttribute("datetime", post.date); + + const summary = li.querySelector(".post-card__summary"); + if (summary) summary.textContent = post.summary; + + const tagsList = li.querySelector(".post-card__tags-list"); + if (tagsList) { + tagsList.innerHTML = ""; + if (post.tags && post.tags.length) { + post.tags.slice(0, 3).forEach((tag) => { + const liTag = document.createElement("li"); + liTag.className = "post-card__tags-item"; + liTag.textContent = `#${tag}`; + tagsList.appendChild(liTag); + }); + + if (post.tags.length > 3) { + const more = document.createElement("li"); + more.className = "post-card__tags-item post-card__tags-more"; + more.textContent = `+${post.tags.length - 3}`; + tagsList.appendChild(more); + } + } + } + + resultsList.appendChild(li); + resultsList.hidden = false; + }); + } + + // Filter all posts for ones matching the user's search query + function searchPosts(query) { + const normalizedQuery = query.trim().toLowerCase(); + + // Only search if user entered at least 3 chars + if (normalizedQuery.length < 3) { + clearResults(); + return; + } + + const matches = allPosts.filter((post) => ( + post.title.toLowerCase().includes(normalizedQuery) || + (post.summary && post.summary.toLowerCase().includes(normalizedQuery)) + )); + + // At least 1 post matching query found + renderSearchResults(matches); + } + + input.addEventListener("input", (event) => { + // Debounce search + clearTimeout(searchTimeout); + searchTimeout = setTimeout(() => { + searchPosts(event.target.value); + }, 300); + }); + + resetBtn.addEventListener("click", () => { + input.value = ""; + input.focus(); + clearResults(); + }); + + // Focus input on page load - it's what the user is here for + input.focus(); + } + initThemeToggle(); + initSearch(); })(); diff --git a/hugo.toml b/hugo.toml index 8120249..7f7cea2 100644 --- a/hugo.toml +++ b/hugo.toml @@ -33,9 +33,32 @@ enableRobotsTXT = true # Copy this line to your project's hugo.toml pageRef = "/tags" weight = 40 +[outputs] # Copy outputs configuration to your project's hugo.toml + home = ["html", "json", "rss"] + section = ["html", "rss"] + taxonomy = ["html"] + term = ["html"] + [params] - # Set logo to empty string in your project's hugo.toml if you want to display site.Title instead + # In your project's hugo.toml, adjust logo to your file's name or set empty string to display site.Title instead logo = "/logo.svg" + [params.author] name = "Your Name" email = "your@email.com" + + # Replace with your actual social media profiles in your hugo.toml + [[params.socials]] + name = "Twitter" + url = "https://twitter.com/yourhandle" + icon = "/socials/twitter.svg" + + [[params.socials]] + name = "GitHub" + url = "https://github.com/yourhandle" + icon = "/socials/github.svg" + + [[params.socials]] + name = "LinkedIn" + url = "https://linkedin.com/in/yourhandle" + icon = "/socials/linkedin.svg" diff --git a/i18n/de.toml b/i18n/de.toml index bda9260..e675b16 100644 --- a/i18n/de.toml +++ b/i18n/de.toml @@ -28,6 +28,14 @@ recent = "Neueste Beiträge" view_all = "Alle Beiträge" +[search] + description = "Beiträge mit Wortsuche finden." + label = "Alle Beiträge durchsuchen" + matches = "Treffer" + placeholder = "Mindestens drei Buchstaben tippen, um zu suchen..." + reset = "Suche löschen" + title = "Suche" + [tags] all = "Alle Schlagwörter" empty = "Keine Schlagwörter gefunden." diff --git a/i18n/en.toml b/i18n/en.toml index fbf4cb8..4fadaee 100644 --- a/i18n/en.toml +++ b/i18n/en.toml @@ -28,6 +28,14 @@ recent = "Recent Posts" view_all = "View all posts" +[search] + description = "Find posts by search term." + label = "Search all posts" + matches = "matches" + placeholder = "Type at least 3 characters to search..." + reset = "Clear search" + title = "Search" + [tags] all = "All tags" empty = "No tags found." diff --git a/layouts/_default/list.html b/layouts/_default/list.html index 8ff9b18..d3d2d99 100644 --- a/layouts/_default/list.html +++ b/layouts/_default/list.html @@ -1,28 +1,34 @@ {{- define "main" }} -
-
-

+
+
+

{{ .Title }}

+ {{- with .Content }} +
+ {{ . }} +
+ {{- else }} {{- $description := or .Description .Summary (lang.Translate "list.default_description" .Title | default (printf "All posts in %s" .Title)) }} -

- {{ $description }} -

+

+ {{ $description }} +

+ {{- end }}
-
+
{{- /* 20 posts per site */ -}} {{- $paginator := .Paginate .Pages 20 }} {{- with $paginator.Pages }} -
    +
      {{- range . }} -
    • +
    • {{- partial "list/post-card.html" . }}
      • {{- end }}
    - {{- else }} -

    + {{ else }} +

    {{ lang.Translate "list.empty" | default "No posts found in this section." }}

    {{- end }} diff --git a/layouts/_default/search.html b/layouts/_default/search.html new file mode 100644 index 0000000..569cc9a --- /dev/null +++ b/layouts/_default/search.html @@ -0,0 +1,69 @@ +{{ define "main" }} +
    +
    +

    + {{ .Title }} +

    + {{- with .Content }} +
    + {{ . }} +
    + {{- else }} + {{- $description := or .Description (lang.Translate "search.description" | default "Find posts by search term.") }} +

    + {{ $description }} +

    + {{- end }} +
    + +
    + + +
    + +
    + + + + + {{- /* Hidden template, used for hydrating search results from index.json with JS */ -}} + + +
    +
    +{{ end }} diff --git a/layouts/index.json b/layouts/index.json new file mode 100644 index 0000000..29d7e14 --- /dev/null +++ b/layouts/index.json @@ -0,0 +1,14 @@ +{{- $allPages := slice -}} + +{{- range (where site.RegularPages "Section" "!=" "") -}} + {{- $currentPage := dict + "title" .Title + "summary" (.Summary | plainify | htmlUnescape) + "url" .RelPermalink + "date" (.Date.Format "2006-01-02T15:04:05Z07:00") + "tags" .Params.tags + -}} + {{- $allPages = $allPages | append $currentPage -}} +{{- end -}} + +{{ jsonify $allPages }} diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html index 7225d09..9b66758 100644 --- a/layouts/partials/footer.html +++ b/layouts/partials/footer.html @@ -1,7 +1,43 @@

    © {{ now.Year }} {{ site.Params.author.name }}

    - - - +
    diff --git a/layouts/partials/header.html b/layouts/partials/header.html index 9195345..0f3cfce 100644 --- a/layouts/partials/header.html +++ b/layouts/partials/header.html @@ -7,6 +7,6 @@ {{- end }} - {{- partial "selectTheme.html" . }} - {{- partial "selectLanguage.html" . }} + {{- partial "select-theme.html" . }} + {{- partial "select-language.html" . }}

diff --git a/layouts/partials/select-language.html b/layouts/partials/select-language.html new file mode 100644 index 0000000..752b605 --- /dev/null +++ b/layouts/partials/select-language.html @@ -0,0 +1,39 @@ +{{- /* +Selection of available languages. +Dynamically links to corresponding page/post if a translated version exists, otherwise to homepage of that language as fallback. + +Note: `$activeLang` and `$allTranslationsForPage` are technically unnecessary variables, their values could be called with `$.Lang` and `$.Translations` respectively. +These variables - together with the explicit naming of `.` context variables in other cases - were chosen for better readability and understandability of the code. +*/ -}} + +{{- if gt (len site.Languages) 1 }} +{{- $activeLang := .Lang }} +{{- $allTranslationsForPage := .Translations }} +
+
    + {{- range site.Languages }} + {{- $currLangSlice := . }} + {{- if ne $currLangSlice.Lang $activeLang }} + {{- $targetPage := index (where site.Home.Translations "Lang" $currLangSlice.Lang) 0 }} + {{- $translatedPage := index (where $allTranslationsForPage "Lang" $currLangSlice.Lang) 0 }} + {{- if $translatedPage }}{{- $targetPage = $translatedPage }}{{- end }} +
  • + + + +
    • + {{- end }} + {{- end }} +
+
+{{- end }} diff --git a/layouts/partials/select-theme.html b/layouts/partials/select-theme.html new file mode 100644 index 0000000..e9114cc --- /dev/null +++ b/layouts/partials/select-theme.html @@ -0,0 +1,15 @@ + diff --git a/layouts/partials/selectLanguage.html b/layouts/partials/selectLanguage.html deleted file mode 100644 index 752b605..0000000 --- a/layouts/partials/selectLanguage.html +++ /dev/null @@ -1,39 +0,0 @@ -{{- /* -Selection of available languages. -Dynamically links to corresponding page/post if a translated version exists, otherwise to homepage of that language as fallback. - -Note: `$activeLang` and `$allTranslationsForPage` are technically unnecessary variables, their values could be called with `$.Lang` and `$.Translations` respectively. -These variables - together with the explicit naming of `.` context variables in other cases - were chosen for better readability and understandability of the code. -*/ -}} - -{{- if gt (len site.Languages) 1 }} -{{- $activeLang := .Lang }} -{{- $allTranslationsForPage := .Translations }} -
-
    - {{- range site.Languages }} - {{- $currLangSlice := . }} - {{- if ne $currLangSlice.Lang $activeLang }} - {{- $targetPage := index (where site.Home.Translations "Lang" $currLangSlice.Lang) 0 }} - {{- $translatedPage := index (where $allTranslationsForPage "Lang" $currLangSlice.Lang) 0 }} - {{- if $translatedPage }}{{- $targetPage = $translatedPage }}{{- end }} -
  • - - - -
    • - {{- end }} - {{- end }} -
-
-{{- end }} diff --git a/layouts/partials/selectTheme.html b/layouts/partials/selectTheme.html deleted file mode 100644 index e9114cc..0000000 --- a/layouts/partials/selectTheme.html +++ /dev/null @@ -1,15 +0,0 @@ - -- cgit v1.2.3