Translations and i18n (#60)

* Managing i18n

* Fix absolute path

* Config files

* Home link manage langage

* Fixing footer i18n

* Implemented i18n on newsletter

* Implemented two languages in example

* Removed old section directory

* Using yaml in data to organize home summary

* Fully working for old versions without i18n

* Integrating language menu CSS

* Fix language dropdown CSS

* Refactor translation codes

* Remove duplicate code

* Fix URL issues

* Move customMenus and other site related config into data section

* Fix error during language toggle

* Only show the available translation for the posts

* Handle navbar brand URL properly

* Fix responsiveness

Co-authored-by: Hugo MARTIN <hugo.martin.69@gmail.com>
Co-authored-by: hossainemruz <emruz@appscode.com>

exampleSite/config.yaml

@@ -3,6 +3,21 @@ 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:
@@ -24,12 +39,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"
 
@@ -37,9 +46,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
-    favicon: /assets/images/favicon.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
@@ -50,30 +59,7 @@ 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

exampleSite/data/bn/author.yaml

@@ -0,0 +1,16 @@
+# some information about you
+name: "জেইন ডো"
+nickname: "জেইন"
+# greeting message before your name. it will default to "Hi! I am" if not provided
+greeting: "হ্যালো, আমি হলাম"
+image: "images/avatar.png"
+# give your some contact information. they will be used in the footer
+contactInfo:
+  email: "janedoe@example.com"
+  phone: "+0123456789"
+
+# some summary about what you do
+summary:
+  - আমি একজন ডেভেলপার
+  - আমি ওপেন সোর্স প্রোজেক্ট এ কাজ করতে পছন্দ করি
+  - আমি মজার কিছু প্রোজেক্ট এ কাজ করতে ভালবাসি

exampleSite/data/bn/sections/about.yaml

@@ -0,0 +1,77 @@
+# section information
+section:
+  name: আমার-সম্পর্কে
+  enable: true
+  weight: 1
+  showOnNavbar: true
+  template: sections/about.html
+
+# your designation
+designation: Software Engineer
+# your company information
+company:
+  name: Example Co.
+  url: "https://www.example.com"
+
+# your resume. this file path should be relative to you "static" directory
+resume: "files/resume.pdf"
+
+# a summary about you
+summary: 'I am a passionate software engineer with x years of working experience. I built OSS tools for [Kubernetes](https://kubernetes.io/) using GO. My tools help people to deploy their workloads in Kubernetes. Sometimes, I work on some fun projects such as writing a theme, etc.'
+
+# your social links
+# give as many as you want. use font-awesome for the icons.
+socialLinks:
+- name: Email
+  icon: "fas fa-envelope"
+  url: "example@gmail.com"
+
+- name: Github
+  icon: "fab fa-github"
+  url: "https://www.github.com/example"
+
+- name: Stackoverflow
+  icon: "fab fa-stack-overflow"
+  url: "#"
+
+- name: LinkedIn
+  icon: "fab fa-linkedin"
+  url: "#"
+
+- name: Twitter
+  icon: "fab fa-twitter"
+  url: "#"
+
+- name: Facebook
+  icon: "fab fa-facebook"
+  url: "#"
+
+# your soft skills
+# give the percentage between 50 to 100 with 5 intervals.
+# currently supported colors: blue, yellow, pink, green, sky, orange
+softSkills:
+- name: Leadership
+  percentage: 85
+  color: blue
+- name: Team Work
+  percentage: 90
+  color: yellow
+- name: Communication
+  percentage: 85
+  color: pink
+- name: Hard Working
+  percentage: 85
+  color: green
+- name: Fast Learner
+  percentage: 85
+  color: sky
+- name: Problem Solving
+  percentage: 85
+  color: orange
+# you can also provide color code instead of pre-defined color name
+# - name: Example 1
+#   percentage: 75
+#   color: "#00adb5"
+# - name: Example 2
+#   percentage: 65
+#   color: "#8b8383"

exampleSite/data/bn/sections/achievements.yaml

@@ -0,0 +1,24 @@
+# section information
+section:
+  name: সাফল্য
+  enable: true
+  weight: 6
+  showOnNavbar: true
+  template: sections/achievements.html
+  # Can optionally hide the title in sections
+  # hideTitle: true
+
+# Your achievements achievements
+achievements:
+- title: Best Presenter
+  image: images/achievements/presenter.jpg
+  summary: Best presenter in the 2020 XYZ conference.
+- title: Champion
+  image: images/achievements/sport.jpg
+  summary: Champion in cycling inter-city cycling championship 2020.
+- title: Graduation
+  image: images/achievements/graduation-cap.jpg
+  summary: Received Bachelor of Science (B.Sc.) in Computer Science and Engineer from XYZ University.
+- title: Award Winner
+  image: images/achievements/woman-winner.jpg
+  summary: Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus architecto minus facere vero?

exampleSite/data/bn/sections/experiences.yaml

@@ -0,0 +1,64 @@
+# section information
+section:
+  name: অভিজ্ঞতা
+  enable: true
+  weight: 3
+  showOnNavbar: true
+  template: sections/experiences.html
+  # Can optionally hide the title in sections
+  # hideTitle: true 
+
+# Your experiences
+experiences:
+- company:
+    name: Example Co.
+    url: "https://www.example.com"
+    location: Dhaka Branch
+    # company overview
+    overview: Example Co. is a widely recognized company for cloud-native development. It builds tools for Kubernetes.
+  positions:
+  - designation: Senior Software Engineer
+    start: Nov 2019
+    # don't provide end date if you are currently working there. It will be replaced by "Present"
+    # end: Dec 2020
+    # give some points about what was your responsibilities at the company.
+    responsibilities:
+    - Design and develop XYZ tool for ABC task
+    - Design, develop and manage disaster recovery tool [Xtool](https://www.example.com) that backup Kubernetes volumes, databases, and cluster's resource definition.
+    - Lead backend team.
+
+  - designation: Junior Software Engineer
+    start: Nov 2017
+    end: Oct 2019
+    responsibilities:
+    - Implement and test xyz feature for abc tool.
+    - Support client for abc tool.
+    - Learn k,d,w technology for xyz.
+
+- company:
+    name: PreExample Co.
+    url: "https://www.preexample.com"
+    location: Nowhere
+    overview: PreExample Co. is a gateway company to enter into Example co. So, nothing special here.
+  positions:
+  - designation: Software Engineer
+    start: March 2016
+    end: May 2017
+    responsibilities:
+    - Write lots of example codes.
+    - Read lots of examples.
+    - See lots of example videos.
+
+- company:
+    name: Intern Counting Company (ICC).
+    url: "https://www.intern.com"
+    location: Intern Land
+    overview: Intern counting Company (ICC) is responsible for counting worldwide intern Engineers.
+  positions:
+  - designation: Intern
+    start: Jun 2015
+    end: Jan 2016
+    responsibilities:
+    - Count lost of interns.
+    - Count more interns.
+    - Count me as an intern.

exampleSite/data/bn/sections/projects.yaml

@@ -0,0 +1,64 @@
+# section information
+section:
+  name: প্রোজেক্ট
+  enable: true
+  weight: 4
+  showOnNavbar: true
+  template: sections/projects.html
+  # Can optionally hide the title in sections
+  # hideTitle: true
+
+# filter buttons
+buttons:
+- name: All
+  filter: "all"
+- name: Professional
+  filter: "professional"
+- name: Academic
+  filter: "academic"
+- name: Hobby
+  filter: "hobby"
+
+# your projects
+projects:
+- name: Kubernetes
+  logo: images/projects/kubernetes.png
+  role: Contributor
+  timeline: "March 2018 - Present"
+  repo: https://github.com/kubernetes/kubernetes # If your project is a public repo on GitHub, then provide this link. it will show star count.
+  #url: ""  # If your project is not a public repo but it has a website or any external details url then provide it here. don't provide "repo" and "url" simultaneously.
+  summary: Production-Grade Container Scheduling and Management.
+  tags: ["professional", "kubernetes", "cloud"]
+
+- name: Tensorflow
+  logo: images/projects/tensorflow.png
+  role: Developer
+  timeline: "Jun 2018 - Present"
+  repo: https://github.com/tensorflow/tensorflow
+  #url: ""
+  summary: An Open Source Machine Learning Framework for Everyone.
+  tags: ["professional", "machine-learning","academic"]
+
+- name: A sample academic paper
+  role: Team Lead
+  timeline: "Jan 2017 - Nov 2017"
+  url: "https://www.example.com"
+  summary: Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente eius reprehenderit animi suscipit autem eligendi esse amet aliquid error eum. Accusantium distinctio soluta aliquid quas placeat modi suscipit eligendi nisi.
+  tags: ["academic","iot"]
+
+- name: Nocode
+  logo: images/projects/no-code.png
+  role: Nothing
+  timeline: "Oct 2019 - Dec 2019"
+  repo: https://github.com/kelseyhightower/nocode
+  #url: ""
+  summary: The best way to write secure and reliable applications. Write nothing; deploy nowhere.
+  tags: ["hobby", "fun"]
+
+- name: Toha
+  logo: images/projects/toha.png
+  role: Owner
+  timeline: "Jun 2019 - Present"
+  repo: https://github.com/hossainemruz/toha
+  summary: A Hugo theme for personal portfolio.
+  tags: ["hobby","hugo","theme","professional"]

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

@@ -0,0 +1,11 @@
+# section information
+section:
+  name: সাম্প্রতিক-পোস্ট
+  enable: true
+  weight: 5
+  showOnNavbar: true
+  template: sections/recent-posts.html
+  # Can optionally hide the title in sections
+  # hideTitle: true
+
+# no additional configuration is required

exampleSite/data/bn/sections/skills.yaml

@@ -0,0 +1,49 @@
+# section information
+section:
+  name: দক্ষতা
+  enable: true
+  weight: 2
+  showOnNavbar: true
+  template: sections/skills.html
+  # Can optionally hide the title in sections
+  # hideTitle: true
+
+# Your Skills.
+# Give a summary of you each skill in the summary section.
+skills:
+- name: Kubernetes
+  icon: "images/skills/kubernetes.png"
+  summary: "Capable of deploying, managing application on Kubernetes. Experienced in writing Kubernetes controllers for CRDs."
+  url: "https://kubernetes.io/"
+
+- name: Go Development
+  icon: "images/skills/go.png"
+  summary: "Using as the main language for professional development. Capable of writing scalable, testable, and maintainable program."
+  url: "https://golang.org/"
+
+- name: Cloud Computing
+  icon: "images/skills/cloud.png"
+  summary: "Worked with most of the major clouds such as GCP, AWS, Azure etc."
+
+- name: Docker
+  icon: "images/skills/docker.svg"
+  summary: "Write most of the programs as dockerized container. Experienced with multi-stage, multi-arch build process."
+  url: "https://www.docker.com/"
+
+- name: Prometheus
+  icon: "images/skills/prometheus.png"
+  summary: "Capable of setup, configure Prometheus metrics. Experienced with PromQL, AlertManager. Also, experienced with writing metric exporters."
+  url: "https://prometheus.io/"
+
+- name: Linux
+  icon: "images/skills/linux.png"
+  summary: "Using as the main operating system. Capable of writing bash/shell scripts."
+
+- name: Git
+  icon: "images/skills/git.png"
+  summary: "Experienced with git-based development. Mostly, use Github. Also, have experience in working with GitLab."
+  url: "https://git-scm.com/"
+
+- name: C++
+  icon: "images/skills/c++.png"
+  summary: "Know basic C/C++ programming. Used for contest programming and problem solving."

exampleSite/data/bn/site.yaml

@@ -0,0 +1,11 @@
+# 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.
+
+# 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: নোটসমুহ
+  url: https://hossainemruz.gitbook.io/

exampleSite/data/en/author.yaml

@@ -0,0 +1,18 @@
+# some information about you
+name: "Jane Doe"
+nickname: "Jane"
+# greeting message before your name. it will default to "Hi! I am" if not provided
+greeting: "Hi, I am"
+image: "images/avatar.png"
+# give your some contact information. they will be used in the footer
+contactInfo:
+  email: "janedoe@example.com"
+  phone: "+0123456789"
+
+# some summary about what you do
+summary:
+  - I am a Developer
+  - I am a Devops
+  - I love servers
+  - I work on open-source projects
+  - I love to work with some fun projects

exampleSite/data/sections/about.yaml → exampleSite/data/en/sections/about.yaml

@@ -4,6 +4,7 @@ section:
   enable: true
   weight: 1
   showOnNavbar: true
+  template: sections/about.html
 
 # your designation
 designation: Software Engineer

exampleSite/data/en/site.yaml

@@ -0,0 +1,11 @@
+# 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.
+
+# 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://hossainemruz.gitbook.io/

exampleSite/data/fr/author.yaml

@@ -0,0 +1,19 @@
+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: "Bonjour, je suis"
+
+# give your some contact information. they will be used in the footer
+contactInfo:
+  email: "janedoe@example.com"
+  phone: "+0123456789"
+
+# some summary about what you do
+summary:
+  - Je suis un développeur
+  - Je suis un Devops
+  - J'aime les serveurs
+  - Je travaille sur des projets open-source
+  - J'aime travailler avec des projets amusants

exampleSite/data/fr/sections/about.yaml

@@ -0,0 +1,77 @@
+# section information
+section:
+  name: "A propos"
+  enable: true
+  weight: 1
+  showOnNavbar: true
+  template: sections/about.html
+
+# your designation
+designation: "Développeur logiciel"
+# your company information
+company:
+  name: Example Co.
+  url: "https://www.example.com"
+
+# your resume. this file path should be relative to you "static" directory
+resume: "files/resume.pdf"
+
+# a summary about you
+summary: "Je suis un ingénieur en logiciel passionné, avec x années d'expérience professionnelle. J'ai construit des outils OSS pour [Kubernetes](https://kubernetes.io/) en utilisant GO. Mes outils aident les gens à déployer leurs charges de travail dans Kubernetes. Parfois, je travaille sur des projets amusants comme l'écriture d'un thème, etc."
+
+# your social links
+# give as many as you want. use font-awesome for the icons.
+socialLinks:
+- name: Email
+  icon: "fas fa-envelope"
+  url: "example@gmail.com"
+
+- name: Github
+  icon: "fab fa-github"
+  url: "https://www.github.com/example"
+
+- name: Stackoverflow
+  icon: "fab fa-stack-overflow"
+  url: "#"
+
+- name: LinkedIn
+  icon: "fab fa-linkedin"
+  url: "#"
+
+- name: Twitter
+  icon: "fab fa-twitter"
+  url: "#"
+
+- name: Facebook
+  icon: "fab fa-facebook"
+  url: "#"
+
+# your soft skills
+# give the percentage between 50 to 100 with 5 intervals.
+# currently supported colors: blue, yellow, pink, green, sky, orange
+softSkills:
+- name: Chef de projet
+  percentage: 85
+  color: blue
+- name: Travail d'équipe
+  percentage: 90
+  color: yellow
+- name: Communication
+  percentage: 85
+  color: pink
+- name: Persévérant
+  percentage: 85
+  color: green
+- name: Autonome
+  percentage: 85
+  color: sky
+- name: Logique
+  percentage: 85
+  color: orange
+# you can also provide color code instead of pre-defined color name
+# - name: Example 1
+#   percentage: 75
+#   color: "#00adb5"
+# - name: Example 2
+#   percentage: 65
+#   color: "#8b8383"

exampleSite/data/fr/sections/achievements.yaml

@@ -0,0 +1,24 @@
+# section information
+section:
+  name: Realisations
+  enable: true
+  weight: 6
+  showOnNavbar: true
+  template: sections/achievements.html
+  # Can optionally hide the title in sections
+  # hideTitle: true
+
+# Your achievements achievements
+achievements:
+- title: Meilleur présentateur
+  image: images/achievements/presenter.jpg
+  summary: Meilleur présentateur de la conférence XYZ 2020.
+- title: Champion
+  image: images/achievements/sport.jpg
+  summary: Champion du championnat cycliste interurbain 2020.
+- title: Remise des diplômes
+  image: images/achievements/graduation-cap.jpg
+  summary: J'ai obtenu une licence en sciences (B.Sc.) en informatique et en ingénierie à l'université XYZ.
+- title: Lauréat du prix
+  image: images/achievements/woman-winner.jpg
+  summary: Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus architecto minus facere vero?

exampleSite/data/fr/sections/experiences.yaml

@@ -0,0 +1,64 @@
+# section information
+section:
+  name: Experiences
+  enable: true
+  weight: 3
+  showOnNavbar: true
+  template: sections/experiences.html
+  # Can optionally hide the title in sections
+  # hideTitle: true 
+
+# Your experiences
+experiences:
+- company:
+    name: Example Co.
+    url: "https://www.example.com"
+    location: Dhaka Branch
+    # company overview
+    overview: Example Co. est une entreprise largement reconnue pour le développement de l'utilisation des nuages. Elle construit des outils pour Kubernetes.
+  positions:
+  - designation: Ingénieur logiciel senior
+    start: Nov 2019
+    # don't provide end date if you are currently working there. It will be replaced by "Present"
+    # end: Dec 2020
+    # give some points about what was your responsibilities at the company.
+    responsibilities:
+    - Concevoir et développer l'outil XYZ pour la tâche ABC.
+    - Concevoir, développer et gérer l'outil de reprise après sinistre [Xtool](https://www.example.com) qui sauvegarde les volumes, les bases de données et la définition des ressources du cluster de Kubernetes.
+    - Diriger l'équipe de soutien.
+
+  - designation: Ingénieur logiciel junior
+    start: Nov 2017
+    end: Oct 2019
+    responsibilities:
+    - Implémenter et tester la fonction xyz pour l'outil abc.
+    - Support client pour abc tool.
+    - Apprendre la technologie k,d,w pour xyz.
+
+- company:
+    name: PreExample Co.
+    url: "https://www.preexample.com"
+    location: Nowhere
+    overview: PreExample Co. est une société passerelle pour entrer dans Example co. Donc, rien de spécial ici.
+  positions:
+  - designation: Ingénieur logiciel
+    start: Mars 2016
+    end: Mai 2017
+    responsibilities:
+    - Rédigez de nombreux exemples de codes.
+    - Lire de nombreux exemples.
+    - Voir de nombreux exemples de vidéos.
+
+- company:
+    name: Intern Counting Company (ICC).
+    url: "https://www.intern.com"
+    location: Intern Land
+    overview: La Compagnie de comptage des stagiaires (ICC) est responsable du comptage des ingénieurs stagiaires du monde entier.
+  positions:
+  - designation: Stagiaire
+    start: Juin 2015
+    end: Jan 2016
+    responsibilities:
+    - Compte perdu des stagiaires.
+    - Comptez plus de stagiaires.
+    - Comptez-moi comme un stagiaire.

exampleSite/data/fr/sections/projects.yaml

@@ -0,0 +1,64 @@
+# section information
+section:
+  name: Projets
+  enable: true
+  weight: 4
+  showOnNavbar: true
+  template: sections/projects.html
+  # Can optionally hide the title in sections
+  # hideTitle: true
+
+# filter buttons
+buttons:
+- name: All
+  filter: "all"
+- name: Professionnel
+  filter: "professionnel"
+- name: Ecole
+  filter: "ecole"
+- name: Hobby
+  filter: "hobby"
+
+# your projects
+projects:
+- name: Kubernetes
+  logo: images/projects/kubernetes.png
+  role: Contributeur
+  timeline: "Mars 2018 - Présent"
+  repo: https://github.com/kubernetes/kubernetes # If your project is a public repo on GitHub, then provide this link. it will show star count.
+  #url: ""  # If your project is not a public repo but it has a website or any external details url then provide it here. don't provide "repo" and "url" simultaneously.
+  summary: Planification et gestion des conteneurs de qualité production.
+  tags: ["professionnel", "kubernetes", "cloud"]
+
+- name: Tensorflow
+  logo: images/projects/tensorflow.png
+  role: Développeur
+  timeline: "Juin 2018 - Présent"
+  repo: https://github.com/tensorflow/tensorflow
+  #url: ""
+  summary: Un cadre d'apprentissage machine à source ouverte pour tous.
+  tags: ["professionnel", "machine-learning","ecole"]
+
+- name: Un exemple d'article académique
+  role: Chef d'équipe
+  timeline: "Janvier 2017 - Novembre 2017"
+  url: "https://www.example.com"
+  summary: Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente eius reprehenderit animi suscipit autem eligendi esse amet aliquid error eum. Accusantium distinctio soluta aliquid quas placeat modi suscipit eligendi nisi.
+  tags: ["ecole","iot"]
+
+- name: Nocode
+  logo: images/projects/no-code.png
+  role: Rien
+  timeline: "Oct 2019 - Dec 2019"
+  repo: https://github.com/kelseyhightower/nocode
+  #url: ""
+  summary: La meilleure façon de rédiger des demandes sûres et fiables. N'écrivez rien, ne déployez rien.
+  tags: ["hobby", "fun"]
+
+- name: Toha
+  logo: images/projects/toha.png
+  role: Owner
+  timeline: "Juin 2019 - Présent"
+  repo: https://github.com/hossainemruz/toha
+  summary: Un thème Hugo pour le portfolio personnel.
+  tags: ["hobby","hugo","theme","professionnel"]

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

@@ -0,0 +1,11 @@
+# section information
+section:
+  name: Posts recents
+  enable: true
+  weight: 5
+  showOnNavbar: true
+  template: sections/recent-posts.html
+  # Can optionally hide the title in sections
+  # hideTitle: true
+
+# no additional configuration is required

exampleSite/data/fr/sections/skills.yaml

@@ -0,0 +1,49 @@
+# section information
+section:
+  name: Competences
+  enable: true
+  weight: 2
+  showOnNavbar: true
+  template: sections/skills.html
+  # Can optionally hide the title in sections
+  # hideTitle: true
+
+# Your Skills.
+# Give a summary of you each skill in the summary section.
+skills:
+- name: Kubernetes
+  icon: "images/skills/kubernetes.png"
+  summary: "Capable de déployer, de gérer l'application sur Kubernetes. Expérimenté dans la rédaction de contrôleurs Kubernetes pour les CRD."
+  url: "https://kubernetes.io/"
+
+- name: Go
+  icon: "images/skills/go.png"
+  summary: "Utiliser comme langue principale pour le développement professionnel. Capable d'écrire des programmes évolutifs, testables et maintenables."
+  url: "https://golang.org/"
+
+- name: Cloud Computing
+  icon: "images/skills/cloud.png"
+  summary: "A travaillé avec la plupart des principaux nuages tels que GCP, AWS, Azure, etc."
+
+- name: Docker
+  icon: "images/skills/docker.svg"
+  summary: "Inscrivez la plupart des programmes en tant que conteneur déchargé. Expérimenté dans le processus de construction en plusieurs étapes et en plusieurs arcs."
+  url: "https://www.docker.com/"
+
+- name: Prometheus
+  icon: "images/skills/prometheus.png"
+  summary: "Capable d'installation, de configurer les métriques de Prometheus. Expérimenté avec PromQL, AlertManager. Expérimenté également dans la rédaction d'exportateurs de métriques."
+  url: "https://prometheus.io/"
+
+- name: Linux
+  icon: "images/skills/linux.png"
+  summary: "Utilisé comme système d'exploitation principal. Capable d'écrire des scripts bash/shell."
+
+- name: Git
+  icon: "images/skills/git.png"
+  summary: "Expérimenté dans le développement basé sur les GIT. Surtout, utilisez Github. Avoir également une expérience de travail avec GitLab."
+  url: "https://git-scm.com/"
+
+- name: C++
+  icon: "images/skills/c++.png"
+  summary: "Connaître les bases de la programmation C/C++. Utilisé pour la programmation de concours et la résolution de problèmes."

exampleSite/data/fr/site.yaml

@@ -0,0 +1,11 @@
+# Copyright Notice
+copyright: © 2020 Droits d'auteur.
+
+# Meta description for your site.  This will help the search engines to find your site.
+description: Portfolio et blog personnel de Jane Doe.
+
+# 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: Remarques
+  url: https://hossainemruz.gitbook.io/

i18n/bn.toml

@@ -0,0 +1,30 @@
+# More documentation here: https://github.com/nicksnyder/go-i18n
+[home]
+other = "হোম"
+
+[posts]
+other = "পোষ্ট সমূহ"
+
+[resume]
+other = "আমার জীবনবৃত্তান্ত"
+
+[navigation]
+other = "নেভিগেশন"
+
+[contact_me]
+other = "আমার সাথে যোগাযোগ করুনঃ"
+
+[newsletter_text]
+other = "ইমেইল নোটিফিকেশান এর মাধ্যমে সর্বশেষ তথ্য জানুন"
+
+[newsletter_input_placeholder]
+other = "ইমেইল প্রবেশ করান"
+
+[newsletter_warning]
+other = "আমরা আপনার ইমেল অন্য কারও সাথে শেয়ার করব না।"
+
+[submit]
+other = "জমা দিন"
+
+[hugoAttributionText]
+other = "পাওয়ারড বাই"

i18n/en.toml

@@ -0,0 +1,30 @@
+# More documentation here: https://github.com/nicksnyder/go-i18n
+[home]
+other = "Home"
+
+[posts]
+other = "Posts"
+
+[resume]
+other = "My resume"
+
+[navigation]
+other = "Navigation"
+
+[contact_me]
+other = "Contact me:"
+
+[newsletter_text]
+other = "Stay up to date with email notification"
+
+[newsletter_input_placeholder]
+other = "Enter email"
+
+[newsletter_warning]
+other = "We'll never share your email with anyone else."
+
+[submit]
+other = "Submit"
+
+[hugoAttributionText]
+other = "Powered by"

i18n/fr.toml

@@ -0,0 +1,30 @@
+# More documentation here: https://github.com/nicksnyder/go-i18n
+[home]
+other = "Accueil"
+
+[posts]
+other = "Des postes"
+
+[resume]
+other = "Mon Curriculum vitæ"
+
+[navigation]
+other = "Naviguation"
+
+[contact_me]
+other = "Contactez moi :"
+
+[newsletter_text]
+other = "Restez à jour par e-mail"
+
+[newsletter_input_placeholder]
+other = "Entrez une adresse e-mail"
+
+[newsletter_warning]
+other = "Nous ne partagerons jamais votre courriel avec quelqu'un d'autre."
+
+[submit]
+other = "Envoyer"
+
+[hugoAttributionText]
+other = "Alimenté par"

layouts/_default/list.html

@@ -8,13 +8,18 @@
 {{ end }}
 
 {{ define "sidebar" }}
+  {{ $blogHome:="#" }}
+  {{ if site.IsMultiLingual }}
+    {{ $blogHome = (path.Join (cond ( eq .Language.Lang "en") "" .Language.Lang) "post") }}
+  {{ end }}
+
   <section class="sidebar-section" id="sidebar-section">
     <div class="sidebar-holder">
       <div class="sidebar" id="sidebar">
         <input type="text" value="" placeholder="Search" data-search="" id="search-box" />
         <div class="sidebar-tree">
           <ul class="tree" id="tree">
-            <li id="list-heading"><a href="/posts" data-filter="all">Posts</a></li>
+            <li id="list-heading"><a href="#" data-filter="all">Posts</a></li>
             <div class="subtree">
                 {{ partial "navigators/sidebar.html" (dict "menus" .Site.Menus.sidebar "ctx" .) }}
             </div>

layouts/_default/single.html

@@ -19,7 +19,7 @@
         <input type="text" value="" placeholder="Search" data-search="" id="search-box" />
         <div class="sidebar-tree">
           <ul class="tree" id="tree">
-            <li id="list-heading"><a href="/posts" data-filter="all">Posts</a></li>
+            <li id="list-heading"><a href="{{ site.BaseURL | absLangURL }}post" data-filter="all">Posts</a></li>
             <div class="subtree">
                 {{ partial "navigators/sidebar.html" (dict "menus" .Site.Menus.sidebar "ctx" .) }}
             </div>
@@ -75,6 +75,9 @@
       </div>
     </div>
   </div>
+  {{ if .IsTranslated }}
+    {{ partial "navigators/floating-lang-selector.html" . }}
+  {{ end }}
 </section>
 {{ end }}
 

layouts/index.html

@@ -29,9 +29,14 @@
     {{- partial "sections/home.html" . -}}
 
     <!--- ADD OPTIONAL SECTIONS ----------->
-    {{ if .Site.Data.sections }}
+    {{ $sections:= .Site.Data.sections }}
+    {{ if (index .Site.Data .Site.Language.Lang).sections }}
+      {{ $sections = (index .Site.Data .Site.Language.Lang).sections }}
+    {{ end }}
+
+    {{ if $sections }}
       {{ $background:= "bg-white"}}
-      {{ range sort .Site.Data.sections "section.weight" }}
+      {{ range sort $sections "section.weight" }}
         {{ if .section.enable }}
           <div class="container-fluid section-holder d-flex {{ $background }}">
             {{ if .section.template }}

layouts/partials/cards/post.html

@@ -1,5 +1,5 @@
 <div class="post-card">
-  <a href="{{ .RelPermalink }}" class="post-card-link">
+  <a href="{{ .RelPermalink | relLangURL }}" class="post-card-link">
     <div class="card">
       <div class="card-head">
         <img class="card-img-top" src='{{ partial "helpers/get-hero.html" . }}'/>
@@ -11,7 +11,7 @@
       <div class="card-footer">
         <span class="float-left">{{ .Date.Format "January 2, 2006" }}</span>
         <a
-        href="{{ .RelPermalink }}"
+        href="{{ .RelPermalink | relLangURL }}"
         class="float-right btn btn-outline-info btn-sm"
         >Read</a
         >

layouts/partials/cards/project.html

@@ -8,7 +8,7 @@
         <div>
           <div class="d-flex">
             {{ if .logo }}
-            <img class="card-img-xs" src="{{ .logo }}" alt="{{ .name }}" />
+            <img class="card-img-xs" src="{{ .logo | absURL }}" alt="{{ .name }}" />
             {{ end }}
             <h5 class="card-title mb-0">{{ .name }}</h5>
           </div>

layouts/partials/cards/skill.html

@@ -3,7 +3,7 @@
     <div class="card">
       <div class="card-head d-flex">
         {{ if .icon }}
-        <img class="card-img-xs" src="{{ .icon }}" alt="{{ .name }}" />
+        <img class="card-img-xs" src="{{ .icon | absURL }}" alt="{{ .name }}" />
         {{ end }}
         <h5 class="card-title">{{ .name }}</h5>
       </div>

layouts/partials/footer.html

@@ -1,11 +1,29 @@
+{{ $author:= .Site.Data.author }}
+{{ if (index .Site.Data .Site.Language.Lang).author }}
+  {{ $author = (index .Site.Data .Site.Language.Lang).author }}
+{{ end }}
+
+{{ $sections:= .Site.Data.sections }}
+{{ if (index .Site.Data .Site.Language.Lang).sections }}
+  {{ $sections = (index .Site.Data .Site.Language.Lang).sections }}
+{{ end }}
+
+{{ $copyrightNotice := "© 2020 Copyright."}}
+{{ if (index .Site.Data .Site.Language.Lang).site }}
+  {{ $siteConfig := (index .Site.Data .Site.Language.Lang).site }}
+  {{ if $siteConfig.copyright }}
+    {{ $copyrightNotice = $siteConfig.copyright }}
+  {{ end }}
+{{ end }}
+
 <footer class="container-fluid text-center align-content-center footer pb-2">
   <div class="container pt-5">
     <div class="row text-left">
       <div class="col-md-4 col-sm-12">
-        <h5>Navigation</h5>
-        {{ if .Site.Data.sections }}
+        <h5>{{ i18n "navigation" }}</h5>
+        {{ if $sections }}
         <ul>
-          {{- range sort .Site.Data.sections "section.weight" }}
+          {{- 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>
@@ -16,18 +34,20 @@
         {{ end }}
 
       </div>
+      {{ if $author }}
       <div class="col-md-4 col-sm-12">
-        <h5>Contact Me</h5>
+        <h5>{{ i18n "contact_me" }}</h5>
         <ul>
-          {{ range $key,$value:=.Site.Params.author.contactInfo }}
+          {{ range $key,$value:= $author.contactInfo }}
           <li><span>{{ title $key }}: </span> <span>{{ $value }}</span></li>
           {{ end }}
         </ul>
       </div>
+      {{ end }}
       {{ if .Site.Params.newsletter.enable }}
       <div class="col-md-4 col-sm-12">
         <!-- <h5>Newsletter</h5> -->
-        <p>Stay up to date with email notification</p>
+        <p>{{ i18n "newsletter_text" }}</p>
         <form>
           <div class="form-group">
             <input
@@ -35,13 +55,13 @@
               class="form-control"
               id="exampleInputEmail1"
               aria-describedby="emailHelp"
-              placeholder="Enter email"
+              placeholder="{{ i18n "newsletter_input_placeholder" }}"
             />
             <small id="emailHelp" class="form-text text-muted"
-              >We'll never share your email with anyone else.</small
+              >{{ i18n "newsletter_warning" }}</small
             >
           </div>
-          <button type="submit" class="btn btn-info">Submit</button>
+          <button type="submit" class="btn btn-info">{{ i18n "submit" }}</button>
         </form>
       </div>
       {{ end }}
@@ -56,9 +76,9 @@
           Toha
         </a>
       </div>
-      <div class="col-md-4 text-center">{{ if .Site.Params.copyright }}{{ .Site.Params.copyright }}{{ else }}© 2020 Copyright.{{ end }}</div>
+      <div class="col-md-4 text-center">{{ $copyrightNotice }}</div>
       <div class="col-md-4 text-right">
-        <a id="hugo" href="https://gohugo.io/">Powered by Hugo
+        <a id="hugo" href="https://gohugo.io/">{{ i18n "hugoAttributionText" }}
         <img
           src="/assets/images/hugo-logo-wide.svg"
           alt="Hugo Logo"

layouts/partials/header.html

@@ -13,7 +13,7 @@
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" />
 
 <!--================= fab-icon =========================-->
-<link rel="icon" type="image/png" href="{{ .Site.Params.logo.favicon | default "/assets/images/favicon.png"}}" />
+<link rel="icon" type="image/png" href="{{ .Site.Params.logo.favicon | default "/assets/images/favicon.png" | absURL }}" />
 
 <!--================= custom style overrides =========================-->
 <link rel="stylesheet" href="/assets/css/style.css" />

layouts/partials/helpers/country-code.html

@@ -0,0 +1,13 @@
+{{ $languageCode:= .Lang }}
+{{/*  by default the language code and the country code are same  */}}
+{{ $countryCode:= $languageCode }}
+
+{{/*  language code and country code are not same for some countries. we need to fix them.  */}}
+{{ if eq $languageCode "en" }}
+   {{ $countryCode = "gb" }}
+{{ else if  eq $languageCode "bn" }}
+    {{ $countryCode = "bd" }}
+{{ end }}
+
+{{/*  return the country code  */}}
+{{ return $countryCode }}

layouts/partials/navigators/floating-lang-selector.html

@@ -0,0 +1,19 @@
+{{ $pageURL:= .RelPermalink }}
+{{ if .Site.IsMultiLingual }}
+    {{ $pageURL = strings.TrimPrefix (path.Join "/" .Language.Lang) $pageURL }}
+{{ end }}
+
+<div class="dropdown languageSelector">
+    <a class="btn dropdown-toggle" href="#" id="languageSelector" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+        <img class="flag" src="https://www.countryflags.io/{{ partial "helpers/country-code.html" .Language }}/flat/16.png">
+        {{ .Site.Language.LanguageName }}
+    </a>
+    <div class="dropdown-menu" aria-labelledby="languageSelector">
+        {{ range .Translations }}
+        <a class="dropdown-item nav-link languages-item" href="{{ path.Join "/" (cond (eq .Language.Lang "en") "" .Language.Lang) $pageURL }}">
+            <img class="flag" src="https://www.countryflags.io/{{ partial "helpers/country-code.html" .Language }}/flat/24.png">
+            {{ .Language.LanguageName }}
+        </a>
+        {{ end }}
+    </div>
+</div>

layouts/partials/navigators/lang-selector-2.html

@@ -0,0 +1,19 @@
+{{ $pageURL:= .RelPermalink }}
+{{ if .Site.IsMultiLingual }}
+  {{ $pageURL = strings.TrimPrefix (path.Join "/" .Language.Lang) $pageURL }}
+{{ end }}
+
+<li class="nav-item dropdown">
+    <a class="nav-link dropdown-toggle" href="#" id="languageSelector" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+      <img class="flag" src="https://www.countryflags.io/{{ partial "helpers/country-code.html" .Language }}/flat/16.png">
+      {{ .Site.Language.LanguageName }}
+    </a>
+    <div class="dropdown-menu" aria-labelledby="languageSelector">
+      {{ range .Translations }}
+        <a class="dropdown-item nav-link languages-item" href="{{ path.Join "/" (cond (eq .Language.Lang "en") "" .Language.Lang) $pageURL }}">
+          <img class="flag" src="https://www.countryflags.io/{{ partial "helpers/country-code.html" .Language }}/flat/24.png">
+          {{ .Language.LanguageName }}
+        </a>
+      {{ end }}
+    </div>
+</li>

layouts/partials/navigators/lang-selector.html

@@ -0,0 +1,14 @@
+<li class="nav-item dropdown">
+<a class="nav-link dropdown-toggle" href="#" id="languageSelector" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+    <img class="flag" src="https://www.countryflags.io/{{ partial "helpers/country-code.html" .Language }}/flat/16.png">
+    {{ .Site.Language.LanguageName }}
+</a>
+<div class="dropdown-menu" aria-labelledby="languageSelector">
+    {{ range $.Site.Home.AllTranslations }}
+    <a class="dropdown-item nav-link languages-item" href="{{ .Permalink }}">
+        <img class="flag" src="https://www.countryflags.io/{{ partial "helpers/country-code.html" .Language }}/flat/24.png">
+        {{ .Language.LanguageName }}
+    </a>
+    {{ end }}
+</div>
+</li>

layouts/partials/navigators/navbar-2.html

@@ -1,30 +1,34 @@
+{{ $mainLogo:="assets/images/main-logo.png" }}
+{{ $invertedLogo:="assets/images/inverted-logo.png" }}
+{{ if .Site.Params.logo.main }}
+  {{ $mainLogo = .Site.Params.logo.main }}
+{{ end }}
+{{ if .Site.Params.logo.inverted }}
+  {{ $invertedLogo = .Site.Params.logo.inverted }}
+{{ end }}
+
 <nav class="navbar navbar-expand-xl top-navbar final-navbar shadow">
   <div class="container">
-    {{ $mainLogo:="/assets/images/main-logo.png" }}
-    {{ $invertedLogo:="/assets/images/inverted-logo.png" }}
-    {{ if .Site.Params.logo.main }}
-      {{ $mainLogo = .Site.Params.logo.main }}
-    {{ end }}
-    {{ if .Site.Params.logo.inverted }}
-      {{ $invertedLogo = .Site.Params.logo.inverted }}
-    {{ end }}
       <button class="navbar-toggler navbar-light" id="sidebar-toggler" type="button" onclick="toggleSidebar()">
       <span class="navbar-toggler-icon"></span>
     </button>
-    <a class="navbar-brand" href="{{ site.BaseURL }}">
-      <img src="{{ $mainLogo }}">
+    <a class="navbar-brand" href="{{ site.BaseURL | relLangURL }}">
+      <img src="{{ $mainLogo | absURL }}">
       {{- site.Title -}}
     </a>
     <button class="navbar-toggler navbar-light" id="toc-toggler" type="button" onclick="toggleTOC()">
       <span class="navbar-toggler-icon"></span>
     </button>
 
-    <div class="collapse navbar-collapse" id="top-nav-items">
+    <div class="collapse navbar-collapse lang-selector" id="top-nav-items">
       <ul class="navbar-nav ml-auto">
+      {{ if .IsTranslated }}
+        {{ partial "navigators/lang-selector-2.html" . }}
+      {{ end }}
       </ul>
     </div>
   </div>
   <!-- Store the logo information in a hidden img for the JS -->
-  <img src="{{ $mainLogo }}" class="d-none" id="main-logo">
-  <img src="{{ $invertedLogo }}" class="d-none" id="inverted-logo">
+  <img src="{{ $mainLogo | absURL }}" class="d-none" id="main-logo">
+  <img src="{{ $invertedLogo | absURL }}" class="d-none" id="inverted-logo">
 </nav>

layouts/partials/navigators/navbar.html

@@ -1,15 +1,21 @@
+{{ $mainLogo:="assets/images/main-logo.png" }}
+{{ $invertedLogo:="assets/images/inverted-logo.png" }}
+{{ if .Site.Params.logo.main }}
+  {{ $mainLogo = .Site.Params.logo.main }}
+{{ end }}
+{{ if .Site.Params.logo.inverted }}
+  {{ $invertedLogo = .Site.Params.logo.inverted }}
+{{ end }}
+
+{{ $sections:= .Site.Data.sections }}
+{{ if (index .Site.Data .Site.Language.Lang).sections }}
+  {{ $sections = (index .Site.Data .Site.Language.Lang).sections }}
+{{ end }}
+
 <nav class="navbar navbar-expand-xl top-navbar initial-navbar" id="top-navbar">
   <div class="container">
-    {{ $mainLogo:="/assets/images/main-logo.png" }}
-    {{ $invertedLogo:="/assets/images/inverted-logo.png" }}
-    {{ if .Site.Params.logo.main }}
-      {{ $mainLogo = .Site.Params.logo.main }}
-    {{ end }}
-    {{ if .Site.Params.logo.inverted }}
-      {{ $invertedLogo = .Site.Params.logo.inverted }}
-    {{ end }}
-    <a class="navbar-brand" href="{{ .Site.BaseURL }}">
-      <img src="{{ $invertedLogo }}" id="logo">
+    <a class="navbar-brand" href="{{ .Site.BaseURL | relLangURL }}">
+      <img src="{{ $invertedLogo | absURL }}" id="logo">
       {{- .Site.Title -}}
     </a>
     <button
@@ -25,10 +31,10 @@
     <div class="collapse navbar-collapse" id="top-nav-items">
       <ul class="navbar-nav ml-auto">
         <li class="nav-item">
-          <a class="nav-link" href="#home">Home</a>
+          <a class="nav-link" href="#home">{{ i18n "home" }}</a>
         </li>
-        {{- if .Site.Data.sections }}
-          {{- range sort .Site.Data.sections "section.weight" }}
+        {{ if $sections }}
+          {{ range sort $sections "section.weight" }}
             {{ if and (.section.enable) (.section.showOnNavbar)}}
               <li class="nav-item">
                 <a class="nav-link" href="#{{ replace (lower .section.name) " " "-" }}">{{ .section.name }}</a>
@@ -47,18 +53,21 @@
         {{ end }}
         {{ if site.Params.enableBlogPost }}
           <li class="nav-item">
-            <a class="nav-link" id="blog-link" href="/posts">Posts</a>
+            <a class="nav-link" id="blog-link" href="{{ "/post" | relLangURL }}">{{ i18n "posts" }}</a>
           </li>
         {{ end }}
-        {{ range site.Params.customMenus }}
+        {{ range  (index .Site.Data .Site.Language.Lang).site.customMenus }}
           <li class="nav-item">
             <a class="nav-link" href="{{ .url }}">{{ .name }}</a>
           </li>
         {{ end }}
+        {{ if .IsTranslated }}
+          {{ partial "navigators/lang-selector.html" . }}
+        {{ end }}
       </ul>
     </div>
   </div>
   <!-- Store the logo information in a hidden img for the JS -->
-  <img src="{{ $mainLogo }}" class="d-none" id="main-logo">
-  <img src="{{ $invertedLogo }}" class="d-none" id="inverted-logo">
+  <img src="{{ $mainLogo | absURL }}" class="d-none" id="main-logo">
+  <img src="{{ $invertedLogo | absURL }}" class="d-none" id="inverted-logo">
 </nav>

layouts/partials/navigators/sidebar.html

@@ -9,7 +9,7 @@
   {{ if .HasChildren }}
     <!-- Add current entry -->
     <li>
-      <i class="fas {{ $icon }}"></i><a class="{{$class}}" href="{{.URL}}">{{.Name}}</a>
+      <i class="fas {{ $icon }}"></i><a class="{{$class}}" href="{{ .URL }}">{{.Name}}</a>
       <!-- Add sub-tree -->
       <ul class="{{ $class }}">
         {{ partial "navigators/sidebar.html" (dict "menus" .Children "ctx" $.ctx) }}
@@ -17,6 +17,6 @@
     </li>
   {{ else }}
     <!-- No sub-tree. So, only add current entry -->
-    <li><a class="{{$class}}" href="{{.URL}}">{{.Name}}</a></li>
+    <li><a class="{{$class}}" href="{{ .URL }}">{{.Name}}</a></li>
   {{ end }}
 {{ end }}

layouts/partials/scripts.html

@@ -1,4 +1,5 @@
 <script src="/assets/js/jquery-3.4.1.min.js"></script>
+<script src="/assets/js/popper.min.js"></script>
 <script src="/assets/js/bootstrap.min.js"></script>
 
 <script src="/assets/js/navbar.js"></script>

layouts/partials/sections/about.html

@@ -28,8 +28,8 @@
         </ul>
       </div>
       {{ if .resume }}
-      <a href="{{ .resume }}" target="#"
-        ><button class="btn btn-dark">My Resume</button></a
+      <a href="{{ .resume | absURL }}" target="#"
+        ><button class="btn btn-dark">{{ i18n "resume"}}</button></a
       >
       {{ end }}
     </div>

layouts/partials/sections/achievements/entry.html

@@ -1,6 +1,6 @@
 <div
   class="achievement-entry text-center"
-  style="background-image: url({{ .image }});"
+  style="background-image: url({{ .image | absURL }});"
 >
   <i class="fas fa-search-plus" id="enlarge-icon"></i>
   <h4 class="title" id="achievement-title">{{ .title }}</h4>

layouts/partials/sections/home.html

@@ -1,34 +1,53 @@
-{{ $greeting:="Hi! I am" }}
-{{ if .Site.Params.author.greeting }}
-  {{ $greeting = .Site.Params.author.greeting }}
+{{ $author:= .Site.Data.author }}
+{{ if (index .Site.Data .Site.Language.Lang).author }}
+  {{ $author = (index .Site.Data .Site.Language.Lang).author }}
 {{ end }}
+
 {{ $name:="Jane Doe" }}
-{{ if .Site.Params.author.nickname }}
-  {{ $name = .Site.Params.author.nickname }}
-{{ else if .Site.Params.author.name }}
-  {{ $name = .Site.Params.author.name }}
+{{ if $author.nickname }}
+  {{ $name = $author.nickname }}
+{{ else if $author.name }}
+  {{ $name = $author.name }}
 {{ end }}
+
+{{ $sections:= .Site.Data.sections }}
+{{ if (index .Site.Data .Site.Language.Lang).sections }}
+  {{ $sections = (index .Site.Data .Site.Language.Lang).sections }}
+{{ end }}
+
+{{ $backgroundImage:= "assets/images/default-background.jpg" }}
+{{ if .Site.Params.background }}
+  {{ $backgroundImage = .Site.Params.background }}
+{{ end }}
+
+{{ $authorImage:= "assets/images/default-avatar.png" }}
+{{ if $author.image }}
+  {{ $authorImage = $author.image }}
+{{ end }}
+
 <div class="container-fluid home" id="home">
   <div
     class="background container-fluid"
-    style="background-image: url('{{ if .Site.Params.background }}{{ .Site.Params.background }}{{ else }}/assets/images/default-background.jpg{{ end }}');"
+    style="background-image: url('{{ $backgroundImage | absURL }}');"
   ></div>
   <div class="container content text-center">
-    <img src="{{ if .Site.Params.author.image }}{{ .Site.Params.author.image }}{{ else }}/assets/images/default-avatar.png{{ end }}"
+    <img src="{{ $authorImage | absURL }}"
       class="rounded-circle mx-auto d-block img-fluid"
     />
-    <h1 class="greeting"> {{ $greeting }} {{ $name }}</h1>
+    <h1 class="greeting"> {{ $author.greeting }} {{ $name }}</h1>
     <div class="typing-carousel">
       <span id="ityped" class="ityped"></span>
       <span class="ityped-cursor"></span>
     </div>
     <ul id="typing-carousel-data">
-      {{ range .Site.Params.author.summary }}
-      <li>{{ . }}</li>
+      {{ if $author.summary }}
+        {{ range $author.summary }}
+          <li>{{ . }}</li>
+        {{ end}}
       {{ end }}
     </ul>
-    {{ if .Site.Data.sections }}
-      {{ range first 1 (where (sort .Site.Data.sections "section.weight") ".section.enable" true) }}
+    {{ 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>
       {{ end }}
     {{ end }}

package-lock.json

@@ -113,15 +113,15 @@
       }
     },
     "browserslist": {
-      "version": "4.14.0",
-      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.14.0.tgz",
-      "integrity": "sha512-pUsXKAF2lVwhmtpeA3LJrZ76jXuusrNyhduuQs7CDFf9foT4Y38aQOserd2lMe5DSSrjf3fx34oHwryuvxAUgQ==",
+      "version": "4.14.5",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.14.5.tgz",
+      "integrity": "sha512-Z+vsCZIvCBvqLoYkBFTwEYH3v5MCQbsAjp50ERycpOjnPmolg1Gjy4+KaWWpm8QOJt9GHkhdqAl14NpCX73CWA==",
       "dev": true,
       "requires": {
-        "caniuse-lite": "^1.0.30001111",
-        "electron-to-chromium": "^1.3.523",
-        "escalade": "^3.0.2",
-        "node-releases": "^1.1.60"
+        "caniuse-lite": "^1.0.30001135",
+        "electron-to-chromium": "^1.3.571",
+        "escalade": "^3.1.0",
+        "node-releases": "^1.1.61"
       }
     },
     "caller-callsite": {
@@ -155,9 +155,9 @@
       "dev": true
     },
     "caniuse-lite": {
-      "version": "1.0.30001118",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001118.tgz",
-      "integrity": "sha512-RNKPLojZo74a0cP7jFMidQI7nvLER40HgNfgKQEJ2PFm225L0ectUungNQoK3Xk3StQcFbpBPNEvoWD59436Hg==",
+      "version": "1.0.30001141",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001141.tgz",
+      "integrity": "sha512-EHfInJHoQTmlMdVZrEc5gmwPc0zyN/hVufmGHPbVNQwlk7tJfCmQ2ysRZMY2MeleBivALUTyyxXnQjK18XrVpA==",
       "dev": true
     },
     "chalk": {
@@ -264,9 +264,9 @@
       }
     },
     "electron-to-chromium": {
-      "version": "1.3.550",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.550.tgz",
-      "integrity": "sha512-MWDHoJsSieBaJ6mObvi3V0eKZufR1iMJl56VIGdXCgFHyCUbVDGm2IMXUNjDxgbGbKa3tA5+zJmHuBQqRxGiLA==",
+      "version": "1.3.576",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.576.tgz",
+      "integrity": "sha512-uSEI0XZ//5ic+0NdOqlxp0liCD44ck20OAGyLMSymIWTEAtHKVJi6JM18acOnRgUgX7Q65QqnI+sNncNvIy8ew==",
       "dev": true
     },
     "emoji-regex": {
@@ -285,9 +285,9 @@
       }
     },
     "escalade": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.0.2.tgz",
-      "integrity": "sha512-gPYAU37hYCUhW5euPeR+Y74F7BL+IBsV93j5cvGriSaD1aG6MGsqsV1yamRdrWrb2j3aiZvb0X+UBOWpx3JWtQ==",
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.0.tgz",
+      "integrity": "sha512-mAk+hPSO8fLDkhV7V0dXazH5pDc6MrjBTPyD3VeKzxnVFjH1MIxbCdqGZB9O8+EwWakZs3ZCbDS4IpRt79V1ig==",
       "dev": true
     },
     "escape-string-regexp": {
@@ -370,9 +370,9 @@
       "dev": true
     },
     "get-stdin": {
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-7.0.0.tgz",
-      "integrity": "sha512-zRKcywvrXlXsA0v0i9Io4KDRaAw7+a1ZpjRwl9Wox8PFlVCCHra7E9c4kqXCoCM9nR5tBkaTTZRBoCm60bFqTQ==",
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-8.0.0.tgz",
+      "integrity": "sha512-sY22aA6xchAzprjyqmSEQv4UbAAzRN0L2dQB0NlN5acTTK9Don6nhoc3eAbUnpZiCANAMfd/+40kVdKfFygohg==",
       "dev": true
     },
     "glob-parent": {
@@ -559,9 +559,9 @@
       }
     },
     "node-releases": {
-      "version": "1.1.60",
-      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.60.tgz",
-      "integrity": "sha512-gsO4vjEdQaTusZAEebUWp2a5d7dF5DYoIpDG7WySnk7BuZDW+GPpHXoXXuYawRBr/9t5q54tirPz79kFIWg4dA==",
+      "version": "1.1.61",
+      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.61.tgz",
+      "integrity": "sha512-DD5vebQLg8jLCOzwupn954fbIiZht05DAZs0k2u8NStSe6h9XdsuIQL8hSRKYiU8WUQRznmSDrKGbv3ObOmC7g==",
       "dev": true
     },
     "normalize-path": {
@@ -641,9 +641,9 @@
       "dev": true
     },
     "postcss": {
-      "version": "7.0.32",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.32.tgz",
-      "integrity": "sha512-03eXong5NLnNCD05xscnGKGDZ98CyzoqPSMjOe6SuoQY7Z2hIj0Ld1g/O/UQRuOle2aRtiIRDg9tDcTGAkLfKw==",
+      "version": "7.0.35",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.35.tgz",
+      "integrity": "sha512-3QT8bBJeX/S5zKTTjTCIjRF3If4avAT6kqxcASlTWEtAFCb9NH0OUxNDfgZSWdP5fJnBYCMEWkIFfWeugjzYMg==",
       "dev": true,
       "requires": {
         "chalk": "^2.4.2",
@@ -652,16 +652,16 @@
       }
     },
     "postcss-cli": {
-      "version": "7.1.1",
-      "resolved": "https://registry.npmjs.org/postcss-cli/-/postcss-cli-7.1.1.tgz",
-      "integrity": "sha512-bYQy5ydAQJKCMSpvaMg0ThPBeGYqhQXumjbFOmWnL4u65CYXQ16RfS6afGQpit0dGv/fNzxbdDtx8dkqOhhIbg==",
+      "version": "7.1.2",
+      "resolved": "https://registry.npmjs.org/postcss-cli/-/postcss-cli-7.1.2.tgz",
+      "integrity": "sha512-3mlEmN1v2NVuosMWZM2tP8bgZn7rO5PYxRRrXtdSyL5KipcgBDjJ9ct8/LKxImMCJJi3x5nYhCGFJOkGyEqXBQ==",
       "dev": true,
       "requires": {
         "chalk": "^4.0.0",
         "chokidar": "^3.3.0",
         "dependency-graph": "^0.9.0",
         "fs-extra": "^9.0.0",
-        "get-stdin": "^7.0.0",
+        "get-stdin": "^8.0.0",
         "globby": "^11.0.0",
         "postcss": "^7.0.0",
         "postcss-load-config": "^2.0.0",
@@ -713,9 +713,9 @@
           "dev": true
         },
         "supports-color": {
-          "version": "7.1.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.1.0.tgz",
-          "integrity": "sha512-oRSIpR8pxT1Wr2FquTNnGet79b3BWljqOuoW/h4oBhxJ/HUbX5nX6JSruTkvXDCFMwDPvsaTTbvMLKZWSy0R5g==",
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
           "dev": true,
           "requires": {
             "has-flag": "^4.0.0"
@@ -724,9 +724,9 @@
       }
     },
     "postcss-load-config": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-2.1.0.tgz",
-      "integrity": "sha512-4pV3JJVPLd5+RueiVVB+gFOAa7GWc25XQcMp86Zexzke69mKf6Nx9LRcQywdz7yZI9n1udOxmLuAwTBypypF8Q==",
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-2.1.2.tgz",
+      "integrity": "sha512-/rDeGV6vMUo3mwJZmeHfEDvwnTKKqQ0S7OHUi/kJvvtx3aWtyWG2/0ZWnzCt2keEclwN6Tf0DST2v9kITdOKYw==",
       "dev": true,
       "requires": {
         "cosmiconfig": "^5.0.0",

package.json

@@ -18,6 +18,6 @@
   "homepage": "https://github.com/hossainemruz/toha#readme",
   "devDependencies": {
     "autoprefixer": "^9.8.6",
-    "postcss-cli": "^7.1.1"
+    "postcss-cli": "^7.1.2"
   }
 }

static/assets/css/layouts/list.css

@@ -155,6 +155,13 @@
     visibility: hidden;
   }
 
+  .navbar-collapse.lang-selector {
+    display: block !important;
+    position: absolute;
+    right: 0;
+    top: 0.5rem;
+  }
+
   .content-cards {
     padding-top: 20px;
     width: 100%;

static/assets/css/layouts/main.css

@@ -137,7 +137,7 @@ img.right {
 .card .card-head {
   height: 172px;
   -o-object-fit: cover;
-     object-fit: cover;
+  object-fit: cover;
   overflow: hidden;
 }
 
@@ -238,6 +238,14 @@ img.right {
 
 /* IPad Pro */
 @media (max-width: 1024px) {
+  .content-section .languageSelector {
+    position: fixed;
+    right: 0.5rem;
+    bottom: 1rem;
+    z-index: 10000000;
+    background-color: #f9fafc;
+    box-shadow: 0px 8px 56px rgba(15, 80, 100, 0.16);
+  }
 }
 
 /*  Large devices (desktops, 992px and up) */

static/assets/css/layouts/single.css

@@ -368,6 +368,9 @@ mark {
   .navbar-toggler {
     display: block;
   }
+  .navbar-collapse.lang-selector {
+    display: none;
+  }
 
   .hero-area {
     height: 300px;

static/assets/css/navigators/navbar.css

@@ -116,6 +116,39 @@
   margin-left: -10px;
 }
 
+.top-navbar .dropdown-menu {
+  box-shadow: 0px 8px 56px rgba(15, 80, 100, 0.16);
+  border: 1px solid #fff;
+  max-height: 0vh;
+  overflow: hidden;
+  display: block;
+  visibility: hidden;
+  transition: all 0.3s ease-out;
+}
+
+.top-navbar .dropdown-menu.show {
+  max-height: 100vh;
+  visibility: visible;
+  transition: all 0.3s ease-in;
+}
+
+.top-navbar .dropdown-menu a {
+  color: #1c2d41;
+  border-bottom: none;
+}
+
+.top-navbar .dropdown-menu a:hover {
+  color: #2098d1;
+  transition: all 0.3s ease-out;
+  border-bottom: none;
+  background: rgb(2, 0, 36);
+  background: linear-gradient(
+    90deg,
+    rgba(2, 0, 36, 1) 0%,
+    rgba(34, 136, 168, 0.2) 0%
+  );
+}
+
 /* ============= Device specific fixes ======= */
 
 /* Large screens such as TV */
@@ -163,11 +196,6 @@
     border-bottom: none;
   }
 
-  .final-navbar .navbar-collapse.show {
-    box-shadow: 5px 10px 10px rgba(192, 204, 218, 0.3);
-    transition: all 0.3s ease-out;
-  }
-
   .dropdown-divider {
     border-top: 1px solid #c0ccda;
   }
@@ -177,6 +205,12 @@
     width: auto;
     margin-right: 15px;
   }
+  .top-navbar .dropdown-menu {
+    text-align: center;
+    margin-bottom: 0.5rem;
+    margin-right: 1rem;
+    transition: all 0.3s ease-out;
+  }
 }
 
 /*  Large devices (desktops, 992px and up) */
@@ -201,11 +235,6 @@
     border-bottom: none;
   }
 
-  .final-navbar .navbar-collapse.show {
-    box-shadow: 5px 10px 10px rgba(192, 204, 218, 0.3);
-    transition: all 0.3s ease-out;
-  }
-
   .dropdown-divider {
     border-top: 1px solid #c0ccda;
   }
@@ -239,11 +268,6 @@
     border-bottom: none;
   }
 
-  .final-navbar .navbar-collapse.show {
-    box-shadow: 5px 10px 10px rgba(192, 204, 218, 0.3);
-    transition: all 0.3s ease-out;
-  }
-
   .dropdown-divider {
     border-top: 1px solid #c0ccda;
   }
@@ -258,6 +282,10 @@
 /* Small devices (landscape phones, 576px and up) */
 
 @media only screen and (max-width: 576px) {
+  .top-navbar .dropdown-menu {
+    margin-left: -1rem;
+    margin-right: 0rem;
+  }
 }
 
 /* iPhoneX, iPhone 6,7,8 */

static/assets/css/sections/home.css

@@ -14,8 +14,7 @@
   background-attachment: fixed;
   background-position: center;
   transform: scale(1.1);
-  -webkit-filter: blur(3px);
-          filter: blur(3px);
+  filter: blur(3px);
   background-size: cover;
 }
 

static/assets/js/main.js

@@ -25,44 +25,48 @@ var isMobile = false, isTablet = false, isLaptop = false;
     function addSmoothScroll() {
       // ref: https://css-tricks.com/snippets/jquery/smooth-scrolling/
       // Select all links with hashes
-      $('a[href*="#"]').click(function (event) {
-        // On-page links
-        if (
-          location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '')
-          &&
-          location.hostname == this.hostname
-        ) {
-          // Figure out element to scroll to
-          var target = $(this.hash);
-          target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
-          // Does a scroll target exist?
-          if (target.length) {
-            // Only prevent default if animation is actually gonna happen
-            event.preventDefault();
+      $('a[href*="#"]')
+        // Remove links that don't actually link to anything
+        .not('[href="#"]')
+        .not('[href="#0"]')
+        .click(function (event) {
+          // On-page links
+          if (
+            location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '')
+            &&
+            location.hostname == this.hostname
+          ) {
+            // Figure out element to scroll to
+            var target = $(this.hash);
+            target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
+            // Does a scroll target exist?
+            if (target.length) {
+              // Only prevent default if animation is actually gonna happen
+              event.preventDefault();
 
-            let offset = 60;
-            if (isMobile) {
-              offset = 710;
-            } else if (isTablet) {
-              offset = 60;
+              let offset = 60;
+              if (isMobile) {
+                offset = 710;
+              } else if (isTablet) {
+                offset = 60;
+              }
+              $('html, body').animate({
+                scrollTop: target.offset().top - offset
+              }, 1000, function () {
+                // Callback after animation
+                // Must change focus!
+                var $target = $(target);
+                $target.focus();
+                if ($target.is(":focus")) { // Checking if the target was focused
+                  return false;
+                } else {
+                  $target.attr('tabindex', '-1'); // Adding tabindex for elements not focusable
+                  $target.focus(); // Set focus again
+                };
+              });
             }
-            $('html, body').animate({
-              scrollTop: target.offset().top - offset
-            }, 1000, function () {
-              // Callback after animation
-              // Must change focus!
-              var $target = $(target);
-              $target.focus();
-              if ($target.is(":focus")) { // Checking if the target was focused
-                return false;
-              } else {
-                $target.attr('tabindex', '-1'); // Adding tabindex for elements not focusable
-                $target.focus(); // Set focus again
-              };
-            });
           }
-        }
-      });
+        });
     }
     addSmoothScroll();