feat: migrate Hugo Bootstrap theme to latest Hugo with Tailwind CSS and refactor codebase

* replace Bootstrap-based styling with Tailwind CSS
* update theme compatibility for latest Hugo version
* refactor templates and partials
* fix outdated code and broken components
* improve project structure and maintainability
* optimize styling and frontend build setup

layouts/_partials/essentials/footer.html

@@ -0,0 +1,152 @@
+<footer class="section bg-secondary/70">
+  <div class="container">
+    {{ if site.Params.footer.footer_logo }}
+      {{ partial "image" (dict
+        "Src" site.Params.footer.footer_logo
+        "Size" "120x50"
+        "Alt" "footer logo"
+        "DataAos" "fade-in-sm"
+        "Class" "mb-4"
+        )
+      }}
+    {{ else }}
+      <a
+        class="navbar-brand inline-block mb-4"
+        href="{{ site.Home.RelPermalink }}">
+        {{ partial "logo" }}
+      </a>
+    {{ end }}
+
+
+    <div class="mt-12 grid grid-cols-2 lg:grid-cols-3 xl:grid-cols-5 gap-y-14 gap-4 xl:gap-6">
+      <!-- Contact Section -->
+      <div>
+        {{ $section_title := "" }}
+        {{ range site.Menus.footer_01 }}
+          {{ if .Title }}
+            {{ $section_title = .Name }}
+            {{ break }}
+          {{ end }}
+        {{ end }}
+        <h6 class="mb-8 text-text-light">{{ $section_title }}</h6>
+        <ul>
+          {{ range site.Menus.footer_01 }}
+            {{ if not .Title }}
+              <li
+                class="mb-3 last:mb-0 text-text-light text-wrap">
+                <a class="hover:underline" href="{{ .URL | relLangURL }}" target="_blank">
+                  {{ .Name }}
+                </a>
+              </li>
+            {{ end }}
+          {{ end }}
+        </ul>
+      </div>
+
+      <!-- Services Section -->
+      <div>
+        {{ $section_title := "" }}
+        {{ range site.Menus.footer_02 }}
+          {{ if .Title }}
+            {{ $section_title = .Name }}
+            {{ break }}
+          {{ end }}
+        {{ end }}
+        <h6 class="mb-8 text-text-light">{{ $section_title }}</h6>
+        <ul>
+          {{ range site.Menus.footer_02 }}
+            {{ if not .Title }}
+              <li
+                class="mb-3 last:mb-0 text-text-light">
+                <a hover:underline href="{{ .URL | relLangURL }}">
+                  {{ .Name }}
+                </a>
+              </li>
+            {{ end }}
+          {{ end }}
+        </ul>
+      </div>
+
+      <!-- Social Section -->
+      <div>
+        <h6 class="mb-8 text-text-light">
+          {{ with hugo.Data.social.title }}
+            {{ . }}
+          {{ else }}
+            Social
+          {{ end }}
+        </h6>
+        <ul>
+          {{ range hugo.Data.social.main }}
+            <li
+              class="mb-3 last:mb-0 text-text-light">
+              <a
+                href="{{ .link | safeURL }}"
+                class="capitalize hover:underline"
+                target="_blank">
+                {{ .name }}
+              </a>
+            </li>
+          {{ end }}
+        </ul>
+      </div>
+
+      <!-- About Section -->
+      <div>
+        <h6 class="mb-8 text-text-light">
+          {{ site.Params.footer.footer_title }}
+        </h6>
+        <p
+          class="mb-3 last:mb-0 text-text-light">
+          {{ site.Params.footer.footer_description }}
+        </p>
+      </div>
+
+      <!-- Back-To-Top Section -->
+      <div>
+        <a href="#" class="text-text-light js-back-to-top" aria-label="Back to top">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="26.071"
+            height="32.634"
+            viewBox="0 0 26.071 32.634">
+            <g id="upload" transform="translate(-3.282)">
+              <path
+                id="Path_3"
+                data-name="Path 3"
+                d="M16.317,32.634a.5.5,0,0,1-.5-.5V.5a.5.5,0,0,1,1,0V32.134A.5.5,0,0,1,16.317,32.634Z"
+                fill="currentColor" />
+              <path
+                id="Path_4"
+                data-name="Path 4"
+                d="M28.852,13.536a.5.5,0,0,1-.354-.146L16.319,1.207,4.135,13.39a.5.5,0,0,1-.707-.707L15.966.146A.5.5,0,0,1,16.319,0h0a.5.5,0,0,1,.354.146L29.206,12.682a.5.5,0,0,1-.354.854Z"
+                fill="currentColor" />
+            </g>
+          </svg>
+
+          <p class="mt-4">
+            {{ .Site.Params.footer.back_to_top | safeHTML }}
+          </p>
+        </a>
+      </div>
+
+      {{/* Smooth scroll script for back-to-top (prevents hash in URL) */}}
+      <script>
+        (function(){
+          function onClick(e){
+            e.preventDefault();
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+          }
+          document.addEventListener('DOMContentLoaded', function(){
+            var els = document.querySelectorAll('.js-back-to-top');
+            for(var i=0;i<els.length;i++) els[i].addEventListener('click', onClick, {passive:false});
+          });
+        })();
+      </script>
+    </div>
+
+    <p class="text-text-light text-center [&>a]:underline mt-14">
+      {{ site.Params.copyright | markdownify }}
+    </p>
+  </div>
+</footer>

layouts/_partials/essentials/head.html

@@ -0,0 +1,65 @@
+<meta charset="utf-8" />
+
+<!-- responsive meta -->
+<meta
+  name="viewport"
+  content="width=device-width, initial-scale=1, maximum-scale=5" />
+
+<!-- theme meta -->
+<meta name="theme-name" content="roxo-hugo" />
+
+<!-- favicon -->
+{{/* https://github.com/gethugothemes/hugo-modules/tree/master/images */}}
+{{ partialCached "favicon" . }}
+
+
+<!-- manifest -->
+{{/* https://github.com/gethugothemes/hugo-modules/tree/master/pwa */}}
+{{ partialCached "manifest" . }}
+
+
+<!-- site verifications -->
+{{/* https://github.com/gethugothemes/hugo-modules/tree/master/seo-tools/site-verifications */}}
+{{ partialCached "site-verifications.html" . }}
+
+
+<!-- opengraph and twitter card -->
+{{/* https://github.com/gethugothemes/hugo-modules/tree/master/seo-tools/basic-seo */}}
+{{ partial "basic-seo.html" . }}
+
+
+<!-- custom script -->
+{{/* https://github.com/gethugothemes/hugo-modules/tree/master/components/custom-script */}}
+{{ partialCached "custom-script.html" . }}
+
+
+<!-- google analytics -->
+{{/* https://gohugo.io/templates/embedded/#configuration-google-analytics */}}
+{{ if and site.Config.Services.GoogleAnalytics.ID (ne site.Config.Services.GoogleAnalytics.ID "G-MEASUREMENT_ID") }}
+  {{ partial "google_analytics.html" . }}
+{{ end }}
+
+
+<!-- google tag manager -->
+{{/* https://github.com/gethugothemes/hugo-modules/tree/master/seo-tools/google-tag-manager */}}
+{{ partialCached "gtm.html" . }}
+
+<!-- matomo analytics -->
+{{/* https://github.com/gethugothemes/hugo-modules/tree/master/seo-tools/matomo-analytics */}}
+{{/* {{ partialCached "matomo-analytics.html" . }} */}}
+
+<!--  Baidu analytics -->
+{{/* https://github.com/gethugothemes/hugo-modules/tree/master/seo-tools/baidu-analytics */}}
+{{/* {{ partialCached "baidu-analytics.html" . }} */}}
+
+<!-- Plausible Analytics -->
+{{/* https://github.com/gethugothemes/hugo-modules/tree/master/seo-tools/plausible-analytics */}}
+{{/* {{ partialCached "plausible-analytics.html" . }} */}}
+
+<!-- Counter Analytics -->
+{{/* https://github.com/gethugothemes/hugo-modules/tree/master/seo-tools/counter-analytics */}}
+{{/* {{ partialCached "counter-analytics.html" . }} */}}
+
+<!-- Crisp Chat -->
+{{/* https://github.com/gethugothemes/hugo-modules/tree/master/components/crisp-chat */}}
+{{/* {{ partialCached "crisp-chat.html" . }} */}}

layouts/_partials/essentials/header.html

@@ -0,0 +1,179 @@
+<header
+  id="site-header"
+  data-navbar-fixed="{{ if site.Params.navbar_fixed }}
+    true
+  {{ else }}
+    false
+  {{ end }}"
+  class="header {{ if site.Params.navbar_fixed }}
+    fixed top-0
+  {{ end }} inset-x-0 z-50 py-6 lg:py-6 transition-all duration-300 ease-in-out">
+  <nav class="navbar container">
+    <!-- logo -->
+    <div class="order-0">
+      <!-- navbar brand/logo -->
+      <a class="navbar-brand block" href="{{ site.Home.RelPermalink }}">
+        {{/* https://github.com/gethugothemes/hugo-modules/tree/master/images */}}
+        {{ partial "logo" }}
+      </a>
+    </div>
+    <!-- navbar toggler -->
+    <input id="nav-toggle" type="checkbox" class="hidden" />
+    <label
+      for="nav-toggle"
+      class="order-2 cursor-pointer flex items-center lg:hidden text-text-dark lg:order-1 ml-auto">
+      <svg id="show-button" class="h-6 fill-current block" viewBox="0 0 20 20">
+        <title>{{ T "menu-open" | default "Menu Open" }}</title>
+        <path d="M0 3h20v2H0V3z m0 6h20v2H0V9z m0 6h20v2H0V0z"></path>
+      </svg>
+      <svg id="hide-button" class="h-6 fill-current hidden" viewBox="0 0 20 20">
+        <title>{{ T "menu-close" | default "Menu Close" }}</title>
+        <polygon
+          points="11 9 22 9 22 11 11 11 11 22 9 22 9 11 -2 11 -2 9 9 9 9 -2 11 -2"
+          transform="rotate(45 10 10)"></polygon>
+      </svg>
+    </label>
+    <!-- /navbar toggler -->
+
+    <div class="order-3 flex flex-col lg:flex-row items-center lg:order-2 w-full lg:w-auto lg:justify-between">
+      <!-- main navbar -->
+      <ul
+        id="nav-menu"
+        class="navbar-nav hidden lg:flex w-full pb-6 lg:w-auto lg:space-x-2 lg:pb-0 xl:space-x-8">
+        {{ $currentPage := . }}
+        {{ range site.Menus.main }}
+          {{ $menuURL := .URL | absLangURL }}
+          {{ $pageURL:= $currentPage.Permalink | absLangURL }}
+          {{ $active := eq $menuURL $pageURL }}
+          {{ if .HasChildren }}
+            <li class="nav-item nav-dropdown group relative">
+              <input
+                type="checkbox"
+                id="submenu-{{ .Name | urlize }}"
+                class="peer lg:hidden" />
+              <label
+                for="submenu-{{ .Name | urlize }}"
+                class="nav-link {{ range .Children }}
+                  {{ $childURL := .URL | absLangURL }}
+                  {{ $active := eq $childURL $pageURL }}
+                  {{ if $active }}active{{ end }}
+                {{ end }} inline-flex items-center">
+                {{ .Name }}
+                <svg class="h-4 w-4 fill-current" viewBox="0 0 20 20">
+                  <path
+                    d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z" />
+                </svg>
+              </label>
+              <ul
+                class="nav-dropdown-list hidden peer-checked:block lg:invisible lg:absolute lg:block lg:opacity-0 lg:group-hover:visible lg:group-hover:opacity-100">
+                {{ range .Children }}
+                  {{ $childURL := .URL | absLangURL }}
+                  {{ $active := eq $childURL $pageURL }}
+                  <li class="nav-dropdown-item">
+                    <a
+                      class="nav-dropdown-link {{ if $active }}
+                        active
+                      {{- end -}}"
+                      {{ if findRE `^http` .URL }}
+                        target="_blank" rel="noopener"
+                      {{ end }}
+                      href="{{- if findRE `^#` .URL -}}
+                        {{- if not $.IsHome -}}
+                          {{- site.Home.RelPermalink -}}
+                        {{- end }}
+                        {{- .URL -}}
+                      {{- else -}}
+                        {{- .URL | relLangURL -}}
+                      {{- end -}}">
+                      {{ .Name }}
+                    </a>
+                  </li>
+                {{ end }}
+              </ul>
+            </li>
+          {{ else }}
+            <li class="nav-item">
+              <a
+                class="nav-link {{ if $active }}active{{- end -}}"
+                {{ if findRE `^http` .URL }}
+                  target="_blank" rel="noopener"
+                {{ end }}
+                href="{{- if findRE `^#` .URL -}}
+                  {{- if not $.IsHome -}}
+                    {{- site.Home.RelPermalink -}}
+                  {{- end }}{{- .URL -}}
+                {{- else -}}
+                  {{- .URL | relLangURL -}}
+                {{- end -}}"
+                >{{ .Name }}</a
+              >
+            </li>
+          {{ end }}
+        {{ end }}
+        {{ if site.Params.navigation_button.enable }}
+          <li class="mt-4 inline-block lg:hidden">
+            <a
+              class="btn btn-primary"
+              href="{{ site.Params.navigation_button.link | relLangURL }}"
+              {{ if (hasPrefix site.Params.navigation_button.link `http`) }}
+                target="_blank" rel="noopener"
+              {{ end }}>
+              {{ site.Params.navigation_button.label }}
+            </a>
+          </li>
+        {{ end }}
+      </ul>
+      {{ partial "components/language-switcher" (dict "Context" . "Class" "mr-5 pl-2 py-1 rounded") }}
+
+
+      <!-- navigation btn -->
+      {{ if site.Params.navigation_button.enable }}
+        <a
+          href="{{ site.Params.navigation_button.link | relLangURL }}"
+          class="btn btn-primary hidden lg:inline-block rounded-full"
+          {{ if (hasPrefix site.Params.navigation_button.link `http`) }}
+            target="_blank" rel="noopener"
+          {{ end }}
+          >
+          <span class="btn-area">
+            <span data-text="{{ site.Params.navigation_button.label }}">
+              {{ site.Params.navigation_button.label }}
+            </span>
+          </span>
+        </a>
+      {{ end }}
+    </div>
+  </nav>
+
+  {{/* Header shrink on scroll */}}
+  <script>
+    (function(){
+      var header = document.getElementById('site-header');
+      var lastScrollTop = 0;
+      var shrunk = false;
+
+      if(!header) return;
+
+      function handleScroll(){
+        var scrollTop = window.scrollY || document.documentElement.scrollTop;
+
+        if(scrollTop > 50){
+          if(!shrunk){
+            header.classList.remove('py-6', 'lg:py-6');
+            header.classList.add('py-3', 'lg:py-3', 'shadow-md');
+            shrunk = true;
+          }
+        } else {
+          if(shrunk){
+            header.classList.remove('py-3', 'lg:py-3', 'shadow-md');
+            header.classList.add('py-6', 'lg:py-6');
+            shrunk = false;
+          }
+        }
+        lastScrollTop = scrollTop;
+      }
+
+      window.addEventListener('scroll', handleScroll, {passive: true});
+    })();
+  </script>
+</header>

layouts/_partials/essentials/script.html

@@ -0,0 +1,57 @@
+<!-- JS Plugins + Main script -->
+{{ $scripts := slice }}
+{{ $scriptsLazy := slice }}
+{{ range site.Params.plugins.js }}
+  {{ if findRE "^http" .link }}
+    <script
+      src="{{ .link | relURL }}"
+      type="application/javascript"
+      {{ .attributes | safeHTMLAttr }}></script>
+  {{ else }}
+    {{ if not .lazy }}
+      {{ $scripts = $scripts | append (resources.Get .link) }}
+    {{ else }}
+      {{ $scriptsLazy = $scriptsLazy | append (resources.Get .link) }}
+    {{ end }}
+  {{ end }}
+{{ end }}
+
+
+<!-- main script -->
+{{ $scripts = $scripts | append (resources.Get "js/main.js") }}
+{{ $scripts = $scripts | resources.Concat "js/script.js" }}
+
+{{ $scriptsLazy = $scriptsLazy | resources.Concat "js/script-lazy.js" }}
+
+{{ if hugo.IsProduction }}
+  {{ $scripts = $scripts | minify | fingerprint }}
+  {{ $scriptsLazy = $scriptsLazy | minify | fingerprint }}
+{{ end }}
+
+{{/* scripts */}}
+<script
+  crossorigin="anonymous"
+  integrity="{{ $scripts.Data.Integrity }}"
+  src="{{ $scripts.RelPermalink }}"></script>
+
+{{/* scripts lazy */}}
+<script
+  defer
+  async
+  crossorigin="anonymous"
+  integrity="{{ $scriptsLazy.Data.Integrity }}"
+  src="{{ $scriptsLazy.RelPermalink }}"></script>
+
+<!-- progressive web app -->
+{{/* https://github.com/gethugothemes/hugo-modules/tree/master/pwa */}}
+{{ partialCached "pwa.html" . }}
+
+
+<!-- cookie consent -->
+{{/* https://github.com/gethugothemes/hugo-modules/tree/master/components/cookie-consent */}}
+{{ partialCached "cookie-consent.html" . }}
+
+
+<!-- google adsense -->
+{{/* https://github.com/gethugothemes/hugo-modules/tree/master/adsense */}}
+{{ partialCached "adsense-script.html" . }}

layouts/_partials/essentials/style.html

@@ -0,0 +1,80 @@
+<!-- DNS preconnect -->
+<meta http-equiv="x-dns-prefetch-control" content="on" />
+<link rel="preconnect" href="https://use.fontawesome.com" crossorigin />
+<link rel="preconnect" href="//cdnjs.cloudflare.com" />
+<link rel="preconnect" href="//www.googletagmanager.com" />
+<link rel="preconnect" href="//www.google-analytics.com" />
+<link rel="dns-prefetch" href="https://use.fontawesome.com" />
+<link rel="dns-prefetch" href="//ajax.googleapis.com" />
+<link rel="dns-prefetch" href="//cdnjs.cloudflare.com" />
+<link rel="dns-prefetch" href="//www.googletagmanager.com" />
+<link rel="dns-prefetch" href="//www.google-analytics.com" />
+<link rel="dns-prefetch" href="//fonts.googleapis.com" />
+<link rel="dns-prefetch" href="//connect.facebook.net" />
+<link rel="dns-prefetch" href="//platform.linkedin.com" />
+<link rel="dns-prefetch" href="//platform.twitter.com" />
+
+<!-- google fonts -->
+{{ $pf:= hugo.Data.theme.fonts.font_family.primary }}
+{{ $sf:= hugo.Data.theme.fonts.font_family.secondary }}
+<link rel="preconnect" href="https://fonts.googleapis.com" />
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+<script>
+  (function () {
+    const googleFont = document.createElement("link");
+    googleFont.href = "https://fonts.googleapis.com/css2?family={{$pf | safeURL}}{{with $sf}}&family={{. | safeURL}}{{end}}&display=swap";
+    googleFont.type = "text/css";
+    googleFont.rel = "stylesheet";
+    document.head.appendChild(googleFont);
+  })();
+</script>
+
+<!-- main styles -->
+{{ $styles := slice }}
+{{ $stylesLazy := slice }}
+
+{{ range site.Params.plugins.css }}
+  {{ if findRE "^http" .link }}
+    <link
+      crossorigin="anonymous"
+      media="all"
+      rel="stylesheet"
+      href="{{ .link | relURL }}"
+      {{ .attributes | safeHTMLAttr }} />
+  {{ else }}
+    {{ if not .lazy }}
+      {{ $styles = $styles | append (resources.Get .link) }}
+    {{ else }}
+      {{ $stylesLazy = $stylesLazy | append (resources.Get .link) }}
+    {{ end }}
+  {{ end }}
+{{ end }}
+
+{{ $mainCSS := resources.Get "css/main.css" }}
+{{ $tailwindOpts := dict "inlineImports" true }}
+{{ $tailwindCSS := $mainCSS | css.TailwindCSS $tailwindOpts }}
+
+{{ $styles = $styles | append $tailwindCSS }}
+{{ $styles = $styles | resources.Concat "css/style.css" }}
+
+{{ $stylesLazy = $stylesLazy | resources.Concat "css/style-lazy.css" }}
+
+{{ if hugo.IsProduction }}
+  {{ $styles = $styles | fingerprint }}
+  {{ $stylesLazy = $stylesLazy | minify | fingerprint }}
+{{ end }}
+
+
+<!-- link main style -->
+<link
+  href="{{ $styles.RelPermalink }}"
+  integrity="{{ $styles.Data.Integrity }}"
+  rel="stylesheet" />
+
+<!-- link lazy style -->
+<link
+  rel="stylesheet"
+  href="{{ $stylesLazy.RelPermalink }}"
+  integrity="{{ $stylesLazy.Data.Integrity }}"
+  media="print"
+  onload="this.media='all'; this.onload=null;" />