diff --git a/.github/FUNDING.yml b/.github/FUNDING.yml new file mode 100644 index 0000000..b1d6700 --- /dev/null +++ b/.github/FUNDING.yml @@ -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'] diff --git a/.github/workflows/pages.yml b/.github/workflows/pages.yml index 4fcf007..8c9d466 100644 --- a/.github/workflows/pages.yml +++ b/.github/workflows/pages.yml @@ -31,7 +31,7 @@ jobs: build: runs-on: ubuntu-latest env: - HUGO_VERSION: 0.136.5 + HUGO_VERSION: 0.138.0 steps: - name: Checkout uses: actions/checkout@v4 diff --git a/.prettierrc b/.prettierrc index e0956e4..28eaa1e 100644 --- a/.prettierrc +++ b/.prettierrc @@ -1,4 +1,7 @@ { + "plugins": [ + "prettier-plugin-go-template" + ], "goTemplateBracketSpacing": true, "htmlWhitespaceSensitivity": "css", "printWidth": 200, diff --git a/assets/css/compiled/main.css b/assets/css/compiled/main.css index dc3c35d..ee13030 100644 --- a/assets/css/compiled/main.css +++ b/assets/css/compiled/main.css @@ -952,6 +952,10 @@ video { .hx-border-t { border-top-width: 1px; } +.hx-border-amber-200 { + --tw-border-opacity: 1; + border-color: rgb(253 230 138 / var(--tw-border-opacity)); +} .hx-border-black\/5 { border-color: rgb(0 0 0 / 0.05); } @@ -967,6 +971,14 @@ video { --tw-border-opacity: 1; border-color: rgb(107 114 128 / var(--tw-border-opacity)); } +.hx-border-green-200 { + --tw-border-opacity: 1; + border-color: rgb(187 247 208 / var(--tw-border-opacity)); +} +.hx-border-indigo-200 { + --tw-border-opacity: 1; + border-color: rgb(199 210 254 / var(--tw-border-opacity)); +} .hx-border-orange-100 { --tw-border-opacity: 1; border-color: rgb(255 237 213 / var(--tw-border-opacity)); @@ -982,6 +994,10 @@ video { --tw-border-opacity: 1; border-color: rgb(254 249 195 / var(--tw-border-opacity)); } +.hx-bg-amber-100 { + --tw-bg-opacity: 1; + background-color: rgb(254 243 199 / var(--tw-bg-opacity)); +} .hx-bg-black\/80 { background-color: rgb(0 0 0 / 0.8); } @@ -996,6 +1012,14 @@ video { --tw-bg-opacity: 1; background-color: rgb(243 244 246 / var(--tw-bg-opacity)); } +.hx-bg-green-100 { + --tw-bg-opacity: 1; + background-color: rgb(220 252 231 / var(--tw-bg-opacity)); +} +.hx-bg-indigo-100 { + --tw-bg-opacity: 1; + background-color: rgb(224 231 255 / var(--tw-bg-opacity)); +} .hx-bg-neutral-50 { --tw-bg-opacity: 1; background-color: rgb(250 250 250 / var(--tw-bg-opacity)); @@ -1161,6 +1185,9 @@ video { .hx-text-center { text-align: center; } +.hx-align-middle { + vertical-align: middle; +} .hx-align-text-bottom { vertical-align: text-bottom; } @@ -1237,6 +1264,10 @@ video { --tw-text-opacity: 1; color: hsl(var(--primary-hue) 100% 50% / var(--tw-text-opacity)); } +.hx-text-amber-900 { + --tw-text-opacity: 1; + color: rgb(120 53 15 / var(--tw-text-opacity)); +} .hx-text-blue-900 { --tw-text-opacity: 1; color: rgb(30 58 138 / var(--tw-text-opacity)); @@ -1268,6 +1299,14 @@ video { --tw-text-opacity: 1; color: rgb(17 24 39 / var(--tw-text-opacity)); } +.hx-text-green-900 { + --tw-text-opacity: 1; + color: rgb(20 83 45 / var(--tw-text-opacity)); +} +.hx-text-indigo-900 { + --tw-text-opacity: 1; + color: rgb(49 46 129 / var(--tw-text-opacity)); +} .hx-text-orange-800 { --tw-text-opacity: 1; color: rgb(154 52 18 / var(--tw-text-opacity)); @@ -2931,6 +2970,9 @@ body:is(html[class~="dark"] *) { .dark\:hx-hidden:is(html[class~="dark"] *) { display: none; } +.dark\:hx-border-amber-200\/30:is(html[class~="dark"] *) { + border-color: rgb(253 230 138 / 0.3); +} .dark\:hx-border-blue-200\/30:is(html[class~="dark"] *) { border-color: rgb(191 219 254 / 0.3); } @@ -2941,6 +2983,12 @@ body:is(html[class~="dark"] *) { --tw-border-opacity: 1; border-color: rgb(156 163 175 / var(--tw-border-opacity)); } +.dark\:hx-border-green-200\/30:is(html[class~="dark"] *) { + border-color: rgb(187 247 208 / 0.3); +} +.dark\:hx-border-indigo-200\/30:is(html[class~="dark"] *) { + border-color: rgb(199 210 254 / 0.3); +} .dark\:hx-border-neutral-700:is(html[class~="dark"] *) { --tw-border-opacity: 1; border-color: rgb(64 64 64 / var(--tw-border-opacity)); @@ -2961,6 +3009,9 @@ body:is(html[class~="dark"] *) { .dark\:hx-border-yellow-200\/30:is(html[class~="dark"] *) { border-color: rgb(254 240 138 / 0.3); } +.dark\:hx-bg-amber-900\/30:is(html[class~="dark"] *) { + background-color: rgb(120 53 15 / 0.3); +} .dark\:hx-bg-black\/60:is(html[class~="dark"] *) { background-color: rgb(0 0 0 / 0.6); } @@ -2977,6 +3028,12 @@ body:is(html[class~="dark"] *) { .dark\:hx-bg-gray-50\/10:is(html[class~="dark"] *) { background-color: rgb(249 250 251 / 0.1); } +.dark\:hx-bg-green-900\/30:is(html[class~="dark"] *) { + background-color: rgb(20 83 45 / 0.3); +} +.dark\:hx-bg-indigo-900\/30:is(html[class~="dark"] *) { + background-color: rgb(49 46 129 / 0.3); +} .dark\:hx-bg-neutral-800:is(html[class~="dark"] *) { --tw-bg-opacity: 1; background-color: rgb(38 38 38 / var(--tw-bg-opacity)); @@ -3012,6 +3069,10 @@ body:is(html[class~="dark"] *) { .dark\:hx-to-gray-400:is(html[class~="dark"] *) { --tw-gradient-to: #9ca3af var(--tw-gradient-to-position); } +.dark\:hx-text-amber-200:is(html[class~="dark"] *) { + --tw-text-opacity: 1; + color: rgb(253 230 138 / var(--tw-text-opacity)); +} .dark\:hx-text-blue-200:is(html[class~="dark"] *) { --tw-text-opacity: 1; color: rgb(191 219 254 / var(--tw-text-opacity)); @@ -3036,6 +3097,14 @@ body:is(html[class~="dark"] *) { --tw-text-opacity: 1; color: rgb(249 250 251 / var(--tw-text-opacity)); } +.dark\:hx-text-green-200:is(html[class~="dark"] *) { + --tw-text-opacity: 1; + color: rgb(187 247 208 / var(--tw-text-opacity)); +} +.dark\:hx-text-indigo-200:is(html[class~="dark"] *) { + --tw-text-opacity: 1; + color: rgb(199 210 254 / var(--tw-text-opacity)); +} .dark\:hx-text-neutral-200:is(html[class~="dark"] *) { --tw-text-opacity: 1; color: rgb(229 229 229 / var(--tw-text-opacity)); @@ -3189,6 +3258,14 @@ body:is(html[class~="dark"] *) { --tw-ring-opacity: 1; --tw-ring-color: hsl(var(--primary-hue) var(--primary-saturation) calc(calc(var(--primary-lightness) / 50) * 32) / var(--tw-ring-opacity)); } +.data-\[state\=selected\]\:dark\:hx-border-primary-500:is(html[class~="dark"] *)[data-state="selected"] { + --tw-border-opacity: 1; + border-color: hsl(var(--primary-hue) var(--primary-saturation) calc(calc(var(--primary-lightness) / 50) * 50) / var(--tw-border-opacity)); +} +.data-\[state\=selected\]\:dark\:hx-text-primary-600:is(html[class~="dark"] *)[data-state="selected"] { + --tw-text-opacity: 1; + color: hsl(var(--primary-hue) var(--primary-saturation) calc(calc(var(--primary-lightness) / 50) * 45) / var(--tw-text-opacity)); +} @media (prefers-contrast: more) { .contrast-more\:dark\:hx-border-current:is(html[class~="dark"] *) { diff --git a/data/icons.yaml b/data/icons.yaml index 3138d48..0c57fb8 100644 --- a/data/icons.yaml +++ b/data/icons.yaml @@ -289,3 +289,4 @@ youtube: linkedin: slack: +bluesky: diff --git a/exampleSite/content/docs/advanced/customization.md b/exampleSite/content/docs/advanced/customization.md index 5c37b79..af1e2bf 100644 --- a/exampleSite/content/docs/advanced/customization.md +++ b/exampleSite/content/docs/advanced/customization.md @@ -44,6 +44,128 @@ 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 +- `hextra-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 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,13 +184,28 @@ You may add custom scripts to the end of the head for every page by adding the f layouts/partials/custom/head-end.html ``` +## Custom Extra Section in Footer + +You can add extra section in the footer by creating a file `layouts/partials/custom/footer.html` in your site. + +```html {filename="layouts/partials/custom/footer.html"} + +``` + +The added section will be added before the copyright section in the footer. +You can use [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) and [Hugo template syntax](https://gohugo.io/templates/) to add your own content. + +Hugo variables available in the footer section are: `.switchesVisible` and `.copyrightVisible`. + ## 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. For example, to override the `single.html` layout for docs, create a file `layouts/docs/single.html` in your site. -For further information, refer to the [Hugo Templates](https://gohugo.io/templates/). +For further information, refer to the [Hugo Templates][hugo-template-docs]. ## Further Customization Didn't find what you were looking for? Feel free to [open a discussion](https://github.com/imfing/hextra/discussions) or make a contribution to the theme! + +[hugo-template-docs]: https://gohugo.io/templates/ diff --git a/exampleSite/content/docs/guide/deploy-site.md b/exampleSite/content/docs/guide/deploy-site.md index 57103f6..b7540a4 100644 --- a/exampleSite/content/docs/guide/deploy-site.md +++ b/exampleSite/content/docs/guide/deploy-site.md @@ -54,7 +54,7 @@ jobs: build: runs-on: ubuntu-latest env: - HUGO_VERSION: 0.131.0 + HUGO_VERSION: 0.138.0 steps: - name: Checkout 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: - Configure the Build command to `hugo --gc --minify` - 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! Check [Hugo on Netlify](https://docs.netlify.com/integrations/frameworks/hugo/) for more details. diff --git a/exampleSite/content/docs/guide/markdown.md b/exampleSite/content/docs/guide/markdown.md index 3d6563d..174de82 100644 --- a/exampleSite/content/docs/guide/markdown.md +++ b/exampleSite/content/docs/guide/markdown.md @@ -35,6 +35,46 @@ Blockquote with attribution [^1]: The above quote is excerpted from Rob Pike's [talk](https://www.youtube.com/watch?v=PAAkCSZUG1c) during Gopherfest, November 18, 2015. ``` +### Alerts + +{{< new-feature version="v0.9.0" >}} + +Alerts are a Markdown extension based on the blockquote syntax that you can use to emphasize critical information. +[GitHub-style alerts](https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax#alerts) are supported. +Please make sure you are using the latest version of Hextra and [Hugo v0.134.0](https://github.com/gohugoio/hugo/releases/tag/v0.134.0) or later. + +> [!NOTE] +> Useful information that users should know, even when skimming content. + +> [!TIP] +> Helpful advice for doing things better or more easily. + +> [!IMPORTANT] +> Key information users need to know to achieve their goal. + +> [!WARNING] +> Urgent info that needs immediate user attention to avoid problems. + +> [!CAUTION] +> Advises about risks or negative outcomes of certain actions. + +```markdown {filename=Markdown} +> [!NOTE] +> Useful information that users should know, even when skimming content. + +> [!TIP] +> Helpful advice for doing things better or more easily. + +> [!IMPORTANT] +> Key information users need to know to achieve their goal. + +> [!WARNING] +> Urgent info that needs immediate user attention to avoid problems. + +> [!CAUTION] +> Advises about risks or negative outcomes of certain actions. +``` + ### Tables Tables aren't part of the core Markdown spec, but Hugo supports them out-of-the-box. diff --git a/exampleSite/content/docs/guide/shortcodes/callout.md b/exampleSite/content/docs/guide/shortcodes/callout.md index 3bd3513..7d8653c 100644 --- a/exampleSite/content/docs/guide/shortcodes/callout.md +++ b/exampleSite/content/docs/guide/shortcodes/callout.md @@ -10,6 +10,10 @@ A built-in component to show important information to the reader. +> [!NOTE] +> [GitHub-style alerts](../../markdown#alerts) are supported since [v0.9.0](https://github.com/imfing/hextra/releases/tag/v0.9.0). +> It leverages Markdown syntax to render the callout which ensures better portability and readability of the content. + ## Example {{< callout emoji="👾">}} diff --git a/exampleSite/content/docs/guide/shortcodes/others.md b/exampleSite/content/docs/guide/shortcodes/others.md index 8c96e65..37ce56f 100644 --- a/exampleSite/content/docs/guide/shortcodes/others.md +++ b/exampleSite/content/docs/guide/shortcodes/others.md @@ -34,16 +34,15 @@ Result: {{< badge content="warning" type="warning" >}}   {{< badge content="error" type="error" >}} -With link: +With link and icon: ``` -{{}} +{{}} ``` Result: -{{< badge content="Releases" link="https://github.com/imfing/hextra/releases" >}} - +{{< badge content="Releases" link="https://github.com/imfing/hextra/releases" icon="github" >}} ## YouTube diff --git a/exampleSite/content/docs/guide/syntax-highlighting.md b/exampleSite/content/docs/guide/syntax-highlighting.md index 45cc50c..f129394 100644 --- a/exampleSite/content/docs/guide/syntax-highlighting.md +++ b/exampleSite/content/docs/guide/syntax-highlighting.md @@ -40,6 +40,24 @@ def say_hello(): print("Hello!") ``` +### Link to File + +{{< new-feature version="v0.9.2" >}} + +You can use the `base_url` attribute to provide a base URL that will be combined with the file name to generate a link. + +The file name can include a relative path if it specifies the file's location within the base path. + +````markdown {filename="Markdown"} +```go {base_url="https://github.com/imfing/hextra/blob/main/",filename="exampleSite/hugo.work"} +go 1.20 +``` +```` + +```go {base_url="https://github.com/imfing/hextra/blob/main/",filename="exampleSite/hugo.work"} +go 1.20 +``` + ### Line Numbers To set line numbers, set attribute `linenos` to `table` and optionally set `linenostart` to the starting line number: diff --git a/exampleSite/content/showcase/index.md b/exampleSite/content/showcase/index.md index 3b6025e..dc29a47 100644 --- a/exampleSite/content/showcase/index.md +++ b/exampleSite/content/showcase/index.md @@ -12,6 +12,20 @@ Open source projects powered by Hextra

{{< cards >}} + {{< card + link="https://github.com/modelcontextprotocol/specification" + title="Model Context Protocol Specification" + image="https://github.com/user-attachments/assets/1bb4f952-b8fc-43b5-9cbd-cd7213c2ba90" + imageStyle="object-fit:cover; aspect-ratio:16/9;" + >}} + + {{< card + link="https://github.com/jonaspleyer/cellular_raza" + title="cellular_raza" + image="https://github.com/user-attachments/assets/f24c6455-b70a-419b-b025-e3d60101b673" + imageStyle="object-fit:cover; aspect-ratio:16/9;" + >}} + {{< card link="https://github.com/mightymoud/sidekick" title="Sidekick" @@ -77,11 +91,11 @@ Open source projects powered by Hextra link="https://hoa.moe/" title="HITSZ OpenAuto" image="https://raw.githubusercontent.com/HITSZ-OpenAuto/hoa.moe/main/static/images/showcase-new.png" - imageStyle="object-fit:cover; aspect-ratio:16/9;" + imageStyle="object-fit:cover; aspect-ratio:16/9;" >}} {{< card - link="https://lutheranconfessions.org/" + link="https://github.com/remysheppard/lutheran-confessions" title="LutheranConfessions" image="https://github.com/imfing/hextra/assets/5097752/ad6625e4-88cd-4cad-b102-5399997d0359" imageStyle="object-fit:cover; aspect-ratio:16/9;" diff --git a/exampleSite/hugo.yaml b/exampleSite/hugo.yaml index d2c03d0..c8c3301 100644 --- a/exampleSite/hugo.yaml +++ b/exampleSite/hugo.yaml @@ -173,3 +173,4 @@ params: # emitMetadata: 0 # inputPosition: top # lang: en + # theme: noborder_dark diff --git a/exampleSite/hugo_stats.json b/exampleSite/hugo_stats.json index 2d498b3..65d58c9 100644 --- a/exampleSite/hugo_stats.json +++ b/exampleSite/hugo_stats.json @@ -141,11 +141,14 @@ "dark:hover:hx-text-gray-50", "dark:hover:hx-text-neutral-50", "dark:hover:hx-text-white", + "dark:hx-bg-amber-900/30", "dark:hx-bg-black/60", "dark:hx-bg-blue-900/30", "dark:hx-bg-dark", "dark:hx-bg-dark/50", "dark:hx-bg-gray-50/10", + "dark:hx-bg-green-900/30", + "dark:hx-bg-indigo-900/30", "dark:hx-bg-neutral-800", "dark:hx-bg-neutral-900", "dark:hx-bg-orange-400/20", @@ -155,9 +158,12 @@ "dark:hx-bg-red-900/30", "dark:hx-bg-yellow-700/30", "dark:hx-block", + "dark:hx-border-amber-200/30", "dark:hx-border-blue-200/30", "dark:hx-border-gray-100/20", "dark:hx-border-gray-400", + "dark:hx-border-green-200/30", + "dark:hx-border-indigo-200/30", "dark:hx-border-neutral-700", "dark:hx-border-neutral-800", "dark:hx-border-orange-400/30", @@ -171,12 +177,15 @@ "dark:hx-shadow-[0_-12px_16px_#111]", "dark:hx-shadow-[0_-1px_0_rgba(255,255,255,.1)_inset]", "dark:hx-shadow-none", + "dark:hx-text-amber-200", "dark:hx-text-blue-200", "dark:hx-text-gray-100", "dark:hx-text-gray-200", "dark:hx-text-gray-300", "dark:hx-text-gray-400", "dark:hx-text-gray-50", + "dark:hx-text-green-200", + "dark:hx-text-indigo-200", "dark:hx-text-neutral-200", "dark:hx-text-neutral-400", "dark:hx-text-orange-300", @@ -188,6 +197,8 @@ "dark:placeholder:hx-text-gray-400", "data-[state=closed]:hx-hidden", "data-[state=open]:hx-hidden", + "data-[state=selected]:dark:hx-border-primary-500", + "data-[state=selected]:dark:hx-text-primary-600", "data-[state=selected]:hx-block", "data-[state=selected]:hx-border-primary-500", "data-[state=selected]:hx-text-primary-600", @@ -219,6 +230,7 @@ "hextra-code-block", "hextra-code-copy-btn", "hextra-code-copy-btn-container", + "hextra-custom-footer", "hextra-feature-card", "hextra-feature-grid", "hextra-filetree", @@ -256,15 +268,19 @@ "hover:hx-text-primary-600", "hx-absolute", "hx-align-[-2.5px]", + "hx-align-middle", "hx-align-text-bottom", "hx-appearance-none", "hx-aspect-auto", + "hx-bg-amber-100", "hx-bg-black/80", "hx-bg-black/[.05]", "hx-bg-blue-100", "hx-bg-clip-text", "hx-bg-gradient-to-r", "hx-bg-gray-100", + "hx-bg-green-100", + "hx-bg-indigo-100", "hx-bg-neutral-50", "hx-bg-orange-50", "hx-bg-primary-100", @@ -277,12 +293,15 @@ "hx-bg-yellow-50", "hx-block", "hx-border", + "hx-border-amber-200", "hx-border-b", "hx-border-b-2", "hx-border-black/5", "hx-border-blue-200", "hx-border-gray-200", "hx-border-gray-500", + "hx-border-green-200", + "hx-border-indigo-200", "hx-border-orange-100", "hx-border-red-200", "hx-border-t", @@ -468,6 +487,7 @@ "hx-text-[.65rem]", "hx-text-[10px]", "hx-text-[color:hsl(var(--primary-hue),100%,50%)]", + "hx-text-amber-900", "hx-text-base", "hx-text-blue-900", "hx-text-center", @@ -479,6 +499,8 @@ "hx-text-gray-700", "hx-text-gray-800", "hx-text-gray-900", + "hx-text-green-900", + "hx-text-indigo-900", "hx-text-left", "hx-text-lg", "hx-text-orange-800", diff --git a/exampleSite/layouts/shortcodes/new-feature.html b/exampleSite/layouts/shortcodes/new-feature.html new file mode 100644 index 0000000..fadf7ec --- /dev/null +++ b/exampleSite/layouts/shortcodes/new-feature.html @@ -0,0 +1,11 @@ +{{- $version := .Get "version" | default "" -}} +{{- $icon := .Get "icon" | default "" -}} +{{- $defaultLink := cond (eq $version "") "https://github.com/imfing/hextra/tree/main" (printf "https://github.com/imfing/hextra/releases/tag/%s" $version) -}} +{{- $link := .Get "link" | default $defaultLink -}} +{{- $content := cond (eq $version "") "New in main branch" (printf "New in %s" $version) -}} + +
+ + {{- partial "shortcodes/badge" (dict "content" $content "border" true "icon" $icon) -}} + +
diff --git a/layouts/_default/_markup/render-blockquote-alert.html b/layouts/_default/_markup/render-blockquote-alert.html new file mode 100644 index 0000000..66518fc --- /dev/null +++ b/layouts/_default/_markup/render-blockquote-alert.html @@ -0,0 +1,9 @@ +{{- if not (in (slice "note" "tip" "important" "warning" "caution") .AlertType) -}} + {{- warnf "Alert type %s is not supported" .AlertType -}} +{{- end -}} + +{{- $content := .Text -}} +{{- $alertType := .AlertType -}} +{{- $alertTitle := .AlertTitle -}} + +{{- partial "components/github-style-alert.html" (dict "content" $content "alertType" $alertType "alertTitle" $alertTitle) -}} diff --git a/layouts/_default/_markup/render-blockquote-regular.html b/layouts/_default/_markup/render-blockquote-regular.html new file mode 100644 index 0000000..652cb51 --- /dev/null +++ b/layouts/_default/_markup/render-blockquote-regular.html @@ -0,0 +1,3 @@ +
+ {{ .Text }} +
diff --git a/layouts/_default/_markup/render-codeblock.html b/layouts/_default/_markup/render-codeblock.html index 31b3c25..fe2df20 100644 --- a/layouts/_default/_markup/render-codeblock.html +++ b/layouts/_default/_markup/render-codeblock.html @@ -1,12 +1,13 @@ {{- $class := .Attributes.class | default "" -}} {{- $filename := .Attributes.filename | default "" -}} +{{- $base_url := .Attributes.base_url | default "" -}} {{- $lang := .Attributes.lang | default .Type -}}
- {{ partial "components/codeblock" (dict "filename" $filename "lang" $lang "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) }} - {{- partialCached "components/codeblock-copy-button" (dict "filename" $filename) $filename }} - {{ end }} + {{- if or (eq site.Params.highlight.copy.enable nil) (site.Params.highlight.copy.enable) -}} + {{- partialCached "components/codeblock-copy-button" (dict "filename" $filename) $filename -}} + {{- end -}}
diff --git a/layouts/partials/components/codeblock.html b/layouts/partials/components/codeblock.html index f96a74a..f5e1d8c 100644 --- a/layouts/partials/components/codeblock.html +++ b/layouts/partials/components/codeblock.html @@ -1,11 +1,27 @@ {{ $filename := .filename | default "" -}} +{{ $base_url := .base_url | default "" -}} {{ $lang := .lang | default "" }} {{ $content := .content }} {{ $options := .options | default (dict) }} {{- if $filename -}} -
{{ $filename }}
+
+ {{- if $base_url -}} + + {{- $base_url = strings.TrimSuffix "/" $base_url -}} + {{- $filename = strings.TrimPrefix "/" $filename -}} + {{- $file_url := urls.JoinPath $base_url $filename -}} + + + {{- $filename -}} + {{- partial "utils/icon" (dict "name" "external-link" "attributes" "height=1em") -}} + + {{- else -}} + {{- $filename -}} + {{- end -}} +
{{- end -}} + {{- if transform.CanHighlight $lang -}}
{{- highlight $content $lang $options -}}
{{- else -}} diff --git a/layouts/partials/components/giscus.html b/layouts/partials/components/giscus.html index 8f7edf0..84148c2 100644 --- a/layouts/partials/components/giscus.html +++ b/layouts/partials/components/giscus.html @@ -8,9 +8,18 @@ * This solution was created with reference to: * https://github.com/giscus/giscus/issues/336#issuecomment-1214366281 */ - function getGiscusTheme() { + function getHugoTheme() { return localStorage.getItem("color-theme"); } + + function getGiscusTheme() { + let giscusTheme = "{{ (string .theme) | default `light` }}"; + if(getHugoTheme() == 'light') { + return giscusTheme.replace('dark', 'light'); + } else { + return giscusTheme.replace('light', 'dark'); + } + } function setGiscusTheme() { function sendMessage(message) { diff --git a/layouts/partials/components/github-style-alert.html b/layouts/partials/components/github-style-alert.html new file mode 100644 index 0000000..9b8e71c --- /dev/null +++ b/layouts/partials/components/github-style-alert.html @@ -0,0 +1,42 @@ +{{- $content := .content -}} +{{- $alertType := .alertType -}} +{{- $alertTitle := .alertTitle -}} + +{{- $icons := dict + "note" "information-circle" + "tip" "light-bulb" + "important" "information-circle" + "warning" "exclamation" + "caution" "exclamation-circle" +-}} + +{{- $icon := index $icons $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" }} + +{{- $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" + "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" + "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" + "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" + "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" +-}} + +{{- $class := index $alertClasses $alertType | default $defaultClass -}} + + +
+

+ {{- with $icon -}} + {{- partial "utils/icon.html" (dict "name" . "attributes" `height=16px class="hx-inline-block hx-align-middle hx-mr-2"`) -}} + {{- end -}} + {{- $title -}} +

+ +
+
+ {{- $content -}} +
+
+
diff --git a/layouts/partials/custom/footer.html b/layouts/partials/custom/footer.html new file mode 100644 index 0000000..e69de29 diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html index 61cbb11..f11b42d 100644 --- a/layouts/partials/footer.html +++ b/layouts/partials/footer.html @@ -1,5 +1,7 @@ {{- $enableFooterSwitches := .Scratch.Get "enableFooterSwitches" | default false -}} {{- $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." -}} {{- $poweredBy := (T "poweredBy") | default "Powered by Hextra" -}} @@ -15,7 +17,7 @@ {{- define "theme-credit" -}} diff --git a/layouts/partials/scripts.html b/layouts/partials/scripts.html index c217402..f6a97a0 100644 --- a/layouts/partials/scripts.html +++ b/layouts/partials/scripts.html @@ -37,9 +37,32 @@ {{- $mermaidJS := resources.Get "lib/mermaid/mermaid.min.js" | fingerprint -}} {{- end -}} diff --git a/layouts/partials/shortcodes/badge.html b/layouts/partials/shortcodes/badge.html index 3e249d7..38d9166 100644 --- a/layouts/partials/shortcodes/badge.html +++ b/layouts/partials/shortcodes/badge.html @@ -2,6 +2,7 @@ {{- $type := .type -}} {{- $class := .class | default "" -}} {{- $border := .border | default false -}} +{{- $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" -}} {{- $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" -}} @@ -11,6 +12,9 @@ {{- $borderClass := cond (eq $border true) "hx-border" "" -}} {{- $badgeClass := cond (eq $type "info") $infoClass (cond (eq $type "warning") $warningClass (cond (eq $type "error") $errorClass $defaultClass)) -}}
-
{{- $content -}}
+
+ {{- with $icon -}}{{- partial "utils/icon" (dict "name" . "attributes" "height=12") -}}{{- end -}} + {{- $content -}} +
{{- /* Strip trailing newline. */ -}} diff --git a/layouts/partials/shortcodes/callout.html b/layouts/partials/shortcodes/callout.html new file mode 100644 index 0000000..417f631 --- /dev/null +++ b/layouts/partials/shortcodes/callout.html @@ -0,0 +1,28 @@ +{{- $content := .content -}} +{{- $emoji := .emoji -}} +{{- $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" -}} + +{{- $class := .class | default $defaultClass -}} + + +
+
+ {{- with $emoji -}} +
+ {{- . -}} +
+ {{- else -}} + {{- with $icon -}} + {{ partial "utils/icon.html" (dict "name" . "attributes" `height=1.2em class="hx-inline-block hx-align-middle"`) -}} + {{- end -}} + {{- end -}} +
+ +
+
+ {{- $content -}} +
+
+
diff --git a/layouts/shortcodes/badge.html b/layouts/shortcodes/badge.html index e09e05d..370083a 100644 --- a/layouts/shortcodes/badge.html +++ b/layouts/shortcodes/badge.html @@ -3,6 +3,7 @@ {{- $type := .Get "type" | default "" -}} {{- $class := .Get "class" | default "" -}} {{- $link := .Get "link" | default "" -}} + {{- $icon := .Get "icon" | default "" -}} {{- if $link -}} @@ -11,6 +12,7 @@ "type" $type "class" $class "border" true + "icon" $icon ) -}} @@ -20,6 +22,7 @@ "type" $type "class" $class "border" true + "icon" $icon ) -}} {{- end -}} diff --git a/layouts/shortcodes/callout.html b/layouts/shortcodes/callout.html index 6b56bcb..9c9361a 100644 --- a/layouts/shortcodes/callout.html +++ b/layouts/shortcodes/callout.html @@ -1,37 +1,19 @@ -{{ $calloutEmojiDict := dict "info" "ℹ️" "warning" "⚠️" "error" "🚫" }} -{{ $type := .Get "type" | default "default" }} +{{- $calloutEmojiDict := dict "info" "ℹ️" "warning" "⚠️" "error" "🚫" -}} +{{- $type := .Get "type" | default "default" -}} {{/* If emoji is not set, use the emoji from dict */}} -{{ $emoji := .Get "emoji" }} -{{ if eq $emoji "" }} - {{ $emoji = index $calloutEmojiDict $type }} -{{ end }} +{{- $emoji := .Get "emoji" -}} +{{- if eq $emoji "" -}} + {{- $emoji = index $calloutEmojiDict $type -}} +{{- end -}} {{/* Also allow using "icon" */}} -{{ $icon := .Get "icon" }} +{{- $icon := .Get "icon" -}} +{{- $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" }} -{{ $infoClass := "hx-border-blue-200 hx-bg-blue-100 hx-text-blue-900 dark:hx-border-blue-200/30 dark:hx-bg-blue-900/30 dark:hx-text-blue-200" }} -{{ $warningClass := "hx-border-yellow-100 hx-bg-yellow-50 hx-text-yellow-900 dark:hx-border-yellow-200/30 dark:hx-bg-yellow-700/30 dark:hx-text-yellow-200" }} -{{ $errorClass := "hx-border-red-200 hx-bg-red-100 hx-text-red-900 dark:hx-border-red-200/30 dark:hx-bg-red-900/30 dark:hx-text-red-200" }} +{{- $defaultClass := "hx-border-orange-100 hx-bg-orange-50 hx-text-orange-800 dark:hx-border-orange-400/30 dark:hx-bg-orange-400/20 dark:hx-text-orange-300" -}} +{{- $infoClass := "hx-border-blue-200 hx-bg-blue-100 hx-text-blue-900 dark:hx-border-blue-200/30 dark:hx-bg-blue-900/30 dark:hx-text-blue-200" -}} +{{- $warningClass := "hx-border-yellow-100 hx-bg-yellow-50 hx-text-yellow-900 dark:hx-border-yellow-200/30 dark:hx-bg-yellow-700/30 dark:hx-text-yellow-200" -}} +{{- $errorClass := "hx-border-red-200 hx-bg-red-100 hx-text-red-900 dark:hx-border-red-200/30 dark:hx-bg-red-900/30 dark:hx-text-red-200" -}} -{{ $class := cond (eq $type "info") $infoClass (cond (eq $type "warning") $warningClass (cond (eq $type "error") $errorClass $defaultClass)) }} +{{- $class := cond (eq $type "info") $infoClass (cond (eq $type "warning") $warningClass (cond (eq $type "error") $errorClass $defaultClass)) -}} - -
-
- {{- with $emoji -}} -
- {{ . }} -
- {{- else -}} - {{- with $icon }} - {{ partial "utils/icon.html" (dict "name" . "attributes" `height=1.2em class="hx-inline-block hx-align-middle"`) -}} - {{- end -}} - {{- end -}} -
- -
-
- {{ .InnerDeindent | markdownify }} -
-
-
+{{- partial "shortcodes/callout.html" (dict "content" $content "emoji" $emoji "icon" $icon "class" $class) -}} diff --git a/layouts/shortcodes/hextra/hero-section.html b/layouts/shortcodes/hextra/hero-section.html new file mode 100644 index 0000000..bdb37bf --- /dev/null +++ b/layouts/shortcodes/hextra/hero-section.html @@ -0,0 +1,10 @@ +{{- $style := .Get "style" -}} +{{- $heading := int (strings.TrimPrefix "h" (.Get "heading" | default "h2")) -}} +{{- $size := cond (ge $heading 4) "xl" (cond (eq $heading 3) "2xl" "4xl") -}} + + + {{ .Inner | markdownify }} + diff --git a/layouts/shortcodes/tabs.html b/layouts/shortcodes/tabs.html index c1df7cc..83ad4f3 100644 --- a/layouts/shortcodes/tabs.html +++ b/layouts/shortcodes/tabs.html @@ -9,7 +9,7 @@
{{- range $i, $item := $items -}}