drowl87/hextra_mirror
1
0
Fork 1
mirror of https://github.com/imfing/hextra.git synced 2025-08-23 10:07:11 -04:00
Code Issues Actions Packages Projects Releases Wiki Activity

refactor(css): add prefix to component classes for consistency (#744)

Browse Source 
* refactor(navbar): add hextra prefix to navbar and hamburger menu classes

- Updated CSS class names from `nav-container` to `hextra-nav-container` and `hamburger-menu` to `hextra-hamburger-menu` for improved clarity and consistency across the project.
- Adjusted related JavaScript and documentation to reflect the new class names.

* refactor(search): update class names for search components

- Renamed CSS classes from `search-wrapper`, `search-input`, `active`, `no-result`, `prefix`, `excerpt`, and `match` to `hextra-search-wrapper`, `hextra-search-input`, `hextra-search-active`, `hextra-search-no-result`, `hextra-search-prefix`, `hextra-search-excerpt`, and `hextra-search-match` for improved clarity and consistency.
- Updated JavaScript selectors to match the new class names, ensuring functionality remains intact.
- Adjusted HTML structure to reflect the new class naming convention.

* refactor(search): update search component class names for consistency

- Renamed existing search-related CSS classes to include the `hextra` prefix for improved clarity and consistency.
- Added optional nested classes for enhanced customization of the search UI, including titles, active states, and result snippets.
- Removed outdated breadcrumb section as no specific class is available.

* refactor(sidebar): rename sidebar classes for consistency

- Updated CSS and JavaScript to replace `sidebar-container` with `hextra-sidebar-container` and `sidebar-active-item` with `hextra-sidebar-active-item` for improved clarity and consistency across the project.
- Adjusted related documentation to reflect the new class names.

* refactor(language & theme): update class names for consistency

- Renamed language switcher and theme toggle classes to include the `hextra` prefix for improved clarity and consistency across the project.
- Updated related JavaScript selectors and documentation to reflect the new class names.

* refactor(css & html): rename classes for consistency and clarity

- Updated various CSS class names to include the `hextra` prefix, enhancing consistency across the project. This includes renaming classes such as `content` to `hextra-content`, `filename` to `hextra-code-filename`, and `steps` to `hextra-steps`.
- Adjusted related HTML and JavaScript to reflect the new class names, ensuring functionality and styling remain intact.
- Updated documentation to include the new class names for better clarity.

* refactor(language): update class names for language options

- Renamed the `language-options` class to `hextra-language-options` for consistency with the existing `hextra` prefix convention.
- Updated the corresponding HTML to reflect the new class name, ensuring clarity and uniformity across the project.

* refactor(css & html): rename classes for consistency and clarity

- Renamed CSS classes to include the `hextra` prefix, such as changing `subheading-anchor` to `hextra-subheading-anchor` and `footnotes` to `hextra-footnotes`, enhancing consistency across the project.
- Updated related HTML and documentation to reflect the new class names, ensuring clarity and uniformity.

* feat(typography): add styling for horizontal lines

- Introduced new styles for horizontal lines to enhance visual separation in content. The styles apply margin and border color adjustments, ensuring consistency with the overall design.

* feat(blog): add draft release announcement for Hextra v0.10.0

- Created a new markdown file for the draft release announcement of Hextra v0.10.0, including upgrade instructions and author details.
- The announcement is currently marked as a draft and may be updated before the official release.

* refactor(css & html): rename `hextra-content` class to `content` for consistency

- Updated the `hextra-content` class to simply `content` across various HTML files and CSS, enhancing clarity and consistency in the codebase.
- Adjusted the `package.json` script for the development server to include the `-F` flag for better functionality.

* refactor(typography & markdown): enhance table styling and markdown syntax

- Updated CSS for tables to improve styling, including adjustments to margins, borders, and text properties for better readability.
- Revised markdown documentation to standardize table formatting and improve clarity, including consistent syntax for headers and lists.
- Enhanced examples in the documentation to reflect the updated styling and ensure accurate representation of output.

* fix(blog): update text color for improved accessibility

- Modified the text color in the blog single layout to enhance readability in dark mode by adding a dark text color class.
- Ensured consistency in styling for better user experience across different themes.

* docs(blog): update draft release announcement for Hextra v0.10.0

- Revised the "What's New" section to include a TODO placeholder for future updates.
- Added a comprehensive migration guide detailing the CSS class prefix changes to enhance consistency and avoid conflicts.
- Updated the announcement to reflect the new class naming conventions for various components.

* chore: rebuild css
This commit is contained in:
Xin
2025-08-13 22:55:38 +08:00
committed by GitHub
parent 953042a0c0
commit 6823cc1fe8
30 changed files with 274 additions and 205 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

File diff suppressed because one or more lines are too long

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

@@ -7,44 +7,44 @@ nav {
@supports ( @supports (
(-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px)) (-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))
) { ) {
.nav-container-blur { .hextra-nav-container-blur {
@apply hx:backdrop-blur-md hx:bg-white/[.85] hx:dark:bg-dark/80!; @apply hx:backdrop-blur-md hx:bg-white/[.85] hx:dark:bg-dark/80!;
} }
} }
/* Hamburger Menu - Flattened Structure */ /* Hamburger Menu - Flattened Structure */
.hamburger-menu svg g { .hextra-hamburger-menu svg g {
@apply hx:origin-center hx:transition-all hx:duration-100 hx:ease-out; @apply hx:origin-center hx:transition-all hx:duration-100 hx:ease-out;
} }
.hamburger-menu svg path { .hextra-hamburger-menu svg path {
@apply hx:opacity-100 hx:transition-all hx:duration-100 hx:ease-out hx:delay-100; @apply hx:opacity-100 hx:transition-all hx:duration-100 hx:ease-out hx:delay-100;
} }
.hamburger-menu svg.open path { .hextra-hamburger-menu svg.open path {
@apply hx:transition-transform hx:duration-100 hx:ease-out hx:delay-0; @apply hx:transition-transform hx:duration-100 hx:ease-out hx:delay-0;
} }
.hamburger-menu svg.open g { .hextra-hamburger-menu svg.open g {
@apply hx:transition-transform hx:duration-100 hx:ease-out hx:delay-100; @apply hx:transition-transform hx:duration-100 hx:ease-out hx:delay-100;
} }
.hamburger-menu svg.open > path { .hextra-hamburger-menu svg.open > path {
@apply hx:opacity-0; @apply hx:opacity-0;
} }
.hamburger-menu svg.open > g:nth-of-type(1) { .hextra-hamburger-menu svg.open > g:nth-of-type(1) {
@apply hx:rotate-45; @apply hx:rotate-45;
} }
.hamburger-menu svg.open > g:nth-of-type(1) path { .hextra-hamburger-menu svg.open > g:nth-of-type(1) path {
@apply hx:translate-y-1; @apply hx:translate-y-1;
} }
.hamburger-menu svg.open > g:nth-of-type(2) { .hextra-hamburger-menu svg.open > g:nth-of-type(2) {
@apply hx:-rotate-45; @apply hx:-rotate-45;
} }
.hamburger-menu svg.open > g:nth-of-type(2) path { .hextra-hamburger-menu svg.open > g:nth-of-type(2) path {
@apply hx:-translate-y-1; @apply hx:-translate-y-1;
} }

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

@@ -1,30 +1,30 @@
.search-wrapper { .hextra-search-wrapper {
li { li {
@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; @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 { .hextra-search-title {
@apply hx:text-base hx:font-semibold hx:leading-5; @apply hx:text-base hx:font-semibold hx:leading-5;
} }
.active { .hextra-search-active {
@apply hx:rounded-md hx:bg-primary-500/10 hx:contrast-more:border-primary-500; @apply hx:rounded-md hx:bg-primary-500/10 hx:contrast-more:border-primary-500;
} }
} }
.no-result { .hextra-search-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 { .hextra-search-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 hx:first:mt-0 hx:dark:border-white/20 hx:dark:text-gray-300 hx:contrast-more: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
hx:contrast-more:text-gray-900 hx:contrast-more:dark:border-gray-50 hx:contrast-more:dark:text-gray-50; hx:contrast-more:text-gray-900 hx:contrast-more:dark:border-gray-50 hx:contrast-more:dark:text-gray-50;
} }
.excerpt { .hextra-search-excerpt {
@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; @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;
@@ -32,7 +32,7 @@
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
} }
.match { .hextra-search-match {
@apply hx:text-primary-600; @apply hx:text-primary-600;
} }
} }

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

@@ -1,5 +1,5 @@
@media (max-width: 48rem) { @media (max-width: 48rem) {
.sidebar-container { .hextra-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 hx:dark:bg-dark; @apply hx:fixed hx:pt-[calc(var(--navbar-height))] hx:top-0 hx:w-full hx:bottom-0 hx:z-[15] hx:overscroll-contain hx:bg-white hx:dark:bg-dark;
transition: transform 0.4s 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;
@@ -8,7 +8,7 @@
} }
} }
.sidebar-container { .hextra-sidebar-container {
li > div { li > div {
@apply hx:h-0; @apply hx:h-0;
} }

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

@@ -1,4 +1,4 @@
.steps { .hextra-steps {
:where(h2, h3, h4, h5, h6):not(.no-step-marker) { :where(h2, h3, h4, h5, h6):not(.no-step-marker) {
counter-increment: step; counter-increment: step;
@apply hx:ltr:before:ml-[-41px] hx:rtl:before:mr-[-44px]; @apply hx:ltr:before:ml-[-41px] hx:rtl:before:mr-[-44px];
@@ -13,7 +13,7 @@
} }
} }
:lang(fa) .steps { :lang(fa) .hextra-steps {
:where(h2, h3, h4, h5, h6):not(.no-step-marker) { :where(h2, h3, h4, h5, h6):not(.no-step-marker) {
&:before { &:before {
content: counter(step, persian); content: counter(step, persian);

4
assets/css/highlight.css
View File

@@ -9,11 +9,11 @@
@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; @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 { .hextra-code-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 hx:dark:bg-primary-300/10 hx:dark:text-gray-200; @apply hx:absolute hx:top-0 hx:z-[1] hx:w-full hx:truncate hx:rounded-t-xl hx:bg-primary-700/5 hx:py-2 hx:px-4 hx:text-xs hx:text-gray-700 hx:dark:bg-primary-300/10 hx:dark:text-gray-200;
} }
.filename + pre:not(.lntable pre) { .hextra-code-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;
} }

60
assets/css/typography.css
View File

@@ -33,16 +33,19 @@
@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; @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 hx:first:mt-0; @apply hx:block hx:overflow-x-auto hx:my-6 hx:p-0 hx:first:mt-0 hx:w-full hx:text-sm hx:leading-5;
tr { thead {
@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; @apply hx:border-b hx:border-gray-200 hx:dark:border-neutral-800;
}
tbody tr {
@apply hx:m-0 hx:border-b hx:border-gray-100 hx:dark:border-neutral-800/50;
} }
th { th {
@apply hx:m-0 hx:border hx:border-gray-300 hx:px-4 hx:py-2 hx:font-semibold hx:dark:border-gray-600; @apply hx:m-0 hx:p-2 hx:font-semibold hx:first:pl-0 hx:last:pr-0;
} }
td { td {
@apply hx:m-0 hx:border hx:border-gray-300 hx:px-4 hx:py-2 hx:dark:border-gray-600; @apply hx:m-0 hx:p-2 hx:first:pl-0 hx:last:pr-0;
} }
} }
:where(ol):not(:where([class~=not-prose],[class~=not-prose] *)) { :where(ol):not(:where([class~=not-prose],[class~=not-prose] *)) {
@@ -86,6 +89,10 @@
@apply hx:my-2 hx:ps-6; @apply hx:my-2 hx:ps-6;
} }
} }
/* Horizontal line */
:where(hr):not(:where([class~=not-prose],[class~=not-prose] *)) {
@apply hx:my-10 hx:first:mt-0 hx:last:mb-0 hx:border-gray-200 hx:dark:border-neutral-800;
}
.footnotes { .footnotes {
@apply hx:mt-12 hx:text-sm; @apply hx:mt-12 hx:text-sm;
@@ -93,28 +100,27 @@
@apply hx:border-gray-200 hx:dark:border-neutral-800; @apply hx:border-gray-200 hx:dark:border-neutral-800;
} }
} }
} .subheading-anchor {
@apply hx:opacity-0 hx:transition-opacity hx:ltr:ml-1 hx:rtl:mr-1;
.subheading-anchor {
@apply hx:opacity-0 hx:transition-opacity hx:ltr:ml-1 hx:rtl:mr-1; span:target + &,
:hover > &,
span:target + &, &:focus {
:hover > &, @apply hx:opacity-100;
&:focus { }
@apply hx:opacity-100;
} span + &,
:hover > & {
span + &, @apply hx:no-underline!;
:hover > & { }
@apply hx:no-underline!;
} @apply hx:after:text-gray-300 hx:dark:after:text-neutral-700;
&:after {
@apply hx:after:text-gray-300 hx:dark:after:text-neutral-700; @apply hx:content-['#'] hx:px-1;
&:after { span:target + & {
@apply hx:content-['#'] hx:px-1; @apply hx:text-gray-400;
span:target + & { @apply hx:dark:text-neutral-500;
@apply hx:text-gray-400; }
@apply hx:dark:text-neutral-500;
} }
} }
} }

4
assets/js/code-copy.js
View File

@@ -27,8 +27,8 @@ document.addEventListener('DOMContentLoaded', function () {
document.querySelectorAll('.hextra-code-copy-btn').forEach(function (button) { document.querySelectorAll('.hextra-code-copy-btn').forEach(function (button) {
// Add copy and success icons // Add copy and success icons
button.querySelector('.copy-icon')?.appendChild(getCopyIcon()); button.querySelector('.hextra-copy-icon')?.appendChild(getCopyIcon());
button.querySelector('.success-icon')?.appendChild(getSuccessIcon()); button.querySelector('.hextra-success-icon')?.appendChild(getSuccessIcon());
// Add click event listener for copy button // Add click event listener for copy button
button.addEventListener('click', function (e) { button.addEventListener('click', function (e) {

32
assets/js/flexsearch.js
View File

@@ -3,8 +3,8 @@
// Change shortcut key to cmd+k on Mac, iPad or iPhone. // Change shortcut key to cmd+k on Mac, iPad or iPhone.
document.addEventListener("DOMContentLoaded", function () { document.addEventListener("DOMContentLoaded", function () {
if (/iPad|iPhone|Macintosh/.test(navigator.userAgent)) { if (/iPad|iPhone|Macintosh/.test(navigator.userAgent)) {
// select the kbd element under the .search-wrapper class // select the kbd element under the .hextra-search-wrapper class
const keys = document.querySelectorAll(".search-wrapper kbd"); const keys = document.querySelectorAll(".hextra-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';
}); });
@@ -22,7 +22,7 @@ document.addEventListener("DOMContentLoaded", function () {
(function () { (function () {
const searchDataURL = '{{ $searchData.RelPermalink }}'; const searchDataURL = '{{ $searchData.RelPermalink }}';
const inputElements = document.querySelectorAll('.search-input'); const inputElements = document.querySelectorAll('.hextra-search-input');
for (const el of inputElements) { for (const el of inputElements) {
el.addEventListener('focus', init); el.addEventListener('focus', init);
el.addEventListener('keyup', search); el.addEventListener('keyup', search);
@@ -30,7 +30,7 @@ document.addEventListener("DOMContentLoaded", function () {
el.addEventListener('input', handleInputChange); el.addEventListener('input', handleInputChange);
} }
const shortcutElements = document.querySelectorAll('.search-wrapper kbd'); const shortcutElements = document.querySelectorAll('.hextra-search-wrapper kbd');
function setShortcutElementsOpacity(opacity) { function setShortcutElementsOpacity(opacity) {
shortcutElements.forEach(el => { shortcutElements.forEach(el => {
@@ -45,12 +45,12 @@ document.addEventListener("DOMContentLoaded", function () {
// Get the search wrapper, input, and results elements. // Get the search wrapper, input, and results elements.
function getActiveSearchElement() { function getActiveSearchElement() {
const inputs = Array.from(document.querySelectorAll('.search-wrapper')).filter(el => el.clientHeight > 0); const inputs = Array.from(document.querySelectorAll('.hextra-search-wrapper')).filter(el => el.clientHeight > 0);
if (inputs.length === 1) { if (inputs.length === 1) {
return { return {
wrapper: inputs[0], wrapper: inputs[0],
inputElement: inputs[0].querySelector('.search-input'), inputElement: inputs[0].querySelector('.hextra-search-input'),
resultsElement: inputs[0].querySelector('.search-results') resultsElement: inputs[0].querySelector('.hextra-search-results')
}; };
} }
return undefined; return undefined;
@@ -103,7 +103,7 @@ document.addEventListener("DOMContentLoaded", function () {
const { resultsElement } = getActiveSearchElement(); const { resultsElement } = getActiveSearchElement();
if (!resultsElement) return { result: undefined, index: -1 }; if (!resultsElement) return { result: undefined, index: -1 };
const result = resultsElement.querySelector('.active'); const result = resultsElement.querySelector('.hextra-search-active');
if (!result) return { result: undefined, index: -1 }; if (!result) return { result: undefined, index: -1 };
const index = parseInt(result.dataset.index, 10); const index = parseInt(result.dataset.index, 10);
@@ -116,10 +116,10 @@ document.addEventListener("DOMContentLoaded", function () {
if (!resultsElement) return; if (!resultsElement) return;
const { result: activeResult } = getActiveResult(); const { result: activeResult } = getActiveResult();
activeResult && activeResult.classList.remove('active'); activeResult && activeResult.classList.remove('hextra-search-active');
const result = resultsElement.querySelector(`[data-index="${index}"]`); const result = resultsElement.querySelector(`[data-index="${index}"]`);
if (result) { if (result) {
result.classList.add('active'); result.classList.add('hextra-search-active');
result.focus(); result.focus();
} }
} }
@@ -384,7 +384,7 @@ document.addEventListener("DOMContentLoaded", function () {
if (!resultsElement) return; if (!resultsElement) return;
if (!results.length) { if (!results.length) {
resultsElement.innerHTML = `<span class="no-result">{{ $noResultsFound | safeHTML }}</span>`; resultsElement.innerHTML = `<span class="hextra-search-no-result">{{ $noResultsFound | safeHTML }}</span>`;
return; return;
} }
@@ -418,14 +418,14 @@ document.addEventListener("DOMContentLoaded", function () {
const result = results[i]; const result = results[i];
if (result.prefix) { if (result.prefix) {
fragment.appendChild(createElement(` fragment.appendChild(createElement(`
<div class="prefix">${result.prefix}</div>`)); <div class="hextra-search-prefix">${result.prefix}</div>`));
} }
let li = createElement(` let li = createElement(`
<li> <li>
<a data-index="${i}" href="${result.route}" class=${i === 0 ? "active" : ""}> <a data-index="${i}" href="${result.route}" class=${i === 0 ? "hextra-search-active" : ""}>
<div class="title">`+ highlightMatches(result.children.title, query) + `</div>` + <div class="hextra-search-title">`+ highlightMatches(result.children.title, query) + `</div>` +
(result.children.content ? (result.children.content ?
`<div class="excerpt">` + highlightMatches(result.children.content, query) + `</div>` : '') + ` `<div class="hextra-search-excerpt">` + highlightMatches(result.children.content, query) + `</div>` : '') + `
</a> </a>
</li>`); </li>`);
li.addEventListener('mousemove', handleMouseMove); li.addEventListener('mousemove', handleMouseMove);

4
assets/js/lang.js
View File

@@ -1,5 +1,5 @@
(function () { (function () {
const languageSwitchers = document.querySelectorAll('.language-switcher'); const languageSwitchers = document.querySelectorAll('.hextra-language-switcher');
languageSwitchers.forEach((switcher) => { languageSwitchers.forEach((switcher) => {
switcher.addEventListener('click', (e) => { switcher.addEventListener('click', (e) => {
e.preventDefault(); e.preventDefault();
@@ -17,7 +17,7 @@
// Dismiss language switcher when clicking outside // Dismiss language switcher when clicking outside
document.addEventListener('click', (e) => { document.addEventListener('click', (e) => {
if (e.target.closest('.language-switcher') === null) { if (e.target.closest('.hextra-language-switcher') === null) {
languageSwitchers.forEach((switcher) => { languageSwitchers.forEach((switcher) => {
switcher.dataset.state = 'closed'; switcher.dataset.state = 'closed';
const optionsElement = switcher.nextElementSibling; const optionsElement = switcher.nextElementSibling;

4
assets/js/menu.js
View File

@@ -1,8 +1,8 @@
// Hamburger menu for mobile navigation // Hamburger menu for mobile navigation
document.addEventListener('DOMContentLoaded', function () { document.addEventListener('DOMContentLoaded', function () {
const menu = document.querySelector('.hamburger-menu'); const menu = document.querySelector('.hextra-hamburger-menu');
const sidebarContainer = document.querySelector('.sidebar-container'); const sidebarContainer = document.querySelector('.hextra-sidebar-container');
function toggleMenu() { function toggleMenu() {
// Toggle the hamburger menu // Toggle the hamburger menu

4
assets/js/sidebar.js
View File

@@ -17,8 +17,8 @@ function enableCollapsibles() {
} }
function scrollToActiveItem() { function scrollToActiveItem() {
const sidebarScrollbar = document.querySelector("aside.sidebar-container > .hextra-scrollbar"); const sidebarScrollbar = document.querySelector("aside.hextra-sidebar-container > .hextra-scrollbar");
const activeItems = document.querySelectorAll(".sidebar-active-item"); const activeItems = document.querySelectorAll(".hextra-sidebar-active-item");
const visibleActiveItem = Array.from(activeItems).find(function (activeItem) { const visibleActiveItem = Array.from(activeItems).find(function (activeItem) {
return activeItem.getBoundingClientRect().height > 0; return activeItem.getBoundingClientRect().height > 0;
}); });

2
assets/js/theme.js
View File

@@ -2,7 +2,7 @@
(function () { (function () {
const defaultTheme = '{{ site.Params.theme.default | default `system`}}' const defaultTheme = '{{ site.Params.theme.default | default `system`}}'
const themeToggleButtons = document.querySelectorAll(".theme-toggle"); const themeToggleButtons = document.querySelectorAll(".hextra-theme-toggle");
// Change the icons of the buttons based on previous settings or system theme // Change the icons of the buttons based on previous settings or system theme
if ( if (

55
exampleSite/content/blog/v0.10.md Normal file
View File

@@ -0,0 +1,55 @@
---
title: "Hextra v0.10.0 is released"
date: 2025-08-14
authors:
- name: imfing
link: https://github.com/imfing
image: https://github.com/imfing.png
tags:
- Release
draft: true
---
<!--more-->
## What's New
TODO
To upgrade to v0.10.0, update your Hugo module:
```bash
hugo mod get -u github.com/imfing/hextra@v0.10.0
```
## Migration Guide
### CSS class prefix
This release includes a comprehensive CSS class naming refactor to improve consistency and avoid potential conflicts. Most Hextra components CSS classes now use the `hextra-` prefix.
| Area | Before | After |
| -------------------- | ---------------------------- | ------------------------------------------------- |
| Search (container) | `.search-wrapper` | `.hextra-search-wrapper` |
| Search (input) | `.search-input` | `.hextra-search-input` |
| Search (results) | `.search-results` | `.hextra-search-results` |
| Search (title) | `.search-wrapper .title` | `.hextra-search-wrapper .hextra-search-title` |
| Search (active item) | `.search-wrapper .active` | `.hextra-search-wrapper .hextra-search-active` |
| Search (no result) | `.search-wrapper .no-result` | `.hextra-search-wrapper .hextra-search-no-result` |
| Search (prefix) | `.search-wrapper .prefix` | `.hextra-search-wrapper .hextra-search-prefix` |
| Search (excerpt) | `.search-wrapper .excerpt` | `.hextra-search-wrapper .hextra-search-excerpt` |
| Search (match) | `.search-wrapper .match` | `.hextra-search-wrapper .hextra-search-match` |
| Navbar blur | `.nav-container-blur` | `.hextra-nav-container-blur` |
| Hamburger menu | `.hamburger-menu` | `.hextra-hamburger-menu` |
| Theme toggle | `.theme-toggle` | `.hextra-theme-toggle` |
| Language switcher | `.language-switcher` | `.hextra-language-switcher` |
| Sidebar container | `.sidebar-container` | `.hextra-sidebar-container` |
| Sidebar active item | `.sidebar-active-item` | `.hextra-sidebar-active-item` |
| Code filename | `.filename` | `.hextra-code-filename` |
| Copy icon | `.copy-icon` | `.hextra-copy-icon` |
| Success icon | `.success-icon` | `.hextra-success-icon` |
| Steps | `.steps` | `.hextra-steps` |
---
_This is a draft release announcement. The actual release date and features may vary._

51
exampleSite/content/docs/advanced/customization.md
View File

@@ -51,13 +51,13 @@ Hextra provides CSS variables to customize the width of pages, navbar, and foote
```css {filename="assets/css/custom.css"} ```css {filename="assets/css/custom.css"}
:root { :root {
/* Page width - also configurable via hugo.yaml params.page.width */ /* Page width - also configurable via hugo.yaml params.page.width */
--hextra-max-page-width: 80rem; /* default: 80rem (normal), 90rem (wide), 100% (full) */ --hextra-max-page-width: 80rem; /* default: 80rem (normal), 90rem (wide), 100% (full) */
/* Navbar width - also configurable via hugo.yaml params.navbar.width */ /* Navbar width - also configurable via hugo.yaml params.navbar.width */
--hextra-max-navbar-width: 90rem; /* independent navbar width */ --hextra-max-navbar-width: 90rem; /* independent navbar width */
/* Footer width - also configurable via hugo.yaml params.footer.width */ /* Footer width - also configurable via hugo.yaml params.footer.width */
--hextra-max-footer-width: 80rem; /* independent footer width */ --hextra-max-footer-width: 80rem; /* independent footer width */
} }
``` ```
@@ -111,7 +111,7 @@ The following classes can be used to customize various parts of the theme.
##### Steps ##### Steps
- `steps` - The steps container - `hextra-steps` - The steps container
##### Tabs ##### Tabs
@@ -128,9 +128,9 @@ The following classes can be used to customize various parts of the theme.
#### Navbar #### Navbar
- `nav-container` - The navbar container - `hextra-nav-container` - The navbar container
- `nav-container-blur` - The navbar container in blur element - `hextra-nav-container-blur` - The navbar container in blur element
- `hamburger-menu` - The hamburger menu button - `hextra-hamburger-menu` - The hamburger menu button
#### Footer #### Footer
@@ -139,9 +139,18 @@ The following classes can be used to customize various parts of the theme.
#### Search #### Search
- `search-wrapper` - The search wrapper container - `hextra-search-wrapper` - The search wrapper container
- `search-input` - The search input element - `hextra-search-input` - The search input element
- `search-results` - The search results list container - `hextra-search-results` - The search results list container
Optional nested classes used within the search UI:
- `hextra-search-title` - The result title element
- `hextra-search-active` - The active result anchor
- `hextra-search-no-result` - The empty state element
- `hextra-search-prefix` - The breadcrumb/prefix label for grouped results
- `hextra-search-excerpt` - The result snippet text
- `hextra-search-match` - The highlighted query span
#### Table of Contents #### Table of Contents
@@ -149,27 +158,29 @@ The following classes can be used to customize various parts of the theme.
#### Sidebar #### Sidebar
- `mobile-menu-overlay` - The overlay element for the mobile menu - `hextra-sidebar-container` - The sidebar container
- `sidebar-container` - The sidebar container - `hextra-sidebar-active-item` - The active item in the sidebar
- `sidebar-active-item` - The active item in the sidebar
#### Language Switcher #### Language Switcher
- `language-switcher` - The language switcher button - `hextra-language-switcher` - The language switcher button
- `language-options` - The language options container - `hextra-language-options` - The language options container
#### Theme Toggle #### Theme Toggle
- `theme-toggle` - The theme toggle button - `hextra-theme-toggle` - The theme toggle button
#### Code Copy Button #### Code Copy Button
- `hextra-code-copy-btn-container` - The code copy button container - `hextra-code-copy-btn-container` - The code copy button container
- `hextra-code-copy-btn` - The code copy button - `hextra-code-copy-btn` - The code copy button
- `hextra-copy-icon` - The copy icon element
- `hextra-success-icon` - The success icon element
#### Code Block #### Code Block
- `hextra-code-block` - The code block container - `hextra-code-block` - The code block container
- `hextra-code-filename` - The filename element for code blocks
#### Feature Card #### Feature Card
@@ -179,10 +190,6 @@ The following classes can be used to customize various parts of the theme.
- `hextra-feature-grid` - The feature grid container - `hextra-feature-grid` - The feature grid container
#### Breadcrumbs
No specific class is available for breadcrumbs.
### Syntax Highlighting ### Syntax Highlighting
List of available syntax highlighting themes are available at [Chroma Styles Gallery](https://xyproto.github.io/splash/docs/all.html). The stylesheet can be generated using the command: List of available syntax highlighting themes are available at [Chroma Styles Gallery](https://xyproto.github.io/splash/docs/all.html). The stylesheet can be generated using the command:

78
exampleSite/content/docs/guide/markdown.md
View File

@@ -11,13 +11,13 @@ Hugo supports [Markdown](https://en.wikipedia.org/wiki/Markdown) syntax for form
### Styling Text ### Styling Text
| Style | Syntax | Example | Output | | Style | Syntax | Example | Output |
| -------- | -------- | ------ | ------ | | :------------ | :----------------------- | :-------------------------------------- | :------------------------------------ |
| Bold | `**bold text**` | `**bold text**` | **bold text** | | Bold | `**bold text**` | `**bold text**` | **bold text** |
| Italic | `*italicized text*` | `*italicized text*` | *italicized text* | | Italic | `*italicized text*` | `*italicized text*` | _italicized text_ |
| Strikethrough | `~~strikethrough text~~` | `~~strikethrough text~~` | ~~strikethrough text~~ | | Strikethrough | `~~strikethrough text~~` | `~~strikethrough text~~` | ~~strikethrough text~~ |
| Subscript | `<sub></sub>` | `This is a <sub>subscript</sub> text` | This is a <sub>subscript</sub> text | | Subscript | `<sub></sub>` | `This is a <sub>subscript</sub> text` | This is a <sub>subscript</sub> text |
| Superscript | `<sup></sup>` | `This is a <sup>superscript</sup> text` | This is a <sup>superscript</sup> text | | Superscript | `<sup></sup>` | `This is a <sup>superscript</sup> text` | This is a <sup>superscript</sup> text |
### Blockquotes ### Blockquotes
@@ -79,28 +79,28 @@ Please make sure you are using the latest version of Hextra and [Hugo v0.146.0](
Tables aren't part of the core Markdown spec, but Hugo supports them out-of-the-box. Tables aren't part of the core Markdown spec, but Hugo supports them out-of-the-box.
| Name | Age | | Name | Age |
|--------|------| | :---- | :-- |
| Bob | 27 | | Bob | 27 |
| Alice | 23 | | Alice | 23 |
```markdown {filename=Markdown} ```markdown {filename=Markdown}
| Name | Age | | Name | Age |
|--------|------| | :---- | :-- |
| Bob | 27 | | Bob | 27 |
| Alice | 23 | | Alice | 23 |
``` ```
#### Inline Markdown within tables #### Inline Markdown within tables
| Italics | Bold | Code | | Italics | Bold | Code |
| -------- | -------- | ------ | | :-------- | :------- | :----- |
| *italics* | **bold** | `code` | | _italics_ | **bold** | `code` |
```markdown {filename=Markdown} ```markdown {filename=Markdown}
| Italics | Bold | Code | | Italics | Bold | Code |
| -------- | -------- | ------ | | :-------- | :------- | :----- |
| *italics* | **bold** | `code` | | _italics_ | **bold** | `code` |
``` ```
### Code Blocks ### Code Blocks
@@ -137,22 +137,22 @@ Tables aren't part of the core Markdown spec, but Hugo supports them out-of-the-
#### Nested list #### Nested list
* Fruit - Fruit
* Apple - Apple
* Orange - Orange
* Banana - Banana
* Dairy - Dairy
* Milk - Milk
* Cheese - Cheese
```markdown {filename=Markdown} ```markdown {filename=Markdown}
* Fruit - Fruit
* Apple - Apple
* Orange - Orange
* Banana - Banana
* Dairy - Dairy
* Milk - Milk
* Cheese - Cheese
``` ```
### Images ### Images
@@ -165,10 +165,10 @@ Tables aren't part of the core Markdown spec, but Hugo supports them out-of-the-
With caption: With caption:
![landscape](https://picsum.photos/800/600 "Unsplash Landscape") ![landscape](https://picsum.photos/800/600 "Lorem Picsum")
```markdown {filename=Markdown} ```markdown {filename=Markdown}
![landscape](https://picsum.photos/800/600 "Unsplash Landscape") ![landscape](https://picsum.photos/800/600 "Lorem Picsum")
``` ```
For more advanced functionality, use Hugo's built-in [Figure shortcode](https://gohugo.io/shortcodes/figure/). For more advanced functionality, use Hugo's built-in [Figure shortcode](https://gohugo.io/shortcodes/figure/).
@@ -192,7 +192,7 @@ For more configuration options, see Hugo documentation on [Configure Markup](htt
## Learning Resources ## Learning Resources
* [Markdown Guide](https://www.markdownguide.org/) - [Markdown Guide](https://www.markdownguide.org/)
* [Markdown Cheatsheet](https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet) - [Markdown Cheatsheet](https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet)
* [Markdown Tutorial](https://www.markdowntutorial.com/) - [Markdown Tutorial](https://www.markdowntutorial.com/)
* [Markdown Reference](https://commonmark.org/help/) - [Markdown Reference](https://commonmark.org/help/)

34
exampleSite/hugo_stats.json
View File

@@ -88,17 +88,14 @@
"col-align-l", "col-align-l",
"col-align-r", "col-align-r",
"content", "content",
"copy-icon",
"dataframe", "dataframe",
"delimcenter", "delimcenter",
"delimsizing", "delimsizing",
"filename",
"fix", "fix",
"footnote-backref", "footnote-backref",
"footnote-ref", "footnote-ref",
"footnotes", "footnotes",
"frac-line", "frac-line",
"hamburger-menu",
"hextra-badge", "hextra-badge",
"hextra-card", "hextra-card",
"hextra-card-icon", "hextra-card-icon",
@@ -109,26 +106,43 @@
"hextra-code-block", "hextra-code-block",
"hextra-code-copy-btn", "hextra-code-copy-btn",
"hextra-code-copy-btn-container", "hextra-code-copy-btn-container",
"hextra-code-filename",
"hextra-copy-icon",
"hextra-custom-footer", "hextra-custom-footer",
"hextra-error-h1",
"hextra-feature-card", "hextra-feature-card",
"hextra-feature-grid", "hextra-feature-grid",
"hextra-filetree", "hextra-filetree",
"hextra-filetree-folder", "hextra-filetree-folder",
"hextra-footer", "hextra-footer",
"hextra-hamburger-menu",
"hextra-icon",
"hextra-jupyter-code-cell", "hextra-jupyter-code-cell",
"hextra-jupyter-code-cell-outputs", "hextra-jupyter-code-cell-outputs",
"hextra-jupyter-code-cell-outputs-container", "hextra-jupyter-code-cell-outputs-container",
"hextra-language-options",
"hextra-language-switcher",
"hextra-max-footer-width", "hextra-max-footer-width",
"hextra-max-navbar-width", "hextra-max-navbar-width",
"hextra-max-page-width", "hextra-max-page-width",
"hextra-nav-container",
"hextra-nav-container-blur",
"hextra-nav-menu-item", "hextra-nav-menu-item",
"hextra-nav-menu-items", "hextra-nav-menu-items",
"hextra-nav-menu-toggle", "hextra-nav-menu-toggle",
"hextra-pdf", "hextra-pdf",
"hextra-scrollbar", "hextra-scrollbar",
"hextra-search-input",
"hextra-search-results",
"hextra-search-wrapper",
"hextra-sidebar-active-item",
"hextra-sidebar-collapsible-button", "hextra-sidebar-collapsible-button",
"hextra-sidebar-container",
"hextra-steps",
"hextra-success-icon",
"hextra-tabs-panel", "hextra-tabs-panel",
"hextra-tabs-toggle", "hextra-tabs-toggle",
"hextra-theme-toggle",
"hextra-toc", "hextra-toc",
"hide-tail", "hide-tail",
"highlight", "highlight",
@@ -653,14 +667,11 @@
"hx:xl:grid-cols-4", "hx:xl:grid-cols-4",
"hx:z-20", "hx:z-20",
"hx:z-[-1]", "hx:z-[-1]",
"icon",
"inner", "inner",
"katex", "katex",
"katex-display", "katex-display",
"katex-html", "katex-html",
"katex-mathml", "katex-mathml",
"language-options",
"language-switcher",
"large-op", "large-op",
"lntable", "lntable",
"lntd", "lntd",
@@ -680,9 +691,6 @@
"msupsub", "msupsub",
"mtable", "mtable",
"mtight", "mtight",
"nav-container",
"nav-container-blur",
"next-error-h1",
"not-prose", "not-prose",
"nulldelimiter", "nulldelimiter",
"op-symbol", "op-symbol",
@@ -691,22 +699,14 @@
"reset-size3", "reset-size3",
"reset-size6", "reset-size6",
"rlap", "rlap",
"search-input",
"search-results",
"search-wrapper",
"sidebar-active-item",
"sidebar-container",
"size1", "size1",
"size3", "size3",
"sizing", "sizing",
"steps",
"strut", "strut",
"subheading-anchor", "subheading-anchor",
"success-icon",
"svg-align", "svg-align",
"text", "text",
"textrm", "textrm",
"theme-toggle",
"vlist", "vlist",
"vlist-r", "vlist-r",
"vlist-s", "vlist-s",

65
layouts/404.html
View File

@@ -1,39 +1,40 @@
<!DOCTYPE html> <!doctype html>
<html lang="en"> <html lang="en">
<body
<body style='font-family:system-ui,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji"; height:100vh; text-align:center; display:flex; flex-direction:column; align-items:center; justify-content:center'
style='font-family:system-ui,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji"; height:100vh; text-align:center; display:flex; flex-direction:column; align-items:center; justify-content:center'> >
<div> <div>
<style> <style>
body { body {
color: #000; color: #000;
background: #fff; background: #fff;
margin: 0; margin: 0;
} }
.next-error-h1 { .hextra-error-h1 {
border-right: 1px solid rgba(0, 0, 0, 0.3); border-right: 1px solid rgba(0, 0, 0, 0.3);
} }
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
body { body {
color: #fff; color: #fff;
background: #000; background: #000;
} }
.next-error-h1 { .hextra-error-h1 {
border-right: 1px solid rgba(255, 255, 255, 0.3); border-right: 1px solid rgba(255, 255, 255, 0.3);
} }
} }
</style> </style>
<h1 class="next-error-h1" <h1
style='display: inline-block; margin: 0 20px 0 0; padding-right: 23px; font-size: 24px; font-weight: 500; vertical-align: top; line-height: 49px; font-feature-settings: "rlig" 1,"calt" 1,"ss01" 1,"ss06" 1 !important;'> class="hextra-error-h1"
404</h1> style='display: inline-block; margin: 0 20px 0 0; padding-right: 23px; font-size: 24px; font-weight: 500; vertical-align: top; line-height: 49px; font-feature-settings: "rlig" 1,"calt" 1,"ss01" 1,"ss06" 1 !important;'
<div style="display: inline-block; text-align: left"> >
<h2 style="font-size: 14px; font-weight: 400; line-height: 49px; margin: 0">This page could not be found. 404
</h2> </h1>
</div> <div style="display: inline-block; text-align: left">
<h2 style="font-size: 14px; font-weight: 400; line-height: 49px; margin: 0">This page could not be found.</h2>
</div>
</div> </div>
</body> </body>
</html> </html>

4
layouts/_partials/components/codeblock-copy-button.html
View File

@@ -9,7 +9,7 @@
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" 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 hx:group-[.copied]/copybtn:hidden hx:pointer-events-none hx:h-4 hx:w-4"></div> <div class="hextra-copy-icon hx:group-[.copied]/copybtn:hidden 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> <div class="hextra-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

@@ -5,7 +5,7 @@
{{ $options := .options | default (dict) }} {{ $options := .options | default (dict) }}
{{- if $filename -}} {{- if $filename -}}
<div class="filename not-prose" dir="auto"> <div class="hextra-code-filename not-prose" dir="auto">
{{- if $base_url -}} {{- if $base_url -}}
{{- $base_url = strings.TrimSuffix "/" $base_url -}} {{- $base_url = strings.TrimSuffix "/" $base_url -}}

2
layouts/_partials/components/giscus.html
View File

@@ -61,7 +61,7 @@
document.getElementById('giscus').appendChild(giscusScript); document.getElementById('giscus').appendChild(giscusScript);
// Update giscus theme when theme switcher is clicked // Update giscus theme when theme switcher is clicked
const toggles = document.querySelectorAll(".theme-toggle"); const toggles = document.querySelectorAll(".hextra-theme-toggle");
if (toggles) { if (toggles) {
toggles.forEach(toggle => toggle.addEventListener('click', setGiscusTheme)); toggles.forEach(toggle => toggle.addEventListener('click', setGiscusTheme));
} }

4
layouts/_partials/language-switch.html
View File

@@ -10,7 +10,7 @@
<button <button
title="{{ $changeLanguage }}" title="{{ $changeLanguage }}"
data-state="closed" data-state="closed"
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" class="hextra-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 }}"
> >
@@ -20,7 +20,7 @@
</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 hx:dark:ring-white/20 hx:dark:bg-neutral-800" class="hextra-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 }}

6
layouts/_partials/navbar.html
View File

@@ -8,9 +8,9 @@
{{- end -}} {{- end -}}
<div class="nav-container hx:sticky hx:top-0 hx:z-20 hx:w-full hx:bg-transparent hx:print:hidden"> <div class="hextra-nav-container hx:sticky hx:top-0 hx:z-20 hx:w-full hx:bg-transparent hx:print:hidden">
<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]" class="hextra-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> ></div>
<nav class="hextra-max-navbar-width hx:mx-auto hx:flex hx:items-center hx:justify-end hx:gap-2 hx:h-16 hx:px-6"> <nav class="hextra-max-navbar-width hx:mx-auto hx:flex hx:items-center hx:justify-end hx:gap-2 hx:h-16 hx:px-6">
@@ -93,7 +93,7 @@
{{- end -}} {{- end -}}
<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"> <button type="button" aria-label="Menu" class="hextra-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>

6
layouts/_partials/search.html
View File

@@ -1,11 +1,11 @@
{{- $placeholder := (T "searchPlaceholder") | default "Search..." -}} {{- $placeholder := (T "searchPlaceholder") | default "Search..." -}}
<div class="search-wrapper hx:relative hx:md:w-64"> <div class="hextra-search-wrapper hx:relative hx:md:w-64">
<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"> <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 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" class="hextra-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"
@@ -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 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))]" class="hextra-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>

4
layouts/_partials/sidebar.html
View File

@@ -15,7 +15,7 @@
{{- end -}} {{- end -}}
<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="hextra-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 }}">
<!-- Search bar on small screen --> <!-- Search bar on small screen -->
<div class="hx:px-4 hx:pt-4 hx:md:hidden"> <div class="hx:px-4 hx:pt-4 hx:md:hidden">
{{ partial "search.html" }} {{ partial "search.html" }}
@@ -160,7 +160,7 @@
<a <a
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] 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 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 hextra-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 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 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 -}}"

2
layouts/_partials/theme-toggle.html
View File

@@ -8,7 +8,7 @@
<button <button
title="{{ $changeTheme }}" title="{{ $changeTheme }}"
data-theme="light" data-theme="light"
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" class="hextra-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 }}"
> >

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 hextra-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 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]"> <div class="hextra-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/blog/single.html
View File

@@ -6,7 +6,7 @@
<main class="hx:w-full hx:min-w-0 hx:max-w-6xl hx:px-6 hx:pt-4 hx:md: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 hx:dark: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:dark:text-gray-400 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 -}}

2
package.json
View File

@@ -1,6 +1,6 @@
{ {
"scripts": { "scripts": {
"dev:theme": "hugo server --logLevel=debug --config=hugo.yaml,../dev.toml --environment=theme --source=exampleSite --themesDir=../.. -D --port 1313", "dev:theme": "hugo server --logLevel=debug --config=hugo.yaml,../dev.toml --environment=theme --source=exampleSite --themesDir=../.. -D -F --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.mjs --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"