fix: ensure relref in search index is properly rendered (#196)

* fix: ensure relref in search index is properly rendered

* chore: remove empty whitespace

assets/css/compiled/main.css

@@ -499,6 +499,9 @@ video {
 .pointer-events-none {
   pointer-events: none;
 }
+.fixed {
+  position: fixed;
+}
 .absolute {
   position: absolute;
 }
@@ -508,6 +511,9 @@ video {
 .sticky {
   position: sticky;
 }
+.inset-0 {
+  inset: 0px;
+}
 .inset-x-0 {
   left: 0px;
   right: 0px;
@@ -543,6 +549,9 @@ video {
 .top-full {
   top: 100%;
 }
+.z-10 {
+  z-index: 10;
+}
 .z-20 {
   z-index: 20;
 }
@@ -966,6 +975,9 @@ video {
   --tw-border-opacity: 1;
   border-color: rgb(254 249 195 / var(--tw-border-opacity));
 }
+.bg-black\/80 {
+  background-color: rgb(0 0 0 / 0.8);
+}
 .bg-black\/\[\.05\] {
   background-color: rgb(0 0 0 / .05);
 }
@@ -1399,6 +1411,9 @@ video {
 .\[text-underline-position\:from-font\] {
   text-underline-position: from-font;
 }
+.\[transition\:background-color_1\.5s_ease\] {
+  transition: background-color 1.5s ease;
+}
 .\[word-break\:break-word\] {
   word-break: break-word;
 }
@@ -2501,6 +2516,19 @@ nav .search-wrapper {
   --tw-shadow-color: rgb(115 115 115 / 0.4);
   --tw-shadow: var(--tw-shadow-colored);
 }
+@supports (
+  ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px)))
+) {
+  .code-copy-btn {
+    --tw-bg-opacity: .85;
+    --tw-backdrop-blur: blur(12px);
+    -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
+            backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
+  }
+  :is(html[class~="dark"] .code-copy-btn) {
+    --tw-bg-opacity: 0.8;
+  }
+}
 html {
   font-size: 1rem;
   -webkit-font-smoothing: antialiased;
@@ -2977,6 +3005,9 @@ body {
 :is(html[class~="dark"] .dark\:border-yellow-200\/30) {
   border-color: rgb(254 240 138 / 0.3);
 }
+:is(html[class~="dark"] .dark\:bg-black\/60) {
+  background-color: rgb(0 0 0 / 0.6);
+}
 :is(html[class~="dark"] .dark\:bg-blue-900\/30) {
   background-color: rgb(30 58 138 / 0.3);
 }

assets/css/components/code-copy.css

@@ -0,0 +1,7 @@
+@supports (
+  (-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))
+) {
+  .code-copy-btn {
+    @apply backdrop-blur-md bg-opacity-[.85] dark:bg-opacity-80;
+  }
+}

assets/css/styles.css

@@ -8,6 +8,7 @@
 @import "components/sidebar.css";
 @import "components/navbar.css";
 @import "components/scrollbar.css";
+@import "components/code-copy.css";
 
 html {
   @apply text-base antialiased;

assets/js/menu.js

@@ -1,11 +1,16 @@
 // Hamburger menu for mobile navigation
 
+document.addEventListener('DOMContentLoaded', function () {
   const menu = document.querySelector('.hamburger-menu');
-
-menu.addEventListener('click', (e) => {
-  e.preventDefault();
+  const overlay = document.querySelector('.mobile-menu-overlay');
   const sidebarContainer = document.querySelector('.sidebar-container');
 
+  // Initialize the overlay
+  const overlayClasses = ['fixed', 'inset-0', 'z-10', 'bg-black/80', 'dark:bg-black/60'];
+  overlay.classList.add('bg-transparent');
+  overlay.classList.remove("hidden", ...overlayClasses);
+
+  function toggleMenu() {
     // Toggle the hamburger menu
     menu.querySelector('svg').classList.toggle('open');
 
@@ -16,4 +21,29 @@ menu.addEventListener('click', (e) => {
     // When the menu is open, we want to prevent the body from scrolling
     document.body.classList.toggle('overflow-hidden');
     document.body.classList.toggle('md:overflow-auto');
+  }
+
+  menu.addEventListener('click', (e) => {
+    e.preventDefault();
+    toggleMenu();
+
+    if (overlay.classList.contains('bg-transparent')) {
+      // Show the overlay
+      overlay.classList.add(...overlayClasses);
+      overlay.classList.remove('bg-transparent');
+    } else {
+      // Hide the overlay
+      overlay.classList.remove(...overlayClasses);
+      overlay.classList.add('bg-transparent');
+    }
+  });
+
+  overlay.addEventListener('click', (e) => {
+    e.preventDefault();
+    toggleMenu();
+
+    // Hide the overlay
+    overlay.classList.remove(...overlayClasses);
+    overlay.classList.add('bg-transparent');
+  });
 });

exampleSite/content/showcase/index.md

@@ -14,5 +14,5 @@ Open source projects powered by Hextra.
 {{< cards >}}
   {{< card link="https://getporter.org/" title="Porter" image="https://repository-images.githubusercontent.com/155893691/aa249c80-fcf3-11ea-93b0-30079e8d7de4" imageStyle="object-fit:cover; aspect-ratio:16/9;" >}}
   {{< card link="https://lutheranconfessions.org/" title="LutheranConfessions" image="https://github.com/imfing/hextra/assets/5097752/ad6625e4-88cd-4cad-b102-5399997d0359" imageStyle="object-fit:cover; aspect-ratio:16/9;" >}}
-  {{< card link="/" title="Hextra Starter Template" image="https://user-images.githubusercontent.com/5097752/263551418-c403b9a9-a76c-47a6-8466-513d772ef0b7.jpg" imageStyle="object-fit:cover; aspect-ratio:16/9;" >}}
+  {{< card link="https://github.com/imfing/hextra-starter-template/" title="Hextra Starter Template" image="https://user-images.githubusercontent.com/5097752/263551418-c403b9a9-a76c-47a6-8466-513d772ef0b7.jpg" imageStyle="object-fit:cover; aspect-ratio:16/9;" >}}
 {{< /cards >}}

exampleSite/hugo_stats.json

@@ -67,6 +67,7 @@
       "[counter-reset:step]",
       "[hyphens:auto]",
       "[text-underline-position:from-font]",
+      "[transition:background-color_1.5s_ease]",
       "[word-break:break-word]",
       "absolute",
       "active:bg-gray-400/20",
@@ -90,6 +91,7 @@
       "before:pointer-events-none",
       "before:transition-transform",
       "before:w-px",
+      "bg-black/80",
       "bg-black/[.05]",
       "bg-blue-100",
       "bg-clip-text",
@@ -159,6 +161,7 @@
       "cursor-pointer",
       "dark:before:bg-neutral-800",
       "dark:before:invert",
+      "dark:bg-black/60",
       "dark:bg-blue-900/30",
       "dark:bg-dark",
       "dark:bg-dark/50",
@@ -235,6 +238,7 @@
       "ease-in",
       "filename",
       "first:mt-0",
+      "fixed",
       "flex",
       "flex-col",
       "focus:bg-white",
@@ -311,6 +315,7 @@
       "inline",
       "inline-block",
       "inline-flex",
+      "inset-0",
       "inset-x-0",
       "inset-y-0",
       "items-center",
@@ -401,6 +406,7 @@
       "min-w-full",
       "ml-1",
       "ml-4",
+      "mobile-menu-overlay",
       "mr-2",
       "mt-1",
       "mt-1.5",
@@ -585,6 +591,7 @@
       "w-screen",
       "whitespace-nowrap",
       "xl:block",
+      "z-10",
       "z-20",
       "z-[-1]"
     ],

layouts/partials/navbar.html

@@ -32,10 +32,17 @@
       {{- if eq .Params.type "search" -}}
         {{- partial "search.html" (dict "params" .Params) -}}
       {{- else -}}
-        {{- $external := strings.HasPrefix .URL "http" -}}
+        {{- $link := .URL -}}
+        {{- $external := strings.HasPrefix $link "http" -}}
+        {{- with .PageRef -}}
+          {{- if hasPrefix . "/" -}}
+            {{- $link = relLangURL (strings.TrimPrefix "/" .) -}}
+          {{- end -}}
+        {{- end -}}
+
         {{/* Display icon menu item */}}
         {{- if .Params.icon -}}
-          <a class="p-2 text-current" {{ if $external }}target="_blank" rel="noreferer"{{ end }} href="{{ .URL | relLangURL }}" title="{{ or (T .Identifier) .Name | safeHTML }}">
+          <a class="p-2 text-current" {{ if $external }}target="_blank" rel="noreferer"{{ end }} href="{{ $link }}" title="{{ or (T .Identifier) .Name | safeHTML }}">
             {{- partial "utils/icon.html" (dict "name" .Params.icon "attributes" "height=24") -}}
             <span class="sr-only">{{ or (T .Identifier) .Name | safeHTML }}</span>
           </a>
@@ -44,7 +51,7 @@
           {{- $activeClass := cond $active "font-medium" "text-gray-600 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-200" -}}
           <a
             title="{{ or (T .Identifier) .Name | safeHTML }}"
-            href="{{ .URL | relLangURL }}"
+            href="{{ $link }}"
             {{ if $external }}target="_blank" rel="noreferer"{{ end }}
             class="text-sm contrast-more:text-gray-700 contrast-more:dark:text-gray-100 relative -ml-2 hidden whitespace-nowrap p-2 md:inline-block {{ $activeClass }}"
           >

layouts/partials/sidebar.html

@@ -10,6 +10,7 @@
 {{- $pageURL := $context.RelPermalink -}}
 
 
+<div class="mobile-menu-overlay [transition:background-color_1.5s_ease] fixed inset-0 z-10 bg-black/80 dark:bg-black/60 hidden"></div>
 <aside class="sidebar-container flex flex-col print:hidden md:top-16 md:shrink-0 md:w-64 md:self-start max-md:[transform:translate3d(0,-100%,0)] {{ $sidebarClass }}">
   <!-- Search bar on small screen -->
   <div class="px-4 pt-4 md:hidden">

layouts/partials/toc.html

@@ -27,7 +27,7 @@
         {{- if site.Params.editURL.enable -}}
           {{- $editURL := site.Params.editURL.base | default "" -}}
           {{- with .File -}}{{ $editURL = urls.JoinPath $editURL (replace .Path "\\" "/") }}{{- end -}}
-          {{- with .Params.editURL -}}{{ $editURL = .Params.editURL }}{{- end -}}
+          {{- with .Params.editURL -}}{{ $editURL = . }}{{- end -}}
           <a class="text-xs font-medium text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100 contrast-more:text-gray-800 contrast-more:dark:text-gray-50" href="{{ $editURL }}" target="_blank" rel="noreferer">{{ $editThisPage }}</a>
         {{- end -}}
         {{/* Scroll To Top */}}
@@ -59,7 +59,7 @@
     {{- if .Title }}
       <li class="my-2 scroll-my-6 scroll-py-6">
         <a class="{{ $class }} inline-block text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-300 contrast-more:text-gray-900 contrast-more:underline contrast-more:dark:text-gray-50 w-full break-words" href="#{{ anchorize .ID }}">
-          {{- .Title | safeHTML | plainify }}
+          {{- .Title | safeHTML | plainify | htmlUnescape }}
         </a>
       </li>
     {{- end -}}

layouts/partials/utils/fragments.html

@@ -35,12 +35,12 @@
       {{ $headingTitle := index $headingTitles $i }}
 
       {{ if eq $i 0 }}
-        {{ $data = $data | merge (dict $headingKey ($content | markdownify | plainify | htmlUnescape | chomp)) }}
+        {{ $data = $data | merge (dict $headingKey ($content | $page.RenderString | plainify | htmlUnescape | chomp)) }}
       {{ else }}
         {{ $parts := split $content (printf "\n%s\n" $headingTitle) }}
         {{ $lastPart := index $parts (sub (len $parts) 1) }}
 
-        {{ $data = $data | merge (dict $headingKey ($lastPart | markdownify | plainify | htmlUnescape | chomp)) }}
+        {{ $data = $data | merge (dict $headingKey ($lastPart | $page.RenderString | plainify | htmlUnescape | chomp)) }}
         {{ $content = strings.TrimSuffix $lastPart $content }}
         {{ $content = strings.TrimSuffix (printf "\n%s\n" $headingTitle) $content }}
       {{ end }}

layouts/shortcodes/hextra/feature-card.html

@@ -10,6 +10,10 @@
 {{- $external := hasPrefix $link "http" -}}
 {{- $href := cond (strings.HasPrefix $link "/") ($link | relURL) $link -}}
 
+{{- if hasPrefix $image "/" -}}
+  {{- $image = relURL (strings.TrimPrefix "/" $image) -}}
+{{- end -}}
+
 <a
   {{ with $link }}href="{{ $href }}" {{ with $external }} target="_blank" rel="noreferrer"{{ end }}{{ end }}
   {{ with $style }}style="{{ . | safeCSS }}"{{ end }}