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

chore: migrate to Tailwind CSS v4.0 (#632)

Browse Source 
* chore: migrate PostCSS configuration to v4

* chore: update dependencies in package.json and package-lock.json

- Bump versions for autoprefixer, postcss, postcss-cli, prettier, and tailwindcss.
- Remove unused dependencies to streamline the project.

* chore: add @tailwindcss/postcss and update package-lock.json

* fix: update import paths in CSS files for consistency

* fix: change prefix from `hx-` to `hx:`

* chore: migrate primary color theme variables to CSS

* fix: remove unnecessary text decoration property from anchor styles in typography CSS

* fix: update CSS styles for improved consistency and clarity across components

* chore: clean up package.json and package-lock.json, remove unused dependencies, and update CSS imports for better organization

* fix: bulk replace prefix `hx-` with `hx:`

* fix: update tailwind css prefix

* fix: styling consistent issues

- steps counter fix in v4
- removed tailwind.css
- update hr border colors
- fix button cursor in v4
- fix border colors in various places

* fix: update class prefixes for consistency in menu and sidebar components

* fix: refine CSS classes and transitions for navbar and sidebar components

- Updated hamburger menu styles for improved animation and structure.
- Adjusted sidebar transition duration for smoother effects.
- Standardized class prefixes for consistency across components.

* fix: update border color in hero badge component for improved styling consistency

* fix: update tab button cursor style for improved user interaction

* chore: recompile css

* fix: dark mode color not applied for before / after elements

* fix: docs navigation

* chore: recompile CSS

* chore: update Tailwind CSS and PostCSS dependencies to version 4.0.17, recompile CSS, and add safelist

* fix: typo in class name and add back decoration-from-font for typography a tags

* fix: update class syntax for Tailwind CSS compatibility in mermaid code block
This commit is contained in:
Xin 2025-03-29 12:51:42 +00:00 committed by GitHub
parent 32f7f6d33f
commit c74d44492e
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
84 changed files with 1384 additions and 6186 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

File diff suppressed because one or more lines are too long

2
assets/css/components/badge.css
View File

@ -1,3 +1,3 @@
.hextra-badge { .hextra-badge {
@apply hx-inline-flex hx-items-center; @apply hx:inline-flex hx:items-center;
} }

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

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

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

@ -1,16 +1,16 @@
.hextra-jupyter-code-cell { .hextra-jupyter-code-cell {
scrollbar-gutter: auto; scrollbar-gutter: auto;
@apply hx-mt-6; @apply hx:mt-6;
.hextra-jupyter-code-cell-outputs-container { .hextra-jupyter-code-cell-outputs-container {
@apply hx-text-xs hx-overflow-hidden; @apply hx:text-xs hx:overflow-hidden;
.hextra-jupyter-code-cell-outputs { .hextra-jupyter-code-cell-outputs {
@apply hx-overflow-auto hx-max-h-[50vh]; @apply hx:overflow-auto hx:max-h-[50vh];
pre { pre {
@apply hx-text-xs hx-overflow-auto hx-max-w-full; @apply hx:text-xs hx:overflow-auto hx:max-w-full;
} }
} }
} }

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

@ -1,6 +1,6 @@
nav { nav {
.search-wrapper { .search-wrapper {
@apply hx-hidden md:hx-inline-block; @apply hx:hidden hx:md:inline-block;
} }
} }
@ -8,48 +8,43 @@ nav {
(-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px)) (-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))
) { ) {
.nav-container-blur { .nav-container-blur {
@apply hx-backdrop-blur-md hx-bg-white/[.85] dark:!hx-bg-dark/80; @apply hx:backdrop-blur-md hx:bg-white/[.85] hx:dark:bg-dark/80!;
} }
} }
.hamburger-menu svg { /* Hamburger Menu - Flattened Structure */
g { .hamburger-menu svg g {
@apply hx-origin-center; @apply hx:origin-center hx:transition-all hx:duration-100 hx:ease-out;
transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1); }
}
path { .hamburger-menu svg path {
opacity: 1; @apply hx:opacity-100 hx:transition-all hx:duration-100 hx:ease-out hx:delay-100;
transition: }
transform 0.2s cubic-bezier(0.25, 1, 0.5, 1) 0.2s,
opacity 0.2s ease 0.2s; .hamburger-menu svg.open path {
} @apply hx:transition-transform hx:duration-100 hx:ease-out hx:delay-0;
}
&.open {
path { .hamburger-menu svg.open g {
transition: @apply hx:transition-transform hx:duration-100 hx:ease-out hx:delay-100;
transform 0.2s cubic-bezier(0.25, 1, 0.5, 1), }
opacity 0s ease 0.2s;
} .hamburger-menu svg.open > path {
g { @apply hx:opacity-0;
transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1) 0.2s; }
}
} .hamburger-menu svg.open > g:nth-of-type(1) {
@apply hx:rotate-45;
&.open > { }
path {
@apply hx-opacity-0; .hamburger-menu svg.open > g:nth-of-type(1) path {
} @apply hx:translate-y-1;
g:nth-of-type(1) { }
@apply hx-rotate-45;
path { .hamburger-menu svg.open > g:nth-of-type(2) {
transform: translate3d(0, 4px, 0); @apply hx:-rotate-45;
} }
}
g:nth-of-type(2) { .hamburger-menu svg.open > g:nth-of-type(2) path {
@apply -hx-rotate-45; @apply hx:-translate-y-1;
path {
transform: translate3d(0, -4px, 0);
}
}
}
} }

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

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

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

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

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

@ -1,7 +1,7 @@
@media (max-width: 767px) { @media (max-width: 48rem) {
.sidebar-container { .sidebar-container {
@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; @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 hx:dark:bg-dark;
transition: transform 0.8s cubic-bezier(0.52, 0.16, 0.04, 1); transition: transform 0.4s cubic-bezier(0.52, 0.16, 0.04, 1);
will-change: transform, opacity; will-change: transform, opacity;
contain: layout style; contain: layout style;
backface-visibility: hidden; backface-visibility: hidden;
@ -10,12 +10,12 @@
.sidebar-container { .sidebar-container {
li > div { li > div {
@apply hx-h-0; @apply hx:h-0;
} }
li.open > div { li.open > div {
@apply hx-h-auto hx-pt-1; @apply hx:h-auto hx:pt-1;
} }
li.open > a > span > svg > path { li.open > a > span > svg > path {
@apply hx-rotate-90; @apply hx:rotate-90;
} }
} }

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

@ -1,17 +1,22 @@
.steps h3 { .steps {
counter-increment: step; :where(h2, h3, h4, h5, h6):not(.no-step-marker) {
counter-increment: step;
&:before { @apply hx:ltr:before:ml-[-41px] hx:rtl:before:mr-[-44px];
@apply hx-absolute hx-w-[33px] hx-h-[33px]; /* https://github.com/tailwindlabs/tailwindcss/issues/15597#issuecomment-2582673546 */
@apply hx-border-4 hx-border-white hx-bg-gray-100 dark:hx-border-dark dark:hx-bg-neutral-800; @apply hx:before:bg-gray-100 hx:dark:before: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:before:border-4 hx:before:border-white hx:dark:before:border-dark;
@apply hx-mt-[3px] ltr:hx-ml-[-41px] rtl:hx-mr-[-44px]; &:before {
content: counter(step); content: counter(step);
@apply hx:absolute hx:size-[33px];
@apply hx:rounded-full hx:text-neutral-400 hx:text-base hx:font-normal hx:text-center hx:-indent-px;
}
} }
} }
:lang(fa) .steps h3 { :lang(fa) .steps {
&:before { :where(h2, h3, h4, h5, h6):not(.no-step-marker) {
content: counter(step, persian); &:before {
content: counter(step, persian);
}
} }
} }

28
assets/css/highlight.css
View File

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

1
assets/css/safelist.txt Normal file
View File

@ -0,0 +1 @@
hx:max-w-full

48
assets/css/styles.css
View File

@ -1,26 +1,27 @@
@import "tailwind.css"; @import "tailwindcss" prefix(hx);
@import "typography.css"; @custom-variant dark (&:where(.dark, .dark *));
@import "highlight.css";
@import "components/cards.css"; @theme {
@import "components/steps.css"; --color-primary-50: hsl(var(--primary-hue) var(--primary-saturation) calc(var(--primary-lightness) + calc(calc(100% - var(--primary-lightness)) / 50) * 47));
@import "components/search.css"; --color-primary-100: hsl(var(--primary-hue) var(--primary-saturation) calc(var(--primary-lightness) + calc(calc(100% - var(--primary-lightness)) / 50) * 44));
@import "components/sidebar.css"; --color-primary-200: hsl(var(--primary-hue) var(--primary-saturation) calc(var(--primary-lightness) + calc(calc(100% - var(--primary-lightness)) / 50) * 36));
@import "components/navbar.css"; --color-primary-300: hsl(var(--primary-hue) var(--primary-saturation) calc(var(--primary-lightness) + calc(calc(100% - var(--primary-lightness)) / 50) * 27));
@import "components/scrollbar.css"; --color-primary-400: hsl(var(--primary-hue) var(--primary-saturation) calc(var(--primary-lightness) + calc(calc(100% - var(--primary-lightness)) / 50) * 16));
@import "components/code-copy.css"; --color-primary-500: hsl(var(--primary-hue) var(--primary-saturation) var(--primary-lightness));
@import "components/hextra/feature-grid.css"; --color-primary-600: hsl(var(--primary-hue) var(--primary-saturation) calc(calc(var(--primary-lightness) / 50) * 45));
@import "components/jupyter.css"; --color-primary-700: hsl(var(--primary-hue) var(--primary-saturation) calc(calc(var(--primary-lightness) / 50) * 39));
@import "components/badge.css"; --color-primary-800: hsl(var(--primary-hue) var(--primary-saturation) calc(calc(var(--primary-lightness) / 50) * 32));
--color-primary-900: hsl(var(--primary-hue) var(--primary-saturation) calc(calc(var(--primary-lightness) / 50) * 24));
--color-dark: #111;
}
html { html {
@apply hx-text-base hx-antialiased; @apply hx:text-base hx:antialiased;
font-feature-settings: "rlig" 1, "calt" 1, "ss01" 1;
-webkit-tap-highlight-color: transparent;
} }
body { body {
@apply hx-w-full hx-bg-white dark:hx-bg-dark dark:hx-text-gray-100; @apply hx:w-full hx:bg-white hx:dark:bg-dark hx:dark:text-gray-100;
} }
:root { :root {
@ -36,3 +37,16 @@ body {
--primary-saturation: 100%; --primary-saturation: 100%;
--primary-lightness: 50%; --primary-lightness: 50%;
} }
@import "./typography.css";
@import "./highlight.css";
@import "./components/cards.css";
@import "./components/steps.css";
@import "./components/search.css";
@import "./components/sidebar.css";
@import "./components/navbar.css";
@import "./components/scrollbar.css";
@import "./components/code-copy.css";
@import "./components/hextra/feature-grid.css";
@import "./components/jupyter.css";
@import "./components/badge.css";

3
assets/css/tailwind.css
View File

@ -1,3 +0,0 @@
@tailwind base;
@tailwind components;
@tailwind utilities;

76
assets/css/typography.css
View File

@ -1,126 +1,130 @@
.content { .content {
:where(h1):not(:where([class~=not-prose],[class~=not-prose] *)) { :where(h1):not(:where([class~=not-prose],[class~=not-prose] *)) {
@apply hx-mt-2 hx-text-4xl hx-font-bold hx-tracking-tight hx-text-slate-900 dark:hx-text-slate-100; @apply hx:mt-2 hx:text-4xl hx:font-bold hx:tracking-tight hx:text-slate-900 hx:dark:text-slate-100;
} }
:where(h2):not(:where([class~=not-prose],[class~=not-prose] *)) { :where(h2):not(:where([class~=not-prose],[class~=not-prose] *)) {
@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; @apply hx:font-semibold hx:tracking-tight hx:text-slate-900 hx:dark:text-slate-100 hx:mt-10 hx:border-b hx:pb-1 hx:text-3xl hx:border-neutral-200/70 hx:contrast-more:border-neutral-400 hx:dark:border-primary-100/10 hx:contrast-more:dark:border-neutral-400;
} }
:where(h3):not(:where([class~=not-prose],[class~=not-prose] *)) { :where(h3):not(:where([class~=not-prose],[class~=not-prose] *)) {
@apply hx-font-semibold hx-tracking-tight hx-text-slate-900 dark:hx-text-slate-100 hx-mt-8 hx-text-2xl; @apply hx:font-semibold hx:tracking-tight hx:text-slate-900 hx:dark:text-slate-100 hx:mt-8 hx:text-2xl;
} }
:where(h4):not(:where([class~=not-prose],[class~=not-prose] *)) { :where(h4):not(:where([class~=not-prose],[class~=not-prose] *)) {
@apply hx-font-semibold hx-tracking-tight hx-text-slate-900 dark:hx-text-slate-100 hx-mt-8 hx-text-xl; @apply hx:font-semibold hx:tracking-tight hx:text-slate-900 hx:dark:text-slate-100 hx:mt-8 hx:text-xl;
} }
:where(h5):not(:where([class~=not-prose],[class~=not-prose] *)) { :where(h5):not(:where([class~=not-prose],[class~=not-prose] *)) {
@apply hx-font-semibold hx-tracking-tight hx-text-slate-900 dark:hx-text-slate-100 hx-mt-8 hx-text-lg; @apply hx:font-semibold hx:tracking-tight hx:text-slate-900 hx:dark:text-slate-100 hx:mt-8 hx:text-lg;
} }
:where(h6):not(:where([class~=not-prose],[class~=not-prose] *)) { :where(h6):not(:where([class~=not-prose],[class~=not-prose] *)) {
@apply hx-font-semibold hx-tracking-tight hx-text-slate-900 dark:hx-text-slate-100 hx-mt-8 hx-text-base; @apply hx:font-semibold hx:tracking-tight hx:text-slate-900 hx:dark:text-slate-100 hx:mt-8 hx:text-base;
} }
:where(p):not(:where([class~=not-prose],[class~=not-prose] *)) { :where(p):not(:where([class~=not-prose],[class~=not-prose] *)) {
@apply hx-mt-6 hx-leading-7 first:hx-mt-0; @apply hx:mt-6 hx:leading-7 hx:first:mt-0;
} }
:where(a):not(:where([class~=not-prose],[class~=not-prose] *)) { :where(a):not(:where([class~=not-prose],[class~=not-prose] *)) {
@apply hx-text-primary-600 hx-underline hx-decoration-from-font [text-underline-position:from-font]; @apply hx:text-primary-600 hx:underline hx:decoration-from-font;
} }
:where(blockquote):not(:where([class~=not-prose],[class~=not-prose] *)) { :where(blockquote):not(:where([class~=not-prose],[class~=not-prose] *)) {
@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; @apply hx:mt-6 hx:border-gray-300 hx:italic hx:text-gray-700 hx:dark:border-gray-700 hx:dark:text-gray-400 hx:first:mt-0 hx:ltr:border-l-2 hx:ltr:pl-6 hx:rtl:border-r-2 hx:rtl:pr-6;
} }
:where(pre):not(:where(.hextra-code-block pre, [class~=not-prose],[class~=not-prose] *)) { :where(pre):not(:where(.hextra-code-block pre, [class~=not-prose],[class~=not-prose] *)) {
@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; @apply hx:bg-primary-700/5 hx:mb-4 hx:overflow-x-auto hx:rounded-xl hx:font-medium hx:subpixel-antialiased hx:dark:bg-primary-300/10 hx:text-[.9em] hx:contrast-more:border hx:contrast-more:border-primary-900/20 hx:contrast-more:contrast-150 hx:contrast-more:dark:border-primary-100/40 hx:py-4;
} }
:where(code):not(:where(.hextra-code-block code, [class~=not-prose],[class~=not-prose] *)) { :where(code):not(:where(.hextra-code-block code, [class~=not-prose],[class~=not-prose] *)) {
@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; @apply hx:border-black/4 hx:bg-black/3 hx:break-words hx:rounded-md hx:border hx:py-0.5 hx:px-[.25em] hx:text-[.9em] hx:dark:border-white/10 hx:dark:bg-white/10;
} }
:where(table):not(:where(.hextra-code-block table, [class~=not-prose],[class~=not-prose] *)) { :where(table):not(:where(.hextra-code-block table, [class~=not-prose],[class~=not-prose] *)) {
@apply hx-block hx-overflow-x-auto hx-mt-6 hx-p-0 first:hx-mt-0; @apply hx:block hx:overflow-x-auto hx:mt-6 hx:p-0 hx:first:mt-0;
tr { tr {
@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; @apply hx:m-0 hx:border-t hx:border-gray-300 hx:p-0 hx:dark:border-gray-600 hx:even:bg-gray-100 hx:even:dark:bg-gray-600/20;
} }
th { th {
@apply hx-m-0 hx-border hx-border-gray-300 hx-px-4 hx-py-2 hx-font-semibold dark:hx-border-gray-600; @apply hx:m-0 hx:border hx:border-gray-300 hx:px-4 hx:py-2 hx:font-semibold hx:dark:border-gray-600;
} }
td { td {
@apply hx-m-0 hx-border hx-border-gray-300 hx-px-4 hx-py-2 dark:hx-border-gray-600; @apply hx:m-0 hx:border hx:border-gray-300 hx:px-4 hx:py-2 hx:dark:border-gray-600;
} }
} }
:where(ol):not(:where([class~=not-prose],[class~=not-prose] *)) { :where(ol):not(:where([class~=not-prose],[class~=not-prose] *)) {
@apply hx-mt-6 hx-list-decimal first:hx-mt-0 ltr:hx-ml-6 rtl:hx-mr-6; @apply hx:mt-6 hx:list-decimal hx:first:mt-0 hx:ltr:ml-6 hx:rtl:mr-6;
li { li {
@apply hx-my-2; @apply hx:my-2;
} }
} }
:where(ul):not(:where([class~=not-prose],[class~=not-prose] *)) { :where(ul):not(:where([class~=not-prose],[class~=not-prose] *)) {
@apply hx-mt-6 hx-list-disc first:hx-mt-0 ltr:hx-ml-6 rtl:hx-mr-6; @apply hx:mt-6 hx:list-disc hx:first:mt-0 hx:ltr:ml-6 hx:rtl:mr-6;
li { li {
@apply hx-my-2; @apply hx:my-2;
} }
} }
/* This CSS rule targets the first nested unordered (ul) or ordered (ol) list /* This CSS rule targets the first nested unordered (ul) or ordered (ol) list
inside the list item (li) of any parent ul or ol. inside the list item (li) of any parent ul or ol.
The rule sets the top margin of the selected list to zero. */ 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] *)) { :where(ul, ol) > li > :where(ul, ol):not(:where([class~=not-prose],[class~=not-prose] *)) {
@apply hx-mt-0; @apply hx:mt-0;
} }
:where(kbd):not(:where([class~=not-prose],[class~=not-prose] *)) { :where(kbd):not(:where([class~=not-prose],[class~=not-prose] *)) {
@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; @apply hx:border-black/4 hx:bg-black/3 hx:break-words hx:rounded-md hx:border hx:py-0.5 hx:px-[.25em] hx:text-[.9em] hx:dark:border-white/10 hx:dark:bg-white/10;
} }
:where(pre.mermaid):not(:where(.hextra-code-block pre, [class~=not-prose],[class~=not-prose] *)) { :where(pre.mermaid):not(:where(.hextra-code-block pre, [class~=not-prose],[class~=not-prose] *)) {
@apply hx-bg-transparent hx-rounded-none dark:hx-bg-transparent; @apply hx:bg-transparent hx:rounded-none hx:dark:bg-transparent;
} }
:where(img):not(:where([class~=not-prose],[class~=not-prose] *)) { :where(img):not(:where([class~=not-prose],[class~=not-prose] *)) {
@apply hx-mx-auto hx-my-4 hx-rounded-md; @apply hx:mx-auto hx:my-4 hx:rounded-md;
} }
:where(figure):not(:where([class~=not-prose],[class~=not-prose] *)) { :where(figure):not(:where([class~=not-prose],[class~=not-prose] *)) {
figcaption { figcaption {
@apply hx-text-sm hx-text-gray-500 dark:hx-text-gray-400 hx-mt-2 hx-block hx-text-center; @apply hx:text-sm hx:text-gray-500 hx:dark:text-gray-400 hx:mt-2 hx:block hx:text-center;
} }
} }
/* Definition list */ /* Definition list */
:where(dl):not(:where([class~=not-prose],[class~=not-prose] *)) { :where(dl):not(:where([class~=not-prose],[class~=not-prose] *)) {
dt { dt {
@apply hx-mt-6 hx-font-semibold; @apply hx:mt-6 hx:font-semibold;
} }
dd { dd {
@apply hx-my-2 hx-ps-6; @apply hx:my-2 hx:ps-6;
} }
} }
.footnotes { .footnotes {
@apply hx-mt-12 hx-text-sm; @apply hx:mt-12 hx:text-sm;
hr {
@apply hx:border-gray-200 hx:dark:border-neutral-800;
}
} }
} }
.subheading-anchor { .subheading-anchor {
@apply hx-opacity-0 hx-transition-opacity ltr:hx-ml-1 rtl:hx-mr-1; @apply hx:opacity-0 hx:transition-opacity hx:ltr:ml-1 hx:rtl:mr-1;
span:target + &, span:target + &,
:hover > &, :hover > &,
&:focus { &:focus {
@apply hx-opacity-100; @apply hx:opacity-100;
} }
span + &, span + &,
:hover > & { :hover > & {
@apply !hx-no-underline; @apply hx:no-underline!;
} }
@apply hx:after:text-gray-300 hx:dark:after:text-neutral-700;
&:after { &:after {
@apply hx-content-['#'] hx-px-1; @apply hx:content-['#'] hx:px-1;
@apply hx-text-gray-300 dark:hx-text-neutral-700;
span:target + & { span:target + & {
@apply hx-text-gray-400; @apply hx:text-gray-400;
@apply dark:hx-text-neutral-500; @apply hx:dark:text-neutral-500;
} }
} }
} }
article details > summary { article details > summary {
&::-webkit-details-marker { &::-webkit-details-marker {
@apply hx-hidden; @apply hx:hidden;
} }
&::before { &::before {
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"); 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; height: 1.2em;
width: 1.2em; width: 1.2em;
vertical-align: -4px; vertical-align: -4px;

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

@ -5,9 +5,9 @@ document.addEventListener("DOMContentLoaded", function () {
if (backToTop) { if (backToTop) {
document.addEventListener("scroll", (e) => { document.addEventListener("scroll", (e) => {
if (window.scrollY > 300) { if (window.scrollY > 300) {
backToTop.classList.remove("hx-opacity-0"); backToTop.classList.remove("hx:opacity-0");
} else { } else {
backToTop.classList.add("hx-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 // select the kbd element under the .search-wrapper class
const keys = document.querySelectorAll(".search-wrapper kbd"); const keys = document.querySelectorAll(".search-wrapper kbd");
keys.forEach(key => { keys.forEach(key => {
key.innerHTML = '<span class="hx-text-xs">⌘</span>K'; key.innerHTML = '<span class="hx:text-xs">⌘</span>K';
}); });
} }
}); });
@ -143,7 +143,7 @@ document.addEventListener("DOMContentLoaded", function () {
function hideSearchResults() { function hideSearchResults() {
const { resultsElement } = getActiveSearchElement(); const { resultsElement } = getActiveSearchElement();
if (!resultsElement) return; if (!resultsElement) return;
resultsElement.classList.add('hx-hidden'); resultsElement.classList.add('hx:hidden');
} }
// Handle keyboard events. // Handle keyboard events.
@ -316,7 +316,7 @@ document.addEventListener("DOMContentLoaded", function () {
while (resultsElement.firstChild) { while (resultsElement.firstChild) {
resultsElement.removeChild(resultsElement.firstChild); resultsElement.removeChild(resultsElement.firstChild);
} }
resultsElement.classList.remove('hx-hidden'); resultsElement.classList.remove('hx:hidden');
const pageResults = window.pageIndex.search(query, 5, { enrich: true, suggest: true })[0]?.result || []; 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(); e.preventDefault();
switcher.dataset.state = switcher.dataset.state === 'open' ? 'closed' : 'open'; switcher.dataset.state = switcher.dataset.state === 'open' ? 'closed' : 'open';
const optionsElement = switcher.nextElementSibling; const optionsElement = switcher.nextElementSibling;
optionsElement.classList.toggle('hx-hidden'); optionsElement.classList.toggle('hx:hidden');
// Calculate position of language options element // Calculate position of language options element
const switcherRect = switcher.getBoundingClientRect(); const switcherRect = switcher.getBoundingClientRect();
@ -21,7 +21,7 @@
languageSwitchers.forEach((switcher) => { languageSwitchers.forEach((switcher) => {
switcher.dataset.state = 'closed'; switcher.dataset.state = 'closed';
const optionsElement = switcher.nextElementSibling; const optionsElement = switcher.nextElementSibling;
optionsElement.classList.add('hx-hidden'); optionsElement.classList.add('hx:hidden');
}); });
} }
}); });

38
assets/js/menu.js
View File

@ -2,53 +2,24 @@
document.addEventListener('DOMContentLoaded', function () { document.addEventListener('DOMContentLoaded', function () {
const menu = document.querySelector('.hamburger-menu'); const menu = document.querySelector('.hamburger-menu');
const overlay = document.querySelector('.mobile-menu-overlay');
const sidebarContainer = document.querySelector('.sidebar-container'); const sidebarContainer = document.querySelector('.sidebar-container');
// Initialize the overlay
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() { function toggleMenu() {
// Toggle the hamburger menu // Toggle the hamburger menu
menu.querySelector('svg').classList.toggle('open'); menu.querySelector('svg').classList.toggle('open');
// When the menu is open, we want to show the navigation sidebar // When the menu is open, we want to show the navigation sidebar
sidebarContainer.classList.toggle('max-md:[transform:translate3d(0,-100%,0)]'); sidebarContainer.classList.toggle('hx:max-md:[transform:translate3d(0,-100%,0)]');
sidebarContainer.classList.toggle('max-md:[transform:translate3d(0,0,0)]'); sidebarContainer.classList.toggle('hx:max-md:[transform:translate3d(0,0,0)]');
// When the menu is open, we want to prevent the body from scrolling // When the menu is open, we want to prevent the body from scrolling
document.body.classList.toggle('hx-overflow-hidden'); document.body.classList.toggle('hx:overflow-hidden');
document.body.classList.toggle('md:hx-overflow-auto'); document.body.classList.toggle('hx:md:overflow-auto');
}
function hideOverlay() {
// Hide the overlay
overlay.classList.remove(...overlayClasses);
overlay.classList.add('hx-bg-transparent');
} }
menu.addEventListener('click', (e) => { menu.addEventListener('click', (e) => {
e.preventDefault(); e.preventDefault();
toggleMenu(); toggleMenu();
if (overlay.classList.contains('hx-bg-transparent')) {
// Show the overlay
overlay.classList.add(...overlayClasses);
overlay.classList.remove('hx-bg-transparent');
} else {
// Hide the overlay
hideOverlay();
}
});
overlay.addEventListener('click', (e) => {
e.preventDefault();
toggleMenu();
// Hide the overlay
hideOverlay();
}); });
// Select all anchor tags in the sidebar container // Select all anchor tags in the sidebar container
@ -62,7 +33,6 @@ document.addEventListener('DOMContentLoaded', function () {
// Only dismiss overlay on mobile view // Only dismiss overlay on mobile view
if (window.innerWidth < 768) { if (window.innerWidth < 768) {
toggleMenu(); toggleMenu();
hideOverlay();
} }
} }
}); });

2
dev.toml
View File

@ -8,7 +8,7 @@
source = 'assets/watching/hugo_stats\.json' source = 'assets/watching/hugo_stats\.json'
target = 'styles\.css' target = 'styles\.css'
[[build.cachebusters]] [[build.cachebusters]]
source = '(postcss|tailwind)\.config\.js' source = '(postcss|tailwind)\.config\.mjs'
target = 'css' target = 'css'
[[build.cachebusters]] [[build.cachebusters]]
source = 'assets/.*\.(js|ts|jsx|tsx)' source = 'assets/.*\.(js|ts|jsx|tsx)'

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

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

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

@ -4,52 +4,52 @@ layout: hextra-home
--- ---
{{< hextra/hero-badge >}} {{< hextra/hero-badge >}}
<div class="hx-w-2 hx-h-2 hx-rounded-full hx-bg-primary-400"></div> <div class="hx:w-2 hx:h-2 hx:rounded-full hx:bg-primary-400"></div>
<span>無料、オープンソース</span> <span>無料、オープンソース</span>
{{< icon name="arrow-circle-right" attributes="height=14" >}} {{< icon name="arrow-circle-right" attributes="height=14" >}}
{{< /hextra/hero-badge >}} {{< /hextra/hero-badge >}}
<div class="hx-mt-6 hx-mb-6"> <div class="hx:mt-6 hx:mb-6">
{{< hextra/hero-headline >}} {{< hextra/hero-headline >}}
MarkdownとHugoで&nbsp;<br class="sm:hx-block hx-hidden" />モダンなウェブサイトを構築 MarkdownとHugoで&nbsp;<br class="hx:sm:block hx:hidden" />モダンなウェブサイトを構築
{{< /hextra/hero-headline >}} {{< /hextra/hero-headline >}}
</div> </div>
<div class="hx-mb-12"> <div class="hx:mb-12">
{{< hextra/hero-subtitle >}} {{< hextra/hero-subtitle >}}
美しい静的ウェブサイトを作るための&nbsp;<br class="sm:hx-block hx-hidden" />高速でバッテリー同梱型のHugoテーマ 美しい静的ウェブサイトを作るための&nbsp;<br class="hx:sm:block hx:hidden" />高速でバッテリー同梱型のHugoテーマ
{{< /hextra/hero-subtitle >}} {{< /hextra/hero-subtitle >}}
</div> </div>
<div class="hx-mb-6"> <div class="hx:mb-6">
{{< hextra/hero-button text="始める" link="docs" >}} {{< hextra/hero-button text="始める" link="docs" >}}
</div> </div>
<div class="hx-mt-6"></div> <div class="hx:mt-6"></div>
{{< hextra/feature-grid >}} {{< hextra/feature-grid >}}
{{< hextra/feature-card {{< hextra/feature-card
title="高速かつ多機能" title="高速かつ多機能"
subtitle="シンプルで使いやすく、それでいて強力で豊富な機能を備えています。" subtitle="シンプルで使いやすく、それでいて強力で豊富な機能を備えています。"
class="hx-aspect-auto md:hx-aspect-[1.1/1] max-md:hx-min-h-[340px]" class="hx:aspect-auto hx:md:aspect-[1.1/1] hx:max-md:min-h-[340px]"
image="/images/hextra-doc.webp" image="/images/hextra-doc.webp"
imageClass="hx-top-[40%] hx-left-[24px] hx-w-[180%] sm:hx-w-[110%] dark:hx-opacity-80" imageClass="hx:top-[40%] hx:left-[24px] hx:w-[180%] hx:sm:w-[110%] hx:dark:opacity-80"
style="background: radial-gradient(ellipse at 50% 80%,rgba(194,97,254,0.15),hsla(0,0%,100%,0));" style="background: radial-gradient(ellipse at 50% 80%,rgba(194,97,254,0.15),hsla(0,0%,100%,0));"
>}} >}}
{{< hextra/feature-card {{< hextra/feature-card
title="MarkdownだけでOK" title="MarkdownだけでOK"
subtitle="Markdownだけで作成可能。ショートコードコンポーネントで充実させることもできます。" subtitle="Markdownだけで作成可能。ショートコードコンポーネントで充実させることもできます。"
class="hx-aspect-auto md:hx-aspect-[1.1/1] max-lg:hx-min-h-[340px]" class="hx:aspect-auto hx:md:aspect-[1.1/1] hx:max-lg:min-h-[340px]"
image="/images/hextra-markdown.webp" image="/images/hextra-markdown.webp"
imageClass="hx-top-[40%] hx-left-[36px] hx-w-[180%] sm:hx-w-[110%] dark:hx-opacity-80" imageClass="hx:top-[40%] hx:left-[36px] hx:w-[180%] hx:sm:w-[110%] hx:dark:opacity-80"
style="background: radial-gradient(ellipse at 50% 80%,rgba(142,53,74,0.15),hsla(0,0%,100%,0));" style="background: radial-gradient(ellipse at 50% 80%,rgba(142,53,74,0.15),hsla(0,0%,100%,0));"
>}} >}}
{{< hextra/feature-card {{< hextra/feature-card
title="全文検索" title="全文検索"
subtitle="FlexSearchによる全文検索が内蔵されており、追加の設定は不要です。" subtitle="FlexSearchによる全文検索が内蔵されており、追加の設定は不要です。"
class="hx-aspect-auto md:hx-aspect-[1.1/1] max-md:hx-min-h-[340px]" class="hx:aspect-auto hx:md:aspect-[1.1/1] hx:max-md:min-h-[340px]"
image="/images/hextra-search.webp" image="/images/hextra-search.webp"
imageClass="hx-top-[40%] hx-left-[36px] hx-w-[110%] sm:hx-w-[110%] dark:hx-opacity-80" imageClass="hx:top-[40%] hx:left-[36px] hx:w-[110%] hx:sm:w-[110%] hx:dark:opacity-80"
style="background: radial-gradient(ellipse at 50% 80%,rgba(221,210,59,0.15),hsla(0,0%,100%,0));" style="background: radial-gradient(ellipse at 50% 80%,rgba(221,210,59,0.15),hsla(0,0%,100%,0));"
>}} >}}
{{< hextra/feature-card {{< hextra/feature-card

26
exampleSite/content/_index.md
View File

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

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

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

1
exampleSite/content/docs/guide/shortcodes/icon.md
View File

@ -1,5 +1,6 @@
--- ---
title: Icon title: Icon
next: /docs/guide/shortcodes/steps
--- ---
To use this shortcode inline, inline shortcode needs to be enabled in the config: To use this shortcode inline, inline shortcode needs to be enabled in the config:

1
exampleSite/content/docs/guide/shortcodes/others.md
View File

@ -3,6 +3,7 @@ title: Other Shortcodes
linkTitle: Others linkTitle: Others
sidebar: sidebar:
exclude: true exclude: true
next: /docs/guide/deploy-site
--- ---
{{< callout emoji="ℹ️" >}} {{< callout emoji="ℹ️" >}}

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

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

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

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

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

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

1045
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 hx-mt-6"> <pre class="mermaid hx:mt-6">
{{ .Inner | htmlEscape | safeHTML }} {{ .Inner | htmlEscape | safeHTML }}
</pre> </pre>
{{- .Page.Store.Set "hasMermaid" true -}} {{- .Page.Store.Set "hasMermaid" true -}}

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

@ -4,7 +4,7 @@
{{- $lang := .Attributes.lang | default .Type -}} {{- $lang := .Attributes.lang | default .Type -}}
<div class="hextra-code-block hx-relative hx-mt-6 first:hx-mt-0 hx-group/code"> <div class="hextra-code-block hx:relative hx:mt-6 hx:first:mt-0 hx:group/code">
{{- partial "components/codeblock" (dict "filename" $filename "lang" $lang "base_url" $base_url "content" .Inner "options" .Options) -}} {{- partial "components/codeblock" (dict "filename" $filename "lang" $lang "base_url" $base_url "content" .Inner "options" .Options) -}}
{{- if or (eq site.Params.highlight.copy.enable nil) (site.Params.highlight.copy.enable) -}} {{- if or (eq site.Params.highlight.copy.enable nil) (site.Params.highlight.copy.enable) -}}

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

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

8
layouts/_default/list.html
View File

@ -1,14 +1,14 @@
{{ define "main" }} {{ define "main" }}
<div class='hx-mx-auto hx-flex {{ partial "utils/page-width" . }}'> <div class='hx:mx-auto hx:flex {{ partial "utils/page-width" . }}'>
{{ partial "sidebar.html" (dict "context" .) }} {{ partial "sidebar.html" (dict "context" .) }}
{{ partial "toc.html" . }} {{ partial "toc.html" . }}
<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)]"> <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"> <main class="hx:w-full hx:min-w-0 hx:max-w-6xl hx:px-6 hx:pt-4 hx:md:px-12">
<div class="content"> <div class="content">
{{ if .Title }}<h1>{{ .Title }}</h1>{{ end }} {{ if .Title }}<h1>{{ .Title }}</h1>{{ end }}
{{ .Content }} {{ .Content }}
</div> </div>
<div class="hx-mt-16"></div> <div class="hx:mt-16"></div>
{{ partial "components/last-updated.html" . }} {{ partial "components/last-updated.html" . }}
{{ partial "components/comments.html" . }} {{ partial "components/comments.html" . }}
</main> </main>

14
layouts/_default/single.html
View File

@ -1,16 +1,16 @@
{{ define "main" }} {{ define "main" }}
<div class='hx-mx-auto hx-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 "sidebar.html" (dict "context" . "disableSidebar" true "displayPlaceholder" true) }}
{{ partial "toc.html" . }} {{ partial "toc.html" . }}
<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)]"> <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"> <main class="hx:w-full hx:min-w-0 hx:max-w-6xl hx:px-6 hx:pt-4 hx:md:px-12">
<br class="hx-mt-1.5 hx-text-sm" /> <br class="hx:mt-1.5 hx:text-sm" />
{{ if .Title }}<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>{{ end }} {{ if .Title }}<h1 class="hx:text-center hx:mt-2 hx:text-4xl hx:font-bold hx:tracking-tight hx:text-slate-900 hx:dark:text-slate-100">{{ .Title }}</h1>{{ end }}
<div class="hx-mb-16"></div> <div class="hx:mb-16"></div>
<div class="content"> <div class="content">
{{ .Content }} {{ .Content }}
</div> </div>
<div class="hx-mt-16"></div> <div class="hx:mt-16"></div>
{{ partial "components/comments.html" . }} {{ partial "components/comments.html" . }}
</main> </main>
</article> </article>

20
layouts/_default/taxonomy.html
View File

@ -1,25 +1,25 @@
{{ define "main" }} {{ define "main" }}
<div class='hx-mx-auto hx-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 "sidebar.html" (dict "context" . "disableSidebar" true "displayPlaceholder" true) }}
{{ partial "toc.html" (dict "Params" (dict "toc" false)) }} {{ partial "toc.html" (dict "Params" (dict "toc" false)) }}
<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)]"> <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"> <main class="hx:w-full hx:min-w-0 hx:max-w-6xl hx:px-6 hx:pt-4 hx:md:px-12">
<br class="hx-mt-1.5 hx-text-sm" /> <br class="hx:mt-1.5 hx:text-sm" />
{{ if .Title }}<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>{{ end }} {{ if .Title }}<h1 class="hx:text-center hx:mt-2 hx:text-4xl hx:font-bold hx:tracking-tight hx:text-slate-900 hx:dark:text-slate-100">{{ .Title }}</h1>{{ end }}
<div class="hx-mb-16"></div> <div class="hx:mb-16"></div>
<div class="content"> <div class="content">
{{ .Content }} {{ .Content }}
</div> </div>
<div class="hx-grid hx-grid-cols-1 md:hx-grid-cols-2 lg:hx-grid-cols-3 xl:hx-grid-cols-4 hx-gap-4"> <div class="hx:grid hx:grid-cols-1 hx:md:grid-cols-2 hx:lg:grid-cols-3 hx:xl:grid-cols-4 hx:gap-4">
{{ range .Data.Terms }} {{ range .Data.Terms }}
<div class="hx-w-full"> <div class="hx:w-full">
<a <a
href="{{ .Page.RelPermalink }}" href="{{ .Page.RelPermalink }}"
title="{{ .Page.LinkTitle }}" title="{{ .Page.LinkTitle }}"
class="hx-font-medium hover:hx-text-primary-600" class="hx:font-medium hx:hover:text-primary-600"
> >
{{- .Page.LinkTitle -}} {{- .Page.LinkTitle -}}
<span class="hx-text-sm hx-text-gray-500">&nbsp;{{ .Count }}</span> <span class="hx:text-sm hx:text-gray-500">&nbsp;{{ .Count }}</span>
</a> </a>
</div> </div>
{{ end }} {{ end }}

16
layouts/_default/term.html
View File

@ -1,12 +1,12 @@
{{ define "main" }} {{ define "main" }}
<div class='hx-mx-auto hx-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 "sidebar.html" (dict "context" . "disableSidebar" true "displayPlaceholder" true) }}
{{ partial "toc.html" (dict "Params" (dict "toc" false)) }} {{ partial "toc.html" (dict "Params" (dict "toc" false)) }}
<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)]"> <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"> <main class="hx:w-full hx:min-w-0 hx:max-w-6xl hx:px-6 hx:pt-4 hx:md:px-12">
<br class="hx-mt-1.5 hx-text-sm" /> <br class="hx:mt-1.5 hx:text-sm" />
{{ if .Title }}<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>{{ end }} {{ if .Title }}<h1 class="hx:text-center hx:mt-2 hx:text-4xl hx:font-bold hx:tracking-tight hx:text-slate-900 hx:dark:text-slate-100">{{ .Title }}</h1>{{ end }}
<div class="hx-mb-16"></div> <div class="hx:mb-16"></div>
<div class="content"> <div class="content">
{{ .Content }} {{ .Content }}
</div> </div>
@ -16,14 +16,14 @@
<h3> <h3>
<a <a
style="color: inherit; text-decoration: none;" style="color: inherit; text-decoration: none;"
class="hx-block hx-font-semibold hx-mt-8 hx-text-2xl" class="hx:block hx:font-semibold hx:mt-8 hx:text-2xl"
href="{{ .RelPermalink }}" href="{{ .RelPermalink }}"
title="{{ .LinkTitle }}" title="{{ .LinkTitle }}"
> >
{{ .Title }} {{ .Title }}
</a> </a>
</h3> </h3>
<p class="hx-opacity-50 hx-text-sm hx-leading-7">{{ partial "utils/format-date" .Date }}</p> <p class="hx:opacity-50 hx:text-sm hx:leading-7">{{ partial "utils/format-date" .Date }}</p>
</div> </div>
{{- end -}} {{- end -}}
</div> </div>

8
layouts/_default/wide.html
View File

@ -1,9 +1,9 @@
{{ define "main" }} {{ define "main" }}
<div class="hx-mx-auto hx-flex hx-max-w-[90rem]"> <div class="hx:mx-auto hx:flex hx:max-w-[90rem]">
{{ partial "sidebar.html" (dict "context" . "disableSidebar" true "displayPlaceholder" false) }} {{ partial "sidebar.html" (dict "context" . "disableSidebar" true "displayPlaceholder" false) }}
<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)]"> <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" /> <br class="hx:mt-1.5 hx:text-sm" />
{{ if .Title }}<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>{{ end }} {{ if .Title }}<h1 class="hx:text-center hx:mt-2 hx:text-4xl hx:font-bold hx:tracking-tight hx:text-slate-900 hx:dark:text-slate-100">{{ .Title }}</h1>{{ end }}
<div class="content"> <div class="content">
{{ .Content }} {{ .Content }}
</div> </div>

28
layouts/blog/list.html
View File

@ -1,34 +1,34 @@
{{ define "main" }} {{ define "main" }}
{{- $readMore := (T "readMore") | default "Read more →" -}} {{- $readMore := (T "readMore") | default "Read more →" -}}
<div class="hx-mx-auto hx-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 "sidebar.html" (dict "context" . "disableSidebar" true "displayPlaceholder" true) }}
<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)]"> <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"> <main class="hx:w-full hx:min-w-0 hx:max-w-6xl hx:px-6 hx:pt-4 hx:md:px-12">
<br class="hx-mt-1.5 hx-text-sm" /> <br class="hx:mt-1.5 hx:text-sm" />
{{ if .Title }}<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>{{ end }} {{ if .Title }}<h1 class="hx:text-center hx:mt-2 hx:text-4xl hx:font-bold hx:tracking-tight hx:text-slate-900 hx:dark:text-slate-100">{{ .Title }}</h1>{{ end }}
<div class="content">{{ .Content }}</div> <div class="content">{{ .Content }}</div>
{{- $pages := partial "utils/sort-pages" (dict "page" . "by" site.Params.blog.list.sortBy "order" site.Params.blog.list.sortOrder) -}} {{- $pages := partial "utils/sort-pages" (dict "page" . "by" site.Params.blog.list.sortBy "order" site.Params.blog.list.sortOrder) -}}
{{- range $pages }} {{- range $pages }}
<div class="hx-mb-10"> <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> <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 -}} {{- if site.Params.blog.list.displayTags -}}
{{ with .Params.tags }} {{ with .Params.tags }}
<p class="hx-opacity-50 hx-text-sm hx-leading-7"> <p class="hx:opacity-50 hx:text-sm hx:leading-7">
{{- range . }}<a class="hx-inline-block hx-mr-2">#{{ . }}</a>{{ end -}} {{- range . }}<a class="hx:inline-block hx:mr-2">#{{ . }}</a>{{ end -}}
</p> </p>
{{ end -}} {{ end -}}
{{- end -}} {{- end -}}
<p class="hx-opacity-80 hx-mt-4 hx-leading-7">{{- partial "utils/page-description" . -}}</p> <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"> <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 }}"> <a class="hx:text-[color:hsl(var(--primary-hue),100%,50%)] hx:underline hx:underline-offset-2 hx:decoration-from-font" href="{{ .RelPermalink }}">
{{- $readMore -}} {{- $readMore -}}
</a> </a>
</p> </p>
<p class="hx-opacity-50 hx-text-sm hx-mt-4 hx-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> </div>
{{ end -}} {{ end -}}
</main> </main>
</article> </article>
<div class="max-xl:hx-hidden hx-h-0 hx-w-64 hx-shrink-0"></div> <div class="hx:max-xl:hidden hx:h-0 hx:w-64 hx:shrink-0"></div>
</div> </div>
{{- end -}} {{- end -}}

24
layouts/blog/single.html
View File

@ -1,22 +1,22 @@
{{ define "main" }} {{ define "main" }}
<div class="hx-mx-auto hx-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 "sidebar.html" (dict "context" . "disableSidebar" true "displayPlaceholder" true) }}
{{ partial "toc.html" . }} {{ partial "toc.html" . }}
<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)]"> <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"> <main class="hx:w-full hx:min-w-0 hx:max-w-6xl hx:px-6 hx:pt-4 hx:md:px-12">
{{ partial "breadcrumb.html" . }} {{ partial "breadcrumb.html" . }}
{{ if .Title }}<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>{{ end }} {{ if .Title }}<h1 class="hx:mt-2 hx:text-4xl hx:font-bold hx:tracking-tight hx:text-slate-900 hx:dark:text-slate-100">{{ .Title }}</h1>{{ end }}
<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"> <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 -}} {{- with $date := .Date }}<span class="hx:mr-1">{{ partial "utils/format-date" $date }}</span>{{ end -}}
{{- $lazyLoading := site.Params.enableImageLazyLoading | default true -}} {{- $lazyLoading := site.Params.enableImageLazyLoading | default true -}}
{{ if and .Date .Params.authors }}<span class="hx-mx-1">·</span>{{ end -}} {{ if and .Date .Params.authors }}<span class="hx:mx-1">·</span>{{ end -}}
{{- with $.Params.authors -}} {{- with $.Params.authors -}}
{{- range $i, $author := . -}} {{- range $i, $author := . -}}
{{- if reflect.IsMap $author -}} {{- if reflect.IsMap $author -}}
{{- if and $i (not $author.image) }}<span class="hx-mr-1">,</span>{{ end -}} {{- if and $i (not $author.image) }}<span class="hx:mr-1">,</span>{{ end -}}
<a <a
{{ with $author.link }}href="{{ . }}" target="_blank"{{ end }} {{ with $author.link }}href="{{ . }}" target="_blank"{{ end }}
class="hx-group hx-inline-flex hx-items-center hx-text-current hx-gap-x-1.5 hx-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 $author.name }}title="{{ . }}"{{ end }}
> >
{{- with $image := $author.image }} {{- with $image := $author.image }}
@ -25,12 +25,12 @@
{{- if and $isLocal $startsWithSlash }} {{- if and $isLocal $startsWithSlash }}
{{- $image = (relURL (strings.TrimPrefix "/" $image)) -}} {{- $image = (relURL (strings.TrimPrefix "/" $image)) -}}
{{ end -}} {{ 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 }} /> <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 -}} {{ end -}}
<div class="group-hover:hx-underline">{{ $author.name }}</div> <div class="hx:group-hover:underline">{{ $author.name }}</div>
</a> </a>
{{- else -}} {{- else -}}
{{- if $i }}<span class="hx-mr-1">,</span>{{ end -}}<span class="hx-mx-1">{{ $author }}</span> {{- if $i }}<span class="hx:mr-1">,</span>{{ end -}}<span class="hx:mx-1">{{ $author }}</span>
{{- end -}} {{- end -}}
{{- end -}} {{- end -}}
{{- end -}} {{- end -}}

6
layouts/docs/list.html
View File

@ -1,9 +1,9 @@
{{ define "main" }} {{ define "main" }}
<div class='hx-mx-auto hx-flex {{ partial "utils/page-width" . }}'> <div class='hx:mx-auto hx:flex {{ partial "utils/page-width" . }}'>
{{ partial "sidebar.html" (dict "context" .) }} {{ partial "sidebar.html" (dict "context" .) }}
{{ partial "toc.html" . }} {{ partial "toc.html" . }}
<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)]"> <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"> <main class="hx:w-full hx:min-w-0 hx:max-w-6xl hx:px-6 hx:pt-4 hx:md:px-12">
{{ partial "breadcrumb.html" . }} {{ partial "breadcrumb.html" . }}
<div class="content"> <div class="content">
{{ if .Title }}<h1>{{ .Title }}</h1>{{ end }} {{ if .Title }}<h1>{{ .Title }}</h1>{{ end }}

6
layouts/docs/single.html
View File

@ -1,9 +1,9 @@
{{ define "main" }} {{ define "main" }}
<div class='hx-mx-auto hx-flex {{ partial "utils/page-width" . }}'> <div class='hx:mx-auto hx:flex {{ partial "utils/page-width" . }}'>
{{ partial "sidebar.html" (dict "context" .) }} {{ partial "sidebar.html" (dict "context" .) }}
{{ partial "toc.html" . }} {{ partial "toc.html" . }}
<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)]"> <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"> <main class="hx:w-full hx:min-w-0 hx:max-w-6xl hx:px-6 hx:pt-4 hx:md:px-12">
{{ partial "breadcrumb.html" . }} {{ partial "breadcrumb.html" . }}
<div class="content"> <div class="content">
{{ if .Title }}<h1>{{ .Title }}</h1>{{ end }} {{ if .Title }}<h1>{{ .Title }}</h1>{{ end }}

6
layouts/hextra-home.html
View File

@ -1,8 +1,8 @@
{{ define "main" }} {{ define "main" }}
<div class='hx-mx-auto hx-flex {{ partial "utils/page-width" . }}'> <div class='hx:mx-auto hx:flex {{ partial "utils/page-width" . }}'>
{{ partial "sidebar.html" (dict "context" . "disableSidebar" true) }} {{ partial "sidebar.html" (dict "context" . "disableSidebar" true) }}
<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:w-full hx:break-words hx:min-h-[calc(100vh-var(--navbar-height))] hx:min-w-0 hx:pb-8 hx:pt-8 hx:md: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"> <div class="hx:flex hx:flex-col hx:items-start">
{{ .Content }} {{ .Content }}
</div> </div>
</div> </div>

8
layouts/index.html
View File

@ -1,10 +1,10 @@
{{ define "main" }} {{ define "main" }}
<div class='hx-mx-auto hx-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 "sidebar.html" (dict "context" . "disableSidebar" true "displayPlaceholder" true) }}
{{ partial "toc.html" . }} {{ partial "toc.html" . }}
<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)]"> <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"> <main class="hx:w-full hx:min-w-0 hx:max-w-6xl hx:px-6 hx:pt-4 hx:md:px-12">
{{ if .Title }}<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>{{ end }} {{ if .Title }}<h1 class="hx:text-center hx:mt-2 hx:text-4xl hx:font-bold hx:tracking-tight hx:text-slate-900 hx:dark:text-slate-100">{{ .Title }}</h1>{{ end }}
<div class="content"> <div class="content">
{{ .Content }} {{ .Content }}
</div> </div>

8
layouts/partials/breadcrumb.html
View File

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

8
layouts/partials/components/codeblock-copy-button.html
View File

@ -4,12 +4,12 @@
{{- $copyCode := (T "copyCode") | default "Copy code" -}} {{- $copyCode := (T "copyCode") | default "Copy code" -}}
<div class="hextra-code-copy-btn-container {{ if eq $display `hover` }}hx-opacity-0{{ end }} 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 }}"> <div class="hextra-code-copy-btn-container {{ if eq $display `hover` }}hx:opacity-0{{ end }} hx:transition hx:group-hover/code: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 <button
class="hextra-code-copy-btn hx-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" class="hextra-code-copy-btn hx:group/copybtn hx:cursor-pointer hx:transition-all hx:active:opacity-50 hx:bg-primary-700/5 hx:border hx:border-black/5 hx:text-gray-600 hx:hover:text-gray-900 hx:rounded-md hx:p-1.5 hx:dark:bg-primary-300/10 hx:dark:border-white/10 hx:dark:text-gray-400 hx:dark:hover:text-gray-50"
title="{{ $copyCode }}" title="{{ $copyCode }}"
> >
<div class="copy-icon group-[.copied]/copybtn:hx-hidden hx-pointer-events-none hx-h-4 hx-w-4"></div> <div class="copy-icon hx:group-[.copied]/copybtn: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> <div class="success-icon hx:hidden hx:group-[.copied]/copybtn:block hx:pointer-events-none hx:h-4 hx:w-4"></div>
</button> </button>
</div> </div>

2
layouts/partials/components/codeblock.html
View File

@ -12,7 +12,7 @@
{{- $filename = strings.TrimPrefix "/" $filename -}} {{- $filename = strings.TrimPrefix "/" $filename -}}
{{- $file_url := urls.JoinPath $base_url $filename -}} {{- $file_url := urls.JoinPath $base_url $filename -}}
<a class="hx-no-underline hx-inline-flex hx-items-center hx-gap-1" href="{{ $file_url }}" target="_blank" rel="noopener noreferrer"> <a class="hx:no-underline hx:inline-flex hx:items-center hx:gap-1" href="{{ $file_url }}" target="_blank" rel="noopener noreferrer">
<span>{{- $filename -}}</span> <span>{{- $filename -}}</span>
{{- partial "utils/icon" (dict "name" "external-link" "attributes" "height=1em") -}} {{- partial "utils/icon" (dict "name" "external-link" "attributes" "height=1em") -}}
</a> </a>

22
layouts/partials/components/github-style-alert.html
View File

@ -13,29 +13,29 @@
{{- $icon := index $icons $alertType -}} {{- $icon := index $icons $alertType -}}
{{- $title := or $alertTitle (or (i18n $alertType) (title $alertType)) -}} {{- $title := or $alertTitle (or (i18n $alertType) (title $alertType)) -}}
{{- $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" }} {{- $defaultClass := "hx:border-orange-100 hx:bg-orange-50 hx:text-orange-800 hx:dark:border-orange-400/30 hx:dark:bg-orange-400/20 hx:dark:text-orange-300" }}
{{- $alertClasses := dict {{- $alertClasses := dict
"note" "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" "note" "hx:border-blue-200 hx:bg-blue-100 hx:text-blue-900 hx:dark:border-blue-200/30 hx:dark:bg-blue-900/30 hx:dark:text-blue-200"
"tip" "hx-border-green-200 hx-bg-green-100 hx-text-green-900 dark:hx-border-green-200/30 dark:hx-bg-green-900/30 dark:hx-text-green-200" "tip" "hx:border-green-200 hx:bg-green-100 hx:text-green-900 hx:dark:border-green-200/30 hx:dark:bg-green-900/30 hx:dark:text-green-200"
"important" "hx-border-indigo-200 hx-bg-indigo-100 hx-text-indigo-900 dark:hx-border-indigo-200/30 dark:hx-bg-indigo-900/30 dark:hx-text-indigo-200" "important" "hx:border-indigo-200 hx:bg-indigo-100 hx:text-indigo-900 hx:dark:border-indigo-200/30 hx:dark:bg-indigo-900/30 hx:dark:text-indigo-200"
"warning" "hx-border-amber-200 hx-bg-amber-100 hx-text-amber-900 dark:hx-border-amber-200/30 dark:hx-bg-amber-900/30 dark:hx-text-amber-200" "warning" "hx:border-amber-200 hx:bg-amber-100 hx:text-amber-900 hx:dark:border-amber-200/30 hx:dark:bg-amber-900/30 hx:dark:text-amber-200"
"caution" "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" "caution" "hx:border-red-200 hx:bg-red-100 hx:text-red-900 hx:dark:border-red-200/30 hx:dark:bg-red-900/30 hx:dark:text-red-200"
-}} -}}
{{- $class := index $alertClasses $alertType | default $defaultClass -}} {{- $class := index $alertClasses $alertType | default $defaultClass -}}
<div class="hx-overflow-x-auto hx-mt-6 hx-flex hx-flex-col hx-rounded-lg hx-border hx-py-4 hx-px-4 contrast-more:hx-border-current contrast-more:dark:hx-border-current {{ $class }}"> <div class="hx:overflow-x-auto hx:mt-6 hx:flex hx:flex-col hx:rounded-lg hx:border hx:py-4 hx:px-4 hx:border-gray-200 hx:contrast-more:border-current hx:contrast-more:dark:border-current {{ $class }}">
<p class="hx-flex hx-items-center hx-font-medium"> <p class="hx:flex hx:items-center hx:font-medium">
{{- with $icon -}} {{- with $icon -}}
{{- partial "utils/icon.html" (dict "name" . "attributes" `height=16px class="hx-inline-block hx-align-middle hx-mr-2"`) -}} {{- partial "utils/icon.html" (dict "name" . "attributes" `height=16px class="hx:inline-block hx:align-middle hx:mr-2"`) -}}
{{- end -}} {{- end -}}
{{- $title -}} {{- $title -}}
</p> </p>
<div class="hx-w-full hx-min-w-0 hx-leading-7"> <div class="hx:w-full hx:min-w-0 hx:leading-7">
<div class="hx-mt-6 hx-leading-7 first:hx-mt-0"> <div class="hx:mt-6 hx:leading-7 hx:first:mt-0">
{{- $content -}} {{- $content -}}
</div> </div>
</div> </div>

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

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

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

@ -26,15 +26,15 @@
{{- end -}} {{- end -}}
{{- if or $prev $next -}} {{- if or $prev $next -}}
<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"> <div class="hx:mb-8 hx:flex hx:items-center hx:border-t hx:pt-8 hx:border-gray-200 hx:dark:border-neutral-800 hx:contrast-more:border-neutral-400 hx:dark:contrast-more:border-neutral-400 hx:print:hidden">
{{- if $prev -}} {{- if $prev -}}
{{- $linkTitle := partial "utils/title" $prev -}} {{- $linkTitle := partial "utils/title" $prev -}}
<a <a
href="{{ $prev.RelPermalink }}" href="{{ $prev.RelPermalink }}"
title="{{ $linkTitle }}" title="{{ $linkTitle }}"
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" 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] hx:hover:text-primary-600 hx:dark:text-gray-300 hx:md:text-lg hx:ltr:pr-4 hx:rtl:pl-4"
> >
{{- partial "utils/icon.html" (dict "name" "chevron-right" "attributes" "class=\"hx-inline hx-h-5 hx-shrink-0 ltr:hx-rotate-180\"") -}} {{- partial "utils/icon.html" (dict "name" "chevron-right" "attributes" "class=\"hx:inline hx:h-5 hx:shrink-0 hx:ltr:rotate-180\"") -}}
{{- $linkTitle -}} {{- $linkTitle -}}
</a> </a>
{{- end -}} {{- end -}}
@ -43,10 +43,10 @@
<a <a
href="{{ $next.RelPermalink }}" href="{{ $next.RelPermalink }}"
title="{{ $linkTitle }}" title="{{ $linkTitle }}"
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" 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] hx:hover:text-primary-600 hx:dark:text-gray-300 hx:md:text-lg hx:ltr:ml-auto hx:ltr:pl-4 hx:ltr:text-right hx:rtl:mr-auto hx:rtl:pr-4 hx:rtl:text-left"
> >
{{- $linkTitle -}} {{- $linkTitle -}}
{{- partial "utils/icon.html" (dict "name" "chevron-right" "attributes" "class=\"hx-inline hx-h-5 hx-shrink-0 rtl:-hx-rotate-180\"") -}} {{- partial "utils/icon.html" (dict "name" "chevron-right" "attributes" "class=\"hx:inline hx:h-5 hx:shrink-0 hx:rtl:-rotate-180\"") -}}
</a> </a>
{{- end -}} {{- end -}}
</div> </div>

24
layouts/partials/footer.html
View File

@ -6,49 +6,49 @@
{{- $copyright := (T "copyright") | default "© 2024 Hextra." -}} {{- $copyright := (T "copyright") | default "© 2024 Hextra." -}}
{{- $poweredBy := (T "poweredBy") | default "Powered by Hextra" -}} {{- $poweredBy := (T "poweredBy") | default "Powered by Hextra" -}}
{{- $footerWidth := "hx-max-w-screen-xl" -}} {{- $footerWidth := "hx:max-w-screen-xl" -}}
{{- with .Site.Params.footer.width -}} {{- with .Site.Params.footer.width -}}
{{ if eq . "wide" -}} {{ if eq . "wide" -}}
{{ $footerWidth = "hx-max-w-[90rem]" -}} {{ $footerWidth = "hx:max-w-[90rem]" -}}
{{ else if eq . "full" -}} {{ else if eq . "full" -}}
{{ $footerWidth = "max-w-full" -}} {{ $footerWidth = "max-w-full" -}}
{{ end -}} {{ end -}}
{{- end -}} {{- end -}}
<footer class="hextra-footer hx-bg-gray-100 hx-pb-[env(safe-area-inset-bottom)] dark:hx-bg-neutral-900 print:hx-bg-transparent"> <footer class="hextra-footer hx:bg-gray-100 hx:pb-[env(safe-area-inset-bottom)] hx:dark:bg-neutral-900 hx:print:bg-transparent">
{{- if $footerSwitchesVisible -}} {{- if $footerSwitchesVisible -}}
<div class="hx-mx-auto hx-flex hx-gap-2 hx-py-2 hx-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" .) -}} {{- partial "language-switch.html" (dict "context" .) -}}
{{- with $displayThemeToggle }}{{ partial "theme-toggle.html" }}{{ end -}} {{- with $displayThemeToggle }}{{ partial "theme-toggle.html" }}{{ end -}}
</div> </div>
{{- if or hugo.IsMultilingual $displayThemeToggle -}} {{- if or hugo.IsMultilingual $displayThemeToggle -}}
<hr class="dark:hx-border-neutral-800" /> <hr class="hx:border-gray-200 hx:dark:border-neutral-800" />
{{- end -}} {{- end -}}
{{- end -}} {{- end -}}
<div <div
class="hextra-custom-footer {{ $footerWidth }} 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" class="hextra-custom-footer {{ $footerWidth }} hx:pl-[max(env(safe-area-inset-left),1.5rem)] hx:pr-[max(env(safe-area-inset-right),1.5rem)] hx:text-gray-600 hx:dark:text-gray-400"
> >
{{- partial "custom/footer.html" (dict "context" . "switchesVisible" $footerSwitchesVisible "copyrightVisible" $copyrightSectionVisible) -}} {{- partial "custom/footer.html" (dict "context" . "switchesVisible" $footerSwitchesVisible "copyrightVisible" $copyrightSectionVisible) -}}
</div> </div>
{{- if $copyrightSectionVisible -}} {{- if $copyrightSectionVisible -}}
<div <div
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" 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 hx:dark:text-gray-400 hx:md:justify-start"
> >
<div class="hx-flex hx-w-full hx-flex-col hx-items-center sm:hx-items-start"> <div class="hx:flex hx:w-full hx:flex-col hx:items-center hx:sm:items-start">
{{- if (.Site.Params.footer.displayPoweredBy | default true) }}<div class="hx-font-semibold">{{ template "theme-credit" $poweredBy }}</div>{{- end -}} {{- 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 -}} {{- if .Site.Params.footer.displayCopyright }}<div class="hx:mt-6 hx:text-xs">{{ $copyright | markdownify }}</div>{{- end -}}
</div> </div>
</div> </div>
{{- end -}} {{- end -}}
</footer> </footer>
{{- define "theme-credit" -}} {{- define "theme-credit" -}}
<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"> <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> <span>
{{- . | markdownify -}} {{- . | markdownify -}}
{{- if strings.Contains . "Hextra" -}} {{- if strings.Contains . "Hextra" -}}
{{- partial "utils/icon.html" (dict "name" "hextra" "attributes" `height=1em class="hx-inline-block ltr:hx-ml-1 rtl:hx-mr-1 hx-align-[-2.5px]"`) -}} {{- partial "utils/icon.html" (dict "name" "hextra" "attributes" `height=1em class="hx:inline-block hx:ltr:ml-1 hx:rtl:mr-1 hx:align-[-2.5px]"`) -}}
{{- end -}} {{- end -}}
</span> </span>
</a> </a>

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

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

30
layouts/partials/navbar.html
View File

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

10
layouts/partials/search.html
View File

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

12
layouts/partials/shortcodes/badge.html
View File

@ -4,15 +4,15 @@
{{- $border := .border | default false -}} {{- $border := .border | default false -}}
{{- $icon := .icon | default "" -}} {{- $icon := .icon | default "" -}}
{{- $defaultClass := "hx-text-gray-600 hx-bg-gray-100 dark:hx-bg-neutral-800 dark:hx-text-neutral-200 hx-border-gray-200 dark:hx-border-neutral-700" -}} {{- $defaultClass := "hx:text-gray-600 hx:bg-gray-100 hx:dark:bg-neutral-800 hx:dark:text-neutral-200 hx:border-gray-200 hx:dark:border-neutral-700" -}}
{{- $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" -}} {{- $warningClass := "hx:border-yellow-100 hx:bg-yellow-50 hx:text-yellow-900 hx:dark:border-yellow-200/30 hx:dark:bg-yellow-700/30 hx:dark:text-yellow-200" -}}
{{- $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" -}} {{- $infoClass := "hx:border-blue-200 hx:bg-blue-100 hx:text-blue-900 hx:dark:border-blue-200/30 hx:dark:bg-blue-900/30 hx:dark:text-blue-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" -}} {{- $errorClass := "hx:border-red-200 hx:bg-red-100 hx:text-red-900 hx:dark:border-red-200/30 hx:dark:bg-red-900/30 hx:dark:text-red-200" -}}
{{- $borderClass := cond (eq $border true) "hx-border" "" -}} {{- $borderClass := cond (eq $border true) "hx:border" "" -}}
{{- $badgeClass := cond (eq $type "info") $infoClass (cond (eq $type "warning") $warningClass (cond (eq $type "error") $errorClass $defaultClass)) -}} {{- $badgeClass := cond (eq $type "info") $infoClass (cond (eq $type "warning") $warningClass (cond (eq $type "error") $errorClass $defaultClass)) -}}
<div class="hextra-badge {{ $class }}"> <div class="hextra-badge {{ $class }}">
<div class="hx-inline-flex hx-gap-1 hx-items-center hx-rounded-full hx-px-2.5 hx-leading-6 hx-text-[.65rem] {{ $borderClass }} {{ $badgeClass }}"> <div class="hx:inline-flex hx:gap-1 hx:items-center hx:rounded-full hx:px-2.5 hx:leading-6 hx:text-[.65rem] {{ $borderClass }} {{ $badgeClass }}">
{{- with $icon -}}{{- partial "utils/icon" (dict "name" . "attributes" "height=12") -}}{{- end -}} {{- with $icon -}}{{- partial "utils/icon" (dict "name" . "attributes" "height=12") -}}{{- end -}}
{{- $content -}} {{- $content -}}
</div> </div>

14
layouts/partials/shortcodes/callout.html
View File

@ -2,26 +2,26 @@
{{- $emoji := .emoji -}} {{- $emoji := .emoji -}}
{{- $icon := .icon -}} {{- $icon := .icon -}}
{{- $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" -}} {{- $defaultClass := "hx:border-orange-100 hx:bg-orange-50 hx:text-orange-800 hx:dark:border-orange-400/30 hx:dark:bg-orange-400/20 hx:dark:text-orange-300" -}}
{{- $class := .class | default $defaultClass -}} {{- $class := .class | default $defaultClass -}}
<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="hx:overflow-x-auto hx:mt-6 hx:flex hx:rounded-lg hx:border hx:py-2 hx:ltr:pr-4 hx:rtl:pl-4 hx:contrast-more:border-current hx:contrast-more:dark:border-current {{ $class }}">
<div class="ltr:hx-pl-3 ltr:hx-pr-2 rtl:hx-pr-3 rtl:hx-pl-2"> <div class="hx:ltr:pl-3 hx:ltr:pr-2 hx:rtl:pr-3 hx:rtl:pl-2">
{{- with $emoji -}} {{- with $emoji -}}
<div class="hx-select-none hx-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> </div>
{{- else -}} {{- else -}}
{{- with $icon -}} {{- with $icon -}}
{{ partial "utils/icon.html" (dict "name" . "attributes" `height=1.2em class="hx-inline-block hx-align-middle"`) -}} {{ partial "utils/icon.html" (dict "name" . "attributes" `height=1.2em class="hx:inline-block hx:align-middle"`) -}}
{{- end -}} {{- end -}}
{{- end -}} {{- end -}}
</div> </div>
<div class="hx-w-full hx-min-w-0 hx-leading-7"> <div class="hx:w-full hx:min-w-0 hx:leading-7">
<div class="hx-mt-6 hx-leading-7 first:hx-mt-0"> <div class="hx:mt-6 hx:leading-7 hx:first:mt-0">
{{- $content -}} {{- $content -}}
</div> </div>
</div> </div>

14
layouts/partials/shortcodes/card.html
View File

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

2
layouts/partials/shortcodes/cards.html
View File

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

47
layouts/partials/sidebar.html
View File

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

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

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

22
layouts/partials/toc.html
View File

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

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

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

8
layouts/shortcodes/callout.html
View File

@ -9,10 +9,10 @@
{{- $icon := .Get "icon" -}} {{- $icon := .Get "icon" -}}
{{- $content := .InnerDeindent | markdownify -}} {{- $content := .InnerDeindent | markdownify -}}
{{- $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" -}} {{- $defaultClass := "hx:border-orange-100 hx:bg-orange-50 hx:text-orange-800 hx:dark:border-orange-400/30 hx:dark:bg-orange-400/20 hx:dark: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" -}} {{- $infoClass := "hx:border-blue-200 hx:bg-blue-100 hx:text-blue-900 hx:dark:border-blue-200/30 hx:dark:bg-blue-900/30 hx:dark: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" -}} {{- $warningClass := "hx:border-yellow-100 hx:bg-yellow-50 hx:text-yellow-900 hx:dark:border-yellow-200/30 hx:dark:bg-yellow-700/30 hx:dark: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" -}} {{- $errorClass := "hx:border-red-200 hx:bg-red-100 hx:text-red-900 hx:dark:border-red-200/30 hx:dark:bg-red-900/30 hx:dark:text-red-200" -}}
{{- $class := cond (eq $type "info") $infoClass (cond (eq $type "warning") $warningClass (cond (eq $type "error") $errorClass $defaultClass)) -}} {{- $class := cond (eq $type "info") $infoClass (cond (eq $type "warning") $warningClass (cond (eq $type "error") $errorClass $defaultClass)) -}}

8
layouts/shortcodes/details.html
View File

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

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

@ -1,5 +1,5 @@
<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="hextra-filetree hx:mt-6 hx:select-none hx:text-sm hx:text-gray-800 hx:dark: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"> <div class="hx:inline-block hx:rounded-lg hx:px-4 hx:py-2 hx:border hx:border-gray-200 hx:dark:border-neutral-800">
{{- .InnerDeindent -}} {{- .InnerDeindent -}}
</div> </div>
</div> </div>

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

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

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

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

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

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

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

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

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

@ -7,7 +7,7 @@
<a <a
{{ if $link }}href="{{ $href }}"{{ end }} {{ if $link }}href="{{ $href }}"{{ end }}
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" 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 hx:dark:text-gray-400 hx:bg-gray-100 hx:dark:bg-neutral-800 hx:border-gray-200 hx:dark:border-neutral-800 hx:border hx:hover:border-gray-400 hx:dark:hover:text-gray-50 hx:dark:hover:border-gray-600 hx:transition-all hx:ease-in hx:duration-200"
{{ with $style }}style="{{ . | safeCSS }}"{{ end }} {{ with $style }}style="{{ . | safeCSS }}"{{ end }}
{{ if $external }}target="_blank" rel="noreferrer"{{ end -}} {{ if $external }}target="_blank" rel="noreferrer"{{ end -}}
> >

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

@ -7,7 +7,7 @@
<a <a
href="{{ $href }}" href="{{ $href }}"
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" 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 hx:hover:bg-primary-700 hx:focus:outline-hidden hx:focus:ring-4 hx:focus:ring-primary-300 hx:dark:bg-primary-600 hx:dark:hover:bg-primary-700 hx:dark:focus:ring-primary-800 hx:transition-all hx:ease-in hx:duration-200"
{{ with $style }}style="{{ . | safeCSS }}"{{ end }} {{ with $style }}style="{{ . | safeCSS }}"{{ end }}
{{ if $external }}target="_blank" rel="noreferrer"{{ end -}} {{ if $external }}target="_blank" rel="noreferrer"{{ end -}}
> >

8
layouts/shortcodes/hextra/hero-container.html
View File

@ -18,18 +18,18 @@
{{- end -}} {{- end -}}
<div <div
class="{{ $class }} hextra-feature-grid hx-grid sm:max-lg:hx-grid-cols-2 max-sm:hx-grid-cols-1 hx-gap-4 hx-w-full not-prose" class="{{ $class }} hextra-feature-grid hx:grid hx:sm:max-lg:grid-cols-2 hx:max-sm:grid-cols-1 hx:gap-4 hx:w-full not-prose"
{{ with $css }}style="{{ . | safeCSS }}"{{ end }} {{ with $css }}style="{{ . | safeCSS }}"{{ end }}
> >
<div class="hx-w-full"> <div class="hx:w-full">
{{ .Inner }} {{ .Inner }}
</div> </div>
{{- with $image }} {{- with $image }}
<div class="hx-mx-auto"> <div class="hx:mx-auto">
<a <a
{{ with $imageLink }}href="{{ $href }}" {{ with $imageLinkExternal }} target="_blank" rel="noreferrer"{{ end }}{{ end }} {{ with $imageLink }}href="{{ $href }}" {{ with $imageLinkExternal }} target="_blank" rel="noreferrer"{{ end }}{{ end }}
{{ with $imageStyle }}style="{{ . | safeCSS }}"{{ end }} {{ with $imageStyle }}style="{{ . | safeCSS }}"{{ end }}
class="{{ $imageClass }} {{ if $imageCard }}hextra-feature-card not-prose hx-block hx-relative hx-p-6 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{{ end }}" class="{{ $imageClass }} {{ if $imageCard }}hextra-feature-card not-prose hx:block hx:relative hx:p-6 hx:overflow-hidden hx:rounded-3xl hx:border hx:border-gray-200 hx:hover:border-gray-300 hx:dark:border-neutral-800 hx:dark:hover:border-neutral-700 hx:before:pointer-events-none hx:before:absolute hx:before:inset-0 hx:before:bg-glass-gradient{{ end }}"
> >
<img src="{{ $image }}" width="{{ $imageWidth }}" height="{{ $imageHeight }}" {{ with $imageTitle }}alt="{{ $imageTitle }}"{{ end }}/> <img src="{{ $image }}" width="{{ $imageWidth }}" height="{{ $imageHeight }}" {{ with $imageTitle }}alt="{{ $imageTitle }}"{{ end }}/>
</a> </a>

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

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

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

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

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

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

2
layouts/shortcodes/icon.html
View File

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

2
layouts/shortcodes/steps.html
View File

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

2
layouts/shortcodes/tab.html
View File

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

6
layouts/shortcodes/tabs.html
View File

@ -5,11 +5,11 @@
{{ errorf "no items provided" }} {{ errorf "no items provided" }}
{{- end -}} {{- end -}}
<div class="hextra-scrollbar hx-overflow-x-auto hx-overflow-y-hidden hx-overscroll-x-contain"> <div class="hextra-scrollbar hx:overflow-x-auto hx:overflow-y-hidden hx:overscroll-x-contain">
<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"> <div class="hx:mt-4 hx:flex hx:w-max hx:min-w-full hx:border-b hx:border-gray-200 hx:pb-px hx:dark:border-neutral-800">
{{- range $i, $item := $items -}} {{- range $i, $item := $items -}}
<button <button
class="hextra-tabs-toggle data-[state=selected]:hx-border-primary-500 data-[state=selected]:hx-text-primary-600 data-[state=selected]:dark:hx-border-primary-500 data-[state=selected]:dark: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" class="hextra-tabs-toggle hx:cursor-pointer hx:data-[state=selected]:border-primary-500 hx:data-[state=selected]:text-primary-600 hx:data-[state=selected]:dark:border-primary-500 hx:data-[state=selected]:dark: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 hx:hover:border-gray-200 hx:hover:text-black hx:dark:text-gray-200 hx:dark:hover:border-neutral-800 hx:dark:hover:text-white"
role="tab" role="tab"
type="button" type="button"
aria-controls="tabs-panel-{{ $i }}" aria-controls="tabs-panel-{{ $i }}"

1779
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

15
package.json
View File

@ -1,18 +1,15 @@
{ {
"scripts": { "scripts": {
"dev:theme": "hugo server --logLevel=debug --config=hugo.yaml,../dev.toml --environment=theme --source=exampleSite --themesDir=../.. --disableFastRender -D --port 1313", "dev:theme": "hugo server --logLevel=debug --config=hugo.yaml,../dev.toml --environment=theme --source=exampleSite --themesDir=../.. -D --port 1313",
"dev": "hugo server --source=exampleSite --themesDir=../.. --disableFastRender -D --port 1313", "dev": "hugo server --source=exampleSite --themesDir=../.. --disableFastRender -D --port 1313",
"build:css": "npx postcss --config postcss.config.js --env production assets/css/styles.css -o assets/css/compiled/main.css", "build:css": "npx postcss --config postcss.config.mjs --env production assets/css/styles.css -o assets/css/compiled/main.css",
"build": "hugo --gc --minify --themesDir=../.. --source=exampleSite" "build": "hugo --gc --minify --themesDir=../.. --source=exampleSite"
}, },
"devDependencies": { "devDependencies": {
"@tailwindcss/nesting": "^0.0.0-insiders.565cd3e", "@tailwindcss/postcss": "^4.0.17",
"autoprefixer": "^10.4.19", "postcss-cli": "^11.0.1",
"postcss": "^8.4.38", "prettier": "^3.5.3",
"postcss-cli": "^11.0.0",
"postcss-import": "^16.1.0",
"prettier": "^3.2.5",
"prettier-plugin-go-template": "^0.0.15", "prettier-plugin-go-template": "^0.0.15",
"tailwindcss": "^3.4.3" "tailwindcss": "^4.0.17"
} }
} }

12
postcss.config.js
View File

@ -1,12 +0,0 @@
let tailwindConfig = process.env.HUGO_FILE_TAILWIND_CONFIG_JS || './tailwind.config.js';
const tailwind = require('tailwindcss')(tailwindConfig);
const autoprefixer = require('autoprefixer');
module.exports = {
plugins: [
require('postcss-import'),
require('@tailwindcss/nesting'),
tailwind,
autoprefixer
],
};

5
postcss.config.mjs Normal file
View File

@ -0,0 +1,5 @@
export default {
plugins: {
"@tailwindcss/postcss": {},
},
};

90
tailwind.config.js
View File

@ -1,90 +0,0 @@
const colors = require('tailwindcss/colors')
const makePrimaryColor =
l =>
({ opacityValue }) => {
let result = "hsl(var(--primary-hue) var(--primary-saturation) ";
if (l <= 50) {
// Interpolate between lower values
result+= `calc(calc(var(--primary-lightness) / 50) * ${l})`;
}
else {
// Interpolate between higher values
result+= `calc(var(--primary-lightness) + calc(calc(100% - var(--primary-lightness)) / 50) * ${l - 50})`;
}
result += (opacityValue ? ` / ${opacityValue})` : ')');
return result;
}
/** @type {import('tailwindcss').Config} */
module.exports = {
prefix: 'hx-',
content: [
'./**/hugo_stats.json',
],
safelist: [
'max-w-screen-xl',
'max-w-[90rem]',
'max-w-full'
],
theme: {
screens: {
sm: '640px',
md: '768px',
lg: '1024px',
xl: '1280px',
'2xl': '1536px'
},
fontSize: {
xs: '.75rem',
sm: '.875rem',
base: '1rem',
lg: '1.125rem',
xl: '1.25rem',
'2xl': '1.5rem',
'3xl': '1.875rem',
'4xl': '2.25rem',
'5xl': '3rem',
'6xl': '4rem'
},
letterSpacing: {
tight: '-0.015em'
},
colors: {
transparent: 'transparent',
current: 'currentColor',
black: '#000',
white: '#fff',
gray: colors.gray,
slate: colors.slate,
neutral: colors.neutral,
red: colors.red,
orange: colors.orange,
green: colors.green,
indigo: colors.indigo,
blue: colors.blue,
yellow: colors.yellow,
amber: colors.amber,
primary: {
50: makePrimaryColor(97),
100: makePrimaryColor(94),
200: makePrimaryColor(86),
300: makePrimaryColor(77),
400: makePrimaryColor(66),
500: makePrimaryColor(50),
600: makePrimaryColor(45),
700: makePrimaryColor(39),
750: makePrimaryColor(35),
800: makePrimaryColor(32),
900: makePrimaryColor(24)
}
},
extend: {
colors: {
dark: '#111'
}
}
},
darkMode: ['class', 'html[class~="dark"]']
};

2
taskfile.yaml
View File

@ -10,7 +10,7 @@ tasks:
depends: [build] depends: [build]
desc: Compile production CSS using PostCSS to `assets/css/compiled/main.css` desc: Compile production CSS using PostCSS to `assets/css/compiled/main.css`
cmds: cmds:
- npx postcss --config postcss.config.js --env production assets/css/styles.css -o assets/css/compiled/main.css - npm run build:css
dev: dev:
desc: Start development server for Hextra theme desc: Start development server for Hextra theme