Skip to content

Commit de3bd30

Browse files
MarekPikulaMarekPikula
committed
Add generic home page section generation
This change enables theme user to specify arbitrary order of sections, and add multiple sections of the same type (more generic approach than in #105, which is applicable only to experience blocks). - All sections are specified in config as a list, with order of items directly reflecting order on the main page (including navbar). - Type of a section is specified with a new `type` field. - If there are multiple sections of the same type, in order to distinguish them for navbar navigation, you need to specify unique `id` field. - Navbar and main page generation is more generic, allowing to add custom section types – the only requirement is a custom partial named after the section type. Styling can be provided in a custom CSS (enabled with `customCSS` site param). Signed-off-by: Marek Pikuła <marek@serenitycode.dev>
1 parent 236b319 commit de3bd30

14 files changed

Lines changed: 509 additions & 515 deletions

File tree

‎exampleSite/config.yaml‎

Lines changed: 285 additions & 242 deletions
Large diffs are not rendered by default.

‎layouts/index.html‎

Lines changed: 19 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -12,11 +12,22 @@
1212
{{ end }}
1313

1414
{{ define "main" }}
15-
{{- partial "sections/hero/index.html" . -}}
16-
{{- partial "sections/about.html" . -}}
17-
{{- partial "sections/experience.html" . -}}
18-
{{- partial "sections/education.html" . -}}
19-
{{- partial "sections/projects.html" . -}}
20-
{{- partial "sections/achievements.html" . -}}
21-
{{- partial "sections/contact.html" . -}}
22-
{{ end }}
15+
{{ range $index, $element := (where .Site.Params.sections "enable" true) }}
16+
{{ if not .type }}
17+
{{ errorf "Type property needs to be set for section with index %d." $index }}
18+
{{ else }}
19+
{{ with $element }}
20+
{{ $partialPathIndex := printf "sections/%s/index.html" .type }}
21+
{{ $partialPathStandalone := printf "sections/%s.html" .type }}
22+
23+
{{ if templates.Exists (printf "partials/%s" $partialPathIndex) }}
24+
{{- partial $partialPathIndex . -}}
25+
{{ else if templates.Exists (printf "partials/%s" $partialPathStandalone) }}
26+
{{- partial $partialPathStandalone . -}}
27+
{{ else }}
28+
{{ errorf "Cannot find partial for section type: %s" .type }}
29+
{{ end }}
30+
{{ end }}
31+
{{ end }}
32+
{{ end }}
33+
{{ end }}

‎layouts/partials/sections/about.html‎

Lines changed: 15 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,26 @@
1-
{{ if .Site.Params.about.enable | default false }}
2-
<section id="about" class="py-0 py-sm-5">
1+
<section id="{{ .id | default .type }}" class="about py-0 py-sm-5">
32
<div class="container bg-transparent">
4-
<h3 class="text-center bg-transparent">{{ .Site.Params.about.title }}</h3>
3+
<h3 class="text-center bg-transparent">{{ .title | default (strings.FirstUpper .type) }}</h3>
54
<div class="bg-transparent row justify-content-center px-3 py-5">
6-
{{ if .Site.Params.about.image }}
7-
<div class="col-sm-12 col-md-8 col-lg-4 mb-5 mb-sm-0 mb-md-5 mb-lg-0 d-none d-sm-none d-md-block">
8-
<div class="image d-flex px-5">
9-
<img src="{{ .Site.Params.about.image }}" class="img-thumbnail mx-auto rounded-circle" alt="">
5+
{{ if .image }}
6+
<div class="col-sm-12 col-md-8 col-lg-4 mb-5 mb-sm-0 mb-md-5 mb-lg-0 d-none d-sm-none d-md-block">
7+
<div class="image d-flex px-5">
8+
<img src="{{ .image }}" class="img-thumbnail mx-auto rounded-circle" alt="">
9+
</div>
1010
</div>
11-
</div>
1211
{{ end }}
1312
<div class="col-sm-12 col-md-12 col-lg-8 content">
14-
{{ .Site.Params.about.content | markdownify }}
13+
{{ .content | markdownify }}
1514

16-
{{ if .Site.Params.about.skills.enable }}
17-
{{ .Site.Params.about.skills.title }}
18-
<ul>
19-
{{ range .Site.Params.about.skills.items }}
20-
<li>{{ . | markdownify }}</li>
21-
{{ end }}
22-
</ul>
15+
{{ if .skills.enable }}
16+
{{ .skills.title }}
17+
<ul>
18+
{{ range .skills.items }}
19+
<li>{{ . | markdownify }}</li>
20+
{{ end }}
21+
</ul>
2322
{{ end }}
2423
</div>
2524
</div>
2625
</div>
2726
</section>
28-
{{ end }}

‎layouts/partials/sections/achievements.html‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,9 @@
1-
{{ if .Site.Params.achievements.enable | default false }}
2-
<section id="achievements" class="py-5">
1+
<section id="{{ .id | default .type }}" class="achievements py-5">
32
<div class="container">
4-
<h3 class="text-center">{{ .Site.Params.achievements.title | default "Achievements" }}</h3>
3+
<h3 class="text-center">{{ .title | default (strings.FirstUpper .type) }}</h3>
54
<div class="px-0 px-md-5 px-lg-5">
65
<div class="row justify-content-center px-3 px-md-5 px-lg-5">
7-
{{ range .Site.Params.achievements.items }}
6+
{{ range .items }}
87
{{ if .url }}
98
<div class="col-lg-4 col-md-6 my-3">
109
<a class="card my-3 h-100 p-3" href="{{ .url }}" title="{{ .title }}" target="_blank">
@@ -43,4 +42,3 @@ <h5 class="card-title bg-transparent">{{ .title }}</h5>
4342
</div>
4443
</div>
4544
</section>
46-
{{ end }}

‎layouts/partials/sections/contact.html‎

Lines changed: 16 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,38 @@
1-
{{ if .Site.Params.contact.enable | default false }}
2-
<section id="contact" class="py-5">
1+
<section id="{{ .id | default .type }}" class="contact py-5">
32
<div class="container">
4-
<h3 class="text-center">{{ .Site.Params.contact.title | default "Get in Touch" }}</h3>
3+
<h3 class="text-center">{{ .title | default (strings.FirstUpper .type) }}</h3>
54
<div class="px-0 px-md-5 px-lg-5">
65
<div class="row justify-content-center px-md-5">
76
<div class="col-md-8 py-3">
87
<div class="text-center">
9-
{{ .Site.Params.contact.content | emojify | markdownify }}
8+
{{ .content | emojify | markdownify }}
109
</div>
11-
{{ if .Site.Params.contact.formspree.enable | default false }}
10+
{{ if .formspree.enable | default false }}
1211
<div class="row justify-content-center">
13-
<form id="contact-form" action="https://formspree.io/f/{{ .Site.Params.contact.formspree.formId }}" onsubmit="handleFormspreeSubmit(event)" method="POST" class="col-md-7">
12+
<form id="contact-form" action="https://formspree.io/f/{{ .formspree.formId }}" onsubmit="handleFormspreeSubmit(event)" method="POST" class="col-md-7">
1413
<div class="form-group pt-3">
15-
<input type="email" class="form-control" name="email" required="true" placeholder='{{ .Site.Params.contact.formspree.emailCaption | emojify | default "Enter your email" }}'>
14+
<input type="email" class="form-control" name="email" required="true" placeholder='{{ .formspree.emailCaption | emojify | default "Enter your email" }}'>
1615
</div>
1716
<div class="form-group pt-3">
18-
<textarea class="form-control" name="message" required="true" placeholder='{{ .Site.Params.contact.formspree.messageCaption | emojify | default "Enter your message" }}' rows="{{ .Site.Params.contact.formspree.messageRows | default 3 }}"></textarea>
17+
<textarea class="form-control" name="message" required="true" placeholder='{{ .formspree.messageCaption | emojify | default "Enter your message" }}' rows="{{ .formspree.messageRows | default 3 }}"></textarea>
1918
</div>
2019
<div class="form-group text-center pt-3">
21-
<button type="submit" class="btn">{{ .Site.Params.contact.btnName | default "Get in Touch" }}</button>
20+
<button type="submit" class="btn">{{ .btnName | default "Get in Touch" }}</button>
2221
</div>
2322
</form>
2423
</div>
25-
{{ else if or (.Site.Params.contact.email) (.Site.Params.contact.btnLink) }}
24+
{{ else if or .email .btnLink }}
2625
<div class="text-center pt-3">
27-
<a
28-
href='{{ if .Site.Params.contact.btnLink }}
29-
{{ .Site.Params.contact.btnLink | default "#" }}
30-
{{ else }}
31-
mailto:{{ .Site.Params.contact.email }}
32-
{{ end }}'
26+
<a
27+
href='{{ if .btnLink }}
28+
{{ .btnLink | default "#" }}
29+
{{ else }}
30+
mailto:{{ .email }}
31+
{{ end }}'
3332
target="_blank"
3433
class="btn"
3534
>
36-
{{ .Site.Params.contact.btnName | default "Get in Touch" }}
35+
{{ .btnName | default "Get in Touch" }}
3736
</a>
3837
</div>
3938
{{ end }}
@@ -43,7 +42,6 @@ <h3 class="text-center">{{ .Site.Params.contact.title | default "Get in Touch" }
4342
</div>
4443
<div id="contact-form-status"></div>
4544
</section>
46-
{{ end }}
4745

4846
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
4947
<symbol id="check-circle-fill" viewBox="0 0 16 16">

‎layouts/partials/sections/education.html‎

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,9 @@
1-
{{ if .Site.Params.education.enable | default false }}
2-
<section id="education" class="py-5">
1+
<section id="{{ .id | default .type }}" class="education py-5">
32
<div class="container">
4-
<h3 class="text-center">{{ .Site.Params.education.title | default "Education" }}</h3>
3+
<h3 class="text-center">{{ .title | default (strings.FirstUpper .type) }}</h3>
54
<div class="row justify-content-center py-5">
6-
{{ $indexMenu := .Site.Params.education.index }}
7-
{{ range $index, $element := .Site.Params.education.items }}
5+
{{ $indexMenu := .index }}
6+
{{ range $index, $element := .items }}
87
<div class="col-12 p-0">
98
<div class="row row align-items-center justify-content-center m-1 mb-4">
109
{{ if $indexMenu }}
@@ -24,7 +23,7 @@ <h3 class="text-center">{{ .Site.Params.education.title | default "Education" }}
2423
<small>{{ .date }}</small>
2524
</div>
2625
<h5 class="card-title">{{ .title }}</h5>
27-
26+
2827
{{ if .school.url }}
2928
<a href="{{ .school.url }}" target="_blank">
3029
<h6>
@@ -40,7 +39,7 @@ <h6>
4039
GPA:
4140
<i>
4241
<small>{{ .GPA }}</small>
43-
</i>
42+
</i>
4443
</div>
4544
{{ end }}
4645
<div class="py-1 education-content">
@@ -63,4 +62,3 @@ <h6>
6362
</div>
6463
</div>
6564
</section>
66-
{{ end }}

‎layouts/partials/sections/experience.html‎

Lines changed: 31 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,34 @@
1-
{{ if .Site.Params.experience.enable | default false }}
2-
<section id="experience" class="py-5">
1+
<section id="{{ .id | default .type }}" class="experience py-5">
32
<div class="container">
4-
<h3 class="text-center">{{ .Site.Params.experience.title | default "Experience" }}</h3>
3+
<h3 class="text-center">{{ .title | default (strings.FirstUpper .type) }}</h3>
54
<div class="row justify-content-center">
65
<div class="col-sm-12 col-md-8 col-lg-8 py-5">
76
<div class="experience-container px-3 pt-2">
87
<ul class="nav nav-pills mb-3 bg-transparent primary-font" id="pills-tab" role="tablist">
9-
{{ range $index, $element := .Site.Params.experience.items }}
8+
{{ range $index, $element := .items }}
109
{{ if (eq $index 0) }}
1110
<li class="nav-item px-1 bg-transparent" role="presentation">
12-
<div
13-
class="nav-link active bg-transparent"
14-
aria-selected="true"
15-
role="tab"
11+
<div
12+
class="nav-link active bg-transparent"
13+
aria-selected="true"
14+
role="tab"
1615
data-bs-toggle="pill"
1716
id='{{ replace .company " " "-" }}-{{ replace .date " " "-" }}-tab'
1817
data-bs-target='#pills-{{ replace .company " " "-" }}-{{ replace .date " " "-" }}'
19-
aria-controls='{{ replace .company " " "-" }}-{{ replace .date " " "-" }}'
18+
aria-controls='{{ replace .company " " "-" }}-{{ replace .date " " "-" }}'
2019
>
2120
{{ .company }}
2221
</div>
2322
</li>
2423
{{ else }}
2524
<li class="nav-item px-1 bg-transparent" role="presentation">
26-
<div
27-
class="nav-link bg-transparent"
28-
aria-selected="true"
29-
role="tab"
25+
<div
26+
class="nav-link bg-transparent"
27+
aria-selected="true"
28+
role="tab"
3029
data-bs-toggle="pill"
3130
id='{{ replace .company " " "-" }}-{{ replace .date " " "-" }}-tab'
32-
data-bs-target='#pills-{{ replace .company " " "-" }}-{{ replace .date " " "-" }}'
31+
data-bs-target='#pills-{{ replace .company " " "-" }}-{{ replace .date " " "-" }}'
3332
aria-controls='{{ replace .company " " "-" }}-{{ replace .date " " "-" }}'
3433
>
3534
{{ .company }}
@@ -39,10 +38,10 @@ <h3 class="text-center">{{ .Site.Params.experience.title | default "Experience"
3938
{{ end }}
4039
</ul>
4140
<div class="tab-content pb-5 pt-2 bg-transparent primary-font" id="pills-tabContent">
42-
{{ range $index, $element := .Site.Params.experience.items }}
41+
{{ range $index, $element := .items }}
4342
{{ if (eq $index 0) }}
44-
<div
45-
class="tab-pane fade show active bg-transparent"
43+
<div
44+
class="tab-pane fade show active bg-transparent"
4645
role="tabpanel"
4746
id='pills-{{ replace .company " " "-" }}-{{ replace .date " " "-" }}'
4847
aria-labelledby='pills-{{ replace .company " " "-" }}-{{ replace .date " " "-" }}-tab'
@@ -55,10 +54,10 @@ <h3 class="text-center">{{ .Site.Params.experience.title | default "Experience"
5554
<small>{{ .date }}</small>
5655
{{ if .info.enable | default true }}
5756
<span class="p-2">
58-
<span
59-
style="cursor: pointer;"
60-
data-bs-toggle="tooltip"
61-
data-bs-placement="top"
57+
<span
58+
style="cursor: pointer;"
59+
data-bs-toggle="tooltip"
60+
data-bs-placement="top"
6261
data-bs-original-title={{ .info.content | default (print "Working as a " .job " at " .company ) }}
6362
>
6463
<i class="fas fa-info-circle fa-xs"></i>
@@ -70,7 +69,7 @@ <h3 class="text-center">{{ .Site.Params.experience.title | default "Experience"
7069
{{ if .featuredLink.enable | default false }}
7170
<div class="py-2 featuredLink">
7271
<a class="p-2 px-4 btn btn-outline-primary btn-sm" href={{ .featuredLink.url | default "#" }} target="_blank">
73-
{{ .featuredLink.name | default "Featured Link" }}
72+
{{ .featuredLink.name | default "Featured Link" }}
7473
</a>
7574
</div>
7675
{{ end }}
@@ -79,8 +78,8 @@ <h3 class="text-center">{{ .Site.Params.experience.title | default "Experience"
7978
{{ .content | markdownify}}
8079
</div>
8180
{{ else }}
82-
<div
83-
class="tab-pane fade bg-transparent"
81+
<div
82+
class="tab-pane fade bg-transparent"
8483
role="tabpanel"
8584
id='pills-{{ replace .company " " "-" }}-{{ replace .date " " "-" }}'
8685
aria-labelledby='pills-{{ replace .company " " "-" }}-{{ replace .date " " "-" }}-tab'
@@ -89,27 +88,27 @@ <h3 class="text-center">{{ .Site.Params.experience.title | default "Experience"
8988
<span class="h4">{{ .job }}</span>
9089
<small>-</small>
9190
<a href="{{ .companyUrl }}" target="_blank">{{ .company }}</a>
92-
91+
9392
<div class="pb-1">
9493
<small>{{ .date }}</small>
9594
{{ if .info.enable | default true }}
9695
<span class="p-2">
97-
<span
98-
style="cursor: pointer;"
99-
data-bs-toggle="tooltip"
100-
data-bs-placement="top"
96+
<span
97+
style="cursor: pointer;"
98+
data-bs-toggle="tooltip"
99+
data-bs-placement="top"
101100
data-bs-original-title={{ .info.content | default (print "Worked as a " .job " at " .company ) }}
102-
>
101+
>
103102
<i class="fas fa-info-circle fa-xs"></i>
104103
</span>
105104
</span>
106105
{{ end }}
107106
</div>
108-
107+
109108
{{ if .featuredLink.enable | default false }}
110109
<div class="py-2 featuredLink">
111110
<a class="p-2 px-4 btn btn-outline-primary btn-sm" href={{ .featuredLink.url | default "#" }} target="_blank">
112-
{{ .featuredLink.name | default "Featured Link" }}
111+
{{ .featuredLink.name | default "Featured Link" }}
113112
</a>
114113
</div>
115114
{{ end }}
@@ -127,4 +126,3 @@ <h3 class="text-center">{{ .Site.Params.experience.title | default "Experience"
127126
</div>
128127
</div>
129128
</section>
130-
{{ end }}

0 commit comments

Comments
 (0)