chore: improve cards compatibility with steps (#197)

* 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,10 +1411,13 @@ 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;
 }
-.content h1 {
+.content :where(h1):not(:where([class~=not-prose],[class~=not-prose] *)) {
   margin-top: 0.5rem;
   font-size: 2.25rem;
   font-weight: 700;
@@ -1410,11 +1425,11 @@ video {
   --tw-text-opacity: 1;
   color: rgb(15 23 42 / var(--tw-text-opacity));
 }
-:is(html[class~="dark"] .content h1) {
+:is(html[class~="dark"] .content :where(h1):not(:where([class~=not-prose],[class~=not-prose] *))) {
   --tw-text-opacity: 1;
   color: rgb(241 245 249 / var(--tw-text-opacity));
 }
-.content h2 {
+.content :where(h2):not(:where([class~=not-prose],[class~=not-prose] *)) {
   margin-top: 2.5rem;
   border-bottom-width: 1px;
   border-color: rgb(229 229 229 / 0.7);
@@ -1427,24 +1442,24 @@ video {
 }
 @media (prefers-contrast: more) {
 
-  .content h2 {
+  .content :where(h2):not(:where([class~=not-prose],[class~=not-prose] *)) {
     --tw-border-opacity: 1;
     border-color: rgb(163 163 163 / var(--tw-border-opacity));
   }
 }
-:is(html[class~="dark"] .content h2) {
+:is(html[class~="dark"] .content :where(h2):not(:where([class~=not-prose],[class~=not-prose] *))) {
   border-color: hsl(var(--primary-hue) var(--primary-saturation) 94% / 0.1);
   --tw-text-opacity: 1;
   color: rgb(241 245 249 / var(--tw-text-opacity));
 }
 @media (prefers-contrast: more) {
 
-  :is(html[class~="dark"] .content h2) {
+  :is(html[class~="dark"] .content :where(h2):not(:where([class~=not-prose],[class~=not-prose] *))) {
     --tw-border-opacity: 1;
     border-color: rgb(163 163 163 / var(--tw-border-opacity));
   }
 }
-.content h3 {
+.content :where(h3):not(:where([class~=not-prose],[class~=not-prose] *)) {
   margin-top: 2rem;
   font-size: 1.5rem;
   font-weight: 600;
@@ -1452,11 +1467,11 @@ video {
   --tw-text-opacity: 1;
   color: rgb(15 23 42 / var(--tw-text-opacity));
 }
-:is(html[class~="dark"] .content h3) {
+:is(html[class~="dark"] .content :where(h3):not(:where([class~=not-prose],[class~=not-prose] *))) {
   --tw-text-opacity: 1;
   color: rgb(241 245 249 / var(--tw-text-opacity));
 }
-.content h4 {
+.content :where(h4):not(:where([class~=not-prose],[class~=not-prose] *)) {
   margin-top: 2rem;
   font-size: 1.25rem;
   font-weight: 600;
@@ -1464,11 +1479,11 @@ video {
   --tw-text-opacity: 1;
   color: rgb(15 23 42 / var(--tw-text-opacity));
 }
-:is(html[class~="dark"] .content h4) {
+:is(html[class~="dark"] .content :where(h4):not(:where([class~=not-prose],[class~=not-prose] *))) {
   --tw-text-opacity: 1;
   color: rgb(241 245 249 / var(--tw-text-opacity));
 }
-.content h5 {
+.content :where(h5):not(:where([class~=not-prose],[class~=not-prose] *)) {
   margin-top: 2rem;
   font-size: 1.125rem;
   font-weight: 600;
@@ -1476,11 +1491,11 @@ video {
   --tw-text-opacity: 1;
   color: rgb(15 23 42 / var(--tw-text-opacity));
 }
-:is(html[class~="dark"] .content h5) {
+:is(html[class~="dark"] .content :where(h5):not(:where([class~=not-prose],[class~=not-prose] *))) {
   --tw-text-opacity: 1;
   color: rgb(241 245 249 / var(--tw-text-opacity));
 }
-.content h6 {
+.content :where(h6):not(:where([class~=not-prose],[class~=not-prose] *)) {
   margin-top: 2rem;
   font-size: 1rem;
   font-weight: 600;
@@ -1488,33 +1503,25 @@ video {
   --tw-text-opacity: 1;
   color: rgb(15 23 42 / var(--tw-text-opacity));
 }
-:is(html[class~="dark"] .content h6) {
+:is(html[class~="dark"] .content :where(h6):not(:where([class~=not-prose],[class~=not-prose] *))) {
   --tw-text-opacity: 1;
   color: rgb(241 245 249 / var(--tw-text-opacity));
 }
-.content p {
+.content :where(p):not(:where([class~=not-prose],[class~=not-prose] *)) {
   margin-top: 1.5rem;
   line-height: 1.75rem;
 }
-.content p:first-child {
+.content :where(p):not(:where([class~=not-prose],[class~=not-prose] *)):first-child {
   margin-top: 0px;
 }
-.content .not-prose p {
-  margin-top: 0px;
-  line-height: 1.5;
-}
-.content a {
+.content :where(a):not(:where([class~=not-prose],[class~=not-prose] *)) {
   --tw-text-opacity: 1;
   color: hsl(var(--primary-hue) var(--primary-saturation) 45% / var(--tw-text-opacity));
   text-decoration-line: underline;
   text-decoration-thickness: from-font;
   text-underline-position: from-font;
 }
-.content .not-prose a {
-  color: currentColor;
-  text-decoration-line: none;
-}
-.content blockquote {
+.content :where(blockquote):not(:where([class~=not-prose],[class~=not-prose] *)) {
   margin-top: 1.5rem;
   --tw-border-opacity: 1;
   border-color: rgb(209 213 219 / var(--tw-border-opacity));
@@ -1522,24 +1529,24 @@ video {
   --tw-text-opacity: 1;
   color: rgb(55 65 81 / var(--tw-text-opacity));
 }
-.content blockquote:first-child {
+.content :where(blockquote):not(:where([class~=not-prose],[class~=not-prose] *)):first-child {
   margin-top: 0px;
 }
-:is([dir="ltr"] .content blockquote) {
+:is([dir="ltr"] .content :where(blockquote):not(:where([class~=not-prose],[class~=not-prose] *))) {
   border-left-width: 2px;
   padding-left: 1.5rem;
 }
-:is([dir="rtl"] .content blockquote) {
+:is([dir="rtl"] .content :where(blockquote):not(:where([class~=not-prose],[class~=not-prose] *))) {
   border-right-width: 2px;
   padding-right: 1.5rem;
 }
-:is(html[class~="dark"] .content blockquote) {
+:is(html[class~="dark"] .content :where(blockquote):not(:where([class~=not-prose],[class~=not-prose] *))) {
   --tw-border-opacity: 1;
   border-color: rgb(55 65 81 / var(--tw-border-opacity));
   --tw-text-opacity: 1;
   color: rgb(156 163 175 / var(--tw-text-opacity));
 }
-.content pre:not(.code-block pre) {
+.content :where(pre):not(:where(.code-block pre, [class~=not-prose],[class~=not-prose] *)) {
   margin-bottom: 1rem;
   overflow-x: auto;
   border-radius: 0.75rem;
@@ -1553,23 +1560,23 @@ video {
 }
 @media (prefers-contrast: more) {
 
-  .content pre:not(.code-block pre) {
+  .content :where(pre):not(:where(.code-block pre, [class~=not-prose],[class~=not-prose] *)) {
     border-width: 1px;
     border-color: hsl(var(--primary-hue) var(--primary-saturation) 24% / 0.2);
     --tw-contrast: contrast(1.5);
     filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
   }
 }
-:is(html[class~="dark"] .content pre:not(.code-block pre)) {
+:is(html[class~="dark"] .content :where(pre):not(:where(.code-block pre, [class~=not-prose],[class~=not-prose] *))) {
   background-color: hsl(var(--primary-hue) var(--primary-saturation) 77% / 0.1);
 }
 @media (prefers-contrast: more) {
 
-  :is(html[class~="dark"] .content pre:not(.code-block pre)) {
+  :is(html[class~="dark"] .content :where(pre):not(:where(.code-block pre, [class~=not-prose],[class~=not-prose] *))) {
     border-color: hsl(var(--primary-hue) var(--primary-saturation) 94% / 0.4);
   }
 }
-.content code:not(.code-block code) {
+.content :where(code):not(:where(.code-block code, [class~=not-prose],[class~=not-prose] *)) {
   overflow-wrap: break-word;
   border-radius: 0.375rem;
   border-width: 1px;
@@ -1583,38 +1590,38 @@ video {
   padding-right: .25em;
   font-size: .9em;
 }
-:is(html[class~="dark"] .content code:not(.code-block code)) {
+:is(html[class~="dark"] .content :where(code):not(:where(.code-block code, [class~=not-prose],[class~=not-prose] *))) {
   border-color: rgb(255 255 255 / 0.1);
   background-color: rgb(255 255 255 / 0.1);
 }
-.content table:not(.code-block table) {
+.content :where(table):not(:where(.code-block table, [class~=not-prose],[class~=not-prose] *)) {
   margin-top: 1.5rem;
   display: block;
   overflow-x: auto;
   padding: 0px;
 }
-.content table:not(.code-block table):first-child {
+.content :where(table):not(:where(.code-block table, [class~=not-prose],[class~=not-prose] *)):first-child {
   margin-top: 0px;
 }
-.content table:not(.code-block table) tr {
+.content :where(table):not(:where(.code-block table, [class~=not-prose],[class~=not-prose] *)) tr {
   margin: 0px;
   border-top-width: 1px;
   --tw-border-opacity: 1;
   border-color: rgb(209 213 219 / var(--tw-border-opacity));
   padding: 0px;
 }
-.content table:not(.code-block table) tr:nth-child(even) {
+.content :where(table):not(:where(.code-block table, [class~=not-prose],[class~=not-prose] *)) tr:nth-child(even) {
   --tw-bg-opacity: 1;
   background-color: rgb(243 244 246 / var(--tw-bg-opacity));
 }
-:is(html[class~="dark"] .content table:not(.code-block table) tr) {
+:is(html[class~="dark"] .content :where(table):not(:where(.code-block table, [class~=not-prose],[class~=not-prose] *)) tr) {
   --tw-border-opacity: 1;
   border-color: rgb(75 85 99 / var(--tw-border-opacity));
 }
-:is(html[class~="dark"] .content table:not(.code-block table) tr):nth-child(even) {
+:is(html[class~="dark"] .content :where(table):not(:where(.code-block table, [class~=not-prose],[class~=not-prose] *)) tr):nth-child(even) {
   background-color: rgb(75 85 99 / 0.2);
 }
-.content table:not(.code-block table) th {
+.content :where(table):not(:where(.code-block table, [class~=not-prose],[class~=not-prose] *)) th {
   margin: 0px;
   border-width: 1px;
   --tw-border-opacity: 1;
@@ -1625,11 +1632,11 @@ video {
   padding-bottom: 0.5rem;
   font-weight: 600;
 }
-:is(html[class~="dark"] .content table:not(.code-block table) th) {
+:is(html[class~="dark"] .content :where(table):not(:where(.code-block table, [class~=not-prose],[class~=not-prose] *)) th) {
   --tw-border-opacity: 1;
   border-color: rgb(75 85 99 / var(--tw-border-opacity));
 }
-.content table:not(.code-block table) td {
+.content :where(table):not(:where(.code-block table, [class~=not-prose],[class~=not-prose] *)) td {
   margin: 0px;
   border-width: 1px;
   --tw-border-opacity: 1;
@@ -1639,52 +1646,45 @@ video {
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
 }
-:is(html[class~="dark"] .content table:not(.code-block table) td) {
+:is(html[class~="dark"] .content :where(table):not(:where(.code-block table, [class~=not-prose],[class~=not-prose] *)) td) {
   --tw-border-opacity: 1;
   border-color: rgb(75 85 99 / var(--tw-border-opacity));
 }
-.content ol {
+.content :where(ol):not(:where([class~=not-prose],[class~=not-prose] *)) {
   margin-top: 1.5rem;
   list-style-type: decimal;
 }
-.content ol:first-child {
+.content :where(ol):not(:where([class~=not-prose],[class~=not-prose] *)):first-child {
   margin-top: 0px;
 }
-:is([dir="ltr"] .content ol) {
+:is([dir="ltr"] .content :where(ol):not(:where([class~=not-prose],[class~=not-prose] *))) {
   margin-left: 1.5rem;
 }
-:is([dir="rtl"] .content ol) {
+:is([dir="rtl"] .content :where(ol):not(:where([class~=not-prose],[class~=not-prose] *))) {
   margin-right: 1.5rem;
 }
-.content ol li {
+.content :where(ol):not(:where([class~=not-prose],[class~=not-prose] *)) li {
   margin-top: 0.5rem;
   margin-bottom: 0.5rem;
 }
-.content ul {
+.content :where(ul):not(:where([class~=not-prose],[class~=not-prose] *)) {
   margin-top: 1.5rem;
   list-style-type: disc;
 }
-.content ul:first-child {
+.content :where(ul):not(:where([class~=not-prose],[class~=not-prose] *)):first-child {
   margin-top: 0px;
 }
-:is([dir="ltr"] .content ul) {
+:is([dir="ltr"] .content :where(ul):not(:where([class~=not-prose],[class~=not-prose] *))) {
   margin-left: 1.5rem;
 }
-:is([dir="rtl"] .content ul) {
+:is([dir="rtl"] .content :where(ul):not(:where([class~=not-prose],[class~=not-prose] *))) {
   margin-right: 1.5rem;
 }
-.content ul li {
+.content :where(ul):not(:where([class~=not-prose],[class~=not-prose] *)) li {
   margin-top: 0.5rem;
   margin-bottom: 0.5rem;
 }
-.content .not-prose ul, .content .not-prose ol {
-  margin: 0px;
-  list-style-type: none;
-}
-.content .not-prose ul li, .content .not-prose ol li {
-  margin: 0px;
-}
-.content kbd {
+.content :where(kbd):not(:where([class~=not-prose],[class~=not-prose] *)) {
   overflow-wrap: break-word;
   border-radius: 0.375rem;
   border-width: 1px;
@@ -1698,29 +1698,25 @@ video {
   padding-right: .25em;
   font-size: .9em;
 }
-:is(html[class~="dark"] .content kbd) {
+:is(html[class~="dark"] .content :where(kbd):not(:where([class~=not-prose],[class~=not-prose] *))) {
   border-color: rgb(255 255 255 / 0.1);
   background-color: rgb(255 255 255 / 0.1);
 }
-.content pre:not(.code-block pre).mermaid {
+.content :where(pre.mermaid):not(:where(.code-block pre, [class~=not-prose],[class~=not-prose] *)) {
   border-radius: 0px;
   background-color: transparent;
 }
-:is(html[class~="dark"] .content pre:not(.code-block pre).mermaid) {
+:is(html[class~="dark"] .content :where(pre.mermaid):not(:where(.code-block pre, [class~=not-prose],[class~=not-prose] *))) {
   background-color: transparent;
 }
-.content img {
+.content :where(img):not(:where([class~=not-prose],[class~=not-prose] *)) {
   margin-left: auto;
   margin-right: auto;
   margin-top: 1rem;
   margin-bottom: 1rem;
   border-radius: 0.375rem;
 }
-.content .not-prose img {
-  margin: 0px;
-  border-radius: 0px;
-}
-.content figure figcaption {
+.content :where(figure):not(:where([class~=not-prose],[class~=not-prose] *)) figcaption {
   margin-top: 0.5rem;
   display: block;
   text-align: center;
@@ -1728,7 +1724,7 @@ video {
   --tw-text-opacity: 1;
   color: rgb(107 114 128 / var(--tw-text-opacity));
 }
-:is(html[class~="dark"] .content figure figcaption) {
+:is(html[class~="dark"] .content :where(figure):not(:where([class~=not-prose],[class~=not-prose] *)) figcaption) {
   --tw-text-opacity: 1;
   color: rgb(156 163 175 / var(--tw-text-opacity));
 }
@@ -1777,50 +1773,6 @@ span:target + .subheading-anchor:after {
   --tw-text-opacity: 1;
   color: rgb(115 115 115 / var(--tw-text-opacity));
 }
-article.typesetting-article {
-  font-size: 17px;
-  font-feature-settings:
-    'rlig' 1,
-    'calt' 1;
-}
-article.typesetting-article h1 {
-  margin-top: 1.5rem;
-  margin-bottom: 1rem;
-  text-align: center;
-    font-size: 2.5rem;
-}
-article.typesetting-article h2 {
-  border-style: none;
-}
-article.typesetting-article a {
-  text-decoration-line: none;
-}
-article.typesetting-article a:hover {
-  text-decoration-line: underline;
-}
-article.typesetting-article p {
-  line-height: 2rem;
-}
-article.typesetting-article code {
-  border-style: none;
-}
-:is(html[class~="dark"] article.typesetting-article code) {
-  --tw-bg-opacity: 1;
-  background-color: rgb(64 64 64 / var(--tw-bg-opacity));
-}
-:is(html[class~="dark"] article.typesetting-article pre code) {
-  background-color: transparent;
-}
-article.typesetting-article .subheading-anchor + a {
-  text-decoration-line: none;
-}
-article.typesetting-article .subheading-anchor + a::after {
-  content: var(--tw-content);
-  display: none;
-}
-article.typesetting-article .subheading-anchor + a:hover {
-  text-decoration-line: none;
-}
 article details > summary::-webkit-details-marker {
   display: none;
 }
@@ -2564,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;
@@ -3040,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/css/typography.css

@@ -1,44 +1,38 @@
 .content {
-  h1 {
+  :where(h1):not(:where([class~=not-prose],[class~=not-prose] *)) {
     @apply mt-2 text-4xl font-bold tracking-tight text-slate-900 dark:text-slate-100;
   }
-  h2 {
+  :where(h2):not(:where([class~=not-prose],[class~=not-prose] *)) {
     @apply font-semibold tracking-tight text-slate-900 dark:text-slate-100 mt-10 border-b pb-1 text-3xl border-neutral-200/70 contrast-more:border-neutral-400 dark:border-primary-100/10 contrast-more:dark:border-neutral-400;
   }
-  h3 {
+  :where(h3):not(:where([class~=not-prose],[class~=not-prose] *)) {
     @apply font-semibold tracking-tight text-slate-900 dark:text-slate-100 mt-8 text-2xl;
   }
-  h4 {
+  :where(h4):not(:where([class~=not-prose],[class~=not-prose] *)) {
     @apply font-semibold tracking-tight text-slate-900 dark:text-slate-100 mt-8 text-xl;
   }
-  h5 {
+  :where(h5):not(:where([class~=not-prose],[class~=not-prose] *)) {
     @apply font-semibold tracking-tight text-slate-900 dark:text-slate-100 mt-8 text-lg;
   }
-  h6 {
+  :where(h6):not(:where([class~=not-prose],[class~=not-prose] *)) {
     @apply font-semibold tracking-tight text-slate-900 dark:text-slate-100 mt-8 text-base;
   }
-  p {
+  :where(p):not(:where([class~=not-prose],[class~=not-prose] *)) {
     @apply mt-6 leading-7 first:mt-0;
   }
-  .not-prose p {
-    @apply mt-0 leading-normal;
-  }
-  a {
+  :where(a):not(:where([class~=not-prose],[class~=not-prose] *)) {
     @apply text-primary-600 underline decoration-from-font [text-underline-position:from-font];
   }
-  .not-prose a {
-    @apply text-current no-underline;
-  }
-  blockquote {
+  :where(blockquote):not(:where([class~=not-prose],[class~=not-prose] *)) {
     @apply mt-6 border-gray-300 italic text-gray-700 dark:border-gray-700 dark:text-gray-400 first:mt-0 ltr:border-l-2 ltr:pl-6 rtl:border-r-2 rtl:pr-6;
   }
-  pre:not(.code-block pre) {
+  :where(pre):not(:where(.code-block pre, [class~=not-prose],[class~=not-prose] *)) {
     @apply bg-primary-700/5 mb-4 overflow-x-auto rounded-xl font-medium subpixel-antialiased dark:bg-primary-300/10 text-[.9em] contrast-more:border contrast-more:border-primary-900/20 contrast-more:contrast-150 contrast-more:dark:border-primary-100/40 py-4;
   }
-  code:not(.code-block code) {
+  :where(code):not(:where(.code-block code, [class~=not-prose],[class~=not-prose] *)) {
     @apply border-black border-opacity-[0.04] bg-opacity-[0.03] bg-black break-words rounded-md border py-0.5 px-[.25em] text-[.9em] dark:border-white/10 dark:bg-white/10;
   }
-  table:not(.code-block table) {
+  :where(table):not(:where(.code-block table, [class~=not-prose],[class~=not-prose] *)) {
     @apply block overflow-x-auto mt-6 p-0 first:mt-0;
 
     tr {
@@ -51,37 +45,28 @@
       @apply m-0 border border-gray-300 px-4 py-2 dark:border-gray-600;
     }
   }
-  ol {
+  :where(ol):not(:where([class~=not-prose],[class~=not-prose] *)) {
     @apply mt-6 list-decimal first:mt-0 ltr:ml-6 rtl:mr-6;
     li {
       @apply my-2;
     }
   }
-  ul {
+  :where(ul):not(:where([class~=not-prose],[class~=not-prose] *)) {
     @apply mt-6 list-disc first:mt-0 ltr:ml-6 rtl:mr-6;
     li {
       @apply my-2;
     }
   }
-  .not-prose ul, .not-prose ol {
-    @apply m-0 list-none;
-    li {
-      @apply m-0;
-    }
-  }
-  kbd {
+  :where(kbd):not(:where([class~=not-prose],[class~=not-prose] *)) {
     @apply border-black border-opacity-[0.04] bg-opacity-[0.03] bg-black break-words rounded-md border py-0.5 px-[.25em] text-[.9em] dark:border-white/10 dark:bg-white/10;
   }
-  pre:not(.code-block pre).mermaid {
+  :where(pre.mermaid):not(:where(.code-block pre, [class~=not-prose],[class~=not-prose] *)) {
     @apply bg-transparent rounded-none dark:bg-transparent;
   }
-  img {
+  :where(img):not(:where([class~=not-prose],[class~=not-prose] *)) {
     @apply mx-auto my-4 rounded-md;
   }
-  .not-prose img {
-    @apply m-0 rounded-none;
-  }
-  figure {
+  :where(figure):not(:where([class~=not-prose],[class~=not-prose] *)) {
     figcaption {
       @apply text-sm text-gray-500 dark:text-gray-400 mt-2 block text-center;
     }
@@ -115,35 +100,6 @@
   }
 }
 
-article.typesetting-article {
-  font-size: 17px;
-  font-feature-settings:
-    'rlig' 1,
-    'calt' 1;
-  h1 {
-    @apply mt-6 mb-4 text-center;
-    font-size: 2.5rem;
-  }
-  h2 {
-    @apply border-none;
-  }
-  a {
-    @apply no-underline hover:underline;
-  }
-  p {
-    @apply leading-8;
-  }
-  code {
-    @apply border-none dark:bg-neutral-700;
-  }
-  pre code {
-    @apply dark:bg-transparent;
-  }
-  .subheading-anchor + a {
-    @apply no-underline hover:no-underline after:hidden;
-  }
-}
-
 article details > summary {
   &::-webkit-details-marker {
     @apply hidden;

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');
+  });
 });

data/icons.yaml

@@ -270,3 +270,4 @@ twitter: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill=
 mastodon: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M23.268 5.313c-.35-2.578-2.617-4.61-5.304-5.004C17.51.242 15.792 0 11.813 0h-.03c-3.98 0-4.835.242-5.288.309C3.882.692 1.496 2.518.917 5.127.64 6.412.61 7.837.661 9.143c.074 1.874.088 3.745.26 5.611.118 1.24.325 2.47.62 3.68.55 2.237 2.777 4.098 4.96 4.857 2.336.792 4.849.923 7.256.38.265-.061.527-.132.786-.213.585-.184 1.27-.39 1.774-.753a.057.057 0 0 0 .023-.043v-1.809a.052.052 0 0 0-.02-.041.053.053 0 0 0-.046-.01 20.282 20.282 0 0 1-4.709.545c-2.73 0-3.463-1.284-3.674-1.818a5.593 5.593 0 0 1-.319-1.433.053.053 0 0 1 .066-.054c1.517.363 3.072.546 4.632.546.376 0 .75 0 1.125-.01 1.57-.044 3.224-.124 4.768-.422.038-.008.077-.015.11-.024 2.435-.464 4.753-1.92 4.989-5.604.008-.145.03-1.52.03-1.67.002-.512.167-3.63-.024-5.545zm-3.748 9.195h-2.561V8.29c0-1.309-.55-1.976-1.67-1.976-1.23 0-1.846.79-1.846 2.35v3.403h-2.546V8.663c0-1.56-.617-2.35-1.848-2.35-1.112 0-1.668.668-1.67 1.977v6.218H4.822V8.102c0-1.31.337-2.35 1.011-3.12.696-.77 1.608-1.164 2.74-1.164 1.311 0 2.302.5 2.962 1.498l.638 1.06.638-1.06c.66-.999 1.65-1.498 2.96-1.498 1.13 0 2.043.395 2.74 1.164.675.77 1.012 1.81 1.012 3.12z"></path></svg>
 youtube: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="currentColor" d="M8.051 1.999h.089c.822.003 4.987.033 6.11.335a2.01 2.01 0 0 1 1.415 1.42c.101.38.172.883.22 1.402l.01.104l.022.26l.008.104c.065.914.073 1.77.074 1.957v.075c-.001.194-.01 1.108-.082 2.06l-.008.105l-.009.104c-.05.572-.124 1.14-.235 1.558a2.007 2.007 0 0 1-1.415 1.42c-1.16.312-5.569.334-6.18.335h-.142c-.309 0-1.587-.006-2.927-.052l-.17-.006l-.087-.004l-.171-.007l-.171-.007c-1.11-.049-2.167-.128-2.654-.26a2.007 2.007 0 0 1-1.415-1.419c-.111-.417-.185-.986-.235-1.558L.09 9.82l-.008-.104A31.4 31.4 0 0 1 0 7.68v-.123c.002-.215.01-.958.064-1.778l.007-.103l.003-.052l.008-.104l.022-.26l.01-.104c.048-.519.119-1.023.22-1.402a2.007 2.007 0 0 1 1.415-1.42c.487-.13 1.544-.21 2.654-.26l.17-.007l.172-.006l.086-.003l.171-.007A99.788 99.788 0 0 1 7.858 2h.193zM6.4 5.209v4.818l4.157-2.408L6.4 5.209z"/></svg>
 x-twitter: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z"/></svg>
+linkedin: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037c-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85c3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 0 1-2.063-2.065a2.064 2.064 0 1 1 2.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg>

exampleSite/content/_index.md

@@ -57,7 +57,7 @@ layout: hextra-home
     subtitle="No dependency or Node.js is needed to use Hextra. Powered by Hugo, one of *the fastest* static site generators, building your site in just seconds with a single binary."
   >}}
   {{< hextra/feature-card
-    title="Reponsive with Dark Mode Included"
+    title="Responsive with Dark Mode Included"
     subtitle="Looks great on different screen sizes. Built-in dark mode support, with auto-switching based on user's system preference."
   >}}
   {{< hextra/feature-card

exampleSite/content/about/index.ja.md

@@ -1,20 +0,0 @@
----
-title: "このサイトについて"
-toc: false
----
-
-Hextraは、現代的な静的ウェブサイトを構築するためのシンプルで高速で柔軟なテーマとして設計されています。特にドキュメンテーションウェブサイトに適していますが、ブログ、ポートフォリオなどのさまざまなタイプのサイトにも使用できます。
-
-Hugoは、Jekyllと同様に静的サイトジェネレーターです。Hugoの特徴は、単一のバイナリであることで、さまざまなプラットフォームで簡単にインストールして実行できることです。また、数千ページのサイトをミリ秒単位でレンダリングできるほど非常に高速で信頼性があります。
-
-Hextraは、最小限のフットプリントに焦点を当てた考え方で構築されています。始めるためには、Node.jsのような追加の依存関係は必要ありません。必要なのは、単一のYAML設定ファイルと、Markdownのコンテンツだけです。そのため、ツールのセットアップではなく、質の高いコンテンツの作成に集中できます。
-
-## クレジット
-
-Hextraをビルドするには、次のツールとインスピレーションが必要です：
-
-- [Hugo](https://gohugo.io/)
-- [Tailwind CSS](https://tailwindcss.com/)
-- [Heroicons](https://heroicons.com/)
-- [Nextra](https://nextra.vercel.app/)
-- [Next.js](https://nextjs.org/)

exampleSite/content/blog/_index.md

@@ -1,3 +1,10 @@
 ---
 title: "Blog"
 ---
+
+<div style="text-align: center; margin-top: 1em;">
+{{< hextra/hero-badge link="index.xml" >}}
+  <span>RSS Feed</span>
+  {{< icon name="rss" attributes="height=14" >}}
+{{< /hextra/hero-badge >}}
+</div>

exampleSite/content/docs/_index.ja.md

@@ -1,17 +0,0 @@
----
-linkTitle: "ドキュメンテーション"
-title: Hextraへようこそ
----
-
-👋 こんにちは！Hextraドキュメンテーションへようこそ！
-
-<!--more-->
-
-## Hextraとは？
-
-Hextraは、[Hugo][hugo]テーマの一つで、[Tailwind CSS][tailwind-css]を使用して作られた、現代的で高速なバッテリー内蔵のテーマです。
-ドキュメンテーション、ブログ、ウェブサイトの美しいウェブサイトを構築するために設計され、様々な要件に対応するための機能と柔軟性を提供します。
-
-[hugo]: https://gohugo.io/
-[flex-search]: https://github.com/nextapps-de/flexsearch
-[tailwind-css]: https://tailwindcss.com/

exampleSite/content/docs/getting-started.ja.md

@@ -1,6 +0,0 @@
----
-title: はじめに
-weight: 1
----
-
-プロジェクトの紹介。

exampleSite/content/docs/guide/configuration.md

@@ -252,8 +252,10 @@ excludeSearch: true
 
 ### Google Analytics
 
-To enable Google Analytics, set the `googleAnalytics` parameter in the config file:
+To enable [Google Analytics](https://marketingplatform.google.com/about/analytics/), set `services.googleAnalytics.ID` flag in `hugo.yaml`:
 
 ```yaml {filename="hugo.yaml"}
-googleAnalytics: G-XXXXXXXXXX
+services:
+  googleAnalytics:
+    ID: G-MEASUREMENT_ID
 ```

exampleSite/content/docs/guide/deploy-site.md

@@ -14,11 +14,11 @@ This page provides guides for deploying your Hextra site on various platforms.
 
 [GitHub Pages](https://docs.github.com/pages) is the recommended way to deploy and host your website for free.
 
-If you bootstrap the site using [hextra-starter-template][hextra-starter-template], it has provided GitHub Actions workflow out-of-the-box that helps automatically deploy to GitHub Pages.
+If you bootstrap the site using [hextra-starter-template](https://github.com/imfing/hextra-starter-template), it has provided GitHub Actions workflow out-of-the-box that helps automatically deploy to GitHub Pages.
 
 {{% details title="GitHub Actions Configuration" closed="true" %}}
 
-Below is an example configuration from [hextra-starter-template][hextra-starter-template]:
+Below is an example configuration from [hextra-starter-template](https://github.com/imfing/hextra-starter-template):
 
 ```yaml {filename=".github/workflows/pages.yaml"}
 # Sample workflow for building and deploying a Hugo site to GitHub Pages
@@ -104,7 +104,7 @@ jobs:
   ![](https://user-images.githubusercontent.com/5097752/266784808-99676430-884e-42ab-b901-f6534a0d6eee.png)
 {{< /callout >}}
 
-By default, the above GitHub Actions workflow assumes that the site is deploying to `https://<USERNAME>.github.io/<REPO>/`.
+By default, the above GitHub Actions workflow `.github/workflows/pages.yaml` assumes that the site is deploying to `https://<USERNAME>.github.io/<REPO>/`.
 
 If you are deploying to `https://<USERNAME>.github.io/` then modify the `--baseURL`:
 
@@ -158,6 +158,4 @@ Check [Hugo on Netlify](https://docs.netlify.com/integrations/frameworks/hugo/)
    1. Set Build Command to `hugo --gc --minify`
    2. Set Install Command to `yum install golang`
 
-![image](https://github.com/imfing/hextra/assets/5097752/887d949b-8d05-413f-a2b4-7ab92192d0b3)
-
-[hextra-starter-template]: https://github.com/imfing/hextra-starter-template
+![Vercel Deployment Configuration](https://github.com/imfing/hextra/assets/5097752/887d949b-8d05-413f-a2b4-7ab92192d0b3)

exampleSite/content/docs/guide/organize-files.md

@@ -7,7 +7,7 @@ prev: /docs/guide
 ## Directory Structure
 
 By default, Hugo searches for Markdown files in the `content` directory, and the structure of the directory determines the final output structure of your website.
-Take the example site as an example:
+Take this site as an example:
 
 <!--more-->
 
@@ -45,6 +45,28 @@ content
     └── post-1.md // <- /blog/post-1/
 ```
 
+## Layouts
+
+Hextra offers three layouts for different content types:
+
+| Layout    | Directory             | Features                                                         |
+| :-------- | :-------------------- | :--------------------------------------------------------------- |
+| `docs`    | `content/docs/`       | Ideal for structured documentation, same as this section.        |
+| `blog`    | `content/blog/`       | For blog postings, with both listing and detailed article views. |
+| `default` | All other directories | Single-page article view without sidebar.                        |
+
+To customize a section to mirror the behavior of a built-in layout, specify the desired type in the front matter of the section's `_index.md`.
+
+```yaml {filename="content/my-docs/_index.md"}
+---
+title: My Docs
+cascade:
+  type: docs
+---
+```
+
+The above example configuration ensures that the content files inside `content/my-docs/` will be treated as documentation (`docs` type) by default.
+
 ## Sidebar Navigation
 
 The sidebar navigation is generated automatically based on the content organization alphabetically. To manually configure the sidebar order, we can use the `weight` parameter in the front matter of the Markdown files.
@@ -62,7 +84,8 @@ weight: 2
 
 ## Configure Content Directory
 
-If we need to use a different directory for our content, we can do so by setting the [`contentDir`](https://gohugo.io/getting-started/configuration/#contentdir) parameter in our site configuration file.
+By default, the root `content/` directory is used by Hugo to build the site.
+If you need to use a different directory for content, for example `docs/`, this can be done by setting the [`contentDir`](https://gohugo.io/getting-started/configuration/#contentdir) parameter in the site configuration `hugo.yaml`.
 
 ## Add Images
 

exampleSite/content/docs/guide/shortcodes/_index.ja.md

@@ -1,6 +0,0 @@
----
-title: コンポーネント
-weight: 2
----
-
-Hextraは、[Hugo Shortcodes](https://gohugo.io/content-management/shortcodes/)に基づいたさまざまな組み込みコンポーネントを提供しています。

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.yaml

@@ -7,7 +7,9 @@ enableGitInfo: true
 # enableEmoji: false
 hasCJKLanguage: true
 
-# googleAnalytics: G-XXXXXXXXXX
+# services:
+#   googleAnalytics:
+#     ID: G-MEASUREMENT_ID
 
 outputs:
   home: [HTML]
@@ -20,14 +22,10 @@ languages:
     languageName: English
     weight: 1
     title: Hextra
-  ja:
-    languageName: 日本語
-    weight: 2
-    title: "Hextra テーマ"
   zh-cn:
     languageName: 简体中文
     languageCode: zh-CN
-    weight: 3
+    weight: 2
     title: Hextra
 
 module:
@@ -115,6 +113,7 @@ params:
     displayToggle: true
 
   footer:
+    enable: true
     displayCopyright: true
     displayPoweredBy: true
     width: normal

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]"
     ],

exampleSite/i18n/zh-cn.yaml

@@ -0,0 +1,6 @@
+documentation: "文档"
+showcase: "项目展示"
+blog: "博客"
+about: "关于"
+more: "更多"
+hugoDocs: "Hugo 文档 ↗"

i18n/en.yaml

@@ -2,9 +2,12 @@ backToTop: "Scroll to top"
 changeLanguage: "Change language"
 changeTheme: "Change theme"
 copyright: "© 2023 Hextra Project."
+dark: "Dark"
 editThisPage: "Edit this page on GitHub →"
 lastUpdated: "Last updated on"
+light: "Light"
 noResultsFound: "No results found."
 onThisPage: "On this page"
+poweredBy: "Powered by Hextra"
 readMore: "Read more →"
 searchPlaceholder: "Search..."

i18n/es.yaml

@@ -1,7 +1,13 @@
-onThisPage: "En esta página"
+backToTop: "Subir al inicio"
+changeLanguage: "Cambiar idioma"
+changeTheme: "Cambiar tema"
+copyright: "© 2023 Proyecto Hextra."
+dark: "Oscuro"
 editThisPage: "Edita esta página en GitHub →"
 lastUpdated: "Última actualización"
-
-backToTop: "Subir al inicio"
-
-copyright: "© 2023 Hextra Project."
+light: "Claro"
+noResultsFound: "No hubo resultados."
+onThisPage: "En esta página"
+poweredBy: "Con tecnología de Hextra"
+readMore: "Leer más →"
+searchPlaceholder: "Buscar..."

i18n/fr.yaml

@@ -0,0 +1,13 @@
+backToTop: "Revenir en haut"
+changeLanguage: "Changer la langue"
+changeTheme: "Thème d'affichage"
+copyright: "© 2023 Hextra Project."
+dark: "Sombre"
+editThisPage: "Modifier cette page sur GitHub →"
+lastUpdated: "Dernière modification"
+light: "Clair"
+noResultsFound: "Pas de résultats trouvés"
+onThisPage: "Sur cette page"
+poweredBy: "Propulsé par Hextra"
+readMore: "Lire plus →"
+searchPlaceholder: "Rechercher..."

i18n/ja.yaml

@@ -1,16 +1,13 @@
-# Navbar
-documentation: "ドキュメンテーション"
-blog: "ブログ"
-about: "このサイトについて"
-
-more: "もっと"
-hugoDocs: "Hugoドキュメント ↗"
-
-searchPlaceholder: "検索ドキュメント..."
-noResultsFound: "検索結果が見つかりませんでした"
-
-onThisPage: "このページでは"
-editThisPage: "このページをGitHubで編集する →"
+backToTop: "トップにスクロール"
+changeLanguage: "言語を変更"
+changeTheme: "テーマを変更"
+copyright: "© 2023 Hextra プロジェクト。"
+dark: "ダーク"
+editThisPage: "このページをGitHubで編集 →"
 lastUpdated: "最終更新日"
-
-copyright: "© 2023 Hextra Project."
+light: "ライト"
+noResultsFound: "結果が見つかりませんでした。"
+onThisPage: "このページの内容"
+poweredBy: "提供元 Hextra"
+readMore: "もっと読む →"
+searchPlaceholder: "検索..."

i18n/ko.yaml

@@ -2,8 +2,12 @@ backToTop: "맨위로 스크롤"
 changeLanguage: "언어변경"
 changeTheme: "테마변경"
 copyright: "© 2023 Hextra Project."
+dark: "어두운 테마"
 editThisPage: "Github에서 편집하기 →"
 lastUpdated: "마지막 수정일자"
+light: "밝은 테마"
+noResultsFound: "결과 없음"
 onThisPage: "페이지 목차"
+poweredBy: "제공 Hextra"
 readMore: "더보기 →"
 searchPlaceholder: "검색..."

i18n/nb.yaml

@@ -0,0 +1,13 @@
+backToTop: "Gå til toppen"
+changeLanguage: "Endre språk"
+changeTheme: "Endre tema"
+copyright: "© 2023 Hextra-prosjektet."
+dark: "Mørk"
+editThisPage: "Rediger denne siden på GitHub →"
+lastUpdated: "Sist oppdatert"
+light: "Lys"
+noResultsFound: "Fant ingen treff."
+onThisPage: "På denne siden"
+poweredBy: "Powered by Hextra"
+readMore: "Les mer →"
+searchPlaceholder: "Søk..."

i18n/nn.yaml

@@ -0,0 +1,13 @@
+backToTop: "Gå til toppen"
+changeLanguage: "Endre språk"
+changeTheme: "Endre tema"
+copyright: "© 2023 Hextra-prosjektet."
+dark: "Mørk"
+editThisPage: "Rediger denne sida på GitHub →"
+lastUpdated: "Sist oppdatert"
+light: "Ljos"
+noResultsFound: "Fann ingen treff."
+onThisPage: "På denne sida"
+poweredBy: "Powered by Hextra"
+readMore: "Les meir →"
+searchPlaceholder: "Søk..."

i18n/pt.yaml

@@ -1,7 +1,13 @@
-onThisPage: "Nesta página"
-editThisPage: "Edita esta página no GitHub →"
-lastUpdated: "Última actualização"
-
 backToTop: "Voltar ao topo"
-
+changeLanguage: "Mudar a língua"
+changeTheme: "Mudar tema"
 copyright: "© 2023 Projecto Hextra."
+dark: "Escuro"
+editThisPage: "Edita esta página no GitHub →"
+lastUpdated: "Última modificação"
+light: "Claro"
+noResultsFound: "Nenhum resultado encontrado"
+onThisPage: "Nesta página"
+poweredBy: "Com a tecnologia de Hextra"
+readMore: "Ler mais →"
+searchPlaceholder: "Procurar..."

i18n/sw.yaml

@@ -1,5 +1,13 @@
-onThisPage: "Kwenye ukurasa huu"
+backToTop: "Tembeza hadi juu"
+changeLanguage: "Badilisha lugha"
+changeTheme: "Badilisha mandhari"
+copyright: "© 2023 Hextra Project."
+dark: "Meusi"
 editThisPage: "Hariri ukurasa huu kwenye GitHub →"
 lastUpdated: "Ilisasishwa mwisho"
-backToTop: "Tembeza hadi juu"
-copyright: "© 2023 Hextra Project."
+light: "Nuru"
+noResultsFound: "Hakuna matokeo yalipopatikana."
+onThisPage: "Kwenye ukurasa huu"
+poweredBy: "Inaendeshwa na Hextra"
+readMore: "Soma zaidi →"
+searchPlaceholder: "Tafuta..."

i18n/vi.yaml

@@ -1,7 +1,13 @@
-onThisPage: "Ở trang này"
+backToTop: "Lướt lên đầu trang"
+changeLanguage: "Đổi ngôn ngữ"
+changeTheme: "Đổi chủ đề"
+copyright: "© 2023 Hextra Project."
+dark: "Tối"
 editThisPage: "Sửa trang này trên GitHub →"
 lastUpdated: "Lần cuối cập nhật lúc"
-
-backToTop: "Lướt lên đầu trang"
-
-copyright: "© 2023 Hextra Project."
+light: "Sáng"
+noResultsFound: "Không tìm thấy kết quả."
+onThisPage: "Ở trang này"
+poweredBy: "Chạy bởi Hextra"
+readMore: "Đọc thêm →"
+searchPlaceholder: "Tìm kiếm..."

i18n/zh-cn.yaml

@@ -1,10 +1,3 @@
-documentation: "文档"
-showcase: "项目展示"
-blog: "博客"
-about: "关于"
-more: "更多"
-hugoDocs: "Hugo 文档 ↗"
-
 backToTop: "返回顶部"
 changeLanguage: "切换语言"
 changeTheme: "切换主题"

i18n/zh-tw.yaml

@@ -1,15 +1,13 @@
-documentation: "文檔"
-blog: "博客"
-about: "關於"
-
-more: "更多"
-hugoDocs: "Hugo 文檔 ↗"
-
-searchPlaceholder: "搜索文檔..."
-noResultsFound: "無結果"
-
-onThisPage: "此頁上"
+backToTop: "返回頂部"
+changeLanguage: "切換語言"
+changeTheme: "切換主題"
+copyright: "© 2023 Hextra Project."
+dark: "深色"
 editThisPage: "在 GitHub 上編輯此頁 →"
 lastUpdated: "最後更新於"
-
-copyright: "© 2023 Hextra Project."
+light: "淺色"
+noResultsFound: "無結果"
+onThisPage: "此頁上"
+poweredBy: "由 Hextra 驅動"
+readMore: "更多 →"
+searchPlaceholder: "搜尋文檔..."

layouts/partials/google-analytics.html

@@ -1,4 +1,10 @@
-{{ with .Site.GoogleAnalytics }}
+{{/* site.GoogleAnalytics is deprecated in Hugo v0.120.0 */}}
+{{/* it will be removed in a future version */}}
+{{- $gtagID := "" -}}
+{{- with site.GoogleAnalytics -}}{{ $gtagID = . }}{{- end -}}
+{{- with site.Config.Services.GoogleAnalytics.ID -}}{{ $gtagID = . }}{{- end -}}
+
+{{- with $gtagID }}
   <!-- Global site tag (gtag.js) - Google Analytics -->
   <script async src="https://www.googletagmanager.com/gtag/js?id={{ . }}"></script>
   <script>
@@ -10,4 +16,4 @@
 
     gtag("config", "{{ . }}");
   </script>
-{{ end }}
+{{ end -}}

layouts/partials/head.html

@@ -25,7 +25,7 @@
 
 
   <!-- Google Analytics -->
-  {{- if and .Site.GoogleAnalytics (eq hugo.Environment "production") }}
+  {{- if and (eq hugo.Environment "production") (or .Site.GoogleAnalytics .Site.Config.Services.GoogleAnalytics.ID) }}
     <link rel="preconnect" href="https://www.googletagmanager.com" crossorigin />
     {{ partial "google-analytics.html" . }}
   {{- end }}

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 }}
+          {{- .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/callout.html

@@ -5,17 +5,30 @@
 {{ if eq $emoji "" }}
   {{ $emoji = index $calloutEmojiDict $type }}
 {{ end }}
+{{/* Also allow using "icon" */}}
+{{ $icon := .Get "icon" }}
 
 {{ $defaultClass := "border-orange-100 bg-orange-50 text-orange-800 dark:border-orange-400/30 dark:bg-orange-400/20 dark:text-orange-300" }}
 {{ $infoClass := "border-blue-200 bg-blue-100 text-blue-900 dark:border-blue-200/30 dark:bg-blue-900/30 dark:text-blue-200" }}
 {{ $warningClass := "border-yellow-100 bg-yellow-50 text-yellow-900 dark:border-yellow-200/30 dark:bg-yellow-700/30 dark:text-yellow-200" }}
 {{ $errorClass := "border-red-200 bg-red-100 text-red-900 dark:border-red-200/30 dark:bg-red-900/30 dark:text-red-200" }}
 
-
 {{ $class := cond (eq $type "info") $infoClass (cond (eq $type "warning") $warningClass (cond (eq $type "error") $errorClass $defaultClass)) }}
 
+
 <div class="overflow-x-auto mt-6 flex rounded-lg border py-2 ltr:pr-4 rtl:pl-4 contrast-more:border-current contrast-more:dark:border-current {{ $class }}">
-  <div class="select-none text-xl ltr:pl-3 ltr:pr-2 rtl:pr-3 rtl:pl-2" style='font-family: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";'>{{ $emoji }}</div>
+  <div class="ltr:pl-3 ltr:pr-2 rtl:pr-3 rtl:pl-2">
+    {{- with $emoji -}}
+      <div class="select-none text-xl" style="font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';">
+        {{ . }}
+      </div>
+    {{- else -}}
+      {{- with $icon }}
+        {{ partial "utils/icon.html" (dict "name" . "attributes" `height=1.2em class="inline-block align-middle"`) -}}
+      {{- end -}}
+    {{- end -}}
+  </div>
+
   <div class="w-full min-w-0 leading-7">
     <div class="mt-6 leading-7 first:mt-0">
       {{ .Inner | markdownify }}

layouts/shortcodes/card.html

@@ -79,3 +79,4 @@
     <div class="line-clamp-3 text-sm font-normal text-gray-500 dark:text-gray-400 px-4 mb-4 mt-2">{{- $subtitle | markdownify -}}</div>
   {{- end -}}
 </a>
+{{- /* Strip trailing newline. */ -}}

layouts/shortcodes/cards.html

@@ -1,5 +1,5 @@
 {{ $rows := .Get "rows" | default "3" }}
 
 <div class="hextra-cards mt-4 gap-4 grid not-prose" style="--rows: {{ $rows }};">
-  {{ .Inner }}
+  {{- .Inner -}}
 </div>

layouts/shortcodes/hextra/feature-card.html

@@ -10,10 +10,14 @@
 {{- $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 }}
-  class="{{ $class }} hextra-feature-card relative overflow-hidden rounded-3xl border border-gray-200 hover:border-gray-300 dark:border-neutral-800 dark:hover:border-neutral-700 before:pointer-events-none before:absolute before:inset-0 before:bg-glass-gradient"
+  class="{{ $class }} hextra-feature-card not-prose block relative overflow-hidden rounded-3xl border border-gray-200 hover:border-gray-300 dark:border-neutral-800 dark:hover:border-neutral-700 before:pointer-events-none before:absolute before:inset-0 before:bg-glass-gradient"
 >
   <div class="relative w-full p-6">
     <h3 class="text-2xl font-medium leading-6 mb-2 flex items-center">

layouts/shortcodes/hextra/feature-grid.html

@@ -2,7 +2,7 @@
 
 
 <div
-  class="grid sm:grid-cols-2 lg:grid-cols-3 grid-cols-1 gap-4 w-full"
+  class="grid sm:grid-cols-2 lg:grid-cols-3 grid-cols-1 gap-4 w-full not-prose"
   {{ with $style }}style="{{ . | safeCSS }}"{{ end }}
 >
   {{ .Inner }}

layouts/shortcodes/hextra/hero-badge.html

@@ -6,8 +6,8 @@
 
 
 <a
-  href="{{ $href }}"
-  class="{{ $class }} inline-flex items-center rounded-full gap-2 px-3 py-1 text-xs text-gray-600 dark:text-gray-400 bg-gray-100 dark:bg-neutral-800 dark:border-neutral-800 border hover:border-gray-400 dark:hover:text-gray-50 dark:hover:border-gray-600 transition-all ease-in duration-200"
+  {{ if $link }}href="{{ $href }}"{{ end }}
+  class="{{ $class }} not-prose inline-flex items-center rounded-full gap-2 px-3 py-1 text-xs text-gray-600 dark:text-gray-400 bg-gray-100 dark:bg-neutral-800 dark:border-neutral-800 border hover:border-gray-400 dark:hover:text-gray-50 dark:hover:border-gray-600 transition-all ease-in duration-200"
   {{ with $style }}style="{{ . | safeCSS }}"{{ end }}
   {{ if $external }}target="_blank" rel="noreferrer"{{ end -}}
 >

layouts/shortcodes/hextra/hero-button.html

@@ -7,7 +7,7 @@
 
 <a
   href="{{ $href }}"
-  class="font-medium cursor-pointer px-6 py-3 rounded-full text-center text-white inline-block bg-primary-600 hover:bg-primary-700 focus:outline-none focus:ring-4 focus:ring-primary-300 dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800 transition-all ease-in duration-200"
+  class="not-prose font-medium cursor-pointer px-6 py-3 rounded-full text-center text-white inline-block bg-primary-600 hover:bg-primary-700 focus:outline-none focus:ring-4 focus:ring-primary-300 dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800 transition-all ease-in duration-200"
   {{ with $style }}style="{{ . | safeCSS }}"{{ end }}
   {{ if $external }}target="_blank" rel="noreferrer"{{ end -}}
 >

layouts/shortcodes/hextra/hero-headline.html

@@ -2,7 +2,7 @@
 
 
 <h1
-  class="text-4xl font-bold leading-none tracking-tighter md:text-5xl py-2 bg-clip-text text-transparent bg-gradient-to-r from-gray-900 to-gray-600 dark:from-gray-100 dark:to-gray-400"
+  class="not-prose text-4xl font-bold leading-none tracking-tighter md:text-5xl py-2 bg-clip-text text-transparent bg-gradient-to-r from-gray-900 to-gray-600 dark:from-gray-100 dark:to-gray-400"
   {{ with $style }}style="{{ . | safeCSS }}"{{ end }}
 >
   {{ .Inner | markdownify }}

layouts/shortcodes/hextra/hero-subtitle.html

@@ -2,7 +2,7 @@
 
 
 <p
-  class="text-xl text-gray-600 dark:text-gray-400 sm:text-xl"
+  class="not-prose text-xl text-gray-600 dark:text-gray-400 sm:text-xl"
   {{ with $style }}style="{{ . | safeCSS }}"{{ end }}
 >
   {{ .Inner | markdownify }}