jcarr
/
hugo-simpleIntro
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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
This commit is contained in:
f-dinucci 2022-06-01 12:42:25 +02:00 committed by Giuseppe Masino
parent 72fe5a6148
commit 8d7070cf67
8 changed files with 89 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
exampleSite/data/home/project.toml → exampleSite/data/home/bottom.toml
View File

@ -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.
"""
"""

5
exampleSite/data/home/skills.toml → exampleSite/data/home/middle.toml
View File

@ -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.
"""
"""

6
exampleSite/data/home/about.toml → exampleSite/data/home/top.toml
View File

@ -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 = "#"

8
exampleSite/data/site/layouts.toml Normal file
View File

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

68
layouts/partials/home/home.html
View File

@ -1,34 +1,60 @@
<div>
<!-- Background: if defined, load the image from /config.params.mainbg, else use an image from picsum -->
<div
id="mainBG"
style="background-image: url('{{ if $.Site.Params.mainbg }}{{ $.Site.Params.mainbg }}{{ else }}https://picsum.photos/1920/1080{{ end }}');"
id = "mainBG"
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" .}}
{{partial "utilities/widgetBoxIconText" .}}
{{partial "utilities/widgetBoxImageText" .}}
{{ range $layouts.home }}
{{if eq .enableTopWidget "true"}}
{{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>

10
layouts/partials/utilities/widgetBoxIconText.html
View File

@ -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>

12
layouts/partials/utilities/widgetBoxImageText.html
View File

@ -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>

17
layouts/partials/utilities/widgetAbout.html → layouts/partials/utilities/widgetSocial.html
View File

@ -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 }}
<a href="{{.url}}"><i class="{{ .icon }}"></i></a>{{end}}
{{ range .Site.Data.home.top.link }}
<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 }}
{{$data.about.title}}
{{ if $data.top.secondaryTitle }}
{{$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}}
{{ replace $data.about.text "\n" "<br />" | safeHTML }}
{{ if $data.top.text}}
{{ replace $data.top.text "\n" "<br />" | safeHTML }}
{{else}}
You can put text in data/home/about.toml/text
{{end}}