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
This commit is contained in:
Al Murad Uzzaman
29
layouts/_partials/components/blog-card.html
Normal file
29
layouts/_partials/components/blog-card.html
Normal file
@@ -0,0 +1,29 @@
|
||||
<article class="relative group transition duration-300 hover:shadow-xl">
|
||||
<!-- Image -->
|
||||
{{ $image:= .Params.image }}
|
||||
{{ if $image }}
|
||||
{{ partial "image" (dict "Src" $image "Context" .Page "Alt" .Title "Class" "w-full") }}
|
||||
{{ end }}
|
||||
|
||||
|
||||
<!-- Content -->
|
||||
<div
|
||||
class="absolute bottom-0 w-full bg-tertiary p-6 transition-all duration-300 group-hover:pb-20">
|
||||
<time class="text-primary/80" datetime= "{{ time.Format ":date_long" .PublishDate }}"> {{ time.Format ":date_long" .PublishDate }}</time>
|
||||
|
||||
<h4 class="font-semibold mt-1 mb-3">
|
||||
{{ .Title | markdownify }}
|
||||
</h4>
|
||||
|
||||
<p class="line-clamp-2">
|
||||
{{ .Description | markdownify}}
|
||||
</p>
|
||||
|
||||
<!-- Read More -->
|
||||
<a
|
||||
href="{{ .RelPermalink }}"
|
||||
class="absolute bottom-6 left-6 w-full opacity-0 translate-y-5 transition-all duration-300 group-hover:opacity-100 group-hover:translate-y-0 hover:text-primary hover:underline">
|
||||
{{ T "read_more" | default "Read More" }}
|
||||
</a>
|
||||
</div>
|
||||
</article>
|
||||
35
layouts/_partials/components/language-switcher.html
Normal file
35
layouts/_partials/components/language-switcher.html
Normal file
@@ -0,0 +1,35 @@
|
||||
<!-- Language List -->
|
||||
{{ if hugo.IsMultilingual }}
|
||||
{{ $class := .Class }}
|
||||
{{ $context := .Context }}
|
||||
{{ $pageLang := $context.Lang }}
|
||||
{{ $pageTranslations := newScratch }}
|
||||
{{/* First, fill all translations of the Home page (failsafe) */}}
|
||||
{{ range site.Home.AllTranslations }}
|
||||
{{ $pageTranslations.Set .Language.Lang .Permalink }}
|
||||
{{ end }}
|
||||
{{/* Second, if a translation exists for the current page for the target language, replace failsafe */}}
|
||||
{{ range $context.AllTranslations }}
|
||||
{{ $pageTranslations.Set .Language.Lang .Permalink }}
|
||||
{{ end }}
|
||||
|
||||
<select class="{{ $class }}" onchange="location = this.value">
|
||||
{{ range site.Languages }}
|
||||
{{/* Fill the dropdown with all known languages */}}
|
||||
{{ $link := $pageTranslations.Get .Lang }}
|
||||
{{ if $link }}
|
||||
<option
|
||||
id="{{ .Lang }}"
|
||||
value="{{ $link }}"
|
||||
{{ if eq .Lang $pageLang }}
|
||||
selected
|
||||
{{ end }}
|
||||
>
|
||||
{{ .LanguageName }}
|
||||
</option>
|
||||
{{ else }}
|
||||
{{/* if we can't safely redirect the user to the translated page or at least to translated home, discard the language from options */}}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
</select>
|
||||
{{ end }}
|
||||
138
layouts/_partials/components/pagination.html
Executable file
138
layouts/_partials/components/pagination.html
Executable file
@@ -0,0 +1,138 @@
|
||||
{{ $paginator := .Paginator }}
|
||||
<!-- Number of links either side of the current page. -->
|
||||
{{ $adjacent_links := 2 }}
|
||||
<!-- $max_links = ($adjacent_links * 2) + 1 -->
|
||||
{{ $max_links := (add (mul $adjacent_links 2) 1) }}
|
||||
<!-- $lower_limit = $adjacent_links + 1 -->
|
||||
{{ $lower_limit := (add $adjacent_links 1) }}
|
||||
<!-- $upper_limit = $paginator.TotalPages - $adjacent_links -->
|
||||
{{ $upper_limit := (sub $paginator.TotalPages $adjacent_links) }}
|
||||
<!-- If there's more than one page. -->
|
||||
{{ if gt $paginator.TotalPages 1 }}
|
||||
<nav
|
||||
class="flex items-center justify-center space-x-3"
|
||||
aria-label="{{ T "pagination" | default "Pagination" }}">
|
||||
<!-- Previous page. -->
|
||||
{{ if $paginator.HasPrev }}
|
||||
<a
|
||||
class="text-text-dark hover:bg-light px-2 py-1.5"
|
||||
href="{{ $paginator.Prev.URL }}"
|
||||
aria-label="{{ T "pagination-arrow" | default "Pagination Arrow" }}">
|
||||
<span class="sr-only">{{ T "previous" | default "Previous" }}</span>
|
||||
<svg
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
aria-hidden="true"
|
||||
height="30"
|
||||
width="30">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z"
|
||||
clip-rule="evenodd" />
|
||||
</svg>
|
||||
</a>
|
||||
{{ else }}
|
||||
<span class="text-text-light px-2 py-1.5">
|
||||
<span class="sr-only">{{ T "previous" | default "Previous" }}</span>
|
||||
<svg
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
aria-hidden="true"
|
||||
height="30"
|
||||
width="30">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z"
|
||||
clip-rule="evenodd" />
|
||||
</svg>
|
||||
</span>
|
||||
{{ end }}
|
||||
|
||||
|
||||
<!-- Page numbers -->
|
||||
{{ range $paginator.Pagers }}
|
||||
{{ $.Scratch.Set "page_number_flag" false }}
|
||||
<!-- Advanced page numbers. -->
|
||||
{{ if gt $paginator.TotalPages $max_links }}
|
||||
<!-- Lower limit pages. -->
|
||||
<!-- If the user is on a page which is in the lower limit. -->
|
||||
{{ if le $paginator.PageNumber $lower_limit }}
|
||||
<!-- If the current loop page is less than max_links. -->
|
||||
{{ if le .PageNumber $max_links }}
|
||||
{{ $.Scratch.Set "page_number_flag" true }}
|
||||
{{ end }}
|
||||
<!-- Upper limit pages. -->
|
||||
<!-- If the user is on a page which is in the upper limit. -->
|
||||
{{ else if ge $paginator.PageNumber $upper_limit }}
|
||||
<!-- If the current loop page is greater than total pages minus $max_links -->
|
||||
{{ if gt .PageNumber (sub $paginator.TotalPages $max_links) }}
|
||||
{{ $.Scratch.Set "page_number_flag" true }}
|
||||
{{ end }}
|
||||
<!-- Middle pages. -->
|
||||
{{ else }}
|
||||
{{ if and ( ge .PageNumber (sub $paginator.PageNumber $adjacent_links) ) ( le .PageNumber (add $paginator.PageNumber $adjacent_links) ) }}
|
||||
{{ $.Scratch.Set "page_number_flag" true }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
<!-- Simple page numbers. -->
|
||||
{{ else }}
|
||||
{{ $.Scratch.Set "page_number_flag" true }}
|
||||
{{ end }}
|
||||
<!-- Output page numbers. -->
|
||||
{{ if eq ($.Scratch.Get "page_number_flag") true }}
|
||||
|
||||
{{ if eq . $paginator }}
|
||||
<span
|
||||
aria-current="page"
|
||||
class="bg-primary px-4 py-2 text-white">
|
||||
{{ .PageNumber }}
|
||||
</span>
|
||||
{{ else }}
|
||||
<a
|
||||
href="{{ .URL }}"
|
||||
aria-current="page"
|
||||
class="text-text-dark hover:bg-light px-4 py-2">
|
||||
{{ .PageNumber }}
|
||||
</a>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
|
||||
|
||||
<!-- Next page. -->
|
||||
{{ if $paginator.HasNext }}
|
||||
<a
|
||||
class="text-text-dark hover:bg-light rounded px-2 py-1.5"
|
||||
href="{{ $paginator.Next.URL }}"
|
||||
aria-label="{{ T "pagination-arrow" | default "Pagination Arrow" }}">
|
||||
<span class="sr-only">Next</span>
|
||||
<svg
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
aria-hidden="true"
|
||||
height="30"
|
||||
width="30">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
|
||||
clip-rule="evenodd" />
|
||||
</svg>
|
||||
</a>
|
||||
{{ else }}
|
||||
<span class="text-text-light rounded px-2 py-1.5">
|
||||
<span class="sr-only">Next</span>
|
||||
<svg
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
aria-hidden="true"
|
||||
height="30"
|
||||
width="30">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
|
||||
clip-rule="evenodd" />
|
||||
</svg>
|
||||
</span>
|
||||
{{ end }}
|
||||
</nav>
|
||||
{{ end }}
|
||||
27
layouts/_partials/components/portfolio-card.html
Normal file
27
layouts/_partials/components/portfolio-card.html
Normal file
@@ -0,0 +1,27 @@
|
||||
<article class="relative group transition duration-300 hover:shadow-xl">
|
||||
<!-- Image -->
|
||||
{{ $image:= .Params.image }}
|
||||
{{ if $image }}
|
||||
{{ partial "image" (dict "Src" $image "Context" .Page "Alt" .Title "Class" "w-full") }}
|
||||
{{ end }}
|
||||
|
||||
|
||||
<!-- Content -->
|
||||
<div
|
||||
class="absolute bottom-0 w-full bg-tertiary p-6 transition-all duration-300 group-hover:pb-20">
|
||||
<ul class="block text-primary mb-2">
|
||||
<li>{{ delimit .Params.category ", " }}</li>
|
||||
</ul>
|
||||
|
||||
<h4 class="font-semibold">
|
||||
{{ .Title | markdownify }}
|
||||
</h4>
|
||||
|
||||
<!-- Read More -->
|
||||
<a
|
||||
href="{{ .Permalink }}"
|
||||
class="absolute bottom-6 left-6 w-full opacity-0 translate-y-5 transition-all duration-300 group-hover:opacity-100 group-hover:translate-y-0 hover:text-primary hover:underline">
|
||||
{{ .Params.button_label }}
|
||||
</a>
|
||||
</div>
|
||||
</article>
|
||||
9
layouts/_partials/components/tw-size-indicator.html
Normal file
9
layouts/_partials/components/tw-size-indicator.html
Normal file
@@ -0,0 +1,9 @@
|
||||
<div
|
||||
class="fixed left-0 top-0 z-50 flex w-[30px]! items-center justify-center bg-gray-200 py-[2.5px] text-[12px] uppercase text-black sm:bg-red-200 md:bg-yellow-200 lg:bg-green-200 xl:bg-blue-200 2xl:bg-pink-200">
|
||||
<span class="block sm:hidden">all</span>
|
||||
<span class="hidden sm:block md:hidden">sm</span>
|
||||
<span class="hidden md:block lg:hidden">md</span>
|
||||
<span class="hidden lg:block xl:hidden">lg</span>
|
||||
<span class="hidden xl:block 2xl:hidden">xl</span>
|
||||
<span class="hidden 2xl:block">2xl</span>
|
||||
</div>
|
||||
Reference in New Issue
Block a user