From aea92352856b003ec957a5b26e623b2236c0af0e Mon Sep 17 00:00:00 2001 From: Attila Greguss Date: Mon, 16 Dec 2024 17:58:47 +0000 Subject: [PATCH 1/9] Add support for custom footer --- .../content/docs/advanced/customization.md | 21 +++++++++++++++++ layouts/partials/footer.html | 23 +++++++++++++------ 2 files changed, 37 insertions(+), 7 deletions(-) diff --git a/exampleSite/content/docs/advanced/customization.md b/exampleSite/content/docs/advanced/customization.md index 5c37b79..e37ee07 100644 --- a/exampleSite/content/docs/advanced/customization.md +++ b/exampleSite/content/docs/advanced/customization.md @@ -62,6 +62,27 @@ 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 + +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`: + +```yaml {filename="hugo.yaml"} + 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" +``` + +Variables available in the footer are: + +- `{{ .footerButtonColor }}` - The color/background color of a footer button + +_Note: The custom footer inherits the default footer background color and text color._ + ## 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. diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html index 61cbb11..7e79443 100644 --- a/layouts/partials/footer.html +++ b/layouts/partials/footer.html @@ -24,14 +24,23 @@
{{- end -}} {{- end -}} -
-
- {{- if (.Site.Params.footer.displayPoweredBy | default true) }}
{{ template "theme-credit" $poweredBy }}
{{ end }} - {{- if .Site.Params.footer.displayCopyright }}
{{ $copyright | markdownify }}
{{ end }} + + {{- if .Site.Params.footer.custom -}} +
+ {{ 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" ) }}
-
+ {{- else -}} +
+
+ {{- if (.Site.Params.footer.displayPoweredBy | default true) }}
{{ template "theme-credit" $poweredBy }}
{{ end }} + {{- if .Site.Params.footer.displayCopyright }}
{{ $copyright | markdownify }}
{{ end }} +
+
+ {{- end -}} {{- define "theme-credit" -}} From 756769d6d38e9b056a1f0705254eaa623a8bfbbb Mon Sep 17 00:00:00 2001 From: Attila Greguss Date: Tue, 17 Dec 2024 17:43:33 +0000 Subject: [PATCH 2/9] amend how the custom footer section is displayed --- exampleSite/content/docs/advanced/customization.md | 10 +++++----- layouts/partials/footer.html | 10 +++++----- 2 files changed, 10 insertions(+), 10 deletions(-) diff --git a/exampleSite/content/docs/advanced/customization.md b/exampleSite/content/docs/advanced/customization.md index e37ee07..24b847d 100644 --- a/exampleSite/content/docs/advanced/customization.md +++ b/exampleSite/content/docs/advanced/customization.md @@ -62,18 +62,18 @@ 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 +## Custom Footer Section -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`: +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 __and__ setting `customSection: true` in the `footer` section of your `hugo.yaml`: ```yaml {filename="hugo.yaml"} footer: enable: true - custom: true - # These settings are ignored by the custom footer + customSection: true + # These settings are still respected displayCopyright: false displayPoweredBy: true - # This setting is respected by the custom footer + # This setting applies to the custom section with: "wide" ``` diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html index c6de318..1e391b4 100644 --- a/layouts/partials/footer.html +++ b/layouts/partials/footer.html @@ -25,22 +25,22 @@ {{- end -}} {{- end -}} - {{- if .Site.Params.footer.custom -}} + {{- if .Site.Params.footer.customSection -}}
{{ 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" ) }}
- {{- else -}} +
+ {{- end -}}
-
+
{{- if (.Site.Params.footer.displayPoweredBy | default true) }}
{{ template "theme-credit" $poweredBy }}
{{ end }} - {{- if .Site.Params.footer.displayCopyright }}
{{ $copyright | markdownify }}
{{ end }} + {{- if .Site.Params.footer.displayCopyright }}
{{ $copyright | markdownify }}
{{ end }}
- {{- end -}} {{- define "theme-credit" -}} From 71b2b1176f105c83431d8c111e5f343a6f6f5ffb Mon Sep 17 00:00:00 2001 From: Attila Greguss Date: Tue, 17 Dec 2024 17:58:53 +0000 Subject: [PATCH 3/9] Add missing class --- exampleSite/hugo_stats.json | 1 + 1 file changed, 1 insertion(+) diff --git a/exampleSite/hugo_stats.json b/exampleSite/hugo_stats.json index 788b37d..6f3d4c0 100644 --- a/exampleSite/hugo_stats.json +++ b/exampleSite/hugo_stats.json @@ -327,6 +327,7 @@ "hx-gap-1", "hx-gap-2", "hx-gap-4", + "hx-gap-6", "hx-gap-x-1.5", "hx-gap-y-2", "hx-grid", From 797b485c9b20c929128f52f1ccbcb1dd818b5ed7 Mon Sep 17 00:00:00 2001 From: Attila Greguss Date: Tue, 17 Dec 2024 18:07:18 +0000 Subject: [PATCH 4/9] add missing class --- assets/css/compiled/main.css | 3 +++ 1 file changed, 3 insertions(+) diff --git a/assets/css/compiled/main.css b/assets/css/compiled/main.css index f4c238d..f01f5c2 100644 --- a/assets/css/compiled/main.css +++ b/assets/css/compiled/main.css @@ -875,6 +875,9 @@ 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; From 869731e9de7e697ebbd02a4feead678a1e8ff2ba Mon Sep 17 00:00:00 2001 From: Attila Greguss Date: Wed, 18 Dec 2024 10:30:34 +0000 Subject: [PATCH 5/9] Remove context variable and flag in hugo.yaml --- .../content/docs/advanced/customization.md | 19 ++++--------------- layouts/partials/custom/footer.html | 0 layouts/partials/footer.html | 6 +----- 3 files changed, 5 insertions(+), 20 deletions(-) create mode 100644 layouts/partials/custom/footer.html diff --git a/exampleSite/content/docs/advanced/customization.md b/exampleSite/content/docs/advanced/customization.md index 24b847d..af39dff 100644 --- a/exampleSite/content/docs/advanced/customization.md +++ b/exampleSite/content/docs/advanced/customization.md @@ -64,24 +64,13 @@ 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 __and__ setting `customSection: true` in the `footer` section of your `hugo.yaml`: +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. -```yaml {filename="hugo.yaml"} - footer: - enable: true - customSection: true - # These settings are still respected - displayCopyright: false - displayPoweredBy: true - # This setting applies to the custom section - with: "wide" +```html {filename="layouts/partials/custom/footer.html"} + ``` -Variables available in the footer are: - -- `{{ .footerButtonColor }}` - The color/background color of a footer button - -_Note: The custom footer inherits the default footer background color and text color._ +_Note: The custom footer inherits the default footer background color text color and the `width` setting in `hugo.yaml#footer` section._ ## Custom Layouts 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 1e391b4..4669961 100644 --- a/layouts/partials/footer.html +++ b/layouts/partials/footer.html @@ -24,15 +24,11 @@
{{- end -}} {{- end -}} - - {{- if .Site.Params.footer.customSection -}}
- {{ 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" ) }} + {{ partial "custom/footer.html" . }}
-
- {{- end -}}
From aa557df8aa2dbcd5625a6abb02b047c6d0a4f6f8 Mon Sep 17 00:00:00 2001 From: Attila Greguss Date: Wed, 18 Dec 2024 10:32:17 +0000 Subject: [PATCH 6/9] update hugo_stats --- exampleSite/hugo_stats.json | 2 ++ 1 file changed, 2 insertions(+) diff --git a/exampleSite/hugo_stats.json b/exampleSite/hugo_stats.json index 6f3d4c0..bb600e0 100644 --- a/exampleSite/hugo_stats.json +++ b/exampleSite/hugo_stats.json @@ -431,12 +431,14 @@ "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", From 13e11d59d2148503dc3b40a42f6c533acb80472d Mon Sep 17 00:00:00 2001 From: Attila Greguss Date: Wed, 18 Dec 2024 10:37:49 +0000 Subject: [PATCH 7/9] Only show footer section for copyright and PoweredBy if they are enabled --- layouts/partials/footer.html | 16 +++++++++------- 1 file changed, 9 insertions(+), 7 deletions(-) diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html index 4669961..bf3f4c7 100644 --- a/layouts/partials/footer.html +++ b/layouts/partials/footer.html @@ -29,14 +29,16 @@ > {{ partial "custom/footer.html" . }}
-
-
- {{- if (.Site.Params.footer.displayPoweredBy | default true) }}
{{ template "theme-credit" $poweredBy }}
{{ end }} - {{- if .Site.Params.footer.displayCopyright }}
{{ $copyright | markdownify }}
{{ end }} + {{- if or (.Site.Params.footer.displayPoweredBy | default true) .Site.Params.footer.displayCopyright}} +
+
+ {{- if (.Site.Params.footer.displayPoweredBy | default true) }}
{{ template "theme-credit" $poweredBy }}
{{ end }} + {{- if .Site.Params.footer.displayCopyright }}
{{ $copyright | markdownify }}
{{ end }} +
-
+ {{- end -}} {{- define "theme-credit" -}} From 1a5a34b00ca93bdf18f1f15369dffd44e45f3bda Mon Sep 17 00:00:00 2001 From: Attila Greguss Date: Wed, 18 Dec 2024 11:09:50 +0000 Subject: [PATCH 8/9] Add missing compiled css --- assets/css/compiled/main.css | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/assets/css/compiled/main.css b/assets/css/compiled/main.css index f01f5c2..2918a4c 100644 --- a/assets/css/compiled/main.css +++ b/assets/css/compiled/main.css @@ -1155,6 +1155,9 @@ 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); } @@ -1170,6 +1173,9 @@ 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); } From e3d29ca81a79192137cae6223db5f3440a0306cf Mon Sep 17 00:00:00 2001 From: Attila Greguss Date: Wed, 18 Dec 2024 14:40:29 +0000 Subject: [PATCH 9/9] Added necessary variables for correct styling of the custom footer in some cases --- exampleSite/content/docs/advanced/customization.md | 5 +++++ layouts/partials/footer.html | 8 +++++--- 2 files changed, 10 insertions(+), 3 deletions(-) diff --git a/exampleSite/content/docs/advanced/customization.md b/exampleSite/content/docs/advanced/customization.md index af39dff..163ae2d 100644 --- a/exampleSite/content/docs/advanced/customization.md +++ b/exampleSite/content/docs/advanced/customization.md @@ -70,6 +70,11 @@ 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. +- `.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 diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html index bf3f4c7..1a6b9d2 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 @@