Update and run autoprefixer (#653)

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

.github/ISSUE_TEMPLATE/feature_request.md

@@ -6,8 +6,8 @@ title: 'Feature Request'
 
 <!---
 Before filing an issue, please review the following:
-  Existing Features: https://github.com/hossainemruz/toha#features
-  Project Roadmap: https://github.com/hossainemruz/toha#project-roadmap
+  Existing Features: https://github.com/hugo-toha/toha#features
+  Project Roadmap: https://github.com/hugo-toha/toha#project-roadmap
 -->
 
 ### Describe the solution you'd like

.github/release-drafter.yml

@@ -17,7 +17,7 @@ categories:
   - 'feature'
   - 'enhancement'
 
-- title: 'New Translations'
+- title: 'Translations'
   label: 'translation'
 
 - title: 'Bug Fixes'

.github/workflows/autoprefixer.yml

@@ -8,10 +8,10 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout to latest commit
-        uses: actions/checkout@v2.3.4
+        uses: actions/checkout@v3.1.0
 
       - name: Setup Node
-        uses: actions/setup-node@v2.1.5
+        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.10.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@v3.1.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
+      uses: actions/checkout@v3.1.0
 
     # 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.15.0
+    - uses: release-drafter/release-drafter@v5.21.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@master
+    - uses: actions/checkout@v3.1.0
     # run markdown linter
-    - uses: gaurav-nelson/github-action-markdown-link-check@1.0.12
+    - uses: gaurav-nelson/github-action-markdown-link-check@1.0.14

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

@@ -0,0 +1,150 @@
+name: Project Automation (Issue)
+on:
+  issues:
+    types:
+      - opened
+      - reopened
+      - closed
+      - labeled
+      - unlabeled
+jobs:
+  issue_automation:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Get project data
+        env:
+          GITHUB_TOKEN: ${{secrets.PROJECT_AUTOMATION}}
+          ORGANIZATION: hugo-toha
+          PROJECT_NUMBER: 4
+        run: |
+          gh api graphql --header 'GraphQL-Features: projects_next_graphql' -f query='
+            query($org: String!, $number: Int!) {
+              organization(login: $org){
+                projectNext(number: $number) {
+                  id
+                  fields(first:20) {
+                    nodes {
+                      id
+                      name
+                      settings
+                    }
+                  }
+                }
+              }
+            }' -f org="$ORGANIZATION" -F number=$PROJECT_NUMBER > project_data.json
+
+           echo 'PROJECT_ID='$(jq -r '.data.organization.projectNext.id' project_data.json) >> $GITHUB_ENV
+
+          # Read the ID of the "Type" field options
+          echo 'TYPE_ID='$(jq -r '.data.organization.projectNext.fields.nodes[]     | select(.name== "Type") |.id' project_data.json) >> $GITHUB_ENV
+          echo 'PROJECT_ID='$(jq -r '.data.organization.projectNext.id' project_data.json) >> $GITHUB_ENV
+          echo 'TYPE_ID='$(jq -r '.data.organization.projectNext.fields.nodes[]     | select(.name== "Type") |.id' project_data.json) >> $GITHUB_ENV
+          echo 'TYPE_BUG='$(jq -r '.data.organization.projectNext.fields.nodes[] | select(.name== "Type") |.settings | fromjson.options[] | select(.name=="Bug")             |.id' project_data.json) >> $GITHUB_ENV
+          echo 'TYPE_FEATURE='$(jq -r '.data.organization.projectNext.fields.nodes[]   | select(.name== "Type") |.settings | fromjson.options[] | select(.name=="Feature") |.id' project_data.json) >> $GITHUB_ENV
+          echo 'TYPE_ENHANCEMENT='$(jq -r '.data.organization.projectNext.fields.nodes[]   | select(.name== "Type") |.settings | fromjson.options[] | select(.name=="Enhancement") |.id' project_data.json) >> $GITHUB_ENV
+          echo 'TYPE_DOCUMENTATION='$(jq -r '.data.organization.projectNext.fields.nodes[]  | select(.name== "Type") |.settings | fromjson.options[] | select(.name=="Documentation")    |.id' project_data.json) >> $GITHUB_ENV
+          echo 'TYPE_TRANSLATION='$(jq -r '.data.organization.projectNext.fields.nodes[]  | select(.name== "Type") |.settings | fromjson.options[] | select(.name=="Translation")    |.id' project_data.json) >> $GITHUB_ENV
+
+          # Read the id of the "Status" field options
+          echo 'STATUS_ID='$(jq -r '.data.organization.projectNext.fields.nodes[]     | select(.name== "Status") |.id' project_data.json) >> $GITHUB_ENV
+          echo 'STATUS_TODO='$(jq -r '.data.organization.projectNext.fields.nodes[]   | select(.name== "Status") |.settings | fromjson.options[] | select(.name=="Todo")    |.id' project_data.json) >> $GITHUB_ENV
+          echo 'STATUS_IN_PROGRESS='$(jq -r '.data.organization.projectNext.fields.nodes[]   | select(.name== "Status") |.settings | fromjson.options[] | select(.name=="In Progress")    |.id' project_data.json) >> $GITHUB_ENV
+          echo 'STATUS_READY_FOR_REVIEW='$(jq -r '.data.organization.projectNext.fields.nodes[]   | select(.name== "Status") |.settings | fromjson.options[] | select(.name=="Ready for Review")    |.id' project_data.json) >> $GITHUB_ENV
+          echo 'STATUS_DONE='$(jq -r '.data.organization.projectNext.fields.nodes[]   | select(.name== "Status") |.settings | fromjson.options[] | select(.name=="Done")    |.id' project_data.json) >> $GITHUB_ENV
+
+      - name: Add Issue to project
+        env:
+          GITHUB_TOKEN: ${{secrets.PROJECT_AUTOMATION}}
+          ISSUE_ID: ${{ github.event.issue.node_id }}
+        run: |
+          item_id="$( gh api graphql -f query='
+            mutation($project:ID!, $issue:ID!) {
+              addProjectNextItem(input: {projectId: $project, contentId: $issue}) {
+                projectNextItem {
+                  id
+                }
+              }
+            }' -f project="$PROJECT_ID" -f issue="$ISSUE_ID" --jq '.data.addProjectNextItem.projectNextItem.id')"
+
+          echo 'ITEM_ID='$item_id >> $GITHUB_ENV
+
+      - name: Export Labels
+        env:
+          ISSUE_DATA: ${{ toJson(github.event.issue) }}
+        run: |
+          echo 'LABELS='$(echo "$ISSUE_DATA" | jq -r '[.labels[].name] | join(" ")') >> $GITHUB_ENV
+
+      - name: Set "Type" field
+        env:
+          GITHUB_TOKEN: ${{secrets.PROJECT_AUTOMATION}}
+        run: |
+          # Only execute this step if the Issue contains at least one label
+          if [ "${#LABELS[@]}" -gt 0 ]; then
+
+            # Let by default the type is "Bug"
+            OPTION_ID=$TYPE_BUG
+
+            # If it has "feature" label then set the type to "Feature"
+            if [[ "${LABELS[*]}" =~ "feature" ]]; then
+              OPTION_ID=$TYPE_FEATURE
+            fi
+
+            # If it has "enhancement" label then set the type to "Enhancement"
+            if [[ "${LABELS[*]}" =~ "enhancement" ]]; then
+              OPTION_ID=$TYPE_ENHANCEMENT
+            fi
+
+            # If it has "documentation" label then set the type to "Documentation"
+            if [[ "${LABELS[*]}" =~ "documentation" ]]; then
+              OPTION_ID=$TYPE_DOCUMENTATION
+            fi
+
+            # If it has "translation" label then set the type to "Translation"
+            if [[ "${LABELS[*]}" =~ "translation" ]]; then
+              OPTION_ID=$TYPE_TRANSLATION
+            fi
+
+            # Set the "Type" field to appropriate option
+            gh api graphql -f query='
+              mutation ($project: ID!, $item: ID!, $field: ID!, $opt_id: String!) {
+                updateProjectNextItemField(input: {
+                  projectId: $project
+                  itemId: $item
+                  fieldId: $field
+                  value: $opt_id
+                }) {
+                  projectNextItem {
+                    id
+                  }
+                }
+              }' -f project="$PROJECT_ID" -f item="$ITEM_ID" -f field="$TYPE_ID" -f opt_id="$OPTION_ID" --silent
+          fi
+
+      - name: Set "Status" field
+        env:
+          GITHUB_TOKEN: ${{secrets.PROJECT_AUTOMATION}}
+        run: |
+          STATE=${{github.event.issue.state}}
+
+          echo "State: $STATE"
+
+          OPTION_ID=$STATUS_TODO
+
+          if [[ "${STATE}" == "closed" ]]
+          then
+            OPTION_ID=$STATUS_DONE
+          fi
+
+          gh api graphql -f query='
+            mutation ($project: ID!, $item: ID!, $field: ID!, $status_id: String!) {
+              updateProjectNextItemField(input: {
+                projectId: $project
+                itemId: $item
+                fieldId: $field
+                value: $status_id
+              }) {
+                projectNextItem {
+                  id
+                }
+              }
+            }' -f project="$PROJECT_ID" -f item="$ITEM_ID" -f field="$STATUS_ID" -f status_id="$OPTION_ID" --silent

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

@@ -0,0 +1,219 @@
+name: Project Automation (PR)
+on:
+  pull_request:
+    types:
+      - opened
+      - ready_for_review
+      - reopened
+      - review_requested
+      - closed
+      - labeled
+      - unlabeled
+      - synchronize
+jobs:
+  pr_automation:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Get project data
+        env:
+          GITHUB_TOKEN: ${{secrets.PROJECT_AUTOMATION}}
+          ORGANIZATION: hugo-toha
+          PROJECT_NUMBER: 4
+        run: |
+          gh api graphql --header 'GraphQL-Features: projects_next_graphql' -f query='
+            query($org: String!, $number: Int!) {
+              organization(login: $org){
+                projectNext(number: $number) {
+                  id
+                  fields(first:20) {
+                    nodes {
+                      id
+                      name
+                      settings
+                    }
+                  }
+                }
+              }
+            }' -f org="$ORGANIZATION" -F number=$PROJECT_NUMBER > project_data.json
+
+          echo 'PROJECT_ID='$(jq -r '.data.organization.projectNext.id' project_data.json) >> $GITHUB_ENV
+
+          # Read the ID of the "Type" field options
+          echo 'TYPE_ID='$(jq -r '.data.organization.projectNext.fields.nodes[]     | select(.name== "Type") |.id' project_data.json) >> $GITHUB_ENV
+          echo 'PROJECT_ID='$(jq -r '.data.organization.projectNext.id' project_data.json) >> $GITHUB_ENV
+          echo 'TYPE_ID='$(jq -r '.data.organization.projectNext.fields.nodes[]     | select(.name== "Type") |.id' project_data.json) >> $GITHUB_ENV
+          echo 'TYPE_BUG='$(jq -r '.data.organization.projectNext.fields.nodes[] | select(.name== "Type") |.settings | fromjson.options[] | select(.name=="Bug")             |.id' project_data.json) >> $GITHUB_ENV
+          echo 'TYPE_FEATURE='$(jq -r '.data.organization.projectNext.fields.nodes[]   | select(.name== "Type") |.settings | fromjson.options[] | select(.name=="Feature") |.id' project_data.json) >> $GITHUB_ENV
+          echo 'TYPE_ENHANCEMENT='$(jq -r '.data.organization.projectNext.fields.nodes[]   | select(.name== "Type") |.settings | fromjson.options[] | select(.name=="Enhancement") |.id' project_data.json) >> $GITHUB_ENV
+          echo 'TYPE_DOCUMENTATION='$(jq -r '.data.organization.projectNext.fields.nodes[]  | select(.name== "Type") |.settings | fromjson.options[] | select(.name=="Documentation")    |.id' project_data.json) >> $GITHUB_ENV
+          echo 'TYPE_TRANSLATION='$(jq -r '.data.organization.projectNext.fields.nodes[]  | select(.name== "Type") |.settings | fromjson.options[] | select(.name=="Translation")    |.id' project_data.json) >> $GITHUB_ENV
+
+          # Read the id of the "Status" field options
+          echo 'STATUS_ID='$(jq -r '.data.organization.projectNext.fields.nodes[]     | select(.name== "Status") |.id' project_data.json) >> $GITHUB_ENV
+          echo 'STATUS_TODO='$(jq -r '.data.organization.projectNext.fields.nodes[]   | select(.name== "Status") |.settings | fromjson.options[] | select(.name=="Todo")    |.id' project_data.json) >> $GITHUB_ENV
+          echo 'STATUS_IN_PROGRESS='$(jq -r '.data.organization.projectNext.fields.nodes[]   | select(.name== "Status") |.settings | fromjson.options[] | select(.name=="In Progress")    |.id' project_data.json) >> $GITHUB_ENV
+          echo 'STATUS_READY_FOR_REVIEW='$(jq -r '.data.organization.projectNext.fields.nodes[]   | select(.name== "Status") |.settings | fromjson.options[] | select(.name=="Ready for Review")    |.id' project_data.json) >> $GITHUB_ENV
+          echo 'STATUS_DONE='$(jq -r '.data.organization.projectNext.fields.nodes[]   | select(.name== "Status") |.settings | fromjson.options[] | select(.name=="Done")    |.id' project_data.json) >> $GITHUB_ENV
+
+      - name: Add PR to project
+        env:
+          GITHUB_TOKEN: ${{secrets.PROJECT_AUTOMATION}}
+          PR_ID: ${{ github.event.pull_request.node_id }}
+        run: |
+          item_id="$( gh api graphql -f query='
+            mutation($project:ID!, $pr:ID!) {
+              addProjectNextItem(input: {projectId: $project, contentId: $pr}) {
+                projectNextItem {
+                  id
+                }
+              }
+            }' -f project="$PROJECT_ID" -f pr="$PR_ID" --jq '.data.addProjectNextItem.projectNextItem.id')"
+
+          echo 'ITEM_ID='$item_id >> $GITHUB_ENV
+
+      - name: Export Labels
+        env:
+          PR_DATA: ${{ toJson(github.event.pull_request) }}
+        run: |
+          echo 'LABELS='$(echo "$PR_DATA" | jq -r '[.labels[].name] | join(" ")') >> $GITHUB_ENV
+
+      - name: Set "Type" field
+        env:
+          GITHUB_TOKEN: ${{secrets.PROJECT_AUTOMATION}}
+        run: |
+          # Only execute this step if the PR contains at least one label
+          if [ "${#LABELS[@]}" -gt 0 ]; then
+
+            # Let by default the type is "Bug"
+            OPTION_ID=$TYPE_BUG
+
+            # If it has "feature" label then set the type to "Feature"
+            if [[ "${LABELS[*]}" =~ "feature" ]]; then
+              OPTION_ID=$TYPE_FEATURE
+            fi
+
+            # If it has "enhancement" label then set the type to "Enhancement"
+            if [[ "${LABELS[*]}" =~ "enhancement" ]]; then
+              OPTION_ID=$TYPE_ENHANCEMENT
+            fi
+
+            # If it has "documentation" label then set the type to "Documentation"
+            if [[ "${LABELS[*]}" =~ "documentation" ]]; then
+              OPTION_ID=$TYPE_DOCUMENTATION
+            fi
+
+            # If it has "translation" label then set the type to "Translation"
+            if [[ "${LABELS[*]}" =~ "translation" ]]; then
+              OPTION_ID=$TYPE_TRANSLATION
+            fi
+
+            # Set the "Type" field to appropriate option
+            gh api graphql -f query='
+              mutation ($project: ID!, $item: ID!, $field: ID!, $opt_id: String!) {
+                updateProjectNextItemField(input: {
+                  projectId: $project
+                  itemId: $item
+                  fieldId: $field
+                  value: $opt_id
+                }) {
+                  projectNextItem {
+                    id
+                  }
+                }
+              }' -f project="$PROJECT_ID" -f item="$ITEM_ID" -f field="$TYPE_ID" -f opt_id="$OPTION_ID" --silent
+          fi
+
+      - name: Set "Status" field
+        env:
+          GITHUB_TOKEN: ${{secrets.PROJECT_AUTOMATION}}
+        run: |
+          MERGED=${{github.event.pull_request.merged}}
+          STATE=${{github.event.pull_request.state}}
+          REVIEWERS=${{github.event.pull_request.requested_reviewers}}
+          DRAFT=${{github.event.pull_request.draft}}
+
+          echo "Merged: $MERGED"
+          echo "State: $STATE"
+          echo "Draft: $DRAFT"
+          echo "Reviewer: $REVIEWER"
+
+          OPTION_ID=$STATUS_TODO
+
+          if [[ ("${MERGED}" == "true") || ("${STATE}" == "closed") ]]
+          then
+            OPTION_ID=$STATUS_DONE
+          elif [[ ${#REVIEWERS[@]} -gt 0 ]]
+          then
+            OPTION_ID=$STATUS_READY_FOR_REVIEW
+          else
+            OPTION_ID=$STATUS_IN_PROGRESS
+          fi
+
+          # Expose the OPTION_ID so that it can be used in later steps
+          echo 'PR_STATUS='$OPTION_ID >> $GITHUB_ENV
+
+          gh api graphql -f query='
+            mutation ($project: ID!, $item: ID!, $field: ID!, $status_id: String!) {
+              updateProjectNextItemField(input: {
+                projectId: $project
+                itemId: $item
+                fieldId: $field
+                value: $status_id
+              }) {
+                projectNextItem {
+                  id
+                }
+              }
+            }' -f project="$PROJECT_ID" -f item="$ITEM_ID" -f field="$STATUS_ID" -f status_id="$OPTION_ID" --silent
+
+      - name: Find Linked Issues
+        id: linked_issues
+        uses: hossainemruz/linked-issues@main
+        with:
+          pr_url: ${{github.event.pull_request.html_url}}
+          format: IssueNumber
+
+      - name: Update Linked Issues Status
+        env:
+          GITHUB_TOKEN: ${{secrets.PROJECT_AUTOMATION}}
+        run: |
+          declare -a issues=(${{ steps.linked_issues.outputs.issues }})
+
+          # Loop through the every issues and update their Status to same as the PR Status
+          for i in "${issues[@]}"
+          do
+            # Find the Issue ID
+            ISSUE_ID="$(gh api graphql -f query='
+              query($owner: String!, $name: String!, $issue_number: Int!) {
+                repository(owner: $owner, name: $name) {
+                  issue(number: $issue_number) {
+                    id
+                  }
+                }
+              }' -f owner="${{github.event.pull_request.head.repo.owner.login}}" -f name="${{github.event.pull_request.head.repo.name}}" -F issue_number=$i --jq='.data.repository.issue.id')"
+
+            # Find the id of the Issue at the project board
+            item_id="$( gh api graphql -f query='
+              mutation($project:ID!, $pr:ID!) {
+                addProjectNextItem(input: {projectId: $project, contentId: $pr}) {
+                  projectNextItem {
+                    id
+                  }
+                }
+              }' -f project="$PROJECT_ID" -f pr="$ISSUE_ID" --jq '.data.addProjectNextItem.projectNextItem.id')"
+
+            # Update the Issue Status
+            gh api graphql -f query='
+            mutation ($project: ID!, $item: ID!, $field: ID!, $status_id: String!) {
+              updateProjectNextItemField(input: {
+                projectId: $project
+                itemId: $item
+                fieldId: $field
+                value: $status_id
+              }) {
+                projectNextItem {
+                  id
+                }
+              }
+            }' -f project="$PROJECT_ID" -f item="$item_id" -f field="$STATUS_ID" -f status_id="$PR_STATUS" --silent
+          done

README.md

@@ -3,7 +3,7 @@
 [![Netlify Status](https://api.netlify.com/api/v1/badges/b1b93b02-f278-440b-ae1b-304e9f4c4ab5/deploy-status)](https://app.netlify.com/sites/toha/deploys)
 [![Build Status](https://img.shields.io/endpoint.svg?url=https%3A%2F%2Factions-badge.atrox.dev%2Fhugo-toha%2Ftoha%2Fbadge%3Fref%3Dmain&style=flat)](https://actions-badge.atrox.dev/hugo-toha/toha/goto?ref=main)
 ![Repository Size](https://img.shields.io/github/repo-size/hugo-toha/toha)
-![Lines of Codes](https://img.shields.io/tokei/lines/github/hugo-toha/toha)
+![Lines of Codes](https://img.shields.io/tokei/lines/github.com/hugo-toha/toha)
 ![Contributor](https://img.shields.io/github/contributors/hugo-toha/toha)
 ![Latest Release](https://img.shields.io/github/v/release/hugo-toha/toha?include_prereleases)
 ![Last Commit](https://img.shields.io/github/last-commit/hugo-toha/toha)
@@ -30,8 +30,16 @@ 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
-- Disqus Comment Support
+- Analytics Support
+  - GoatCounter
+  - counter.dev
+  - Google Analytics
+  - Matomo/Piwik
+- 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,7 +57,10 @@ For more details about the features please visit [here](https://toha-guides.netl
 - 日本語
 - 한국어
 - русский
+- suomi
 - Tiếng Việt
+- Turkish
+- Arabic (العربية)
 
 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 +82,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
 
@@ -137,6 +148,9 @@ params:
   # specify whether you want to show Table of Contents in reading page
   enableTOC: true
 
+  # specify whether you want the language flags to be displayed. 
+  showFlags: true
+
   # Provide newsletter configuration. 
   # This feature has been implemented for Mailchimp only for now.
   # You can also hide it from the footer.
@@ -165,10 +179,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/)
-- [Image](https://toha-guides.netlify.app/posts/short-codes/img/)
-- [Split](https://toha-guides.netlify.app/posts/short-codes/split/)
-- [Vertical Space](https://toha-guides.netlify.app/posts/short-codes/vs/)
+- [Alert](https://toha-guides.netlify.app/posts/shortcodes/#alert)
+- [Image](https://toha-guides.netlify.app/posts/shortcodes/#image)
+- [Split](https://toha-guides.netlify.app/posts/shortcodes/#split)
+- [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
 
@@ -230,13 +246,14 @@ Here is the check list for portfolio mode,
 
 - [ ] **Publications**
 
-  - [ ] Category Filter
-  - [ ] Card
-  - [ ] Abstract
-  - [ ] Authors
-  - [ ] Tags
-  - [ ] Links
-  - [ ] Gallery
+  - [x] Category Filter
+  - [x] Card
+  - [x] Tags
+  - [x] Links
+  - [ ] Dedicated Page
+    - [ ] Abstract
+    - [ ] Authors
+    - [ ] Gallery
 
 - [x] **Accomplishment / Courses**
 

i18n/ar.toml

@@ -0,0 +1,126 @@
+# More documentation here: https://github.com/nicksnyder/go-i18n
+[home]
+other = "الصفحة الرئيسية"
+
+[posts]
+other = "المنشورات"
+
+[toc_heading]
+other = "قائمة المحتويات"
+
+[tags]
+other = "الوسوم"
+
+[categories]
+other = "الأقسام"
+
+[at]
+other = "at"
+
+[resume]
+other = "سيرتي الذاتية"
+
+[navigation]
+other = "التصفح"
+
+[contact_me]
+other = "اتصل بي:"
+
+[email]
+other = "البريد الإلكتروني"
+
+[phone]
+other = "الهاتف"
+
+[newsletter_text]
+other = "ابق على اتصال من خلال القائمة البريدية"
+
+[newsletter_input_placeholder]
+other = "ادخل بريدك الالكتروني"
+
+[newsletter_warning]
+other = "بإدخال بريدك الإلكتروني، أنت توافق على تلقي رسائل إلكترونية دورية من هذا الموقع."
+
+[submit]
+other = "إرسال"
+
+[hugoAttributionText]
+other = "صنع باستخدام"
+
+[prev]
+other = "السابق"
+
+[next]
+other = "التالي"
+
+[share_on]
+other = "المشاركة على"
+
+[improve_this_page]
+other = "ساعد في تحسين هذه الصفحة"
+
+[out_of]
+other = "من"
+
+[publications]
+other = "المنشورات"
+
+[taken_courses]
+other = "الدروس"
+
+[course_name]
+other = "اسم المادة"
+
+[total_credit]
+other = "العلامة العامة"
+
+[obtained_credit]
+other = "العلامة"
+
+[extracurricular_activities]
+other = "نشاطات خارجية"
+
+[show_more]
+other = "إظهار المزيد"
+
+[show_less]
+other = "إخفاء"
+
+[responsibilities]
+other = "المسؤوليات:"
+
+[present]
+other = "حاليا"
+
+[comments_javascript]
+other = "من فضلك قم بتفعيل جافاسكريب لإظهار"
+
+[comments_by]
+other = "التعليقات موفرة بواسطة"
+
+[read]
+other = "قراءة"
+
+[project_star]
+other = "نجمة"
+
+[project_details]
+other = "التفاصيل"
+
+[err_404]
+other = "الصفحة التي تبحث عنها ليست بعد هناك."
+
+[more]
+other = "المزيد"
+
+[view_certificate]
+other = "إظهار الشهادة"
+
+[notes]
+other = "ملاحظات"
+
+[disclaimer_text]
+other = "إشعار بالمسؤولية"
+
+[search]
+other = "بحث"

i18n/bn.toml

@@ -8,6 +8,12 @@ other = "পোষ্ট সমূহ"
 [toc_heading]
 other = "সুচিপত্র"
 
+[tags]
+other = "ট্যাগ সমুহ"
+
+[categories]
+other = "বিভাগ সমুহ"
+
 [resume]
 other = "আমার জীবনবৃত্তান্ত"
 
@@ -30,7 +36,7 @@ other = "ইমেইল নোটিফিকেশান এর মাধ্
 other = "ইমেইল প্রবেশ করান"
 
 [newsletter_warning]
-other = "আমরা আপনার ইমেল অন্য কারও সাথে শেয়ার করব না।"
+other = "আপনার ইমেইল ঠিকানা প্রবেশের মাধমে আপনি এই ওয়েবসাইটের নিউজ লেটার পেতে সম্মত হচ্ছেন।"
 
 [submit]
 other = "জমা দিন"
@@ -44,6 +50,9 @@ other = "পূর্ববর্তী"
 [next]
 other = "পরবর্তী"
 
+[share_on]
+other = "শেয়ার করুন"
+
 [improve_this_page]
 other = "এই পৃষ্ঠাটি উন্নত করুন"
 
@@ -109,3 +118,6 @@ other = "নোট সমূহ"
 
 [disclaimer_text]
 other = "দায় বিজ্ঞপ্তি"
+
+[search]
+other = "অনুসন্ধান করুন"

i18n/de.toml

@@ -8,6 +8,12 @@ other = "Beiträge"
 [toc_heading]
 other = "Inhaltsverzeichnis"
 
+[tags]
+other = "Stichworte"
+
+[categories]
+other = "Kategorien"
+
 [at]
 other = "bei"
 
@@ -33,7 +39,7 @@ other = "Mit dem Newsletter auf dem neuesten Stand bleiben"
 other = "E-Mail Adresse eingeben"
 
 [newsletter_warning]
-other = "Wir geben deine E-Mail Adresse nicht an Dritte weiter."
+other = "Mit der Eingabe Ihrer E-Mail-Adresse erklären Sie sich damit einverstanden, den Newsletter dieser Website zu erhalten."
 
 [submit]
 other = "Absenden"
@@ -47,6 +53,9 @@ other = "Vorherige"
 [next]
 other = "Nächste"
 
+# [share_on]
+# other = "Share on"
+
 [improve_this_page]
 other = "Diese Seite verbessern"
 
@@ -112,3 +121,6 @@ other = "Notizen"
 
 [disclaimer_text]
 other = "Haftungshinweis"
+
+[search]
+other = "Suche"

i18n/en.toml

@@ -8,6 +8,12 @@ other = "Posts"
 [toc_heading]
 other = "Table of Contents"
 
+[tags]
+other = "Tags"
+
+[categories]
+other = "Categories"
+
 [at]
 other = "at"
 
@@ -33,7 +39,7 @@ other = "Stay up to date with email notification"
 other = "Enter email"
 
 [newsletter_warning]
-other = "We'll never share your email with anyone else."
+other = "By entering your email address, you agree to receive the newsletter of this website."
 
 [submit]
 other = "Submit"
@@ -47,6 +53,9 @@ other = "Prev"
 [next]
 other = "Next"
 
+[share_on]
+other = "Share on"
+
 [improve_this_page]
 other = "Improve this page"
 
@@ -112,3 +121,6 @@ other = "Notes"
 
 [disclaimer_text]
 other = "Liability Notice"
+
+[search]
+other = "Search"

i18n/es.toml

@@ -8,6 +8,12 @@ other = "Posts"
 [toc_heading]
 other = "Contenido"
 
+[tags]
+other = "Etiquetas"
+
+[categories]
+other = "Categorías"
+
 [at]
 other = "en"
 
@@ -33,7 +39,7 @@ other = "Subscribirse"
 other = "Ingrese email"
 
 [newsletter_warning]
-other = "Jamás compartiremos tus datos con alguién mas"
+other = "Al ingresar su dirección de correo electrónico, acepta recibir el boletín de este sitio web."
 
 [submit]
 other = "Enviar"
@@ -47,6 +53,9 @@ other = "Anterior"
 [next]
 other = "Siguiente"
 
+[share_on]
+other = "Compartir en"
+
 [improve_this_page]
 other = "Mejorar esta página"
 
@@ -77,29 +86,29 @@ other = "Ver más"
 [show_less]
 other = "Muestra menos"
 
-# [responsibilities]
-# other = "Responsibilities:"
+[responsibilities]
+other = "Responsabilidades:"
 
-# [present]
-# other = "Present"
+[present]
+other = "Presente"
 
-# [comments_javascript]
-# other = "Please enable JavaScript to view the"
+[comments_javascript]
+other = "Por favor, activa JavaScript para ver el"
 
-# [comments_by]
-# other = "comments powered by"
+[comments_by]
+other = "comentarios cortesía de"
 
-# [read]
-# other = "Read"
+[read]
+other = "Leer"
 
-# [project_star]
-# other = "Star"
+[project_star]
+other = "Favorito"
 
-# [project_details]
-# other = "Details"
+[project_details]
+other = "Detalles"
 
-# [err_404]
-# other = "The page you are looking for is not there yet."
+[err_404]
+other = "La página que estás buscando no está aquí (todavía)"
 
 [more]
 other = "Más"
@@ -112,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

@@ -3,16 +3,22 @@
 other = "Accueil"
 
 [posts]
-other = "Des postes"
+other = "Articles"
 
 [toc_heading]
 other = "Table des matières"
 
+[tags]
+other = "Mots clés"
+
+[categories]
+other = "Catégories"
+
 [at]
 other = "chez"
 
 [resume]
-other = "Mon Curriculum vitæ"
+other = "Mon Curriculum Vitæ"
 
 [navigation]
 other = "Navigation"
@@ -33,7 +39,7 @@ other = "Restez à jour par e-mail"
 other = "Entrez une adresse e-mail"
 
 [newsletter_warning]
-other = "Nous ne partagerons jamais votre courriel avec quelqu'un d'autre."
+other = "En renseignant votre adresse e-mail, vous acceptez de recevoir la newsletter de ce site."
 
 [submit]
 other = "Envoyer"
@@ -47,6 +53,9 @@ other = "Précédent"
 [next]
 other = "Suivant"
 
+[share_on]
+other = "Partager sur"
+
 [improve_this_page]
 other = "Améliorez cette page"
 
@@ -57,10 +66,10 @@ other = "sur"
 other = "Publications"
 
 [taken_courses]
-other = "Taken Courses"
+other = "Cours suivis"
 
 [course_name]
-other = "Cours suivis"
+other = "Intitulé du cours"
 
 [total_credit]
 other = "Crédit total"
@@ -77,29 +86,29 @@ other = "En savoir plus"
 [show_less]
 other = "Montrer moins"
 
-# [responsibilities]
-# other = "Responsibilities:"
+[responsibilities]
+other = "Responsabilitiés :"
 
-# [present]
-# other = "Present"
+[present]
+other = "Aujourd'hui"
 
-# [comments_javascript]
-# other = "Please enable JavaScript to view the"
+[comments_javascript]
+other = "Merci d'activer JavaScript pour voir le"
 
-# [comments_by]
-# other = "comments powered by"
+[comments_by]
+other = "commentaires fournis par"
 
-# [read]
-# other = "Read"
+[read]
+other = "Lire"
 
 # [project_star]
 # other = "Star"
 
-# [project_details]
-# other = "Details"
+[project_details]
+other = "Détails"
 
-# [err_404]
-# other = "The page you are looking for is not there yet."
+[err_404]
+other = "La page que vous recherchez n'est pas disponible."
 
 [more]
 other = "Suite"
@@ -112,3 +121,6 @@ other = "Remarques"
 
 [disclaimer_text]
 other = "Avis de responsabilité"
+
+[search]
+other = "Chercher"

i18n/hi.toml

@@ -8,6 +8,12 @@ other = "पोस्ट"
 [toc_heading]
 other = "विषयसूची"
 
+[tags]
+other = "टैग"
+
+[categories]
+other = "श्रेणियाँ"
+
 [at]
 other = "अन्य"
 
@@ -33,7 +39,7 @@ other = "ईमेल अधिसूचना से अवगत रहें"
 other = "ईमेल दर्ज करें"
 
 [newsletter_warning]
-other = "हम आपके ईमेल को कभी भी किसी और के साथ साझा नहीं करेंगे"
+other = "अपना ईमेल पता दर्ज करके, आप इस वेबसाइट का न्यूज़लेटर प्राप्त करने के लिए सहमत होते हैं।"
 
 [submit]
 other = "जमा करें"
@@ -47,6 +53,9 @@ other = "पिछला"
 [next]
 other = "आगे"
 
+# [share_on]
+# other = "Share on"
+
 [improve_this_page]
 other = "इस पृष्ठ को सुधारें"
 
@@ -112,3 +121,6 @@ other = "टिप्पणियाँ"
 
 [disclaimer_text]
 other = "दायित्व सूचना"
+
+[search]
+other = "खोज"

i18n/id.toml

@@ -8,6 +8,12 @@ other = "Artikel"
 [toc_heading]
 other = "Daftar Isi"
 
+[tags]
+other = "Tags"
+
+[categories]
+other = "Kategori"
+
 [at]
 other = "at"
 
@@ -33,7 +39,7 @@ other = "Ingin selalu update dengan notifikasi email"
 other = "Masukkan email"
 
 [newsletter_warning]
-other = "Kami tidak pernah berbagi data email dengan siapapun."
+other = "Dengan memasukkan alamat email Anda, Anda setuju untuk menerima buletin situs web ini."
 
 [submit]
 other = "Kirim"
@@ -47,6 +53,9 @@ other = "Sebelumnya"
 [next]
 other = "Lanjut"
 
+# [share_on]
+# other = "Share on"
+
 [improve_this_page]
 other = "Perbaiki halaman ini"
 
@@ -112,3 +121,6 @@ other = "Catatan"
 
 [disclaimer_text]
 other = "Pemberitahuan Kewajiban"
+
+[search]
+other = "Mencari"

i18n/it.toml

@@ -8,6 +8,12 @@ other = "Post"
 [toc_heading]
 other = "Contenuti"
 
+[tags]
+other = "Tags"
+
+[categories]
+other = "Categorie"
+
 [at]
 other = "presso"
 
@@ -33,7 +39,7 @@ other = "Resta aggiornato con la notifica di email"
 other = "Inserisci l'email"
 
 [newsletter_warning]
-other = "Non condivideremo l'email con altri."
+other = "Inserendo il tuo indirizzo email, accetti di ricevere la newsletter di questo sito."
 
 [submit]
 other = "Invia"
@@ -47,6 +53,9 @@ other = "Precedente"
 [next]
 other = "Successivo"
 
+# [share_on]
+# other = "Share on"
+
 [improve_this_page]
 other = "Migliora questa pagina"
 
@@ -105,10 +114,13 @@ other = "Mostra meno"
 other = "Di più"
 
 [view_certificate]
-other = "Féach ar an Teastas"
+other = "Vedi certificato"
 
 [notes]
 other = "Appunti"
 
 [disclaimer_text]
 other = "Avviso di responsabilità"
+
+[search]
+other = "Ricerca"

i18n/jp.toml

@@ -8,6 +8,12 @@ other = "記事"
 [toc_heading]
 other = "目次"
 
+[tags]
+other = "タグ"
+
+[categories]
+other = "カテゴリ"
+
 [resume]
 other = "職務経歴書"
 
@@ -30,7 +36,7 @@ other = "メールで最新情報を受け取る"
 other = "ここにメールアドレスを入力"
 
 [newsletter_warning]
-other = "ご入力いただいたメールアドレスが他人に開示されることは決してございません。"
+other = "メールアドレスを入力すると、このウェブサイトのニュースレターを受け取ることに同意したことになります。"
 
 [submit]
 other = "登録"
@@ -44,6 +50,9 @@ other = "前"
 [next]
 other = "次"
 
+# [share_on]
+# other = "Share on"
+
 [improve_this_page]
 other = "編集リクエストを送る"
 
@@ -109,3 +118,6 @@ other = "ノート"
 
 [disclaimer_text]
 other = "責任通知"
+
+[search]
+other = "検索"

i18n/ko.toml

@@ -8,6 +8,12 @@ other = "게시글"
 [toc_heading]
 other = "목차"
 
+[tags]
+other = "태그"
+
+[categories]
+other = "카테고리"
+
 [at]
 other = "at"
 
@@ -33,7 +39,7 @@ other = "이메일 알림으로 최신 상태를 유지해보세요"
 other = "이메일을 입력하세요"
 
 [newsletter_warning]
-other = "이메일을 다른 목적으로 사용하지 않습니다."
+other = "이메일 주소를 입력하면이 웹 사이트의 뉴스 레터 수신에 동의하는 것입니다."
 
 [submit]
 other = "제출"
@@ -47,6 +53,9 @@ other = "이전"
 [next]
 other = "다음"
 
+# [share_on]
+# other = "Share on"
+
 [improve_this_page]
 other = "이 페이지를 개선"
 
@@ -112,3 +121,6 @@ other = "메모"
 
 [disclaimer_text]
 other = "책임 고지"
+
+[search]
+other = "찾다"

i18n/nl.toml

@@ -1,53 +1,62 @@
 [home]
-other = "Startseite"
+other = "Hoofdpagina"
 
 [posts]
-other = "Beiträge"
+other = "Posts"
 
 [toc_heading]
-other = "Inhaltsverzeichnis"
+other = "Inhoudsopgave"
+
+[tags]
+other = "Tags"
+
+[categories]
+other = "Categorieën"
 
 [at]
-other = "bei"
+other = "bij"
 
 [resume]
-other = "Mein Lebenslauf"
+other = "Curriculum Vitae"
 
 [navigation]
-other = "Navigation"
+other = "Navigatie"
 
 [contact_me]
-other = "Kontakt aufnehmen"
+other = "Contactgegevens"
 
 [email]
 other = "E-Mail"
 
 [phone]
-other = "Telefon"
+other = "Telefoon"
 
 [newsletter_text]
-other = "Mit dem Newsletter auf dem neuesten Stand bleiben"
+other = "Ontvang updates via email"
 
 [newsletter_input_placeholder]
-other = "E-Mail-Adresse eingeben"
+other = "Email ingeven"
 
 [newsletter_warning]
-other = "Wir werden Ihre E-Mail-Adresse nicht an Dritte weitergeben."
+other = "Door uw e-mailadres in te voeren, gaat u akkoord met het ontvangen van de nieuwsbrief van deze website."
 
 [submit]
-other = "Absenden"
+other = "Opslaan"
 
 [hugoAttributionText]
-other = "Unterstützt von"
+other = "Mogelijk gemaakt met"
 
 [prev]
-other = "Vorherige"
+other = "Vorige"
 
 [next]
-other = "Nächste"
+other = "Volgende"
+
+[share_on]
+other = "Delen op"
 
 [improve_this_page]
-other = "Diese Seite verbessern"
+other = "Deze pagina verbeteren"
 
 [out_of]
 other = "van de"
@@ -56,7 +65,7 @@ other = "van de"
 other = "Publicaties"
 
 [taken_courses]
-other = "Cursussen gevolgd"
+other = "Gevolgde cursussen"
 
 [course_name]
 other = "Cursus naam"
@@ -76,11 +85,11 @@ other = "Bekijk meer"
 [show_less]
 other = "Laat minder zien"
 
-# [responsibilities]
-# other = "Responsibilities:"
+[responsibilities]
+other = "Verantwoordelijkheden:"
 
-# [present]
-# other = "Present"
+[present]
+other = "Heden"
 
 # [comments_javascript]
 # other = "Please enable JavaScript to view the"
@@ -94,11 +103,11 @@ other = "Laat minder zien"
 # [project_star]
 # other = "Star"
 
-# [project_details]
-# other = "Details"
+[project_details]
+other = "Details"
 
-# [err_404]
-# other = "The page you are looking for is not there yet."
+[err_404]
+other = "De pagina waar je voor zoekt bestaat nog niet."
 
 [more]
 other = "Meer"
@@ -110,4 +119,7 @@ other = "Bekijk certificaat"
 other = "Opmerkingen"
 
 [disclaimer_text]
-other = "Haftungshinweis"
+other = "Aansprakelijkheidsverklaring"
+
+[search]
+other = "Zoek"

i18n/ru.toml

@@ -8,6 +8,12 @@ other = "Посты"
 [toc_heading]
 other = "Оглавление"
 
+[tags]
+other = "Теги"
+
+[categories]
+other = "Категории"
+
 [at]
 other = "в"
 
@@ -33,7 +39,7 @@ other = "Подпишитесь на уведомления, чтобы не п
 other = "Введите email"
 
 [newsletter_warning]
-other = "Ваши данные в безопасности"
+other = "Вводя свой адрес электронной почты, вы соглашаетесь получать информационный бюллетень этого веб-сайта."
 
 [submit]
 other = "Подтвердить"
@@ -47,6 +53,9 @@ other = "Предыдущий"
 [next]
 other = "Следующий"
 
+# [share_on]
+# other = "Share on"
+
 [improve_this_page]
 other = "Улучшить эту страницу"
 
@@ -112,3 +121,6 @@ other = "Ноты"
 
 [disclaimer_text]
 other = "Уведомление об ответственности"
+
+[search]
+other = "Поиск"

i18n/tr.toml

@@ -0,0 +1,126 @@
+# More documentation here: https://github.com/nicksnyder/go-i18n
+[home]
+other = "Anasayfa"
+
+[posts]
+other = "Gönderiler"
+
+[toc_heading]
+other = "İçerik Tablous"
+
+[tags]
+other = "Etiketler"
+
+[categories]
+other = "Kategoriler"
+
+[at]
+other = ","
+
+[resume]
+other = "Özgeçmişim"
+
+[navigation]
+other = "Menü"
+
+[contact_me]
+other = "İletişime geç:"
+
+[email]
+other = "E-Posta"
+
+[phone]
+other = "Telefon"
+
+[newsletter_text]
+other = "Yeni içeriklerden haberdar olmak için E-Posta adresinizi giriniz."
+
+[newsletter_input_placeholder]
+other = "E-Posta adresi giriniz."
+
+[newsletter_warning]
+other = "E-Posta adresini girerseniz, bu web sitesinin haber bültenini almayı kabul ediyorsunuz."
+
+[submit]
+other = "Onayla"
+
+[hugoAttributionText]
+other = ""
+
+[prev]
+other = "Önceki"
+
+[next]
+other = "Sonraki"
+
+[share_on]
+other = "Paylaş"
+
+[improve_this_page]
+other = "Bu sayfaya katkıda bulunun"
+
+[out_of]
+other = "/"
+
+[publications]
+other = "Akademik Yayınlar"
+
+[taken_courses]
+other = "Alınan Dersler"
+
+[course_name]
+other = "Ders Adı"
+
+[total_credit]
+other = "Üzerinden"
+
+[obtained_credit]
+other = "Alınan Not"
+
+[extracurricular_activities]
+other = "Ders Dışı Aktiviteler"
+
+[show_more]
+other = "Devamını Göster"
+
+[show_less]
+other = "Gizle"
+
+[responsibilities]
+other = "Sorumluluklar:"
+
+[present]
+other = "Halen"
+
+[comments_javascript]
+other = "Görüntüleyebilmek için lüften Javascript etkinleştirin"
+
+[comments_by]
+other = "comments powered by"
+
+[read]
+other = "Oku"
+
+[project_star]
+other = "Star"
+
+[project_details]
+other = "Detaylar"
+
+[err_404]
+other = "Aradığınız sayfa bulunmamakta."
+
+[more]
+other = "Devamını Göster"
+
+[view_certificate]
+other = "Sertifikayı Görüntüle"
+
+[notes]
+other = "Notlar"
+
+[disclaimer_text]
+other = "Yükümlülük Bildirisi"
+
+[search]
+other = "Ara"

i18n/vn.toml

@@ -8,6 +8,12 @@ other = "Bài viết"
 [toc_heading]
 other = "Mục lục"
 
+[tags]
+other = "Thẻ"
+
+[categories]
+other = "Thể loại"
+
 [at]
 other = "tại"
 
@@ -33,7 +39,7 @@ other = "Nhận email cập nhật thông tin"
 other = "Nhập email"
 
 [newsletter_warning]
-other = "Chúng tôi sẽ không bao giờ chia sẻ email của bạn."
+other = "Bằng cách nhập địa chỉ email của bạn, bạn đồng ý nhận bản tin của trang web này."
 
 [submit]
 other = "Gửi"
@@ -47,6 +53,9 @@ other = "Trước"
 [next]
 other = "Tiếp theo"
 
+# [share_on]
+# other = "Share on"
+
 [improve_this_page]
 other = "Cải thiện trang này"
 
@@ -112,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

@@ -8,6 +8,12 @@ other = "博文"
 [toc_heading]
 other = "目录"
 
+[tags]
+other = "标签"
+
+[categories]
+other = "类别"
+
 [at]
 other = "at"
 
@@ -33,7 +39,7 @@ other = "通过电子邮件接收最新信息"
 other = "填入 E-mail"
 
 [newsletter_warning]
-other = "我们绝不会与任何人共享您的电子邮件。"
+other = "输入您的电子邮件地址，即表示您同意接收本网站的时事通讯"
 
 [submit]
 other = "提交"
@@ -47,6 +53,9 @@ other = "上一篇"
 [next]
 other = "下一篇"
 
+[share_on]
+other = "分享"
+
 [improve_this_page]
 other = "改善此页面"
 
@@ -77,29 +86,29 @@ other = "查看更多"
 [show_less]
 other = "显示较少"
 
-# [responsibilities]
-# other = "Responsibilities:"
+[responsibilities]
+other = "职责:"
 
-# [present]
-# other = "Present"
+[present]
+other = "至今"
 
-# [comments_javascript]
-# other = "Please enable JavaScript to view the"
+[comments_javascript]
+other = "请启用 JavaScript 以查看"
 
-# [comments_by]
-# other = "comments powered by"
+[comments_by]
+other = "评论支持 by"
 
-# [read]
-# other = "Read"
+[read]
+other = "阅读"
 
-# [project_star]
-# other = "Star"
+[project_star]
+other = "Star"
 
-# [project_details]
-# other = "Details"
+[project_details]
+other = "详情"
 
-# [err_404]
-# other = "The page you are looking for is not there yet."
+[err_404]
+other = "您查找的页面已私奔。"
 
 [more]
 other = "更多的"
@@ -111,4 +120,7 @@ other = "查看证书"
 other = "笔记"
 
 [disclaimer_text]
-other = "责任通知"
+other = "免责声明"
+
+[search]
+other = "搜索"

i18n/zh-tw.toml

@@ -0,0 +1,126 @@
+# More documentation here: https://github.com/nicksnyder/go-i18n
+[home]
+other = "首頁"
+
+[posts]
+other = "文章"
+
+[toc_heading]
+other = "目錄"
+
+[tags]
+other = "标签"
+
+[categories]
+other = "类别"
+
+[at]
+other = "at"
+
+[resume]
+other = "履歷"
+
+[navigation]
+other = "導覽列"
+
+[contact_me]
+other = "聯絡方式:"
+
+[email]
+other = "信箱"
+
+[phone]
+other = "電話"
+
+[newsletter_text]
+other = "通過電子郵件接收最新消息"
+
+[newsletter_input_placeholder]
+other = "在此輸入您的電子郵件地址"
+
+[newsletter_warning]
+other = "輸入您的電子郵件地址，即表示您同意接受本網站的最新消息"
+
+[submit]
+other = "提交"
+
+[hugoAttributionText]
+other = "Powered by"
+
+[prev]
+other = "上一篇"
+
+[next]
+other = "下一篇"
+
+[share_on]
+other = "分享"
+
+[improve_this_page]
+other = "改善此頁面"
+
+[out_of]
+other = "/"
+
+[publications]
+other = "出版"
+
+[taken_courses]
+other = "修習課程"
+
+[course_name]
+other = "課程名稱"
+
+[total_credit]
+other = "總分"
+
+[obtained_credit]
+other = "獲得學分"
+
+[extracurricular_activities]
+other = "課外活動"
+
+[show_more]
+other = "查看更多"
+
+[show_less]
+other = "顯示較少"
+
+[responsibilities]
+other = "職責:"
+
+[present]
+other = "現在"
+
+[comments_javascript]
+other = "請開啟 JavaScript 查看"
+
+[comments_by]
+other = "評論由"
+
+[read]
+other = "閱讀"
+
+[project_star]
+other = "Star"
+
+[project_details]
+other = "詳情"
+
+[err_404]
+other = "您訪問的頁面不存在"
+
+[more]
+other = "更多的"
+
+[view_certificate]
+other = "查看證書"
+
+[notes]
+other = "筆記"
+
+[disclaimer_text]
+other = "免責聲明"
+
+[search]
+other = "搜索"

layouts/_default/baseof.html

@@ -9,10 +9,9 @@
     <!------ ADD PAGE SPECIFIC HEADERS ------->
     {{ block "header" . }} {{ end }}
 
-    <!-- ADD GOOGLE ANALYTICS IF ENABLED -->
-    {{ if site.GoogleAnalytics }}
-      {{ template "_internal/google_analytics_async.html" . }}
-    {{ end }}
+    <!--================= add analytics if enabled =========================-->
+    {{- partial "analytics.html" . -}}
+
   </head>
 
   <body data-spy="scroll" data-target="#TableOfContents" data-offset="80">
@@ -39,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">
@@ -40,7 +40,7 @@
   <div class="content">
     <div class="container p-0 read-area">
       <!--Hero Area-->
-      <div class="hero-area col-sm-12" id="hero-area" style='background-image: url({{ strings.TrimSuffix "/" site.BaseURL }}{{ partial "helpers/get-hero.html" . }});'>
+      <div class="hero-area col-sm-12" id="hero-area" style='background-image: url({{ partial "helpers/get-hero.html" . }});'>
       </div>
 
       <!--Content Start-->
@@ -48,35 +48,124 @@
         <div class="author-profile ml-auto align-self-lg-center">
           <img class="rounded-circle" src='{{ partial "helpers/get-author-image.html" . }}' alt="Author Image">
           <h5 class="author-name">{{ partial "helpers/get-author-name.html" . }}</h5>
-          <p>{{ .Page.Date.Format "January 2, 2006" }}</p>
+          <p>{{ .Page.Date | time.Format ":date_full" }}</p>
         </div>
 
         <div class="title">
           <h1>{{ .Page.Title }}</h1>
         </div>
-
+        {{ if site.Params.enableTags }}
+        <div class="taxonomy-terms">
+            <ul>
+            {{ range .Params.tags }}
+            {{ $url:= printf "tags/%s" . }}
+            <li class="rounded"><a href="{{ $url | urlize | relLangURL }}" class="btn, btn-sm">{{ . }}</a></li>
+            {{ end }}
+          </ul>
+        </div>
+        {{ end }}
         <div class="post-content" id="post-content">
           {{ .Page.Content }}
         </div>
 
+        <!-- Share or Contribute -->
+        <div class="row pl-3 pr-3">
+        <!--Social Media Share Buttons-->
+        <div class="col-md-6 share-buttons">
+        {{ if site.Params.features.blog.shareButtons }}
+            <strong>{{ i18n "share_on" }}:</strong>
+            {{ if site.Params.features.blog.shareButtons.facebook }}
+            <a class="btn btn-sm facebook-btn" href="https://www.facebook.com/sharer.php?u={{ .Permalink }}" target="_blank">
+              <i class="fab fa-facebook"></i>
+            </a>
+            {{ end }}
+            {{ if site.Params.features.blog.shareButtons.twitter }}
+                <a class="btn btn-sm twitter-btn" href="https://twitter.com/share?url={{ .Permalink }}&text={{ .Title }}&via={{- site.Title -}}" target="_blank">
+                  <i class="fab fa-twitter"></i>
+                </a>
+            {{ end }}
+            {{ if site.Params.features.blog.shareButtons.reddit }}
+                <a  class="btn btn-sm reddit-btn" href="https://reddit.com/submit?url={{ .Permalink }}&title={{ .Title }}" target="_blank">
+                  <i class="fab fa-reddit"></i>
+                </a>
+            {{ end }}
+            {{ if site.Params.features.blog.shareButtons.tumblr }}
+                <a class="btn btn-sm tumblr-btn" href="https://www.tumblr.com/share/link?url={{ .Permalink }}&name={{ .Title }}{{- with .Params.description -}}&description={{- . -}}{{- end -}}" target="_blank">
+                  <i class="fab fa-tumblr"></i>
+                </a>
+            {{ end }}
+            {{ if site.Params.features.blog.shareButtons.pocket }}
+                <a class="btn btn-sm pocket-btn" href="https://getpocket.com/save?url={{ .Permalink }}&title={{ .Title }}" target="_blank">
+                  <i class="fab fa-get-pocket"></i>
+                </a>
+            {{ end }}
+            {{ if site.Params.features.blog.shareButtons.linkedin }}
+                <a class="btn btn-sm linkedin-btn" href="https://www.linkedin.com/shareArticle?url={{ .Permalink }}&title={{ .Title }}" target="_blank">
+                  <i class="fab fa-linkedin"></i>
+                </a>
+            {{ end }}
+            {{ if site.Params.features.blog.shareButtons.diaspora }}
+                <a class="btn btn-sm diaspora-btn" href="https://share.diasporafoundation.org/?title={{ .Title }}&url={{ .Permalink }}" rel="nofollow" target="_blank">
+                  <i class="fab fa-diaspora"></i>
+                </a>
+            {{ end }}
+             {{ if site.Params.features.blog.shareButtons.mastodon }}
+                <a class="btn btn-sm mastodon-btn" href="https://mastodon.social/share?text={{ .Title }} - {{ .Permalink }}" target="_blank">
+                  <i class="fab fa-mastodon"></i>
+                </a>
+            {{ end }}
+            {{ if site.Params.features.blog.shareButtons.whatsapp }}
+                 <a class="btn btn-sm whatsapp-btn" href="https://api.whatsapp.com/send?text={{ .Title }} {{ .Permalink }}" target="_blank">
+                  <i class="fab fa-whatsapp"></i>
+                </a>
+            {{ end }}
+            {{ if site.Params.features.blog.shareButtons.email }}
+                <a class="btn btn-sm email-btn" href="mailto:?subject={{ .Title }}&body={{ .Permalink }}" target="_blank">
+                  <i class="fas fa-envelope-open-text"></i>
+                </a>
+            {{ end }}
+          {{ end }}
+          </div>
+
         <!--- Improve this page button --->
         {{ if site.Params.GitRepo }}
-          <div class="btn-improve-page">
-              <a href="{{ site.Params.GitRepo }}/edit/{{ site.Params.GitBranch }}/content/{{ .File.Path }}" title="{{ i18n "improve_this_page" }}" target="_blank" rel="noopener">
+          {{ if site.Params.GitBranch }}
+            {{ .Scratch.Set "GitBranch" site.Params.GitBranch }}
+          {{ else }}
+            {{ .Scratch.Set "GitBranch" "main" }}
+          {{ end }}
+          <div class="col-md-6 btn-improve-page">
+            {{ if ( eq site.Params.GitForge "gitlab" ) }}
+              <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 -->
+               <a href="{{ site.Params.GitRepo }}/edit/{{ .Scratch.Get "GitBranch" }}/content/{{ .File.Path }}" title="{{ i18n "improve_this_page" }}" target="_blank" rel="noopener">
+            {{ end }}
                 <i class="fas fa-code-branch"></i>
                 {{ i18n "improve_this_page" }}
               </a>
           </div>
         {{ end }}
+        </div>
 
-        <!---Next and Previous Navigator -->
+
+
+      <!---Next and Previous Navigator -->
       <hr />
         {{ partial "navigators/next-prev-navigator.html" . }}
       <hr />
-      <!-- Add Disqus forum  -->
-      {{ if site.DisqusShortname }}
-          {{ partial "disqus.html" . }}
+
+      <!----- Add comment support  ----->
+      {{ if site.Params.features.comment.enable }}
+        {{ partial "comments.html" site.Params.features.comment }}
       {{ end }}
+
+      <!-- Keep backward compatibility with old config.yaml -->
+      {{ if site.DisqusShortname }}
+        {{ partial "comments/disqus.html" (dict (slice "disqus" "shortName")  site.DisqusShortname) }}
+      {{ end }}
+
       </div>
     </div>
   </div>
@@ -90,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>
@@ -108,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

@@ -0,0 +1,62 @@
+{{ define "header" }}
+    <link rel="stylesheet" href="{{ "/css/layouts/list.css" | relURL }}">
+    <link rel="stylesheet" href="{{ "/css/navigators/sidebar.css" | relURL}}">
+    <!--================= custom style overrides =========================-->
+    <link rel="stylesheet" href="{{ "/css/style.css" | relURL }}"/>
+
+{{ end }}
+
+{{ define "navbar" }}
+    {{ partial "navigators/navbar-2.html" . }}
+{{ end }}
+
+{{ define "sidebar" }}
+  {{ $homePage:="#" }}
+  {{ if site.IsMultiLingual }}
+    {{ $homePage = (path.Join (cond ( eq .Language.Lang "en") "" .Language.Lang) .Type) }}
+  {{ end }}
+
+  <section class="sidebar-section" id="sidebar-section">
+    <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="{{ i18n "search" }}" data-search="" id="search-box" />
+        </form>
+        <div class="sidebar-tree">
+          <ul class="tree" id="tree">
+            <li id="list-heading"><a href="{{ .Type | relLangURL }}" data-filter="all">{{ i18n .Type }}</a></li>
+            <div class="subtree taxonomy-terms">
+              {{ $context := . }}
+              {{ partial "navigators/taxonomies.html" (dict "context" $context "taxo" "categories" "title" ( humanize "categories" ) ) }}
+            </div>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </section>
+{{ end }}
+
+{{ define "content" }}
+<section class="content-section" id="content-section">
+  <div class="content container-fluid" id="content">
+    <div class="container-fluid post-card-holder" id="post-card-holder">
+      {{ $posts := where .RegularPagesRecursive "Layout" "!=" "search" }}
+      {{ $paginator := .Paginate $posts 12 }}
+      {{ range $paginator.Pages }}
+        {{ if .Layout }}
+          {{/* ignore the search.md file*/}}
+        {{ else }}
+          {{ partial "cards/post.html" . }}
+        {{ end }}
+      {{ end }}
+    </div>
+    <div class="paginator">
+      {{ template "_internal/pagination.html" . }}
+    </div>
+  </div>
+</section>
+{{ end }}
+
+{{ define "scripts" }}
+    <script src="{{ "/js/list.js" | relURL }}"></script>
+{{ end }}

layouts/index.html

@@ -25,14 +25,13 @@
     <link rel="stylesheet" href="{{ "/css/sections/recent-posts.css" | relURL }}"/>
     <link rel="stylesheet" href="{{ "/css/sections/achievements.css" | relURL }}"/>
     <link rel="stylesheet" href="{{ "/css/sections/accomplishments.css" | relURL }}"/>
+    <link rel="stylesheet" href="{{ "/css/sections/publications.css" | relURL }}"/>
 
     <!--================= custom style overrides =========================-->
     <link rel="stylesheet" href="{{ "/css/style.css" | relURL }}"/>
     
-    <!-- Add Google Analytics if enabled in configuration -->
-    {{ if site.GoogleAnalytics }}
-        {{ template "_internal/google_analytics_async.html" . }}
-    {{ end }}
+    <!--================= add analytics if enabled =========================-->
+    {{- partial "analytics.html" . -}}
   </head>
   <body data-spy="scroll" data-target="#top-navbar" data-offset="100">
 
@@ -81,5 +80,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,67 @@
+<!-- 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 }}
+
+        <!-- Piwik/Matomo -->
+        {{ with .matomo }}
+        <!-- Matomo -->
+            <script>
+            var _paq = window._paq = window._paq || [];
+            /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
+            _paq.push(['trackPageView']);
+            _paq.push(['enableLinkTracking']);
+            (function() {
+                var u="//{{ .instance }}/";
+                _paq.push(['setTrackerUrl', u+'matomo.php']);
+                _paq.push(['setSiteId', '{{ .siteId }}']);
+                var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
+                g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
+            })();
+            </script>
+        {{ end }}
+    {{ end }}
+{{ end }}
+
+<!-- Keep backwards compatibility and consistency with HUGO defaults -->
+{{ if site.GoogleAnalytics }}
+    {{ template "_internal/google_analytics.html" . }}
+{{ end }}

layouts/partials/cards/project.html

@@ -11,7 +11,10 @@
 
             {{ $logoImage:= resources.Get .logo}}
             {{ if $logoImage }}
-            {{ $logoImage := $logoImage.Fit "24x24" }}
+            {{/*  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 }}

layouts/partials/cards/publication.html

@@ -0,0 +1,39 @@
+{{ $dataCategories:= slice "pub-all"}}
+{{ range .categories}}
+  {{ $dataCategories = $dataCategories | append (printf "pub-%s" .)}}
+{{end}}
+
+<div
+  class="col-12 p-2 pub-filtr-item"
+  data-category='{{ delimit $dataCategories ","}}'
+>
+  <div class="card mt-3">
+    <div class="card-header">
+      <h5 class="card-title mb-0">{{ .title }}</h5>
+      <div class="sub-title">
+        <span><a class="" href="{{.publishedIn.url}}">{{ .publishedIn.name }}</a></span>
+        <span class="ml-2">{{ .publishedIn.date }}</span>
+      </div>
+      <div class="authors">
+        {{ range $index,$author:= .authors }}
+          <span class="mr-2"><a class="" href="{{.url}}">{{ .name }}</a></span>
+        {{ end }}
+      </div>
+    </div>
+    <div class="card-body">
+      <p>{{ .paper.summary | markdownify }}</p>
+    </div>
+    <div class="card-footer">
+      <div class="tags">
+        {{ range $index,$tag:= .tags }}
+            <span class="btn badge btn-info ml-1 p-2">
+              {{ $tag }}
+            </span>
+        {{ end }}
+      </div>
+      <div class="details-btn">
+        <a class="btn btn-outline-info ml-1 pl-2 mb-2" href="{{ .paper.url }}" target="_blank" rel="noopener" role="button">{{ i18n "project_details"}}</a>
+      </div>
+    </div>
+  </div>
+</div>

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" }}
+            {{ $logoImage = $logoImage.Fit "24x24" }}
           {{ end }}
-
+        
           <img class="card-img-xs" src="{{ $logoImage.RelPermalink }}" alt="{{ .name }}" />
+          <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 }}
-        <h5 class="card-title">{{ .name }}</h5>
       </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

@@ -0,0 +1,24 @@
+{{ with .utteranc }}
+{{ $repo        := .repo }}
+{{ $issueTerm   := .issueTerm }}
+{{ $theme       := .theme }}
+
+<div id="utteranc_thread"></div>
+<div id="comments" class="comments">
+    <div id="comments-container"></div>
+</div>
+<script type="text/javascript">
+    (function() {
+        var utterances = document.createElement('script');
+        utterances.type = 'text/javascript';
+        utterances.async = true;
+        utterances.setAttribute('repo','{{ $repo }}')
+        utterances.setAttribute('issue-term','{{ $issueTerm }}')
+        utterances.setAttribute('theme','{{ $theme }}')
+        utterances.crossorigin = 'anonymous';
+        utterances.src = 'https://utteranc.es/client.js';
+
+        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,27 +0,0 @@
-<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 = "{{ site.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 }}
@@ -37,7 +43,7 @@
 
   {{ $disclaimer := "" }}
   {{ $siteConfig := (index site.Data site.Language.Lang).site }}
-  {{ if $siteConfig.disclaimer }} 
+  {{ if $siteConfig.disclaimer }}
     {{ $disclaimer = $siteConfig.disclaimer }}
   {{ end }}
 
@@ -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 }}
@@ -73,10 +79,19 @@
                   {{ $sectionID = .section.id }}
                 {{ end }}
                 <li class="nav-item">
-                  <a class="smooth-scroll" href="/#{{ $sectionID }}">{{ .section.name }}</a>
+                  <a class="smooth-scroll" href="{{ "" | absLangURL }}#{{ $sectionID }}">{{ .section.name }}</a>
                 </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>
@@ -86,7 +101,37 @@
           <h5>{{ i18n "contact_me" }}</h5>
           <ul>
             {{ range $key,$value:= $author.contactInfo }}
-            <li><span>{{ title $key }}: </span> <span>{{ $value }}</span></li>
+              {{ if (eq $key "email") }}
+                <li><a href={{ printf "mailto:%s" $value }} target="_blank" rel="noopener">
+                  <span><i class="fas fa-envelope"></i></span> <span>{{ $value }}</span>
+                </a></li>
+              {{ else if (eq $key "phone") }}
+                <li><span><i class="fas fa-phone-alt"></i></span> <span>{{ $value }}</span></li>
+              {{ else if (eq $key "linkedin") }}
+                <li><a href={{ printf "https://www.linkedin.com/in/%s" $value }} target="_blank" rel="noopener">
+                  <span><i class="fab fa-linkedin"></i></span> <span>{{ $author.name }}</span>
+                </a></li>
+              {{ else if (eq $key "github") }}
+                <li><a href={{ printf "https://github.com/%s" $value }} target="_blank" rel="noopener">
+                  <span><i class="fab fa-github"></i></span> <span>{{ $value }}</span>
+                </a></li>
+              {{ else if reflect.IsMap $value }}
+                <li>
+                  {{ if (and (isset $value "url") (isset $value "icon"))}}
+                  <a href={{ $value.url }} target="_blank" rel="noopener">
+                    <span><i class={{ printf "fab fa-%s" $value.icon }}></i></span> <span>{{ $value.text }}</span>
+                  </a>
+                  {{ else if isset $value "icon" }}
+                    <span><i class={{ printf "fab fa-%s" $value.icon }}></i></span> <span>{{ $value.text }}</span>
+                  {{ else }}
+                    <a href={{ $value.url }} target="_blank" rel="noopener">
+                      <span>{{ title $key }}: </span> <span>{{ $value.text }}</span>
+                    </a>
+                  {{ end }}
+                </li>
+              {{ else }}
+                <li><span>{{ title $key }}: </span> <span>{{ $value }}</span></li>
+              {{ end }}
             {{ end }}
           </ul>
         </div>
@@ -121,13 +166,14 @@
                 <button type="submit" class="btn btn-info">{{ i18n "submit" }}</button>
               </form>
             {{ else }}
-             <!-- a dummy form -->
-              <form>
-                <div class="form-group">
-                  <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="{{ i18n "newsletter_input_placeholder" }}"/>
-                  <small id="emailHelp" class="form-text text-muted">{{ i18n "newsletter_warning" }}</small>
-                </div>
-                <button type="submit" class="btn btn-info">{{ i18n "submit" }}</button>
+              <form method='post' action='https://blogtrottr.com'>
+              <div class="form-group">
+              <input type='email' class="form-control" name='btr_email' placeholder="{{ i18n "newsletter_input_placeholder" }}"/><br />
+              <input type='hidden' name='btr_url' value='{{ "" | absLangURL }}index.xml' />
+              <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>
@@ -137,7 +183,7 @@
     {{ if and $disclaimerEnabled $disclaimer}}
     <hr />
     <div class="container">
-      <p id="disclaimer"><strong>{{ i18n "disclaimer_text" }}:</strong> {{ $disclaimer }}</p>
+      <p id="disclaimer"><strong>{{ i18n "disclaimer_text" }}:</strong> {{ $disclaimer | markdownify }}</p>
     </div>
     {{ end }}
     {{ if $credentialsEnabled }}
@@ -145,7 +191,7 @@
     <div class="container">
       <div class="row text-left">
         <div class="col-md-4">
-          <a id="theme" href="https://github.com/hossainemruz/toha" target="_blank" rel="noopener">
+          <a id="theme" href="https://github.com/hugo-toha/toha" target="_blank" rel="noopener">
             <img src="{{ $themeLogo }}" alt="Toha Theme Logo">
             Toha
           </a>

layouts/partials/header.html

@@ -1,18 +1,3 @@
-{{/* default favicon */}}
-{{ $favicon := "/images/favicon.png" }}
-
-{{/* if favicon is provided in the config, then use that */}}
-{{ if site.Params.logo.favicon }}
-  {{ $favicon = site.Params.logo.favicon }}
-{{ end }}
-
-{{/* resize the favicon. don't resize svg because it is not supported */}}
-{{ $favicon := resources.Get $favicon }}
-{{ if and $favicon (ne $favicon.MediaType.SubType "svg") }}
-  {{ $favicon = $favicon.Resize "42x" }}
-{{ end }}
-{{ $favicon = $favicon.RelPermalink}}
-
 <meta charset="UTF-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <meta http-equiv="X-UA-Compatible" content="ie=edge" />
@@ -24,9 +9,28 @@
 <link rel="stylesheet" href="{{ "/css/plyr.css" | relURL }}"/>
 <link rel="stylesheet" href="{{ "/css/flag-icon.min.css" | relURL }}"/>
 
-<!--=================== cdn ==============================-->
-<link href="https://fonts.googleapis.com/css2?family=Muli:wght@300;400;500;600" rel="stylesheet">
-<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" />
+<!--=================== fonts ==============================-->
+<link rel="stylesheet" href="{{ "/google-fonts/Mulish/mulish.css" | relURL }}"/>
+
+<!--=================== 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 =========================-->
-<link rel="icon" type="image/png" href="{{ $favicon }}" />
+{{/* add favicon only if the site author has provided the the favicon */}}
+{{ if site.Params.logo.favicon }}
+  {{ $favicon := site.Params.logo.favicon }}
+
+  {{/* resize the favicon. don't resize svg because it is not supported */}}
+  {{ $favicon = resources.Get $favicon }}
+  {{ if and $favicon (ne $favicon.MediaType.SubType "svg") }}
+    {{ $favicon = $favicon.Resize "42x" }}
+  {{ end }}
+  {{ $favicon = $favicon.RelPermalink}}
+
+  <link rel="icon" type="image/png" href="{{ $favicon }}" />
+{{end}}

layouts/partials/helpers/get-author-image.html

@@ -18,12 +18,12 @@
     {{ end }}
 {{ end }}
 
-{{/* apply image processing. don't use "Fit" in svg because its not supported */}}
+{{/* apply image processing. don't use "Fit" in svg or gif because its not supported */}}
 {{ $authorImage:= resources.Get $authorImage}}
-{{ if and $authorImage (ne $authorImage.MediaType.SubType "svg") }}
-  {{ $authorImage := $authorImage.Fit "120x120" }}
+
+{{ if and $authorImage (and (ne $authorImage.MediaType.SubType "svg") ( ne $authorImage.MediaType.SubType "gif")) }}
+  {{ $authorImage = $authorImage.Fit "120x120" }}
 {{ end }}
 
 {{/*  return the author image link  */}}
 {{ return $authorImage.RelPermalink }}
-

layouts/partials/helpers/get-pages.html

@@ -0,0 +1,10 @@
+{{ $pages:= slice}}
+{{ range . }}
+    {{ if .HasChildren }}
+        {{ $nestedPages:=partial "helpers/get-pages.html" .Children }}
+        {{ $pages = $pages | append $nestedPages }}
+    {{ else }}
+        {{ $pages = $pages | append .Page }}
+    {{ end }}
+{{ end }}
+{{ return $pages}}

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">
-<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 defer src="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/contrib/auto-render.min.js" integrity="sha384-kWPLUVMOks5AQFrykwIup5lo0m3iMkkHrD0uJ4H5cjeGihAutqP0yW0J6dpFiVkI" crossorigin="anonymous"
-    onload="renderMathInElement(document.body);">
+<link rel="stylesheet" href="{{ "/katex/katex.min.css" | relURL }}">
+<script type="text/javascript" defer src="{{ "/katex/katex.min.js" | relURL }}"></script>
+<script type="text/javascript" defer src="{{ "/katex/auto-render.min.js" | relURL }}" 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/badge.html

@@ -2,7 +2,7 @@
 {{ if eq .type "certification" }}
     {{/* Verifiable certificate badge from https://www.credly.com */}}
     <div class="">
-      <a href="{{ .url }}" target="_blank" >
+      <a href="{{ .url }}" target="_blank" rel="noopener noreferrer">
        <img src="{{ .badge }}" alt="{{ .name }}" />
       </a>
     </div>

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/floating-lang-selector.html

@@ -5,15 +5,19 @@
 
 <div class="dropdown languageSelector">
     <a class="btn dropdown-toggle" href="#" id="languageSelector" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-        {{ $countryCode := partial "helpers/country-code.html" . }}
-        <img class="flag" src="https://www.countryflags.io/{{ $countryCode }}/flat/16.png" alt="{{ $countryCode }}">
+        {{ if ne site.Params.showFlags false }}
+            {{ $countryCode := partial "helpers/country-code.html" . }}
+            <span class="flag-icon flag-icon-{{$countryCode}}"></span>
+        {{ end }}
         {{ 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 }}">
-            {{ $countryCode := partial "helpers/country-code.html" . }}
-            <img class="flag" src="https://www.countryflags.io/{{ $countryCode }}/flat/24.png" alt="{{ $countryCode }}">
+            {{ if ne site.Params.showFlags false }}
+                {{ $countryCode := partial "helpers/country-code.html" . }}
+                <span class="flag-icon flag-icon-{{$countryCode}}"></span>
+            {{ end }}
             {{ .Language.LanguageName }}
         </a>
         {{ end }}

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

@@ -5,15 +5,19 @@
 
 <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">
-      {{ $countryCode := partial "helpers/country-code.html" . }}
-      <span class="flag-icon flag-icon-{{$countryCode}}"></span>
+      {{ if ne site.Params.showFlags false }}
+        {{ $countryCode := partial "helpers/country-code.html" . }}
+        <span class="flag-icon flag-icon-{{$countryCode}}"></span>
+      {{ end }}
       {{ 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 }}">
-          {{ $countryCode := partial "helpers/country-code.html" . }}
-          <span class="flag-icon flag-icon-{{$countryCode}}"></span>
+          {{ if ne site.Params.showFlags false }}
+            {{ $countryCode := partial "helpers/country-code.html" . }}
+            <span class="flag-icon flag-icon-{{$countryCode}}"></span>
+          {{ end }}
           {{ .Language.LanguageName }}
         </a>
       {{ end }}

layouts/partials/navigators/lang-selector.html

@@ -1,16 +1,20 @@
 <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">
-    {{ $countryCode := partial "helpers/country-code.html" . }}
-    <span class="flag-icon flag-icon-{{$countryCode}}"></span>
-    {{ site.Language.LanguageName }}
-</a>
-<div class="dropdown-menu" aria-labelledby="languageSelector">
-    {{ range site.Home.AllTranslations }}
-    <a class="dropdown-item nav-link languages-item" href="{{ .RelPermalink }}">
-        {{ $countryCode := partial "helpers/country-code.html" . }}
-        <span class="flag-icon flag-icon-{{$countryCode}}"></span>
-        {{ .Language.LanguageName }}
+    <a class="nav-link dropdown-toggle" href="#" id="languageSelector" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+        {{ if ne site.Params.showFlags false }}
+            {{ $countryCode := partial "helpers/country-code.html" . }}
+            <span class="flag-icon flag-icon-{{$countryCode}}"></span>
+        {{ end }}
+        {{ site.Language.LanguageName }}
     </a>
-    {{ end }}
-</div>
-</li>
+    <div class="dropdown-menu" aria-labelledby="languageSelector">
+        {{ range site.Home.AllTranslations }}
+        <a class="dropdown-item nav-link languages-item" href="{{ .RelPermalink }}">
+            {{ if ne site.Params.showFlags false }}
+                {{ $countryCode := partial "helpers/country-code.html" . }}
+                <span class="flag-icon flag-icon-{{$countryCode}}"></span>
+            {{ end }}
+            {{ .Language.LanguageName }}
+        </a>
+        {{ end }}
+    </div>
+    </li>

layouts/partials/navigators/navbar-2.html

@@ -1,28 +1,31 @@
-{{/* default logos  */}}
-{{ $mainLogo := "/images/main-logo.png" }}
-{{ $invertedLogo := "/images/inverted-logo.png" }}
+{{/* by default, don't use any logo */}}
+{{ $mainLogo := "" }}
+{{ $invertedLogo := "" }}
 
-{{/* if custom logo has been provided in the config file, then use them */}}
+{{/*  if custom logo has been provided, use them  */}}
 {{ if site.Params.logo.main }}
   {{ $mainLogo = site.Params.logo.main }}
 {{ end }}
-
 {{ if site.Params.logo.inverted }}
   {{ $invertedLogo = site.Params.logo.inverted }}
 {{ end }}
 
 {{/* resize the logos. don't resize svg because it is not supported */}}
-{{ $mainLogo := resources.Get $mainLogo}}
-{{ if and $mainLogo (ne $mainLogo.MediaType.SubType "svg") }}
-  {{ $mainLogo = $mainLogo.Resize "42x" }}
+{{ if $mainLogo }}
+  {{ $mainLogo = resources.Get $mainLogo}}
+  {{ if and $mainLogo (ne $mainLogo.MediaType.SubType "svg") }}
+    {{ $mainLogo = $mainLogo.Resize "42x" }}
+  {{ end }}
+  {{ $mainLogo = $mainLogo.RelPermalink}}
 {{ end }}
-{{ $mainLogo = $mainLogo.RelPermalink}}
 
-{{ $invertedLogo := resources.Get $invertedLogo}}
-{{ if and $invertedLogo (ne $invertedLogo.MediaType.SubType "svg") }}
-  {{ $invertedLogo = $invertedLogo.Resize "42x" }}
+{{ if $invertedLogo }}
+  {{ $invertedLogo = resources.Get $invertedLogo}}
+  {{ if and $invertedLogo (ne $invertedLogo.MediaType.SubType "svg")}}
+    {{ $invertedLogo = $invertedLogo.Resize "42x" }}
+  {{ end }}
+  {{ $invertedLogo = $invertedLogo.RelPermalink}}
 {{ end }}
-{{ $invertedLogo = $invertedLogo.RelPermalink}}
 
 <nav class="navbar navbar-expand-xl top-navbar final-navbar shadow">
   <div class="container">
@@ -30,7 +33,9 @@
       <span class="navbar-toggler-icon"></span>
     </button>
     <a class="navbar-brand" href="{{ site.BaseURL | relLangURL }}">
-      <img src="{{ $mainLogo  }}" alt="Logo">
+      {{ if $mainLogo }}
+        <img src="{{ $mainLogo  }}" alt="Logo">
+      {{ end }}
       {{- site.Title -}}
     </a>
     <button class="navbar-toggler navbar-light" id="toc-toggler" type="button" onclick="toggleTOC()">
@@ -42,10 +47,17 @@
       {{ if .IsTranslated }}
         {{ partial "navigators/lang-selector-2.html" . }}
       {{ end }}
+      {{ if site.Params.darkMode.enable }}
+        {{ partial "navigators/theme-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" alt="Logo">
-  <img src="{{ $invertedLogo  }}" class="d-none" id="inverted-logo" alt="Inverted Logo">
+  {{ if $mainLogo }}
+    <img src="{{ $mainLogo }}" class="d-none" id="main-logo" alt="Logo">
+  {{ end }}
+  {{ if $invertedLogo }}
+    <img src="{{ $invertedLogo }}" class="d-none" id="inverted-logo" alt="Inverted Logo">
+  {{ end }}
 </nav>

layouts/partials/navigators/navbar.html

@@ -1,17 +1,18 @@
 {{/*  variables for enabling/disabling various features  */}}
 {{ $blogEnabled   := site.Params.features.blog.enable   | default false }}
 {{ $notesEnabled  := site.Params.features.notes.enable  | default false }}
+{{ $maxVisibleSections   := site.Params.topNavbar.maxVisibleSections   | default 5 }}
 
 {{/*  keep backward compatibility for blog post  */}}
 {{ if site.Params.enableBlogPost }}
   {{ $blogEnabled = true }}
 {{ end }}
 
-{{/*  default logos  */}}
-{{ $mainLogo := "/images/main-logo.png" }}
-{{ $invertedLogo := "/images/inverted-logo.png" }}
+{{/* by default, don't use any logo */}}
+{{ $mainLogo := "" }}
+{{ $invertedLogo := "" }}
 
-{{/*  if custom logo is used, them  */}}
+{{/*  if custom logo has been provided, use them  */}}
 {{ if site.Params.logo.main }}
   {{ $mainLogo = site.Params.logo.main }}
 {{ end }}
@@ -20,17 +21,21 @@
 {{ end }}
 
 {{/* resize the logos. don't resize svg because it is not supported */}}
-{{ $mainLogo := resources.Get $mainLogo}}
-{{ if and $mainLogo (ne $mainLogo.MediaType.SubType "svg") }}
-  {{ $mainLogo = $mainLogo.Resize "42x" }}
+{{ if $mainLogo }}
+  {{ $mainLogo = resources.Get $mainLogo}}
+  {{ if and $mainLogo (ne $mainLogo.MediaType.SubType "svg") }}
+    {{ $mainLogo = $mainLogo.Resize "42x" }}
+  {{ end }}
+  {{ $mainLogo = $mainLogo.RelPermalink}}
 {{ end }}
-{{ $mainLogo = $mainLogo.RelPermalink}}
 
-{{ $invertedLogo := resources.Get $invertedLogo}}
-{{ if and $invertedLogo (ne $invertedLogo.MediaType.SubType "svg")}}
-  {{ $invertedLogo = $invertedLogo.Resize "42x" }}
+{{ if $invertedLogo }}
+  {{ $invertedLogo = resources.Get $invertedLogo}}
+  {{ if and $invertedLogo (ne $invertedLogo.MediaType.SubType "svg")}}
+    {{ $invertedLogo = $invertedLogo.Resize "42x" }}
+  {{ end }}
+  {{ $invertedLogo = $invertedLogo.RelPermalink}}
 {{ end }}
-{{ $invertedLogo = $invertedLogo.RelPermalink}}
 
 {{ $customMenus := site.Params.customMenus }}
 {{ if (index site.Data site.Language.Lang).site.customMenus }}
@@ -45,7 +50,9 @@
 <nav class="navbar navbar-expand-xl top-navbar initial-navbar" id="top-navbar">
   <div class="container">
     <a class="navbar-brand" href="{{ site.BaseURL | relLangURL }}">
-      <img src="{{ $invertedLogo }}" id="logo" alt="Logo">
+      {{ if $invertedLogo }}
+        <img src="{{ $invertedLogo }}" id="logo" alt="Logo">
+      {{ end }}
       {{- site.Title -}}
     </a>
     <button
@@ -59,32 +66,32 @@
       <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>
         </li>
         {{ if $sections }}
-          {{ $sectionCount := 0}}
+          {{ $sectionCount := 1 }}
           {{ range sort $sections "section.weight" }}
             {{ if and (.section.enable) (.section.showOnNavbar)}}
               {{ $sectionCount  = add $sectionCount 1}}
-              {{ if le $sectionCount 5 }}
+              {{ if le $sectionCount $maxVisibleSections }}
                 <li class="nav-item">
                   <a class="nav-link" href="#{{ partial "helpers/get-section-id.html" . }}">{{ .section.name }}</a>
                 </li>
               {{ end }}
             {{ end }}
           {{- end }}
-          {{ if gt $sectionCount 5 }}
+          {{ if gt $sectionCount $maxVisibleSections }}
           <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}}
-                    {{ if gt $sectionCount 5 }}
+                    {{ if gt $sectionCount $maxVisibleSections }}
                       <a class="dropdown-item" href="#{{ partial "helpers/get-section-id.html" . }}">{{ .section.name }}</a>
                     {{ end }}
                   {{ end }}
@@ -108,17 +115,26 @@
           </li>
         {{ end }}
         {{ range $customMenus }}
-          <li class="nav-item">
-            <a class="nav-link" href="{{ .url }}">{{ .name }}</a>
-          </li>
+            {{ 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>
   <!-- Store the logo information in a hidden img for the JS -->
-  <img src="{{ $mainLogo }}" class="d-none" id="main-logo" alt="Logo">
-  <img src="{{ $invertedLogo }}" class="d-none" id="inverted-logo" alt="Inverted Logo">
+  {{ if $mainLogo }}
+    <img src="{{ $mainLogo }}" class="d-none" id="main-logo" alt="Logo">
+  {{ end }}
+  {{ if $invertedLogo }}
+    <img src="{{ $invertedLogo }}" class="d-none" id="inverted-logo" alt="Inverted Logo">
+  {{ end }}
 </nav>

layouts/partials/navigators/next-prev-navigator.html

@@ -1,33 +1,43 @@
+{{ $curPage := . }}
+{{ $prevPage := "" }}
+{{ $nextPage := "" }}
+
+<!-- List all the pages. It uses the sidebar menu to discover the page order. -->
+{{ $pages := slice }}
+
+{{ if isset site.Menus "sidebar" }}
+  {{ $pages = partial "helpers/get-pages.html" site.Menus.sidebar }}
+{{ end }}
+
+<!-- Now, find the current page index in the pages list. Then, find previous page and next page. -->
+{{ $idx := 0 }}
+{{ range $pages }}
+  {{ if eq .RelPermalink $curPage.RelPermalink }}
+    {{ $prevPage = index $pages (sub $idx 1) }}
+    {{ $nextPage = index $pages (add $idx 1) }}
+  {{ end }}
+  {{ $idx = add $idx 1 }}
+{{ end }}
+
 <div class="row next-prev-navigator">
-{{ $currentPage := . }}
-{{ range (where site.RegularPages.ByDate "Type" "in" site.Params.mainSections )}}
-  {{ if eq .RelPermalink  $currentPage.RelPermalink }}
-    {{ if .Next }}
-      {{ if (in site.Params.mainSections .Next.Type) }}
-      <div class="col-md-6 previous-article">
-        <a href="{{.Next.RelPermalink}}" title="{{ .Next.Title }}" class="btn btn-outline-info">
-          <div><i class="fas fa-chevron-circle-left"></i> {{ i18n "prev" }}</div>
-          <div class="next-prev-text">{{ .Next.Title }}</div>
+  {{ if $prevPage }}
+    <div class="col-md-6 previous-article">
+      <a href="{{ $prevPage.RelPermalink }}" title="{{ $prevPage.Title }}" class="btn btn-outline-info">
+        <div><i class="fas fa-chevron-circle-left"></i> {{ i18n "prev" }}</div>
+        <div class="next-prev-text">{{ $prevPage.Title }}</div>
+      </a>
+    </div>
+  {{ end }}
+  {{ if $nextPage }}
+      {{ $columnWidth:="col-md-12" }}
+      {{ if $prevPage }}
+        {{ $columnWidth = "col-md-6" }}
+      {{ end}}
+      <div class="{{ $columnWidth }} next-article">
+        <a href="{{ $nextPage.RelPermalink }}" title="{{ $nextPage.Title }}" class="btn btn-outline-info">
+          <div>{{ i18n "next" }} <i class="fas fa-chevron-circle-right"></i></div>
+          <div class="next-prev-text">{{ $nextPage.Title }}</div>
         </a>
       </div>
-      {{ end }}
     {{ end }}
-    {{ if .Prev }}
-      {{ if (in site.Params.mainSections .Prev.Type)  }}
-        {{ $columnWidth:="col-md-12" }}
-        {{ if .Next }}
-          {{ if (in site.Params.mainSections .Next.Type) }}
-              {{ $columnWidth = "col-md-6" }}
-          {{ end }}
-        {{ end}}
-        <div class="{{ $columnWidth }} next-article">
-          <a href="{{ .Prev.RelPermalink }}" title="{{ .Prev.Title }}" class="btn btn-outline-info">
-            <div>{{ i18n "next" }} <i class="fas fa-chevron-circle-right"></i></div>
-            <div class="next-prev-text">{{ .Prev.Title }}</div>
-          </a>
-        </div>
-      {{ end }}
-    {{ end }}
-  {{ end }}
-{{ end }}
 </div>

layouts/partials/navigators/taxonomies.html

@@ -0,0 +1,16 @@
+{{ $context := .context  }}
+{{ $taxo := .taxo  }}
+{{ $class:= "" }}
+{{ if isset $context.Site.Taxonomies ( lower $taxo ) }}
+  {{ $taxonomy := index $context.Site.Taxonomies ( lower $taxo ) }}
+  {{ if (gt (len $taxonomy) 0)}}
+        {{ range $taxonomy }}
+          {{if eq $context.Title .Page.Title}}
+            {{ $class = "active" }}
+          {{else}}
+            {{$class = ""}}
+          {{end}}
+          <li><a class="taxonomy-term {{ $class }}" href="{{ .Page.Permalink }}" data-taxonomy-term="{{ urlize .Page.Title }}"><span class="taxonomy-label">{{ .Page.Title }}</span></a></li>
+        {{ end }}
+  {{ end }}
+{{ end }}

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

@@ -5,3 +5,10 @@
 <script type="text/javascript" src="{{ "/js/navbar.js" | relURL }}"></script>
 <script type="text/javascript" src="{{ "/js/plyr.js" | relURL }}"></script>
 <script type="text/javascript" src="{{ "/js/main.js" | relURL }}"></script>
+
+{{ if site.Params.darkMode.enable }}
+{{ 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

@@ -11,7 +11,8 @@
 <div class="container anchor p-lg-5 about-section" id="{{ $sectionID }}">
   <div class="row pt-sm-2 pt-md-4 align-self-center">
     <!-- summary -->
-    <div class="col-sm-6">
+    <!-- takes up full section width if no badges/soft skills are specified -->
+    {{ if or (.softSkills) (.badges) }} <div class="col-sm-6"> {{ else }} <div class="col-sm-12"> {{ end }}
       <h3 class="p-1">{{ $author.name }}</h3>
       {{ if .designation }}
       <h5 class="p-1">
@@ -30,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>
@@ -44,6 +45,11 @@
         ><button class="btn btn-dark">{{ i18n "resume"}}</button></a
       >
       {{ end }}
+      {{ range .resourceLinks }}
+      <a href="{{ .url | relURL }}" title="{{ .title }}" target="#"
+        ><button class="btn btn-dark">{{ .title }}</button></a
+      >
+      {{ end }}
     </div>
     <!-- soft skills circular-progressbar -->
     <div class="col-sm-6 pt-5 pl-md-4 pl-sm-3 pt-sm-0">

layouts/partials/sections/accomplishments.html

@@ -3,11 +3,15 @@
   {{ $sectionID = .section.id }}
 {{ end }}
 
-<div class="container-fluid anchor pb-5 accomplishments-section" id="{{ $sectionID }}">
+<div class="container-fluid anchor pb-5 accomplishments-section">
   {{ 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">
     <div class="row" id="acomplishment-card-holder">
       {{ range .accomplishments }}

layouts/partials/sections/achievements.html

@@ -3,9 +3,13 @@
   {{ $sectionID = .section.id }}
 {{ end }}
 
-<div class="container-fluid anchor pb-5 achievements-section" id="{{ $sectionID }}">
+<div class="container-fluid anchor pb-5 achievements-section">
   {{ 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">
     <div class="row" id="gallery">

layouts/partials/sections/achievements/entry.html

@@ -12,14 +12,17 @@
 {{/*  don't use "background-image: url('{{ $achievementImageSm }}');" Otherwise the images won't show in https://themes.gohugo.io/ */}}
 <div 
   class="achievement-entry text-center"
-  style="background-image: url('{{ strings.TrimSuffix "/" site.BaseURL }}{{ $achievementImageSm }}');"
+  style="background-image: url('{{ $achievementImageSm }}');"
 >
   <i class="fas fa-search-plus" id="enlarge-icon"></i>
   <h4 class="title" id="achievement-title">{{ .title }}</h4>
   <div class="caption hidden col-lg-6 text-left" id="caption">
     <h4>{{ .title }}</h4>
     <p>{{ .summary | markdownify }}</p>
+    {{ if .url }}
+      <a class="btn btn-info ml-1 pl-2 mb-2" href="{{ .url }}" target="_blank" rel="noopener" role="button">{{ i18n "project_details"}}</a>
+    {{ end }}
   </div>
-  <span style="background-image: url('{{ strings.TrimSuffix "/" site.BaseURL }}{{ $achievementImageSm }}');" class="d-none" id="SmallImage" active="true"></span>
-<span  style="background-image: url('{{ strings.TrimSuffix "/" site.BaseURL }}{{ $achievementImageLg }}');" class="d-none" id="LargeImage"></span>
+  <span style="background-image: url('{{ $achievementImageSm }}');" class="d-none" id="SmallImage" active="true"></span>
+<span  style="background-image: url('{{ $achievementImageLg }}');" class="d-none" id="LargeImage"></span>
 </div>

layouts/partials/sections/education-alt.html

@@ -4,17 +4,24 @@
 {{ end }}
 
 <div class="container-fluid anchor pb-5 education-section education-alt" id="{{ $sectionID }}">
-    {{ if not (.section.hideTitle) }}
-    <h1 class="text-center">{{ .section.name }}</h1>
-    {{ end }}
+  {{ 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>
-                {{ range .degrees}}
-                <tr>
-                    <td class="icon">
-                        <div class="hline"></div>
+  <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>
@@ -53,6 +60,7 @@
                                 </div>
                             {{ end }}
                             {{ if .takenCourses }}
+                            {{ $collapseAfter  := .takenCourses.collapseAfter | default 2 }}
                             <div class="taken-courses">
                                 <h6 class="text-muted">{{ i18n "taken_courses" }}</h6>
                                 {{ if .takenCourses.showGrades }}
@@ -65,7 +73,7 @@
                                     </thead>
                                     <tbody>
                                         {{ range $index,$course := .takenCourses.courses }}
-                                        <tr class="course {{ if gt $index 1 }}hidden-course{{ end}}">
+                                        <tr class="course {{ if ge $index $collapseAfter }}hidden-course{{ end}}">
                                             <td>{{ $course.name }}</td>
                                             {{ if not $hideScale  }}<td>{{ $course.outOf }}</td>{{ end }}
                                             <td>{{ $course.achieved }}</td>
@@ -76,11 +84,11 @@
                                 {{ else }}
                                     <ul>
                                         {{ range $index,$course := .takenCourses.courses }}
-                                        <li class="course {{ if gt $index 1 }}hidden-course{{ end}}">{{ $course.name }}</li>
+                                        <li class="course {{ if ge $index $collapseAfter }}hidden-course{{ end}}">{{ $course.name }}</li>
                                         {{ end }}
                                     </ul>
                                 {{ end }}
-                                {{ if gt (len .takenCourses.courses) 2 }}
+                                {{ if gt (len .takenCourses.courses) $collapseAfter }}
                                     <button type="button" class="btn btn-link show-more-btn pt-0 {{ if .takenCourses.showGrades }}ml-1{{ else }}ml-2{{ end }}"
                                     onclick="toggleCourseVisibility(this);" id="show-more-btn" aria-label="{{ i18n "show_more"}}">{{ i18n "show_more"}}</button>
                                     <button type="button" class="btn btn-link show-more-btn hidden pt-0 {{ if .takenCourses.showGrades }}ml-1{{ else }}ml-2{{ end }}"
@@ -114,4 +122,4 @@
             </tbody>
         </table>
     </div>
-</div>
+</div>

layouts/partials/sections/education.html

@@ -3,18 +3,25 @@
 {{ $sectionID = .section.id }}
 {{ end }}
 
-<div class="container-fluid anchor pb-5 education-section" id="{{ $sectionID }}">
-    {{ if not (.section.hideTitle) }}
-    <h1 class="text-center">{{ .section.name }}</h1>
-    {{ end }}
+<div class="container-fluid anchor pb-5 education-section">
+  {{ 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>
-                {{ range .degrees}}
-                <tr>
-                    <td class="icon">
-                        <div class="hline"></div>
+  <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>
@@ -53,19 +60,20 @@
                                 </div>
                             {{ end }}
                             {{ if .takenCourses }}
+                            {{ $collapseAfter  := .takenCourses.collapseAfter | default 2 }}
                             <div class="taken-courses">
                                 <h6 class="text-muted">{{ i18n "taken_courses"}}</h6>
                                 {{ if .takenCourses.showGrades }}
                                 {{ $hideScale  := .takenCourses.hideScale }}
                                 <table>
                                     <thead>
-                                        <th>{{ i18n "course_name"}}</th>
+                                        <th class="course-name-header">{{ i18n "course_name"}}</th>
                                         {{ if not $hideScale  }}<th>{{ i18n "total_credit"}}</th>{{ end }}
                                         <th>{{ i18n "obtained_credit"}}</th>
                                     </thead>
                                     <tbody>
                                         {{ range $index,$course := .takenCourses.courses }}
-                                        <tr class="course {{ if gt $index 1 }}hidden-course{{ end}}">
+                                        <tr class="course {{ if ge $index $collapseAfter }}hidden-course{{ end}}">
                                             <td>{{ $course.name }}</td>
                                             {{ if not $hideScale  }}<td>{{ $course.outOf }}</td>{{ end }}
                                             <td>{{ $course.achieved }}</td>
@@ -76,11 +84,11 @@
                                 {{ else }}
                                     <ul>
                                         {{ range $index,$course := .takenCourses.courses }}
-                                        <li class="course {{ if gt $index 1 }}hidden-course{{ end}}">{{ $course.name }}</li>
+                                        <li class="course {{ if ge $index $collapseAfter }}hidden-course{{ end}}">{{ $course.name }}</li>
                                         {{ end }}
                                     </ul>
                                 {{ end }}
-                                {{ if gt (len .takenCourses.courses ) 2 }}
+                                {{ if gt (len .takenCourses.courses ) $collapseAfter }}
                                     <button type="button" class="btn btn-link show-more-btn pt-0 {{ if .takenCourses.showGrades }}ml-1{{ else }}ml-2{{ end }}"
                                     onclick="toggleCourseVisibility(this);" id="show-more-btn">{{ i18n "show_more"}}</button>
                                     <button type="button" class="btn btn-link show-more-btn hidden pt-0 {{ if .takenCourses.showGrades }}ml-1{{ else }}ml-2{{ end }}"
@@ -105,4 +113,4 @@
             </tbody>
         </table>
     </div>
-</div>
+</div>

layouts/partials/sections/experiences.html

@@ -3,9 +3,13 @@
   {{ $sectionID = .section.id }}
 {{ end }}
 
-<div class="container-fluid anchor pb-5 experiences-section" id="{{ $sectionID }}">
+<div class="container-fluid anchor pb-5 experiences-section">
   {{ 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 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/home.html

@@ -26,8 +26,11 @@
   {{ $authorImage = $author.image }}
 {{ end }}
 {{ $authorImage := resources.Get $authorImage }}
-{{ $authorImage := $authorImage.Fit "148x148" }}
 
+{{/* apply image processing. don't use "Fit" in svg or gif because its not supported */}}
+{{ if and $authorImage (and (ne $authorImage.MediaType.SubType "svg") ( ne $authorImage.MediaType.SubType "gif")) }}
+  {{ $authorImage = $authorImage.Fit "148x148" }}
+{{ end }}
 {{/* get file that matches the filename as specified as src="" in shortcode */}}
 {{ $src := resources.Get $backgroundImage }}
 
@@ -74,28 +77,27 @@
   <style>
     /* 0 to 299 */
     #homePageBackgroundImageDivStyled {
-      /*background-image: url('{{ $tiny.RelPermalink }}'); This does not work on https://themes.gohugo.io/ */
-      background-image: url('{{ strings.TrimSuffix "/" site.BaseURL }}{{ $tiny.RelPermalink }}');
+      background-image: url('{{ $tiny.RelPermalink }}');
     }
     /* 300 to X */
     @media (min-width: 500px) and (max-width: 800px) { /* or 301 if you want really the same as previously.  */
       #homePageBackgroundImageDivStyled {   
-          background-image: url('{{ strings.TrimSuffix "/" site.BaseURL }}{{ $small.RelPermalink }}');
+          background-image: url('{{ $small.RelPermalink }}');
         }
     }
     @media (min-width: 801px) and (max-width: 1200px) { /* or 301 if you want really the same as previously.  */
       #homePageBackgroundImageDivStyled {   
-          background-image: url('{{ strings.TrimSuffix "/" site.BaseURL }}{{ $medium.RelPermalink }}');
+          background-image: url('{{ $medium.RelPermalink }}');
         }
     }
     @media (min-width: 1201px) and (max-width: 1500px) { /* or 301 if you want really the same as previously.  */
       #homePageBackgroundImageDivStyled {   
-          background-image: url('{{ strings.TrimSuffix "/" site.BaseURL }}{{ $large.RelPermalink }}');
+          background-image: url('{{ $large.RelPermalink }}');
         }
     }
     @media (min-width: 1501px) { /* or 301 if you want really the same as previously.  */
       #homePageBackgroundImageDivStyled {   
-          background-image: url('{{ strings.TrimSuffix "/" site.BaseURL }}{{ $src.RelPermalink }}');
+          background-image: url('{{ $src.RelPermalink }}');
         }
     }
     </style>
@@ -110,6 +112,9 @@
       alt="Author Image"
     />
     <h1 class="greeting"> {{ $author.greeting }} {{ $name }}</h1>
+    {{ if $author.subtitle }}
+      <h2 class="greeting-subtitle">{{ $author.subtitle }}</h2>
+    {{ end }}
     <div class="typing-carousel">
       <span id="ityped" class="ityped"></span>
       <span class="ityped-cursor"></span>

layouts/partials/sections/projects.html

@@ -5,12 +5,16 @@
 
 <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">
       {{ range .buttons }}
-      <button type="button" class="btn btn-dark" data-filter="{{ .filter }}">
+      <button type="button" class="btn btn-dark project-filtr-control" data-filter="{{ .filter }}">
         {{ .name }}
       </button>
       {{ end }}

layouts/partials/sections/publications.html

@@ -0,0 +1,30 @@
+{{ $sectionID := replace (lower .section.name) " " "-"  }}
+{{ if .section.id }}
+  {{ $sectionID = .section.id }}
+{{ end }}
+
+<div class="container-fluid anchor pb-5 publications-section" id="{{ $sectionID }}">
+  {{ 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 ml-auto text-center">
+    <div class="btn-group flex-wrap" role="pub-group" id="publication-filter-buttons">
+      {{ range .buttons }}
+      <button type="button" class="btn btn-dark pub-filtr-control" data-filter="pub-{{ .filter }}">
+        {{ .name }}
+      </button>
+      {{ end }}
+    </div>
+  </div>
+  <div class="container filtr-publications">
+    <div class="row" id="publication-card-holder">
+      {{ range .publications }}
+        {{ partial "cards/publication" . }}
+      {{ end }}
+    </div>
+  </div>
+</div>

layouts/partials/sections/recent-posts.html

@@ -3,13 +3,23 @@
   {{ $sectionID = .section.id }}
 {{ end }}
 
-<div class="container-fluid anchor pb-5 recent-posts-section" id="{{ $sectionID }}">
+{{ $numShow := 3}}
+{{ if .section.numShow }}
+  {{ $numShow = .section.numShow }}
+{{ end }}
+
+
+<div class="container-fluid anchor pb-5 recent-posts-section">
   {{ 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">
     <div class="row" id="recent-post-cards">
-      {{ range first 3 (where site.RegularPages.ByDate.Reverse "Type" "in" "posts" )}}
+      {{ range first $numShow (where site.RegularPages.ByDate.Reverse "Type" "in" "posts" )}}
         {{ partial "cards/recent-post.html" . }}
       {{ end }}
     </div>

layouts/partials/sections/skills.html

@@ -3,9 +3,13 @@
   {{ $sectionID = .section.id }}
 {{ end }}
 
-<div class="container-fluid anchor pb-5 skills-section" id="{{ $sectionID }}">
+<div class="container-fluid anchor pb-5 skills-section">
   {{ 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 d-flex-block">
     <div class="row" id="primary-skills">

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

@@ -0,0 +1,62 @@
+{{ define "header" }}
+    <link rel="stylesheet" href="{{ "/css/layouts/list.css" | relURL }}">
+    <link rel="stylesheet" href="{{ "/css/navigators/sidebar.css" | relURL}}">
+    <!--================= custom style overrides =========================-->
+    <link rel="stylesheet" href="{{ "/css/style.css" | relURL }}"/>
+
+{{ end }}
+
+{{ define "navbar" }}
+    {{ partial "navigators/navbar-2.html" . }}
+{{ end }}
+
+{{ define "sidebar" }}
+  {{ $homePage:="#" }}
+  {{ if site.IsMultiLingual }}
+    {{ $homePage = (path.Join (cond ( eq .Language.Lang "en") "" .Language.Lang) .Type) }}
+  {{ end }}
+
+  <section class="sidebar-section" id="sidebar-section">
+    <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="{{ i18n "search" }}" data-search="" id="search-box" />
+        </form>
+        <div class="sidebar-tree">
+          <ul class="tree" id="tree">
+            <li id="list-heading"><a href="{{ .Type | relLangURL }}" data-filter="all">{{ i18n .Type }}</a></li>
+            <div class="subtree taxonomy-terms">
+              {{ $context := . }}
+              {{ partial "navigators/taxonomies.html" (dict "context" $context "taxo" "tags" "title" ( humanize "tags" ) ) }}
+            </div>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </section>
+{{ end }}
+
+{{ define "content" }}
+<section class="content-section" id="content-section">
+  <div class="content container-fluid" id="content">
+    <div class="container-fluid post-card-holder" id="post-card-holder">
+      {{ $posts := where .RegularPagesRecursive "Layout" "!=" "search" }}
+      {{ $paginator := .Paginate $posts 12 }}
+      {{ range $paginator.Pages }}
+        {{ if .Layout }}
+          {{/* ignore the search.md file*/}}
+        {{ else }}
+          {{ partial "cards/post.html" . }}
+        {{ end }}
+      {{ end }}
+    </div>
+    <div class="paginator">
+      {{ template "_internal/pagination.html" . }}
+    </div>
+  </div>
+</section>
+{{ end }}
+
+{{ define "scripts" }}
+    <script src="{{ "/js/list.js" | relURL }}"></script>
+{{ end }}

package.json

@@ -8,17 +8,17 @@
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/hossainemruz/toha.git"
+    "url": "git+https://github.com/hugo-toha/toha.git"
   },
   "author": "Emruz Hossain",
   "license": "MIT",
   "bugs": {
-    "url": "https://github.com/hossainemruz/toha/issues"
+    "url": "https://github.com/hugo-toha/toha/issues"
   },
-  "homepage": "https://github.com/hossainemruz/toha#readme",
+  "homepage": "https://github.com/hugo-toha/toha#readme",
   "devDependencies": {
-    "autoprefixer": "^10.2.6",
-    "postcss": "^8.3.0",
+    "autoprefixer": "^10.4.12",
+    "postcss": "^8.4.17",
     "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/layouts/list.css

@@ -67,7 +67,6 @@
 }
 
 .paginator {
-  width: -webkit-fit-content;
   width: -moz-fit-content;
   width: fit-content;
   margin: auto;
@@ -91,7 +90,6 @@
   margin-right: auto;
   margin-top: 0.5rem;
   margin-bottom: 0.5rem;
-  width: -webkit-fit-content;
   width: -moz-fit-content;
   width: fit-content;
 }

static/css/layouts/main.css

@@ -50,17 +50,17 @@ a:hover {
 }
 
 .btn-dark {
-  background-color: #3c4858;
-  border-color: #3c4858;
-  color: #e5e9f2;
-  transition: all 0.3s ease-out;
+  background-color: #3c4858!important;
+  border-color: #3c4858!important;
+  color: #e5e9f2!important;
+  transition: all 0.3s ease-out!important;
 }
 
 .btn-dark:hover,
 .btn-dark:focus {
-  background-color: #248aaa;
-  border-color: #248aaa;
-  transition: all 0.3s ease-out;
+  background-color: #248aaa!important;
+  border-color: #248aaa!important;
+  transition: all 0.3s ease-out!important;
 }
 
 .btn-outline-info {
@@ -174,7 +174,7 @@ img.right {
   margin-right: 3px;
 }
 
-/* ====== codeblocks ====== */
+/* ====== table ====== */
 table {
   border-radius: 0.1rem;
   background: #e5e9f2;
@@ -206,12 +206,46 @@ tbody tr:hover {
   background: #c0ccda;
 }
 
+/* ====== don't apply css to tables inside gist ====== */
+.gist table {
+  border-radius: unset;
+  background: unset;
+  border: unset;
+  padding: unset;
+}
+
+.gist table tr {
+  height: unset !important;
+}
+
+.gist table th,
+td {
+  padding: unset;
+  border-left: unset;
+  border-bottom: unset;
+}
+
+.gist table thead tr {
+  background: unset;
+  color: unset;
+}
+
+.gist tbody tr:nth-child(odd) {
+  background-color: unset;
+}
+
+.gist tbody tr:hover {
+  background: unset;
+}
+
+.gist table td, .gist table tc{
+  border-right: 1px solid #eee;
+}
+
 figure {
   border: 1px solid #c0ccda;
-  height: -webkit-fit-content;
   height: -moz-fit-content;
   height: fit-content;
-  width: -webkit-fit-content;
   width: -moz-fit-content;
   width: fit-content;
   align-self: center;
@@ -276,7 +310,6 @@ mark {
 
 /* ======= Paginator ========= */
 .paginator {
-  width: -webkit-fit-content;
   width: -moz-fit-content;
   width: fit-content;
   margin: auto;
@@ -408,7 +441,8 @@ mark {
 
 @media only screen and (max-width: 576px) {
   .skills-section .container,
-  .projects-section .container {
+  .projects-section .container,
+  .publications-section .container {
     padding-left: 0.3rem;
     padding-right: 0.3rem;
   }
@@ -421,7 +455,8 @@ mark {
   .skills-section,
   .projects-section,
   .recent-posts-section,
-  .achievements-section {
+  .achievements-section,
+  .publications-section {
     padding-left: 0;
     padding-right: 0;
   }
@@ -432,16 +467,29 @@ mark {
   code {
     padding: 0px;
   }
+
+  h1 {
+    font-size: 2.2rem;
+  }
 }
 
 /* iPhoneX, iPhone 6,7,8 */
 @media only screen and (max-width: 375px) {
+  h1 {
+    font-size: 2rem;
+  }
 }
 
 /* Galaxy S5, Moto G4 */
 @media only screen and (max-width: 360px) {
+  h1 {
+    font-size: 1.8rem;
+  }
 }
 
 /* iPhone 5 or before */
 @media only screen and (max-width: 320px) {
+  h1 {
+    font-size: 1.5rem;
+  }
 }

static/css/layouts/single.css

@@ -205,6 +205,69 @@ h6 {
   padding: 10px;
 }
 
+.share-buttons .btn {
+  color: #e5e9f2 !important;
+  transition: all 0.3s ease-out !important;
+}
+
+.share-buttons .btn:hover,
+.share-buttons .btn:focus {
+  background-color: #248aaa !important;
+  border-color: #248aaa !important;
+  transition: all 0.3s ease-out !important;
+}
+
+.share-buttons .facebook-btn {
+  background-color: #4267b2 !important;
+  border-color: #4267b2 !important;
+}
+
+.share-buttons .twitter-btn {
+  background-color: #1da1f2 !important;
+  border-color: #1da1f2 !important;
+}
+
+.share-buttons .reddit-btn {
+  background-color: #ff4500 !important;
+  border-color: #ff4500 !important;
+}
+
+.share-buttons .tumblr-btn {
+  background-color: #34465d !important;
+  border-color: #34465d !important;
+}
+
+.share-buttons .pocket-btn {
+  background-color: #ef4056 !important;
+  border-color: #ef4056 !important;
+}
+
+.share-buttons .linkedin-btn {
+  background-color: #2867b2 !important;
+  border-color: #2867b2 !important;
+}
+
+.share-buttons .diaspora-btn {
+  background-color: #3c4858 !important;
+  border-color: #3c4858 !important;
+}
+
+.share-buttons .mastodon-btn {
+  background-color: #2791da !important;
+  border-color: #2791da !important;
+}
+
+.share-buttons .whatsapp-btn {
+  background-color: #4ac959 !important;
+  border-color: #4ac959 !important;
+}
+
+.share-buttons .email-btn {
+  background-color: #3c4858 !important;
+  border-color: #3c4858 !important;
+  transition: all 0.3s ease-out !important;
+}
+
 .btn-improve-page {
   text-align: right;
 }
@@ -236,6 +299,21 @@ h6 {
 #scroll-to-top.show {
   visibility: visible;
 }
+.taxonomy-terms {
+  text-align: center;
+}
+.taxonomy-terms li {
+  font-size: 0.8em;
+  list-style-type: none;
+  display: inline-block;
+  background: #248aaa;
+  margin-left: 0.2em;
+  margin-right: 0.2em;
+}
+
+.taxonomy-terms a {
+  color: #f9fafc;
+}
 
 /* ============= Device specific fixes ======= */
 
@@ -360,7 +438,6 @@ h6 {
   .toc-section {
     order: 2;
     width: 100%;
-    height: -webkit-fit-content;
     height: -moz-fit-content;
     height: fit-content;
     max-height: 0;
@@ -373,7 +450,6 @@ h6 {
     position: relative;
     /* height: fit-content; */
     flex: 100%;
-    height: -webkit-fit-content;
     height: -moz-fit-content;
     height: fit-content;
     max-height: 200vh;

static/css/navigators/navbar.css

@@ -6,8 +6,8 @@
   height: 50px;
   z-index: 99999;
   transition: all 0.4s ease-out;
-  margin: 0;
-  padding-top: 0.1rem;
+  margin: 0px;
+  padding-top: 0.4rem;
   text-align: center;
 }
 
@@ -30,6 +30,7 @@
 .initial-navbar li a:hover {
   color: #f9fafc;
   transition: all 0.3s ease-out;
+  transform: translateY(-2px);
 }
 
 .navbar-collapse {
@@ -166,7 +167,6 @@
 /* IPad Pro */
 @media (max-width: 1024px) {
   .top-navbar {
-    height: -webkit-fit-content;
     height: -moz-fit-content;
     height: fit-content;
     padding-bottom: 0px;

static/css/navigators/sidebar.css

@@ -25,7 +25,6 @@
 .sidebar-tree {
   padding-left: 1rem;
   position: relative;
-  width: -webkit-max-content;
   width: -moz-max-content;
   width: max-content;
 }
@@ -247,7 +246,6 @@ a.focused {
   .sidebar-section.hide {
     margin-top: 2rem;
     position: relative;
-    height: -webkit-fit-content;
     height: -moz-fit-content;
     height: fit-content;
     flex: none;
@@ -258,7 +256,6 @@ a.focused {
 
   .sidebar-holder {
     max-height: 0;
-    height: -webkit-fit-content;
     height: -moz-fit-content;
     height: fit-content;
     overflow: hidden;
@@ -273,10 +270,8 @@ a.focused {
 
   .sidebar {
     position: relative;
-    height: -webkit-fit-content;
     height: -moz-fit-content;
     height: fit-content;
-    max-height: -webkit-fit-content;
     max-height: -moz-fit-content;
     max-height: fit-content;
     width: 100vw;

static/css/sections/about.css

@@ -76,22 +76,25 @@
   border-bottom-left-radius: 80px;
   border-right: 0;
   transform-origin: center right;
-  -webkit-animation: circular-loading-1 1.8s linear forwards;
-          animation: circular-loading-1 1.8s linear forwards;
+  animation: circular-loading-1 1.8s linear forwards;
 }
 
 .circular-progress .circular-progress-value {
   width: 90%;
   height: 90%;
+  padding: 1rem;
   border-radius: 50%;
   background: #3c4858;
   font-size: 1rem;
   color: #f9fafc;
-  line-height: 135px;
+  line-height: initial;
   text-align: center;
   position: absolute;
   top: 5%;
   left: 5%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 
 .circular-progress.blue .circular-progress-bar {
@@ -119,67 +122,47 @@
 }
 
 .circular-progress-percentage-50 {
-  -webkit-animation: circular-loading-50 0s linear forwards 1.8s;
-          animation: circular-loading-50 0s linear forwards 1.8s;
+  animation: circular-loading-50 0s linear forwards 1.8s;
 }
 
 .circular-progress-percentage-55 {
-  -webkit-animation: circular-loading-55 0.18s linear forwards 1.8s;
-          animation: circular-loading-55 0.18s linear forwards 1.8s;
+  animation: circular-loading-55 0.18s linear forwards 1.8s;
 }
 
 .circular-progress-percentage-60 {
-  -webkit-animation: circular-loading-60 0.36s linear forwards 1.8s;
-          animation: circular-loading-60 0.36s linear forwards 1.8s;
+  animation: circular-loading-60 0.36s linear forwards 1.8s;
 }
 
 .circular-progress-percentage-65 {
-  -webkit-animation: circular-loading-65 0.54s linear forwards 1.8s;
-          animation: circular-loading-65 0.54s linear forwards 1.8s;
+  animation: circular-loading-65 0.54s linear forwards 1.8s;
 }
 
 .circular-progress-percentage-70 {
-  -webkit-animation: circular-loading-70 0.72s linear forwards 1.8s;
-          animation: circular-loading-70 0.72s linear forwards 1.8s;
+  animation: circular-loading-70 0.72s linear forwards 1.8s;
 }
 
 .circular-progress-percentage-75 {
-  -webkit-animation: circular-loading-75 0.9s linear forwards 1.8s;
-          animation: circular-loading-75 0.9s linear forwards 1.8s;
+  animation: circular-loading-75 0.9s linear forwards 1.8s;
 }
 
 .circular-progress-percentage-80 {
-  -webkit-animation: circular-loading-80 1.08s linear forwards 1.8s;
-          animation: circular-loading-80 1.08s linear forwards 1.8s;
+  animation: circular-loading-80 1.08s linear forwards 1.8s;
 }
 
 .circular-progress-percentage-85 {
-  -webkit-animation: circular-loading-85 1.26s linear forwards 1.8s;
-          animation: circular-loading-85 1.26s linear forwards 1.8s;
+  animation: circular-loading-85 1.26s linear forwards 1.8s;
 }
 
 .circular-progress-percentage-90 {
-  -webkit-animation: circular-loading-90 1.44s linear forwards 1.8s;
-          animation: circular-loading-90 1.44s linear forwards 1.8s;
+  animation: circular-loading-90 1.44s linear forwards 1.8s;
 }
 
 .circular-progress-percentage-95 {
-  -webkit-animation: circular-loading-95 1.62s linear forwards 1.8s;
-          animation: circular-loading-95 1.62s linear forwards 1.8s;
+  animation: circular-loading-95 1.62s linear forwards 1.8s;
 }
 
 .circular-progress-percentage-100 {
-  -webkit-animation: circular-loading-100 1.8s linear forwards 1.8s;
-          animation: circular-loading-100 1.8s linear forwards 1.8s;
-}
-
-@-webkit-keyframes circular-loading-50 {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(0deg);
-  }
+  animation: circular-loading-100 1.8s linear forwards 1.8s;
 }
 
 @keyframes circular-loading-50 {
@@ -191,15 +174,6 @@
   }
 }
 
-@-webkit-keyframes circular-loading-55 {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(18deg);
-  }
-}
-
 @keyframes circular-loading-55 {
   0% {
     transform: rotate(0deg);
@@ -209,15 +183,6 @@
   }
 }
 
-@-webkit-keyframes circular-loading-60 {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(36deg);
-  }
-}
-
 @keyframes circular-loading-60 {
   0% {
     transform: rotate(0deg);
@@ -227,15 +192,6 @@
   }
 }
 
-@-webkit-keyframes circular-loading-65 {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(54deg);
-  }
-}
-
 @keyframes circular-loading-65 {
   0% {
     transform: rotate(0deg);
@@ -245,15 +201,6 @@
   }
 }
 
-@-webkit-keyframes circular-loading-70 {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(72deg);
-  }
-}
-
 @keyframes circular-loading-70 {
   0% {
     transform: rotate(0deg);
@@ -263,15 +210,6 @@
   }
 }
 
-@-webkit-keyframes circular-loading-75 {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(90deg);
-  }
-}
-
 @keyframes circular-loading-75 {
   0% {
     transform: rotate(0deg);
@@ -281,15 +219,6 @@
   }
 }
 
-@-webkit-keyframes circular-loading-80 {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(108deg);
-  }
-}
-
 @keyframes circular-loading-80 {
   0% {
     transform: rotate(0deg);
@@ -299,15 +228,6 @@
   }
 }
 
-@-webkit-keyframes circular-loading-85 {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(126deg);
-  }
-}
-
 @keyframes circular-loading-85 {
   0% {
     transform: rotate(0deg);
@@ -317,15 +237,6 @@
   }
 }
 
-@-webkit-keyframes circular-loading-90 {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(144deg);
-  }
-}
-
 @keyframes circular-loading-90 {
   0% {
     transform: rotate(0deg);
@@ -335,15 +246,6 @@
   }
 }
 
-@-webkit-keyframes circular-loading-95 {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(162deg);
-  }
-}
-
 @keyframes circular-loading-95 {
   0% {
     transform: rotate(0deg);
@@ -353,15 +255,6 @@
   }
 }
 
-@-webkit-keyframes circular-loading-100 {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(180deg);
-  }
-}
-
 @keyframes circular-loading-100 {
   0% {
     transform: rotate(0deg);
@@ -371,15 +264,6 @@
   }
 }
 
-@-webkit-keyframes circular-loading-1 {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(180deg);
-  }
-}
-
 @keyframes circular-loading-1 {
   0% {
     transform: rotate(0deg);
@@ -389,15 +273,6 @@
   }
 }
 
-@-webkit-keyframes circular-loading-2 {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(144deg);
-  }
-}
-
 @keyframes circular-loading-2 {
   0% {
     transform: rotate(0deg);
@@ -407,15 +282,6 @@
   }
 }
 
-@-webkit-keyframes circular-loading-3 {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(90deg);
-  }
-}
-
 @keyframes circular-loading-3 {
   0% {
     transform: rotate(0deg);
@@ -425,15 +291,6 @@
   }
 }
 
-@-webkit-keyframes circular-loading-4 {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(36deg);
-  }
-}
-
 @keyframes circular-loading-4 {
   0% {
     transform: rotate(0deg);
@@ -443,15 +300,6 @@
   }
 }
 
-@-webkit-keyframes circular-loading-5 {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(126deg);
-  }
-}
-
 @keyframes circular-loading-5 {
   0% {
     transform: rotate(0deg);
@@ -496,11 +344,24 @@
   .about-section.container {
     max-width: 100%;
   }
+  
+  .circular-progress {
+    width: 135px;
+    height: 135px;
+  }
 }
 
 /* Small devices (landscape phones, 576px and up) */
 
 @media only screen and (max-width: 576px) {
+  .circular-progress {
+    width: 150px;
+    height: 150px;
+  }
+
+  .circular-progress .circular-progress-value {
+    font-size: 1rem;
+  }
 }
 
 /* iPhoneX, iPhone 6,7,8 */
@@ -513,4 +374,12 @@
 
 /* iPhone 5 or before */
 @media only screen and (max-width: 320px) {
+  .col-6 {
+    flex: auto;
+    max-width: 100%;
+  }
+
+  .social-link {
+    flex-wrap: wrap;
+  }
 }

static/css/sections/accomplishments.css

@@ -1,3 +1,9 @@
+.accomplishments-section h1 > span{
+  margin-top: -55px;  /* Size of fixed header */
+  padding-bottom:55px; 
+  display: block; 
+}
+
 .accomplishments-section .card {
   background: #fff;
   border-top: 2px solid #248aaa;

static/css/sections/achievements.css

@@ -2,6 +2,12 @@
   padding-top: 0.5rem;
 }
 
+.achievements-section h1 > span{
+  margin-top: -55px;  /* Size of fixed header */
+  padding-bottom:55px; 
+  display: block; 
+}
+
 #gallery .achievement-entry {
   cursor: pointer;
   margin-top: 5px;

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 {
@@ -19,6 +21,12 @@
   text-align: right;
 }
 
+.education-section h1 > span{
+  margin-top: -55px;  /* Size of fixed header */
+  padding-bottom:55px;
+  display: block;
+}
+
 .education-section .icon {
   width: 2rem;
   padding-left: 0;
@@ -36,7 +44,7 @@
 }
 
 .education-section .education-info-table tr:first-child .hline {
-  height: 60%;
+  height: 65%;
   top: auto;
 }
 
@@ -102,7 +110,9 @@
   border: none;
   color: #212529;
 }
-
+.education-section .taken-courses th.course-name-header{
+  width: 50%;
+}
 .education-section .taken-courses .hidden-course {
   display: none;
   transition: all 1s ease-out;

static/css/sections/experiences.css

@@ -6,6 +6,12 @@
   margin-top: 1.5rem !important;
 }
 
+.experiences-section h1 > span{
+  margin-top: -55px;  /* Size of fixed header */
+  padding-bottom:55px; 
+  display: block; 
+}
+
 .experiences-section ul {
   padding-left: 1rem;
 }

static/css/sections/home.css

@@ -19,7 +19,7 @@
 }
 
 /*
-  Resolves https://github.com/hossainemruz/toha/issues/70
+  Resolves https://github.com/hugo-toha/toha/issues/70
 
   fixed attached images use the whole <body> size. On mobile this can get really
   tall which blows your image out. Setting the attachment back to scroll allows
@@ -45,7 +45,7 @@
   margin-bottom: 10px;
 }
 
-.home .greeting {
+.home .greeting, .home .greeting-subtitle {
   color: #f9fafc;
 }
 
@@ -66,24 +66,7 @@
 }
 
 .bounce {
-  -webkit-animation: bounce 2s infinite;
-          animation: bounce 2s infinite;
-}
-
-@-webkit-keyframes bounce {
-  0%,
-  20%,
-  50%,
-  80%,
-  100% {
-    transform: translateY(0);
-  }
-  40% {
-    transform: translateY(-30px);
-  }
-  60% {
-    transform: translateY(-15px);
-  }
+  animation: bounce 2s infinite;
 }
 
 @keyframes bounce {

static/css/sections/publications.css

@@ -0,0 +1,147 @@
+.publications-section h1 > span{
+  margin-top: -55px;  /* Size of fixed header */
+  padding-bottom:55px; 
+  display: block; 
+}
+
+.publications-section .card {
+  background: #fff;
+  border-top: 2px solid #248aaa;
+}
+.publications-section .card .card-header {
+  background: none;
+  border: none;
+  display: flex;
+  flex-direction: column;
+}
+
+.publications-section .card .card-header .sub-title {
+  color: #8392a5;
+  margin-top: 0.4rem;
+}
+
+.publications-section .card .sub-title :nth-child(2) {
+  float: right !important;
+}
+
+.publications-section .card .card-body {
+  padding: 0;
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+
+.publications-section .card .card-footer {
+  background: #fff;
+  border: none;
+  padding: 0;
+  padding-left: 1rem;
+  padding-right: 1rem;
+  padding-bottom: 0.3rem;
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+}
+
+.publications-section .card .card-footer .tags {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: flex-start;
+}
+.publications-section .card .card-footer .tags .badge {
+  cursor: auto;
+}
+
+.filtr-publications {
+  padding: 1rem !important;
+}
+
+.publications-section .btn-group{
+  justify-content: center;
+}
+
+/* ============= Device specific fixes ======= */
+
+/* Large screens such as TV */
+@media only screen and (min-width: 1824px) {
+}
+
+/* Extra large devices (large desktops, 1200px and up) */
+
+@media (max-width: 1400px) {
+}
+
+@media (max-width: 1200px) {
+}
+
+/* IPad Pro */
+@media (max-width: 1024px) {
+  .publications-section {
+    padding-left: 0;
+    padding-right: 0;
+    width: 100%;
+  }
+  .publications-section .container {
+    max-width: 100%;
+  }
+  .publicationss-section .filtr-publications {
+    padding: 0;
+  }
+  .publicationss-section .pub-filtr-item {
+    padding-left: 0.2rem;
+    padding-right: 0.2rem;
+  }
+}
+
+/*  Large devices (desktops, 992px and up) */
+
+@media (max-width: 992px) {
+}
+
+/* Medium devices (tablets, 768px and up) */
+
+@media only screen and (max-width: 768px) {
+  .publications-section {
+    padding-left: 0;
+    padding-right: 0;
+    width: 100%;
+  }
+  .publications-section .container {
+    max-width: 100%;
+  }
+  .publications-section .filtr-publications {
+    padding: 0;
+  }
+  .publications-section .pub-filtr-item {
+    padding-left: 0.2rem;
+    padding-right: 0.2rem;
+    flex: 100%;
+  }
+}
+
+/* Small devices (landscape phones, 576px and up) */
+
+@media only screen and (max-width: 576px) {
+  .publications-section .btn {
+    margin-top: 0.3125rem;
+  }
+  .publications-section .pub-filtr-item {
+    flex: 100%;
+    max-width: 100%;
+  }
+  .publications-section .card .card-footer .tags {
+    flex: 100%;
+  }
+}
+
+/* iPhoneX, iPhone 6,7,8 */
+@media only screen and (max-width: 375px) {
+}
+
+/* Galaxy S5, Moto G4 */
+@media only screen and (max-width: 360px) {
+}
+
+/* iPhone 5 or before */
+@media only screen and (max-width: 320px) {
+}

static/css/sections/recent-posts.css

@@ -2,6 +2,12 @@
   padding-top: 1rem;
 }
 
+.recent-posts-section h1 > span{
+  margin-top: -55px;  /* Size of fixed header */
+  padding-bottom:55px; 
+  display: block; 
+}
+
 .recent-posts-section .card .card-footer span {
   font-size: 10pt;
   color: #6c757d !important;

static/css/sections/skills.css

@@ -1,6 +1,5 @@
 .skills-section .card .card-head {
   background-color: #f9fafc;
-  height: -webkit-fit-content;
   height: -moz-fit-content;
   height: fit-content;
   padding: 0.7rem;
@@ -8,6 +7,12 @@
   border-bottom: 0.0625rem solid rgba(0, 0, 0, 0.125);
 }
 
+.skills-section h1 > span{
+  margin-top: -55px;  /* Size of fixed header */
+  padding-bottom:55px; 
+  display: block; 
+}
+
 .skills-section .skill-card-link {
   text-decoration: none;
 }
@@ -19,6 +24,7 @@
 .skills-section .card {
   margin-top: 0.5rem;
   margin-bottom: 0.5rem;
+  height: 100%;
 }
 
 .skills-section .card .card-body {
@@ -57,7 +63,7 @@
     padding-right: 0;
   }
   .skills-section .container {
-    max-width: 100%;
+    max-width: 95%;
   }
 }