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.5
+        uses: actions/checkout@v2.4.0
 
       - name: Setup Node
-        uses: actions/setup-node@v2.4.1
+        uses: actions/setup-node@v2.5.0
         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.0
         with:
           branch: autoprefixer
           branch-suffix: timestamp

.github/workflows/codeql-analysis.yml

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

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

@@ -8,6 +8,6 @@ jobs:
     runs-on: ubuntu-latest
     steps:
     # checkout to latest commit
-    - uses: actions/checkout@v2.3.5
+    - 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

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

@@ -37,7 +37,7 @@
 
   {{ $disclaimer := "" }}
   {{ $siteConfig := (index site.Data site.Language.Lang).site }}
-  {{ if $siteConfig.disclaimer }} 
+  {{ if $siteConfig.disclaimer }}
     {{ $disclaimer = $siteConfig.disclaimer }}
   {{ end }}
 
@@ -86,7 +86,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>

layouts/partials/sections/education-alt.html

@@ -53,6 +53,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 +66,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 +77,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

@@ -54,6 +54,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 }}
@@ -66,7 +67,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>
@@ -77,11 +78,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/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.7",
+        "autoprefixer": "^10.4.0",
-        "postcss": "^8.3.9",
+        "postcss": "^8.4.4",
         "postcss-cli": "^8.3.1"
       }
     },
@@ -104,16 +104,16 @@
       }
     },
     "node_modules/autoprefixer": {
-      "version": "10.3.7",
+      "version": "10.4.0",
-      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.3.7.tgz",
+      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.0.tgz",
-      "integrity": "sha512-EmGpu0nnQVmMhX8ROoJ7Mx8mKYPlcUHuxkwrRYEYMz85lu7H09v8w6R1P0JPdn/hKU32GjpLBFEOuIlDWCRWvg==",
+      "integrity": "sha512-7FdJ1ONtwzV1G43GDD0kpVMn/qbiNqyOPMFTX5nRffI+7vgWoFEc6DcXOxHJxrWNDXrZh18eDsZjvZGUljSRGA==",
       "dev": true,
       "dependencies": {
-        "browserslist": "^4.17.3",
+        "browserslist": "^4.17.5",
-        "caniuse-lite": "^1.0.30001264",
+        "caniuse-lite": "^1.0.30001272",
         "fraction.js": "^4.1.1",
         "normalize-range": "^0.1.2",
-        "picocolors": "^0.2.1",
+        "picocolors": "^1.0.0",
         "postcss-value-parser": "^4.1.0"
       },
       "bin": {
@@ -152,16 +152,16 @@
       }
     },
     "node_modules/browserslist": {
-      "version": "4.17.3",
+      "version": "4.17.5",
-      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.17.3.tgz",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.17.5.tgz",
-      "integrity": "sha512-59IqHJV5VGdcJZ+GZ2hU5n4Kv3YiASzW6Xk5g9tf5a/MAzGeFwgGWU39fVzNIOVcgB3+Gp+kiQu0HEfTVU/3VQ==",
+      "integrity": "sha512-I3ekeB92mmpctWBoLXe0d5wPS2cBuRvvW0JyyJHMrk9/HmP2ZjrTboNAZ8iuGqaEIlKguljbQY32OkOJIRrgoA==",
       "dev": true,
       "dependencies": {
-        "caniuse-lite": "^1.0.30001264",
+        "caniuse-lite": "^1.0.30001271",
-        "electron-to-chromium": "^1.3.857",
+        "electron-to-chromium": "^1.3.878",
         "escalade": "^3.1.1",
-        "node-releases": "^1.1.77",
+        "node-releases": "^2.0.1",
-        "picocolors": "^0.2.1"
+        "picocolors": "^1.0.0"
       },
       "bin": {
         "browserslist": "cli.js"
@@ -175,9 +175,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001265",
+      "version": "1.0.30001272",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001265.tgz",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001272.tgz",
-      "integrity": "sha512-YzBnspggWV5hep1m9Z6sZVLOt7vrju8xWooFAgN6BA5qvy98qPAPb7vNUzypFaoh2pb3vlfzbDO8tB57UPGbtw==",
+      "integrity": "sha512-DV1j9Oot5dydyH1v28g25KoVm7l8MTxazwuiH3utWiAS6iL/9Nh//TGwqFEeqqN8nnWYQ8HHhUq+o4QPt9kvYw==",
       "dev": true,
       "funding": {
         "type": "opencollective",
@@ -278,9 +278,9 @@
       }
     },
     "node_modules/electron-to-chromium": {
-      "version": "1.3.861",
+      "version": "1.3.883",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.861.tgz",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.883.tgz",
-      "integrity": "sha512-GZyflmpMnZRdZ1e2yAyvuFwz1MPSVQelwHX4TJZyXypB8NcxdPvPNwy5lOTxnlkrK13EiQzyTPugRSnj6cBgKg==",
+      "integrity": "sha512-goyjNx4wB9j911PBteb+AXNbErug7rJVkmDXWdw5SCVn2JlARBwsqucPkvp1h5mXWxHUbBRK3bwXTrqSxSiAIQ==",
       "dev": true
     },
     "node_modules/emoji-regex": {
@@ -603,9 +603,9 @@
       }
     },
     "node_modules/nanoid": {
-      "version": "3.1.29",
+      "version": "3.1.30",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.1.29.tgz",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.1.30.tgz",
-      "integrity": "sha512-dW2pUSGZ8ZnCFIlBIA31SV8huOGCHb6OwzVCc7A69rb/a+SgPBwfmLvK5TKQ3INPbRkcI8a/Owo0XbiTNH19wg==",
+      "integrity": "sha512-zJpuPDwOv8D2zq2WRoMe1HsfZthVewpel9CAvTfc/2mBD1uUT/agc5f7GHGWXlYkFvi1mVxe4IjvP2HNrop7nQ==",
       "dev": true,
       "bin": {
         "nanoid": "bin/nanoid.cjs"
@@ -615,9 +615,9 @@
       }
     },
     "node_modules/node-releases": {
-      "version": "1.1.77",
+      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.77.tgz",
+      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.1.tgz",
-      "integrity": "sha512-rB1DUFUNAN4Gn9keO2K1efO35IDK7yKHCdCaIMvFO7yUYmmZYeDjnGKle26G4rwj+LKRQpjyUUvMkPglwGCYNQ==",
+      "integrity": "sha512-CqyzN6z7Q6aMeF/ktcMVTzhAHCEpf8SOarwpzpf8pNBY2k5/oM34UHldUwp8VKI7uxct2HxSRdJjBaZeESzcxA==",
       "dev": true
     },
     "node_modules/normalize-path": {
@@ -648,9 +648,9 @@
       }
     },
     "node_modules/picocolors": {
-      "version": "0.2.1",
+      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-0.2.1.tgz",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
-      "integrity": "sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA==",
+      "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==",
       "dev": true
     },
     "node_modules/picomatch": {
@@ -675,14 +675,14 @@
       }
     },
     "node_modules/postcss": {
-      "version": "8.3.9",
+      "version": "8.4.4",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.3.9.tgz",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.4.tgz",
-      "integrity": "sha512-f/ZFyAKh9Dnqytx5X62jgjhhzttjZS7hMsohcI7HEI5tjELX/HxCy3EFhsRxyzGvrzFF+82XPvCS8T9TFleVJw==",
+      "integrity": "sha512-joU6fBsN6EIer28Lj6GDFoC/5yOZzLCfn0zHAn/MYXI7aPt4m4hK5KC5ovEZXy+lnCjmYIbQWngvju2ddyEr8Q==",
       "dev": true,
       "dependencies": {
-        "nanoid": "^3.1.28",
+        "nanoid": "^3.1.30",
-        "picocolors": "^0.2.1",
+        "picocolors": "^1.0.0",
-        "source-map-js": "^0.6.2"
+        "source-map-js": "^1.0.1"
       },
       "engines": {
         "node": "^10 || ^12 || >=14"
@@ -888,9 +888,9 @@
       }
     },
     "node_modules/source-map-js": {
-      "version": "0.6.2",
+      "version": "1.0.1",
-      "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.1.tgz",
-      "integrity": "sha512-/3GptzWzu0+0MBQFrDKzw/DvvMTUORvgY6k6jd/VS6iCR4RDTKWH6v6WPwQoUO8667uQEf9Oe38DxAYWY5F/Ug==",
+      "integrity": "sha512-4+TN2b3tqOCd/kaGRJ/sTYA0tR0mdXx26ipdolxcwtJVqEnqNYvlCAt1q3ypy4QMlYus+Zh34RNtYLoq2oQ4IA==",
       "dev": true,
       "engines": {
         "node": ">=0.10.0"
@@ -1083,16 +1083,16 @@
       "dev": true
     },
     "autoprefixer": {
-      "version": "10.3.7",
+      "version": "10.4.0",
-      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.3.7.tgz",
+      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.0.tgz",
-      "integrity": "sha512-EmGpu0nnQVmMhX8ROoJ7Mx8mKYPlcUHuxkwrRYEYMz85lu7H09v8w6R1P0JPdn/hKU32GjpLBFEOuIlDWCRWvg==",
+      "integrity": "sha512-7FdJ1ONtwzV1G43GDD0kpVMn/qbiNqyOPMFTX5nRffI+7vgWoFEc6DcXOxHJxrWNDXrZh18eDsZjvZGUljSRGA==",
       "dev": true,
       "requires": {
-        "browserslist": "^4.17.3",
+        "browserslist": "^4.17.5",
-        "caniuse-lite": "^1.0.30001264",
+        "caniuse-lite": "^1.0.30001272",
         "fraction.js": "^4.1.1",
         "normalize-range": "^0.1.2",
-        "picocolors": "^0.2.1",
+        "picocolors": "^1.0.0",
         "postcss-value-parser": "^4.1.0"
       }
     },
@@ -1112,22 +1112,22 @@
       }
     },
     "browserslist": {
-      "version": "4.17.3",
+      "version": "4.17.5",
-      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.17.3.tgz",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.17.5.tgz",
-      "integrity": "sha512-59IqHJV5VGdcJZ+GZ2hU5n4Kv3YiASzW6Xk5g9tf5a/MAzGeFwgGWU39fVzNIOVcgB3+Gp+kiQu0HEfTVU/3VQ==",
+      "integrity": "sha512-I3ekeB92mmpctWBoLXe0d5wPS2cBuRvvW0JyyJHMrk9/HmP2ZjrTboNAZ8iuGqaEIlKguljbQY32OkOJIRrgoA==",
       "dev": true,
       "requires": {
-        "caniuse-lite": "^1.0.30001264",
+        "caniuse-lite": "^1.0.30001271",
-        "electron-to-chromium": "^1.3.857",
+        "electron-to-chromium": "^1.3.878",
         "escalade": "^3.1.1",
-        "node-releases": "^1.1.77",
+        "node-releases": "^2.0.1",
-        "picocolors": "^0.2.1"
+        "picocolors": "^1.0.0"
       }
     },
     "caniuse-lite": {
-      "version": "1.0.30001265",
+      "version": "1.0.30001272",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001265.tgz",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001272.tgz",
-      "integrity": "sha512-YzBnspggWV5hep1m9Z6sZVLOt7vrju8xWooFAgN6BA5qvy98qPAPb7vNUzypFaoh2pb3vlfzbDO8tB57UPGbtw==",
+      "integrity": "sha512-DV1j9Oot5dydyH1v28g25KoVm7l8MTxazwuiH3utWiAS6iL/9Nh//TGwqFEeqqN8nnWYQ8HHhUq+o4QPt9kvYw==",
       "dev": true
     },
     "chalk": {
@@ -1204,9 +1204,9 @@
       }
     },
     "electron-to-chromium": {
-      "version": "1.3.861",
+      "version": "1.3.883",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.861.tgz",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.883.tgz",
-      "integrity": "sha512-GZyflmpMnZRdZ1e2yAyvuFwz1MPSVQelwHX4TJZyXypB8NcxdPvPNwy5lOTxnlkrK13EiQzyTPugRSnj6cBgKg==",
+      "integrity": "sha512-goyjNx4wB9j911PBteb+AXNbErug7rJVkmDXWdw5SCVn2JlARBwsqucPkvp1h5mXWxHUbBRK3bwXTrqSxSiAIQ==",
       "dev": true
     },
     "emoji-regex": {
@@ -1447,15 +1447,15 @@
       }
     },
     "nanoid": {
-      "version": "3.1.29",
+      "version": "3.1.30",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.1.29.tgz",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.1.30.tgz",
-      "integrity": "sha512-dW2pUSGZ8ZnCFIlBIA31SV8huOGCHb6OwzVCc7A69rb/a+SgPBwfmLvK5TKQ3INPbRkcI8a/Owo0XbiTNH19wg==",
+      "integrity": "sha512-zJpuPDwOv8D2zq2WRoMe1HsfZthVewpel9CAvTfc/2mBD1uUT/agc5f7GHGWXlYkFvi1mVxe4IjvP2HNrop7nQ==",
       "dev": true
     },
     "node-releases": {
-      "version": "1.1.77",
+      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.77.tgz",
+      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.1.tgz",
-      "integrity": "sha512-rB1DUFUNAN4Gn9keO2K1efO35IDK7yKHCdCaIMvFO7yUYmmZYeDjnGKle26G4rwj+LKRQpjyUUvMkPglwGCYNQ==",
+      "integrity": "sha512-CqyzN6z7Q6aMeF/ktcMVTzhAHCEpf8SOarwpzpf8pNBY2k5/oM34UHldUwp8VKI7uxct2HxSRdJjBaZeESzcxA==",
       "dev": true
     },
     "normalize-path": {
@@ -1477,9 +1477,9 @@
       "dev": true
     },
     "picocolors": {
-      "version": "0.2.1",
+      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-0.2.1.tgz",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
-      "integrity": "sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA==",
+      "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==",
       "dev": true
     },
     "picomatch": {
@@ -1495,14 +1495,14 @@
       "dev": true
     },
     "postcss": {
-      "version": "8.3.9",
+      "version": "8.4.4",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.3.9.tgz",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.4.tgz",
-      "integrity": "sha512-f/ZFyAKh9Dnqytx5X62jgjhhzttjZS7hMsohcI7HEI5tjELX/HxCy3EFhsRxyzGvrzFF+82XPvCS8T9TFleVJw==",
+      "integrity": "sha512-joU6fBsN6EIer28Lj6GDFoC/5yOZzLCfn0zHAn/MYXI7aPt4m4hK5KC5ovEZXy+lnCjmYIbQWngvju2ddyEr8Q==",
       "dev": true,
       "requires": {
-        "nanoid": "^3.1.28",
+        "nanoid": "^3.1.30",
-        "picocolors": "^0.2.1",
+        "picocolors": "^1.0.0",
-        "source-map-js": "^0.6.2"
+        "source-map-js": "^1.0.1"
       }
     },
     "postcss-cli": {
@@ -1620,9 +1620,9 @@
       "dev": true
     },
     "source-map-js": {
-      "version": "0.6.2",
+      "version": "1.0.1",
-      "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.1.tgz",
-      "integrity": "sha512-/3GptzWzu0+0MBQFrDKzw/DvvMTUORvgY6k6jd/VS6iCR4RDTKWH6v6WPwQoUO8667uQEf9Oe38DxAYWY5F/Ug==",
+      "integrity": "sha512-4+TN2b3tqOCd/kaGRJ/sTYA0tR0mdXx26ipdolxcwtJVqEnqNYvlCAt1q3ypy4QMlYus+Zh34RNtYLoq2oQ4IA==",
       "dev": true
     },
     "string-width": {

package.json

@@ -17,8 +17,8 @@
   },
   "homepage": "https://github.com/hossainemruz/toha#readme",
   "devDependencies": {
-    "autoprefixer": "^10.3.7",
+    "autoprefixer": "^10.4.0",
-    "postcss": "^8.3.9",
+    "postcss": "^8.4.4",
     "postcss-cli": "^8.3.1"
   }
 }

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/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");
   }
 }