Merge 27a70e4c122e0590248f0cb49767403f422d56a9 into 655148f329692288c8a0cc9cae8bbc6635e8d131

* Add docs on how to customize theme

* fix heading level

* extend description

* Add missing classes

* Update exampleSite/content/docs/advanced/customization.md

---------

Co-authored-by: Xin <fuxin1997@gmail.com>

.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']

.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

.prettierrc

@@ -1,4 +1,7 @@
 {
+  "plugins": [
+    "prettier-plugin-go-template"
+  ],
   "goTemplateBracketSpacing": true,
   "htmlWhitespaceSensitivity": "css",
   "printWidth": 200,

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));

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
+
+#### 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:

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.

exampleSite/content/docs/guide/markdown.md

@@ -35,6 +35,44 @@ 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
+
+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.

exampleSite/content/showcase/index.md

@@ -95,7 +95,7 @@ Open source projects powered by Hextra
   >}}
 
   {{< 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;"

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",
@@ -256,15 +265,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 +290,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 +484,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 +496,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",

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) -}}

layouts/_default/_markup/render-blockquote-regular.html

@@ -0,0 +1,3 @@
+<blockquote>
+  {{ .Text }}
+</blockquote>

layouts/partials/components/giscus.html

@@ -1,4 +1,26 @@
-{{- $lang := site.Language.LanguageCode | default `en` -}}
+{{ $default_chinese := "zh-CN" }}
+
+{{ $sl := site.Language }}
+{{ $giscus_lang := $sl.Lang | default `en` }}
+
+{{/* 
+  Special case for Chinese.
+  Giscus uses the geophraphical language code for these.
+  See: https://github.com/giscus/giscus/tree/main/locales
+  */}}
+{{ if eq $giscus_lang "zh" }}
+  {{/* Create a code formatted for Giscus: zh-CN or zn-TW. */}}
+  {{ $code := lower $sl.LanguageCode }}
+  
+  {{ if (hasSuffix $code "-cn") }}
+    {{ $giscus_lang = "zh-CN" }}
+  {{ else if (hasSuffix $code "-tw") }}
+    {{ $giscus_lang = "zh-TW" }}
+  {{ else }}
+    {{ $giscus_lang = $default_chinese }}
+  {{ end }}
+{{ end }}
+
 
 {{- with site.Params.comments.giscus -}}
 <script>
@@ -38,7 +60,7 @@
       "data-emit-metadata": "{{ (string .emitMetadata) | default 0 }}",
       "data-input-position": "{{ .inputPosition | default `top` }}",
       "data-theme": getGiscusTheme(),
-      "data-lang": "{{ .lang | default $lang }}",
+      "data-lang": "{{ .lang | default $giscus_lang }}",
       "crossorigin": "anonymous",
       "async": "",
     };

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 -}}
+
+
+<div class="hx-overflow-x-auto hx-mt-6 hx-flex hx-flex-col hx-rounded-lg hx-border hx-py-4 hx-px-4 contrast-more:hx-border-current contrast-more:dark:hx-border-current {{ $class }}">
+  <p class="hx-flex hx-items-center hx-font-medium">
+    {{- with $icon -}}
+      {{- partial "utils/icon.html" (dict "name" . "attributes" `height=16px class="hx-inline-block hx-align-middle hx-mr-2"`) -}}
+    {{- end -}}
+    {{- $title -}}
+  </p>
+
+  <div class="hx-w-full hx-min-w-0 hx-leading-7">
+    <div class="hx-mt-6 hx-leading-7 first:hx-mt-0">
+      {{- $content -}}
+    </div>
+  </div>
+</div>

layouts/partials/footer.html

@@ -15,7 +15,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">
-  {{- if $enableFooterSwitches -}}
+  {{- if and $enableFooterSwitches (or hugo.IsMultilingual $displayThemeToggle) -}}
     <div class="hx-mx-auto hx-flex hx-gap-2 hx-py-2 hx-px-4 {{ $footerWidth }}">
       {{- partial "language-switch.html" (dict "context" .) -}}
       {{- with $displayThemeToggle }}{{ partial "theme-toggle.html" }}{{ end -}}

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 -}}
+
+
+<div class="hx-overflow-x-auto hx-mt-6 hx-flex hx-rounded-lg hx-border hx-py-2 ltr:hx-pr-4 rtl:hx-pl-4 contrast-more:hx-border-current contrast-more:dark:hx-border-current {{ $class }}">
+  <div class="ltr:hx-pl-3 ltr:hx-pr-2 rtl:hx-pr-3 rtl:hx-pl-2">
+    {{- with $emoji -}}
+      <div class="hx-select-none hx-text-xl" style="font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';">
+        {{- . -}}
+      </div>
+    {{- else -}}
+      {{- with $icon -}}
+        {{ partial "utils/icon.html" (dict "name" . "attributes" `height=1.2em class="hx-inline-block hx-align-middle"`) -}}
+      {{- end -}}
+    {{- end -}}
+  </div>
+
+  <div class="hx-w-full hx-min-w-0 hx-leading-7">
+    <div class="hx-mt-6 hx-leading-7 first:hx-mt-0">
+      {{- $content -}}
+    </div>
+  </div>
+</div>

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)) -}}
 
-
-<div class="hx-overflow-x-auto hx-mt-6 hx-flex hx-rounded-lg hx-border hx-py-2 ltr:hx-pr-4 rtl:hx-pl-4 contrast-more:hx-border-current contrast-more:dark:hx-border-current {{ $class }}">
-  <div class="ltr:hx-pl-3 ltr:hx-pr-2 rtl:hx-pr-3 rtl:hx-pl-2">
-    {{- with $emoji -}}
-      <div class="hx-select-none hx-text-xl" style="font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';">
-        {{ . }}
-      </div>
-    {{- else -}}
-      {{- with $icon }}
-        {{ partial "utils/icon.html" (dict "name" . "attributes" `height=1.2em class="hx-inline-block hx-align-middle"`) -}}
-      {{- end -}}
-    {{- end -}}
-  </div>
-
-  <div class="hx-w-full hx-min-w-0 hx-leading-7">
-    <div class="hx-mt-6 hx-leading-7 first:hx-mt-0">
-      {{ .InnerDeindent | markdownify }}
-    </div>
-  </div>
-</div>
+{{- partial "shortcodes/callout.html" (dict "content" $content "emoji" $emoji "icon" $icon "class" $class) -}}

netlify.toml

@@ -7,6 +7,6 @@ command = "cd exampleSite && hugo --gc --minify --themesDir ../.. -b ${DEPLOY_PR
 ignore = "false"
 
 [build.environment]
-HUGO_VERSION = "0.132.2"
+HUGO_VERSION = "0.138.0"
 GO_VERSION = "1.22.3"
 NODE_VERSION = "22.2.0"

package-lock.json

@@ -523,11 +523,10 @@
       }
     },
     "node_modules/cross-spawn": {
-      "version": "7.0.3",
-      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
-      "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
+      "version": "7.0.6",
+      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
+      "integrity": "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==",
       "dev": true,
-      "license": "MIT",
       "dependencies": {
         "path-key": "^3.1.0",
         "shebang-command": "^2.0.0",
@@ -1031,9 +1030,9 @@
       }
     },
     "node_modules/nanoid": {
-      "version": "3.3.7",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
-      "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==",
+      "version": "3.3.8",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.8.tgz",
+      "integrity": "sha512-WNLf5Sd8oZxOm+TzppcYk8gVOgP+l58xNy58D0nbUnOxOWRWvlcCV4kUF7ltmI6PsrLl/BgKEyS4mqsGChFN0w==",
       "dev": true,
       "funding": [
         {
@@ -1041,7 +1040,6 @@
           "url": "https://github.com/sponsors/ai"
         }
       ],
-      "license": "MIT",
       "bin": {
         "nanoid": "bin/nanoid.cjs"
       },

tailwind.config.js

@@ -61,8 +61,11 @@ module.exports = {
       neutral: colors.neutral,
       red: colors.red,
       orange: colors.orange,
+      green: colors.green,
+      indigo: colors.indigo,
       blue: colors.blue,
       yellow: colors.yellow,
+      amber: colors.amber,
       primary: {
         50: makePrimaryColor(97),
         100: makePrimaryColor(94),