From a194975889caae143811642c9e33e497550b9e4d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nuno=20Cora=C3=A7=C3=A3o?= Date: Sat, 14 Jan 2023 23:50:34 +0000 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Page=20indicator=20in=20navigation?= =?UTF-8?q?=20bar?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- assets/css/compiled/main.css | 21 ++++++++++-- assets/css/main.css | 6 ++++ assets/js/main.js | 1 - config/_default/params.toml | 4 +++ exampleSite/config/_default/params.toml | 4 +++ .../content/docs/configuration/index.md | 33 ++++++++++--------- layouts/partials/head.html | 3 -- layouts/partials/header/basic.html | 18 ++++++++-- layouts/partials/toc.html | 24 +++++++++----- tailwind.config.js | 9 +++-- 10 files changed, 88 insertions(+), 35 deletions(-) delete mode 100644 assets/js/main.js diff --git a/assets/css/compiled/main.css b/assets/css/compiled/main.css index 52b7b60e..6bebccb5 100644 --- a/assets/css/compiled/main.css +++ b/assets/css/compiled/main.css @@ -1177,15 +1177,20 @@ select { .prose :where(a.active):not(:where([class~="not-prose"] *)) { text-decoration-color: rgba(var(--color-primary-600), 1); - text-decoration-line: underline; - text-decoration-thickness: 3px; - text-underline-offset: 4px; +} + +.prose :where(p.active):not(:where([class~="not-prose"] *)) { + text-decoration-color: rgba(var(--color-primary-600), 1); } .prose-invert :where(a.active):not(:where([class~="not-prose"] *)) { text-decoration-color: rgba(var(--color-primary-400), 1); } +.prose-invert :where(p.active):not(:where([class~="not-prose"] *)) { + text-decoration-color: rgba(var(--color-primary-400), 1); +} + .sr-only { position: absolute; width: 1px; @@ -3091,6 +3096,12 @@ body:has(#menu-controller:checked) { z-index: 1000; } +.active { + text-decoration-line: underline; + text-decoration-thickness: 3px; + text-underline-offset: 4px; +} + .first\:mt-8:first-child { margin-top: 2rem; } @@ -3437,6 +3448,10 @@ body:has(#menu-controller:checked) { text-decoration-color: rgba(var(--color-primary-400), 1); } +.dark .dark\:prose-invert :where(p.active):not(:where([class~="not-prose"] *)) { + text-decoration-color: rgba(var(--color-primary-400), 1); +} + .dark .dark\:text-neutral-500 { --tw-text-opacity: 1; color: rgba(var(--color-neutral-500), var(--tw-text-opacity)); diff --git a/assets/css/main.css b/assets/css/main.css index 40a6d8aa..308a9e3d 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -440,4 +440,10 @@ body:has(#menu-controller:checked) { opacity: 0; transition: visibility 0.3s, opacity 0.3s ease-in-out ; z-index: 1000; +} + +.active { + text-decoration-line: underline; + text-decoration-thickness: 3px; + text-underline-offset: 4px; } \ No newline at end of file diff --git a/assets/js/main.js b/assets/js/main.js deleted file mode 100644 index 7eb0d1d0..00000000 --- a/assets/js/main.js +++ /dev/null @@ -1 +0,0 @@ -//for future \ No newline at end of file diff --git a/config/_default/params.toml b/config/_default/params.toml index 1006579b..023cccd6 100644 --- a/config/_default/params.toml +++ b/config/_default/params.toml @@ -19,6 +19,10 @@ enableCodeCopy = true # defaultBackgroundImage = "IMAGE.jpg" # used as default for background images +# highlightCurrentMenuArea = true +# smartTOC = true +# smartTOCHideUnfocusedChildren = true + [header] layout = "basic" # valid options: basic, fixed diff --git a/exampleSite/config/_default/params.toml b/exampleSite/config/_default/params.toml index 183cfd66..0e72f986 100644 --- a/exampleSite/config/_default/params.toml +++ b/exampleSite/config/_default/params.toml @@ -19,6 +19,10 @@ disableImageOptimization = true defaultBackgroundImage = "/img/iceland.jpg" +highlightCurrentMenuArea = true +smartTOC = true +smartTOCHideUnfocusedChildren = false + [header] layout = "fixed" # valid options: basic, fixed diff --git a/exampleSite/content/docs/configuration/index.md b/exampleSite/content/docs/configuration/index.md index d2be817d..8af33abf 100644 --- a/exampleSite/content/docs/configuration/index.md +++ b/exampleSite/content/docs/configuration/index.md @@ -128,21 +128,24 @@ Many of the article defaults here can be overridden on a per article basis by sp ### Global -| Name | Default | Description | -| -------------------------- | ------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `colorScheme` | `"blowfish"` | The theme colour scheme to use. Valid values are `blowfish` (default), `avocado`, `ocean`, `fire` and `slate`. Refer to the [Colour Schemes]({{< ref "getting-started#colour-schemes" >}}) section for more details. | -| `defaultAppearance` | `"light"` | The default theme appearance, either `light` or `dark`. | -| `autoSwitchAppearance` | `true` | Whether the theme appearance automatically switches based upon the visitor's operating system preference. Set to `false` to force the site to always use the `defaultAppearance`. | -| `enableSearch` | `false` | Whether site search is enabled. Set to `true` to enable search functionality. Note that the search feature depends on the `outputs.home` setting in the [site configuration](#site-configuration) being set correctly. | -| `enableCodeCopy` | `false` | Whether copy-to-clipboard buttons are enabled for `` blocks. The `highlight.noClasses` parameter must be set to `false` for code copy to function correctly. Read more about [other configuration files](#other-configuration-files) below. | -| `logo` | _Not set_ | The relative path to the site logo file within the `assets/` folder. The logo file should be provided at 2x resolution and supports any image dimensions. | -| `mainSections` | _Not set_ | The sections that should be displayed in the recent articles list. If not provided the section with the greatest number of articles is used. | -| `showViews` | _Not set_ | Whether or not articles and list views are displayed. This requires firebase integrations to be enabled, look below. | -| `showLikes` | _Not set_ | Whether or not articles and list likes are displayed. This requires firebase integrations to be enabled, look below. | -| `robots` | _Not set_ | String that indicates how robots should handle your site. If set, it will be output in the page head. Refer to [Google's docs](https://developers.google.com/search/docs/advanced/robots/robots_meta_tag#directives) for valid values. | -| `disableImageZoom` | `false` | Disables image zoom feature across all the images in the site. | -| `disableImageOptimization` | `false` | Disables image resize and optimization features across all the images in the site. | -| `defaultBackgroundImage` | _Not set_ | Default background image for both `background` homepage layout and `background` hero style | +| Name | Default | Description | +| ------------------------------- | ------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `colorScheme` | `"blowfish"` | The theme colour scheme to use. Valid values are `blowfish` (default), `avocado`, `ocean`, `fire` and `slate`. Refer to the [Colour Schemes]({{< ref "getting-started#colour-schemes" >}}) section for more details. | +| `defaultAppearance` | `"light"` | The default theme appearance, either `light` or `dark`. | +| `autoSwitchAppearance` | `true` | Whether the theme appearance automatically switches based upon the visitor's operating system preference. Set to `false` to force the site to always use the `defaultAppearance`. | +| `enableSearch` | `false` | Whether site search is enabled. Set to `true` to enable search functionality. Note that the search feature depends on the `outputs.home` setting in the [site configuration](#site-configuration) being set correctly. | +| `enableCodeCopy` | `false` | Whether copy-to-clipboard buttons are enabled for `` blocks. The `highlight.noClasses` parameter must be set to `false` for code copy to function correctly. Read more about [other configuration files](#other-configuration-files) below. | +| `logo` | _Not set_ | The relative path to the site logo file within the `assets/` folder. The logo file should be provided at 2x resolution and supports any image dimensions. | +| `mainSections` | _Not set_ | The sections that should be displayed in the recent articles list. If not provided the section with the greatest number of articles is used. | +| `showViews` | _Not set_ | Whether or not articles and list views are displayed. This requires firebase integrations to be enabled, look below. | +| `showLikes` | _Not set_ | Whether or not articles and list likes are displayed. This requires firebase integrations to be enabled, look below. | +| `robots` | _Not set_ | String that indicates how robots should handle your site. If set, it will be output in the page head. Refer to [Google's docs](https://developers.google.com/search/docs/advanced/robots/robots_meta_tag#directives) for valid values. | +| `disableImageZoom` | `false` | Disables image zoom feature across all the images in the site. | +| `disableImageOptimization` | `false` | Disables image resize and optimization features across all the images in the site. | +| `defaultBackgroundImage` | _Not set_ | Default background image for both `background` homepage layout and `background` hero style | +| `defaultBackgroundImage` | _Not set_ | Marks menu entries in the main manu when selected | +| `smartTOC` | _Not set_ | Activate smart Table of Contents, items in view will be highlighted. | +| `smartTOCHideUnfocusedChildren` | _Not set_ | When smart Table of Contents is turned on, this will hide deeper levels of the table when they are not in focus. | ### Header diff --git a/layouts/partials/head.html b/layouts/partials/head.html index 8005f8c9..327b2d59 100644 --- a/layouts/partials/head.html +++ b/layouts/partials/head.html @@ -49,9 +49,6 @@ "sha512" }} - {{ $jsMain := resources.Get "js/main.js" }} - {{ $jsMain = $jsMain | resources.Minify | resources.Fingerprint "sha512" }} - {{ $jsAppearance := resources.Get "js/appearance.js" }} {{ $jsAppearance = $jsAppearance | resources.Minify | resources.Fingerprint "sha512" }} {{ end }} \ No newline at end of file diff --git a/layouts/partials/toc.html b/layouts/partials/toc.html index f54542bd..87958096 100644 --- a/layouts/partials/toc.html +++ b/layouts/partials/toc.html @@ -18,8 +18,9 @@ {{ .TableOfContents | emojify }} - \ No newline at end of file + +{{ end }} \ No newline at end of file diff --git a/tailwind.config.js b/tailwind.config.js index 28bf8a86..1b552085 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -138,9 +138,9 @@ module.exports = { }, 'a.active': { "text-decoration-color": theme("colors.primary.600 / 1"), - "text-decoration-line": "underline", - "text-decoration-thickness": "3px", - "text-underline-offset": "4px" + }, + 'p.active': { + "text-decoration-color": theme("colors.primary.600 / 1"), } }, }, @@ -161,6 +161,9 @@ module.exports = { }, 'a.active': { "text-decoration-color": theme("colors.primary.400 / 1") + }, + 'p.active': { + "text-decoration-color": theme("colors.primary.400 / 1") } }, },