Navigation home option (#381)

* enabled mermaid by default

* implemented logic to use internal oder cdn mermaid

* added english documentation

* added french translation for the mermaid options

* Removed useless test print

* Hugo does not use upper case letters in params

* fixed false sample link

* improved mermaid pages

* fixed always load mermaid if no frontmatter specified

* applied 3 new params to default config

* Implemented Home Button logic

* Applied default style

* applied same landingpage ref to logo partials

* added sample image, how the button will looks like

* added en documentation on how to configure the button

* translated home button configuration to french via deepl

* applied home button style to theme variants

* set button disabled by default

* fixed mermaid samples

* removed obsolete css files

* changed default version of mermaid cdn

* renamed mermaidURL to customMermaidURL and removed css link

* improved mermaid configuration description

Co-authored-by: Arthur Ferdinand Lindner <Arthur-Ferdinand.Lindner@Telekom.de>
Co-authored-by: Arthur Ferdinand Lindner <arthur.lindner@outlook.de>

exampleSite/config.toml

@@ -15,6 +15,7 @@ defaultContentLanguageInSubdir= true
   showVisitedLinks = true
   disableBreadcrumb = false
   disableNextPrev = false
+  disableLandingPageButton = true
   disableMermaid = false
   customMermaidURL = "https://unpkg.com/mermaid@8.8.0/dist/mermaid.min.js"
   titleSeparator = "::"
@@ -27,6 +28,8 @@ home = [ "HTML", "RSS", "JSON"]
 title = "Documentation for Hugo Learn Theme"
 weight = 1
 languageName = "English"
+landingPageURL = "/en"
+landingPageName = "<i class='fas fa-home'></i> Home"
 
 [[Languages.en.menu.shortcuts]]
 name = "<i class='fab fa-fw fa-github'></i> GitHub repo"
@@ -54,6 +57,8 @@ weight = 30
 title = "Documentation du thème Hugo Learn"
 weight = 2
 languageName = "Français"
+landingPageURL = "/fr"
+landingPageName = "<i class='fas fa-home'></i> Accueil"
 
 [[Languages.fr.menu.shortcuts]]
 name = "<i class='fab fa-fw fa-github'></i> Repo GitHub"
@@ -81,6 +86,8 @@ weight = 30
 title = "Hugo 主题的 Learn 文档"
 weight = 3
 languageName = "简体中文"
+landingPageURL = "/zh"
+landingPageName = "<i class='fas fa-home'></i> 家"
 
 [[Languages.zh.menu.shortcuts]]
 name = "<i class='fab fa-fw fa-github'></i> GitHub 仓库"

exampleSite/content/basics/configuration/_index.en.md

@@ -31,6 +31,9 @@ Note that some of these parameters are explained in details in other sections of
   disableInlineCopyToClipBoard = false
   # A title for shortcuts in menu is set by default. Set this to true to disable it.
   disableShortcutsTitle = false
+  # If set to false, a Home button will appear below the search bar on the menu.
+  # It is redirecting to the landing page of the current language if specified. (Default is "/")
+  disableLandingPageButton = true
   # When using mulitlingual website, disable the switch language button.
   disableLanguageSwitchingButton = false
   # Hide breadcrumbs in the header and only show the current page title
@@ -75,3 +78,35 @@ The mermaid configuration parameters can also be set on a specific page. In this
 > On page "Architecture" you need a class diagram. You can set the mermaid parameters locally to only load mermaid on this page (not on the others).
 
 You also can disable mermaid for specific pages while globally enabled.
+
+## Home Button Configuration
+
+If the `disableLandingPage` option is set to `false`, an Home button will appear
+on the left menu. It is an alternative for clicking on the logo. To edit the
+appearance, you will have to configure two parameters for the defined languages:
+
+```toml
+[Lanugages]
+[Lanugages.en]
+...
+landingPageURL = "/en"
+landingPageName = "<i class='fas fa-home'></i> Redirect to Home"
+...
+[Lanugages.fr]
+...
+landingPageURL = "/fr"
+landingPageName = "<i class='fas fa-home'></i> Accueil"
+...
+```
+
+If those params are not configured for a specific language, they will get their
+default values:
+
+```toml
+landingPageURL = "/"
+landingPageName = "<i class='fas fa-home'></i> Home"
+```
+
+The home button is going to looks like this:
+
+![Default Home Button](/en/basics/configuration/images/home_button_defaults.jpg?width=100%)

exampleSite/content/basics/configuration/_index.fr.md

@@ -31,6 +31,9 @@ Notez que certains de ces paramètres sont expliqués en détails dans d'autres
   disableInlineCopyToClipBoard = false
   # Un titre est défini par défaut lorsque vous utilisez un raccourci dans le menu. Utilisez ce paramètre pour le cacher.
   disableShortcutsTitle = false
+  # S'il est réglé sur faux, un bouton Accueil apparaîtra sous la barre de recherche dans le menu.
+  # Il redirige vers la page d'accueil de la langue actuelle si cela est spécifié. (La valeur par défaut est "/")
+  disableLandingPageButton = true
   # Si défini à true, empêche Hugo d'inclure le module "mermaid" s'il n'est pas nécessaire (réduira les temps de chargement et le trafic)
   disableMermaid = false
   # Spécifie l'emplacement distant du mermaid js
@@ -69,3 +72,39 @@ Les paramètres de configuration du mermaid peuvent également être définis su
 > À la page "Architecture", vous avez besoin d'un diagramme de classe. Vous pouvez régler les paramètres de mermaid localement pour ne charger que la sirène sur cette page (pas sur les autres).
 
 Vous pouvez également désactiver mermaid pour des pages spécifiques tout en l'activant globalement.
+<<<<<<< HEAD
+
+## Configuration du bouton Accueil
+
+Si l'option `disableLandingPage` est définie sur `false`, un bouton
+"Accueil" apparaîtra dans le menu de gauche. C'est une alternative pour cliquer
+sur le logo. Pour modifier le vous devrez configurer deux paramètres pour les
+langues définies :
+
+```toml
+[Lanugages]
+[Lanugages.en]
+...
+landingPageURL = "/en"
+landingPageName = "<i class='fas fa-home'></i> Redirect to Home"
+...
+[Lanugages.fr]
+...
+landingPageURL = "/fr"
+landingPageName = "<i class='fas fa-home'></i> Accueil"
+...
+```
+
+Si ces paramètres ne sont pas configurés pour une langue spécifique, ils
+obtiendront leur valeurs par défaut:
+
+```toml
+landingPageURL = "/"
+landingPageName = "<i class='fas fa-home'></i> Home"
+```
+
+Le bouton d'accueil va ressembler à ceci:
+
+![Default Home Button](/en/basics/configuration/images/home_button_defaults.jpg?width=100%)
+=======
+>>>>>>> 023fe7ef2b4c45fe66ac932d9e25d09f30b74a4e

exampleSite/layouts/partials/logo.html

@@ -1,4 +1,4 @@
-<a id="logo" href="/">
+<a id="logo" href='{{ (cond (and (ne .Site.Params.landingPageURL nil) (.Site.IsMultiLingual)) .Site.Params.landingPageURL "/") }}'>
 
 <svg id="grav-logo" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 	width="100%" height="100%"  viewBox="0 0 285.1 69.9" xml:space="preserve">

layouts/partials/logo.html

@@ -1,4 +1,4 @@
-<a id="logo" href="{{ .Site.BaseURL }}">
+<a id="logo" href='{{ (cond (and (ne .Site.Params.landingPageURL nil) (.Site.IsMultiLingual)) .Site.Params.landingPageURL "/de") }}'>
   <svg id="grav-logo" style="width:100%; height:100%;" viewBox="0 0 504 140" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;">
     <path d="M235.832,71.564l-7.98,-0.001c-1.213,0.001 -2.197,0.987 -2.197,2.204l0,15.327l-0.158,0.132c-4.696,3.962 -10.634,6.14 -16.719,6.14c-14.356,0 -26.034,-11.68 -26.034,-26.037c0,-14.358 11.678,-26.035 26.034,-26.035c5.582,0 10.919,1.767 15.437,5.113c0.877,0.649 2.093,0.56 2.866,-0.211l5.69,-5.69c0.444,-0.442 0.675,-1.055 0.639,-1.681c-0.034,-0.627 -0.336,-1.206 -0.828,-1.597c-6.76,-5.363 -15.214,-8.314 -23.805,-8.314c-21.18,0 -38.414,17.233 -38.414,38.415c0,21.183 17.234,38.415 38.414,38.415c10.937,0 21.397,-4.705 28.698,-12.914c0.358,-0.403 0.556,-0.921 0.556,-1.46l0,-19.603c0,-1.217 -0.985,-2.203 -2.2,-2.203"
       style="fill:#000;fill-rule:nonzero;"></path>

layouts/partials/menu.html

@@ -10,6 +10,15 @@
         {{ partial "search.html" . }}
     {{end}}
   </div>
+  {{if not .Site.Params.disableLandingPageButton }}
+    <section id="homelinks">
+      <ul>
+        <li>
+            <a class="padding" href='{{ (cond (and (ne .Site.Params.landingPageURL nil) (.Site.IsMultiLingual)) .Site.Params.landingPageURL "/") }}'>{{ safeHTML (cond (ne .Site.Params.landingPageName nil) .Site.Params.landingPageName "<i class='fas fa-home'></i> Home") }}</a>
+        </li>
+      </ul>
+    </section>
+  {{end}}
 
     <div class="highlightable">
     <ul class="topics">

static/css/theme-blue.css

@@ -7,6 +7,9 @@
     --MAIN-LINK-HOVER-color:#167ad0; /* Color of hovered links */
     --MAIN-ANCHOR-color: #1C90F3; /* color of anchors on titles */
 
+    --MENU-HOME-LINK-color: #323232; /* Color of the home button text */
+    --MENU-HOME-LINK-HOVER-color: #5e5e5e; /* Color of the hovered home button text */
+
     --MENU-HEADER-BG-color:#1C90F3; /* Background color of menu header */
     --MENU-HEADER-BORDER-color:#33a1ff; /*Color of menu header border */
 
@@ -109,3 +112,17 @@ a:hover {
 #body .tags a.tag-link:before {
     border-right-color: var(--MENU-HEADER-BG-color);
 }
+
+#homelinks {
+  background: var(--MENU-HEADER-BG-color);
+  background-color: var(--MENU-HEADER-BORDER-color);
+  border-bottom-color: var(--MENU-HEADER-BORDER-color);
+}
+
+#homelinks a {
+  color: var(--MENU-HOME-LINK-color);
+}
+
+#homelinks a:hover {
+  color: var(--MENU-HOME-LINK-HOVERED-color);
+}

static/css/theme-green.css

@@ -7,6 +7,9 @@
     --MAIN-LINK-HOVER-color:#3f6d2c; /* Color of hovered links */
     --MAIN-ANCHOR-color: #599a3e; /* color of anchors on titles */
 
+    --MENU-HOME-LINK-color: #323232; /* Color of the home button text */
+    --MENU-HOME-LINK-HOVER-color: #5e5e5e; /* Color of the hovered home button text */
+
     --MENU-HEADER-BG-color:#74b559; /* Background color of menu header */
     --MENU-HEADER-BORDER-color:#9cd484; /*Color of menu header border */
 
@@ -109,3 +112,17 @@ a:hover {
 #body .tags a.tag-link:before {
     border-right-color: var(--MENU-HEADER-BG-color);
 }
+
+#homelinks {
+  background: var(--MENU-HEADER-BG-color);
+  background-color: var(--MENU-HEADER-BORDER-color);
+  border-bottom-color: var(--MENU-HEADER-BORDER-color);
+}
+
+#homelinks a {
+  color: var(--MENU-HOME-LINK-color);
+}
+
+#homelinks a:hover {
+  color: var(--MENU-HOME-LINK-HOVERED-color);
+}

static/css/theme-red.css

@@ -7,6 +7,9 @@
     --MAIN-LINK-HOVER-color:#d01616; /* Color of hovered links */
     --MAIN-ANCHOR-color: #f31c1c; /* color of anchors on titles */
 
+    --MENU-HOME-LINK-color: #ccc; /* Color of the home button text */
+    --MENU-HOME-LINK-HOVER-color: #e6e6e6; /* Color of the hovered home button text */
+
     --MENU-HEADER-BG-color:#dc1010; /* Background color of menu header */
     --MENU-HEADER-BORDER-color:#e23131; /*Color of menu header border */
 
@@ -109,3 +112,17 @@ a:hover {
 #body .tags a.tag-link:before {
     border-right-color: var(--MENU-HEADER-BG-color);
 }
+
+#homelinks {
+  background: var(--MENU-HEADER-BG-color);
+  background-color: var(--MENU-HEADER-BORDER-color);
+  border-bottom-color: var(--MENU-HEADER-BORDER-color);
+}
+
+#homelinks a {
+  color: var(--MENU-HOME-LINK-color);
+}
+
+#homelinks a:hover {
+  color: var(--MENU-HOME-LINK-HOVERED-color);
+}

static/css/theme.css

@@ -1127,6 +1127,13 @@ pre .copy-to-clipboard:hover {
     padding-left: 1rem;
 }
 
+#homelinks {
+  background-color: #9c6fb6;
+  color: #fff;
+  padding: 7px 0;
+  border-bottom: 4px solid #9c6fb6;
+}
+
 #searchResults {
     text-align: left;
 }