Support menu aliases

gethinode · May 17, 2023 · d009874 · d009874
1 parent f8adffc
commit d009874
Show file tree

Hide file tree

Showing 5 changed files with 86 additions and 27 deletions.
diff --git a/assets/js/menu.js b/assets/js/menu.js
@@ -0,0 +1,20 @@
+const url = new URL(window.location.href)
+const menu = url.searchParams.get('menu')
+const child = url.searchParams.get('child')
+const menuItems = document.querySelectorAll('[data-nav="main"]')
+
+if (menu !== null) {
+  menuItems.forEach(element => {
+    element.classList.remove('active')
+  })
+
+  const targetMainItems = document.querySelectorAll(`[data-nav-main="${menu}"]:not([data-nav-child])`)
+  targetMainItems.forEach(element => {
+    element.classList.add('active')
+  })
+
+  const targetChildItems = document.querySelectorAll(`[data-nav-main="${menu}"][data-nav-child="${child}"]`)
+  targetChildItems.forEach(element => {
+    element.classList.add('active')
+  })
+}
diff --git a/layouts/alias.html b/layouts/alias.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html{{ with site.LanguageCode | default site.Language.Lang }} lang="{{ . }}"{{ end }}>
+  <head>
+    <title>{{ .Permalink }}</title>
+    <link rel="canonical" href="{{ .Permalink }}">
+    <meta name="robots" content="noindex">
+    <meta charset="utf-8">
+    <noscript><meta http-equiv="refresh" content="0; url={{ .Permalink }}"></noscript>
+    <script src="/js/alias.js"></script>
+  </head>
+</html>
diff --git a/layouts/partials/assets/navbar-item.html b/layouts/partials/assets/navbar-item.html
@@ -0,0 +1,45 @@
+{{- $menu := .menu -}}
+{{- $parent := .parent -}}
+{{- $page := .page -}}
+{{- $class := .class -}}
+
+{{- $menuURL := (or $menu.PageRef $menu.URL) | relLangURL -}}
+{{- $pageURL := $page.RelPermalink | relLangURL -}}
+{{- $isActive := hasPrefix $pageURL $menuURL -}}
+{{- $isAlias := $menu.Params.alias -}}
+
+{{- $url := urls.Parse $menuURL -}}
+{{- $baseURL := urls.Parse $.Site.Params.Baseurl -}}
+{{- $isExternal := ne $url.Host $baseURL.Host -}}
+{{- $externalHref := "" }}
+{{- if $isExternal }}{{ $externalHref = "target=\"_blank\" rel=\"noopener noreferrer\"" }}{{ end -}}
+
+{{- $mainNav := urlize (lower $menu.Name) -}}
+{{- $childNav := "" -}}
+
+{{- $button := "" -}}
+{{- if $parent -}}
+    {{- $mainNav = urlize (lower $parent.Name) -}}
+    {{- $childNav = urlize (lower $menu.Name) -}}
+    {{- $class = printf "dropdown-item %s" $class -}}
+{{- else if $menu.HasChildren -}}
+    {{- $class = printf "nav-link dropdown-toggle %s" $class -}}
+    {{- $button = " role=\"button\" data-bs-toggle=\"dropdown\" aria-expanded=\"false\"" -}}
+{{- else -}}
+    {{- $class = printf "nav-link %s" $class -}}
+{{- end -}}
+{{- $params := "" -}}
+{{- if and $isAlias (not $isExternal) -}}
+    {{- $params = printf "?menu=%s" $mainNav -}}
+    {{- with $childNav }}{{ $params = printf "%s&child=%s" $params . }}{{ end -}}
+{{- end -}}
+
+<a class="{{ $class }}{{ if $isActive }} active{{ end }}" 
+    data-nav="main" data-nav-main="{{ $mainNav }}"{{ with $childNav }} data-nav-child="{{ . }}"{{ end }} 
+    href="{{ $menuURL }}{{ $params | safeHTMLAttr }}"{{ with $externalHref }} {{ . | safeHTMLAttr }}{{ end }} {{ $button | safeHTMLAttr }}>
+
+    {{- with $menu.Pre }}{{ . }}{{ end -}}
+    <span {{ if $isActive }} class="active"{{ end }}>{{ $menu.Name }}</span>
+    {{- with $menu.Post }}{{ . }}{{ end -}}
+    {{- if $isExternal }} {{ partial "assets/icon.html" (dict "icon" "fas up-right-from-square fa-2xs") }}{{ end -}}
+</a>
diff --git a/layouts/partials/assets/navbar.html b/layouts/partials/assets/navbar.html
@@ -166,39 +166,19 @@
             <!-- Render top-menu items (maximum depth of 2) -->
             <ul class="navbar-nav ms-auto">
                 {{- range $menu := $menus -}}
-                    {{- $menu_item_url := $menu.URL | relLangURL -}}
-                    {{- $page_url:= $page.RelPermalink | relLangURL -}}
-                    {{- $active := hasPrefix $page_url $menu_item_url -}}
-
-                    {{- $url := urls.Parse .URL -}}
-                    {{- $baseurl := urls.Parse $.Site.Params.Baseurl -}}
-                    {{- if .HasChildren -}}
-                        <li class="nav-item dropdown">
-                            <a class="nav-link {{ if $active }}active{{ end }} dropdown-toggle" href="{{ .URL | relLangURL  }}" role="button" data-bs-toggle="dropdown" aria-expanded="false">
-                                {{ if $active }}<span class="active">{{ .Name }}</span>{{ else }}{{ .Name }}{{ end }}
-                            </a>
+                    <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 -}}
-                                    {{- $child_active := eq $page_url (.URL | relLangURL) -}}
-                                    <li><a class="dropdown-item {{ if $child_active }}active{{ end }}" href="{{ .URL | relLangURL  }}">{{ .Name }}</a></li>
+                                    {{- partial "assets/navbar-item.html" (dict "menu" . "parent" $menu "page" $page) -}}
                                 {{- end -}}
                             </ul>
-                        </li>
-                    {{- else -}}
-                        <li class="nav-item">
-                            {{- $external := ne $url.Host $baseurl.Host -}}
-                            <a class="nav-link {{ if $active }}active{{ end }}"
-                                href="{{ with .Page }}{{ .RelPermalink }}{{ else }}{{ .URL | relLangURL }}{{ end }}" {{ if $external }}target="_blank" rel="noopener noreferrer" {{ end }}>
-                                {{- with $pre}}{{ . }}{{ end -}}
-                                <span {{if $active }} class="active"{{end}}>{{ .Name }}</span>
-                                {{- with $post}}{{ . }}{{ end -}}
-                                {{- if $external }} {{ partial "assets/icon.html" (dict "icon" "fas up-right-from-square fa-2xs") }}{{ end -}}
-                            </a>
-                        </li>
-                    {{- end -}}
+                        {{- end -}}
+                    </li>
                 {{- end -}}
 
-
+                <!-- Insert divider if applicable -->
                 {{- if or $enableLanguage $enableDarkMode -}}
                     <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>

diff --git a/static/js/alias.js b/static/js/alias.js
@@ -0,0 +1,3 @@
+const alias = document.querySelector("link[rel='canonical']").getAttribute('href')
+const params = window.location.search + window.location.hash
+window.location = alias + params