mirror of
https://github.com/nunocoracao/blowfish.git
synced 2025-01-22 22:45:42 -06:00
Merge pull request #439 from nunocoracao/feature-412-sparkles-page-indicator-in-navigation-bar
✨ Page indicator in navigation bar
This commit is contained in:
Nuno Coração
GitHub
commit
76a735e662
10 changed files with 88 additions and 35 deletions
|
|
@ -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));
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -1 +0,0 @@
|
|||
//for future
|
||||
|
|
@ -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
|
||||
|
||||
|
|
|
|||
|
|
@ -19,6 +19,10 @@ disableImageOptimization = true
|
|||
|
||||
defaultBackgroundImage = "/img/iceland.jpg"
|
||||
|
||||
highlightCurrentMenuArea = true
|
||||
smartTOC = true
|
||||
smartTOCHideUnfocusedChildren = false
|
||||
|
||||
[header]
|
||||
layout = "fixed" # valid options: basic, fixed
|
||||
|
||||
|
|
|
|||
|
|
@ -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 `<code>` 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 `<code>` 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
|
||||
|
||||
|
|
|
|||
|
|
@ -49,9 +49,6 @@
|
|||
"sha512" }}
|
||||
<link type="text/css" rel="stylesheet" href="{{ $bundleCSS.RelPermalink }}"
|
||||
integrity="{{ $bundleCSS.Data.Integrity }}" />
|
||||
{{ $jsMain := resources.Get "js/main.js" }}
|
||||
{{ $jsMain = $jsMain | resources.Minify | resources.Fingerprint "sha512" }}
|
||||
<script type="text/javascript" src="{{ $jsMain.RelPermalink }}" integrity="{{ $jsMain.Data.Integrity }}"></script>
|
||||
{{ $jsAppearance := resources.Get "js/appearance.js" }}
|
||||
{{ $jsAppearance = $jsAppearance | resources.Minify | resources.Fingerprint "sha512" }}
|
||||
<script type="text/javascript" src="{{ $jsAppearance.RelPermalink }}"
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<div style="padding-left:0;padding-right:0;padding-top:2px;padding-bottom:3px"
|
||||
class="flex items-center justify-between px-4 py-6 sm:px-6 md:justify-start space-x-3">
|
||||
class="main-menu flex items-center justify-between px-4 py-6 sm:px-6 md:justify-start space-x-3">
|
||||
{{ if .Site.Params.Logo }}
|
||||
{{ $logo := resources.Get .Site.Params.Logo }}
|
||||
{{ if $logo }}
|
||||
|
|
@ -144,7 +144,8 @@
|
|||
</div>
|
||||
|
||||
{{ if .Site.Menus.subnavigation }}
|
||||
<div class="flex pb-3 flex-col items-end justify-between md:justify-start space-x-3" {{ if .Site.Params.Logo }} style="margin-top:-15px" {{ end }}>
|
||||
<div class="main-menu flex pb-3 flex-col items-end justify-between md:justify-start space-x-3" {{ if .Site.Params.Logo
|
||||
}} style="margin-top:-15px" {{ end }}>
|
||||
<div class="hidden md:flex items-center space-x-5">
|
||||
{{ range .Site.Menus.subnavigation }}
|
||||
<a href="{{ .URL }}" {{ if or (strings.HasPrefix .URL "http:" ) (strings.HasPrefix .URL "https:" ) }}
|
||||
|
|
@ -161,4 +162,17 @@
|
|||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
|
||||
{{ if .Site.Params.highlightCurrentMenuArea }}
|
||||
<script>
|
||||
(function () {
|
||||
var $mainmenu = $('.main-menu');
|
||||
var path = window.location.pathname;
|
||||
$mainmenu.find('a[href="' + path + '"]').each(function (i, e) {
|
||||
console.log($(e).children('a'))
|
||||
$(e).children('p').addClass('active');
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
{{ end }}
|
||||
|
|
@ -18,8 +18,9 @@
|
|||
{{ .TableOfContents | emojify }}
|
||||
</div>
|
||||
</details>
|
||||
<script>
|
||||
|
||||
{{ if .Site.Params.smartTOC }}
|
||||
<script>
|
||||
(function () {
|
||||
var $toc = $('#TableOfContents');
|
||||
if ($toc.length > 0) {
|
||||
|
|
@ -31,27 +32,34 @@
|
|||
var id = "";
|
||||
h.each(function (i, e) {
|
||||
e = $(e);
|
||||
if (e.offset().top - $(window).height()/2 <= currentScroll) {
|
||||
if (e.offset().top - $(window).height()/3 <= currentScroll) {
|
||||
id = e.attr('id');
|
||||
}
|
||||
});
|
||||
var active = $toc.find('a.active');
|
||||
if (active.length == 1 && active.eq(0).attr('href') == '#' + id) return true;
|
||||
|
||||
active.each(function (i, e) {
|
||||
$(e).removeClass('active').siblings('ul').hide();
|
||||
{{ if .Site.Params.smartTOCHideUnfocusedChildren }}
|
||||
$(e).removeClass('active').siblings('ul').hide();
|
||||
{{ else }}
|
||||
$(e).removeClass('active');
|
||||
{{ end }}
|
||||
});
|
||||
$toc.find('a[href="#' + id + '"]').addClass('active')
|
||||
$toc.find('a[href="#' + id + '"]').parentsUntil('#TableOfContents').each(function (i, e) {
|
||||
console.log($(e).children('a'))
|
||||
$(e).children('a').addClass('active').parents('ul').show();
|
||||
$(e).children('a').parents('ul').show();
|
||||
});
|
||||
}
|
||||
|
||||
$window.on('scroll', onScroll);
|
||||
$(document).ready(function () {
|
||||
$toc.find('a').parent('li').find('ul').hide();
|
||||
{{ if .Site.Params.smartTOCHideUnfocusedChildren }}
|
||||
$toc.find('a').parent('li').find('ul').hide();
|
||||
{{ end }}
|
||||
onScroll();
|
||||
});
|
||||
}
|
||||
})();
|
||||
|
||||
</script>
|
||||
</script>
|
||||
{{ end }}
|
||||
|
|
@ -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")
|
||||
}
|
||||
},
|
||||
},
|
||||
|
|
|
|||
Loading…
Reference in a new issue