feat: add giscus theme customization (#522)

Co-authored-by: Xin <xin@imfing.com>

assets/css/compiled/main.css

@@ -875,9 +875,6 @@ video {
 .hx-gap-4 {
   gap: 1rem;
 }
-.hx-gap-6 {
-  gap: 1.5rem;
-}
 .hx-gap-x-1\.5 {
   -moz-column-gap: 0.375rem;
        column-gap: 0.375rem;
@@ -1155,9 +1152,6 @@ video {
 .hx-pb-px {
   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\)\] {
   padding-left: max(env(safe-area-inset-left),1.5rem);
 }
@@ -1173,9 +1167,6 @@ video {
 .hx-pr-\[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\)\] {
   padding-right: max(env(safe-area-inset-right),1.5rem);
 }

exampleSite/content/docs/advanced/customization.md

@@ -119,7 +119,7 @@ The following classes can be used to customize various parts of the theme.
 #### Footer
 
 - `hextra-footer` - The footer element
-- `custom-footer` - The custom footer section container
+- `hextra-custom-footer` - The custom footer section container
 
 #### Search
 
@@ -187,7 +187,7 @@ 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.
+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 -->
@@ -195,8 +195,8 @@ You can add a custom section the footer between the language/theme buttons and t
 
 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.
+- `.switchesVisible`: `true` if the language/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.
+- `.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._
 

exampleSite/hugo.yaml

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

exampleSite/hugo_stats.json

@@ -228,6 +228,7 @@
       "hextra-code-block",
       "hextra-code-copy-btn",
       "hextra-code-copy-btn-container",
+      "hextra-custom-footer",
       "hextra-feature-card",
       "hextra-feature-grid",
       "hextra-filetree",
@@ -327,7 +328,6 @@
       "hx-gap-1",
       "hx-gap-2",
       "hx-gap-4",
-      "hx-gap-6",
       "hx-gap-x-1.5",
       "hx-gap-y-2",
       "hx-grid",
@@ -431,14 +431,12 @@
       "hx-pb-8",
       "hx-pb-[env(safe-area-inset-bottom)]",
       "hx-pb-px",
-      "hx-pl-[max(env(safe-area-inset-left),0rem)]",
       "hx-pl-[max(env(safe-area-inset-left),1.5rem)]",
       "hx-pointer-events-none",
       "hx-pr-2",
       "hx-pr-4",
       "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-right),0rem)]",
       "hx-pr-[max(env(safe-area-inset-right),1.5rem)]",
       "hx-pt-4",
       "hx-pt-6",

layouts/partials/components/giscus.html

@@ -8,10 +8,19 @@
    * 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) {
       const iframe = document.querySelector('iframe.giscus-frame');

layouts/partials/footer.html

@@ -27,17 +27,17 @@
     {{- end -}}
   {{- end -}}
     <div
-      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"
+      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"
     >
-      {{ partial "custom/footer.html" (dict "context" . "aboveVisible" $footerSwitchesVisible "belowVisible" $copyrightSectionVisible ) }}
+      {{- partial "custom/footer.html" (dict "context" . "switchesVisible" $footerSwitchesVisible "copyrightVisible" $copyrightSectionVisible) -}}
     </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">
+        <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-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 -}}