refactor[partials]: reorganize partials to enhance code reuse

Partials have been reorganized, to improve general understandability and
enhance code reuse (ex. when adding pages, the "wave" will be loaded as
a partial)
This commit is contained in:
f-dinucci 2022-05-31 00:20:32 +02:00 committed by Giuseppe Masino
parent f11421ae38
commit df1a0fd2ea
6 changed files with 45 additions and 36 deletions

View File

@ -1,3 +1,3 @@
{{ define "main" }}
{{ partial "home.html" . }}
{{ partial "home/home.html" . }}
{{ end }}

View File

@ -1 +1 @@
{{ partial "navbar.html" . }}
{{ partial "utilities/navbar.html" . }}

View File

@ -1,36 +1,29 @@
<div>
<div
id="mainBG"
style="background-image: url('{{ if $.Site.Params.mainbg }}{{ $.Site.Params.mainbg }}{{ else }}https://picsum.photos/1920/1080{{ end }}');"
>
<div
class="wave wave1"
style="background-image: url('{{ .Site.BaseURL }}/img/wave.png');"
></div>
<div
class="wave wave2"
style="background-image: url('{{ .Site.BaseURL }}/img/wave.png');"
></div>
<div
class="wave wave3"
style="background-image: url('{{ .Site.BaseURL }}/img/wave.png');"
></div>
<div
class="wave wave4"
style="background-image: url('{{ .Site.BaseURL }}/img/wave.png');"
></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>
<div
id="mainBG"
style="background-image: url('{{ if $.Site.Params.mainbg }}{{ $.Site.Params.mainbg }}{{ else }}https://picsum.photos/1920/1080{{ end }}');"
>
{{ partial "utilities/wave"}}
<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>
{{ $data := .Site.Data.home }}
<main class="container mx-auto mt-8 px-4 xl:px-0">
<section id="about" class="md:flex justify-around">
<div class="my-auto md:mr-4">
{{ partial "home_title" (dict "title" "About Me") }}
{{ partial "home/homeTitle" (dict "title" "About Me") }}
<div class="flex mt-3 gap-3 text-xl">
{{ range $data.about.link }}
<a href="{{.url}}"><i class="{{ .icon }}"></i></a>{{end}}
@ -52,9 +45,9 @@
</section>
<section id="skills" class="mt-12">
<div class="md:flex justify-center">
{{ partial "home_title" (dict "title" "Skills") }}
{{ partial "home/homeTitle" (dict "title" "Skills") }}
</div>
{{if $data.skills.list}}
<div
class="mt-8 grid grid-flow-row grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"
@ -87,9 +80,9 @@
</section>
<section id="projects" class="mt-12">
<div class="md:flex justify-center">
{{ partial "home_title" (dict "title" "Projects") }}
{{ partial "home/homeTitle" (dict "title" "Projects") }}
</div>
{{if $data.skills.list}}
<div
class="mt-8 grid grid-flow-row grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"
@ -101,8 +94,8 @@
class="w-full h-48"
src="{{ .image }}"
alt="Sunset in the mountains"
/>
</a>
/>
</a>
<div class="px-6 py-4">
<div class="font-bold text-xl mb-2">{{ .title }}</div>
<p class="text-gray-700 text-base">

View File

@ -0,0 +1,16 @@
<div
class="wave wave1"
style="background-image: url('{{ .Site.BaseURL }}/img/wave.png');"
></div>
<div
class="wave wave2"
style="background-image: url('{{ .Site.BaseURL }}/img/wave.png');"
></div>
<div
class="wave wave3"
style="background-image: url('{{ .Site.BaseURL }}/img/wave.png');"
></div>
<div
class="wave wave4"
style="background-image: url('{{ .Site.BaseURL }}/img/wave.png');"
></div>