From b51bfa317764488d6cb1752aa71c719c00f52105 Mon Sep 17 00:00:00 2001 From: Xin Date: Wed, 20 Sep 2023 23:36:00 +0100 Subject: [PATCH] feat: support wide and full page modes (#69) * feat: add page width config and partial * feat: use page-width partial in layouts * chore: revert changes in navbar and footer * feat: customize footer width from site config * chore: update styles * docs: add page width * feat: allow overriding navbar width * fix: navbar width variable * docs: add instruction for navbar and footer --- assets/css/compiled/main.css | 3 +++ .../content/docs/guide/configuration.md | 17 ++++++++++++ exampleSite/hugo.yaml | 10 +++++-- layouts/_default/list.html | 2 +- layouts/_default/single.html | 2 +- layouts/blog/list.html | 2 +- layouts/blog/single.html | 2 +- layouts/docs/list.html | 2 +- layouts/docs/single.html | 2 +- layouts/hextra-home.html | 2 +- layouts/index.html | 2 +- layouts/partials/footer.html | 12 +++++++-- layouts/partials/navbar.html | 10 ++++++- layouts/partials/utils/page-width.html | 27 +++++++++++++++++++ tailwind.config.js | 5 ++++ 15 files changed, 87 insertions(+), 13 deletions(-) create mode 100644 layouts/partials/utils/page-width.html diff --git a/assets/css/compiled/main.css b/assets/css/compiled/main.css index f79a7791..48c0bcee 100644 --- a/assets/css/compiled/main.css +++ b/assets/css/compiled/main.css @@ -779,6 +779,9 @@ video { .max-w-\[min\(calc\(100vw-2rem\)\2c calc\(100\%\+20rem\)\)\] { max-width: min(calc(100vw - 2rem),calc(100% + 20rem)); } +.max-w-full { + max-width: 100%; +} .max-w-none { max-width: none; } diff --git a/exampleSite/content/docs/guide/configuration.md b/exampleSite/content/docs/guide/configuration.md index ef3f015d..0044c92b 100644 --- a/exampleSite/content/docs/guide/configuration.md +++ b/exampleSite/content/docs/guide/configuration.md @@ -180,3 +180,20 @@ Include both `favicon.ico` and `favicon.svg` files in your project to ensure you While `favicon.ico` is generally for older browsers, `favicon.svg` is supported by modern ones. The optional `favicon-dark.svg` can be included for a tailored experience in dark mode. Feel free to use tools like [favicon.io](https://favicon.io/) or [favycon](https://github.com/ruisaraiva19/favycon) to generate these icons. + + +### Page Width + +The width of the page can be customized by the `params.page.width` parameter in the config file: + +```yaml {filename="hugo.yaml"} +params: + page: + # full (100%), wide (90rem), normal (1280px) + width: wide +``` + +There are three available options: `full`, `wide`, and `normal`. +By default, the page width is set to `normal`. + +Similarly, the width of the navbar and footer can be customized by the `params.navbar.width` and `params.footer.width` parameters. diff --git a/exampleSite/hugo.yaml b/exampleSite/hugo.yaml index 0d84b69f..74a271ec 100644 --- a/exampleSite/hugo.yaml +++ b/exampleSite/hugo.yaml @@ -30,7 +30,7 @@ languages: module: hugoVersion: extended: true - min: "0.111.0" + min: "0.112.0" workspace: hugo.work imports: @@ -93,13 +93,19 @@ params: logo: path: images/logo.svg dark: images/logo-dark.svg - # link: / # width: 40 # height: 20 + # link: / + width: wide + + page: + # full (100%), wide (90rem), normal (1280px) + width: normal footer: displayCopyright: true displayPoweredBy: true + width: normal displayUpdatedDate: true dateFormat: "January 2, 2006" diff --git a/layouts/_default/list.html b/layouts/_default/list.html index f55802dc..9b58790e 100644 --- a/layouts/_default/list.html +++ b/layouts/_default/list.html @@ -1,5 +1,5 @@ {{ define "main" }} -
+
{{ partial "sidebar.html" (dict "context" .) }} {{ partial "toc.html" . }}
diff --git a/layouts/_default/single.html b/layouts/_default/single.html index 4e08bb86..25a5a293 100644 --- a/layouts/_default/single.html +++ b/layouts/_default/single.html @@ -1,5 +1,5 @@ {{ define "main" }} -
+
{{ partial "sidebar.html" (dict "context" . "disableSidebar" true "displayPlaceholder" true) }} {{ partial "toc.html" . }}
diff --git a/layouts/blog/list.html b/layouts/blog/list.html index 10089011..790d3b84 100644 --- a/layouts/blog/list.html +++ b/layouts/blog/list.html @@ -1,5 +1,5 @@ {{ define "main" }} -
+
{{ partial "sidebar.html" (dict "context" . "disableSidebar" true "displayPlaceholder" true) }}
diff --git a/layouts/blog/single.html b/layouts/blog/single.html index 19129879..dee6cb9b 100644 --- a/layouts/blog/single.html +++ b/layouts/blog/single.html @@ -1,5 +1,5 @@ {{ define "main" }} -
+
{{ partial "sidebar.html" (dict "context" . "disableSidebar" true "displayPlaceholder" true) }} {{ partial "toc.html" . }}
diff --git a/layouts/docs/list.html b/layouts/docs/list.html index f07c7eb4..8d1be7a0 100644 --- a/layouts/docs/list.html +++ b/layouts/docs/list.html @@ -1,5 +1,5 @@ {{ define "main" }} -
+
{{ partial "sidebar.html" (dict "context" .) }} {{ partial "toc.html" . }}
diff --git a/layouts/docs/single.html b/layouts/docs/single.html index f13b2c60..da9b205b 100644 --- a/layouts/docs/single.html +++ b/layouts/docs/single.html @@ -1,5 +1,5 @@ {{ define "main" }} -
+
{{ partial "sidebar.html" (dict "context" .) }} {{ partial "toc.html" . }}
diff --git a/layouts/hextra-home.html b/layouts/hextra-home.html index e6cd7f0a..6a258f9d 100644 --- a/layouts/hextra-home.html +++ b/layouts/hextra-home.html @@ -1,5 +1,5 @@ {{ define "main" }} -
+
{{ partial "sidebar.html" (dict "context" . "disableSidebar" true) }}
diff --git a/layouts/index.html b/layouts/index.html index 108e2b5e..69cf277f 100644 --- a/layouts/index.html +++ b/layouts/index.html @@ -1,5 +1,5 @@ {{ define "main" }} -
+
{{ partial "sidebar.html" (dict "context" . "disableSidebar" true "displayPlaceholder" true) }} {{ partial "toc.html" . }}
diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html index 5f4fd11f..d4de6beb 100644 --- a/layouts/partials/footer.html +++ b/layouts/partials/footer.html @@ -2,17 +2,25 @@ {{- $copyright := (T "copyright") | default "© 2023 Hextra." -}} +{{- $footerWidth := "max-w-screen-xl" -}} +{{- with .Site.Params.footer.width -}} + {{ if eq . "wide" -}} + {{ $footerWidth = "max-w-[90rem]" -}} + {{ else if eq . "full" -}} + {{ $footerWidth = "max-w-full" -}} + {{ end -}} +{{- end -}}