Fix smooth scroll for multi-language setup (#93)

README.md

@@ -54,6 +54,22 @@ languageCode: en-us
 title: "Toha"
 theme: "toha"
 
+# Manage languages
+# For any more details, you can check the official documentation: https://gohugo.io/content-management/multilingual/
+languages:
+  en:
+    languageName: English
+    weight: 1
+  fr:
+    languageName: Français
+    weight: 2
+  bn:
+    languageName: বাংলা
+    weight: 3
+
+# Force a locale to be use, really useful to develop the application ! Should be commented in production, the "weight" should rocks.
+# DefaultContentLanguage: fr
+
 # Allow raw html in markdown file
 markup:
   goldmark:
@@ -75,12 +91,6 @@ enableEmoji: true
 
 # Custom parameters
 params:
-  # Copyright Notice
-  copyright: © 2020 Copyright.
-
-  # Meta description for your site.  This will help the search engines to find your site.
-  description: Portfolio and personal blog of Jane Doe.
-
   # background image of the landing page
   background: "images/background.jpg"
 
@@ -88,8 +98,9 @@ params:
   # transparent navbar and the main logo will be used in the non-transparent navbar.
   # It will be default to the theme logos if not provided.
   logo:
-    main: /assets/images/main-logo.png
-    inverted: /assets/images/inverted-logo.png
+    main: assets/images/main-logo.png
+    inverted: assets/images/inverted-logo.png
+    favicon: assets/images/favicon.png
 
   # GitHub repo URL of your site
   gitRepo: https://github.com/hossainemruz/toha-example-site
@@ -100,33 +111,10 @@ params:
   # specify whether you want to show Table of Contents in reading page
   enableTOC: true
 
-  # specify the list of custom menus that you want to show in the top navbar.
-  # they will be separated by a divider from the main menus.
-  customMenus:
-  - name: Notes
-    url: https://hossainnotes.netlify.app/docs/example/
-
   # Provide newsletter configuration. This feature hasn't been implemented yet.
   # Currently, you can just hide it from the footer.
   newsletter:
     enable: true
-
-  # some information about you
-  author:
-    name: "Jane Doe"
-    nickname: "Jane"
-    image: "images/avatar.png"
-    # greeting message before your name. it will default to "Hi! I am" if not provided
-    greeting: "Hi, I am"
-    # give your some contact information. they will be used in the footer
-    contactInfo:
-      email: "janedoe@example.com"
-      phone: "+0123456789"
-    # a summary of what you do
-    summary:
-    - I am a Developer
-    - I work with Go
-    - I love to work with some fun projects
 ```
 
 You can just copy the content for `config.yaml` files from `theme/toha/exampleSite/config.yaml`.

exampleSite/config.yaml

@@ -15,8 +15,9 @@ languages:
   bn:
     languageName: বাংলা
     weight: 3
+
 # Force a locale to be use, really useful to develop the application ! Should be commented in production, the "weight" should rocks.
-#DefaultContentLanguage: fr
+# DefaultContentLanguage: fr
 
 # Allow raw html in markdown file
 markup:

exampleSite/data/bn/sections/about.yaml

@@ -1,6 +1,7 @@
 # section information
 section:
   name: আমার-সম্পর্কে
+  id: about
   enable: true
   weight: 1
   showOnNavbar: true

exampleSite/data/bn/sections/achievements.yaml

@@ -1,6 +1,7 @@
 # section information
 section:
   name: সাফল্য
+  id: achievements
   enable: true
   weight: 6
   showOnNavbar: true

exampleSite/data/bn/sections/experiences.yaml

@@ -1,6 +1,7 @@
 # section information
 section:
   name: অভিজ্ঞতা
+  id: experiences
   enable: true
   weight: 3
   showOnNavbar: true

exampleSite/data/bn/sections/projects.yaml

@@ -1,6 +1,7 @@
 # section information
 section:
   name: প্রোজেক্ট
+  id: projects
   enable: true
   weight: 4
   showOnNavbar: true

exampleSite/data/bn/sections/recent-posts.yaml

@@ -1,6 +1,7 @@
 # section information
 section:
   name: সাম্প্রতিক-পোস্ট
+  id: recent-posts
   enable: true
   weight: 5
   showOnNavbar: true

exampleSite/data/bn/sections/skills.yaml

@@ -1,6 +1,7 @@
 # section information
 section:
   name: দক্ষতা
+  id: skills
   enable: true
   weight: 2
   showOnNavbar: true

exampleSite/data/en/sections/about.yaml

@@ -1,6 +1,7 @@
 # section information
 section:
   name: About
+  id: about
   enable: true
   weight: 1
   showOnNavbar: true

exampleSite/data/en/sections/achievements.yaml

@@ -1,6 +1,7 @@
 # section information
 section:
   name: Achievements
+  id: achievements
   enable: true
   weight: 6
   showOnNavbar: true

exampleSite/data/en/sections/experiences.yaml

@@ -1,6 +1,7 @@
 # section information
 section:
   name: Experiences
+  id: experiences
   enable: true
   weight: 3
   showOnNavbar: true

exampleSite/data/en/sections/projects.yaml

@@ -1,6 +1,7 @@
 # section information
 section:
   name: Projects
+  id: projects
   enable: true
   weight: 4
   showOnNavbar: true

exampleSite/data/en/sections/recent-posts.yaml

@@ -1,6 +1,7 @@
 # section information
 section:
   name: Recent Posts
+  id: recent-posts
   enable: true
   weight: 5
   showOnNavbar: true

exampleSite/data/en/sections/skills.yaml

@@ -1,6 +1,7 @@
 # section information
 section:
   name: Skills
+  id: skills
   enable: true
   weight: 2
   showOnNavbar: true

exampleSite/data/fr/sections/about.yaml

@@ -1,6 +1,7 @@
 # section information
 section:
   name: "A propos"
+  id: about
   enable: true
   weight: 1
   showOnNavbar: true

exampleSite/data/fr/sections/achievements.yaml

@@ -1,6 +1,7 @@
 # section information
 section:
   name: Realisations
+  id: achievements
   enable: true
   weight: 6
   showOnNavbar: true

exampleSite/data/fr/sections/experiences.yaml

@@ -1,6 +1,7 @@
 # section information
 section:
   name: Experiences
+  id: experiences
   enable: true
   weight: 3
   showOnNavbar: true

exampleSite/data/fr/sections/projects.yaml

@@ -1,6 +1,7 @@
 # section information
 section:
   name: Projets
+  id: projects
   enable: true
   weight: 4
   showOnNavbar: true

exampleSite/data/fr/sections/recent-posts.yaml

@@ -1,6 +1,7 @@
 # section information
 section:
   name: Posts recents
+  id: recent-posts
   enable: true
   weight: 5
   showOnNavbar: true

exampleSite/data/fr/sections/skills.yaml

@@ -1,6 +1,7 @@
 # section information
 section:
   name: Competences
+  id: skills
   enable: true
   weight: 2
   showOnNavbar: true

layouts/partials/footer.html

@@ -25,9 +25,13 @@
         <ul>
           {{- range sort $sections "section.weight" }}
             {{ if and (.section.enable) (.section.showOnNavbar)}}
-            <li class="nav-item">
-              <a class="smooth-scroll" href="/#{{ replace (lower .section.name) " " "-" }}">{{ .section.name }}</a>
-            </li>
+              {{ $sectionID := replace (lower .section.name) " " "-"  }}
+              {{ if .section.id }}
+                {{ $sectionID = .section.id }}
+              {{ end }}
+              <li class="nav-item">
+                <a class="smooth-scroll" href="/#{{ $sectionID }}">{{ .section.name }}</a>
+              </li>
             {{ end }}
           {{- end }}
         </ul>

layouts/partials/navigators/navbar.html

@@ -36,8 +36,12 @@
         {{ if $sections }}
           {{ range sort $sections "section.weight" }}
             {{ if and (.section.enable) (.section.showOnNavbar)}}
+              {{ $sectionID := replace (lower .section.name) " " "-"  }}
+              {{ if .section.id }}
+                {{ $sectionID = .section.id }}
+              {{ end }}
               <li class="nav-item">
-                <a class="nav-link" href="#{{ replace (lower .section.name) " " "-" }}">{{ .section.name }}</a>
+                <a class="nav-link" href="#{{ $sectionID }}">{{ .section.name }}</a>
               </li>
             {{ end }}
           {{- end }}

layouts/partials/sections/about.html

@@ -1,4 +1,9 @@
-<div class="container anchor p-lg-5 about-section" id="{{ replace (lower .section.name) " " "-" }}">
+{{ $sectionID := replace (lower .section.name) " " "-"  }}
+{{ if .section.id }}
+  {{ $sectionID = .section.id }}
+{{ end }}
+
+<div class="container anchor p-lg-5 about-section" id="{{ $sectionID }}">
   <div class="row pt-sm-2 pt-md-4 align-self-center">
     <!-- summary -->
     <div class="col-sm-6">

layouts/partials/sections/achievements.html

@@ -1,4 +1,9 @@
-<div class="container-fluid anchor pb-5 achievements-section" id="{{ replace (lower .section.name) " " "-" }}">
+{{ $sectionID := replace (lower .section.name) " " "-"  }}
+{{ if .section.id }}
+  {{ $sectionID = .section.id }}
+{{ end }}
+
+<div class="container-fluid anchor pb-5 achievements-section" id="{{ $sectionID }}">
   {{ if not (.section.hideTitle) }}
     <h1 class="text-center">{{ .section.name }}</h1>
   {{ end }}

layouts/partials/sections/experiences.html

@@ -1,4 +1,9 @@
-<div class="container-fluid anchor pb-5 experiences-section" id="{{ replace (lower .section.name) " " "-" }}">
+{{ $sectionID := replace (lower .section.name) " " "-"  }}
+{{ if .section.id }}
+  {{ $sectionID = .section.id }}
+{{ end }}
+
+<div class="container-fluid anchor pb-5 experiences-section" id="{{ $sectionID }}">
   {{ if not (.section.hideTitle) }}
     <h1 class="text-center">{{ .section.name }}</h1>
   {{ end }}

layouts/partials/sections/home.html

@@ -48,7 +48,11 @@
     </ul>
     {{ if $sections }}
       {{ range first 1 (where (sort $sections "section.weight") ".section.enable" true) }}
-        <a href="#{{ replace (lower .section.name) " " "-" }}"><i class="arrow bounce fa fa-chevron-down"></i></a>
+        {{ $sectionID := replace (lower .section.name) " " "-"  }}
+        {{ if .section.id }}
+          {{ $sectionID = .section.id }}
+        {{ end }}
+        <a href="#{{ $sectionID }}"><i class="arrow bounce fa fa-chevron-down"></i></a>
       {{ end }}
     {{ end }}
   </div>

layouts/partials/sections/projects.html

@@ -1,4 +1,9 @@
-<div class="container-fluid anchor pb-5 projects-section" id="{{ replace (lower .section.name) " " "-" }}">
+{{ $sectionID := replace (lower .section.name) " " "-"  }}
+{{ if .section.id }}
+  {{ $sectionID = .section.id }}
+{{ end }}
+
+<div class="container-fluid anchor pb-5 projects-section" id="{{ $sectionID }}">
   {{ if not (.section.hideTitle) }}
     <h1 class="text-center">{{ .section.name }}</h1>
   {{ end }}

layouts/partials/sections/recent-posts.html

@@ -1,4 +1,9 @@
-<div class="container-fluid anchor pb-5 recent-posts-section" id="{{ replace (lower .section.name) " " "-" }}">
+{{ $sectionID := replace (lower .section.name) " " "-"  }}
+{{ if .section.id }}
+  {{ $sectionID = .section.id }}
+{{ end }}
+
+<div class="container-fluid anchor pb-5 recent-posts-section" id="{{ $sectionID }}">
   {{ if not (.section.hideTitle) }}
     <h1 class="text-center">{{ .section.name }}</h1>
   {{ end }}

layouts/partials/sections/skills.html

@@ -1,4 +1,9 @@
-<div class="container-fluid anchor pb-5 skills-section" id="{{ replace (lower .section.name) " " "-" }}">
+{{ $sectionID := replace (lower .section.name) " " "-"  }}
+{{ if .section.id }}
+  {{ $sectionID = .section.id }}
+{{ end }}
+
+<div class="container-fluid anchor pb-5 skills-section" id="{{ $sectionID }}">
   {{ if not (.section.hideTitle) }}
     <h1 class="text-center">{{ .section.name }}</h1>
   {{ end }}

static/assets/js/main.js

@@ -64,6 +64,8 @@ var isMobile = false, isTablet = false, isLaptop = false;
                   $target.focus(); // Set focus again
                 };
               });
+              // Add hash (#) to URL when done scrolling (default click behavior)
+              window.location.hash = this.hash
             }
           }
         });