mirror of
https://github.com/imfing/hextra.git
synced 2025-07-02 00:27:10 -04:00
Compare commits
19 Commits
v0.9.0
...
c36a1efea4
Author | SHA1 | Date | |
---|---|---|---|
c36a1efea4 | |||
243f4f5173 | |||
655148f329 | |||
b6d14afca3 | |||
e3d29ca81a | |||
1a5a34b00c | |||
13e11d59d2 | |||
aa557df8aa | |||
869731e9de | |||
797b485c9b | |||
71b2b1176f | |||
756769d6d3 | |||
0c2c148f5e | |||
bc778ee243 | |||
aea9235285 | |||
f377609eba | |||
a9b992436e | |||
7f5a7f2f5a | |||
30fddec3fa |
15
.github/FUNDING.yml
vendored
Normal file
15
.github/FUNDING.yml
vendored
Normal file
@ -0,0 +1,15 @@
|
|||||||
|
# These are supported funding model platforms
|
||||||
|
|
||||||
|
github: imfing
|
||||||
|
patreon: # Replace with a single Patreon username
|
||||||
|
open_collective: # Replace with a single Open Collective username
|
||||||
|
ko_fi: # Replace with a single Ko-fi username
|
||||||
|
tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
|
||||||
|
community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry
|
||||||
|
liberapay: # Replace with a single Liberapay username
|
||||||
|
issuehunt: # Replace with a single IssueHunt username
|
||||||
|
lfx_crowdfunding: # Replace with a single LFX Crowdfunding project-name e.g., cloud-foundry
|
||||||
|
polar: # Replace with a single Polar username
|
||||||
|
buy_me_a_coffee: # Replace with a single Buy Me a Coffee username
|
||||||
|
thanks_dev: # Replace with a single thanks.dev username
|
||||||
|
custom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2']
|
2
.github/workflows/pages.yml
vendored
2
.github/workflows/pages.yml
vendored
@ -31,7 +31,7 @@ jobs:
|
|||||||
build:
|
build:
|
||||||
runs-on: ubuntu-latest
|
runs-on: ubuntu-latest
|
||||||
env:
|
env:
|
||||||
HUGO_VERSION: 0.136.5
|
HUGO_VERSION: 0.138.0
|
||||||
steps:
|
steps:
|
||||||
- name: Checkout
|
- name: Checkout
|
||||||
uses: actions/checkout@v4
|
uses: actions/checkout@v4
|
||||||
|
@ -875,6 +875,9 @@ video {
|
|||||||
.hx-gap-4 {
|
.hx-gap-4 {
|
||||||
gap: 1rem;
|
gap: 1rem;
|
||||||
}
|
}
|
||||||
|
.hx-gap-6 {
|
||||||
|
gap: 1.5rem;
|
||||||
|
}
|
||||||
.hx-gap-x-1\.5 {
|
.hx-gap-x-1\.5 {
|
||||||
-moz-column-gap: 0.375rem;
|
-moz-column-gap: 0.375rem;
|
||||||
column-gap: 0.375rem;
|
column-gap: 0.375rem;
|
||||||
@ -1152,6 +1155,9 @@ video {
|
|||||||
.hx-pb-px {
|
.hx-pb-px {
|
||||||
padding-bottom: 1px;
|
padding-bottom: 1px;
|
||||||
}
|
}
|
||||||
|
.hx-pl-\[max\(env\(safe-area-inset-left\)\,0rem\)\] {
|
||||||
|
padding-left: max(env(safe-area-inset-left),0rem);
|
||||||
|
}
|
||||||
.hx-pl-\[max\(env\(safe-area-inset-left\)\,1\.5rem\)\] {
|
.hx-pl-\[max\(env\(safe-area-inset-left\)\,1\.5rem\)\] {
|
||||||
padding-left: max(env(safe-area-inset-left),1.5rem);
|
padding-left: max(env(safe-area-inset-left),1.5rem);
|
||||||
}
|
}
|
||||||
@ -1167,6 +1173,9 @@ video {
|
|||||||
.hx-pr-\[max\(env\(safe-area-inset-left\)\,1\.5rem\)\] {
|
.hx-pr-\[max\(env\(safe-area-inset-left\)\,1\.5rem\)\] {
|
||||||
padding-right: max(env(safe-area-inset-left),1.5rem);
|
padding-right: max(env(safe-area-inset-left),1.5rem);
|
||||||
}
|
}
|
||||||
|
.hx-pr-\[max\(env\(safe-area-inset-right\)\,0rem\)\] {
|
||||||
|
padding-right: max(env(safe-area-inset-right),0rem);
|
||||||
|
}
|
||||||
.hx-pr-\[max\(env\(safe-area-inset-right\)\,1\.5rem\)\] {
|
.hx-pr-\[max\(env\(safe-area-inset-right\)\,1\.5rem\)\] {
|
||||||
padding-right: max(env(safe-area-inset-right),1.5rem);
|
padding-right: max(env(safe-area-inset-right),1.5rem);
|
||||||
}
|
}
|
||||||
|
@ -44,6 +44,129 @@ The primary color of the theme can be customized by setting the `--primary-hue`,
|
|||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
|
### Further Theme Customization
|
||||||
|
|
||||||
|
The theme can be further customized by overriding the default styles via the exposed css classes. An example for customizing the footer element:
|
||||||
|
|
||||||
|
```css {filename="assets/css/custom.css"}
|
||||||
|
.hextra-footer {
|
||||||
|
/* Styles will be applied to the footer element */
|
||||||
|
}
|
||||||
|
|
||||||
|
.hextra-footer:is(html[class~="dark"] *) {
|
||||||
|
/* Styles will be applied to the footer element in dark mode */
|
||||||
|
}
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
The following classes can be used to customize various parts of the theme.
|
||||||
|
|
||||||
|
#### General
|
||||||
|
|
||||||
|
- `hextra-scrollbar` - The scrollbar element
|
||||||
|
- `content` - Page content container
|
||||||
|
|
||||||
|
#### Shortcodes
|
||||||
|
|
||||||
|
##### Badge
|
||||||
|
|
||||||
|
- `hextra-badge` - The badge element
|
||||||
|
|
||||||
|
##### Card
|
||||||
|
|
||||||
|
- `hextra-card` - The card element
|
||||||
|
- `hextra-card-image` - The card image element
|
||||||
|
- `hextra-card-icon` - The card icon element
|
||||||
|
- `hextra-card-subtitle` - The card subtitle element
|
||||||
|
|
||||||
|
##### Cards
|
||||||
|
|
||||||
|
- `hextra-cards` - The cards grid container
|
||||||
|
|
||||||
|
##### Jupyter Notebook
|
||||||
|
|
||||||
|
- `hextra-jupyter-code-cell` - The Jupyter code cell container
|
||||||
|
- `hextra-jupyter-code-cell-outputs-container` - The Jupyter code cell outputs container
|
||||||
|
- `hextra-jupyter-code-cell-outputs` - The Jupyter code cell output div element
|
||||||
|
|
||||||
|
##### PDF
|
||||||
|
|
||||||
|
- `hextra-pdf` - The PDF container element
|
||||||
|
|
||||||
|
##### Steps
|
||||||
|
|
||||||
|
- `steps` - The steps container
|
||||||
|
|
||||||
|
##### Tabs
|
||||||
|
|
||||||
|
- `hextra-tabs-panel` - The tabs panel container
|
||||||
|
- `hextra-tabs-toggle` - The tabs toggle button
|
||||||
|
|
||||||
|
##### Filetree
|
||||||
|
|
||||||
|
- `hextra-filetree` - The filetree container
|
||||||
|
|
||||||
|
##### Folder
|
||||||
|
|
||||||
|
- `hextra-filetree-folder` - The filetree folder container
|
||||||
|
|
||||||
|
#### Navbar
|
||||||
|
|
||||||
|
- `nav-container` - The navbar container
|
||||||
|
- `nav-container-blur` - The navbar container in blur element
|
||||||
|
- `hamburger-menu` - The hamburger menu button
|
||||||
|
|
||||||
|
#### Footer
|
||||||
|
|
||||||
|
- `hextra-footer` - The footer element
|
||||||
|
- `custom-footer` - The custom footer section container
|
||||||
|
|
||||||
|
#### Search
|
||||||
|
|
||||||
|
- `search-wrapper` - The search wrapper container
|
||||||
|
- `search-input` - The search input element
|
||||||
|
- `search-results` - The search results list container
|
||||||
|
|
||||||
|
#### Table of Contents
|
||||||
|
|
||||||
|
- `hextra-toc` - The table of contents container
|
||||||
|
|
||||||
|
#### Sidebar
|
||||||
|
|
||||||
|
- `mobile-menu-overlay` - The overlay element for the mobile menu
|
||||||
|
- `sidebar-container` - The sidebar container
|
||||||
|
- `sidebar-active-item` - The active item in the sidebar
|
||||||
|
|
||||||
|
#### Language Switcher
|
||||||
|
|
||||||
|
- `language-switcher` - The language switcher button
|
||||||
|
- `language-options` - The language options container
|
||||||
|
|
||||||
|
#### Theme Toggle
|
||||||
|
|
||||||
|
- `theme-toggle` - The theme toggle button
|
||||||
|
|
||||||
|
#### Cody Copy Button
|
||||||
|
|
||||||
|
- `hextra-code-copy-btn-container` - The code copy button container
|
||||||
|
- `hextra-code-copy-btn` - The code copy button
|
||||||
|
|
||||||
|
#### Code Block
|
||||||
|
|
||||||
|
- `hextra-code-block` - The code block container
|
||||||
|
|
||||||
|
#### Feature Card
|
||||||
|
|
||||||
|
- `hextra-feature-card` - The feature card link element
|
||||||
|
|
||||||
|
#### Feature Grid
|
||||||
|
|
||||||
|
- `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:
|
||||||
@ -62,6 +185,21 @@ You may add custom scripts to the end of the head for every page by adding the f
|
|||||||
layouts/partials/custom/head-end.html
|
layouts/partials/custom/head-end.html
|
||||||
```
|
```
|
||||||
|
|
||||||
|
## Custom Footer Section
|
||||||
|
|
||||||
|
You can add a custom section the footer between the language/theme buttons and the Copyright/Powered By section by creating a file `layouts/partials/custom/footer.html` in your site.
|
||||||
|
|
||||||
|
```html {filename="layouts/partials/custom/footer.html"}
|
||||||
|
<!-- Your footer element here -->
|
||||||
|
```
|
||||||
|
|
||||||
|
Available variables in the footer section are:
|
||||||
|
|
||||||
|
- `.aboveVisible`: `true` if the Language or Theme button(s) are visible above the footer along with a horizontal separator.
|
||||||
|
- `.belowVisible`: `true` if the Copyright or PoweredBy text are visible below the footer.
|
||||||
|
|
||||||
|
_Note: The custom footer inherits the default footer background color text color and the `width` setting in `hugo.yaml#footer` section._
|
||||||
|
|
||||||
## Custom Layouts
|
## Custom Layouts
|
||||||
|
|
||||||
The layouts of the theme can be overridden by creating a file with the same name in the `layouts` directory of your site.
|
The layouts of the theme can be overridden by creating a file with the same name in the `layouts` directory of your site.
|
||||||
|
@ -54,7 +54,7 @@ jobs:
|
|||||||
build:
|
build:
|
||||||
runs-on: ubuntu-latest
|
runs-on: ubuntu-latest
|
||||||
env:
|
env:
|
||||||
HUGO_VERSION: 0.131.0
|
HUGO_VERSION: 0.138.0
|
||||||
steps:
|
steps:
|
||||||
- name: Checkout
|
- name: Checkout
|
||||||
uses: actions/checkout@v4
|
uses: actions/checkout@v4
|
||||||
@ -146,7 +146,7 @@ For more details, check out:
|
|||||||
3. If you are not using [hextra-starter-template][hextra-starter-template], configure the following manually:
|
3. If you are not using [hextra-starter-template][hextra-starter-template], configure the following manually:
|
||||||
- Configure the Build command to `hugo --gc --minify`
|
- Configure the Build command to `hugo --gc --minify`
|
||||||
- Specify the Publish directory to `public`
|
- Specify the Publish directory to `public`
|
||||||
- Add Environment variable `HUGO_VERSION` and set to `0.132.2`
|
- Add Environment variable `HUGO_VERSION` and set to `0.138.0`, or alternatively, set it in `netlify.toml` file
|
||||||
4. Deploy!
|
4. Deploy!
|
||||||
|
|
||||||
Check [Hugo on Netlify](https://docs.netlify.com/integrations/frameworks/hugo/) for more details.
|
Check [Hugo on Netlify](https://docs.netlify.com/integrations/frameworks/hugo/) for more details.
|
||||||
|
@ -95,7 +95,7 @@ Open source projects powered by Hextra
|
|||||||
>}}
|
>}}
|
||||||
|
|
||||||
{{< card
|
{{< card
|
||||||
link="https://lutheranconfessions.org/"
|
link="https://github.com/remysheppard/lutheran-confessions"
|
||||||
title="LutheranConfessions"
|
title="LutheranConfessions"
|
||||||
image="https://github.com/imfing/hextra/assets/5097752/ad6625e4-88cd-4cad-b102-5399997d0359"
|
image="https://github.com/imfing/hextra/assets/5097752/ad6625e4-88cd-4cad-b102-5399997d0359"
|
||||||
imageStyle="object-fit:cover; aspect-ratio:16/9;"
|
imageStyle="object-fit:cover; aspect-ratio:16/9;"
|
||||||
|
@ -327,6 +327,7 @@
|
|||||||
"hx-gap-1",
|
"hx-gap-1",
|
||||||
"hx-gap-2",
|
"hx-gap-2",
|
||||||
"hx-gap-4",
|
"hx-gap-4",
|
||||||
|
"hx-gap-6",
|
||||||
"hx-gap-x-1.5",
|
"hx-gap-x-1.5",
|
||||||
"hx-gap-y-2",
|
"hx-gap-y-2",
|
||||||
"hx-grid",
|
"hx-grid",
|
||||||
@ -430,12 +431,14 @@
|
|||||||
"hx-pb-8",
|
"hx-pb-8",
|
||||||
"hx-pb-[env(safe-area-inset-bottom)]",
|
"hx-pb-[env(safe-area-inset-bottom)]",
|
||||||
"hx-pb-px",
|
"hx-pb-px",
|
||||||
|
"hx-pl-[max(env(safe-area-inset-left),0rem)]",
|
||||||
"hx-pl-[max(env(safe-area-inset-left),1.5rem)]",
|
"hx-pl-[max(env(safe-area-inset-left),1.5rem)]",
|
||||||
"hx-pointer-events-none",
|
"hx-pointer-events-none",
|
||||||
"hx-pr-2",
|
"hx-pr-2",
|
||||||
"hx-pr-4",
|
"hx-pr-4",
|
||||||
"hx-pr-[calc(env(safe-area-inset-right)-1.5rem)]",
|
"hx-pr-[calc(env(safe-area-inset-right)-1.5rem)]",
|
||||||
"hx-pr-[max(env(safe-area-inset-left),1.5rem)]",
|
"hx-pr-[max(env(safe-area-inset-left),1.5rem)]",
|
||||||
|
"hx-pr-[max(env(safe-area-inset-right),0rem)]",
|
||||||
"hx-pr-[max(env(safe-area-inset-right),1.5rem)]",
|
"hx-pr-[max(env(safe-area-inset-right),1.5rem)]",
|
||||||
"hx-pt-4",
|
"hx-pt-4",
|
||||||
"hx-pt-6",
|
"hx-pt-6",
|
||||||
|
0
layouts/partials/custom/footer.html
Normal file
0
layouts/partials/custom/footer.html
Normal file
@ -1,5 +1,7 @@
|
|||||||
{{- $enableFooterSwitches := .Scratch.Get "enableFooterSwitches" | default false -}}
|
{{- $enableFooterSwitches := .Scratch.Get "enableFooterSwitches" | default false -}}
|
||||||
{{- $displayThemeToggle := site.Params.theme.displayToggle | default true -}}
|
{{- $displayThemeToggle := site.Params.theme.displayToggle | default true -}}
|
||||||
|
{{- $footerSwitchesVisible := and $enableFooterSwitches (or hugo.IsMultilingual $displayThemeToggle) -}}
|
||||||
|
{{- $copyrightSectionVisible := or (.Site.Params.footer.displayPoweredBy | default true) .Site.Params.footer.displayCopyright -}}
|
||||||
|
|
||||||
{{- $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" -}}
|
||||||
@ -15,7 +17,7 @@
|
|||||||
|
|
||||||
|
|
||||||
<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)] dark:hx-bg-neutral-900 print:hx-bg-transparent">
|
||||||
{{- if $enableFooterSwitches -}}
|
{{- 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 -}}
|
||||||
@ -24,14 +26,21 @@
|
|||||||
<hr class="dark:hx-border-neutral-800" />
|
<hr class="dark:hx-border-neutral-800" />
|
||||||
{{- end -}}
|
{{- end -}}
|
||||||
{{- end -}}
|
{{- end -}}
|
||||||
<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="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"
|
||||||
>
|
>
|
||||||
<div class="hx-flex hx-w-full hx-flex-col hx-items-center sm:hx-items-start">
|
{{ partial "custom/footer.html" (dict "context" . "aboveVisible" $footerSwitchesVisible "belowVisible" $copyrightSectionVisible ) }}
|
||||||
{{- if (.Site.Params.footer.displayPoweredBy | default true) }}<div class="hx-font-semibold">{{ template "theme-credit" $poweredBy }}</div>{{ end }}
|
|
||||||
{{- if .Site.Params.footer.displayCopyright }}<div class="hx-mt-6 hx-text-xs">{{ $copyright | markdownify }}</div>{{ end }}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
{{- if $copyrightSectionVisible -}}
|
||||||
|
<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"
|
||||||
|
>
|
||||||
|
<div class="hx-flex hx-w-full hx-flex-col hx-items-center sm:hx-items-start hx-gap-6">
|
||||||
|
{{- 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-text-xs">{{ $copyright | markdownify }}</div>{{ end }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{{- end -}}
|
||||||
</footer>
|
</footer>
|
||||||
|
|
||||||
{{- define "theme-credit" -}}
|
{{- define "theme-credit" -}}
|
||||||
|
14
package-lock.json
generated
14
package-lock.json
generated
@ -523,11 +523,10 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/cross-spawn": {
|
"node_modules/cross-spawn": {
|
||||||
"version": "7.0.3",
|
"version": "7.0.6",
|
||||||
"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
|
"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
|
||||||
"integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
|
"integrity": "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"license": "MIT",
|
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"path-key": "^3.1.0",
|
"path-key": "^3.1.0",
|
||||||
"shebang-command": "^2.0.0",
|
"shebang-command": "^2.0.0",
|
||||||
@ -1031,9 +1030,9 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/nanoid": {
|
"node_modules/nanoid": {
|
||||||
"version": "3.3.7",
|
"version": "3.3.8",
|
||||||
"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
|
"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.8.tgz",
|
||||||
"integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==",
|
"integrity": "sha512-WNLf5Sd8oZxOm+TzppcYk8gVOgP+l58xNy58D0nbUnOxOWRWvlcCV4kUF7ltmI6PsrLl/BgKEyS4mqsGChFN0w==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"funding": [
|
"funding": [
|
||||||
{
|
{
|
||||||
@ -1041,7 +1040,6 @@
|
|||||||
"url": "https://github.com/sponsors/ai"
|
"url": "https://github.com/sponsors/ai"
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"license": "MIT",
|
|
||||||
"bin": {
|
"bin": {
|
||||||
"nanoid": "bin/nanoid.cjs"
|
"nanoid": "bin/nanoid.cjs"
|
||||||
},
|
},
|
||||||
|
Reference in New Issue
Block a user