feat!: gallery widget + enable icons

BREAKING CHANGE: requires configuration files

exampleSite/config.toml

@@ -9,6 +9,8 @@ publishDir = "public"
     name = "John Doe"
     mainTitle = "Simple-intro"
     mainText = "Just simple intro theme for hugo"
+    enableDevicon = "true"
+    enableFontAwesome = "true"
 
 [menus]
     [[menu.main]]

exampleSite/data/site/layouts.toml

@@ -3,6 +3,7 @@
     enableTopWidget = "true"
     enableMiddleWidget = "true"
     enableBottomWidget = "true"
+    enableGalleryWidget = "true"
 
 [[single]]
     enableWave = "true"

layouts/partials/head.html

@@ -6,10 +6,15 @@
     <link rel="stylesheet" href="{{ .Site.BaseURL }}/css/index.css" />
     <link rel="stylesheet" href="{{ .Site.BaseURL }}/css/navbar.css" />
     <link rel="stylesheet" href="{{ .Site.BaseURL }}/css/tailwind.min.css" />
+
+    {{if eq $.Site.Params.enableFontAwesome "true" }}
         <link rel="stylesheet" href="{{ .Site.BaseURL }}/fontawesome/css/all.min.css" >
+    {{end}}
 
     <!-- CSS - Remote -->
+    {{if eq $.Site.Params.enableDevicon "true" }}
         <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/devicon.min.css">
+    {{end}}
 
     <!-- Favicon -->
     <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

layouts/partials/home/home.html

@@ -54,6 +54,10 @@
             {{if eq .enableBottomWidget "true"}}
                 {{partial "utilities/widgetBoxImageText" $.Site}}
             {{end}}
+
+            {{if eq .enableGalleryWidget "true"}}
+                {{partial "utilities/widgetGallery" $.Site}}
+            {{end}}
         {{end}}
     </main>
 

layouts/partials/utilities/widgetGallery.html

@@ -0,0 +1,33 @@
+{{ $data := .Site.Data.home }}
+
+<section id="{{$data.gallery.id}}" class="mt-12">
+    <div class="md:flex justify-center">
+        <h2> {{ partial "home/homeTitle" (dict "title" $data.gallery.title) }} </h2>
+    </div>
+
+    <p class="font-normal text-lg my-1.5">
+        {{$data.gallery.text}}
+    </p>
+
+    {{if $data.gallery.list}}
+        <div class="mt-8 grid grid-flow-row grid-flow-col gap-3.5 grid-cols-1 md:grid-cols-2 lg:grid-cols-3 content-center">
+            {{ range $data.gallery.list }}
+                <div class="w-full shadow-lg">
+                    <a href="{{ .url }}" target="_blank">
+                        <img
+                        class="w-full h-48"
+                        src="{{ .image }}"
+                        alt="{{ .imageAlt }}"
+                        />
+                    </a>
+                    <h3 class="font-bold text-xl mb-2 text-center">
+                            {{ .title }}
+                    </h3>
+                </div>
+            {{end}}
+        </div>
+
+    {{else}}
+        <div class="mt-4 text-xl text-center">Undefined list</div>
+    {{end}}
+</section>

tailwindcss/tailwind.css

@@ -606,18 +606,20 @@ ul {
   margin-bottom: auto;
 }
 
+.my-1\.5 {
+  margin-top: 0.375rem;
+  margin-bottom: 0.375rem;
+}
+
+.my-1 {
+  margin-top: 0.25rem;
+  margin-bottom: 0.25rem;
+}
+
 .mt-8 {
   margin-top: 2rem;
 }
 
-.mt-3 {
-  margin-top: 0.75rem;
-}
-
-.mt-4 {
-  margin-top: 1rem;
-}
-
 .mt-12 {
   margin-top: 3rem;
 }
@@ -630,6 +632,14 @@ ul {
   margin-left: 0.5rem;
 }
 
+.mt-4 {
+  margin-top: 1rem;
+}
+
+.mt-3 {
+  margin-top: 0.75rem;
+}
+
 .block {
   display: block;
 }
@@ -662,10 +672,18 @@ ul {
   grid-auto-flow: row;
 }
 
+.grid-flow-col {
+  grid-auto-flow: column;
+}
+
 .grid-cols-1 {
   grid-template-columns: repeat(1, minmax(0, 1fr));
 }
 
+.content-center {
+  align-content: center;
+}
+
 .justify-center {
   justify-content: center;
 }
@@ -674,14 +692,18 @@ ul {
   justify-content: space-around;
 }
 
-.gap-3 {
-  gap: 0.75rem;
-}
-
 .gap-4 {
   gap: 1rem;
 }
 
+.gap-3\.5 {
+  gap: 0.875rem;
+}
+
+.gap-3 {
+  gap: 0.75rem;
+}
+
 .space-y-4 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-y-reverse: 0;
   margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
@@ -797,9 +819,9 @@ ul {
   line-height: 2.25rem;
 }
 
-.text-2xl {
-  font-size: 1.5rem;
-  line-height: 2rem;
+.text-base {
+  font-size: 1rem;
+  line-height: 1.5rem;
 }
 
 .text-lg {
@@ -807,15 +829,19 @@ ul {
   line-height: 1.75rem;
 }
 
-.text-base {
-  font-size: 1rem;
-  line-height: 1.5rem;
+.text-2xl {
+  font-size: 1.5rem;
+  line-height: 2rem;
 }
 
 .font-bold {
   font-weight: 700;
 }
 
+.font-normal {
+  font-weight: 400;
+}
+
 .italic {
   font-style: italic;
 }