Merge branch 'hugo-toha:main' into main

.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@v2.4.0
 
       - name: Setup Node
-        uses: actions/setup-node@v2.4.1
+        uses: actions/setup-node@v2.5.1
         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.1
+        uses: peter-evans/create-pull-request@v3.12.1
         with:
           branch: autoprefixer
           branch-suffix: timestamp

.github/workflows/codeql-analysis.yml

@@ -39,7 +39,7 @@ jobs:
 
     steps:
     - name: Checkout repository
-      uses: actions/checkout@v2
+      uses: actions/checkout@v2.4.0
 
     # Initializes the CodeQL tools for scanning.
     - name: Initialize CodeQL

.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.18.1
       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@v2.4.0
     # run markdown linter
     - uses: gaurav-nelson/github-action-markdown-link-check@1.0.13

.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: ID!) {
+                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: ID!) {
+              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: ID!) {
+                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: ID!) {
+              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: ID!) {
+              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)

layouts/_default/single.html

@@ -48,7 +48,7 @@
         <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">
@@ -155,10 +155,27 @@
       <hr />
         {{ partial "navigators/next-prev-navigator.html" . }}
       <hr />
-      <!-- Add Disqus forum  -->
+
-      {{ if site.DisqusShortname }}
+      <!----- Add comment support  ----->
-          {{ partial "disqus.html" . }}
+      {{ with site.Params.features.comment }}
+        {{ if .enable }}
+          <!-- Add Disqus forum  -->
+          {{ if .disqus.shortName }}
+              {{ partial "disqus.html" . }}
+          <!-- Add valine -->
+          {{ else if .valine }}
+              {{ partial "valine.html" . }}
+          <!-- Add utteranc -->
+          {{ else if .utteranc }}
+              {{ partial "utteranc.html" . }}
+          {{ end }}
+        {{ end }}
       {{ end }}
+      <!-- Keep backward compatibility with old config.yaml -->
+      {{ if site.DisqusShortname }}
+        {{ partial "disqus.html" . }}
+      {{ end }}
+
       </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" }}
           {{ 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/disqus.html

@@ -1,3 +1,8 @@
+{{ $disqusShortName := site.DisqusShortname }}
+{{ if site.Params.features.comment.disqus.shortName }}
+  {{ $disqusShortName = site.Params.features.comment.disqus.shortName }}
+{{ end }}
+
 <div id="disqus_thread"></div>
 <script type="text/javascript">
   (function () {
@@ -8,7 +13,7 @@
     var dsq = document.createElement("script");
     dsq.type = "text/javascript";
     dsq.async = true;
-    var disqus_shortname = "{{ site.DisqusShortname }}";
+    var disqus_shortname = "{{ $disqusShortName }}";
     dsq.src = "//" + disqus_shortname + ".disqus.com/embed.js";
     (
       document.getElementsByTagName("head")[0] ||

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,6 +27,11 @@
     {{ $sections = (index site.Data site.Language.Lang).sections }}
   {{ end }}
 
+  {{ $customMenus := site.Params.customMenus }}
+  {{ if (index site.Data site.Language.Lang).site.customMenus }}
+    {{ $customMenus = (index site.Data site.Language.Lang).site.customMenus }}
+  {{ end }}
+
   {{ $copyrightNotice := "© 2021 Copyright."}}
   {{ if (index site.Data site.Language.Lang).site }}
     {{ $siteConfig := (index site.Data site.Language.Lang).site }}
@@ -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,23 @@
           <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 }}
+                <li><span>{{ title $key }}: </span> <span>{{ $value }}</span></li>
+              {{ end }}
             {{ end }}
           </ul>
         </div>
@@ -128,6 +159,7 @@
               <input type='hidden' name='schedule_type' value='1' />
               <small id="emailHelp" class="form-text text-muted">{{ i18n "newsletter_warning" }}</small>
               <button type="submit" class="btn btn-info"> {{ i18n "submit" }} </button>
+              </div>
               </form>
             {{ end }}
           </div>

layouts/partials/header.html

@@ -8,9 +8,10 @@
 <link rel="stylesheet" href="{{ "/css/navigators/navbar.css" | relURL }}"/>
 <link rel="stylesheet" href="{{ "/css/plyr.css" | relURL }}"/>
 <link rel="stylesheet" href="{{ "/css/flag-icon.min.css" | relURL }}"/>
+<link rel="stylesheet" href="{{ "/css/katex.min.css" | relURL }}">
 
 <!--=================== cdn ==============================-->
-<link href="https://fonts.googleapis.com/css2?family=Muli:wght@300;400;500;600" rel="stylesheet">
+<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Muli:wght@300;400;500;600">
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" />
 
 <!--================= fab-icon =========================-->

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

@@ -6,14 +6,14 @@
 <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 }}">
+        <span class="flag-icon flag-icon-{{$countryCode}}"></span>
         {{ 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 }}">
+            <span class="flag-icon flag-icon-{{$countryCode}}"></span>
             {{ .Language.LanguageName }}
         </a>
         {{ end }}

layouts/partials/navigators/navbar.html

@@ -1,6 +1,7 @@
 {{/*  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 }}
@@ -71,26 +72,26 @@
           <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 }}
@@ -114,9 +115,11 @@
           </li>
         {{ end }}
         {{ range $customMenus }}
-          <li class="nav-item">
+            {{ if (not .hideFromNavbar) }}
-            <a class="nav-link" href="{{ .url }}">{{ .name }}</a>
+              <li class="nav-item">
-          </li>
+                <a class="nav-link" href="{{ .url }}">{{ .name }}</a>
+              </li>
+            {{ end }}
         {{ end }}
         {{ if .IsTranslated }}
           {{ partial "navigators/lang-selector.html" . }}

layouts/partials/scripts.html

@@ -5,3 +5,6 @@
 <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>
+
+<script type="text/javascript" defer src="{{ "/js/katex.min.js" | relURL }}"></script>
+<script type="text/javascript" defer src="{{ "/js/auto-render.min.js" | relURL }}" onload="renderMathInElement(document.body);"></script>

layouts/partials/sections/about.html

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

layouts/partials/sections/accomplishments.html

@@ -3,9 +3,13 @@
   {{ $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">

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/education-alt.html

@@ -4,9 +4,13 @@
 {{ end }}
 
 <div class="container-fluid anchor pb-5 education-section education-alt" id="{{ $sectionID }}">
-    {{ if not (.section.hideTitle) }}
+  {{ if not (.section.hideTitle) }}
-    <h1 class="text-center">{{ .section.name }}</h1>
+    <h1 class="text-center">
-    {{ end }}
+        <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">
@@ -53,6 +57,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 +70,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 +81,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 }}"

layouts/partials/sections/education.html

@@ -3,10 +3,14 @@
 {{ $sectionID = .section.id }}
 {{ end }}
 
-<div class="container-fluid anchor pb-5 education-section" id="{{ $sectionID }}">
+<div class="container-fluid anchor pb-5 education-section">
-    {{ if not (.section.hideTitle) }}
+  {{ if not (.section.hideTitle) }}
-    <h1 class="text-center">{{ .section.name }}</h1>
+    <h1 class="text-center">
-    {{ end }}
+        <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">
@@ -53,19 +57,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 +81,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 }}"

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/projects.html

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

layouts/partials/sections/recent-posts.html

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

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/partials/utteranc.html

@@ -0,0 +1,22 @@
+{{ $repo := site.Params.features.comment.utteranc.repo }}
+{{ $issueTerm := site.Params.features.comment.utteranc.issueTerm }}
+{{ $theme := site.Params.features.comment.utteranc.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>

layouts/partials/valine.html

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

package-lock.json

@@ -8,8 +8,8 @@
       "version": "1.0.0",
       "license": "MIT",
       "devDependencies": {
-        "autoprefixer": "^10.3.6",
+        "autoprefixer": "^10.4.2",
-        "postcss": "^8.3.8",
+        "postcss": "^8.4.6",
         "postcss-cli": "^8.3.1"
       }
     },
@@ -104,17 +104,17 @@
       }
     },
     "node_modules/autoprefixer": {
-      "version": "10.3.6",
+      "version": "10.4.2",
-      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.3.6.tgz",
+      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.2.tgz",
-      "integrity": "sha512-3bDjTfF0MfZntwVCSd18XAT2Zndufh3Mep+mafbzdIQEeWbncVRUVDjH8/EPANV9Hq40seJ24QcYAyhUsFz7gQ==",
+      "integrity": "sha512-9fOPpHKuDW1w/0EKfRmVnxTDt8166MAnLI3mgZ1JCnhNtYWxcJ6Ud5CO/AVOZi/AvFa8DY9RTy3h3+tFBlrrdQ==",
       "dev": true,
       "dependencies": {
-        "browserslist": "^4.17.1",
+        "browserslist": "^4.19.1",
-        "caniuse-lite": "^1.0.30001260",
+        "caniuse-lite": "^1.0.30001297",
-        "fraction.js": "^4.1.1",
+        "fraction.js": "^4.1.2",
-        "nanocolors": "^0.2.8",
         "normalize-range": "^0.1.2",
-        "postcss-value-parser": "^4.1.0"
+        "picocolors": "^1.0.0",
+        "postcss-value-parser": "^4.2.0"
       },
       "bin": {
         "autoprefixer": "bin/autoprefixer"
@@ -130,12 +130,6 @@
         "postcss": "^8.1.0"
       }
     },
-    "node_modules/autoprefixer/node_modules/nanocolors": {
-      "version": "0.2.11",
-      "resolved": "https://registry.npmjs.org/nanocolors/-/nanocolors-0.2.11.tgz",
-      "integrity": "sha512-83ttyvfJj66dKMadWfBkEUOEDFfRc8FpzTJvh1MySR/pzWFmFikTQZGOV6kHZRz7yR/heiQ1y/MHBBN5P/e7WQ==",
-      "dev": true
-    },
     "node_modules/binary-extensions": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
@@ -158,16 +152,16 @@
       }
     },
     "node_modules/browserslist": {
-      "version": "4.17.1",
+      "version": "4.19.1",
-      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.17.1.tgz",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.19.1.tgz",
-      "integrity": "sha512-aLD0ZMDSnF4lUt4ZDNgqi5BUn9BZ7YdQdI/cYlILrhdSSZJLU9aNZoD5/NBmM4SK34APB2e83MOsRt1EnkuyaQ==",
+      "integrity": "sha512-u2tbbG5PdKRTUoctO3NBD8FQ5HdPh1ZXPHzp1rwaa5jTc+RV9/+RlWiAIKmjRPQF+xbGM9Kklj5bZQFa2s/38A==",
       "dev": true,
       "dependencies": {
-        "caniuse-lite": "^1.0.30001259",
+        "caniuse-lite": "^1.0.30001286",
-        "electron-to-chromium": "^1.3.846",
+        "electron-to-chromium": "^1.4.17",
         "escalade": "^3.1.1",
-        "nanocolors": "^0.1.5",
+        "node-releases": "^2.0.1",
-        "node-releases": "^1.1.76"
+        "picocolors": "^1.0.0"
       },
       "bin": {
         "browserslist": "cli.js"
@@ -181,13 +175,10 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001260",
+      "version": "1.0.30001299",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001260.tgz",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001299.tgz",
-      "integrity": "sha512-Fhjc/k8725ItmrvW5QomzxLeojewxvqiYCKeFcfFEhut28IVLdpHU19dneOmltZQIE5HNbawj1HYD+1f2bM1Dg==",
+      "integrity": "sha512-iujN4+x7QzqA2NCSrS5VUy+4gLmRd4xv6vbBBsmfVqTx8bLAD8097euLqQgKxSVLvxjSDcvF1T/i9ocgnUFexw==",
       "dev": true,
-      "dependencies": {
-        "nanocolors": "^0.1.0"
-      },
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/browserslist"
@@ -287,9 +278,9 @@
       }
     },
     "node_modules/electron-to-chromium": {
-      "version": "1.3.849",
+      "version": "1.4.33",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.849.tgz",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.33.tgz",
-      "integrity": "sha512-RweyW60HPOqIcxoKTGr38Yvtf2aliSUqX8dB3e9geJ0Bno0YLjcOX5F7/DPVloBkJWaPZ7xOM1A0Yme2T1A34w==",
+      "integrity": "sha512-OVK1Ad3pHnmuXPhEfq85X8vUKr1UPNHryBnbKnyLcAfh8dPwoFjoDhDlP5KpPJIiymvSucZs48UBrE1250IxOw==",
       "dev": true
     },
     "node_modules/emoji-regex": {
@@ -345,9 +336,9 @@
       }
     },
     "node_modules/fraction.js": {
-      "version": "4.1.1",
+      "version": "4.1.2",
-      "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.1.1.tgz",
+      "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.1.2.tgz",
-      "integrity": "sha512-MHOhvvxHTfRFpF1geTK9czMIZ6xclsEor2wkIGYYq+PxcQqT7vStJqjhe6S1TenZrMZzo+wlqOufBDVepUEgPg==",
+      "integrity": "sha512-o2RiJQ6DZaR/5+Si0qJUIy637QMRudSi9kU/FFzx9EZazrIdnBgpU+3sEWCxAVhH2RtxW2Oz+T4p2o8uOPVcgA==",
       "dev": true,
       "engines": {
         "node": "*"
@@ -611,16 +602,10 @@
         "node": ">=8.6"
       }
     },
-    "node_modules/nanocolors": {
-      "version": "0.1.12",
-      "resolved": "https://registry.npmjs.org/nanocolors/-/nanocolors-0.1.12.tgz",
-      "integrity": "sha512-2nMHqg1x5PU+unxX7PGY7AuYxl2qDx7PSrTRjizr8sxdd3l/3hBuWWaki62qmtYm2U5i4Z5E7GbjlyDFhs9/EQ==",
-      "dev": true
-    },
     "node_modules/nanoid": {
-      "version": "3.1.25",
+      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.1.25.tgz",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.2.0.tgz",
-      "integrity": "sha512-rdwtIXaXCLFAQbnfqDRnI6jaRHp9fTcYBjtFKE8eezcZ7LuLjhUaQGNeMXf1HmRoCH32CLz6XwX0TtxEOS/A3Q==",
+      "integrity": "sha512-fmsZYa9lpn69Ad5eDn7FMcnnSR+8R34W9qJEijxYhTbfOWzr22n1QxCMzXLK+ODyW2973V3Fux959iQoUxzUIA==",
       "dev": true,
       "bin": {
         "nanoid": "bin/nanoid.cjs"
@@ -630,9 +615,9 @@
       }
     },
     "node_modules/node-releases": {
-      "version": "1.1.76",
+      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.76.tgz",
+      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.1.tgz",
-      "integrity": "sha512-9/IECtNr8dXNmPWmFXepT0/7o5eolGesHUa3mtr0KlgnCvnZxwh2qensKL42JJY2vQKC3nIBXetFAqR+PW1CmA==",
+      "integrity": "sha512-CqyzN6z7Q6aMeF/ktcMVTzhAHCEpf8SOarwpzpf8pNBY2k5/oM34UHldUwp8VKI7uxct2HxSRdJjBaZeESzcxA==",
       "dev": true
     },
     "node_modules/normalize-path": {
@@ -662,6 +647,12 @@
         "node": ">=8"
       }
     },
+    "node_modules/picocolors": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
+      "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==",
+      "dev": true
+    },
     "node_modules/picomatch": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.0.tgz",
@@ -684,14 +675,14 @@
       }
     },
     "node_modules/postcss": {
-      "version": "8.3.8",
+      "version": "8.4.6",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.3.8.tgz",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.6.tgz",
-      "integrity": "sha512-GT5bTjjZnwDifajzczOC+r3FI3Cu+PgPvrsjhQdRqa2kTJ4968/X9CUce9xttIB0xOs5c6xf0TCWZo/y9lF6bA==",
+      "integrity": "sha512-OovjwIzs9Te46vlEx7+uXB0PLijpwjXGKXjVGGPIGubGpq7uh5Xgf6D6FiJ/SzJMBosHDp6a2hiXOS97iBXcaA==",
       "dev": true,
       "dependencies": {
-        "nanocolors": "^0.2.2",
+        "nanoid": "^3.2.0",
-        "nanoid": "^3.1.25",
+        "picocolors": "^1.0.0",
-        "source-map-js": "^0.6.2"
+        "source-map-js": "^1.0.2"
       },
       "engines": {
         "node": "^10 || ^12 || >=14"
@@ -781,15 +772,9 @@
       }
     },
     "node_modules/postcss-value-parser": {
-      "version": "4.1.0",
+      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.1.0.tgz",
+      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
-      "integrity": "sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ==",
+      "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
-      "dev": true
-    },
-    "node_modules/postcss/node_modules/nanocolors": {
-      "version": "0.2.11",
-      "resolved": "https://registry.npmjs.org/nanocolors/-/nanocolors-0.2.11.tgz",
-      "integrity": "sha512-83ttyvfJj66dKMadWfBkEUOEDFfRc8FpzTJvh1MySR/pzWFmFikTQZGOV6kHZRz7yR/heiQ1y/MHBBN5P/e7WQ==",
       "dev": true
     },
     "node_modules/pretty-hrtime": {
@@ -903,9 +888,9 @@
       }
     },
     "node_modules/source-map-js": {
-      "version": "0.6.2",
+      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-0.6.2.tgz",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
-      "integrity": "sha512-/3GptzWzu0+0MBQFrDKzw/DvvMTUORvgY6k6jd/VS6iCR4RDTKWH6v6WPwQoUO8667uQEf9Oe38DxAYWY5F/Ug==",
+      "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==",
       "dev": true,
       "engines": {
         "node": ">=0.10.0"
@@ -1098,25 +1083,17 @@
       "dev": true
     },
     "autoprefixer": {
-      "version": "10.3.6",
+      "version": "10.4.2",
-      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.3.6.tgz",
+      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.2.tgz",
-      "integrity": "sha512-3bDjTfF0MfZntwVCSd18XAT2Zndufh3Mep+mafbzdIQEeWbncVRUVDjH8/EPANV9Hq40seJ24QcYAyhUsFz7gQ==",
+      "integrity": "sha512-9fOPpHKuDW1w/0EKfRmVnxTDt8166MAnLI3mgZ1JCnhNtYWxcJ6Ud5CO/AVOZi/AvFa8DY9RTy3h3+tFBlrrdQ==",
       "dev": true,
       "requires": {
-        "browserslist": "^4.17.1",
+        "browserslist": "^4.19.1",
-        "caniuse-lite": "^1.0.30001260",
+        "caniuse-lite": "^1.0.30001297",
-        "fraction.js": "^4.1.1",
+        "fraction.js": "^4.1.2",
-        "nanocolors": "^0.2.8",
         "normalize-range": "^0.1.2",
-        "postcss-value-parser": "^4.1.0"
+        "picocolors": "^1.0.0",
-      },
+        "postcss-value-parser": "^4.2.0"
-      "dependencies": {
-        "nanocolors": {
-          "version": "0.2.11",
-          "resolved": "https://registry.npmjs.org/nanocolors/-/nanocolors-0.2.11.tgz",
-          "integrity": "sha512-83ttyvfJj66dKMadWfBkEUOEDFfRc8FpzTJvh1MySR/pzWFmFikTQZGOV6kHZRz7yR/heiQ1y/MHBBN5P/e7WQ==",
-          "dev": true
-        }
       }
     },
     "binary-extensions": {
@@ -1135,26 +1112,23 @@
       }
     },
     "browserslist": {
-      "version": "4.17.1",
+      "version": "4.19.1",
-      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.17.1.tgz",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.19.1.tgz",
-      "integrity": "sha512-aLD0ZMDSnF4lUt4ZDNgqi5BUn9BZ7YdQdI/cYlILrhdSSZJLU9aNZoD5/NBmM4SK34APB2e83MOsRt1EnkuyaQ==",
+      "integrity": "sha512-u2tbbG5PdKRTUoctO3NBD8FQ5HdPh1ZXPHzp1rwaa5jTc+RV9/+RlWiAIKmjRPQF+xbGM9Kklj5bZQFa2s/38A==",
       "dev": true,
       "requires": {
-        "caniuse-lite": "^1.0.30001259",
+        "caniuse-lite": "^1.0.30001286",
-        "electron-to-chromium": "^1.3.846",
+        "electron-to-chromium": "^1.4.17",
         "escalade": "^3.1.1",
-        "nanocolors": "^0.1.5",
+        "node-releases": "^2.0.1",
-        "node-releases": "^1.1.76"
+        "picocolors": "^1.0.0"
       }
     },
     "caniuse-lite": {
-      "version": "1.0.30001260",
+      "version": "1.0.30001299",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001260.tgz",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001299.tgz",
-      "integrity": "sha512-Fhjc/k8725ItmrvW5QomzxLeojewxvqiYCKeFcfFEhut28IVLdpHU19dneOmltZQIE5HNbawj1HYD+1f2bM1Dg==",
+      "integrity": "sha512-iujN4+x7QzqA2NCSrS5VUy+4gLmRd4xv6vbBBsmfVqTx8bLAD8097euLqQgKxSVLvxjSDcvF1T/i9ocgnUFexw==",
-      "dev": true,
+      "dev": true
-      "requires": {
-        "nanocolors": "^0.1.0"
-      }
     },
     "chalk": {
       "version": "4.1.2",
@@ -1230,9 +1204,9 @@
       }
     },
     "electron-to-chromium": {
-      "version": "1.3.849",
+      "version": "1.4.33",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.849.tgz",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.33.tgz",
-      "integrity": "sha512-RweyW60HPOqIcxoKTGr38Yvtf2aliSUqX8dB3e9geJ0Bno0YLjcOX5F7/DPVloBkJWaPZ7xOM1A0Yme2T1A34w==",
+      "integrity": "sha512-OVK1Ad3pHnmuXPhEfq85X8vUKr1UPNHryBnbKnyLcAfh8dPwoFjoDhDlP5KpPJIiymvSucZs48UBrE1250IxOw==",
       "dev": true
     },
     "emoji-regex": {
@@ -1279,9 +1253,9 @@
       }
     },
     "fraction.js": {
-      "version": "4.1.1",
+      "version": "4.1.2",
-      "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.1.1.tgz",
+      "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.1.2.tgz",
-      "integrity": "sha512-MHOhvvxHTfRFpF1geTK9czMIZ6xclsEor2wkIGYYq+PxcQqT7vStJqjhe6S1TenZrMZzo+wlqOufBDVepUEgPg==",
+      "integrity": "sha512-o2RiJQ6DZaR/5+Si0qJUIy637QMRudSi9kU/FFzx9EZazrIdnBgpU+3sEWCxAVhH2RtxW2Oz+T4p2o8uOPVcgA==",
       "dev": true
     },
     "fs-extra": {
@@ -1472,22 +1446,16 @@
         "picomatch": "^2.2.3"
       }
     },
-    "nanocolors": {
-      "version": "0.1.12",
-      "resolved": "https://registry.npmjs.org/nanocolors/-/nanocolors-0.1.12.tgz",
-      "integrity": "sha512-2nMHqg1x5PU+unxX7PGY7AuYxl2qDx7PSrTRjizr8sxdd3l/3hBuWWaki62qmtYm2U5i4Z5E7GbjlyDFhs9/EQ==",
-      "dev": true
-    },
     "nanoid": {
-      "version": "3.1.25",
+      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.1.25.tgz",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.2.0.tgz",
-      "integrity": "sha512-rdwtIXaXCLFAQbnfqDRnI6jaRHp9fTcYBjtFKE8eezcZ7LuLjhUaQGNeMXf1HmRoCH32CLz6XwX0TtxEOS/A3Q==",
+      "integrity": "sha512-fmsZYa9lpn69Ad5eDn7FMcnnSR+8R34W9qJEijxYhTbfOWzr22n1QxCMzXLK+ODyW2973V3Fux959iQoUxzUIA==",
       "dev": true
     },
     "node-releases": {
-      "version": "1.1.76",
+      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.76.tgz",
+      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.1.tgz",
-      "integrity": "sha512-9/IECtNr8dXNmPWmFXepT0/7o5eolGesHUa3mtr0KlgnCvnZxwh2qensKL42JJY2vQKC3nIBXetFAqR+PW1CmA==",
+      "integrity": "sha512-CqyzN6z7Q6aMeF/ktcMVTzhAHCEpf8SOarwpzpf8pNBY2k5/oM34UHldUwp8VKI7uxct2HxSRdJjBaZeESzcxA==",
       "dev": true
     },
     "normalize-path": {
@@ -1508,6 +1476,12 @@
       "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==",
       "dev": true
     },
+    "picocolors": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
+      "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==",
+      "dev": true
+    },
     "picomatch": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.0.tgz",
@@ -1521,22 +1495,14 @@
       "dev": true
     },
     "postcss": {
-      "version": "8.3.8",
+      "version": "8.4.6",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.3.8.tgz",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.6.tgz",
-      "integrity": "sha512-GT5bTjjZnwDifajzczOC+r3FI3Cu+PgPvrsjhQdRqa2kTJ4968/X9CUce9xttIB0xOs5c6xf0TCWZo/y9lF6bA==",
+      "integrity": "sha512-OovjwIzs9Te46vlEx7+uXB0PLijpwjXGKXjVGGPIGubGpq7uh5Xgf6D6FiJ/SzJMBosHDp6a2hiXOS97iBXcaA==",
       "dev": true,
       "requires": {
-        "nanocolors": "^0.2.2",
+        "nanoid": "^3.2.0",
-        "nanoid": "^3.1.25",
+        "picocolors": "^1.0.0",
-        "source-map-js": "^0.6.2"
+        "source-map-js": "^1.0.2"
-      },
-      "dependencies": {
-        "nanocolors": {
-          "version": "0.2.11",
-          "resolved": "https://registry.npmjs.org/nanocolors/-/nanocolors-0.2.11.tgz",
-          "integrity": "sha512-83ttyvfJj66dKMadWfBkEUOEDFfRc8FpzTJvh1MySR/pzWFmFikTQZGOV6kHZRz7yR/heiQ1y/MHBBN5P/e7WQ==",
-          "dev": true
-        }
       }
     },
     "postcss-cli": {
@@ -1585,9 +1551,9 @@
       }
     },
     "postcss-value-parser": {
-      "version": "4.1.0",
+      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.1.0.tgz",
+      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
-      "integrity": "sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ==",
+      "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
       "dev": true
     },
     "pretty-hrtime": {
@@ -1654,9 +1620,9 @@
       "dev": true
     },
     "source-map-js": {
-      "version": "0.6.2",
+      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-0.6.2.tgz",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
-      "integrity": "sha512-/3GptzWzu0+0MBQFrDKzw/DvvMTUORvgY6k6jd/VS6iCR4RDTKWH6v6WPwQoUO8667uQEf9Oe38DxAYWY5F/Ug==",
+      "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==",
       "dev": true
     },
     "string-width": {

package.json

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

static/css/layouts/single.css

@@ -37,6 +37,7 @@ body {
 }
 
 .toc-holder {
+  position: -webkit-sticky;
   position: sticky;
   top: 4.5rem;
   overflow-x: hidden;

static/css/navigators/navbar.css

@@ -6,8 +6,8 @@
   height: 50px;
   z-index: 99999;
   transition: all 0.4s ease-out;
-  margin: 0;
+  margin: 0px;
-  padding-top: 0.1rem;
+  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 {

static/css/navigators/sidebar.css

@@ -8,6 +8,7 @@
 
 .sidebar-holder {
   top: 2.5rem;
+  position: -webkit-sticky;
   position: sticky;
   background-color: #f9fafc;
   height: 100vh;
@@ -191,6 +192,7 @@ a.focused {
     transition: all ease-out 0.3s;
   }
   .sidebar-holder {
+    position: -webkit-sticky;
     position: sticky;
     top: 2.5rem;
     width: 100%;
@@ -220,6 +222,7 @@ a.focused {
     transition: all ease-out 0.3s;
   }
   .sidebar-holder {
+    position: -webkit-sticky;
     position: sticky;
     top: 2.5rem;
     width: 100%;

static/css/sections/about.css

@@ -87,11 +87,14 @@
   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 {

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;
@@ -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/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

@@ -8,6 +8,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;
 }

static/js/auto-render.min.js

@@ -0,0 +1 @@
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("katex")):"function"==typeof define&&define.amd?define(["katex"],t):"object"==typeof exports?exports.renderMathInElement=t(require("katex")):e.renderMathInElement=t(e.katex)}("undefined"!=typeof self?self:this,(function(e){return function(){"use strict";var t={771:function(t){t.exports=e}},r={};function n(e){var a=r[e];if(void 0!==a)return a.exports;var i=r[e]={exports:{}};return t[e](i,i.exports,n),i.exports}n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,{a:t}),t},n.d=function(e,t){for(var r in t)n.o(t,r)&&!n.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)};var a={};return function(){n.d(a,{default:function(){return s}});var e=n(771),t=n.n(e),r=function(e,t,r){for(var n=r,a=0,i=e.length;n<t.length;){var o=t[n];if(a<=0&&t.slice(n,n+i)===e)return n;"\\"===o?n++:"{"===o?a++:"}"===o&&a--,n++}return-1},i=/^\\begin{/,o=function(e,t){for(var n,a=[],o=new RegExp("("+t.map((function(e){return e.left.replace(/[-/\\^$*+?.()|[\]{}]/g,"\\$&")})).join("|")+")");-1!==(n=e.search(o));){n>0&&(a.push({type:"text",data:e.slice(0,n)}),e=e.slice(n));var l=t.findIndex((function(t){return e.startsWith(t.left)}));if(-1===(n=r(t[l].right,e,t[l].left.length)))break;var d=e.slice(0,n+t[l].right.length),s=i.test(d)?d:e.slice(t[l].left.length,n);a.push({type:"math",data:s,rawData:d,display:t[l].display}),e=e.slice(n+t[l].right.length)}return""!==e&&a.push({type:"text",data:e}),a},l=function(e,r){var n=o(e,r.delimiters);if(1===n.length&&"text"===n[0].type)return null;for(var a=document.createDocumentFragment(),i=0;i<n.length;i++)if("text"===n[i].type)a.appendChild(document.createTextNode(n[i].data));else{var l=document.createElement("span"),d=n[i].data;r.displayMode=n[i].display;try{r.preProcess&&(d=r.preProcess(d)),t().render(d,l,r)}catch(e){if(!(e instanceof t().ParseError))throw e;r.errorCallback("KaTeX auto-render: Failed to parse `"+n[i].data+"` with ",e),a.appendChild(document.createTextNode(n[i].rawData));continue}a.appendChild(l)}return a},d=function e(t,r){for(var n=0;n<t.childNodes.length;n++){var a=t.childNodes[n];if(3===a.nodeType){var i=l(a.textContent,r);i&&(n+=i.childNodes.length-1,t.replaceChild(i,a))}else 1===a.nodeType&&function(){var t=" "+a.className+" ";-1===r.ignoredTags.indexOf(a.nodeName.toLowerCase())&&r.ignoredClasses.every((function(e){return-1===t.indexOf(" "+e+" ")}))&&e(a,r)}()}},s=function(e,t){if(!e)throw new Error("No element provided to render");var r={};for(var n in t)t.hasOwnProperty(n)&&(r[n]=t[n]);r.delimiters=r.delimiters||[{left:"$$",right:"$$",display:!0},{left:"\\(",right:"\\)",display:!1},{left:"\\begin{equation}",right:"\\end{equation}",display:!0},{left:"\\begin{align}",right:"\\end{align}",display:!0},{left:"\\begin{alignat}",right:"\\end{alignat}",display:!0},{left:"\\begin{gather}",right:"\\end{gather}",display:!0},{left:"\\begin{CD}",right:"\\end{CD}",display:!0},{left:"\\[",right:"\\]",display:!0}],r.ignoredTags=r.ignoredTags||["script","noscript","style","textarea","pre","code","option"],r.ignoredClasses=r.ignoredClasses||[],r.errorCallback=r.errorCallback||console.error,r.macros=r.macros||{},d(e,r)}}(),a=a.default}()}));

static/js/home.js

@@ -338,7 +338,6 @@ var projectCards;
     // re-render custom functions on window resize
     window.onresize = function () {
       detectDevice();
-      adjustSkillCardsHeight();
       adjustRecentPostsHeight();
       showAchievements();
     };

static/js/main.js

@@ -158,18 +158,16 @@ function toggleCourseVisibility(elem) {
   }
 
   // toggle hidden-course class from the third elements
-  for (var i = 0; i < courses.length; i++) {
+  for (const course of courses) {
-    if (i > 1 && courses[i].classList !== null) {
+    if (course.classList.contains("hidden-course") || course.classList.contains("toggled-hidden-course")) {
-      courses[i].classList.toggle("hidden-course");
+      course.classList.toggle("hidden-course");
+      course.classList.add("toggled-hidden-course");
     }
   }
 
-  // toggle the current button visibility
+  // toggle the buttons visibility
-  elem.classList.toggle("hidden");
+  let buttonsToToggle = elem.parentNode.getElementsByClassName("show-more-btn");
-  // toggle the alternate button visibility
+  for (const buttonToToggle of buttonsToToggle) {
-  if  (elem.id === "show-more-btn"){
+    buttonToToggle.classList.toggle("hidden");
-    document.getElementById("show-less-btn").classList.toggle("hidden");
-  }else{
-    document.getElementById("show-more-btn").classList.toggle("hidden");
   }
 }

static/js/navbar.js

@@ -1,5 +1,36 @@
 "use strict";
 
+const updateNavBar = () => {
+  if ($(document).scrollTop() > 40) {
+    $('#top-navbar').removeClass('initial-navbar');
+    $('#top-navbar').addClass('final-navbar shadow');
+
+    $('#navbar-toggler').removeClass('navbar-dark');
+    $('#navbar-toggler').addClass('navbar-light');
+
+    // get the main logo from hidden img tag
+    let mainLogo = document.getElementById("main-logo")
+    if (mainLogo !== null) {
+      let logoURL = mainLogo.getAttribute("src");
+      $('#logo').attr("src", logoURL);
+    }
+
+  } else {
+    $('#top-navbar').removeClass('final-navbar shadow');
+    $('#top-navbar').addClass('initial-navbar');
+
+    $('#navbar-toggler').removeClass('navbar-light');
+    $('#navbar-toggler').addClass('navbar-dark');
+
+    // get the inverted logo from hidden img tag
+    let invertedLogo = document.getElementById("inverted-logo")
+    if (invertedLogo !== null) {
+      let logoURL = invertedLogo.getAttribute("src");
+      $('#logo').attr("src", logoURL);
+    }
+  }
+};
+
 (function ($) {
   jQuery(document).ready(function () {
 
@@ -8,34 +39,7 @@
     // When the user scrolls down 80px from the top of the document, resize the navbar's padding and the logo's font size
     // $.onscroll = function() {scrollFunction()};
     $(document).scroll(function () {
-      if ($(document).scrollTop() > 40) {
+      updateNavBar();
-        $('#top-navbar').removeClass('initial-navbar');
-        $('#top-navbar').addClass('final-navbar shadow');
-
-        $('#navbar-toggler').removeClass('navbar-dark');
-        $('#navbar-toggler').addClass('navbar-light');
-
-        // get the main logo from hidden img tag
-        let mainLogo = document.getElementById("main-logo")
-        if (mainLogo !== null) {
-          let logoURL = mainLogo.getAttribute("src");
-          $('#logo').attr("src", logoURL);
-        }
-
-      } else {
-        $('#top-navbar').removeClass('final-navbar shadow');
-        $('#top-navbar').addClass('initial-navbar');
-
-        $('#navbar-toggler').removeClass('navbar-light');
-        $('#navbar-toggler').addClass('navbar-dark');
-
-        // get the inverted logo from hidden img tag
-        let invertedLogo = document.getElementById("inverted-logo")
-        if (invertedLogo !== null) {
-          let logoURL = invertedLogo.getAttribute("src");
-          $('#logo').attr("src", logoURL);
-        }
-      }
     });
 
     // Creates a click handler to collapse the navigation when
@@ -46,6 +50,8 @@
         $('.navbar-collapse').collapse('hide');
       });
     }
+
+    updateNavBar();
   });
 
 })(jQuery);

theme.toml

@@ -4,7 +4,7 @@ description = "A simple hugo theme for personal portfolio"
 homepage = "https://hugo-toha.github.io/"
 license = "MIT"
 licenselink = "https://github.com/hugo-toha/toha/blob/master/LICENSE"
-min_version = "0.68.0"
+min_version = "0.87.0"
 name = "Toha"
 
 features = [