fix: htmlUnescape toc title (#190)

* Update URl for Hextra Starter Template

* Update index.md

---------

Co-authored-by: Saurabh Mishra <saurabh.m@mailfence.com>
Co-authored-by: Xin <xin@imfing.com>

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,19 +1,49 @@
 // Hamburger menu for mobile navigation
 
-const menu = document.querySelector('.hamburger-menu');
-
-menu.addEventListener('click', (e) => {
-  e.preventDefault();
+document.addEventListener('DOMContentLoaded', function () {
+  const menu = document.querySelector('.hamburger-menu');
+  const overlay = document.querySelector('.mobile-menu-overlay');
   const sidebarContainer = document.querySelector('.sidebar-container');
 
-  // Toggle the hamburger menu
-  menu.querySelector('svg').classList.toggle('open');
+  // 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);
 
-  // When the menu is open, we want to show the navigation sidebar
-  sidebarContainer.classList.toggle('max-md:[transform:translate3d(0,-100%,0)]');
-  sidebarContainer.classList.toggle('max-md:[transform:translate3d(0,0,0)]');
+  function toggleMenu() {
+    // Toggle the hamburger menu
+    menu.querySelector('svg').classList.toggle('open');
 
-  // 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');
+    // When the menu is open, we want to show the navigation sidebar
+    sidebarContainer.classList.toggle('max-md:[transform:translate3d(0,-100%,0)]');
+    sidebarContainer.classList.toggle('max-md:[transform:translate3d(0,0,0)]');
+
+    // 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/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

@@ -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 -}}