Genius/hextra
1
0
Fork 0
forked from drowl87/hextra_mirror
Code Pull Requests Activity

feat: add hx- prefix to Hextra Tailwind CSS classes (#300)

Browse Source 
* feat: add prefix to tailwind css classes

* fix: remove unnecessary prefixes

* fix: add missing prefix in other places

* chore: regenerate hugo_stats.json

* chore: run `npm run build:css`

* chore: add `hx-` prefix to _index.fa.md

* fix: lang switcher display issue

* fix: add `hx-` prefix to showcase/index.fa.md

* fix: lang switch param mistake
This commit is contained in:
Xin 2024-02-20 17:59:31 -05:00 committed by GitHub
parent 0e312d3476
commit 5c7303bee7
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
63 changed files with 1335 additions and 1340 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1006
assets/css/compiled/main.css
View File

File diff suppressed because it is too large Load Diff

2
assets/css/components/code-copy.css
View File

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

12
assets/css/components/navbar.css
View File

@ -1,6 +1,6 @@
nav {
.search-wrapper {
@apply hidden md:inline-block;
@apply hx-hidden md:hx-inline-block;
}
}
@ -8,13 +8,13 @@ nav {
(-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))
) {
.nav-container-blur {
@apply backdrop-blur-md bg-white/[.85] dark:!bg-dark/80;
@apply hx-backdrop-blur-md hx-bg-white/[.85] dark:!hx-bg-dark/80;
}
}
.hamburger-menu svg {
g {
@apply origin-center;
@apply hx-origin-center;
transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1);
}
path {
@ -37,16 +37,16 @@ nav {
&.open > {
path {
@apply opacity-0;
@apply hx-opacity-0;
}
g:nth-of-type(1) {
@apply rotate-45;
@apply hx-rotate-45;
path {
transform: translate3d(0, 4px, 0);
}
}
g:nth-of-type(2) {
@apply -rotate-45;
@apply -hx-rotate-45;
path {
transform: translate3d(0, -4px, 0);
}

8
assets/css/components/scrollbar.css
View File

@ -4,18 +4,18 @@
scrollbar-gutter: stable;
&::-webkit-scrollbar {
@apply w-3 h-3;
@apply hx-w-3 hx-h-3;
}
&::-webkit-scrollbar-track {
@apply bg-transparent;
@apply hx-bg-transparent;
}
&::-webkit-scrollbar-thumb {
@apply rounded-[10px];
@apply hx-rounded-[10px];
}
&:hover::-webkit-scrollbar-thumb {
border: 3px solid transparent;
background-color: var(--tw-shadow-color);
background-clip: content-box;
@apply shadow-neutral-500/20 hover:shadow-neutral-500/40;
@apply hx-shadow-neutral-500/20 hover:hx-shadow-neutral-500/40;
}
}

20
assets/css/components/search.css
View File

@ -1,31 +1,31 @@
.search-wrapper {
li {
@apply mx-2.5 break-words rounded-md contrast-more:border text-gray-800 contrast-more:border-transparent dark:text-gray-300;
@apply hx-mx-2.5 hx-break-words hx-rounded-md contrast-more:hx-border hx-text-gray-800 contrast-more:hx-border-transparent dark:hx-text-gray-300;
a {
@apply block scroll-m-12 px-2.5 py-2;
@apply hx-block hx-scroll-m-12 hx-px-2.5 hx-py-2;
}
.title {
@apply text-base font-semibold leading-5;
@apply hx-text-base hx-font-semibold hx-leading-5;
}
.active {
@apply rounded-md bg-primary-500/10 contrast-more:border-primary-500;
@apply hx-rounded-md hx-bg-primary-500/10 contrast-more:hx-border-primary-500;
}
}
.no-result {
@apply block select-none p-8 text-center text-sm text-gray-400;
@apply hx-block hx-select-none hx-p-8 hx-text-center hx-text-sm hx-text-gray-400;
}
.prefix {
@apply mx-2.5 mb-2 mt-6 select-none border-b border-black/10 px-2.5 pb-1.5 text-xs font-semibold
uppercase text-gray-500 first:mt-0 dark:border-white/20 dark:text-gray-300 contrast-more:border-gray-600
contrast-more:text-gray-900 contrast-more:dark:border-gray-50 contrast-more:dark:text-gray-50;
@apply hx-mx-2.5 hx-mb-2 hx-mt-6 hx-select-none hx-border-b hx-border-black/10 hx-px-2.5 hx-pb-1.5 hx-text-xs hx-font-semibold
hx-uppercase hx-text-gray-500 first:hx-mt-0 dark:hx-border-white/20 dark:hx-text-gray-300 contrast-more:hx-border-gray-600
contrast-more:hx-text-gray-900 contrast-more:dark:hx-border-gray-50 contrast-more:dark:hx-text-gray-50;
}
.excerpt {
@apply overflow-hidden text-ellipsis mt-1 text-sm leading-[1.35rem] text-gray-600 dark:text-gray-400 contrast-more:dark:text-gray-50;
@apply hx-overflow-hidden hx-text-ellipsis hx-mt-1 hx-text-sm hx-leading-[1.35rem] hx-text-gray-600 dark:hx-text-gray-400 contrast-more:dark:hx-text-gray-50;
display: -webkit-box;
line-clamp: 1;
-webkit-line-clamp: 1;
@ -33,6 +33,6 @@
}
.match {
@apply text-primary-600;
@apply hx-text-primary-600;
}
}

8
assets/css/components/sidebar.css
View File

@ -1,6 +1,6 @@
@media (max-width: 767px) {
.sidebar-container {
@apply fixed pt-[calc(var(--navbar-height))] top-0 w-full bottom-0 z-[15] overscroll-contain bg-white dark:bg-dark;
@apply hx-fixed hx-pt-[calc(var(--navbar-height))] hx-top-0 hx-w-full hx-bottom-0 hx-z-[15] hx-overscroll-contain hx-bg-white dark:hx-bg-dark;
transition: transform 0.8s cubic-bezier(0.52, 0.16, 0.04, 1);
will-change: transform, opacity;
contain: layout style;
@ -10,12 +10,12 @@
.sidebar-container {
li > div {
@apply h-0;
@apply hx-h-0;
}
li.open > div {
@apply h-auto pt-1;
@apply hx-h-auto hx-pt-1;
}
li.open > a > span > svg > path {
@apply rotate-90;
@apply hx-rotate-90;
}
}

8
assets/css/components/steps.css
View File

@ -2,10 +2,10 @@
counter-increment: step;
&:before {
@apply absolute w-[33px] h-[33px];
@apply border-4 border-white bg-gray-100 dark:border-dark dark:bg-neutral-800;
@apply rounded-full text-neutral-400 text-base font-normal text-center -indent-px;
@apply mt-[3px] ml-[-41px];
@apply hx-absolute hx-w-[33px] hx-h-[33px];
@apply hx-border-4 hx-border-white hx-bg-gray-100 dark:hx-border-dark dark:hx-bg-neutral-800;
@apply hx-rounded-full hx-text-neutral-400 hx-text-base hx-font-normal hx-text-center -hx-indent-px;
@apply hx-mt-[3px] hx-ml-[-41px];
content: counter(step);
}
}

24
assets/css/highlight.css
View File

@ -3,51 +3,51 @@
@import "chroma/dark.css";
.code-block {
@apply text-[.9em] leading-5;
@apply hx-text-[.9em] hx-leading-5;
pre {
@apply text-[.9em] bg-primary-700/5 overflow-x-auto font-medium subpixel-antialiased dark:bg-primary-300/10 contrast-more:border contrast-more:border-primary-900/20 contrast-more:contrast-150 contrast-more:dark:border-primary-100/40;
@apply hx-text-[.9em] hx-bg-primary-700/5 hx-overflow-x-auto hx-font-medium hx-subpixel-antialiased dark:hx-bg-primary-300/10 contrast-more:hx-border contrast-more:hx-border-primary-900/20 contrast-more:hx-contrast-150 contrast-more:dark:hx-border-primary-100/40;
}
.filename {
@apply absolute top-0 z-[1] w-full truncate rounded-t-xl bg-primary-700/5 py-2 px-4 text-xs text-gray-700 dark:bg-primary-300/10 dark:text-gray-200;
@apply hx-absolute hx-top-0 hx-z-[1] hx-w-full hx-truncate hx-rounded-t-xl hx-bg-primary-700/5 hx-py-2 hx-px-4 hx-text-xs hx-text-gray-700 dark:hx-bg-primary-300/10 dark:hx-text-gray-200;
}
.filename + pre:not(.lntable pre) {
/* Override padding for code blocks with filename but no highlight */
@apply pt-12;
@apply hx-pt-12;
}
}
.code-block pre:not(.lntable pre) {
@apply px-4 mb-4 py-4 rounded-xl;
@apply hx-px-4 hx-mb-4 hx-py-4 hx-rounded-xl;
}
.code-block div:nth-of-type(2) pre {
@apply pt-12 pb-4;
@apply hx-pt-12 hx-pb-4;
}
.chroma {
.lntable {
@apply m-0 block w-auto overflow-auto rounded-xl;
@apply hx-m-0 hx-block hx-w-auto hx-overflow-auto hx-rounded-xl;
pre {
@apply pt-4 pb-4;
@apply hx-pt-4 hx-pb-4;
}
}
.ln,
.lnt:not(.hl > .lnt),
.hl:not(.line) {
@apply pl-4 pr-4 min-w-[2.6rem] text-neutral-600 dark:text-neutral-300;
@apply hx-pl-4 hx-pr-4 hx-min-w-[2.6rem] hx-text-neutral-600 dark:hx-text-neutral-300;
}
.lntd {
@apply p-0 align-top;
@apply hx-p-0 hx-align-top;
}
.lntd:last-of-type {
@apply w-full;
@apply hx-w-full;
}
/* LineHighlight */
.hl {
@apply block w-full bg-primary-800/10;
@apply hx-block hx-w-full hx-bg-primary-800/10;
}
}

4
assets/css/styles.css
View File

@ -11,13 +11,13 @@
@import "components/code-copy.css";
html {
@apply text-base antialiased;
@apply hx-text-base hx-antialiased;
font-feature-settings: "rlig" 1, "calt" 1, "ss01" 1;
-webkit-tap-highlight-color: transparent;
}
body {
@apply w-full bg-white dark:bg-dark dark:text-gray-100;
@apply hx-w-full hx-bg-white dark:hx-bg-dark dark:hx-text-gray-100;
}
:root {

72
assets/css/typography.css
View File

@ -1,117 +1,117 @@
.content {
: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;
@apply hx-mt-2 hx-text-4xl hx-font-bold hx-tracking-tight hx-text-slate-900 dark:hx-text-slate-100;
}
: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;
@apply hx-font-semibold hx-tracking-tight hx-text-slate-900 dark:hx-text-slate-100 hx-mt-10 hx-border-b hx-pb-1 hx-text-3xl hx-border-neutral-200/70 contrast-more:hx-border-neutral-400 dark:hx-border-primary-100/10 contrast-more:dark:hx-border-neutral-400;
}
: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;
@apply hx-font-semibold hx-tracking-tight hx-text-slate-900 dark:hx-text-slate-100 hx-mt-8 hx-text-2xl;
}
: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;
@apply hx-font-semibold hx-tracking-tight hx-text-slate-900 dark:hx-text-slate-100 hx-mt-8 hx-text-xl;
}
: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;
@apply hx-font-semibold hx-tracking-tight hx-text-slate-900 dark:hx-text-slate-100 hx-mt-8 hx-text-lg;
}
: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;
@apply hx-font-semibold hx-tracking-tight hx-text-slate-900 dark:hx-text-slate-100 hx-mt-8 hx-text-base;
}
:where(p):not(:where([class~=not-prose],[class~=not-prose] *)) {
@apply mt-6 leading-7 first:mt-0;
@apply hx-mt-6 hx-leading-7 first:hx-mt-0;
}
:where(a):not(:where([class~=not-prose],[class~=not-prose] *)) {
@apply text-primary-600 underline decoration-from-font [text-underline-position:from-font];
@apply hx-text-primary-600 hx-underline hx-decoration-from-font [text-underline-position:from-font];
}
: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;
@apply hx-mt-6 hx-border-gray-300 hx-italic hx-text-gray-700 dark:hx-border-gray-700 dark:hx-text-gray-400 first:hx-mt-0 ltr:hx-border-l-2 ltr:hx-pl-6 rtl:hx-border-r-2 rtl:hx-pr-6;
}
: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;
@apply hx-bg-primary-700/5 hx-mb-4 hx-overflow-x-auto hx-rounded-xl hx-font-medium hx-subpixel-antialiased dark:hx-bg-primary-300/10 hx-text-[.9em] contrast-more:hx-border contrast-more:hx-border-primary-900/20 contrast-more:hx-contrast-150 contrast-more:dark:hx-border-primary-100/40 hx-py-4;
}
: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;
@apply hx-border-black hx-border-opacity-[0.04] hx-bg-opacity-[0.03] hx-bg-black hx-break-words hx-rounded-md hx-border hx-py-0.5 hx-px-[.25em] hx-text-[.9em] dark:hx-border-white/10 dark:hx-bg-white/10;
}
: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;
@apply hx-block hx-overflow-x-auto hx-mt-6 hx-p-0 first:hx-mt-0;
tr {
@apply m-0 border-t border-gray-300 p-0 dark:border-gray-600 even:bg-gray-100 even:dark:bg-gray-600/20;
@apply hx-m-0 hx-border-t hx-border-gray-300 hx-p-0 dark:hx-border-gray-600 even:hx-bg-gray-100 even:dark:hx-bg-gray-600/20;
}
th {
@apply m-0 border border-gray-300 px-4 py-2 font-semibold dark:border-gray-600;
@apply hx-m-0 hx-border hx-border-gray-300 hx-px-4 hx-py-2 hx-font-semibold dark:hx-border-gray-600;
}
td {
@apply m-0 border border-gray-300 px-4 py-2 dark:border-gray-600;
@apply hx-m-0 hx-border hx-border-gray-300 hx-px-4 hx-py-2 dark:hx-border-gray-600;
}
}
:where(ol):not(:where([class~=not-prose],[class~=not-prose] *)) {
@apply mt-6 list-decimal first:mt-0 ltr:ml-6 rtl:mr-6;
@apply hx-mt-6 hx-list-decimal first:hx-mt-0 ltr:hx-ml-6 rtl:hx-mr-6;
li {
@apply my-2;
@apply hx-my-2;
}
}
:where(ul):not(:where([class~=not-prose],[class~=not-prose] *)) {
@apply mt-6 list-disc first:mt-0 ltr:ml-6 rtl:mr-6;
@apply hx-mt-6 hx-list-disc first:hx-mt-0 ltr:hx-ml-6 rtl:hx-mr-6;
li {
@apply my-2;
@apply hx-my-2;
}
}
/* This CSS rule targets the first nested unordered (ul) or ordered (ol) list
inside the list item (li) of any parent ul or ol.
/* This CSS rule targets the first nested unordered (ul) or ordered (ol) list
inside the list item (li) of any parent ul or ol.
The rule sets the top margin of the selected list to zero. */
:where(ul, ol) > li > :where(ul, ol):not(:where([class~=not-prose],[class~=not-prose] *)) {
@apply mt-0;
@apply hx-mt-0;
}
: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;
@apply hx-border-black hx-border-opacity-[0.04] hx-bg-opacity-[0.03] hx-bg-black hx-break-words hx-rounded-md hx-border hx-py-0.5 hx-px-[.25em] hx-text-[.9em] dark:hx-border-white/10 dark:hx-bg-white/10;
}
:where(pre.mermaid):not(:where(.code-block pre, [class~=not-prose],[class~=not-prose] *)) {
@apply bg-transparent rounded-none dark:bg-transparent;
@apply hx-bg-transparent hx-rounded-none dark:hx-bg-transparent;
}
:where(img):not(:where([class~=not-prose],[class~=not-prose] *)) {
@apply mx-auto my-4 rounded-md;
@apply hx-mx-auto hx-my-4 hx-rounded-md;
}
: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;
@apply hx-text-sm hx-text-gray-500 dark:hx-text-gray-400 hx-mt-2 hx-block hx-text-center;
}
}
.footnotes {
@apply mt-12 text-sm;
@apply hx-mt-12 hx-text-sm;
}
}
.subheading-anchor {
@apply opacity-0 transition-opacity ltr:ml-1 rtl:mr-1;
@apply hx-opacity-0 hx-transition-opacity ltr:hx-ml-1 rtl:hx-mr-1;
span:target + &,
:hover > &,
&:focus {
@apply opacity-100;
@apply hx-opacity-100;
}
span + &,
:hover > & {
@apply !no-underline;
@apply !hx-no-underline;
}
&:after {
@apply content-['#'] px-1;
@apply text-gray-300 dark:text-neutral-700;
@apply hx-content-['#'] hx-px-1;
@apply hx-text-gray-300 dark:hx-text-neutral-700;
span:target + & {
@apply text-gray-400;
@apply dark:text-neutral-500;
@apply hx-text-gray-400;
@apply dark:hx-text-neutral-500;
}
}
}
article details > summary {
&::-webkit-details-marker {
@apply hidden;
@apply hx-hidden;
}
&::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='h-5 w-5' viewBox='0 0 20 20' fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z' clip-rule='evenodd' /%3E%3C/svg%3E");
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='hx-h-5 hx-w-5' viewBox='0 0 20 20' fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z' clip-rule='evenodd' /%3E%3C/svg%3E");
height: 1.2em;
width: 1.2em;
vertical-align: -4px;

4
assets/js/back-to-top.js
View File

@ -5,9 +5,9 @@ document.addEventListener("DOMContentLoaded", function () {
if (backToTop) {
document.addEventListener("scroll", (e) => {
if (window.scrollY > 300) {
backToTop.classList.remove("opacity-0");
backToTop.classList.remove("hx-opacity-0");
} else {
backToTop.classList.add("opacity-0");
backToTop.classList.add("hx-opacity-0");
}
});
}

6
assets/js/flexsearch.js
View File

@ -6,7 +6,7 @@ document.addEventListener("DOMContentLoaded", function () {
// select the kbd element under the .search-wrapper class
const keys = document.querySelectorAll(".search-wrapper kbd");
keys.forEach(key => {
key.innerHTML = '<span class="text-xs">⌘</span>K';
key.innerHTML = '<span class="hx-text-xs">⌘</span>K';
});
}
});
@ -128,7 +128,7 @@ document.addEventListener("DOMContentLoaded", function () {
function hideSearchResults() {
const { resultsElement } = getActiveSearchElement();
if (!resultsElement) return;
resultsElement.classList.add('hidden');
resultsElement.classList.add('hx-hidden');
}
// Handle keyboard events.
@ -250,7 +250,7 @@ document.addEventListener("DOMContentLoaded", function () {
while (resultsElement.firstChild) {
resultsElement.removeChild(resultsElement.firstChild);
}
resultsElement.classList.remove('hidden');
resultsElement.classList.remove('hx-hidden');
const pageResults = window.pageIndex.search(query, 5, { enrich: true, suggest: true })[0]?.result || [];

4
assets/js/lang.js
View File

@ -5,7 +5,7 @@
e.preventDefault();
switcher.dataset.state = switcher.dataset.state === 'open' ? 'closed' : 'open';
const optionsElement = switcher.nextElementSibling;
optionsElement.classList.toggle('hidden');
optionsElement.classList.toggle('hx-hidden');
// Calculate position of language options element
const switcherRect = switcher.getBoundingClientRect();
@ -21,7 +21,7 @@
languageSwitchers.forEach((switcher) => {
switcher.dataset.state = 'closed';
const optionsElement = switcher.nextElementSibling;
optionsElement.classList.add('hidden');
optionsElement.classList.add('hx-hidden');
});
}
});

18
assets/js/menu.js
View File

@ -6,9 +6,9 @@ document.addEventListener('DOMContentLoaded', function () {
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);
const overlayClasses = ['hx-fixed', 'hx-inset-0', 'hx-z-10', 'hx-bg-black/80', 'dark:hx-bg-black/60'];
overlay.classList.add('hx-bg-transparent');
overlay.classList.remove("hx-hidden", ...overlayClasses);
function toggleMenu() {
// Toggle the hamburger menu
@ -19,22 +19,22 @@ document.addEventListener('DOMContentLoaded', function () {
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');
document.body.classList.toggle('hx-overflow-hidden');
document.body.classList.toggle('md:hx-overflow-auto');
}
menu.addEventListener('click', (e) => {
e.preventDefault();
toggleMenu();
if (overlay.classList.contains('bg-transparent')) {
if (overlay.classList.contains('hx-bg-transparent')) {
// Show the overlay
overlay.classList.add(...overlayClasses);
overlay.classList.remove('bg-transparent');
overlay.classList.remove('hx-bg-transparent');
} else {
// Hide the overlay
overlay.classList.remove(...overlayClasses);
overlay.classList.add('bg-transparent');
overlay.classList.add('hx-bg-transparent');
}
});
@ -44,6 +44,6 @@ document.addEventListener('DOMContentLoaded', function () {
// Hide the overlay
overlay.classList.remove(...overlayClasses);
overlay.classList.add('bg-transparent');
overlay.classList.add('hx-bg-transparent');
});
});

26
exampleSite/content/_index.fa.md
View File

@ -4,52 +4,52 @@ layout: hextra-home
---
{{< hextra/hero-badge >}}
<div class="w-2 h-2 rounded-full bg-primary-400"></div>
<div class="hx-w-2 hx-h-2 hx-rounded-full hx-bg-primary-400"></div>
<span>آزاد، متن‌باز</span>
{{< icon name="arrow-circle-left" attributes="height=14" >}}
{{< /hextra/hero-badge >}}
<div class="mt-6 mb-6">
<div class="hx-mt-6 hx-mb-6">
{{< hextra/hero-headline >}}
ساخت وب‌سایت‌های مدرن &nbsp;<br class="sm:block hidden" />با مارک‌داون و هیوگو
ساخت وب‌سایت‌های مدرن &nbsp;<br class="sm:hx-block hx-hidden" />با مارک‌داون و هیوگو
{{< /hextra/hero-headline >}}
</div>
<div class="mb-12">
<div class="hx-mb-12">
{{< hextra/hero-subtitle >}}
تم هیوگو سریع و دارای امکانات کامل&nbsp;<br class="sm:block hidden" />برای ایجاد وب‌سایت‌های استاتیک زیبا
تم هیوگو سریع و دارای امکانات کامل&nbsp;<br class="sm:hx-block hx-hidden" />برای ایجاد وب‌سایت‌های استاتیک زیبا
{{< /hextra/hero-subtitle >}}
</div>
<div class="mb-6">
<div class="hx-mb-6">
{{< hextra/hero-button text="شروع کنید" link="docs" >}}
</div>
<div class="mt-6"></div>
<div class="hx-mt-6"></div>
{{< hextra/feature-grid >}}
{{< hextra/feature-card
title="سریع و با امکانات کامل"
subtitle="ساده و آسان برای استفاده، در عین حال قدرتمند و غنی از ویژگی‌ها متنوع."
class="aspect-auto md:aspect-[1.1/1] max-md:min-h-[340px]"
class="hx-aspect-auto md:hx-aspect-[1.1/1] max-md:hx-min-h-[340px]"
image="/images/hextra-doc.webp"
imageClass="top-[40%] left-[24px] w-[180%] sm:w-[110%] dark:opacity-80"
imageClass="hx-top-[40%] hx-left-[24px] hx-w-[180%] sm:hx-w-[110%] dark:hx-opacity-80"
style="background: radial-gradient(ellipse at 50% 80%,rgba(194,97,254,0.15),hsla(0,0%,100%,0));"
>}}
{{< hextra/feature-card
title="مارک‌داون تنها چیزی است که شما نیاز دارید"
subtitle="فقط با مارک‌داون بنویسید. تکمیل و کامل با کامپوننت‌های کد کوتاه."
class="aspect-auto md:aspect-[1.1/1] max-lg:min-h-[340px]"
class="hx-aspect-auto md:hx-aspect-[1.1/1] max-lg:hx-min-h-[340px]"
image="/images/hextra-markdown.webp"
imageClass="top-[40%] left-[36px] w-[180%] sm:w-[110%] dark:opacity-80"
imageClass="hx-top-[40%] hx-left-[36px] hx-w-[180%] sm:hx-w-[110%] dark:hx-opacity-80"
style="background: radial-gradient(ellipse at 50% 80%,rgba(142,53,74,0.15),hsla(0,0%,100%,0));"
>}}
{{< hextra/feature-card
title="جستجوی کامل متن"
subtitle="جستجوی متن کامل داخلی با FlexSearch، بدون نیاز به نصب موارد اضافی."
class="aspect-auto md:aspect-[1.1/1] max-md:min-h-[340px]"
class="hx-aspect-auto md:hx-aspect-[1.1/1] max-md:hx-min-h-[340px]"
image="/images/hextra-search.webp"
imageClass="top-[40%] left-[36px] w-[110%] sm:w-[110%] dark:opacity-80"
imageClass="hx-top-[40%] hx-left-[36px] hx-w-[110%] sm:hx-w-[110%] dark:hx-opacity-80"
style="background: radial-gradient(ellipse at 50% 80%,rgba(221,210,59,0.15),hsla(0,0%,100%,0));"
>}}
{{< hextra/feature-card

26
exampleSite/content/_index.md
View File

@ -4,52 +4,52 @@ layout: hextra-home
---
{{< hextra/hero-badge >}}
<div class="w-2 h-2 rounded-full bg-primary-400"></div>
<div class="hx-w-2 hx-h-2 hx-rounded-full hx-bg-primary-400"></div>
<span>Free, open source</span>
{{< icon name="arrow-circle-right" attributes="height=14" >}}
{{< /hextra/hero-badge >}}
<div class="mt-6 mb-6">
<div class="hx-mt-6 hx-mb-6">
{{< hextra/hero-headline >}}
Build modern websites&nbsp;<br class="sm:block hidden" />with Markdown and Hugo
Build modern websites&nbsp;<br class="sm:hx-block hx-hidden" />with Markdown and Hugo
{{< /hextra/hero-headline >}}
</div>
<div class="mb-12">
<div class="hx-mb-12">
{{< hextra/hero-subtitle >}}
Fast, batteries-included Hugo theme&nbsp;<br class="sm:block hidden" />for creating beautiful static websites
Fast, batteries-included Hugo theme&nbsp;<br class="sm:hx-block hx-hidden" />for creating beautiful static websites
{{< /hextra/hero-subtitle >}}
</div>
<div class="mb-6">
<div class="hx-mb-6">
{{< hextra/hero-button text="Get Started" link="docs" >}}
</div>
<div class="mt-6"></div>
<div class="hx-mt-6"></div>
{{< hextra/feature-grid >}}
{{< hextra/feature-card
title="Fast and Full-featured"
subtitle="Simple and easy to use, yet powerful and feature-rich."
class="aspect-auto md:aspect-[1.1/1] max-md:min-h-[340px]"
class="hx-aspect-auto md:hx-aspect-[1.1/1] max-md:hx-min-h-[340px]"
image="images/hextra-doc.webp"
imageClass="top-[40%] left-[24px] w-[180%] sm:w-[110%] dark:opacity-80"
imageClass="hx-top-[40%] hx-left-[24px] hx-w-[180%] sm:hx-w-[110%] dark:hx-opacity-80"
style="background: radial-gradient(ellipse at 50% 80%,rgba(194,97,254,0.15),hsla(0,0%,100%,0));"
>}}
{{< hextra/feature-card
title="Markdown is All You Need"
subtitle="Compose with just Markdown. Enrich with Shortcode components."
class="aspect-auto md:aspect-[1.1/1] max-lg:min-h-[340px]"
class="hx-aspect-auto md:hx-aspect-[1.1/1] max-lg:hx-min-h-[340px]"
image="images/hextra-markdown.webp"
imageClass="top-[40%] left-[36px] w-[180%] sm:w-[110%] dark:opacity-80"
imageClass="hx-top-[40%] hx-left-[36px] hx-w-[180%] sm:hx-w-[110%] dark:hx-opacity-80"
style="background: radial-gradient(ellipse at 50% 80%,rgba(142,53,74,0.15),hsla(0,0%,100%,0));"
>}}
{{< hextra/feature-card
title="Full Text Search"
subtitle="Built-in full text search with FlexSearch, no extra setup required."
class="aspect-auto md:aspect-[1.1/1] max-md:min-h-[340px]"
class="hx-aspect-auto md:hx-aspect-[1.1/1] max-md:hx-min-h-[340px]"
image="images/hextra-search.webp"
imageClass="top-[40%] left-[36px] w-[110%] sm:w-[110%] dark:opacity-80"
imageClass="hx-top-[40%] hx-left-[36px] hx-w-[110%] sm:hx-w-[110%] dark:hx-opacity-80"
style="background: radial-gradient(ellipse at 50% 80%,rgba(221,210,59,0.15),hsla(0,0%,100%,0));"
>}}
{{< hextra/feature-card

26
exampleSite/content/_index.zh-cn.md
View File

@ -4,52 +4,52 @@ layout: hextra-home
---
{{< hextra/hero-badge >}}
<div class="w-2 h-2 rounded-full bg-primary-400"></div>
<div class="hx-w-2 hx-h-2 hx-rounded-full hx-bg-primary-400"></div>
<span>免费 开源</span>
{{< icon name="arrow-circle-right" attributes="height=14" >}}
{{< /hextra/hero-badge >}}
<div class="mt-6 mb-6">
<div class="hx-mt-6 hx-mb-6">
{{< hextra/hero-headline >}}
创建现代化网站&nbsp;<br class="sm:block hidden" />由 Markdown 和 Hugo 驱动
创建现代化网站&nbsp;<br class="sm:hx-block hx-hidden" />由 Markdown 和 Hugo 驱动
{{< /hextra/hero-headline >}}
</div>
<div class="mb-12">
<div class="hx-mb-12">
{{< hextra/hero-subtitle >}}
极速且全能的 Hugo 主题框架&nbsp;<br class="sm:block hidden" />为构建现代化的静态网站而生
极速且全能的 Hugo 主题框架&nbsp;<br class="sm:hx-block hx-hidden" />为构建现代化的静态网站而生
{{< /hextra/hero-subtitle >}}
</div>
<div class="mb-6">
<div class="hx-mb-6">
{{< hextra/hero-button text="现在开始" link="docs" >}}
</div>
<div class="mt-6"></div>
<div class="hx-mt-6"></div>
{{< hextra/feature-grid >}}
{{< hextra/feature-card
title="快速且功能全面"
subtitle="简单易用，功能强大丰富。"
class="aspect-auto md:aspect-[1.1/1] max-md:min-h-[340px]"
class="hx-aspect-auto md:hx-aspect-[1.1/1] max-md:hx-min-h-[340px]"
image="/images/hextra-doc.webp"
imageClass="top-[40%] left-[24px] w-[180%] sm:w-[110%] dark:opacity-80"
imageClass="hx-top-[40%] hx-left-[24px] hx-w-[180%] sm:hx-w-[110%] dark:hx-opacity-80"
style="background: radial-gradient(ellipse at 50% 80%,rgba(194,97,254,0.15),hsla(0,0%,100%,0));"
>}}
{{< hextra/feature-card
title="Markdown 写作"
subtitle="只需使用 Markdown 进行编辑。多样的 Shortcode 组件开箱即用。"
class="aspect-auto md:aspect-[1.1/1] max-lg:min-h-[340px]"
class="hx-aspect-auto md:hx-aspect-[1.1/1] max-lg:hx-min-h-[340px]"
image="/images/hextra-markdown.webp"
imageClass="top-[40%] left-[36px] w-[180%] sm:w-[110%] dark:opacity-80"
imageClass="hx-top-[40%] hx-left-[36px] hx-w-[180%] sm:hx-w-[110%] dark:hx-opacity-80"
style="background: radial-gradient(ellipse at 50% 80%,rgba(142,53,74,0.15),hsla(0,0%,100%,0));"
>}}
{{< hextra/feature-card
title="全文搜索"
subtitle="内置 FlexSearch 全文搜索，无需额外设置。"
class="aspect-auto md:aspect-[1.1/1] max-md:min-h-[340px]"
class="hx-aspect-auto md:hx-aspect-[1.1/1] max-md:hx-min-h-[340px]"
image="/images/hextra-search.webp"
imageClass="top-[40%] left-[36px] w-[110%] sm:w-[110%] dark:opacity-80"
imageClass="hx-top-[40%] hx-left-[36px] hx-w-[110%] sm:hx-w-[110%] dark:hx-opacity-80"
style="background: radial-gradient(ellipse at 50% 80%,rgba(221,210,59,0.15),hsla(0,0%,100%,0));"
>}}
{{< hextra/feature-card

4
exampleSite/content/showcase/index.fa.md
View File

@ -5,9 +5,9 @@ toc: false
layout: wide
---
<div class="mt-4"></div>
<div class="hx-mt-4"></div>
<p class="mb-12 text-center text-lg text-gray-500 dark:text-gray-400">
<p class="hx-mb-12 hx-text-center hx-text-lg hx-text-gray-500 dark:hx-text-gray-400">
پروژه‌های متن‌باز که توسط هگزترا طراحی شده‌اند.
</p>

4
exampleSite/content/showcase/index.md
View File

@ -5,9 +5,9 @@ toc: false
layout: wide
---
<div class="mt-4"></div>
<div class="hx-mt-4"></div>
<p class="mb-12 text-center text-lg text-gray-500 dark:text-gray-400">
<p class="hx-mb-12 hx-text-center hx-text-lg hx-text-gray-500 dark:hx-text-gray-400">
Open source projects powered by Hextra.
</p>

4
exampleSite/content/showcase/index.zh-cn.md
View File

@ -5,9 +5,9 @@ toc: false
layout: wide
---
<div class="mt-4"></div>
<div class="hx-mt-4"></div>
<p class="mb-12 text-center text-lg text-gray-500 dark:text-gray-400">
<p class="hx-mb-12 hx-text-center hx-text-lg hx-text-gray-500 dark:hx-text-gray-400">
由 Hextra 驱动的开源网站和项目。
</p>

978
exampleSite/hugo_stats.json
View File

File diff suppressed because it is too large Load Diff

2
layouts/_default/_markup/render-codeblock-mermaid.html
View File

@ -1,4 +1,4 @@
<pre class="mermaid mt-6">
<pre class="mermaid hx-mt-6">
{{- .Inner | safeHTML -}}
</pre>
{{- .Page.Store.Set "hasMermaid" true -}}

10
layouts/_default/_markup/render-codeblock.html
View File

@ -4,7 +4,7 @@
{{- $copyCode := (T "copyCode") | default "Copy code" -}}
<div class="code-block relative mt-6 first:mt-0 group/code">
<div class="code-block hx-relative hx-mt-6 first:hx-mt-0 group/code">
{{- if $filename -}}
<div class="filename">{{ $filename }}</div>
{{- end -}}
@ -13,13 +13,13 @@
{{- else -}}
<pre><code>{{ .Inner }}</code></pre>
{{- end -}}
<div class="opacity-0 transition group-hover/code:opacity-100 flex gap-1 absolute m-[11px] right-0 {{ if $filename }}top-8{{ else }}top-0{{ end }}">
<div class="hx-opacity-0 hx-transition group-hover/code:hx-opacity-100 hx-flex hx-gap-1 hx-absolute hx-m-[11px] hx-right-0 {{ if $filename }}hx-top-8{{ else }}hx-top-0{{ end }}">
<button
class="code-copy-btn group/copybtn transition-all active:opacity-50 bg-primary-700/5 border border-black/5 text-gray-600 hover:text-gray-900 rounded-md p-1.5 dark:bg-primary-300/10 dark:border-white/10 dark:text-gray-400 dark:hover:text-gray-50"
class="code-copy-btn group/copybtn hx-transition-all active:hx-opacity-50 hx-bg-primary-700/5 hx-border hx-border-black/5 hx-text-gray-600 hover:hx-text-gray-900 hx-rounded-md hx-p-1.5 dark:hx-bg-primary-300/10 dark:hx-border-white/10 dark:hx-text-gray-400 dark:hover:hx-text-gray-50"
title="{{ $copyCode }}"
>
<div class="group-[.copied]/copybtn:hidden copy-icon pointer-events-none h-4 w-4"></div>
<div class="hidden group-[.copied]/copybtn:block success-icon pointer-events-none h-4 w-4"></div>
<div class="copy-icon group-[.copied]/copybtn:hx-hidden hx-pointer-events-none hx-h-4 hx-w-4"></div>
<div class="success-icon hx-hidden group-[.copied]/copybtn:hx-block hx-pointer-events-none hx-h-4 hx-w-4"></div>
</button>
</div>
</div>

2
layouts/_default/_markup/render-heading.html
View File

@ -1,7 +1,7 @@
<h{{ .Level }}>
{{- .Text | safeHTML -}}
{{- if gt .Level 1 -}}
<span class="absolute -mt-20" id="{{ .Anchor | safeURL }}"></span>
<span class="hx-absolute -hx-mt-20" id="{{ .Anchor | safeURL }}"></span>
<a href="#{{ .Anchor | safeURL }}" class="subheading-anchor" aria-label="Permalink for this section"></a>
{{- end -}}
</h{{ .Level }}>

8
layouts/_default/list.html
View File

@ -1,14 +1,14 @@
{{ define "main" }}
<div class='mx-auto flex {{ partial "utils/page-width" . }}'>
<div class='hx-mx-auto hx-flex {{ partial "utils/page-width" . }}'>
{{ partial "sidebar.html" (dict "context" .) }}
{{ partial "toc.html" . }}
<article class="w-full break-words flex min-h-[calc(100vh-var(--navbar-height))] min-w-0 justify-center pb-8 pr-[calc(env(safe-area-inset-right)-1.5rem)]">
<main class="w-full min-w-0 max-w-6xl px-6 pt-4 md:px-12">
<article class="hx-w-full hx-break-words hx-flex hx-min-h-[calc(100vh-var(--navbar-height))] hx-min-w-0 hx-justify-center hx-pb-8 hx-pr-[calc(env(safe-area-inset-right)-1.5rem)]">
<main class="hx-w-full hx-min-w-0 hx-max-w-6xl hx-px-6 hx-pt-4 md:hx-px-12">
<div class="content">
<h1>{{ .Title }}</h1>
{{ .Content }}
</div>
<div class="mt-16"></div>
<div class="hx-mt-16"></div>
{{ partial "components/last-updated.html" . }}
{{ partial "components/comments.html" . }}
</main>

14
layouts/_default/single.html
View File

@ -1,16 +1,16 @@
{{ define "main" }}
<div class='mx-auto flex {{ partial "utils/page-width" . }}'>
<div class='hx-mx-auto hx-flex {{ partial "utils/page-width" . }}'>
{{ partial "sidebar.html" (dict "context" . "disableSidebar" true "displayPlaceholder" true) }}
{{ partial "toc.html" . }}
<article class="w-full break-words flex min-h-[calc(100vh-var(--navbar-height))] min-w-0 justify-center pb-8 pr-[calc(env(safe-area-inset-right)-1.5rem)]">
<main class="w-full min-w-0 max-w-6xl px-6 pt-4 md:px-12">
<br class="mt-1.5 text-sm" />
<h1 class="text-center mt-2 text-4xl font-bold tracking-tight text-slate-900 dark:text-slate-100">{{ .Title }}</h1>
<div class="mb-16"></div>
<article class="hx-w-full hx-break-words hx-flex hx-min-h-[calc(100vh-var(--navbar-height))] hx-min-w-0 hx-justify-center hx-pb-8 hx-pr-[calc(env(safe-area-inset-right)-1.5rem)]">
<main class="hx-w-full hx-min-w-0 hx-max-w-6xl hx-px-6 hx-pt-4 md:hx-px-12">
<br class="hx-mt-1.5 hx-text-sm" />
<h1 class="hx-text-center hx-mt-2 hx-text-4xl hx-font-bold hx-tracking-tight hx-text-slate-900 dark:hx-text-slate-100">{{ .Title }}</h1>
<div class="hx-mb-16"></div>
<div class="content">
{{ .Content }}
</div>
<div class="mt-16"></div>
<div class="hx-mt-16"></div>
{{ partial "components/comments.html" . }}
</main>
</article>

8
layouts/_default/wide.html
View File

@ -1,9 +1,9 @@
{{ define "main" }}
<div class="mx-auto flex max-w-[90rem]">
<div class="hx-mx-auto hx-flex hx-max-w-[90rem]">
{{ partial "sidebar.html" (dict "context" . "disableSidebar" true "displayPlaceholder" false) }}
<article class="w-full break-words min-h-[calc(100vh-var(--navbar-height))] min-w-0 pt-4 pb-8 pl-[max(env(safe-area-inset-left),1.5rem)] pr-[max(env(safe-area-inset-left),1.5rem)]">
<br class="mt-1.5 text-sm" />
<h1 class="text-center mt-2 text-4xl font-bold tracking-tight text-slate-900 dark:text-slate-100">{{ .Title }}</h1>
<article class="hx-w-full hx-break-words hx-min-h-[calc(100vh-var(--navbar-height))] hx-min-w-0 hx-pt-4 hx-pb-8 hx-pl-[max(env(safe-area-inset-left),1.5rem)] hx-pr-[max(env(safe-area-inset-left),1.5rem)]">
<br class="hx-mt-1.5 hx-text-sm" />
<h1 class="hx-text-center hx-mt-2 hx-text-4xl hx-font-bold hx-tracking-tight hx-text-slate-900 dark:hx-text-slate-100">{{ .Title }}</h1>
<div class="content">
{{ .Content }}
</div>

28
layouts/blog/list.html
View File

@ -1,33 +1,33 @@
{{ define "main" }}
{{- $readMore := (T "readMore") | default "Read more →" -}}
<div class="mx-auto flex {{ partial `utils/page-width` . }}">
<div class="hx-mx-auto hx-flex {{ partial `utils/page-width` . }}">
{{ partial "sidebar.html" (dict "context" . "disableSidebar" true "displayPlaceholder" true) }}
<article class="w-full break-words flex min-h-[calc(100vh-var(--navbar-height))] min-w-0 justify-center pb-8 pr-[calc(env(safe-area-inset-right)-1.5rem)]">
<main class="w-full min-w-0 max-w-6xl px-6 pt-4 md:px-12">
<br class="mt-1.5 text-sm" />
<h1 class="text-center mt-2 text-4xl font-bold tracking-tight text-slate-900 dark:text-slate-100">{{ .Title }}</h1>
<article class="hx-w-full hx-break-words hx-flex hx-min-h-[calc(100vh-var(--navbar-height))] hx-min-w-0 hx-justify-center hx-pb-8 hx-pr-[calc(env(safe-area-inset-right)-1.5rem)]">
<main class="hx-w-full hx-min-w-0 hx-max-w-6xl hx-px-6 hx-pt-4 md:hx-px-12">
<br class="hx-mt-1.5 hx-text-sm" />
<h1 class="hx-text-center hx-mt-2 hx-text-4xl hx-font-bold hx-tracking-tight hx-text-slate-900 dark:hx-text-slate-100">{{ .Title }}</h1>
<div class="content">{{ .Content }}</div>
{{ range .Pages.ByDate.Reverse }}
<div class="mb-10">
<h3><a style="color: inherit; text-decoration: none;" class="block font-semibold mt-8 text-2xl " href="{{ .RelPermalink }}">{{ .Title }}</a></h3>
<div class="hx-mb-10">
<h3><a style="color: inherit; text-decoration: none;" class="hx-block hx-font-semibold hx-mt-8 hx-text-2xl " href="{{ .RelPermalink }}">{{ .Title }}</a></h3>
{{- if site.Params.blog.list.displayTags -}}
{{ with .Params.tags }}
<p class="opacity-50 text-sm leading-7">
{{- range . }}<a class="inline-block mr-2">#{{ . }}</a>{{ end -}}
<p class="hx-opacity-50 hx-text-sm hx-leading-7">
{{- range . }}<a class="hx-inline-block hx-mr-2">#{{ . }}</a>{{ end -}}
</p>
{{ end -}}
{{- end -}}
<p class="opacity-80 mt-4 leading-7">{{- partial "utils/page-description" . -}}</p>
<p class="opacity-80 mt-1 leading-7">
<a class="text-[color:hsl(var(--primary-hue),100%,50%)] underline underline-offset-2 decoration-from-font" href="{{ .RelPermalink }}">
<p class="hx-opacity-80 hx-mt-4 hx-leading-7">{{- partial "utils/page-description" . -}}</p>
<p class="hx-opacity-80 hx-mt-1 hx-leading-7">
<a class="hx-text-[color:hsl(var(--primary-hue),100%,50%)] hx-underline hx-underline-offset-2 hx-decoration-from-font" href="{{ .RelPermalink }}">
{{- $readMore -}}
</a>
</p>
<p class="opacity-50 text-sm mt-4 leading-7">{{ partial "utils/format-date" .Date }}</p>
<p class="hx-opacity-50 hx-text-sm hx-mt-4 hx-leading-7">{{ partial "utils/format-date" .Date }}</p>
</div>
{{ end }}
</main>
</article>
<div class="max-xl:hidden h-0 w-64 shrink-0"></div>
<div class="max-xl:hx-hidden hx-h-0 hx-w-64 hx-shrink-0"></div>
</div>
{{ end }}

24
layouts/blog/single.html
View File

@ -1,22 +1,22 @@
{{ define "main" }}
<div class="mx-auto flex {{ partial `utils/page-width` . }}">
<div class="hx-mx-auto hx-flex {{ partial `utils/page-width` . }}">
{{ partial "sidebar.html" (dict "context" . "disableSidebar" true "displayPlaceholder" true) }}
{{ partial "toc.html" . }}
<article class="w-full break-words flex min-h-[calc(100vh-var(--navbar-height))] min-w-0 justify-center pb-8 pr-[calc(env(safe-area-inset-right)-1.5rem)]">
<main class="w-full min-w-0 max-w-6xl px-6 pt-4 md:px-12">
<article class="hx-w-full hx-break-words hx-flex hx-min-h-[calc(100vh-var(--navbar-height))] hx-min-w-0 hx-justify-center hx-pb-8 hx-pr-[calc(env(safe-area-inset-right)-1.5rem)]">
<main class="hx-w-full hx-min-w-0 hx-max-w-6xl hx-px-6 hx-pt-4 md:hx-px-12">
{{ partial "breadcrumb.html" . }}
<h1 class="mt-2 text-4xl font-bold tracking-tight text-slate-900 dark:text-slate-100">{{ .Title }}</h1>
<div class="mt-4 mb-16 text-gray-500 text-sm flex items-center flex-wrap gap-y-2">
{{- with $date := .Date }}<span class="mr-1">{{ partial "utils/format-date" $date }}</span>{{ end -}}
<h1 class="hx-mt-2 hx-text-4xl hx-font-bold hx-tracking-tight hx-text-slate-900 dark:hx-text-slate-100">{{ .Title }}</h1>
<div class="hx-mt-4 hx-mb-16 hx-text-gray-500 hx-text-sm hx-flex hx-items-center hx-flex-wrap hx-gap-y-2">
{{- with $date := .Date }}<span class="hx-mr-1">{{ partial "utils/format-date" $date }}</span>{{ end -}}
{{- $lazyLoading := site.Params.enableImageLazyLoading | default true -}}
{{ if and .Date .Params.authors }}<span class="mx-1">·</span>{{ end -}}
{{ if and .Date .Params.authors }}<span class="hx-mx-1">·</span>{{ end -}}
{{- with $.Params.authors -}}
{{- range $i, $author := . -}}
{{- if reflect.IsMap $author -}}
{{- if and $i (not $author.image) }}<span class="mr-1">,</span>{{ end -}}
{{- if and $i (not $author.image) }}<span class="hx-mr-1">,</span>{{ end -}}
<a
{{ with $author.link }}href="{{ . }}" target="_blank"{{ end }}
class="group inline-flex items-center text-current gap-x-1.5 mx-1"
class="hx-group hx-inline-flex hx-items-center hx-text-current hx-gap-x-1.5 hx-mx-1"
{{ with $author.name }}title="{{ . }}"{{ end }}
>
{{- with $image := $author.image }}
@ -25,12 +25,12 @@
{{- if and $isLocal $startsWithSlash }}
{{- $image = (relURL (strings.TrimPrefix "/" $image)) -}}
{{ end -}}
<img src="{{ $image | safeURL }}" alt="{{ $author.name }}" class="inline-block h-4 w-4 rounded-full" {{ if $lazyLoading }}loading="lazy"{{ end }} />
<img src="{{ $image | safeURL }}" alt="{{ $author.name }}" class="hx-inline-block hx-h-4 hx-w-4 hx-rounded-full" {{ if $lazyLoading }}loading="lazy"{{ end }} />
{{ end -}}
<div class="group-hover:underline">{{ $author.name }}</div>
<div class="group-hover:hx-underline">{{ $author.name }}</div>
</a>
{{- else -}}
{{- if $i }}<span class="mr-1">,</span>{{ end -}}<span class="mx-1">{{ $author }}</span>
{{- if $i }}<span class="hx-mr-1">,</span>{{ end -}}<span class="hx-mx-1">{{ $author }}</span>
{{- end -}}
{{- end -}}
{{- end -}}

6
layouts/docs/list.html
View File

@ -1,9 +1,9 @@
{{ define "main" }}
<div class='mx-auto flex {{ partial "utils/page-width" . }}'>
<div class='hx-mx-auto hx-flex {{ partial "utils/page-width" . }}'>
{{ partial "sidebar.html" (dict "context" .) }}
{{ partial "toc.html" . }}
<article class="w-full break-words flex min-h-[calc(100vh-var(--navbar-height))] min-w-0 justify-center pb-8 pr-[calc(env(safe-area-inset-right)-1.5rem)]">
<main class="w-full min-w-0 max-w-6xl px-6 pt-4 md:px-12">
<article class="hx-w-full hx-break-words hx-flex hx-min-h-[calc(100vh-var(--navbar-height))] hx-min-w-0 hx-justify-center hx-pb-8 hx-pr-[calc(env(safe-area-inset-right)-1.5rem)]">
<main class="hx-w-full hx-min-w-0 hx-max-w-6xl hx-px-6 hx-pt-4 md:hx-px-12">
{{ partial "breadcrumb.html" . }}
<div class="content">
<h1>{{ .Title }}</h1>

6
layouts/docs/single.html
View File

@ -1,9 +1,9 @@
{{ define "main" }}
<div class='mx-auto flex {{ partial "utils/page-width" . }}'>
<div class='hx-mx-auto hx-flex {{ partial "utils/page-width" . }}'>
{{ partial "sidebar.html" (dict "context" .) }}
{{ partial "toc.html" . }}
<article class="w-full break-words flex min-h-[calc(100vh-var(--navbar-height))] min-w-0 justify-center pb-8 pr-[calc(env(safe-area-inset-right)-1.5rem)]">
<main class="w-full min-w-0 max-w-6xl px-6 pt-4 md:px-12">
<article class="hx-w-full hx-break-words hx-flex hx-min-h-[calc(100vh-var(--navbar-height))] hx-min-w-0 hx-justify-center hx-pb-8 hx-pr-[calc(env(safe-area-inset-right)-1.5rem)]">
<main class="hx-w-full hx-min-w-0 hx-max-w-6xl hx-px-6 hx-pt-4 md:hx-px-12">
{{ partial "breadcrumb.html" . }}
<div class="content">
<h1>{{ .Title }}</h1>

6
layouts/hextra-home.html
View File

@ -1,8 +1,8 @@
{{ define "main" }}
<div class='mx-auto flex {{ partial "utils/page-width" . }}'>
<div class='hx-mx-auto hx-flex {{ partial "utils/page-width" . }}'>
{{ partial "sidebar.html" (dict "context" . "disableSidebar" true) }}
<div class="w-full break-words min-h-[calc(100vh-var(--navbar-height))] min-w-0 pb-8 pt-8 md:pt-12 pl-[max(env(safe-area-inset-left),1.5rem)] pr-[max(env(safe-area-inset-left),1.5rem)]">
<div class="flex flex-col items-start">
<div class="hx-w-full hx-break-words hx-min-h-[calc(100vh-var(--navbar-height))] hx-min-w-0 hx-pb-8 hx-pt-8 md:hx-pt-12 hx-pl-[max(env(safe-area-inset-left),1.5rem)] hx-pr-[max(env(safe-area-inset-left),1.5rem)]">
<div class="hx-flex hx-flex-col hx-items-start">
{{ .Content }}
</div>
</div>

8
layouts/index.html
View File

@ -1,10 +1,10 @@
{{ define "main" }}
<div class='mx-auto flex {{ partial "utils/page-width" . }}'>
<div class='hx-mx-auto hx-flex {{ partial "utils/page-width" . }}'>
{{ partial "sidebar.html" (dict "context" . "disableSidebar" true "displayPlaceholder" true) }}
{{ partial "toc.html" . }}
<article class="w-full break-words flex min-h-[calc(100vh-var(--navbar-height))] min-w-0 justify-center pb-8 pr-[calc(env(safe-area-inset-right)-1.5rem)]">
<main class="w-full min-w-0 max-w-6xl px-6 pt-4 md:px-12">
<h1 class="text-center mt-2 text-4xl font-bold tracking-tight text-slate-900 dark:text-slate-100">{{ .Title }}</h1>
<article class="hx-w-full hx-break-words hx-flex hx-min-h-[calc(100vh-var(--navbar-height))] hx-min-w-0 hx-justify-center hx-pb-8 hx-pr-[calc(env(safe-area-inset-right)-1.5rem)]">
<main class="hx-w-full hx-min-w-0 hx-max-w-6xl hx-px-6 hx-pt-4 md:hx-px-12">
<h1 class="hx-text-center hx-mt-2 hx-text-4xl hx-font-bold hx-tracking-tight hx-text-slate-900 dark:hx-text-slate-100">{{ .Title }}</h1>
<div class="content">
{{ .Content }}
</div>

8
layouts/partials/breadcrumb.html
View File

@ -1,13 +1,13 @@
<div class="mt-1.5 flex items-center gap-1 overflow-hidden text-sm text-gray-500 dark:text-gray-400 contrast-more:text-current">
<div class="hx-mt-1.5 hx-flex hx-items-center hx-gap-1 hx-overflow-hidden hx-text-sm hx-text-gray-500 dark:hx-text-gray-400 contrast-more:hx-text-current">
{{- range .Ancestors.Reverse }}
{{- if not .IsHome }}
<div class="whitespace-nowrap transition-colors min-w-[24px] overflow-hidden text-ellipsis hover:text-gray-900 dark:hover:text-gray-100">
<div class="hx-whitespace-nowrap hx-transition-colors hx-min-w-[24px] hx-overflow-hidden hx-text-ellipsis hover:hx-text-gray-900 dark:hover:hx-text-gray-100">
<a href="{{ .Permalink }}">{{ .LinkTitle }}</a>
</div>
{{- partial "utils/icon.html" (dict "name" "chevron-right" "attributes" "class=\"w-3.5 shrink-0 rtl:-rotate-180\"") -}}
{{- partial "utils/icon.html" (dict "name" "chevron-right" "attributes" "class=\"hx-w-3.5 hx-shrink-0 rtl:-hx-rotate-180\"") -}}
{{ end -}}
{{ end -}}
<div class="whitespace-nowrap transition-colors font-medium text-gray-700 contrast-more:font-bold contrast-more:text-current dark:text-gray-100 contrast-more:dark:text-current">
<div class="hx-whitespace-nowrap hx-transition-colors hx-font-medium hx-text-gray-700 contrast-more:hx-font-bold contrast-more:hx-text-current dark:hx-text-gray-100 contrast-more:dark:hx-text-current">
{{- .LinkTitle -}}
</div>
</div>

6
layouts/partials/components/last-updated.html
View File

@ -3,10 +3,10 @@
{{- if site.Params.displayUpdatedDate -}}
{{- with .Lastmod -}}
{{ $datetime := (time.Format "2006-01-02T15:04:05.000Z" .) }}
<div class="mt-12 mb-8 block text-xs text-gray-500 ltr:text-right rtl:text-left dark:text-gray-400">{{ $lastUpdated }} <time datetime="{{ $datetime }}">{{ partial "utils/format-date" . }}</time></div>
<div class="hx-mt-12 hx-mb-8 hx-block hx-text-xs hx-text-gray-500 ltr:hx-text-right rtl:hx-text-left dark:hx-text-gray-400">{{ $lastUpdated }} <time datetime="{{ $datetime }}">{{ partial "utils/format-date" . }}</time></div>
{{- else -}}
<div class="mt-16"></div>
<div class="hx-mt-16"></div>
{{- end -}}
{{- else -}}
<div class="mt-16"></div>
<div class="hx-mt-16"></div>
{{- end -}}

10
layouts/partials/components/pager.html
View File

@ -26,14 +26,14 @@
{{- end -}}
{{- if or $prev $next -}}
<div class="mb-8 flex items-center border-t pt-8 dark:border-neutral-800 contrast-more:border-neutral-400 dark:contrast-more:border-neutral-400 print:hidden">
<div class="hx-mb-8 hx-flex hx-items-center hx-border-t hx-pt-8 dark:hx-border-neutral-800 contrast-more:hx-border-neutral-400 dark:contrast-more:hx-border-neutral-400 print:hx-hidden">
{{- if $prev -}}
<a
href="{{ $prev.RelPermalink }}"
title="{{ $prev.LinkTitle }}"
class="flex max-w-[50%] items-center gap-1 py-4 text-base font-medium text-gray-600 transition-colors [word-break:break-word] hover:text-primary-600 dark:text-gray-300 md:text-lg ltr:pr-4 rtl:pl-4"
class="hx-flex hx-max-w-[50%] hx-items-center hx-gap-1 hx-py-4 hx-text-base hx-font-medium hx-text-gray-600 hx-transition-colors [word-break:break-word] hover:hx-text-primary-600 dark:hx-text-gray-300 md:hx-text-lg ltr:hx-pr-4 rtl:hx-pl-4"
>
{{- partial "utils/icon.html" (dict "name" "chevron-right" "attributes" "class=\"inline h-5 shrink-0 ltr:rotate-180\"") -}}
{{- partial "utils/icon.html" (dict "name" "chevron-right" "attributes" "class=\"hx-inline hx-h-5 hx-shrink-0 ltr:hx-rotate-180\"") -}}
{{- $prev.LinkTitle -}}
</a>
{{- end -}}
@ -41,10 +41,10 @@
<a
href="{{ $next.RelPermalink }}"
title="{{ $next.LinkTitle }}"
class="flex max-w-[50%] items-center gap-1 py-4 text-base font-medium text-gray-600 transition-colors [word-break:break-word] hover:text-primary-600 dark:text-gray-300 md:text-lg ltr:ml-auto ltr:pl-4 ltr:text-right rtl:mr-auto rtl:pr-4 rtl:text-left"
class="hx-flex hx-max-w-[50%] hx-items-center hx-gap-1 hx-py-4 hx-text-base hx-font-medium hx-text-gray-600 hx-transition-colors [word-break:break-word] hover:hx-text-primary-600 dark:hx-text-gray-300 md:hx-text-lg ltr:hx-ml-auto ltr:hx-pl-4 ltr:hx-text-right rtl:hx-mr-auto rtl:hx-pr-4 rtl:hx-text-left"
>
{{- $next.LinkTitle -}}
{{- partial "utils/icon.html" (dict "name" "chevron-right" "attributes" "class=\"inline h-5 shrink-0 rtl:-rotate-180\"") -}}
{{- partial "utils/icon.html" (dict "name" "chevron-right" "attributes" "class=\"hx-inline hx-h-5 hx-shrink-0 rtl:-hx-rotate-180\"") -}}
</a>
{{- end -}}
</div>

22
layouts/partials/footer.html
View File

@ -4,42 +4,42 @@
{{- $copyright := (T "copyright") | default "© 2023 Hextra." -}}
{{- $poweredBy := (T "poweredBy") | default "Powered by Hextra" -}}
{{- $footerWidth := "max-w-screen-xl" -}}
{{- $footerWidth := "hx-max-w-screen-xl" -}}
{{- with .Site.Params.footer.width -}}
{{ if eq . "wide" -}}
{{ $footerWidth = "max-w-[90rem]" -}}
{{ $footerWidth = "hx-max-w-[90rem]" -}}
{{ else if eq . "full" -}}
{{ $footerWidth = "max-w-full" -}}
{{ end -}}
{{- end -}}
<footer class="hextra-footer bg-gray-100 pb-[env(safe-area-inset-bottom)] dark:bg-neutral-900 print:bg-transparent">
<footer class="hextra-footer hx-bg-gray-100 hx-pb-[env(safe-area-inset-bottom)] dark:hx-bg-neutral-900 print:hx-bg-transparent">
{{- if $enableFooterSwitches -}}
<div class="mx-auto flex gap-2 py-2 px-4 {{ $footerWidth }}">
<div class="hx-mx-auto hx-flex hx-gap-2 hx-py-2 hx-px-4 {{ $footerWidth }}">
{{- partial "language-switch.html" (dict "context" .) -}}
{{- with $displayThemeToggle }}{{ partial "theme-toggle.html" }}{{ end -}}
</div>
{{- if or site.IsMultiLingual $displayThemeToggle -}}
<hr class="dark:border-neutral-800" />
<hr class="dark:hx-border-neutral-800" />
{{- end -}}
{{- end -}}
<div
class="{{ $footerWidth }} mx-auto flex justify-center py-12 pl-[max(env(safe-area-inset-left),1.5rem)] pr-[max(env(safe-area-inset-right),1.5rem)] text-gray-600 dark:text-gray-400 md:justify-start"
class="{{ $footerWidth }} hx-mx-auto hx-flex hx-justify-center hx-py-12 hx-pl-[max(env(safe-area-inset-left),1.5rem)] hx-pr-[max(env(safe-area-inset-right),1.5rem)] hx-text-gray-600 dark:hx-text-gray-400 md:hx-justify-start"
>
<div class="flex w-full flex-col items-center sm:items-start">
{{- if (.Site.Params.footer.displayPoweredBy | default true) }}<div class="font-semibold">{{ template "theme-credit" $poweredBy }}</div>{{ end }}
{{- if .Site.Params.footer.displayCopyright }}<div class="mt-6 text-xs">{{ $copyright | markdownify }}</div>{{ end }}
<div class="hx-flex hx-w-full hx-flex-col hx-items-center sm:hx-items-start">
{{- if (.Site.Params.footer.displayPoweredBy | default true) }}<div class="hx-font-semibold">{{ template "theme-credit" $poweredBy }}</div>{{ end }}
{{- if .Site.Params.footer.displayCopyright }}<div class="hx-mt-6 hx-text-xs">{{ $copyright | markdownify }}</div>{{ end }}
</div>
</div>
</footer>
{{- define "theme-credit" -}}
<a class="flex text-sm items-center gap-1 text-current" target="_blank" rel="noopener noreferrer" title="Hextra GitHub Homepage" href="https://github.com/imfing/hextra">
<a class="hx-flex hx-text-sm hx-items-center hx-gap-1 hx-text-current" target="_blank" rel="noopener noreferrer" title="Hextra GitHub Homepage" href="https://github.com/imfing/hextra">
<span>
{{- . | markdownify -}}
{{- if strings.Contains . "Hextra" -}}
{{- partial "utils/icon.html" (dict "name" "hextra" "attributes" `height=1em class="inline-block ml-1 align-[-2.5px]"`) -}}
{{- partial "utils/icon.html" (dict "name" "hextra" "attributes" `height=1em class="hx-inline-block hx-ml-1 hx-align-[-2.5px]"`) -}}
{{- end -}}
</span>
</a>

2
layouts/partials/head.html
View File

@ -16,7 +16,7 @@
{{ end -}}
</title>
<meta name="description" content="{{ partial "utils/page-description.html" . }}" />
{{ with .Params.canonical }}
<link rel="canonical" href="{{ . }}" itemprop="url" />
{{ else }}

14
layouts/partials/language-switch.html
View File

@ -6,33 +6,33 @@
{{- $changeLanguage := (T "changeLanguage") | default "Change language" -}}
{{- if site.IsMultiLingual -}}
<div class="flex justify-items-start {{ if $grow }}grow{{ end }}">
<div class="hx-flex hx-justify-items-start {{ if $grow }}hx-grow{{ end }}">
<button
title="{{ $changeLanguage }}"
data-state="closed"
class="language-switcher h-7 rounded-md px-2 text-left text-xs font-medium text-gray-600 transition-colors dark:text-gray-400 hover:bg-gray-100 hover:text-gray-900 dark:hover:bg-primary-100/5 dark:hover:text-gray-50 grow"
class="language-switcher hx-h-7 hx-rounded-md hx-px-2 hx-text-left hx-text-xs hx-font-medium hx-text-gray-600 hx-transition-colors dark:hx-text-gray-400 hover:hx-bg-gray-100 hover:hx-text-gray-900 dark:hover:hx-bg-primary-100/5 dark:hover:hx-text-gray-50 hx-grow"
type="button"
aria-label="{{ $changeLanguage }}"
>
<div class="flex items-center gap-2 capitalize">
<div class="hx-flex hx-items-center hx-gap-2 hx-capitalize">
{{- partial "utils/icon" (dict "name" "globe-alt" "attributes" "height=12") -}}
{{- if not $hideLabel }}<span>{{ site.Language.LanguageName }}</span>{{ end -}}
</div>
</button>
<ul
class="language-options hidden z-20 max-h-64 overflow-auto rounded-md ring-1 ring-black/5 bg-white py-1 text-sm shadow-lg dark:ring-white/20 dark:bg-neutral-800"
class="language-options hx-hidden hx-z-20 hx-max-h-64 hx-overflow-auto hx-rounded-md hx-ring-1 hx-ring-black/5 hx-bg-white hx-py-1 hx-text-sm hx-shadow-lg dark:hx-ring-white/20 dark:hx-bg-neutral-800"
style="position: fixed; inset: auto auto 0px 0px; margin: 0px; min-width: 100px;"
>
{{ range site.Languages }}
{{ $link := partial "utils/lang-link" (dict "lang" .Lang "context" $page) }}
<li class="flex flex-col">
<li class="hx-flex hx-flex-col">
<a
href="{{ $link }}"
class="text-gray-800 dark:text-gray-100 hover:bg-primary-50 hover:text-primary-600 hover:dark:bg-primary-500/10 hover:dark:text-primary-600 relative cursor-pointer whitespace-nowrap py-1.5 transition-colors ltr:pl-3 ltr:pr-9 rtl:pr-3 rtl:pl-9"
class="hx-text-gray-800 dark:hx-text-gray-100 hover:hx-bg-primary-50 hover:hx-text-primary-600 hover:dark:hx-bg-primary-500/10 hover:dark:hx-text-primary-600 hx-relative hx-cursor-pointer hx-whitespace-nowrap hx-py-1.5 hx-transition-colors ltr:hx-pl-3 ltr:hx-pr-9 rtl:hx-pr-3 rtl:hx-pl-9"
>
{{- .LanguageName -}}
{{- if eq .LanguageName site.Language.LanguageName -}}
<span class="absolute inset-y-0 flex items-center ltr:right-3 rtl:left-3">
<span class="hx-absolute hx-inset-y-0 hx-flex hx-items-center ltr:hx-right-3 rtl:hx-left-3">
{{- partial "utils/icon" (dict "name" "check" "attributes" "height=1em width=1em") -}}
</span>
{{- end -}}

30
layouts/partials/navbar.html
View File

@ -4,26 +4,26 @@
{{- $logoHeight := .Site.Params.navbar.logo.height | default "20" -}}
{{- $logoDarkPath := .Site.Params.navbar.logo.dark | default $logoPath -}}
{{- $navWidth := "max-w-[90rem]" -}}
{{- $navWidth := "hx-max-w-[90rem]" -}}
{{- with .Site.Params.navbar.width -}}
{{ if eq . "normal" -}}
{{ $navWidth = "max-w-screen-xl" -}}
{{ $navWidth = "hx-max-w-screen-xl" -}}
{{ else if eq . "full" -}}
{{ $navWidth = "max-w-full" -}}
{{ end -}}
{{- end -}}
<div class="nav-container sticky top-0 z-20 w-full bg-transparent print:hidden">
<div class="nav-container-blur pointer-events-none absolute z-[-1] h-full w-full bg-white dark:bg-dark shadow-[0_2px_4px_rgba(0,0,0,.02),0_1px_0_rgba(0,0,0,.06)] contrast-more:shadow-[0_0_0_1px_#000] dark:shadow-[0_-1px_0_rgba(255,255,255,.1)_inset] contrast-more:dark:shadow-[0_0_0_1px_#fff]"></div>
<div class="nav-container hx-sticky hx-top-0 hx-z-20 hx-w-full hx-bg-transparent print:hx-hidden">
<div class="nav-container-blur hx-pointer-events-none hx-absolute hx-z-[-1] hx-h-full hx-w-full hx-bg-white dark:hx-bg-dark hx-shadow-[0_2px_4px_rgba(0,0,0,.02),0_1px_0_rgba(0,0,0,.06)] contrast-more:hx-shadow-[0_0_0_1px_#000] dark:hx-shadow-[0_-1px_0_rgba(255,255,255,.1)_inset] contrast-more:dark:hx-shadow-[0_0_0_1px_#fff]"></div>
<nav class="mx-auto flex items-center justify-end gap-2 h-16 px-6 {{ $navWidth }}">
<a class="flex items-center hover:opacity-75 ltr:mr-auto rtl:ml-auto" href="{{ $logoLink }}">
<nav class="hx-mx-auto hx-flex hx-items-center hx-justify-end hx-gap-2 hx-h-16 hx-px-6 {{ $navWidth }}">
<a class="hx-flex hx-items-center hover:hx-opacity-75 ltr:hx-mr-auto rtl:hx-ml-auto" href="{{ $logoLink }}">
{{- if (.Site.Params.navbar.displayLogo | default true) }}
<img class="block dark:hidden" src="{{ $logoPath | relURL }}" alt="{{ .Site.Title }}" height="{{ $logoHeight }}" width="{{ $logoWidth }}" />
<img class="hidden dark:block" src="{{ $logoDarkPath | relURL }}" alt="{{ .Site.Title }}" height="{{ $logoHeight }}" width="{{ $logoWidth }}" />
<img class="hx-block dark:hx-hidden" src="{{ $logoPath | relURL }}" alt="{{ .Site.Title }}" height="{{ $logoHeight }}" width="{{ $logoWidth }}" />
<img class="hx-hidden dark:hx-block" src="{{ $logoDarkPath | relURL }}" alt="{{ .Site.Title }}" height="{{ $logoHeight }}" width="{{ $logoWidth }}" />
{{- end }}
{{- if (.Site.Params.navbar.displayTitle | default true) }}
<span class="mx-2 font-extrabold inline select-none" title="{{ .Site.Title }}">{{- .Site.Title -}}</span>
<span class="hx-mx-2 hx-font-extrabold hx-inline hx-select-none" title="{{ .Site.Title }}">{{- .Site.Title -}}</span>
{{- end }}
</a>
@ -43,27 +43,27 @@
{{/* Display icon menu item */}}
{{- if .Params.icon -}}
{{- $rel := cond (eq .Params.icon "mastodon") "noreferer me" "noreferer" }}
<a class="p-2 text-current" {{ if $external }}target="_blank" rel="{{ $rel }}"{{ end }} href="{{ $link }}" title="{{ or (T .Identifier) .Name | safeHTML }}">
<a class="hx-p-2 hx-text-current" {{ if $external }}target="_blank" rel="{{ $rel }}"{{ 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>
<span class="hx-sr-only">{{ or (T .Identifier) .Name | safeHTML }}</span>
</a>
{{- else -}}
{{- $active := or ($currentPage.HasMenuCurrent "main" .) ($currentPage.IsMenuCurrent "main" .) -}}
{{- $activeClass := cond $active "font-medium" "text-gray-600 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-200" -}}
{{- $activeClass := cond $active "hx-font-medium" "hx-text-gray-600 hover:hx-text-gray-800 dark:hx-text-gray-400 dark:hover:hx-text-gray-200" -}}
<a
title="{{ or (T .Identifier) .Name | safeHTML }}"
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 }}"
class="hx-text-sm contrast-more:hx-text-gray-700 contrast-more:dark:hx-text-gray-100 hx-relative -hx-ml-2 hx-hidden hx-whitespace-nowrap hx-p-2 md:hx-inline-block {{ $activeClass }}"
>
<span class="text-center">{{ or (T .Identifier) .Name | safeHTML }}</span>
<span class="hx-text-center">{{ or (T .Identifier) .Name | safeHTML }}</span>
</a>
{{- end -}}
{{- end -}}
{{- end -}}
<button type="button" aria-label="Menu" class="hamburger-menu -mr-2 rounded p-2 active:bg-gray-400/20 md:hidden">
<button type="button" aria-label="Menu" class="hamburger-menu -hx-mr-2 hx-rounded hx-p-2 active:hx-bg-gray-400/20 md:hx-hidden">
{{- partial "utils/icon.html" (dict "name" "hamburger-menu" "attributes" "height=24") -}}
</button>
</nav>

10
layouts/partials/search.html
View File

@ -1,17 +1,17 @@
{{- $placeholder := (T "searchPlaceholder") | default "Search..." -}}
<div class="search-wrapper relative md:w-64">
<div class="relative flex items-center text-gray-900 contrast-more:text-gray-800 dark:text-gray-300 contrast-more:dark:text-gray-300">
<div class="search-wrapper hx-relative md:hx-w-64">
<div class="hx-relative hx-flex hx-items-center hx-text-gray-900 contrast-more:hx-text-gray-800 dark:hx-text-gray-300 contrast-more:dark:hx-text-gray-300">
<input
placeholder="{{ $placeholder }}"
class="search-input block w-full appearance-none rounded-lg px-3 py-2 transition-colors text-base leading-tight md:text-sm bg-black/[.05] dark:bg-gray-50/10 focus:bg-white dark:focus:bg-dark placeholder:text-gray-500 dark:placeholder:text-gray-400 contrast-more:border contrast-more:border-current"
class="search-input hx-block hx-w-full hx-appearance-none hx-rounded-lg hx-px-3 hx-py-2 hx-transition-colors hx-text-base hx-leading-tight md:hx-text-sm hx-bg-black/[.05] dark:hx-bg-gray-50/10 focus:hx-bg-white dark:focus:hx-bg-dark placeholder:hx-text-gray-500 dark:placeholder:hx-text-gray-400 contrast-more:hx-border contrast-more:hx-border-current"
type="search"
value=""
spellcheck="false"
/>
<kbd
class="absolute my-1.5 select-none ltr:right-1.5 rtl:left-1.5 h-5 rounded bg-white px-1.5 font-mono text-[10px] font-medium text-gray-500 border dark:border-gray-100/20 dark:bg-dark/50 contrast-more:border-current contrast-more:text-current contrast-more:dark:border-current items-center gap-1 transition-opacity pointer-events-none hidden sm:flex"
class="hx-absolute hx-my-1.5 hx-select-none ltr:hx-right-1.5 rtl:hx-left-1.5 hx-h-5 hx-rounded hx-bg-white hx-px-1.5 hx-font-mono hx-text-[10px] hx-font-medium hx-text-gray-500 hx-border dark:hx-border-gray-100/20 dark:hx-bg-dark/50 contrast-more:hx-border-current contrast-more:hx-text-current contrast-more:dark:hx-border-current hx-items-center hx-gap-1 hx-transition-opacity hx-pointer-events-none hx-hidden sm:hx-flex"
>
CTRL K
</kbd>
@ -19,7 +19,7 @@
<div>
<ul
class="search-results hextra-scrollbar hidden border border-gray-200 bg-white text-gray-100 dark:border-neutral-800 dark:bg-neutral-900 absolute top-full z-20 mt-2 overflow-auto overscroll-contain rounded-xl py-2.5 shadow-xl max-h-[min(calc(50vh-11rem-env(safe-area-inset-bottom)),400px)] md:max-h-[min(calc(100vh-5rem-env(safe-area-inset-bottom)),400px)] inset-x-0 ltr:md:left-auto rtl:md:right-auto contrast-more:border contrast-more:border-gray-900 contrast-more:dark:border-gray-50 w-screen min-h-[100px] max-w-[min(calc(100vw-2rem),calc(100%+20rem))]"
class="search-results hextra-scrollbar hx-hidden hx-border hx-border-gray-200 hx-bg-white hx-text-gray-100 dark:hx-border-neutral-800 dark:hx-bg-neutral-900 hx-absolute hx-top-full hx-z-20 hx-mt-2 hx-overflow-auto hx-overscroll-contain hx-rounded-xl hx-py-2.5 hx-shadow-xl hx-max-h-[min(calc(50vh-11rem-env(safe-area-inset-bottom)),400px)] md:hx-max-h-[min(calc(100vh-5rem-env(safe-area-inset-bottom)),400px)] hx-inset-x-0 ltr:md:hx-left-auto rtl:md:hx-right-auto contrast-more:hx-border contrast-more:hx-border-gray-900 contrast-more:dark:hx-border-gray-50 hx-w-screen hx-min-h-[100px] hx-max-w-[min(calc(100vw-2rem),calc(100%+20rem))]"
style="transition: max-height 0.2s ease 0s;"
></ul>
</div>

48
layouts/partials/sidebar.html
View File

@ -3,7 +3,7 @@
{{- $disableSidebar := .disableSidebar | default false -}}
{{- $displayPlaceholder := .displayPlaceholder | default false -}}
{{- $sidebarClass := cond $disableSidebar (cond $displayPlaceholder "md:hidden xl:block" "md:hidden") "md:sticky" -}}
{{- $sidebarClass := cond $disableSidebar (cond $displayPlaceholder "md:hx-hidden xl:hx-block" "md:hx-hidden") "md:hx-sticky" -}}
{{- $navRoot := cond (eq site.Home.Type "docs") site.Home $context.FirstSection -}}
{{- $pageURL := $context.RelPermalink -}}
@ -15,14 +15,14 @@
{{- end -}}
<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 }}">
<div class="mobile-menu-overlay [transition:background-color_1.5s_ease] hx-fixed hx-inset-0 hx-z-10 hx-bg-black/80 dark:hx-bg-black/60 hx-hidden"></div>
<aside class="sidebar-container hx-flex hx-flex-col print:hx-hidden md:hx-top-16 md:hx-shrink-0 md:hx-w-64 md:hx-self-start max-md:[transform:translate3d(0,-100%,0)] {{ $sidebarClass }}">
<!-- Search bar on small screen -->
<div class="px-4 pt-4 md:hidden">
<div class="hx-px-4 hx-pt-4 md:hx-hidden">
{{ partial "search.html" }}
</div>
<div class="hextra-scrollbar overflow-y-auto overflow-x-hidden p-4 grow md:h-[calc(100vh-var(--navbar-height)-var(--menu-height))]">
<ul class="flex flex-col gap-1 md:hidden">
<div class="hextra-scrollbar hx-overflow-y-auto hx-overflow-x-hidden hx-p-4 hx-grow md:hx-h-[calc(100vh-var(--navbar-height)-var(--menu-height))]">
<ul class="hx-flex hx-flex-col hx-gap-1 md:hx-hidden">
<!-- Nav -->
{{ template "sidebar-main" (dict "context" site.Home "pageURL" $pageURL "page" $context "toc" true) -}}
{{ template "sidebar-footer" }}
@ -30,27 +30,27 @@
<!-- Sidebar on large screen -->
{{- if $disableSidebar -}}
{{- if $displayPlaceholder }}<div class="max-xl:hidden h-0 w-64 shrink-0"></div>{{ end -}}
{{- if $displayPlaceholder }}<div class="max-xl:hx-hidden hx-h-0 hx-w-64 hx-shrink-0"></div>{{ end -}}
{{ .context.Scratch.Set "enableFooterSwitches" true }}
{{- else -}}
<ul class="flex flex-col gap-1 max-md:hidden">
<ul class="hx-flex hx-flex-col hx-gap-1 max-md:hx-hidden">
{{ template "sidebar-main" (dict "context" $navRoot "page" $context "pageURL" $pageURL) }}
{{ template "sidebar-footer" }}
</ul>
{{ end -}}
</div>
{{/* Hide theme switch when sidebar is disabled */}}
{{ $switchesClass := cond $disableSidebar "md:hidden" "" -}}
{{ $switchesClass := cond $disableSidebar "md:hx-hidden" "" -}}
{{ $displayThemeToggle := (site.Params.theme.displayToggle | default true) -}}
{{ if or site.IsMultiLingual $displayThemeToggle }}
<div class="{{ $switchesClass }} {{ with site.IsMultiLingual }}justify-end{{ end }} sticky bottom-0 bg-white dark:bg-dark mx-4 py-4 shadow-[0_-12px_16px_#fff] flex items-center gap-2 dark:border-neutral-800 dark:shadow-[0_-12px_16px_#111] contrast-more:border-neutral-400 contrast-more:shadow-none contrast-more:dark:shadow-none border-t" data-toggle-animation="show">
<div class="{{ $switchesClass }} {{ with site.IsMultiLingual }}hx-justify-end{{ end }} hx-sticky hx-bottom-0 hx-bg-white dark:hx-bg-dark hx-mx-4 hx-py-4 hx-shadow-[0_-12px_16px_#fff] hx-flex hx-items-center hx-gap-2 dark:hx-border-neutral-800 dark:hx-shadow-[0_-12px_16px_#111] contrast-more:hx-border-neutral-400 contrast-more:hx-shadow-none contrast-more:dark:hx-shadow-none hx-border-t" data-toggle-animation="show">
{{- with site.IsMultiLingual -}}
{{- partial "language-switch" (dict "context" $context "grow" true) -}}
{{- with $displayThemeToggle }}{{ partial "theme-toggle" (dict "hideLabel" true) }}{{ end -}}
{{- else -}}
{{- with $displayThemeToggle -}}
<div class="flex grow flex-col">{{ partial "theme-toggle" }}</div>
<div class="hx-flex hx-grow hx-flex-col">{{ partial "theme-toggle" }}</div>
{{- end -}}
{{- end -}}
</div>
@ -77,8 +77,8 @@
{{- if eq $level 0 -}}
{{- range $items.ByWeight }}
{{- if .Params.sidebar.separator -}}
<li class="[word-break:break-word] mt-5 mb-2 px-2 py-1.5 text-sm font-semibold text-gray-900 first:mt-0 dark:text-gray-100">
<span class="cursor-default">{{ .LinkTitle }}</span>
<li class="[word-break:break-word] hx-mt-5 hx-mb-2 hx-px-2 hx-py-1.5 hx-text-sm hx-font-semibold hx-text-gray-900 first:hx-mt-0 dark:hx-text-gray-100">
<span class="hx-cursor-default">{{ .LinkTitle }}</span>
</li>
{{- else -}}
{{- $active := eq $pageURL .RelPermalink -}}
@ -93,13 +93,13 @@
{{- end -}}
{{- end -}}
{{- else -}}
<div class="ltr:pr-0 overflow-hidden">
<ul class='relative flex flex-col gap-1 before:absolute before:inset-y-1 before:w-px before:bg-gray-200 before:content-[""] ltr:ml-3 ltr:pl-3 ltr:before:left-0 rtl:mr-3 rtl:pr-3 rtl:before:right-0 dark:before:bg-neutral-800'>
<div class="ltr:hx-pr-0 hx-overflow-hidden">
<ul class='hx-relative hx-flex hx-flex-col hx-gap-1 before:hx-absolute before:hx-inset-y-1 before:hx-w-px before:hx-bg-gray-200 before:hx-content-[""] ltr:hx-ml-3 ltr:hx-pl-3 ltr:before:hx-left-0 rtl:hx-mr-3 rtl:hx-pr-3 rtl:before:hx-right-0 dark:before:hx-bg-neutral-800'>
{{- range $items.ByWeight }}
{{- $active := eq $pageURL .RelPermalink -}}
{{- $shouldOpen := or (.Params.sidebar.open) (.IsAncestor $page) $active | default true }}
{{- $title := .LinkTitle | default .File.BaseFileName -}}
<li class="flex flex-col {{ if $shouldOpen }}open{{ end }}">
<li class="hx-flex hx-flex-col {{ if $shouldOpen }}open{{ end }}">
{{- template "sidebar-item-link" dict "context" . "active" $active "title" $title "link" .RelPermalink -}}
{{- if and $toc $active -}}
{{ template "sidebar-toc" dict "page" . }}
@ -116,14 +116,14 @@
{{- define "sidebar-toc" -}}
{{ $page := .page }}
{{ with $page.Fragments.Headings }}
<ul class='flex flex-col gap-1 relative before:absolute before:inset-y-1 before:w-px before:bg-gray-200 before:content-[""] dark:before:bg-neutral-800 ltr:pl-3 ltr:before:left-0 rtl:pr-3 rtl:before:right-0 ltr:ml-3 rtl:mr-3'>
<ul class='hx-flex hx-flex-col hx-gap-1 hx-relative before:hx-absolute before:hx-inset-y-1 before:hx-w-px before:hx-bg-gray-200 before:hx-content-[""] dark:before:hx-bg-neutral-800 ltr:hx-pl-3 ltr:before:hx-left-0 rtl:hx-pr-3 rtl:before:hx-right-0 ltr:hx-ml-3 rtl:hx-mr-3'>
{{- range . }}
{{- with .Headings }}
{{- range . -}}
<li>
<a
href="#{{ anchorize .ID }}"
class="flex rounded px-2 py-1.5 text-sm transition-colors [word-break:break-word] cursor-pointer [-webkit-tap-highlight-color:transparent] [-webkit-touch-callout:none] contrast-more:border gap-2 before:opacity-25 before:content-['#'] text-gray-500 hover:bg-gray-100 hover:text-gray-900 dark:text-neutral-400 dark:hover:bg-primary-100/5 dark:hover:text-gray-50 contrast-more:text-gray-900 contrast-more:dark:text-gray-50 contrast-more:border-transparent contrast-more:hover:border-gray-900 contrast-more:dark:hover:border-gray-50"
class="hx-flex hx-rounded hx-px-2 hx-py-1.5 hx-text-sm hx-transition-colors [word-break:break-word] hx-cursor-pointer [-webkit-tap-highlight-color:transparent] [-webkit-touch-callout:none] contrast-more:hx-border hx-gap-2 before:hx-opacity-25 before:hx-content-['#'] hx-text-gray-500 hover:hx-bg-gray-100 hover:hx-text-gray-900 dark:hx-text-neutral-400 dark:hover:hx-bg-primary-100/5 dark:hover:hx-text-gray-50 contrast-more:hx-text-gray-900 contrast-more:dark:hx-text-gray-50 contrast-more:hx-border-transparent contrast-more:hover:hx-border-gray-900 contrast-more:dark:hover:hx-border-gray-50"
>
{{- .Title -}}
</a>
@ -139,8 +139,8 @@
{{- range site.Menus.sidebar -}}
{{- $name := or (T .Identifier) .Name -}}
{{ if eq .Params.type "separator" }}
<li class="[word-break:break-word] mt-5 mb-2 px-2 py-1.5 text-sm font-semibold text-gray-900 first:mt-0 dark:text-gray-100">
<span class="cursor-default">{{ $name }}</span>
<li class="[word-break:break-word] hx-mt-5 hx-mb-2 hx-px-2 hx-py-1.5 hx-text-sm hx-font-semibold hx-text-gray-900 first:hx-mt-0 dark:hx-text-gray-100">
<span class="hx-cursor-default">{{ $name }}</span>
</li>
{{ else }}
<li>{{ template "sidebar-item-link" dict "active" false "title" $name "link" (.URL | relLangURL) }}</li>
@ -152,11 +152,11 @@
{{- $external := strings.HasPrefix .link "http" -}}
{{- $open := .open | default true -}}
<a
class="flex items-center justify-between gap-2 cursor-pointer rounded px-2 py-1.5 text-sm transition-colors [-webkit-tap-highlight-color:transparent] [-webkit-touch-callout:none] [word-break:break-word]
class="hx-flex hx-items-center hx-justify-between hx-gap-2 hx-cursor-pointer hx-rounded hx-px-2 hx-py-1.5 hx-text-sm hx-transition-colors [-webkit-tap-highlight-color:transparent] [-webkit-touch-callout:none] [word-break:break-word]
{{- if .active }}
sidebar-active-item bg-primary-100 font-semibold text-primary-800 contrast-more:border contrast-more:border-primary-500 dark:bg-primary-400/10 dark:text-primary-600 contrast-more:dark:border-primary-500
sidebar-active-item hx-bg-primary-100 hx-font-semibold hx-text-primary-800 contrast-more:hx-border contrast-more:hx-border-primary-500 dark:hx-bg-primary-400/10 dark:hx-text-primary-600 contrast-more:dark:hx-border-primary-500
{{- else }}
text-gray-500 hover:bg-gray-100 hover:text-gray-900 contrast-more:border contrast-more:border-transparent contrast-more:text-gray-900 contrast-more:hover:border-gray-900 dark:text-neutral-400 dark:hover:bg-primary-100/5 dark:hover:text-gray-50 contrast-more:dark:text-gray-50 contrast-more:dark:hover:border-gray-50
hx-text-gray-500 hover:hx-bg-gray-100 hover:hx-text-gray-900 contrast-more:hx-border contrast-more:hx-border-transparent contrast-more:hx-text-gray-900 contrast-more:hover:hx-border-gray-900 dark:hx-text-neutral-400 dark:hover:hx-bg-primary-100/5 dark:hover:hx-text-gray-50 contrast-more:dark:hx-text-gray-50 contrast-more:dark:hover:hx-border-gray-50
{{- end -}}"
href="{{ .link }}"
{{ if $external }}target="_blank" rel="noreferer"{{ end }}
@ -173,5 +173,5 @@
{{- end -}}
{{- define "sidebar-collapsible-button" -}}
<svg fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-[18px] min-w-[18px] rounded-sm p-0.5 hover:bg-gray-800/5 dark:hover:bg-gray-100/5"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" class="origin-center transition-transform rtl:-rotate-180"></path></svg>
<svg fill="none" viewBox="0 0 24 24" stroke="currentColor" class="hx-h-[18px] hx-min-w-[18px] hx-rounded-sm hx-p-0.5 hover:hx-bg-gray-800/5 dark:hover:hx-bg-gray-100/5"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" class="hx-origin-center hx-transition-transform rtl:-hx-rotate-180"></path></svg>
{{- end -}}

12
layouts/partials/theme-toggle.html
View File

@ -8,14 +8,14 @@
<button
title="{{ $changeTheme }}"
data-theme="light"
class="theme-toggle group h-7 rounded-md px-2 text-left text-xs font-medium text-gray-600 transition-colors dark:text-gray-400 hover:bg-gray-100 hover:text-gray-900 dark:hover:bg-primary-100/5 dark:hover:text-gray-50"
class="theme-toggle hx-group hx-h-7 hx-rounded-md hx-px-2 hx-text-left hx-text-xs hx-font-medium hx-text-gray-600 hx-transition-colors dark:hx-text-gray-400 hover:hx-bg-gray-100 hover:hx-text-gray-900 dark:hover:hx-bg-primary-100/5 dark:hover:hx-text-gray-50"
type="button"
aria-label="{{ $changeTheme }}"
>
<div class="flex items-center gap-2 capitalize">
{{- partial "utils/icon.html" (dict "name" "sun" "attributes" "height=12 class=\"group-data-[theme=light]:hidden\"") -}}
{{- if not $hideLabel }}<span class="group-data-[theme=light]:hidden">{{ $light }}</span>{{ end -}}
{{- partial "utils/icon.html" (dict "name" "moon" "attributes" "height=12 class=\"group-data-[theme=dark]:hidden\"") -}}
{{- if not $hideLabel }}<span class="group-data-[theme=dark]:hidden">{{ $dark }}</span>{{ end -}}
<div class="hx-flex hx-items-center hx-gap-2 hx-capitalize">
{{- partial "utils/icon.html" (dict "name" "sun" "attributes" "height=12 class=\"group-data-[theme=light]:hx-hidden\"") -}}
{{- if not $hideLabel }}<span class="group-data-[theme=light]:hx-hidden">{{ $light }}</span>{{ end -}}
{{- partial "utils/icon.html" (dict "name" "moon" "attributes" "height=12 class=\"group-data-[theme=dark]:hx-hidden\"") -}}
{{- if not $hideLabel }}<span class="group-data-[theme=dark]:hx-hidden">{{ $dark }}</span>{{ end -}}
</div>
</button>

22
layouts/partials/toc.html
View File

@ -5,11 +5,11 @@
{{- $editThisPage := (T "editThisPage") | default "Edit this page"}}
{{- $backToTop := (T "backToTop") | default "Scroll to top" -}}
<nav class="hextra-toc order-last hidden w-64 shrink-0 xl:block print:hidden px-4" aria-label="table of contents">
<nav class="hextra-toc hx-order-last hx-hidden hx-w-64 hx-shrink-0 xl:hx-block print:hx-hidden hx-px-4" aria-label="table of contents">
{{- if $toc }}
<div class="hextra-scrollbar sticky top-16 overflow-y-auto pr-4 pt-6 text-sm [hyphens:auto] max-h-[calc(100vh-var(--navbar-height)-env(safe-area-inset-bottom))] ltr:-mr-4 rtl:-ml-4">
<div class="hextra-scrollbar hx-sticky hx-top-16 hx-overflow-y-auto hx-pr-4 hx-pt-6 hx-text-sm [hyphens:auto] hx-max-h-[calc(100vh-var(--navbar-height)-env(safe-area-inset-bottom))] ltr:hx--mr-4 rtl:hx--ml-4">
{{- with .Fragments.Headings -}}
<p class="mb-4 font-semibold tracking-tight">{{ $onThisPage }}</p>
<p class="hx-mb-4 hx-font-semibold hx-tracking-tight">{{ $onThisPage }}</p>
{{- range . -}}
<ul>
{{- with .Headings -}}{{ template "toc-subheading" (dict "headings" . "level" 0) }}{{- end -}}
@ -17,13 +17,13 @@
{{- end -}}
{{- end -}}
{{- $borderClass := "mt-8 border-t bg-white pt-8 shadow-[0_-12px_16px_white] dark:bg-dark dark:shadow-[0_-12px_16px_#111]" -}}
{{- $borderClass := "hx-mt-8 hx-border-t hx-bg-white hx-pt-8 hx-shadow-[0_-12px_16px_white] dark:hx-bg-dark dark:hx-shadow-[0_-12px_16px_#111]" -}}
{{- if not .Fragments.Headings -}}
{{- $borderClass = "" -}}
{{- end -}}
{{/* TOC bottom part */}}
<div class="{{ $borderClass }} sticky bottom-0 flex flex-col items-start gap-2 pb-8 dark:border-neutral-800 contrast-more:border-t contrast-more:border-neutral-400 contrast-more:shadow-none contrast-more:dark:border-neutral-400">
<div class="{{ $borderClass }} hx-sticky hx-bottom-0 hx-flex hx-flex-col hx-items-start hx-gap-2 hx-pb-8 dark:hx-border-neutral-800 contrast-more:hx-border-t contrast-more:hx-border-neutral-400 contrast-more:hx-shadow-none contrast-more:dark:hx-border-neutral-400">
{{- if site.Params.editURL.enable -}}
{{- $editURL := site.Params.editURL.base | default "" -}}
{{- with .Params.editURL -}}
@ -38,14 +38,14 @@
{{- $editURL = urls.JoinPath $editURL $sourceDir $path -}}
{{- end -}}
{{- 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>
<a class="hx-text-xs hx-font-medium hx-text-gray-500 hover:hx-text-gray-900 dark:hx-text-gray-400 dark:hover:hx-text-gray-100 contrast-more:hx-text-gray-800 contrast-more:dark:hx-text-gray-50" href="{{ $editURL }}" target="_blank" rel="noreferer">{{ $editThisPage }}</a>
{{- end -}}
{{/* Scroll To Top */}}
<button aria-hidden="true" id="backToTop" onClick="scrollUp();" class="transition-all transition duration-75 opacity-0 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">
<button aria-hidden="true" id="backToTop" onClick="scrollUp();" class="hx-transition-all hx-duration-75 hx-opacity-0 hx-text-xs hx-font-medium hx-text-gray-500 hover:hx-text-gray-900 dark:hx-text-gray-400 dark:hover:hx-text-gray-100 contrast-more:hx-text-gray-800 contrast-more:dark:hx-text-gray-50">
<span>
{{- $backToTop -}}
</span>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="inline ml-1 h-3.5 w-3.5 border rounded-full border-gray-500 hover:border-gray-900 dark:border-gray-400 dark:hover:border-gray-100 contrast-more:border-gray-800 contrast-more:dark:border-gray-50">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="hx-inline hx-ml-1 hx-h-3.5 hx-w-3.5 hx-border hx-rounded-full hx-border-gray-500 hover:hx-border-gray-900 dark:hx-border-gray-400 dark:hover:hx-border-gray-100 contrast-more:hx-border-gray-800 contrast-more:dark:hx-border-gray-50">
<path stroke-linecap="round" stroke-linejoin="round" d="M4.5 15.75l7.5-7.5 7.5 7.5" />
</svg>
</button>
@ -63,12 +63,12 @@
{{- end -}}
{{- $padding := (mul $level 4) -}}
{{- $class := cond (eq $level 0) "font-semibold" (printf "ltr:pl-%d rtl:pr-%d" $padding $padding) -}}
{{- $class := cond (eq $level 0) "hx-font-semibold" (printf "ltr:hx-pl-%d rtl:hx-pr-%d" $padding $padding) -}}
{{- range $headings }}
{{- 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 }}">
<li class="hx-my-2 hx-scroll-my-6 hx-scroll-py-6">
<a class="{{ $class }} hx-inline-block hx-text-gray-500 hover:hx-text-gray-900 dark:hx-text-gray-400 dark:hover:hx-text-gray-300 contrast-more:hx-text-gray-900 contrast-more:hx-underline contrast-more:dark:hx-text-gray-50 hx-w-full hx-break-words" href="#{{ anchorize .ID }}">
{{- .Title | safeHTML | plainify | htmlUnescape }}
</a>
</li>

6
layouts/partials/utils/page-width.html
View File

@ -14,14 +14,14 @@
{{- with $pageWidth -}}
{{ if eq . "wide" -}}
{{ $pageWidth = "max-w-[90rem]" -}}
{{ $pageWidth = "hx-max-w-[90rem]" -}}
{{ else if eq . "full" -}}
{{ $pageWidth = "max-w-full" -}}
{{ else -}}
{{ $pageWidth = "max-w-screen-xl" -}}
{{ $pageWidth = "hx-max-w-screen-xl" -}}
{{ end -}}
{{ else -}}
{{ $pageWidth = "max-w-screen-xl" -}}
{{ $pageWidth = "hx-max-w-screen-xl" -}}
{{ end -}}
{{ return $pageWidth }}

20
layouts/shortcodes/callout.html
View File

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

14
layouts/shortcodes/card.html
View File

@ -38,9 +38,9 @@
{{- end -}}
{{- end -}}
{{ $linkClass := "hover:border-gray-300 bg-transparent shadow-sm dark:border-neutral-800 hover:bg-slate-50 hover:shadow-md dark:hover:border-neutral-700 dark:hover:bg-neutral-900" }}
{{ $linkClass := "hover:hx-border-gray-300 hx-bg-transparent hx-shadow-sm dark:hx-border-neutral-800 hover:hx-bg-slate-50 hover:hx-shadow-md dark:hover:hx-border-neutral-700 dark:hover:hx-bg-neutral-900" }}
{{- with $image -}}
{{ $linkClass = "hover:border-gray-300 bg-gray-100 shadow dark:border-neutral-700 dark:bg-neutral-800 dark:text-gray-50 hover:shadow-lg dark:hover:border-neutral-500 dark:hover:bg-neutral-700" }}
{{ $linkClass = "hover:hx-border-gray-300 hx-bg-gray-100 hx-shadow dark:hx-border-neutral-700 dark:hx-bg-neutral-800 dark:hx-text-gray-50 hover:hx-shadow-lg dark:hover:hx-border-neutral-500 dark:hover:hx-bg-neutral-700" }}
{{- end -}}
{{- $external := strings.HasPrefix $link "http" -}}
@ -48,7 +48,7 @@
<a
class="hextra-card group flex flex-col justify-start overflow-hidden rounded-lg border border-gray-200 text-current no-underline dark:shadow-none hover:shadow-gray-100 dark:hover:shadow-none shadow-gray-100 active:shadow-sm active:shadow-gray-200 transition-all duration-200 {{ $linkClass }}"
class="hextra-card hx-group hx-flex hx-flex-col hx-justify-start hx-overflow-hidden hx-rounded-lg hx-border hx-border-gray-200 hx-text-current hx-no-underline dark:hx-shadow-none hover:hx-shadow-gray-100 dark:hover:hx-shadow-none hx-shadow-gray-100 active:hx-shadow-sm active:hx-shadow-gray-200 hx-transition-all hx-duration-200 {{ $linkClass }}"
{{- if $link -}}
href="{{ $href }}" {{ with $external }}target="_blank" rel="noreferrer"{{ end -}}
{{- end -}}
@ -65,18 +65,18 @@
/>
{{- end -}}
{{- $padding := "p-4" -}}
{{- $padding := "hx-p-4" -}}
{{- with $subtitle -}}
{{- $padding = "pt-4 px-4" -}}
{{- $padding = "hx-pt-4 hx-px-4" -}}
{{- end -}}
<span class="flex font-semibold items-start gap-2 {{ $padding }} text-gray-700 hover:text-gray-900 dark:text-neutral-200 dark:hover:text-neutral-50">
<span class="hx-flex hx-font-semibold hx-items-start hx-gap-2 {{ $padding }} hx-text-gray-700 hover:hx-text-gray-900 dark:hx-text-neutral-200 dark:hover:hx-text-neutral-50">
{{- with $icon }}{{ partial "utils/icon.html" (dict "name" $icon) -}}{{- end -}}
{{- $title -}}
</span>
{{- with $subtitle -}}
<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>
<div class="hx-line-clamp-3 hx-text-sm hx-font-normal hx-text-gray-500 dark:hx-text-gray-400 hx-px-4 hx-mb-4 hx-mt-2">{{- $subtitle | markdownify -}}</div>
{{- end -}}
</a>
{{- /* Strip trailing newline. */ -}}

2
layouts/shortcodes/cards.html
View File

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

8
layouts/shortcodes/details.html
View File

@ -1,11 +1,11 @@
{{- $title := .Get "title" | default "" -}}
{{- $closed := eq (.Get "closed") "true" | default false -}}
<details class="last-of-type:mb-0 rounded-lg bg-neutral-50 dark:bg-neutral-800 p-2 mt-4 group" {{ if not $closed }}open{{ end }}>
<summary class="flex items-center cursor-pointer select-none list-none p-1 rounded transition-colors hover:bg-gray-100 dark:hover:bg-neutral-800 before:mr-1 before:inline-block before:transition-transform before:content-[''] dark:before:invert rtl:before:rotate-180 group-open:before:rotate-90">
<strong class="text-lg">{{ $title | markdownify }}</strong>
<details class="last-of-type:hx-mb-0 hx-rounded-lg hx-bg-neutral-50 dark:hx-bg-neutral-800 hx-p-2 hx-mt-4 hx-group" {{ if not $closed }}open{{ end }}>
<summary class="hx-flex hx-items-center hx-cursor-pointer hx-select-none hx-list-none hx-p-1 hx-rounded hx-transition-colors hover:hx-bg-gray-100 dark:hover:hx-bg-neutral-800 before:hx-mr-1 before:hx-inline-block before:hx-transition-transform before:hx-content-[''] dark:before:hx-invert rtl:before:hx-rotate-180 group-open:before:hx-rotate-90">
<strong class="hx-text-lg">{{ $title | markdownify }}</strong>
</summary>
<div class="p-2 overflow-hidden">
<div class="hx-p-2 hx-overflow-hidden">
{{ .InnerDeindent | markdownify }}
</div>
</details>

4
layouts/shortcodes/filetree/container.html
View File

@ -1,5 +1,5 @@
<div class="hextra-filetree mt-6 select-none text-sm text-gray-800 dark:text-gray-300 not-prose">
<div class="inline-block rounded-lg border px-4 py-2 dark:border-neutral-800">
<div class="hextra-filetree hx-mt-6 hx-select-none hx-text-sm hx-text-gray-800 dark:hx-text-gray-300 not-prose">
<div class="hx-inline-block hx-rounded-lg hx-border hx-px-4 hx-py-2 dark:hx-border-neutral-800">
{{- .Inner -}}
</div>
</div>

6
layouts/shortcodes/filetree/file.html
View File

@ -1,9 +1,9 @@
{{- $name := .Get "name" -}}
<li class="flex list-none">
<span class="inline-flex cursor-default items-center py-1">
<li class="hx-flex hx-list-none">
<span class="hx-inline-flex hx-cursor-default hx-items-center hx-py-1">
{{- partial "utils/icon" (dict "name" "document-text" "attributes" "width=1em") -}}
<span class="ml-1">{{ $name | markdownify }}</span>
<span class="hx-ml-1">{{ $name | markdownify }}</span>
</span>
</li>

12
layouts/shortcodes/filetree/folder.html
View File

@ -1,17 +1,17 @@
{{- $name := .Get "name" -}}
{{- $state := .Get "state" | default "open" }}
<li class="group flex list-none flex-col">
<button class="hextra-filetree-folder inline-flex cursor-pointer items-center py-1 hover:opacity-60">
<span data-state="{{ $state }}" class="data-[state=open]:hidden">
<li class="hx-group hx-flex hx-list-none hx-flex-col">
<button class="hextra-filetree-folder hx-inline-flex hx-cursor-pointer hx-items-center hx-py-1 hover:hx-opacity-60">
<span data-state="{{ $state }}" class="data-[state=open]:hx-hidden">
{{- partial "utils/icon" (dict "name" "folder" "attributes" "width=1em") -}}
</span>
<span data-state="{{ $state }}" class="data-[state=closed]:hidden">
<span data-state="{{ $state }}" class="data-[state=closed]:hx-hidden">
{{- partial "utils/icon" (dict "name" "folder-open" "attributes" "width=1em") -}}
</span>
<span class="ml-1">{{ $name }}</span>
<span class="hx-ml-1">{{ $name }}</span>
</button>
<ul data-state="{{ $state }}" class="pl-5 data-[state=closed]:hidden">
<ul data-state="{{ $state }}" class="hx-pl-5 data-[state=closed]:hx-hidden">
{{- .Inner -}}
</ul>
</li>

12
layouts/shortcodes/hextra/feature-card.html
View File

@ -17,20 +17,20 @@
<a
{{ with $link }}href="{{ $href }}" {{ with $external }} target="_blank" rel="noreferrer"{{ end }}{{ end }}
{{ with $style }}style="{{ . | safeCSS }}"{{ end }}
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"
class="{{ $class }} hextra-feature-card not-prose hx-block hx-relative hx-overflow-hidden hx-rounded-3xl hx-border hx-border-gray-200 hover:hx-border-gray-300 dark:hx-border-neutral-800 dark:hover:hx-border-neutral-700 before:hx-pointer-events-none before:hx-absolute before:hx-inset-0 before:hx-bg-glass-gradient"
>
<div class="relative w-full p-6">
<h3 class="text-2xl font-medium leading-6 mb-2 flex items-center">
<div class="hx-relative hx-w-full hx-p-6">
<h3 class="hx-text-2xl hx-font-medium hx-leading-6 hx-mb-2 hx-flex hx-items-center">
{{ with $icon -}}
<span class="pr-2">
<span class="hx-pr-2">
{{- partial "utils/icon.html" (dict "name" . "attributes" "height=1.5rem") -}}
</span>
{{ end -}}
<span>{{ $title }}</span>
</h3>
<p class="text-gray-500 dark:text-gray-400 text-sm leading-6">{{ $subtitle | markdownify }}</p>
<p class="hx-text-gray-500 dark:hx-text-gray-400 hx-text-sm hx-leading-6">{{ $subtitle | markdownify }}</p>
</div>
{{- with $image -}}
<img src="{{ . }}" class="absolute max-w-none {{ $imageClass }}" alt="{{ $title }}" />
<img src="{{ . }}" class="hx-absolute hx-max-w-none {{ $imageClass }}" alt="{{ $title }}" />
{{- end -}}
</a>

2
layouts/shortcodes/hextra/feature-grid.html
View File

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

2
layouts/shortcodes/hextra/hero-badge.html
View File

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

2
layouts/shortcodes/hextra/hero-button.html
View File

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

2
layouts/shortcodes/hextra/hero-headline.html
View File

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

2
layouts/shortcodes/hextra/hero-subtitle.html
View File

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

2
layouts/shortcodes/icon.html
View File

@ -8,6 +8,6 @@
{{- $icon = replaceRE "<svg" (printf "<svg %s" $attributes) $icon -}}
<span class="inline-block align-text-bottom icon">
<span class="hx-inline-block hx-align-text-bottom icon">
{{- $icon | safeHTML -}}
</span>

2
layouts/shortcodes/steps.html
View File

@ -1,3 +1,3 @@
<div class="steps ml-4 mb-12 border-l border-gray-200 pl-6 dark:border-neutral-800 [counter-reset:step]">
<div class="steps hx-ml-4 hx-mb-12 hx-border-l hx-border-gray-200 hx-pl-6 dark:hx-border-neutral-800 [counter-reset:step]">
{{- .Inner -}}
</div>

2
layouts/shortcodes/tab.html
View File

@ -1,7 +1,7 @@
{{- $defaultIndex := int ((.Parent.Get "defaultIndex") | default "0") -}}
<div
class="tabs-panel rounded pt-6 hidden data-[state=selected]:block"
class="tabs-panel hx-rounded hx-pt-6 hx-hidden data-[state=selected]:hx-block"
id="tabs-panel-{{ .Ordinal }}"
role="tabpanel"
{{ if eq .Ordinal $defaultIndex }}tabindex="0"{{ end }}

4
layouts/shortcodes/tabs.html
View File

@ -6,10 +6,10 @@
{{- end -}}
<div class="mt-4 flex w-max min-w-full border-b border-gray-200 pb-px dark:border-neutral-800">
<div class="hx-mt-4 hx-flex hx-w-max hx-min-w-full hx-border-b hx-border-gray-200 hx-pb-px dark:hx-border-neutral-800">
{{- range $i, $item := $items -}}
<button
class="tabs-toggle data-[state=selected]:border-primary-500 data-[state=selected]:text-primary-600 mr-2 rounded-t p-2 font-medium leading-5 transition-colors -mb-0.5 select-none border-b-2 border-transparent text-gray-600 hover:border-gray-200 hover:text-black dark:text-gray-200 dark:hover:border-neutral-800 dark:hover:text-white"
class="tabs-toggle data-[state=selected]:hx-border-primary-500 data-[state=selected]:hx-text-primary-600 hx-mr-2 hx-rounded-t hx-p-2 hx-font-medium hx-leading-5 hx-transition-colors -hx-mb-0.5 hx-select-none hx-border-b-2 hx-border-transparent hx-text-gray-600 hover:hx-border-gray-200 hover:hx-text-black dark:hx-text-gray-200 dark:hover:hx-border-neutral-800 dark:hover:hx-text-white"
role="tab"
type="button"
aria-controls="tabs-panel-{{ $i }}"

1
tailwind.config.js
View File

@ -11,6 +11,7 @@ const makePrimaryColor =
/** @type {import('tailwindcss').Config} */
module.exports = {
prefix: 'hx-',
content: [
'./**/hugo_stats.json',
],