Merge pull request #304 from gethinode/develop

Add optional alert when version is outdated
This commit is contained in:
Mark Dumay
2023-06-20 08:33:55 +02:00
committed by GitHub
13 changed files with 199 additions and 107 deletions

14
assets/js/alert.js Normal file
View File

@@ -0,0 +1,14 @@
const alert = document.getElementById('page-alert')
const closeBtn = document.getElementById('page-alert-btn-close')
if (alert !== null && closeBtn !== null) {
const version = alert.getAttribute('data-page-alert-version') || 'unknown'
const hideAlert = sessionStorage.getItem(`page-alert-${version}`) !== null
if (hideAlert) {
alert.classList.add('d-none')
}
closeBtn.addEventListener('click', () => {
sessionStorage.setItem(`page-alert-${version}`, 'seen')
alert.classList.add('d-none')
})
}

View File

@@ -62,6 +62,7 @@
// scss-docs-end awesome
// Import Hinode theme styles
@import "components/alert.scss";
@import "components/blockquote.scss";
@import "components/buttons.scss";
@import "components/card.scss";

View File

@@ -0,0 +1,3 @@
.alert-no-decoration {
--bs-alert-border-radius: none;
}

View File

@@ -8,10 +8,13 @@
# toml-docs-start docs
[docs]
latest = "1.0"
version = "0.8"
basePath = ""
github = "https://github.com/gethinode/hinode"
release = "https://github.com/gethinode/hinode/releases/tag/"
checkVersion = true
latestURL = "https://demo.gethinode.com/"
# toml-docs-end docs
# toml-docs-start home

View File

@@ -91,8 +91,10 @@
translation: "Code"
- id: latest
translation: "latest"
- id: allVersions
- id: allVersions
translation: "All versions"
- id: newerVersionAlert
translation: "There is a newer version of {{ . }}!"
# 404 page
- id: pageNotFound

View File

@@ -83,6 +83,8 @@
translation: "meest recente"
- id: allVersions
translation: "Alle versies"
- id: newerVersionAlert
translation: "Er is een nieuwere versie van {{ . }}!"
# 404 page
- id: pageNotFound

View File

@@ -3,6 +3,16 @@
{{- $.Scratch.Set "version" $version -}}
{{ with partial "utilities/GetMenu" (dict "page" . "version" $version) }}{{ $.Scratch.Set "sidebar" . }}{{ end }}
{{- if site.Params.docs.checkVersion -}}
{{ with $version }}
{{- $isOlder := partial "utilities/IsOlder" (dict "current" .) -}}
{{- if $isOlder }}
{{- $.Scratch.Set "pageAlertMsg" (T "newerVersionAlert" site.Title) -}}
{{- $.Scratch.Set "pageAlertURL" (or site.Params.docs.latestURL site.baseURL) -}}
{{- end -}}
{{- end -}}
{{- end -}}
<!doctype html>
<html lang="{{ .Site.Language.Lang }}" class="no-js">
<head>

View File

@@ -181,110 +181,113 @@
{{- if eq $color "black" }}{{ $theme = "dark" }}{{ end -}}
{{- if eq $color "white" }}{{ $theme = "light" }}{{ end -}}
<nav class="navbar navbar-expand-{{ $size }} {{ with $color }}bg-{{ . }}{{ end }} {{ if $fixed }}fixed-top{{ end }} p-4"{{ with $theme }} data-bs-theme="{{ . }}"{{ end }}>
<div class="container-xxl p-0">
<!-- Insert sidebar toggler when applicable -->
<div class="d-flex">
{{- if $page.Scratch.Get "sidebar" -}}
<button class="navbar-toggler fw-30 collapsed p-0 mx-auto" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvass-sidebar" aria-controls="offcanvass-sidebar" aria-label="{{ T "toggleSidebar" }}">
{{- partial "assets/icon.html" (dict "icon" "fas ellipsis") -}}
<div class="container-fluid {{ if $fixed }}fixed-top{{ end }} p-0"{{ with $theme }} data-bs-theme="{{ . }}"{{ end }}>
{{- partial "assets/page-alert.html" (dict "page" $page) -}}
<nav class="navbar navbar-expand-{{ $size }} {{ with $color }}bg-{{ . }}{{ end }} p-4"{{ with $theme }} data-bs-theme="{{ . }}"{{ end }}>
<div class="container-xxl p-0">
<!-- Insert sidebar toggler when applicable -->
<div class="d-flex">
{{- if $page.Scratch.Get "sidebar" -}}
<button class="navbar-toggler fw-30 collapsed p-0 mx-auto" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvass-sidebar" aria-controls="offcanvass-sidebar" aria-label="{{ T "toggleSidebar" }}">
{{- partial "assets/icon.html" (dict "icon" "fas ellipsis") -}}
</button>
{{- else -}}
<!-- Insert invisible sidebar toggler to center logo correctly on smaller screens -->
<button class="navbar-toggler fw-30 collapsed p-0 mx-auto invisible" type="button">
{{- partial "assets/icon.html" (dict "icon" "fas ellipsis") -}}
</button>
{{- end -}}
</div>
<!-- Insert the brand logo or name -->
<a class="navbar-brand mx-auto" href="{{ site.Home.RelPermalink }}">
{{- if $logo -}}
<img src="{{ $logo }}" alt="{{ $title }} logo" height="30">
{{- else -}}
<span class="fw-bold">{{ $title }}</span>
{{- end -}}
</a>
<!-- Insert main navigation toggler -->
<div class="d-flex fw-30">
<button id="main-nav-toggler" class="navbar-toggler collapsed p-0" type="button" data-bs-toggle="collapse" data-bs-target="#{{ $id }}"
aria-controls="{{ $id }}" aria-expanded="false" aria-label="{{ T "toggleMainNav" }}">
<span class="toggler-icon top-bar emphasis"></span>
<span class="toggler-icon middle-bar emphasis"></span>
<span class="toggler-icon bottom-bar emphasis"></span>
</button>
{{- else -}}
<!-- Insert invisible sidebar toggler to center logo correctly on smaller screens -->
<button class="navbar-toggler fw-30 collapsed p-0 mx-auto invisible" type="button">
{{- partial "assets/icon.html" (dict "icon" "fas ellipsis") -}}
</button>
{{- end -}}
</div>
<!-- Insert the brand logo or name -->
<a class="navbar-brand mx-auto" href="{{ site.Home.RelPermalink }}">
{{- if $logo -}}
<img src="{{ $logo }}" alt="{{ $title }} logo" height="30">
{{- else -}}
<span class="fw-bold">{{ $title }}</span>
{{- end -}}
</a>
<!-- Insert main navigation toggler -->
<div class="d-flex fw-30">
<button id="main-nav-toggler" class="navbar-toggler collapsed p-0" type="button" data-bs-toggle="collapse" data-bs-target="#{{ $id }}"
aria-controls="{{ $id }}" aria-expanded="false" aria-label="{{ T "toggleMainNav" }}">
<span class="toggler-icon top-bar emphasis"></span>
<span class="toggler-icon middle-bar emphasis"></span>
<span class="toggler-icon bottom-bar emphasis"></span>
</button>
</div>
<div class="navbar-collapse collapse" id="{{ $id }}">
<!-- Insert search input -->
{{- if $search }}{{ partial "assets/search-input.html" -}}{{ end -}}
<!-- Render top-menu items (maximum depth of 2) -->
<ul class="navbar-nav ms-auto">
{{- range $menu := $menus -}}
<li class="nav-item{{ if .HasChildren }} dropdown{{ end }}">
{{- partial "assets/navbar-item.html" (dict "menu" $menu "page" $page) -}}
{{- if .HasChildren -}}
<ul class="dropdown-menu dropdown-menu-end">
{{- range .Children -}}
{{- partial "assets/navbar-item.html" (dict "menu" . "parent" $menu "page" $page) -}}
</div>
<div class="navbar-collapse collapse" id="{{ $id }}">
<!-- Insert search input -->
{{- if $search }}{{ partial "assets/search-input.html" -}}{{ end -}}
<!-- Render top-menu items (maximum depth of 2) -->
<ul class="navbar-nav ms-auto">
{{- range $menu := $menus -}}
<li class="nav-item{{ if .HasChildren }} dropdown{{ end }}">
{{- partial "assets/navbar-item.html" (dict "menu" $menu "page" $page) -}}
{{- if .HasChildren -}}
<ul class="dropdown-menu dropdown-menu-end">
{{- range .Children -}}
{{- partial "assets/navbar-item.html" (dict "menu" . "parent" $menu "page" $page) -}}
{{- end -}}
</ul>
{{- end -}}
</li>
{{- end -}}
<!-- Insert divider if applicable -->
{{- if or $enableLanguage $enableVersions -}}
<li class="nav-item py-2 py-md-1 col-12 col-md-auto d-none d-{{ $size }}-block">
<div class="vr d-none d-md-flex h-100 mx-md-2"></div>
</li>
<li><hr class="dropdown-divider-bg"></li>
{{- end -}}
<!-- Insert language switcher if applicable -->
{{- if $enableLanguage -}}
{{- $currentLang := $page.Language.Lang -}}
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle d-{{ $size }}-none" href="#!" role="button" data-bs-toggle="dropdown" aria-expanded="false">
{{- partial "assets/icon.html" (dict "icon" "fas globe") }} {{ T "languageSwitcherLabel" }}
</a>
<a class="nav-link dropdown-toggle d-none d-{{ $size }}-block" href="#!" role="button" data-bs-toggle="dropdown" aria-expanded="false">
{{- partial "assets/icon.html" (dict "icon" "fas globe") }}
</a>
<ul class="dropdown-menu dropdown-menu-end ">
{{- if $page.IsTranslated -}}
{{- range $page.AllTranslations -}}
<li><a class="dropdown-item {{ if eq .Language.Lang $currentLang }}active{{ end }}" href="{{ .Permalink }}">{{ .Language.LanguageName }}</a></li>
{{- end -}}
{{- else -}}
{{- range site.Languages -}}
<li><a class="dropdown-item" href="/{{ .Lang }}">{{ default .Lang .LanguageName }}</a></li>
{{- end -}}
{{- end -}}
</ul>
{{- end -}}
</li>
{{- end -}}
<!-- Insert divider if applicable -->
{{- if or $enableLanguage $enableVersions -}}
<li class="nav-item py-2 py-md-1 col-12 col-md-auto d-none d-{{ $size }}-block">
<div class="vr d-none d-md-flex h-100 mx-md-2"></div>
</li>
<li><hr class="dropdown-divider-bg"></li>
{{- end -}}
<!-- Insert language switcher if applicable -->
{{- if $enableLanguage -}}
{{- $currentLang := $page.Language.Lang -}}
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle d-{{ $size }}-none" href="#!" role="button" data-bs-toggle="dropdown" aria-expanded="false">
{{- partial "assets/icon.html" (dict "icon" "fas globe") }} {{ T "languageSwitcherLabel" }}
</a>
<a class="nav-link dropdown-toggle d-none d-{{ $size }}-block" href="#!" role="button" data-bs-toggle="dropdown" aria-expanded="false">
{{- partial "assets/icon.html" (dict "icon" "fas globe") }}
</a>
<ul class="dropdown-menu dropdown-menu-end ">
{{- if $page.IsTranslated -}}
{{- range $page.AllTranslations -}}
<li><a class="dropdown-item {{ if eq .Language.Lang $currentLang }}active{{ end }}" href="{{ .Permalink }}">{{ .Language.LanguageName }}</a></li>
{{- end -}}
{{- else -}}
{{- range site.Languages -}}
<li><a class="dropdown-item" href="/{{ .Lang }}">{{ default .Lang .LanguageName }}</a></li>
{{- end -}}
{{- end -}}
</ul>
</li>
{{- end -}}
<!-- Insert version switcher -->
{{- if $enableVersions -}}
{{- partial "partials/navbar-versions.html" (dict "page" $page "size" $size "collapsed" true ) -}}
{{- partial "partials/navbar-versions.html" (dict "page" $page "size" $size "collapsed" false) -}}
{{- end -}}
<!-- Insert color mode switcher -->
{{- if $enableDarkMode -}}
<!-- Insert divider -->
<li class="nav-item py-2 py-md-1 col-12 col-md-auto d-none d-{{ $size }}-block">
<div class="vr d-none d-md-flex h-100 mx-md-2"></div>
</li>
<li><hr class="dropdown-divider-bg"></li>
{{- partial "partials/navbar-mode.html" (dict "size" $size "collapsed" true) -}}
{{- partial "partials/navbar-mode.html" (dict "size" $size "collapsed" false) -}}
{{- end -}}
</ul>
</li>
{{- end -}}
<!-- Insert version switcher -->
{{- if $enableVersions -}}
{{- partial "partials/navbar-versions.html" (dict "page" $page "size" $size "collapsed" true ) -}}
{{- partial "partials/navbar-versions.html" (dict "page" $page "size" $size "collapsed" false) -}}
{{- end -}}
<!-- Insert color mode switcher -->
{{- if $enableDarkMode -}}
<!-- Insert divider -->
<li class="nav-item py-2 py-md-1 col-12 col-md-auto d-none d-{{ $size }}-block">
<div class="vr d-none d-md-flex h-100 mx-md-2"></div>
</li>
<li><hr class="dropdown-divider-bg"></li>
{{- partial "partials/navbar-mode.html" (dict "size" $size "collapsed" true) -}}
{{- partial "partials/navbar-mode.html" (dict "size" $size "collapsed" false) -}}
{{- end -}}
</ul>
</div>
</div>
</div>
</nav>
</nav>
</div>

View File

@@ -0,0 +1,15 @@
{{- $page := .page -}}
{{- if not $page -}}
{{- errorf "partial [assets/page-alert.html] - Missing value for param 'page'" -}}
{{- end -}}
{{- $pageAlertMsg := $page.Scratch.Get "pageAlertMsg" -}}
{{- $pageAlertURL := $page.Scratch.Get "pageAlertURL" -}}
{{- $version := $page.Scratch.Get "version" -}}
{{- if $pageAlertMsg -}}
<div id="page-alert" class="alert alert-primary alert-no-decoration fade show d-flex align-items-center small m-0 py-1" data-page-alert-version="{{ $version }}">
<a href="{{ with $pageAlertURL }}{{ . }}{{ else }}#!{{ end }}" class="text-decoration-none flex-grow-1 text-center">{{ $pageAlertMsg }}</a>
<button id="page-alert-btn-close" type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>
{{- end -}}

View File

@@ -0,0 +1,7 @@
{{ with .version }}
{{- $isOlder := partial "utilities/IsOlder" (dict "current" .) -}}
{{- if $isOlder }}
{{- $.Scratch.Set "pageAlertMsg" (printf "There is a newer version of %s!" site.Title) -}}
{{- $.Scratch.Set "pageAlertURL" "https://getbootstrap.com/docs" -}}
{{- end -}}
{{- end -}}

View File

@@ -0,0 +1,32 @@
<!--
Returns true if the current version is older than the latest version defined in the docs section of the site
parameters. The verification supports semver patterns MAJOR.MINOR.PATCH with an optional suffix.
Original code by solus on https://discourse.gohugo.io/t/sorting-semantic-version-numbers/40838/6.
-->
{{ $current := .current }}
{{ $latest := site.Params.docs.latest }}
{{- define "partials/padZeroPrefix.html" -}}
{{- $padSize := 6 }}
{{- $paddedString := replaceRE "(\\d+)" (print (strings.Repeat (sub $padSize 1) "0") "$1") . }}
{{- $trimmedString := replaceRE (print "0+(\\d{" $padSize "})") "$1" $paddedString }}
{{- return $trimmedString }}
{{- end -}}
{{- define "partials/trimZeroPrefix.html" -}}
{{- return replaceRE "0+(\\d+)" "$1" . }}
{{- end -}}
{{- $isOlder := false -}}
{{- if and $current $latest }}
{{- $versions := slice $current $latest }}
{{- $paddedVersions := apply $versions "partial" "padZeroPrefix" "." }}
{{- $sortedVersions := (sort $paddedVersions "value" "desc") }}
{{- $sortedVersions = apply $sortedVersions "partial" "trimZeroPrefix" "." }}
{{ $isOlder = ne (index $sortedVersions 0) $current }}
{{- end -}}
{{- return $isOlder -}}

4
package-lock.json generated
View File

@@ -1,12 +1,12 @@
{
"name": "@gethinode/hinode",
"version": "0.15.0-beta3",
"version": "0.15.0-beta4",
"lockfileVersion": 2,
"requires": true,
"packages": {
"": {
"name": "@gethinode/hinode",
"version": "0.15.0-beta3",
"version": "0.15.0-beta4",
"license": "MIT",
"devDependencies": {
"@fortawesome/fontawesome-free": "^6.4.0",

View File

@@ -1,6 +1,6 @@
{
"name": "@gethinode/hinode",
"version": "0.15.0-beta3",
"version": "0.15.0-beta4",
"description": "Hinode is a clean documentation and blog theme for Hugo, an open-source static site generator",
"keywords": [
"hugo",