Merge 0c2c148f5e into bc778ee243

exampleSite/content/docs/advanced/customization.md

@@ -44,129 +44,6 @@ 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:
@@ -185,20 +62,26 @@ 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 Footer Section
+## Custom Footer
 
-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.
+You can replace the footer completely - excluding the language and theme buttons - by creating a file `layouts/partials/custom/footer.html` in your site __and__ setting `custom: true` in the `footer` section of your `hugo.yaml`:
 
-```html {filename="layouts/partials/custom/footer.html"}
+```yaml {filename="hugo.yaml"}
-<!-- Your footer element here -->
+ footer:
+    enable: true
+    custom: true
+    # These settings are ignored by the custom footer
+    displayCopyright: false
+    displayPoweredBy: true
+    # This setting is respected by the custom footer
+    with: "wide"
 ```
 
-Available variables in the footer section are:
+Variables available in the footer are:
 
-- `.switchesVisible`: `true` if the language/theme button(s) are visible above the footer along with a horizontal separator.
+- `{{ .footerButtonColor }}` - The color/background color of a footer button
-- `.copyrightVisible`: `true` if the "Copyright" and "Powered By" text are visible at the bottom of the footer.
 
-_Note: The custom footer inherits the default footer background color text color and the `width` setting in `hugo.yaml#footer` section._
+_Note: The custom footer inherits the default footer background color and text color._
 
 ## Custom Layouts
 

exampleSite/content/showcase/index.md

@@ -95,7 +95,7 @@ Open source projects powered by Hextra
   >}}
 
   {{< card
-        link="https://github.com/remysheppard/lutheran-confessions"
+        link="https://lutheranconfessions.org/"
         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.yaml

@@ -173,4 +173,3 @@ params:
       # emitMetadata: 0
       # inputPosition: top
       # lang: en
-      # theme: noborder_dark

exampleSite/hugo_stats.json

@@ -228,7 +228,6 @@
       "hextra-code-block",
       "hextra-code-copy-btn",
       "hextra-code-copy-btn-container",
-      "hextra-custom-footer",
       "hextra-feature-card",
       "hextra-feature-grid",
       "hextra-filetree",

layouts/partials/components/giscus.html

@@ -8,17 +8,8 @@
    * This solution was created with reference to:
    * https://github.com/giscus/giscus/issues/336#issuecomment-1214366281
   */
-  function getHugoTheme() {
-    return localStorage.getItem("color-theme");
-  }
-  
   function getGiscusTheme() {
-    let giscusTheme = "{{ (string .theme) | default `light` }}";
+    return localStorage.getItem("color-theme");
-    if(getHugoTheme() == 'light') {
-      return giscusTheme.replace('dark', 'light');
-    } else {
-      return giscusTheme.replace('light', 'dark');
-    }
   }
 
   function setGiscusTheme() {

layouts/partials/footer.html

@@ -1,7 +1,5 @@
 {{- $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" -}}
@@ -17,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 $footerSwitchesVisible -}}
+  {{- 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 -}}
@@ -26,18 +24,20 @@
       <hr class="dark:hx-border-neutral-800" />
     {{- end -}}
   {{- end -}}
+
+  {{- if .Site.Params.footer.custom -}}
     <div
-      class="hextra-custom-footer {{ $footerWidth }} hx-pl-[max(env(safe-area-inset-left),1.5rem)] hx-pr-[max(env(safe-area-inset-right),1.5rem)] hx-text-gray-600 dark:hx-text-gray-400"
+      class="{{ $footerWidth }} hx-pl-[max(env(safe-area-inset-left),0rem)] hx-pr-[max(env(safe-area-inset-right),0rem)] hx-text-gray-600 dark:hx-text-gray-400"
     >
-      {{- partial "custom/footer.html" (dict "context" . "switchesVisible" $footerSwitchesVisible "copyrightVisible" $copyrightSectionVisible) -}}
+      {{ partial "custom/footer.html" (dict "context" . "footerButtonColor" "hx-rounded-md hx-transition-colors hover:hx-bg-gray-100 hover:hx-text-gray-900 dark:hover:hx-bg-primary-100/5 dark:hover:hx-text-gray-50" ) }}
     </div>
-    {{- if $copyrightSectionVisible -}}
+  {{- else -}}
     <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">
-            {{- if (.Site.Params.footer.displayPoweredBy | default true) }}<div class="hx-font-semibold">{{ template "theme-credit" $poweredBy }}</div>{{- end -}}
+          {{- if (.Site.Params.footer.displayPoweredBy | default true) }}<div class="hx-font-semibold">{{ template "theme-credit" $poweredBy }}</div>{{ end }}
-            {{- if .Site.Params.footer.displayCopyright }}<div class="hx-mt-6 hx-text-xs">{{ $copyright | markdownify }}</div>{{- end -}}
+          {{- if .Site.Params.footer.displayCopyright }}<div class="hx-mt-6 hx-text-xs">{{ $copyright | markdownify }}</div>{{ end }}
       </div>
     </div>
   {{- end -}}