Update and run autoprefixer (#601)

Co-authored-by: kodiakhq[bot] <kodiakhq[bot]@users.noreply.github.com>
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

.github/workflows/autoprefixer.yml

@@ -8,10 +8,10 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout to latest commit
-        uses: actions/checkout@v2.4.0
+        uses: actions/checkout@v3
 
       - name: Setup Node
-        uses: actions/setup-node@v2.5.1
+        uses: actions/setup-node@v3
         with:
           node-version: "15.x"
 
@@ -21,7 +21,7 @@ jobs:
           npm run autoprefixer
 
       - name: Create Pull Request
-        uses: peter-evans/create-pull-request@v3.12.0
+        uses: peter-evans/create-pull-request@v4
         with:
           branch: autoprefixer
           branch-suffix: timestamp

.github/workflows/build.yml

@@ -0,0 +1,28 @@
+name: Run Build
+
+# Run action on pull request event
+on: [pull_request]
+
+
+jobs:
+  build:
+    runs-on: ubuntu-18.04
+    steps:
+    # checkout to the commit that has been pushed
+    - uses: actions/checkout@v2.4.0
+      with:
+        submodules: true  # Fetch Hugo themes (true OR recursive)
+        fetch-depth: 0    # Fetch all history for .GitInfo and .Lastmod
+
+    # install Hugo
+    - name: Setup Hugo
+      uses: peaceiris/actions-hugo@v2.5.0
+      with:
+        hugo-version: 'latest'
+        extended: true
+
+    # build website
+    - name: Create Config
+      run: touch config.toml
+    - name: Build
+      run: hugo --minify

.github/workflows/codeql-analysis.yml

@@ -39,11 +39,11 @@ jobs:
 
     steps:
     - name: Checkout repository
-      uses: actions/checkout@v2.4.0
+      uses: actions/checkout@v3
 
     # Initializes the CodeQL tools for scanning.
     - name: Initialize CodeQL
-      uses: github/codeql-action/init@v1
+      uses: github/codeql-action/init@v2
       with:
         languages: ${{ matrix.language }}
         # If you wish to specify custom queries, you can do so here or in a config file.
@@ -54,7 +54,7 @@ jobs:
     # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
     # If this step fails, then you should remove it and run the build manually (see below)
     - name: Autobuild
-      uses: github/codeql-action/autobuild@v1
+      uses: github/codeql-action/autobuild@v2
 
     # ℹ️ Command-line programs to run using the OS shell.
     # 📚 https://git.io/JvXDl
@@ -68,4 +68,4 @@ jobs:
     #   make release
 
     - name: Perform CodeQL Analysis
-      uses: github/codeql-action/analyze@v1
+      uses: github/codeql-action/analyze@v2

.github/workflows/draft-release.yml

@@ -10,6 +10,6 @@ jobs:
     runs-on: ubuntu-latest
     steps:
     # Create/Update release draft
-    - uses: release-drafter/release-drafter@v5.16.1
+    - uses: release-drafter/release-drafter@v5.20.0
       env:
         GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/md-link-checker.yml

@@ -8,6 +8,6 @@ jobs:
     runs-on: ubuntu-latest
     steps:
     # checkout to latest commit
-    - uses: actions/checkout@v2.4.0
+    - uses: actions/checkout@v3
     # run markdown linter
-    - uses: gaurav-nelson/github-action-markdown-link-check@1.0.13
+    - uses: gaurav-nelson/github-action-markdown-link-check@1.0.14

.github/workflows/project-automation-issue.yaml

@@ -106,7 +106,7 @@ jobs:
 
             # Set the "Type" field to appropriate option
             gh api graphql -f query='
-              mutation ($project: ID!, $item: ID!, $field: ID!, $opt_id: ID!) {
+              mutation ($project: ID!, $item: ID!, $field: ID!, $opt_id: String!) {
                 updateProjectNextItemField(input: {
                   projectId: $project
                   itemId: $item
@@ -136,7 +136,7 @@ jobs:
           fi
 
           gh api graphql -f query='
-            mutation ($project: ID!, $item: ID!, $field: ID!, $status_id: ID!) {
+            mutation ($project: ID!, $item: ID!, $field: ID!, $status_id: String!) {
               updateProjectNextItemField(input: {
                 projectId: $project
                 itemId: $item

.github/workflows/project-automation-pr.yaml

@@ -109,7 +109,7 @@ jobs:
 
             # Set the "Type" field to appropriate option
             gh api graphql -f query='
-              mutation ($project: ID!, $item: ID!, $field: ID!, $opt_id: ID!) {
+              mutation ($project: ID!, $item: ID!, $field: ID!, $opt_id: String!) {
                 updateProjectNextItemField(input: {
                   projectId: $project
                   itemId: $item
@@ -153,7 +153,7 @@ jobs:
           echo 'PR_STATUS='$OPTION_ID >> $GITHUB_ENV
 
           gh api graphql -f query='
-            mutation ($project: ID!, $item: ID!, $field: ID!, $status_id: ID!) {
+            mutation ($project: ID!, $item: ID!, $field: ID!, $status_id: String!) {
               updateProjectNextItemField(input: {
                 projectId: $project
                 itemId: $item
@@ -204,7 +204,7 @@ jobs:
 
             # Update the Issue Status
             gh api graphql -f query='
-            mutation ($project: ID!, $item: ID!, $field: ID!, $status_id: ID!) {
+            mutation ($project: ID!, $item: ID!, $field: ID!, $status_id: String!) {
               updateProjectNextItemField(input: {
                 projectId: $project
                 itemId: $item

README.md

@@ -30,8 +30,15 @@ A [Hugo](https://gohugo.io/) theme for a personal portfolio with minimalist desi
 - Achievement Gallery
 - Sidebar to Categorize the Posts
 - Short Codes
-- Google Analytics Support
+- Analytics Support
-- Disqus Comment Support
+  - GoatCounter
+  - counter.dev
+  - Google Analytics
+- Comment Support
+  - [Disqus](https://disqus.com/)
+  - [Valine](https://valine.js.org/)
+  - [Uttarances](https://utteranc.es/)
+  - [Giscus](https://giscus.app/)
 
 For more details about the features please visit [here](https://toha-guides.netlify.app/posts/features/).
 
@@ -49,6 +56,7 @@ For more details about the features please visit [here](https://toha-guides.netl
 - 日本語
 - 한국어
 - русский
+- suomi
 - Tiếng Việt
 
 To know more about how to translate your site, please visit [here](https://toha-guides.netlify.app/posts/translation/). Follow, the data and post format from this [example site](https://hugo-toha.github.io).
@@ -71,7 +79,7 @@ Here are few screenshots from the [example site](https://hugo-toha.github.io).
 
 ## Requirements
 
-- Hugo Version 0.68.0 or higher
+- Hugo Version 0.87.0 or higher
 
 ## Usage
 
@@ -165,10 +173,12 @@ When you run your site for first time, it will start with the default parameters
 
 Here, are some handy shortcodes you can use with this theme.
 
-- [Alert](https://toha-guides.netlify.app/posts/short-codes/alert/)
+- [Alert](https://toha-guides.netlify.app/posts/shortcodes/#alert)
-- [Image](https://toha-guides.netlify.app/posts/short-codes/img/)
+- [Image](https://toha-guides.netlify.app/posts/shortcodes/#image)
-- [Split](https://toha-guides.netlify.app/posts/short-codes/split/)
+- [Split](https://toha-guides.netlify.app/posts/shortcodes/#split)
-- [Vertical Space](https://toha-guides.netlify.app/posts/short-codes/vs/)
+- [Vertical Space](https://toha-guides.netlify.app/posts/shortcodes/#vertical-space)
+- [Video](https://toha-guides.netlify.app/posts/shortcodes/#video)
+- [Mermaid](https://hugo-toha.github.io/posts/shortcodes/#mermaid)
 
 ## Project Roadmap
 

i18n/bn.toml

@@ -118,3 +118,6 @@ other = "নোট সমূহ"
 
 [disclaimer_text]
 other = "দায় বিজ্ঞপ্তি"
+
+[search]
+other = "অনুসন্ধান করুন"

i18n/de.toml

@@ -121,3 +121,6 @@ other = "Notizen"
 
 [disclaimer_text]
 other = "Haftungshinweis"
+
+[search]
+other = "Suche"

i18n/en.toml

@@ -121,3 +121,6 @@ other = "Notes"
 
 [disclaimer_text]
 other = "Liability Notice"
+
+[search]
+other = "Search"

i18n/es.toml

@@ -121,3 +121,6 @@ other = "Notas"
 
 [disclaimer_text]
 other = "Aviso de responsabilidad"
+
+[search]
+other = "Búsqueda"

i18n/fi.toml

@@ -0,0 +1,126 @@
+# More documentation here: https://github.com/nicksnyder/go-i18n
+[home]
+other = "Koti"
+
+[posts]
+other = "Artikkelit"
+
+[toc_heading]
+other = "Sisällysluettelo"
+
+[tags]
+other = "Tagit"
+
+[categories]
+other = "Kategoriat"
+
+[at]
+other = "at"
+
+[resume]
+other = "Ansioluetteloni"
+
+[navigation]
+other = "Navigointi"
+
+[contact_me]
+other = "Ota yhteyttä minuun:"
+
+[email]
+other = "Sähköposti"
+
+[phone]
+other = "Puhelin"
+
+[newsletter_text]
+other = "Pysy ajan tasalla tilaamalla sähköposti-ilmoitukset"
+
+[newsletter_input_placeholder]
+other = "Syötä sähköpostiosoite"
+
+[newsletter_warning]
+other = "Syöttämällä sähköpostin, hyväksyt että haluat vastaanottaa uutiskirjeen tältä sivustolta."
+
+[submit]
+other = "Lähetä"
+
+[hugoAttributionText]
+other = "Voimanlähteenä"
+
+[prev]
+other = "Edellinen"
+
+[next]
+other = "Seuraava"
+
+[share_on]
+other = "Jaa"
+
+[improve_this_page]
+other = "Paranna tätä sivua"
+
+[out_of]
+other = "out of"
+
+[publications]
+other = "Julkaisut"
+
+[taken_courses]
+other = "Käydyt kurssit"
+
+[course_name]
+other = "Kurssin nimi"
+
+[total_credit]
+other = "Opintopisteet yhteensä"
+
+[obtained_credit]
+other = "Saadut opintopisteet"
+
+[extracurricular_activities]
+other = "Opetusohjelman ulkopuolinen toiminta"
+
+[show_more]
+other = "Näytä lisää"
+
+[show_less]
+other = "Näytä vähemmän"
+
+[responsibilities]
+other = "Työtehtävät:"
+
+[present]
+other = "Tämä päivä"
+
+[comments_javascript]
+other = "Ole hyvä ja enabloi JavaScript katsoaksesi"
+
+[comments_by]
+other = "kommentit mahdollistavat"
+
+[read]
+other = "Lue"
+
+[project_star]
+other = "Tähti"
+
+[project_details]
+other = "Yksityiskohdat"
+
+[err_404]
+other = "Sivua jota etsit ei löydy."
+
+[more]
+other = "Lisää"
+
+[view_certificate]
+other = "Katso todistus"
+
+[notes]
+other = "Muistiinpanot"
+
+[disclaimer_text]
+other = "Vastuuilmoitus"
+
+[search]
+other = "Haku"

i18n/fr.toml

@@ -121,3 +121,6 @@ other = "Remarques"
 
 [disclaimer_text]
 other = "Avis de responsabilité"
+
+[search]
+other = "Chercher"

i18n/hi.toml

@@ -121,3 +121,6 @@ other = "टिप्पणियाँ"
 
 [disclaimer_text]
 other = "दायित्व सूचना"
+
+[search]
+other = "खोज"

i18n/id.toml

@@ -121,3 +121,6 @@ other = "Catatan"
 
 [disclaimer_text]
 other = "Pemberitahuan Kewajiban"
+
+[search]
+other = "Mencari"

i18n/it.toml

@@ -121,3 +121,6 @@ other = "Appunti"
 
 [disclaimer_text]
 other = "Avviso di responsabilità"
+
+[search]
+other = "Ricerca"

i18n/jp.toml

@@ -118,3 +118,6 @@ other = "ノート"
 
 [disclaimer_text]
 other = "責任通知"
+
+[search]
+other = "検索"

i18n/ko.toml

@@ -121,3 +121,6 @@ other = "메모"
 
 [disclaimer_text]
 other = "책임 고지"
+
+[search]
+other = "찾다"

i18n/nl.toml

@@ -120,3 +120,5 @@ other = "Opmerkingen"
 
 [disclaimer_text]
 other = "Haftungshinweis"
+[search]
+other = "Zoekopdracht"

i18n/ru.toml

@@ -121,3 +121,6 @@ other = "Ноты"
 
 [disclaimer_text]
 other = "Уведомление об ответственности"
+
+[search]
+other = "Поиск"

i18n/vn.toml

@@ -121,3 +121,6 @@ other = "Ghi chú"
 
 [disclaimer_text]
 other = "Thông báo trách nhiệm"
+
+[search]
+other = "Tìm kiếm"

i18n/zh-cn.toml

@@ -121,3 +121,6 @@ other = "笔记"
 
 [disclaimer_text]
 other = "免责声明"
+
+[search]
+other = "搜索"

i18n/zh-tw.toml

@@ -86,29 +86,29 @@ other = "查看更多"
 [show_less]
 other = "顯示較少"
 
-# [responsibilities]
+[responsibilities]
-# other = "Responsibilities:"
+other = "職責:"
 
-# [present]
+[present]
-# other = "Present"
+other = "現在"
 
-# [comments_javascript]
+[comments_javascript]
-# other = "Please enable JavaScript to view the"
+other = "請開啟 JavaScript 查看"
 
-# [comments_by]
+[comments_by]
-# other = "comments powered by"
+other = "評論由"
 
-# [read]
+[read]
-# other = "Read"
+other = "閱讀"
 
-# [project_star]
+[project_star]
-# other = "Star"
+other = "Star"
 
-# [project_details]
+[project_details]
-# other = "Details"
+other = "詳情"
 
-# [err_404]
+[err_404]
-# other = "The page you are looking for is not there yet."
+other = "您訪問的頁面不存在"
 
 [more]
 other = "更多的"
@@ -121,3 +121,6 @@ other = "筆記"
 
 [disclaimer_text]
 other = "免責聲明"
+
+[search]
+other = "搜索"

layouts/_default/baseof.html

@@ -9,16 +9,9 @@
     <!------ ADD PAGE SPECIFIC HEADERS ------->
     {{ block "header" . }} {{ end }}
 
-    <!-- ADD GOOGLE ANALYTICS IF ENABLED -->
+    <!--================= add analytics if enabled =========================-->
-    {{ if site.GoogleAnalytics }}
+    {{- partial "analytics.html" . -}}
-        <!-- Google Analytics v3  ID -->
+
-        {{ if hasPrefix site.GoogleAnalytics "UA-"}}
-          {{ template "_internal/google_analytics_async.html" . }}
-        {{ else }}
-          <!-- Google Analytics v4  ID -->
-          {{ template "_internal/google_analytics.html" . }}
-        {{ end }}
-    {{ end }}
   </head>
 
   <body data-spy="scroll" data-target="#TableOfContents" data-offset="80">
@@ -45,5 +38,9 @@
 
     <!------- ADD PAGE SPECIFIC SCRIPTS ------>
     {{ block "scripts" . }} {{ end }}
+
+    <!------ IF WANTED, ADD SUPPORT LINKS -------->
+    {{- partial "misc/support.html" . -}}
+
   </body>
 </html>

layouts/_default/list.html

@@ -20,7 +20,7 @@
     <div class="sidebar-holder">
       <div class="sidebar" id="sidebar">
         <form class="mx-auto" method="get" action="{{ "search" | relLangURL }}">
-          <input type="text" name="keyword" value="" placeholder="Search" data-search="" id="search-box" />
+          <input type="text" name="keyword" value="" placeholder="{{ i18n "search" }}" data-search="" id="search-box" />
         </form>
         <div class="sidebar-tree">
           <ul class="tree" id="tree">

layouts/_default/rss.xml

@@ -0,0 +1,43 @@
+{{- $pctx := . -}}
+{{- if .IsHome -}}{{ $pctx = .Site }}{{- end -}}
+{{- $pages := slice -}}
+{{- if $.IsHome -}}
+{{- $pages = sort $pctx.RegularPages "Date" "desc" -}}
+{{- else if $.IsSection -}}
+{{- $pages = sort $pctx.RegularPagesRecursive "Date" "desc" -}}
+{{- else -}}
+{{- $pages = sort $pctx.RegularPagesRecursive "Date" "desc" -}}
+{{- end -}}
+{{- $limit := .Site.Config.Services.RSS.Limit -}}
+{{- if ge $limit 1 -}}
+{{- $pages = $pages | first $limit -}}
+{{- end -}}
+{{- printf "<?xml version=\"1.0\" encoding=\"utf-8\" standalone=\"yes\"?>" | safeHTML }}
+<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
+  <channel>
+    <title>{{ if eq  .Title  .Site.Title }}{{ .Site.Title }}{{ else }}{{ with .Title }}{{.}} on {{ end }}{{ .Site.Title }}{{ end }}</title>
+    <link>{{ .Permalink }}</link>
+    <description>Recent content {{ if ne  .Title  .Site.Title }}{{ with .Title }}in {{.}} {{ end }}{{ end }}on {{ .Site.Title }}</description>
+    <generator>Hugo -- gohugo.io</generator>{{ with .Site.LanguageCode }}
+    <language>{{.}}</language>{{end}}{{ with .Site.Author.email }}
+    <managingEditor>{{.}}{{ with $.Site.Author.name }} ({{.}}){{end}}</managingEditor>{{end}}{{ with .Site.Author.email }}
+    <webMaster>{{.}}{{ with $.Site.Author.name }} ({{.}}){{end}}</webMaster>{{end}}{{ with .Site.Copyright }}
+    <copyright>{{.}}</copyright>{{end}}{{ if not .Date.IsZero }}
+    <lastBuildDate>{{ .Date.Format "Mon, 02 Jan 2006 15:04:05 -0700" | safeHTML }}</lastBuildDate>{{ end }}
+    {{- with .OutputFormats.Get "RSS" -}}
+    {{ printf "<atom:link href=%q rel=\"self\" type=%q />" .Permalink .MediaType | safeHTML }}
+    {{- end -}}
+    {{ range $pages }}
+    {{- if ne .RelPermalink "/search/" -}}
+    <item>
+      <title>{{ .Title }}</title>
+      <link>{{ .Permalink }}</link>
+      <pubDate>{{ .Date.Format "Mon, 02 Jan 2006 15:04:05 -0700" | safeHTML }}</pubDate>
+      {{ with .Site.Author.email }}<author>{{.}}{{ with $.Site.Author.name }} ({{.}}){{end}}</author>{{end}}
+      <guid>{{ .Permalink }}</guid>
+      <description>{{ .Summary | html }}</description>
+    </item>
+    {{ end }}
+    {{ end }}
+  </channel>
+</rss>

layouts/_default/search.html

@@ -20,7 +20,7 @@
     <div class="sidebar-holder">
       <div class="sidebar" id="sidebar">
         <form class="mx-auto" method="get" action="{{ "search" | relLangURL }}">
-          <input type="text" name="keyword" value="" placeholder="Search" data-search="" id="search-box" />
+          <input type="text" name="keyword" value="" placeholder="{{ i18n "search" }}" data-search="" id="search-box" />
         </form>
         <div class="sidebar-tree">
           <ul class="tree" id="tree">

layouts/_default/single.html

@@ -20,7 +20,7 @@
     <div class="sidebar-holder">
       <div class="sidebar" id="sidebar">
         <form class="mx-auto" method="get" action="{{ "search" | relLangURL }}">
-          <input type="text" name="keyword" value="" placeholder="Search" data-search="" id="search-box" />
+          <input type="text" name="keyword" value="" placeholder="{{ i18n "search" }}" data-search="" id="search-box" />
         </form>
         <div class="sidebar-tree">
           <ul class="tree" id="tree">
@@ -136,7 +136,7 @@
           {{ end }}
           <div class="col-md-6 btn-improve-page">
             {{ if ( eq site.Params.GitForge "gitlab" ) }}
-              <a href="{{ site.Params.GitRepo }}/-/edit/{{ .Scratch.Get "GitBranch" }}/{{ .File.Path }}" title="{{ i18n "improve_this_page" }}" target="_blank" rel="noopener">
+              <a href="{{ site.Params.GitRepo }}/-/edit/{{ .Scratch.Get "GitBranch" }}/content/{{ .File.Path }}" title="{{ i18n "improve_this_page" }}" target="_blank" rel="noopener">
             {{ else if ( eq site.Params.GitForge "gitea" ) }}
               <a href="{{ site.Params.GitRepo }}/_edit/{{ .Scratch.Get "GitBranch" }}/content/{{ .File.Path }}" title="{{ i18n "improve_this_page" }}" target="_blank" rel="noopener">
             {{ else }} <!--- Make Github-style the default -->
@@ -157,23 +157,13 @@
       <hr />
 
       <!----- Add comment support  ----->
-      {{ with site.Params.features.comment }}
+      {{ if site.Params.features.comment.enable }}
-        {{ if .enable }}
+        {{ partial "comments.html" site.Params.features.comment }}
-          <!-- Add Disqus forum  -->
-          {{ if .disqus.shortName }}
-              {{ partial "disqus.html" . }}
-          <!-- Add valine -->
-          {{ else if .valine }}
-              {{ partial "valine.html" . }}
-          <!-- Add utteranc -->
-          {{ else if .utteranc }}
-              {{ partial "utteranc.html" . }}
-          {{ end }}
-        {{ end }}
       {{ end }}
+
       <!-- Keep backward compatibility with old config.yaml -->
       {{ if site.DisqusShortname }}
-        {{ partial "disqus.html" . }}
+        {{ partial "comments/disqus.html" (dict (slice "disqus" "shortName")  site.DisqusShortname) }}
       {{ end }}
 
       </div>
@@ -189,7 +179,7 @@
 
 {{ define "toc" }}
   <section class="toc-section" id="toc-section">
-    {{ if site.Params.enableTOC }}
+    {{ if and site.Params.enableTOC ( .Params.enableTOC | default true ) }}
     <div class="toc-holder">
       <h5 class="text-center pl-3">{{ i18n "toc_heading" }}</h5>
       <hr>
@@ -207,7 +197,15 @@
 <script>
   hljs.initHighlightingOnLoad();
 </script>
+
+<!-------------- Enable Math support for this page  ---------------->
 {{ if .Params.math }}
     {{ partial "math.html" . }}
 {{ end }}
+
+<!-------------- Enable mermaid support for this page  ---------------->
+{{ if .Params.mermaid }}
+    {{ partial "mermaid.html" . }}
+{{ end }}
+
 {{ end }}

layouts/categories/list.html

@@ -20,7 +20,7 @@
     <div class="sidebar-holder">
       <div class="sidebar" id="sidebar">
         <form class="mx-auto" method="get" action="{{ "search" | relLangURL }}">
-          <input type="text" name="keyword" value="" placeholder="Search" data-search="" id="search-box" />
+          <input type="text" name="keyword" value="" placeholder="{{ i18n "search" }}" data-search="" id="search-box" />
         </form>
         <div class="sidebar-tree">
           <ul class="tree" id="tree">

layouts/index.html

@@ -29,16 +29,8 @@
     <!--================= custom style overrides =========================-->
     <link rel="stylesheet" href="{{ "/css/style.css" | relURL }}"/>
     
-    <!-- Add Google Analytics if enabled in configuration -->
+    <!--================= add analytics if enabled =========================-->
-    {{ if site.GoogleAnalytics }}
+    {{- partial "analytics.html" . -}}
-        <!-- Google Analytics v3  ID -->
-        {{ if hasPrefix site.GoogleAnalytics "UA-"}}
-          {{ template "_internal/google_analytics_async.html" . }}
-        {{ else }}
-          <!-- Google Analytics v4  ID -->
-          {{ template "_internal/google_analytics.html" . }}
-        {{ end }}
-    {{ end }}
   </head>
   <body data-spy="scroll" data-target="#top-navbar" data-offset="100">
 
@@ -87,5 +79,9 @@
     <script src="{{ "/js/github-button.js" | relURL }}"></script>
     <script src="{{ "/js/home.js" | relURL }}"></script>
     <script src="{{ "/js/jquery.filterizr.min.js" | relURL }}"></script>
+
+    <!------ ADD SUPPORT LINKS -------->
+    {{- partial "misc/support.html" . -}}
+
   </body>
 </html>

layouts/notes/list.html

@@ -21,7 +21,7 @@
     <div class="sidebar-holder">
       <div class="sidebar" id="sidebar">
         <form class="mx-auto" method="get" action="{{ "search" | relLangURL }}">
-          <input type="text" name="keyword" value="" placeholder="Search" data-search="" id="search-box" />
+          <input type="text" name="keyword" value="" placeholder="{{ i18n "search" }}" data-search="" id="search-box" />
         </form>
         <div class="sidebar-tree">
           <ul class="tree" id="tree">

layouts/notes/single.html

@@ -21,7 +21,7 @@
     <div class="sidebar-holder">
       <div class="sidebar" id="sidebar">
         <form class="mx-auto" method="get" action="{{ "search" | relLangURL }}">
-          <input type="text" name="keyword" value="" placeholder="Search" data-search="" id="search-box" />
+          <input type="text" name="keyword" value="" placeholder="{{ i18n "search" }}" data-search="" id="search-box" />
         </form>
         <div class="sidebar-tree">
           <ul class="tree" id="tree">

layouts/partials/analytics.html

@@ -0,0 +1,49 @@
+<!-- Add Analytics if enabled in configuration -->
+{{ with site.Params.features.analytics }}
+    {{ if .enabled }}
+        <!-- Google Analytics -->
+        {{ with .google }}
+            {{ $privacyConfig:= dict (slice "Site" "Config" "Privacy" "GoogleAnalytics") $.Site.Config.Privacy.GoogleAnalytics }}
+            {{ $analyticsConfig := dict (slice "Site" "GoogleAnalytics") .id }}
+            {{ template "_internal/google_analytics.html" (merge $privacyConfig $analyticsConfig) }}
+        {{ end }}
+
+        <!-- Counter.dev -->
+        {{ with .counterDev }}
+            <script>
+            if (
+                !sessionStorage.getItem("_swa") &&
+                document.referrer.indexOf(location.protocol + "//" + location.host) !== 0
+            ) {
+                fetch(
+                "https://counter.dev/track?" +
+                    new URLSearchParams({
+                    referrer: document.referrer,
+                    screen: screen.width + "x" + screen.height,
+                    user: "{{ .id }}",
+                    utcoffset: "1",
+                    }),
+		    {{ with .referrerPolicy }}
+			    { referrerPolicy: "{{ . }}" }
+		    {{ end }}
+                );
+            }
+            sessionStorage.setItem("_swa", "1");
+            </script>
+        {{ end }}
+
+        <!-- GoatCounter -->
+        {{ with .goatCounter }}
+            <script
+            data-goatcounter="https://{{ .code }}.goatcounter.com/count"
+            async
+            src="//gc.zgo.at/count.js"
+            ></script>
+        {{ end }}
+    {{ end }}
+{{ end }}
+
+<!-- Keep backwards compatibility and consistency with HUGO defaults -->
+{{ if site.GoogleAnalytics }}
+    {{ template "_internal/google_analytics.html" . }}
+{{ end }}

layouts/partials/cards/skill.html

@@ -4,15 +4,19 @@
       <div class="card-head d-flex">
         {{ if .logo }}
           {{ $logoImage := resources.Get .logo }}
-
           {{/*  svg don't support "Fit" operation   */}}
           {{ if ne $logoImage.MediaType.SubType "svg" }}
             {{ $logoImage = $logoImage.Fit "24x24" }}
           {{ end }}
         
           <img class="card-img-xs" src="{{ $logoImage.RelPermalink }}" alt="{{ .name }}" />
-        {{ end }}
           <h5 class="card-title">{{ .name }}</h5>
+        {{ else if .icon }}
+          {{ $iconName := .icon }}
+          <h5 class="card-title"><span class="{{ $iconName }}"> {{ .name }}</span></h5>
+        {{ else }}
+          <h5 class="card-title">{{ .name }}</h5>
+        {{ end }}
       </div>
       <div class="card-body">
         <p class="card-text">{{ .summary | markdownify }}</p>

layouts/partials/comments.html

@@ -0,0 +1,11 @@
+{{ if .disqus.shortName }}
+    {{ partial "comments/disqus.html" . }}
+{{ else if .valine }}
+    {{ partial "comments/valine.html" . }}
+{{ else if .utteranc }}
+    {{ partial "comments/utteranc.html" . }}
+{{ else if .giscus }}
+    {{ partial "comments/giscus.html" . }}
+{{ else if .commento }}
+    {{ partial "comments/commento.html" . }}
+{{ end }}

layouts/partials/comments/commento.html

@@ -0,0 +1,12 @@
+{{ with .commento }}
+    {{ $serverURL   := .serverURL }}
+    {{ $autoInit    := .autoInit | default "true"}}
+    {{ $hideDeleted := .hideDeleted | default "false"}}
+
+    <script defer
+    src="http://{{ $serverURL }}/js/commento.js"
+    data-auto-init="{{ $autoInit }}"
+    data-hide-deleted="{{ $hideDeleted }}"
+    ></script>
+    <div id="commento"></div>
+{{ end }}

layouts/partials/comments/disqus.html

@@ -0,0 +1,29 @@
+{{ with .disqus }}
+  <div id="disqus_thread"></div>
+  <script type="text/javascript">
+    (function () {
+      // Don't ever inject Disqus on localhost--it creates unwanted
+      // discussions from 'localhost:1313' on your Disqus account...
+      if (window.location.hostname == "localhost") return;
+
+      var dsq = document.createElement("script");
+      dsq.type = "text/javascript";
+      dsq.async = true;
+      var disqus_shortname = "{{ .shortName }}";
+      dsq.src = "//" + disqus_shortname + ".disqus.com/embed.js";
+      (
+        document.getElementsByTagName("head")[0] ||
+        document.getElementsByTagName("body")[0]
+      ).appendChild(dsq);
+    })();
+  </script>
+  <noscript
+    >{{ i18n "comments_javascript" }}
+    <a href="https://disqus.com/?ref_noscript"
+      >{{ i18n "comments_by" }} Disqus.</a
+    ></noscript
+  >
+  <a href="https://disqus.com/" class="dsq-brlink"
+    >{{ i18n "comments_by" }} <span class="logo-disqus">Disqus</span></a
+  >
+{{ end }}

layouts/partials/comments/giscus.html

@@ -0,0 +1,28 @@
+{{ with .giscus }}
+{{ $repo          := .repo }}
+{{ $repoID        := .repoID }}
+{{ $category      := .category | default "General" }}
+{{ $categoryID    := .categoryID }}
+{{ $theme         := .theme | default "light" }}
+{{ $map           := .map | default "url" }}
+{{ $reaction      := .reaction | default "1" }}
+{{ $metadata      := .metadata | default "0" }}
+{{ $inputPosition := .inputPosition | default "bottom" }}
+{{ $crossOrigin   := .crossOrigin | default "anonymous" }}
+
+<script src="https://giscus.app/client.js"
+        data-repo="{{ $repo }}"
+        data-repo-id="{{ $repoID }}"
+        data-category="{{ $category }}"
+        data-category-id="{{ $categoryID }}"
+        data-mapping="{{ $map }}"
+        data-reactions-enabled="{{ $reaction }}"
+        data-emit-metadata="{{ $metadata }}"
+        data-input-position="{{ $inputPosition }}"
+        data-theme="{{ $theme }}"
+        data-lang="{{ .Site.Language.Lang }}"
+        crossorigin="{{ $crossOrigin }}"
+        async>
+</script>
+{{ end }}
+

layouts/partials/comments/utteranc.html

@@ -1,6 +1,7 @@
-{{ $repo := site.Params.features.comment.utteranc.repo }}
+{{ with .utteranc }}
-{{ $issueTerm := site.Params.features.comment.utteranc.issueTerm }}
+{{ $repo        := .repo }}
-{{ $theme := site.Params.features.comment.utteranc.theme }}
+{{ $issueTerm   := .issueTerm }}
+{{ $theme       := .theme }}
 
 <div id="utteranc_thread"></div>
 <div id="comments" class="comments">
@@ -20,3 +21,4 @@
         document.getElementById('comments-container').appendChild(utterances);
     })();
 </script>
+{{ end }}

layouts/partials/comments/valine.html

@@ -0,0 +1,18 @@
+{{ with .valine }}
+<div id="vcomments"></div>
+<script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>
+<script src="//unpkg.com/valine/dist/Valine.min.js"></script>
+<script type="text/javascript">
+  new Valine({
+    el: "#vcomments",
+    appId: "{{ .appId }}",
+    appKey: "{{ .appKey }}",
+    avatar: "{{ .avatar }}",
+    placeholder: "{{ .placeholder }}",
+    visitor: "{{ .visitor }}",
+    lang: "{{ .lang }}",
+    recordIP: "{{ .recordIP }}",
+    enableQQ: "{{ .enableQQ }}",
+  });
+</script>
+{{ end }}

layouts/partials/disqus.html

@@ -1,32 +0,0 @@
-{{ $disqusShortName := site.DisqusShortname }}
-{{ if site.Params.features.comment.disqus.shortName }}
-  {{ $disqusShortName = site.Params.features.comment.disqus.shortName }}
-{{ end }}
-
-<div id="disqus_thread"></div>
-<script type="text/javascript">
-  (function () {
-    // Don't ever inject Disqus on localhost--it creates unwanted
-    // discussions from 'localhost:1313' on your Disqus account...
-    if (window.location.hostname == "localhost") return;
-
-    var dsq = document.createElement("script");
-    dsq.type = "text/javascript";
-    dsq.async = true;
-    var disqus_shortname = "{{ $disqusShortName }}";
-    dsq.src = "//" + disqus_shortname + ".disqus.com/embed.js";
-    (
-      document.getElementsByTagName("head")[0] ||
-      document.getElementsByTagName("body")[0]
-    ).appendChild(dsq);
-  })();
-</script>
-<noscript
-  >{{ i18n "comments_javascript" }}
-  <a href="https://disqus.com/?ref_noscript"
-    >{{ i18n "comments_by" }} Disqus.</a
-  ></noscript
->
-<a href="https://disqus.com/" class="dsq-brlink"
-  >{{ i18n "comments_by" }} <span class="logo-disqus">Disqus</span></a
->

layouts/partials/footer.html

@@ -1,6 +1,7 @@
 {{/*  variables for enabling/disabling parts of the footer  */}}
 {{ $footerEnabled      := site.Params.footer.enable             | default true }}
 {{ $navigationEnabled  := site.Params.footer.navigation.enable  | default true }}
+{{ $customMenusEnabled := site.Params.footer.navigation.customMenus | default true }}
 {{ $contactMeEnabled   := site.Params.footer.contactMe.enable   | default true }}
 {{ $newsletterEnabled  := site.Params.footer.newsletter.enable  | default true }}
 {{ $credentialsEnabled := site.Params.footer.credentials.enable | default true }}
@@ -26,7 +27,12 @@
     {{ $sections = (index site.Data site.Language.Lang).sections }}
   {{ end }}
 
-  {{ $copyrightNotice := "© 2021 Copyright."}}
+  {{ $customMenus := site.Params.customMenus }}
+  {{ if (index site.Data site.Language.Lang).site.customMenus }}
+    {{ $customMenus = (index site.Data site.Language.Lang).site.customMenus }}
+  {{ end }}
+
+  {{ $copyrightNotice := now.Format "2006" | printf "© %s Copyright."}}
   {{ if (index site.Data site.Language.Lang).site }}
     {{ $siteConfig := (index site.Data site.Language.Lang).site }}
     {{ if $siteConfig.copyright }}
@@ -58,7 +64,7 @@
   {{ end }}
   {{ $hugoLogo = $hugoLogo.RelPermalink}}
 
-  <footer class="container-fluid text-center align-content-center footer pb-2">
+  <footer id="footer" class="container-fluid text-center align-content-center footer pb-2">
     <div class="container pt-5">
       <div class="row text-left">
         {{ if $navigationEnabled }}
@@ -77,6 +83,15 @@
                 </li>
               {{ end }}
             {{- end }}
+            {{ if $customMenusEnabled }}
+              {{ range $customMenus }}
+                {{ if .showOnFooter }}
+                    <li class="nav-item">
+                      <a class="smooth-scroll" href="{{ .url }}">{{ .name }}</a>
+                    </li>
+                {{ end }}
+              {{ end }}
+            {{ end }}
           </ul>
           {{ end }}
         </div>
@@ -144,6 +159,7 @@
               <input type='hidden' name='schedule_type' value='1' />
               <small id="emailHelp" class="form-text text-muted">{{ i18n "newsletter_warning" }}</small>
               <button type="submit" class="btn btn-info"> {{ i18n "submit" }} </button>
+              </div>
               </form>
             {{ end }}
           </div>

layouts/partials/header.html

@@ -8,11 +8,17 @@
 <link rel="stylesheet" href="{{ "/css/navigators/navbar.css" | relURL }}"/>
 <link rel="stylesheet" href="{{ "/css/plyr.css" | relURL }}"/>
 <link rel="stylesheet" href="{{ "/css/flag-icon.min.css" | relURL }}"/>
-<link rel="stylesheet" href="{{ "/css/katex.min.css" | relURL }}">
 
-<!--=================== cdn ==============================-->
+<!--=================== fonts ==============================-->
 <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Muli:wght@300;400;500;600">
-<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" />
+
+<!--=================== icons ==============================-->
+<link rel="stylesheet" href="{{ "/fontawesome/css/all.min.css" | relURL }}"/>
+
+<!--=================== dark mode ==========================-->
+{{ if site.Params.darkMode.enable }}
+<link rel="stylesheet" href="{{ "/css/colortheme/colortheme.css" | relURL }}"/>
+{{ end }}
 
 <!--================= fab-icon =========================-->
 {{/* add favicon only if the site author has provided the the favicon */}}

layouts/partials/math.html

@@ -1,5 +1,15 @@
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.css" integrity="sha384-zB1R0rpPzHqg7Kpt0Aljp8JPLqbXI3bhnPWROx27a9N0Ll6ZP/+DiW/UqRcLbRjq" crossorigin="anonymous">
+<link rel="stylesheet" href="{{ "/katex/katex.min.css" | relURL }}">
-<script defer src="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.js" integrity="sha384-y23I5Q6l+B6vatafAwxRu/0oK/79VlbSz7Q9aiSZUvyWYIYsd+qj+o24G5ZU2zJz" crossorigin="anonymous"></script>
+<script type="text/javascript" defer src="{{ "/katex/katex.min.js" | relURL }}"></script>
-<script defer src="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/contrib/auto-render.min.js" integrity="sha384-kWPLUVMOks5AQFrykwIup5lo0m3iMkkHrD0uJ4H5cjeGihAutqP0yW0J6dpFiVkI" crossorigin="anonymous"
+<script type="text/javascript" defer src="{{ "/katex/auto-render.min.js" | relURL }}" onload="renderMathInElement(document.body);">
-    onload="renderMathInElement(document.body);">
+    renderMathInElement(
+        document.body,
+        {
+            delimiters: [
+                {left: "$$", right: "$$", display: true},
+                {left: "\\[", right: "\\]", display: true},
+                {left: "$", right: "$", display: false},
+                {left: "\\(", right: "\\)", display: false}
+            ]
+        }
+    );
 </script>

layouts/partials/mermaid.html

@@ -0,0 +1,6 @@
+<script src="{{ "/js/mermaid-8.14.0.min.js" | relURL }}"></script>
+<script>
+    mermaid.initialize({
+        startOnLoad:true
+    });
+</script>

layouts/partials/misc/support.html

@@ -0,0 +1,16 @@
+{{ with site.Params.features.support }}
+    {{ if .enabled }}
+        <!-- Enable Ko-Fi floating button -->
+        {{ with .kofi }}
+            <script src='https://storage.ko-fi.com/cdn/scripts/overlay-widget.js'></script>
+            <script>
+            kofiWidgetOverlay.draw('{{ .user }}', {
+                'type': 'floating-chat',
+                'floating-chat.donateButton.text': '{{ .text }}',
+                'floating-chat.donateButton.text-color': '{{ .textColor }}',
+                'floating-chat.donateButton.background-color': '{{ .backgroundColor }}',
+            });
+            </script>
+        {{ end }}
+    {{ end }}
+{{ end }}

layouts/partials/navigators/navbar-2.html

@@ -47,6 +47,9 @@
       {{ if .IsTranslated }}
         {{ partial "navigators/lang-selector-2.html" . }}
       {{ end }}
+      {{ if site.Params.darkMode.enable }}
+        {{ partial "navigators/theme-selector.html" . }}
+      {{ end }}
       </ul>
     </div>
   </div>

layouts/partials/navigators/navbar.html

@@ -66,7 +66,7 @@
       <span class="navbar-toggler-icon"></span>
     </button>
 
-    <div class="collapse navbar-collapse" id="top-nav-items">
+    <div class="collapse navbar-collapse dynamic-navbar" id="top-nav-items">
       <ul class="navbar-nav ml-auto">
         <li class="nav-item">
           <a class="nav-link" href="#home">{{ i18n "home" }}</a>
@@ -87,7 +87,7 @@
           <li class="nav-item dropdown">
             <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">{{i18n "more" }}</a>
             <div class="dropdown-menu" aria-labelledby="navbarDropdown">
-                {{ $sectionCount := 0 }}
+                {{ $sectionCount := 1 }}
                 {{ range sort $sections "section.weight" }}
                   {{ if and (.section.enable) (.section.showOnNavbar) }}
                     {{ $sectionCount  = add $sectionCount 1}}
@@ -115,13 +115,18 @@
           </li>
         {{ end }}
         {{ range $customMenus }}
+            {{ if (not .hideFromNavbar) }}
               <li class="nav-item">
                 <a class="nav-link" href="{{ .url }}">{{ .name }}</a>
               </li>
             {{ end }}
+        {{ end }}
         {{ if .IsTranslated }}
           {{ partial "navigators/lang-selector.html" . }}
         {{ end }}
+        {{ if site.Params.darkMode.enable }}
+          {{ partial "navigators/theme-selector.html" . }}
+        {{ end }}
       </ul>
     </div>
   </div>

layouts/partials/navigators/theme-selector.html

@@ -0,0 +1,20 @@
+<li class="nav-item dropdown">
+<!-- This is for initializing the color scheme selection for new visitors. See /js/darkmode.js -->
+<div id="theme-initialization" style="display: none;"
+  default-theme="{{ site.Params.darkMode.default }}"></div>
+<a class="nav-link dropdown-toggle"  href="#" id="themeSelector" role="button"
+  data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+  <img id="navbar-theme-icon-svg" src="{{ "/icons/moon-svgrepo-com.svg" }}" width=20>
+</a>
+<div class="dropdown-menu dropdown-menu-icons-only" aria-labelledby="themeSelector">
+  <a class="dropdown-item nav-link" href="#" onclick="enableLightTheme()">
+    <img class="menu-icon-center" src="{{ "/icons/sun-svgrepo-com.svg" }}" width=20>
+  </a>
+  <a class="dropdown-item nav-link" href="#" onclick="enableDarkTheme()">
+    <img class="menu-icon-center" src="{{ "/icons/moon-svgrepo-com.svg" }}" width=20>
+  </a>
+  <a class="dropdown-item nav-link" href="#" onclick="useSystemTheme()">
+    <img class="menu-icon-center" src="{{ "/icons/computer-svgrepo-com.svg" }}" width=20>
+  </a>
+</div>
+</li>

layouts/partials/scripts.html

@@ -6,5 +6,9 @@
 <script type="text/javascript" src="{{ "/js/plyr.js" | relURL }}"></script>
 <script type="text/javascript" src="{{ "/js/main.js" | relURL }}"></script>
 
-<script type="text/javascript" defer src="{{ "/js/katex.min.js" | relURL }}"></script>
+{{ if site.Params.darkMode.enable }}
-<script type="text/javascript" defer src="{{ "/js/auto-render.min.js" | relURL }}" onload="renderMathInElement(document.body);"></script>
+{{ if eq site.Params.darkMode.provider "darkreader" }}
+<script type="text/javascript" src="{{ "/js/darkreader.js" | relURL }}"></script>
+<script type="text/javascript" src="{{ "/js/darkmode-darkreader.js" | relURL }}"></script>
+{{ end }}
+{{ end }}

layouts/partials/sections/about.html

@@ -31,7 +31,7 @@
           <li>
             {{ if eq .name "Email" }}
               <a href="mailto:{{ .url }}" title="{{ .name }}" target="_blank" rel="noopener"><i class="{{ .icon }}"></i></a>
-            {{ else if eq .name "Phone" }}
+            {{ else if eq .name (i18n "phone") }}
               <a href="tel:{{ .url }}" title="{{ .name }}" target="_blank" rel="noopener"><i class="{{ .icon }}"></i></a>
             {{ else }}
               <a href="{{ .url }}" title="{{ .name }}" target="_blank" rel="noopener"><i class="{{ .icon }}"></i></a>

layouts/partials/sections/accomplishments.html

@@ -7,6 +7,9 @@
   {{ if not (.section.hideTitle) }}
     <h1 class="text-center">
         <span id="{{ $sectionID }}"></span>{{ .section.name }}</h1>
+  {{ else }}
+    <h1 class="text-center" style="display: none">
+        <span id="{{ $sectionID }}"></span>{{ .section.name }}</h1>
   {{ end }}
   
   <div class="container">

layouts/partials/sections/achievements.html

@@ -7,6 +7,9 @@
   {{ if not (.section.hideTitle) }}
     <h1 class="text-center">
         <span id="{{ $sectionID }}"></span>{{ .section.name }}</h1>
+  {{ else }}
+    <h1 class="text-center" style="display: none">
+        <span id="{{ $sectionID }}"></span>{{ .section.name }}</h1>
   {{ end }}
   <div class="container">
     <div class="row" id="gallery">

layouts/partials/sections/education-alt.html

@@ -5,16 +5,23 @@
 
 <div class="container-fluid anchor pb-5 education-section education-alt" id="{{ $sectionID }}">
   {{ if not (.section.hideTitle) }}
-    <h1 class="text-center">{{ .section.name }}</h1>
+    <h1 class="text-center">
+        <span id="{{ $sectionID }}"></span>{{ .section.name }}</h1>
+  {{ else }}
+    <h1 class="text-center" style="display: none">
+        <span id="{{ $sectionID }}"></span>{{ .section.name }}</h1>
   {{ end }}
 
   <div class="container">
     <table class="education-info-table">
         <tbody>
+            {{ $count := len .degrees }}
             {{ range .degrees}}
             <tr>
                 <td class="icon">
+                    {{ if gt $count 1}}
                     <div class="hline"></div>
+                    {{ end }}
                         <div class="icon-holder">
                             <i class="fas {{ .icon }}"></i>
                         </div>

layouts/partials/sections/education.html

@@ -7,15 +7,21 @@
   {{ if not (.section.hideTitle) }}
     <h1 class="text-center">
         <span id="{{ $sectionID }}"></span>{{ .section.name }}</h1>
+  {{ else }}
+    <h1 class="text-center" style="display: none">
+        <span id="{{ $sectionID }}"></span>{{ .section.name }}</h1>
   {{ end }}
 
   <div class="container">
     <table class="education-info-table">
         <tbody>
+            {{ $count := len .degrees }}
             {{ range .degrees}}
             <tr>
                 <td class="icon">
+                    {{ if gt $count 1}}
                     <div class="hline"></div>
+                    {{ end }}
                         <div class="icon-holder">
                             <i class="fas {{ .icon }}"></i>
                         </div>

layouts/partials/sections/experiences.html

@@ -6,8 +6,10 @@
 <div class="container-fluid anchor pb-5 experiences-section">
   {{ if not (.section.hideTitle) }}
     <h1 class="text-center">
-      <span id="{{ $sectionID }}"></span>{{ .section.name }}
+        <span id="{{ $sectionID }}"></span>{{ .section.name }}</h1>
-    </h1>
+  {{ else }}
+    <h1 class="text-center" style="display: none">
+        <span id="{{ $sectionID }}"></span>{{ .section.name }}</h1>
   {{ end }}
 
   <div class="container timeline text-justify">

layouts/partials/sections/experiences/experience-info.html

@@ -1,5 +1,5 @@
 {{ if gt (len .positions) 1 }}
-  {{ partial "sections/experiences/multiple-positions" . }}
+  {{ partial "sections/experiences/multiple-positions.html" . }}
 {{ else }}
   {{ partial "sections/experiences/single-position.html" . }}
 {{ end }}

layouts/partials/sections/experiences/single-position.html

@@ -12,10 +12,12 @@
     <!-- Add company overview -->
     <p>{{ .company.overview | markdownify }}</p>
     <!-- Add the responsibilities handled at this position -->
+    {{ if $position.responsibilities }}
     <h6 class="text-muted">{{ i18n "responsibilities" }}</h6>
     <ul class="justify-content-around">
     {{ range $position.responsibilities }}
         <li>{{ . | markdownify }}</li>
     {{ end }}
     </ul>
+    {{ end }}
 </div>

layouts/partials/sections/projects.html

@@ -5,7 +5,11 @@
 
 <div class="container-fluid anchor pb-5 projects-section" id="{{ $sectionID }}">
   {{ if not (.section.hideTitle) }}
-    <h1 class="text-center">{{ .section.name }}</h1>
+    <h1 class="text-center">
+        <span id="{{ $sectionID }}"></span>{{ .section.name }}</h1>
+  {{ else }}
+    <h1 class="text-center" style="display: none">
+        <span id="{{ $sectionID }}"></span>{{ .section.name }}</h1>
   {{ end }}
   <div class="container ml-auto text-center">
     <div class="btn-group flex-wrap" role="group" id="project-filter-buttons">

layouts/partials/sections/recent-posts.html

@@ -13,6 +13,9 @@
   {{ if not (.section.hideTitle) }}
     <h1 class="text-center">
         <span id="{{ $sectionID }}"></span>{{ .section.name }}</h1>
+  {{ else }}
+    <h1 class="text-center" style="display: none">
+        <span id="{{ $sectionID }}"></span>{{ .section.name }}</h1>
   {{ end }}
   <div class="container">
     <div class="row" id="recent-post-cards">

layouts/partials/sections/skills.html

@@ -7,6 +7,9 @@
   {{ if not (.section.hideTitle) }}
     <h1 class="text-center">
         <span id="{{ $sectionID }}"></span>{{ .section.name }}</h1>
+  {{ else }}
+    <h1 class="text-center" style="display: none">
+        <span id="{{ $sectionID }}"></span>{{ .section.name }}</h1>
   {{ end }}
   <div class="container d-flex-block">
     <div class="row" id="primary-skills">

layouts/partials/valine.html

@@ -1,17 +0,0 @@
-<!-- valine -->
-<div id="vcomments"></div>
-<script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>
-<script src="//unpkg.com/valine/dist/Valine.min.js"></script>
-<script type="text/javascript">
-  new Valine({
-    el: "#vcomments",
-    appId: "{{ .valine.appId }}",
-    appKey: "{{ .valine.appKey }}",
-    avatar: "{{ .valine.avatar }}",
-    placeholder: "{{ .valine.placeholder }}",
-    visitor: "{{ .valine.visitor }}",
-    lang: "{{ .valine.lang }}",
-    recordIP: "{{ .valine.recordIP }}",
-    enableQQ: "{{ .valine.enableQQ }}",
-  });
-</script>

layouts/shortcodes/mermaid.html

@@ -0,0 +1,13 @@
+{{ $alignment:= .Get "align"}}
+{{ if not $alignment }}
+    {{ $alignment = "center"}}
+{{ end }}
+
+{{ $background:= .Get "background" }}
+{{ if not $background }}
+    {{ $background = "none"}}
+{{ end }}
+
+<div class="mermaid" align="{{ $alignment }}" style="background-color: {{ $background }}; border-radius: 5px;">
+    {{ safeHTML .Inner }}
+</div>

layouts/tags/list.html

@@ -20,7 +20,7 @@
     <div class="sidebar-holder">
       <div class="sidebar" id="sidebar">
         <form class="mx-auto" method="get" action="{{ "search" | relLangURL }}">
-          <input type="text" name="keyword" value="" placeholder="Search" data-search="" id="search-box" />
+          <input type="text" name="keyword" value="" placeholder="{{ i18n "search" }}" data-search="" id="search-box" />
         </form>
         <div class="sidebar-tree">
           <ul class="tree" id="tree">

package-lock.json

@@ -8,8 +8,8 @@
       "version": "1.0.0",
       "license": "MIT",
       "devDependencies": {
-        "autoprefixer": "^10.4.2",
+        "autoprefixer": "^10.4.7",
-        "postcss": "^8.4.5",
+        "postcss": "^8.4.14",
         "postcss-cli": "^8.3.1"
       }
     },
@@ -104,14 +104,24 @@
       }
     },
     "node_modules/autoprefixer": {
-      "version": "10.4.2",
+      "version": "10.4.7",
-      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.2.tgz",
+      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.7.tgz",
-      "integrity": "sha512-9fOPpHKuDW1w/0EKfRmVnxTDt8166MAnLI3mgZ1JCnhNtYWxcJ6Ud5CO/AVOZi/AvFa8DY9RTy3h3+tFBlrrdQ==",
+      "integrity": "sha512-ypHju4Y2Oav95SipEcCcI5J7CGPuvz8oat7sUtYj3ClK44bldfvtvcxK6IEK++7rqB7YchDGzweZIBG+SD0ZAA==",
       "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/autoprefixer"
+        }
+      ],
       "dependencies": {
-        "browserslist": "^4.19.1",
+        "browserslist": "^4.20.3",
-        "caniuse-lite": "^1.0.30001297",
+        "caniuse-lite": "^1.0.30001335",
-        "fraction.js": "^4.1.2",
+        "fraction.js": "^4.2.0",
         "normalize-range": "^0.1.2",
         "picocolors": "^1.0.0",
         "postcss-value-parser": "^4.2.0"
@@ -122,10 +132,6 @@
       "engines": {
         "node": "^10 || ^12 || >=14"
       },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/postcss/"
-      },
       "peerDependencies": {
         "postcss": "^8.1.0"
       }
@@ -152,15 +158,25 @@
       }
     },
     "node_modules/browserslist": {
-      "version": "4.19.1",
+      "version": "4.20.3",
-      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.19.1.tgz",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.20.3.tgz",
-      "integrity": "sha512-u2tbbG5PdKRTUoctO3NBD8FQ5HdPh1ZXPHzp1rwaa5jTc+RV9/+RlWiAIKmjRPQF+xbGM9Kklj5bZQFa2s/38A==",
+      "integrity": "sha512-NBhymBQl1zM0Y5dQT/O+xiLP9/rzOIQdKM/eMJBAq7yBgaB6krIYLGejrwVYnSHZdqjscB1SPuAjHwxjvN6Wdg==",
       "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/browserslist"
+        }
+      ],
       "dependencies": {
-        "caniuse-lite": "^1.0.30001286",
+        "caniuse-lite": "^1.0.30001332",
-        "electron-to-chromium": "^1.4.17",
+        "electron-to-chromium": "^1.4.118",
         "escalade": "^3.1.1",
-        "node-releases": "^2.0.1",
+        "node-releases": "^2.0.3",
         "picocolors": "^1.0.0"
       },
       "bin": {
@@ -168,21 +184,23 @@
       },
       "engines": {
         "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/browserslist"
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001299",
+      "version": "1.0.30001340",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001299.tgz",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001340.tgz",
-      "integrity": "sha512-iujN4+x7QzqA2NCSrS5VUy+4gLmRd4xv6vbBBsmfVqTx8bLAD8097euLqQgKxSVLvxjSDcvF1T/i9ocgnUFexw==",
+      "integrity": "sha512-jUNz+a9blQTQVu4uFcn17uAD8IDizPzQkIKh3LCJfg9BkyIqExYYdyc/ZSlWUSKb8iYiXxKsxbv4zYSvkqjrxw==",
       "dev": true,
-      "funding": {
+      "funding": [
+        {
           "type": "opencollective",
           "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/caniuse-lite"
         }
+      ]
     },
     "node_modules/chalk": {
       "version": "4.1.2",
@@ -278,9 +296,9 @@
       }
     },
     "node_modules/electron-to-chromium": {
-      "version": "1.4.33",
+      "version": "1.4.137",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.33.tgz",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.137.tgz",
-      "integrity": "sha512-OVK1Ad3pHnmuXPhEfq85X8vUKr1UPNHryBnbKnyLcAfh8dPwoFjoDhDlP5KpPJIiymvSucZs48UBrE1250IxOw==",
+      "integrity": "sha512-0Rcpald12O11BUogJagX3HsCN3FE83DSqWjgXoHo5a72KUKMSfI39XBgJpgNNxS9fuGzytaFjE06kZkiVFy2qA==",
       "dev": true
     },
     "node_modules/emoji-regex": {
@@ -336,9 +354,9 @@
       }
     },
     "node_modules/fraction.js": {
-      "version": "4.1.2",
+      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.1.2.tgz",
+      "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.2.0.tgz",
-      "integrity": "sha512-o2RiJQ6DZaR/5+Si0qJUIy637QMRudSi9kU/FFzx9EZazrIdnBgpU+3sEWCxAVhH2RtxW2Oz+T4p2o8uOPVcgA==",
+      "integrity": "sha512-MhLuK+2gUcnZe8ZHlaaINnQLl0xRIGRfcGk2yl8xoQAfHrSsL3rYu6FCmBdkdbhc9EPlwyGHewaRsvwRMJtAlA==",
       "dev": true,
       "engines": {
         "node": "*"
@@ -603,9 +621,9 @@
       }
     },
     "node_modules/nanoid": {
-      "version": "3.1.30",
+      "version": "3.3.4",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.1.30.tgz",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz",
-      "integrity": "sha512-zJpuPDwOv8D2zq2WRoMe1HsfZthVewpel9CAvTfc/2mBD1uUT/agc5f7GHGWXlYkFvi1mVxe4IjvP2HNrop7nQ==",
+      "integrity": "sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==",
       "dev": true,
       "bin": {
         "nanoid": "bin/nanoid.cjs"
@@ -615,9 +633,9 @@
       }
     },
     "node_modules/node-releases": {
-      "version": "2.0.1",
+      "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.1.tgz",
+      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.4.tgz",
-      "integrity": "sha512-CqyzN6z7Q6aMeF/ktcMVTzhAHCEpf8SOarwpzpf8pNBY2k5/oM34UHldUwp8VKI7uxct2HxSRdJjBaZeESzcxA==",
+      "integrity": "sha512-gbMzqQtTtDz/00jQzZ21PQzdI9PyLYqUSvD0p3naOhX4odFji0ZxYdnVwPTxmSwkmxhcFImpozceidSG+AgoPQ==",
       "dev": true
     },
     "node_modules/normalize-path": {
@@ -675,21 +693,27 @@
       }
     },
     "node_modules/postcss": {
-      "version": "8.4.5",
+      "version": "8.4.14",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.5.tgz",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.14.tgz",
-      "integrity": "sha512-jBDboWM8qpaqwkMwItqTQTiFikhs/67OYVvblFFTM7MrZjt6yMKd6r2kgXizEbTTljacm4NldIlZnhbjr84QYg==",
+      "integrity": "sha512-E398TUmfAYFPBSdzgeieK2Y1+1cpdxJx8yXbK/m57nRhKSmk1GB2tO4lbLBtlkfPQTDKfe4Xqv1ASWPpayPEig==",
       "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        }
+      ],
       "dependencies": {
-        "nanoid": "^3.1.30",
+        "nanoid": "^3.3.4",
         "picocolors": "^1.0.0",
-        "source-map-js": "^1.0.1"
+        "source-map-js": "^1.0.2"
       },
       "engines": {
         "node": "^10 || ^12 || >=14"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/postcss/"
       }
     },
     "node_modules/postcss-cli": {
@@ -888,9 +912,9 @@
       }
     },
     "node_modules/source-map-js": {
-      "version": "1.0.1",
+      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.1.tgz",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
-      "integrity": "sha512-4+TN2b3tqOCd/kaGRJ/sTYA0tR0mdXx26ipdolxcwtJVqEnqNYvlCAt1q3ypy4QMlYus+Zh34RNtYLoq2oQ4IA==",
+      "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==",
       "dev": true,
       "engines": {
         "node": ">=0.10.0"
@@ -1083,14 +1107,14 @@
       "dev": true
     },
     "autoprefixer": {
-      "version": "10.4.2",
+      "version": "10.4.7",
-      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.2.tgz",
+      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.7.tgz",
-      "integrity": "sha512-9fOPpHKuDW1w/0EKfRmVnxTDt8166MAnLI3mgZ1JCnhNtYWxcJ6Ud5CO/AVOZi/AvFa8DY9RTy3h3+tFBlrrdQ==",
+      "integrity": "sha512-ypHju4Y2Oav95SipEcCcI5J7CGPuvz8oat7sUtYj3ClK44bldfvtvcxK6IEK++7rqB7YchDGzweZIBG+SD0ZAA==",
       "dev": true,
       "requires": {
-        "browserslist": "^4.19.1",
+        "browserslist": "^4.20.3",
-        "caniuse-lite": "^1.0.30001297",
+        "caniuse-lite": "^1.0.30001335",
-        "fraction.js": "^4.1.2",
+        "fraction.js": "^4.2.0",
         "normalize-range": "^0.1.2",
         "picocolors": "^1.0.0",
         "postcss-value-parser": "^4.2.0"
@@ -1112,22 +1136,22 @@
       }
     },
     "browserslist": {
-      "version": "4.19.1",
+      "version": "4.20.3",
-      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.19.1.tgz",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.20.3.tgz",
-      "integrity": "sha512-u2tbbG5PdKRTUoctO3NBD8FQ5HdPh1ZXPHzp1rwaa5jTc+RV9/+RlWiAIKmjRPQF+xbGM9Kklj5bZQFa2s/38A==",
+      "integrity": "sha512-NBhymBQl1zM0Y5dQT/O+xiLP9/rzOIQdKM/eMJBAq7yBgaB6krIYLGejrwVYnSHZdqjscB1SPuAjHwxjvN6Wdg==",
       "dev": true,
       "requires": {
-        "caniuse-lite": "^1.0.30001286",
+        "caniuse-lite": "^1.0.30001332",
-        "electron-to-chromium": "^1.4.17",
+        "electron-to-chromium": "^1.4.118",
         "escalade": "^3.1.1",
-        "node-releases": "^2.0.1",
+        "node-releases": "^2.0.3",
         "picocolors": "^1.0.0"
       }
     },
     "caniuse-lite": {
-      "version": "1.0.30001299",
+      "version": "1.0.30001340",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001299.tgz",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001340.tgz",
-      "integrity": "sha512-iujN4+x7QzqA2NCSrS5VUy+4gLmRd4xv6vbBBsmfVqTx8bLAD8097euLqQgKxSVLvxjSDcvF1T/i9ocgnUFexw==",
+      "integrity": "sha512-jUNz+a9blQTQVu4uFcn17uAD8IDizPzQkIKh3LCJfg9BkyIqExYYdyc/ZSlWUSKb8iYiXxKsxbv4zYSvkqjrxw==",
       "dev": true
     },
     "chalk": {
@@ -1204,9 +1228,9 @@
       }
     },
     "electron-to-chromium": {
-      "version": "1.4.33",
+      "version": "1.4.137",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.33.tgz",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.137.tgz",
-      "integrity": "sha512-OVK1Ad3pHnmuXPhEfq85X8vUKr1UPNHryBnbKnyLcAfh8dPwoFjoDhDlP5KpPJIiymvSucZs48UBrE1250IxOw==",
+      "integrity": "sha512-0Rcpald12O11BUogJagX3HsCN3FE83DSqWjgXoHo5a72KUKMSfI39XBgJpgNNxS9fuGzytaFjE06kZkiVFy2qA==",
       "dev": true
     },
     "emoji-regex": {
@@ -1253,9 +1277,9 @@
       }
     },
     "fraction.js": {
-      "version": "4.1.2",
+      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.1.2.tgz",
+      "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.2.0.tgz",
-      "integrity": "sha512-o2RiJQ6DZaR/5+Si0qJUIy637QMRudSi9kU/FFzx9EZazrIdnBgpU+3sEWCxAVhH2RtxW2Oz+T4p2o8uOPVcgA==",
+      "integrity": "sha512-MhLuK+2gUcnZe8ZHlaaINnQLl0xRIGRfcGk2yl8xoQAfHrSsL3rYu6FCmBdkdbhc9EPlwyGHewaRsvwRMJtAlA==",
       "dev": true
     },
     "fs-extra": {
@@ -1447,15 +1471,15 @@
       }
     },
     "nanoid": {
-      "version": "3.1.30",
+      "version": "3.3.4",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.1.30.tgz",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz",
-      "integrity": "sha512-zJpuPDwOv8D2zq2WRoMe1HsfZthVewpel9CAvTfc/2mBD1uUT/agc5f7GHGWXlYkFvi1mVxe4IjvP2HNrop7nQ==",
+      "integrity": "sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==",
       "dev": true
     },
     "node-releases": {
-      "version": "2.0.1",
+      "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.1.tgz",
+      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.4.tgz",
-      "integrity": "sha512-CqyzN6z7Q6aMeF/ktcMVTzhAHCEpf8SOarwpzpf8pNBY2k5/oM34UHldUwp8VKI7uxct2HxSRdJjBaZeESzcxA==",
+      "integrity": "sha512-gbMzqQtTtDz/00jQzZ21PQzdI9PyLYqUSvD0p3naOhX4odFji0ZxYdnVwPTxmSwkmxhcFImpozceidSG+AgoPQ==",
       "dev": true
     },
     "normalize-path": {
@@ -1495,14 +1519,14 @@
       "dev": true
     },
     "postcss": {
-      "version": "8.4.5",
+      "version": "8.4.14",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.5.tgz",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.14.tgz",
-      "integrity": "sha512-jBDboWM8qpaqwkMwItqTQTiFikhs/67OYVvblFFTM7MrZjt6yMKd6r2kgXizEbTTljacm4NldIlZnhbjr84QYg==",
+      "integrity": "sha512-E398TUmfAYFPBSdzgeieK2Y1+1cpdxJx8yXbK/m57nRhKSmk1GB2tO4lbLBtlkfPQTDKfe4Xqv1ASWPpayPEig==",
       "dev": true,
       "requires": {
-        "nanoid": "^3.1.30",
+        "nanoid": "^3.3.4",
         "picocolors": "^1.0.0",
-        "source-map-js": "^1.0.1"
+        "source-map-js": "^1.0.2"
       }
     },
     "postcss-cli": {
@@ -1620,9 +1644,9 @@
       "dev": true
     },
     "source-map-js": {
-      "version": "1.0.1",
+      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.1.tgz",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
-      "integrity": "sha512-4+TN2b3tqOCd/kaGRJ/sTYA0tR0mdXx26ipdolxcwtJVqEnqNYvlCAt1q3ypy4QMlYus+Zh34RNtYLoq2oQ4IA==",
+      "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==",
       "dev": true
     },
     "string-width": {

package.json

@@ -17,8 +17,8 @@
   },
   "homepage": "https://github.com/hossainemruz/toha#readme",
   "devDependencies": {
-    "autoprefixer": "^10.4.2",
+    "autoprefixer": "^10.4.7",
-    "postcss": "^8.4.5",
+    "postcss": "^8.4.14",
     "postcss-cli": "^8.3.1"
   }
 }

static/css/colortheme/colortheme.css

@@ -0,0 +1,20 @@
+/* Note: No need to invert when the screen is small because the navbar is
+   collapsed to a hamburger menu. */
+@media only screen and (min-width: 1200px) {
+  .dynamic-navbar .navbar-icon-svg-dark {
+    filter: invert(1);
+  };
+}
+
+@media only screen and (min-width: 1200px) {
+  .dropdown-menu-icons-only {
+    width: 25px;
+    min-width: 3rem;
+  }
+}
+
+.menu-icon-center {
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+}

static/css/sections/education.css

@@ -1,6 +1,7 @@
 .education-section .education-info-table {
   width: 100%;
   border: none;
+  background: none;
 }
 
 .education-section .education-info-table tr:hover {
@@ -12,6 +13,7 @@
 .education-section .education-info-table td {
   border: none;
   padding: 0;
+  background: none;
 }
 
 .education-section .timeframe {

static/icons/computer-svgrepo-com.svg

@@ -0,0 +1,45 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 364 364" style="enable-background:new 0 0 364 364;" xml:space="preserve">
+<g>
+	<path d="M350,60.5h-50c-7.72,0-14,6.28-14,14v225c0,7.72,6.28,14,14,14h50c7.72,0,14-6.28,14-14v-225
+		C364,66.78,357.72,60.5,350,60.5z M325.864,166.5c-11.23,0-20.333-9.104-20.333-20.333s9.104-20.333,20.333-20.333
+		s20.333,9.104,20.333,20.333S337.094,166.5,325.864,166.5z"/>
+	<path d="M230,50.5H30c-16.542,0-30,13.458-30,30v149c0,16.542,13.458,30,30,30h79v21.765c0,0.665-0.466,1.235-0.847,1.235H52.351
+		C46.092,282.5,41,287.329,41,293.265v9.235c0,5.962,5.198,11,11.351,11h156.604c6.091,0,11.046-4.935,11.046-11v-9.235
+		c0-6.037-4.852-10.765-11.046-10.765h-55.803c-0.517,0-1.151-0.681-1.151-1.235V259.5h78c16.542,0,30-13.458,30-30v-149
+		C260,63.958,246.542,50.5,230,50.5z M230,80.5l0.017,133H30v-133H230z"/>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>

static/icons/moon-svgrepo-com.svg

@@ -0,0 +1,66 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 206.622 206.622" style="enable-background:new 0 0 206.622 206.622;" xml:space="preserve">
+<g>
+	<g>
+		<g>
+			<path d="M155.287,58.38c-6.703-7.189-14.65-12.775-23.62-16.603c-1.299-0.552-2.8-0.291-3.83,0.672
+				c-1.034,0.963-1.4,2.443-0.94,3.777c8.128,23.444,1.654,49.524-16.485,66.441c-18.146,16.918-44.614,21.557-67.43,11.812
+				c-1.288-0.55-2.8-0.291-3.83,0.672c-1.034,0.963-1.4,2.443-0.94,3.777c3.197,9.218,8.215,17.535,14.918,24.72
+				c12.721,13.643,29.996,21.517,48.64,22.168c0.836,0.03,1.668,0.043,2.5,0.043c17.728,0,34.54-6.611,47.571-18.764
+				c13.647-12.724,21.517-29.998,22.168-48.643C174.658,89.807,168.011,72.025,155.287,58.38z M166.883,108.203
+				c-0.585,16.74-7.655,32.251-19.905,43.675c-12.25,11.423-28.223,17.425-44.959,16.809c-16.743-0.583-32.252-7.652-43.674-19.904
+				c-4.21-4.511-7.678-9.519-10.363-14.947c23.47,6.872,49.127,0.987,67.291-15.952c18.167-16.941,25.828-42.13,20.608-66.02
+				c5.23,3.057,9.984,6.867,14.19,11.382C161.496,75.496,167.465,91.464,166.883,108.203z"/>
+			<path d="M167.607,163.757c-1.393-1.393-3.649-1.393-5.042,0s-1.393,3.649,0,5.042l7.563,7.563
+				c0.696,0.696,1.609,1.045,2.521,1.045c0.912,0,1.825-0.348,2.521-1.045c1.393-1.393,1.393-3.649,0-5.042L167.607,163.757z"/>
+			<path d="M170.128,30.259l-7.563,7.565c-1.393,1.393-1.393,3.651,0,5.042c0.696,0.696,1.609,1.045,2.521,1.045
+				s1.825-0.348,2.521-1.045l7.563-7.565c1.393-1.393,1.393-3.651,0-5.042C173.777,28.866,171.521,28.866,170.128,30.259z"/>
+			<path d="M103.311,188.793c-1.971,0-3.566,1.597-3.566,3.566v10.697c0,1.969,1.595,3.566,3.566,3.566
+				c1.971,0,3.566-1.597,3.566-3.566v-10.697C106.877,190.39,105.282,188.793,103.311,188.793z"/>
+			<path d="M201.371,99.745h-10.697c-1.971,0-3.566,1.597-3.566,3.566c0,1.969,1.595,3.566,3.566,3.566h10.697
+				c1.971,0,3.566-1.597,3.566-3.566C204.937,101.342,203.341,99.745,201.371,99.745z"/>
+			<path d="M39.015,42.866c0.696,0.696,1.609,1.045,2.521,1.045s1.825-0.348,2.521-1.045c1.393-1.391,1.393-3.649,0-5.042
+				l-7.563-7.565c-1.393-1.393-3.649-1.393-5.042,0c-1.393,1.391-1.393,3.649,0,5.042L39.015,42.866z"/>
+			<path d="M39.015,163.757l-7.563,7.563c-1.393,1.393-1.393,3.649,0,5.042c0.696,0.696,1.609,1.045,2.521,1.045
+				c0.912,0,1.825-0.348,2.521-1.045l7.563-7.563c1.393-1.393,1.393-3.649,0-5.042C42.664,162.364,40.408,162.364,39.015,163.757z"
+				/>
+			<path d="M103.311,17.829c1.971,0,3.566-1.597,3.566-3.566V3.566c0-1.969-1.595-3.566-3.566-3.566
+				c-1.971,0-3.566,1.597-3.566,3.566v10.697C99.745,16.232,101.34,17.829,103.311,17.829z"/>
+			<path d="M15.949,99.745H5.251c-1.971,0-3.566,1.597-3.566,3.566c0,1.969,1.595,3.566,3.566,3.566h10.697
+				c1.971,0,3.566-1.597,3.566-3.566C19.514,101.342,17.919,99.745,15.949,99.745z"/>
+		</g>
+	</g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>

static/icons/sun-svgrepo-com.svg

@@ -0,0 +1,68 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve">
+<g id="Sun">
+	<path d="M32.1318512,18.2793007c-7.7119007,0-13.9863014,6.2743988-13.9863014,13.9862976
+		s6.2744007,13.9864006,13.9863014,13.9864006s13.9862976-6.274498,13.9862976-13.9864006
+		S39.84375,18.2793007,32.1318512,18.2793007z M32.1318512,44.2793007c-6.6245003,0-12.0137005-5.3897018-12.0137005-12.0137024
+		s5.3892002-12.0135975,12.0137005-12.0135975s12.0136986,5.3895988,12.0136986,12.0135975
+		S38.7563515,44.2793007,32.1318512,44.2793007z"/>
+	<path d="M32.0000496,13.1688995c0.5522003,0,1-0.4471998,1-1V1c0-0.5527-0.4477997-1-1-1c-0.5522995,0-1,0.4473-1,1v11.1688995
+		C31.0000496,12.7216997,31.4477501,13.1688995,32.0000496,13.1688995z"/>
+	<path d="M32.0000496,50.830101c-0.5522995,0-1,0.4472008-1,1V63c0,0.5527,0.4477005,1,1,1c0.5522003,0,1-0.4473,1-1V51.830101
+		C33.0000496,51.2773018,32.5522499,50.830101,32.0000496,50.830101z"/>
+	<path d="M62.263649,30.4452991H51.09375c-0.5522003,0-1,0.4473-1,1s0.4477997,1.0000019,1,1.0000019h11.169899
+		c0.5522995,0,1-0.4473019,1-1.0000019S62.8159485,30.4452991,62.263649,30.4452991z"/>
+	<path d="M13.90625,31.4452991c0-0.5527-0.447794-1-0.999999-1H1.7363508c-0.5523,0-1,0.4473-1,1s0.4477,1.0000019,1,1.0000019
+		H12.906251C13.458456,32.4453011,13.90625,31.9979992,13.90625,31.4452991z"/>
+	<path d="M45.1801491,19.8778992c0.2559013,0,0.5116997-0.097599,0.7070999-0.2929001l7.8988991-7.8984995
+		c0.3906021-0.3905993,0.3906021-1.0233994,0-1.4139996c-0.3905983-0.3907003-1.0234985-0.3907003-1.4140968,0l-7.8989029,7.8984003
+		c-0.3905983,0.3906002-0.3905983,1.0233994,0,1.4140987C44.668457,19.7803001,44.9243507,19.8778992,45.1801491,19.8778992z"/>
+	<path d="M45.887249,45.2030983c-0.3906975-0.3905983-1.0234985-0.3905983-1.4141006,0
+		c-0.3905983,0.3907013-0.3905983,1.0235023,0,1.4141006l7.8989029,7.8973999
+		c0.1952972,0.1954002,0.4511986,0.2929993,0.7070999,0.2929993c0.2557983,0,0.5116997-0.097599,0.7069969-0.2929993
+		c0.3906021-0.3905983,0.3906021-1.0233994,0-1.4139977L45.887249,45.2030983z"/>
+	<path d="M18.112751,19.5849991c0.1954002,0.1953011,0.4511986,0.2929001,0.7070999,0.2929001
+		c0.2558002,0,0.5116997-0.097599,0.7069988-0.2929001c0.3906059-0.3906994,0.3906059-1.0234985,0-1.4140987L11.6289501,10.2725
+		c-0.3906994-0.3907003-1.0234947-0.3907003-1.4140997,0c-0.3906002,0.3906002-0.3906002,1.0234003,0,1.4139996
+		L18.112751,19.5849991z"/>
+	<path d="M19.5712509,45.2700996c-0.0177002-0.0208015-0.024601-0.0471992-0.0444012-0.0670013
+		c-0.3906002-0.3905983-1.0233936-0.3905983-1.4140987,0l-3.9401007,3.9400024l-4.0341949,3.8446999
+		c-0.3999052,0.3811989-0.415205,1.0139008-0.0339994,1.4137993c0.0192947,0.0203018,0.045495,0.0278015,0.066,0.0460014
+		c0.0176945,0.0208969,0.0245943,0.0472984,0.0443945,0.0669975c0.1953001,0.1954002,0.4512005,0.2929993,0.7069998,0.2929993
+		c0.2559004,0,0.5117006-0.097599,0.7070999-0.2929993l3.9401007-3.9398994l4.0341997-3.8446999
+		c0.3999004-0.3811989,0.415205-1.0139008,0.0340004-1.4137993C19.6179504,45.2958984,19.5917511,45.2882996,19.5712509,45.2700996z
+		"/>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>

static/js/darkmode-darkreader.js

@@ -0,0 +1,59 @@
+const DARK = "dark";
+const LIGHT = "light";
+const SYSTEM = "system";
+const COLOR_THEME = "color-theme";
+const DARK_OPTIONS = {
+  brightness: 100,
+  contrast: 100,
+  sepia: 0
+};
+const SVG_INVERT = {invert: ['img[src$=".svg"]']};
+const NAVBAR_ICON_ID = "navbar-theme-icon-svg";
+const DARK_ICON = "/icons/moon-svgrepo-com.svg";
+const LIGHT_ICON = "/icons/sun-svgrepo-com.svg";
+const SYSTEM_ICON = "/icons/computer-svgrepo-com.svg";
+
+function enableDarkTheme() {
+  localStorage.setItem(COLOR_THEME, DARK);
+  DarkReader.enable(DARK_OPTIONS, SVG_INVERT);
+  document.getElementById(NAVBAR_ICON_ID).src = DARK_ICON;
+}
+
+function enableLightTheme() {
+  localStorage.setItem(COLOR_THEME, LIGHT);
+  DarkReader.disable();
+  document.getElementById(NAVBAR_ICON_ID).src = LIGHT_ICON;
+}
+
+function useSystemTheme() {
+  localStorage.setItem(COLOR_THEME, SYSTEM);
+  DarkReader.auto(DARK_OPTIONS, SVG_INVERT);
+  document.getElementById(NAVBAR_ICON_ID).src = SYSTEM_ICON;
+}
+
+function initializeColorTheme() {
+  // We're using the themeInitialization attributes as a 'hack' for setting up
+  // the default color scheme because we don't want to complicate this further
+  // by creating custom javascript output in Hugo.
+  let themeInitialization = document.getElementById("theme-initialization");
+  let defaultColorScheme = themeInitialization.getAttribute('default-theme');
+  // If the user has already selected a preferred theme then use that instead
+  // of the default theme. Also, the default theme gets loaded to localStorage
+  // on the first visit.
+  let colorTheme = localStorage.getItem(COLOR_THEME);
+  if (colorTheme == null || colorTheme.length == 0) {
+    colorTheme = defaultColorScheme;
+  }
+  // Enable the color theme
+  if (colorTheme == DARK) {
+    enableDarkTheme();
+  } else if (colorTheme == SYSTEM) {
+    useSystemTheme();
+  } else {
+    // We use light theme for the two conditions below.
+    // 1. the selected theme is light
+    // 2. no default theme is found - fall back to original behavior
+    enableLightTheme();
+  }
+}
+initializeColorTheme()

static/js/navbar.js

@@ -8,6 +8,9 @@ const updateNavBar = () => {
     $('#navbar-toggler').removeClass('navbar-dark');
     $('#navbar-toggler').addClass('navbar-light');
 
+    // color theme selector a.k.a. dark mode
+    $('#navbar-theme-icon-svg').removeClass('navbar-icon-svg-dark');
+
     // get the main logo from hidden img tag
     let mainLogo = document.getElementById("main-logo")
     if (mainLogo !== null) {
@@ -22,6 +25,9 @@ const updateNavBar = () => {
     $('#navbar-toggler').removeClass('navbar-light');
     $('#navbar-toggler').addClass('navbar-dark');
 
+    // color theme selector a.k.a. dark mode
+    $('#navbar-theme-icon-svg').addClass('navbar-icon-svg-dark');
+
     // get the inverted logo from hidden img tag
     let invertedLogo = document.getElementById("inverted-logo")
     if (invertedLogo !== null) {