refactoring[layout]!: improve submodules, make them configurable

* Fix: defines images alt text through file
* Homepage layout: single elements can be enabled/disabled
* Widgets: dehardcodes title. As a consequence, configuration files have
  been renamed, widgets are now totally "generic" and could be reused

BREAKING CHANGES: requires new configuration file for home layout. Old
configuration file have been renamed due to dehardcoding.
Closes: #4 #18
Conflicts: pull #13
Kudos: @Zekromaster for the dehardcoding

exampleSite/data/home/bottom.toml

@@ -1,6 +1,10 @@
+title = "Projects"
+id = "projects"
+
 [[list]]
     title = "lorem"
     image = "https://picsum.photos/400/200"
+    imageAlt = "Random image from Picsum"
     text = """
         Lorem ipsum dolor sit amet, consectetur adipisicing elit.
         Voluptatibus quia, nulla! Maiores et perferendis eaque,
@@ -9,8 +13,9 @@
 [[list]]
     title = "lorem"
     image = "https://picsum.photos/400/200"
+    imageAlt = "Random image from Picsum"
     text = """
         Lorem ipsum dolor sit amet, consectetur adipisicing elit.
         Voluptatibus quia, nulla! Maiores et perferendis eaque,
         exercitationem praesentium nihil.
-    """
+    """

exampleSite/data/home/middle.toml

@@ -1,3 +1,6 @@
+title = "Skills"
+id = "skills"
+
 [[list]]
     name = "go"
     icon = "https://devicons.github.io/devicon/devicon.git/icons/go/go-original.svg"
@@ -21,4 +24,4 @@
         Lorem ipsum dolor sit amet, consectetur adipisicing elit.
         Voluptatibus quia, nulla! Maiores et perferendis eaque,
         exercitationem praesentium nihil.
-    """
+    """

exampleSite/data/home/top.toml

@@ -1,4 +1,6 @@
-title = "Hello, World!"
+mainTitle = "About Me"
+secondaryTitle = "Hello, World!"
+id = "about"
 
 text = """
 Lorem ipsum dolor sit amet, consectetur adipisicing elit.
@@ -20,4 +22,4 @@ exercitationem praesentium nihil.
     url = "#"
 [[link]]
     icon = "fab fa-facebook"
-    url = "#"
+    url = "#"

exampleSite/data/site/layouts.toml

@@ -0,0 +1,8 @@
+[[home]]
+    enableWave = "true"
+    enableTopWidget = "true"
+    enableMiddleWidget = "true"
+    enableBottomWidget = "true"
+
+[[single]]
+    enableWave = "true"

layouts/partials/home/home.html

@@ -1,34 +1,60 @@
 <div>
+    <!-- Background: if defined, load the image from /config.params.mainbg, else use an image from picsum -->
     <div
-    id="mainBG"
+    id = "mainBG"
-    style="background-image: url('{{ if $.Site.Params.mainbg }}{{ $.Site.Params.mainbg }}{{ else }}https://picsum.photos/1920/1080{{ end }}');"
+    style = "background-image: url(' {{ if $.Site.Params.mainbg }} {{ $.Site.Params.mainbg }} {{ else }} https://picsum.photos/1920/1080 {{ end }} ');"
     >
 
-    {{ partial "utilities/wave" .}}
+    <!-- layouts file variable -->
+    {{ $layouts := .Site.Data.site.layouts }}
+
+    <!-- Wave: load if enabled in data/site/layouts.home.enableWave -->
+    {{ range $layouts.home }}
+        {{if eq .enableWave "true"}}
+            {{ partial "utilities/wave" .}}
+        {{end}}
+    {{end}}
+
+        <!-- Title and maintext, centered on the background image -->
+        <div class="centerAll">
+
+            <!-- Site title -->
+            <div class="title text-6xl font-bold text-center">
+                {{if  $.Site.Params.maintitle }}
+                    {{ $.Site.Params.maintitle }}
+                {{else}}
+                    Hello, World
+                {{end}}
+            </div>
+
+            <!-- Site maintext/description -->
+            <div class="text text-xl text-center">
+                {{if $.Site.Params.maintext}}
+                    {{ $.Site.Params.maintext }}
+                {{else}}
+                    Edit config.toml/params
+                {{end}}
+            </div>
 
-    <div class="centerAll">
-        <div class="title text-6xl font-bold text-center">
-            {{if  $.Site.Params.maintitle }}
-                {{ $.Site.Params.maintitle }}
-            {{else}}
-                Hello, World
-            {{end}}
         </div>
 
-        <div class="text text-xl text-center">
-            {{if $.Site.Params.maintext}}
-                {{ $.Site.Params.maintext }}
-            {{else}}
-                Edit config.toml/params
-            {{end}}
-        </div>
     </div>
-</div>
 
+    <!-- Page content: load widget only if enabled in data/site/layouts.home -->
     <main class="container mx-auto mt-8 px-4 xl:px-0">
-        {{partial "utilities/widgetAbout" .}}
+        {{ range $layouts.home }}
-        {{partial "utilities/widgetBoxIconText" .}}
+            {{if eq .enableTopWidget "true"}}
-        {{partial "utilities/widgetBoxImageText" .}}
+                    {{partial "utilities/widgetSocial" $.Site}}
+            {{end}}
+
+            {{if eq .enableMiddleWidget "true"}}
+                {{partial "utilities/widgetBoxIconText" $.Site}}
+            {{end}}
+
+            {{if eq .enableBottomWidget "true"}}
+                {{partial "utilities/widgetBoxImageText" $.Site}}
+            {{end}}
+        {{end}}
     </main>
 
 </div>

layouts/partials/utilities/widgetBoxIconText.html

@@ -1,14 +1,14 @@
 {{ $data := .Site.Data.home }}
 
-<section id="skills" class="mt-12">
+<section id="{{$data.middle.id}}" class="mt-12">
     <div class="md:flex justify-center">
-        {{ partial "home/homeTitle" (dict "title" "Skills") }}
+        {{ partial "home/homeTitle" (dict "title" $data.middle.title) }}
     </div>
 
-    {{if $data.skills.list}}
+    {{if $data.middle.list}}
         <div class="mt-8 grid grid-flow-row grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4" >
 
-        {{ range $data.skills.list }}
+        {{ range $data.middle.list }}
             <div class="w-full rounded overflow-hidden shadow-lg">
                 <div class="">
                     <div class="font-bold text-xl mb-2 py-2 px-6 bg-gray-500">
@@ -34,6 +34,6 @@
         </div>
 
     {{else}}
-        <div class="mt-4 text-xl text-center">Skills don't exist</div>
+        <div class="mt-4 text-xl text-center">Undefined list</div>
     {{end}}
 </section>

layouts/partials/utilities/widgetBoxImageText.html

@@ -1,19 +1,19 @@
 {{ $data := .Site.Data.home }}
 
-<section id="projects" class="mt-12">
+<section id="{{$data.bottom.id}}" class="mt-12">
     <div class="md:flex justify-center">
-        {{ partial "home/homeTitle" (dict "title" "Projects") }}
+        {{ partial "home/homeTitle" (dict "title" $data.bottom.title) }}
     </div>
 
-    {{if $data.skills.list}}
+    {{if $data.bottom.list}}
         <div class="mt-8 grid grid-flow-row grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-            {{ range $data.project.list }}
+            {{ range $data.bottom.list }}
             <div class="w-full rounded overflow-hidden shadow-lg">
                 <a href="{{ .url }}" target="_blank">
                 <img
                 class="w-full h-48"
                 src="{{ .image }}"
-                alt="Sunset in the mountains"
+                alt="{{ .imageAlt }}"
                 />
                 </a>
                 <div class="px-6 py-4">
@@ -27,6 +27,6 @@
         </div>
 
     {{else}}
-        <div class="mt-4 text-xl text-center">Projects does not exist</div>
+        <div class="mt-4 text-xl text-center">Undefined list</div>
     {{end}}
 </section>

layouts/partials/utilities/widgetSocial.html

@@ -1,12 +1,13 @@
 {{ $data := .Site.Data.home }}
 
-<section id="about" class="md:flex justify-around">
+<section id="{{$data.top.id}}" class="md:flex justify-around">
     <div class="my-auto md:mr-4">
-        {{ partial "home/homeTitle" (dict "title" "About Me") }}
+        {{ partial "home/homeTitle" (dict "title" $data.top.mainTitle) }}
 
         <div class="flex mt-3 gap-3 text-xl">
-            {{ range $data.about.link }}
+            {{ range .Site.Data.home.top.link }}
-            <a href="{{.url}}"><i class="{{ .icon }}"></i></a>{{end}}
+                <a href="{{.url}}"><i class="{{ .icon }}"></i></a>
+            {{end}}
         </div>
 
     </div>
@@ -14,16 +15,16 @@
     <div class="mt-4 md:mt-0 md:ml-4">
 
         <div class="text-2xl font-bold">
-            {{ if $data.about.title }}
+            {{ if $data.top.secondaryTitle }}
-                {{$data.about.title}}
+                {{$data.top.secondaryTitle}}
             {{else}}
                 You can put text in data/home/about.toml/title
             {{end}}
         </div>
 
         <div class="text-lg mt-3">
-            {{ if $data.about.text}}
+            {{ if $data.top.text}}
-                {{ replace $data.about.text "\n" "<br />" | safeHTML }}
+                {{ replace $data.top.text "\n" "<br />" | safeHTML }}
             {{else}}
                 You can put text in data/home/about.toml/text
             {{end}}