Fix active menu on sidebar not getting highlighted in dark mode (#881)

Signed-off-by: Emruz Hossain <emruz.hossain@qdrant.com>

.github/workflows/autoprefixer.yml

@@ -21,7 +21,7 @@ jobs:
           npm run autoprefixer
 
       - name: Create Pull Request
-        uses: peter-evans/create-pull-request@v5
+        uses: peter-evans/create-pull-request@v6
         with:
           branch: autoprefixer
           branch-suffix: timestamp

.github/workflows/codeql-analysis.yml

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

.github/workflows/merge-to-main.yml

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

README.md

@@ -1,3 +1,6 @@
+> [!IMPORTANT]
+> If you are migrating from v3 (`git submodule` based) theme to v4 (`hugo modules` based) theme, please read this [migration guide](https://toha-guides.netlify.app/posts/update-v3-to-v4/).
+
 # Toha
 
 [![Netlify Status](https://api.netlify.com/api/v1/badges/b1b93b02-f278-440b-ae1b-304e9f4c4ab5/deploy-status)](https://app.netlify.com/sites/toha/deploys)
@@ -61,7 +64,7 @@ For more details about the features please visit [here](https://toha-guides.netl
 - Tiếng Việt
 - Turkish
 - Arabic (العربية)
-- Português
+- Português Europeu
 - Català
 - Português Brasileiro
 
@@ -185,34 +188,72 @@ For local development, you can make changes in the theme submodule and test the
 
 At first, fork [this repo](https://github.com/hugo-toha/toha). Then, follow the following steps to use the forked theme for local developments,
 
-**Using the forked theme in your own site:**
-
-If you want to run your local development against your own site, follow the following steps:
-
-```bash
-# add the original theme as a submodule of your site if you haven't done already
-$ git submodule add https://github.com/hugo-toha/toha.git themes/toha
-# navigate into the toha theme folder
-$ cd themes/toha
-# add your own fork as a remote
-$ git remote add my-fork https://github.com/<your-github-user>/toha
-# create a new branch for your changes
-$ git checkout -b my-feature-branch
-```
-
-**Using the forked theme in the example site:**
+#### Running the forked theme against the example site
 
 If your want to run your local development against this [example site](https://github.com/hugo-toha/hugo-toha.github.io), follow the following steps:
 
 ```bash
-# clone the example site along with the submodules
-$ git clone git@github.com:hugo-toha/hugo-toha.github.io.git --recursive
-# navigate into the toha theme folder
-$ cd themes/toha
-# add your own fork as a remote
-$ git remote add my-fork https://github.com/<your-github-user>/toha
-# create a new branch for your changes
-$ git checkout -b my-feature-branch
+# go to exampleSite directory
+$ cd exampleSite
+# install hugo modules
+$ hugo mod tidy
+# install dependencies
+$ hugo mod npm pack
+$ npm install
+# run the example site locally
+$ hugo server -w
+```
+
+Now, you can make change in the theme and they will be reflected immediately on the running site. If you need to change any configuration, you can do that in the `config.yaml` file inside `exampleSite` folder. If you need to add any content or data, you can create the respective folder inside `exampleSite` directory and add your desired content or data there.
+
+#### Running the forked theme against your own site
+
+If you want to run your local development against your own site, follow the following steps:
+
+**Replace the theme module:**
+
+Open your site's `go.mod` file and replace the `github.com/hugo-toha/toha/v4` with your forked repo's path. For example, if your forked repo is `github.com/<your-github-user>/toha`, then replace the `github.com/hugo-toha/toha/v4` with `github.com/<your-github-user>/toha/v4`.
+
+```go
+module github.com/hugo-toha/hugo-toha.github.io
+
+go 1.19
+
+require github.com/hugo-toha/toha/v4 v4.0.1-0.20231229170427-d3968ca711ef // indirect
+
+replace(
+    github.com/hugo-toha/toha/v4 => github.com/<your-github-user>/toha/v4 <git branch>
+)
+```
+
+For interactive development, you can replace the theme with your locally cloned fork. For example, if you have cloned your fork in `/home/my-projects/toha`, then replace the `github.com/hugo-toha/toha/v4` with `/home/my-projects/toha`.
+
+```go
+module github.com/hugo-toha/hugo-toha.github.io
+
+go 1.19
+
+require github.com/hugo-toha/toha/v4 v4.0.1-0.20231229170427-d3968ca711ef // indirect
+
+replace(
+    github.com/hugo-toha/toha/v4 => /home/my-projects/toha
+)
+```
+
+**Update dependencies:**
+
+```bash
+# update hugo modules
+$ hugo mod tidy
+# install dependencies
+$ hugo mod npm pack
+$ npm install
+```
+
+**Run your site locally:**
+
+```bash
+$ hugo server -w
 ```
 
 From there you can make changes to the source code of the theme while testing with your running Hugo site or the example site.

assets/styles/components/links.scss

@@ -14,6 +14,7 @@ a {
   text-decoration: none !important;
   color: get-light-color('text-color');
   @include transition();
+
   &.active {
     display: inline;
     color: get-light-color('accent-color');
@@ -29,6 +30,7 @@ a {
 a.header-anchor {
   text-decoration: none;
   color: get-light-color('heading-color');
+
   i,
   svg {
     font-size: 10pt;
@@ -36,12 +38,15 @@ a.header-anchor {
     display: none;
     margin-left: 0.5rem;
   }
+
   &:hover {
+
     i,
     svg {
       display: inline-block;
     }
   }
+
   code {
     color: get-light-color('inline-code-color');
   }
@@ -54,26 +59,33 @@ a.header-anchor {
 html[data-theme='dark'] {
   a {
     color: get-dark-color('accent-color');
+
     &:hover,
     &:focus {
       text-decoration: get-dark-color('hover-over-accent-color') underline;
       color: get-dark-color('hover-over-accent-color');
     }
   }
+
   .list-link {
     color: get-dark-color('text-color');
-    &:hover {
+
+    &:hover,
+    &.active {
       color: get-dark-color('accent-color');
     }
   }
+
   a.header-anchor {
     color: get-dark-color('heading-color');
+
     i,
     svg {
       color: get-dark-color('text-color');
     }
+
     code {
       color: get-dark-color('inline-code-color');
     }
   }
-}
+}

assets/styles/components/misc.scss

@@ -31,6 +31,24 @@ pre {
     }
   }
 }
+ $alert-types: ('success', 'info', 'warning', 'danger');
+
+.alert {
+  @each $type in $alert-types {
+    &.#{$type} {
+      background: get-alert-bg-color($type, 'light');
+      svg {
+        width: 1.25rem;
+        height: 1.25rem;
+        color: get-alert-text-color($type, 'light') !important;
+      }
+      strong {
+        padding-left: 0.5rem;
+        color: get-alert-text-color($type, 'light') !important;
+      }
+    }
+  }
+}
 
 html[data-theme='dark'] {
   .paginator {
@@ -45,4 +63,17 @@ html[data-theme='dark'] {
       }
     }
   }
+  .alert {
+    @each $type in $alert-types {
+      &.#{$type} {
+        background: get-alert-bg-color($type, 'dark');
+        svg {
+          color: get-alert-text-color($type, 'dark') !important;
+        }
+        strong {
+          color: get-alert-text-color($type, 'dark') !important;
+        }
+      }
+    }
+  }
 }

assets/styles/mixins.scss

@@ -50,3 +50,23 @@
     color: get-dark-color('text-over-accent-color');
   }
 }
+
+@function get-alert-bg-color($type, $mode) {
+  $colors: map-get($alerts, $type);
+  @if $mode == 'light' {
+    @return map-get($colors, 'bg-color');
+  } @else {
+    @return map-get($colors, 'text-color');
+  }
+  @return red;
+}
+
+@function get-alert-text-color($type, $mode) {
+  $colors: map-get($alerts, $type);
+  @if $mode == 'light' {
+    @return map-get($colors, 'text-color');
+  } @else {
+    @return map-get($colors, 'bg-color');
+  }
+  @return red;
+}

assets/styles/sections/about.scss

@@ -20,20 +20,25 @@ $progress-bar-colors: (
 }
 
 @mixin circular-progress-animation-breakpoints() {
-  $progress: 50;
+  $progress: 0;
   $duration: 0;
+  $delay: 1.8;
 
-  @for $i from 1 through 10 {
+  @for $i from 0 through 20 {
     .circular-progress-percentage-#{$progress} {
       animation: circular-loading-#{$progress} #{$duration}s linear forwards 1.8s;
     }
+    .circular-progress-percentage-#{$progress}-delay {
+        animation-delay: #{$delay}s;
+    }
     $progress: $progress + 5;
     $duration: $duration + 0.18;
+    $delay: $duration + 1.8;
   }
 }
 
 @mixin circular-progress-animation-keyframes($progress, $degree, $keyframes) {
-  @for $i from 1 through $keyframes {
+  @for $i from 0 through $keyframes {
     @keyframes circular-loading-#{$progress} {
       0% {
         transform: rotate(0);
@@ -122,7 +127,6 @@ $progress-bar-colors: (
         border-bottom-left-radius: 80px;
         border-right: 0;
         transform-origin: center right;
-        animation: circular-loading-1 1.8s linear forwards;
       }
     }
     .circular-progress-value {
@@ -144,8 +148,7 @@ $progress-bar-colors: (
     }
     @include circular-progress-bar-color();
     @include circular-progress-animation-breakpoints();
-    @include circular-progress-animation-keyframes($progress: 50, $degree: 0, $keyframes: 10);
-    @include circular-progress-animation-keyframes($progress: 1, $degree: 180, $keyframes: 5);
+    @include circular-progress-animation-keyframes($progress: 0, $degree: 0, $keyframes: 20);
   }
 
   @include media('<=large') {

assets/styles/variables.scss

@@ -93,3 +93,30 @@ $brand-colors: (
   'diaspora': #1e1e1e,
   'whatsapp': #25d366,
 );
+
+$alerts: (
+  'success': (
+    // green 100
+    'bg-color': #dcfce7,
+    // green 800
+    'text-color': #166534,
+  ),
+  'info': (
+    // sky 100
+    'bg-color': #e0f2fe,
+    // sky 800
+    'text-color': #075985,
+  ),
+  'warning': (
+    // yellow 100
+    'bg-color': #fef9c3,
+    // yellow 800
+    'text-color': #854d0e,
+  ),
+  'danger': (
+    // red 100
+    'bg-color': #fee2e2,
+    // red 800
+    'text-color': #991b1b,
+  ),
+);

config.yaml

@@ -1,4 +1,7 @@
 module:
+  hugoVersion:
+    min: "0.118.0"
+    extended: true
   mounts:
   - source: content
     target: content
@@ -19,4 +22,4 @@ module:
   - source: ../../node_modules/@fontsource/mulish/files
     target: static/files
   - source: ../../node_modules/katex/dist/fonts
-    target: static/fonts
+    target: static/fonts

exampleSite/config.yaml

@@ -98,6 +98,7 @@ params:
     # Enable and configure blog posts
     blog:
       enable: true
+      showAuthor: true
       # Share post on different social media
       shareButtons:
         facebook: true

exampleSite/go.sum

@@ -1,4 +1,2 @@
-github.com/hugo-toha/hugo-toha.github.io v0.0.0-20221228191121-007f31838bd6 h1:TPFhOZAnuH4wjLIdzimswCRa2qCcc1teKVTatADJU2g=
-github.com/hugo-toha/hugo-toha.github.io v0.0.0-20221228191121-007f31838bd6/go.mod h1:OMMaP9Hh9NsKd41lVIazBQRPa0s6Z57AfJoY3DcCNNY=
 github.com/hugo-toha/hugo-toha.github.io v0.0.0-20231031082630-2c32a26d2207 h1:T71lEaGpHYpdy8yKM5vaVwm+CJGt8wjHvPgVM+GjCJM=
 github.com/hugo-toha/hugo-toha.github.io v0.0.0-20231031082630-2c32a26d2207/go.mod h1:aTn1lQX1rbcbfbwNuWHG/L5DPtD+bEzQro49QyFlbEg=

i18n/fr.toml

@@ -117,7 +117,7 @@ other = "Suite"
 other = "Afficher le certificat"
 
 [notes]
-other = "Remarques"
+other = "Notes"
 
 [disclaimer_text]
 other = "Avis de responsabilité"
@@ -127,4 +127,4 @@ other = "Chercher"
 
 [minute]
 one = "minute"
-other = "minutes"
+other = "minutes"

i18n/pt-br.toml

@@ -124,3 +124,7 @@ other = "Nota legal"
 
 [search]
 other = "Pesquisar"
+
+[minute]
+one = "minuto"
+other = "minutos"

i18n/pt-pt.toml

@@ -124,3 +124,7 @@ other = "Nota legal"
 
 [search]
 other = "Pesquisar"
+
+[minute]
+one = "minuto"
+other = "minutos"

layouts/_default/list.html

@@ -32,7 +32,8 @@
   <div class="content container-fluid" id="content">
     <div class="container-fluid post-card-holder" id="post-card-holder">
       {{ $posts := where .RegularPagesRecursive "Layout" "!=" "search" }}
-      {{ $paginator := .Paginate $posts 12 }}
+      {{ $numShow := site.Params.features.pagination.maxPostsPerPage | default 12}}
+      {{ $paginator := .Paginate $posts $numShow }}
       {{ range $paginator.Pages }}
         {{ if .Layout }}
           {{/* ignore the search.md file*/}}

layouts/_default/single.html

@@ -36,15 +36,26 @@
 
       <!--Content Start-->
       <div class="page-content">
+        {{ if site.Params.features.blog.showAuthor | default true }}
         <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 class="text-muted">{{ .Page.Date | time.Format ":date_full" }}{{ if site.Params.features.readingTime }} | {{ .ReadingTime }} {{i18n "minute" .ReadingTime }}{{ end }}</p>
         </div>
-
+        {{ else }}
+        <div style="margin-bottom: 80px;"></div>
+        {{ end }}
+        
         <div class="title">
           <h1>{{ .Page.Title }}</h1>
         </div>
+
+        {{ if not (site.Params.features.blog.showAuthor | default true) }}
+        <div class="author-profile ml-auto align-self-lg-center">
+          <p class="text-muted">{{ .Page.Date | time.Format ":date_full" }}{{ if site.Params.features.readingTime }} | {{ .ReadingTime }} {{i18n "minute" .ReadingTime }}{{ end }}</p>
+        </div>
+        {{ end }}
+
         {{ if site.Params.features.tags.enable }}
           {{partial "misc/tags.html" .Params.tags }}
         {{ end }}

layouts/categories/list.html

@@ -33,7 +33,8 @@
   <div class="content container-fluid" id="content">
     <div class="container-fluid post-card-holder" id="post-card-holder">
       {{ $posts := where .RegularPagesRecursive "Layout" "!=" "search" }}
-      {{ $paginator := .Paginate $posts 12 }}
+      {{ $numShow := site.Params.features.pagination.maxPostsPerPage | default 12}}
+      {{ $paginator := .Paginate $posts $numShow }}
       {{ range $paginator.Pages }}
         {{ if .Layout }}
           {{/* ignore the search.md file*/}}

layouts/partials/footer.html

@@ -115,6 +115,10 @@
                 <li><a href={{ printf "https://github.com/%s" $value }} target="_blank" rel="noopener">
                   <span><i class="fab fa-github"></i></span> <span>{{ $value }}</span>
                 </a></li>
+              {{ else if (eq $key "researchgate") }}
+                <li><a href={{ printf "https://www.researchgate.net/profile/%s" $value }} target="_blank" rel="noopener">
+                  <span><i class="fab fa-researchgate"></i></span> <span>{{ $author.name }}</span>
+                </a></li>            
               {{ else if reflect.IsMap $value }}
                 <li>
                   {{ if (and (isset $value "url") (isset $value "icon"))}}

layouts/partials/misc/badge.html

@@ -12,10 +12,16 @@
     {{ if hasPrefix .color "#"}}
         {{ $predefinedColor = false }}
     {{ end }}
+    {{ $leftProgress := 0 }}
+    {{ $rightProgress := .percentage }}
+    {{ if ge .percentage 50 }}
+        {{ $rightProgress = 50 }}
+        {{ $leftProgress = sub .percentage 50 }}
+    {{ end }}
     <div class="circular-progress {{if $predefinedColor}}{{ .color }}{{end}}">
     <span class="circular-progress-left">
         <span
-        class="circular-progress-bar circular-progress-percentage-{{ .percentage }}"
+        class="circular-progress-bar circular-progress-percentage-{{ $leftProgress }}  circular-progress-percentage-50-delay"
         {{ if not $predefinedColor }}
             style="border-color: {{.color}};"
         {{ end }}
@@ -23,7 +29,7 @@
     </span>
     <span class="circular-progress-right">
         <span
-        class="circular-progress-bar"
+        class="circular-progress-bar circular-progress-percentage-{{ $rightProgress }}"
         {{ if not $predefinedColor }}
             style="border-color: {{.color}};"
         {{ end }}

layouts/shortcodes/alert.html

@@ -1,3 +1,16 @@
-<div class="alert alert-{{ .Get "type"}}">
-    <strong>{{.Inner | markdownify }}</strong>
+{{ $type := .Get "type"}}
+{{ $icon := "alert-circle"}}
+{{ if eq $type "success" }}
+    {{ $icon = "check-circle"}}
+{{ else if eq $type "warning" }}
+    {{ $icon = "alert-triangle"}}
+{{ else if eq $type "danger" }}
+    {{ $icon = "alert-octagon"}}
+{{ else if eq $type "info" }}
+    {{ $icon = "info"}}
+{{ end }}
+
+<div class="alert {{ $type }}">
+    <span><i data-feather="{{$icon}}"></i></span>
+    <span><strong>{{.Inner | markdownify }}</strong></span>
 </div>

layouts/tags/list.html

@@ -33,7 +33,8 @@
   <div class="content container-fluid" id="content">
     <div class="container-fluid post-card-holder" id="post-card-holder">
       {{ $posts := where .RegularPagesRecursive "Layout" "!=" "search" }}
-      {{ $paginator := .Paginate $posts 12 }}
+      {{ $numShow := site.Params.features.pagination.maxPostsPerPage | default 12}}
+      {{ $paginator := .Paginate $posts $numShow }}
       {{ range $paginator.Pages }}
         {{ if .Layout }}
           {{/* ignore the search.md file*/}}