Skip to content

Commit 415647f

Browse files
colinwilsoncolinwilson
committed
⚡ allow landing page templates to be used multiple times #128
⚡ add `image text` landing page template
1 parent a91c50e commit 415647f

File tree

12 files changed

+216
-85
lines changed

12 files changed

+216
-85
lines changed

‎assets/images/templates/single/google_lighthouse_circle_v1.0.svg

Lines changed: 1 addition & 0 deletions
Loading

‎assets/scss/custom/components/_backgrounds.scss

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,9 @@ $value in $theme-colors {
77
.bg-#{$name} {
88
background-color: rgba($value, 0.04) !important;
99
}
10+
.bg-hard-#{$name} {
11+
background-color: rgba($value, 1) !important;
12+
}
1013
.bg-soft-#{$name} {
1114
background-color: rgba($value, 0.1) !important;
1215
border: 1px solid rgba($value, 0.1) !important;

‎assets/scss/style.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,6 @@ $font-family-monospace: {{ .Site.Params.mono_font | default "SFMono-Regular, Me
4646
@import "custom/pages/features";
4747
@import "custom/pages/helper";
4848
@import "custom/pages/hero";
49-
{{ if .Site.Data.landing.image_compare.enable }}@import "custom/pages/image-compare-viewer";{{ end }}
49+
{{ if ($.Scratch.Get "image_compare_enabled") }}@import "custom/pages/image-compare-viewer";{{ end }}
5050

5151
// @import "custom/pages/simplebar";

‎data/landing.yaml

Lines changed: 12 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -4,18 +4,19 @@
44
hero:
55
enable: true
66
weight: 10
7+
template: hero
78

89
backgroundImage:
910
path: "images/templates/hero"
1011
filename:
1112
desktop: "gradient-desktop.webp"
1213
mobile: "gradient-mobile.webp"
1314

14-
# badge:
15-
# text: v0.0.2
16-
# color: primary # primary, secondary, success, danger, warning, info, light, dark
17-
# pill: false # boolean
18-
# soft: true # boolean
15+
badge:
16+
text: v0.1.0
17+
color: primary # primary, secondary, success, danger, warning, info, light, dark
18+
pill: false # boolean
19+
soft: true # boolean
1920

2021
# titleLogo:
2122
# path: "images/logos"
@@ -44,10 +45,11 @@ hero:
4445

4546
info: "**Open Source** MIT Licensed."
4647

47-
# Features Grid
48-
features:
48+
# Feature Grid
49+
featureGrid:
4950
enable: true
5051
weight: 20
52+
template: feature grid
5153

5254
title: Why choose Lotus Docs?
5355
subtitle: Lotus Docs is a highly configurable Hugo documentation theme. Yet, with the default configuration you can deploy and publish your documentation site in a matter of minutes. Check out some core features below.
@@ -79,7 +81,7 @@ features:
7981

8082
- title: Search by DocSearch
8183
icon: search
82-
description: Search your docs with DocSearch. A powerful, efficient and accessible search solution built on Algolia Crawler & Autocomplete. TBC.
84+
description: Search your docs with DocSearch. A powerful, efficient and accessible search solution built on Algolia Crawler & Autocomplete.
8385

8486
- title: Multilingual Support
8587
icon: translate
@@ -90,9 +92,10 @@ features:
9092
description: Built on Bootstrap 5, Lotus Docs allows for a familiar, flexible, and intuitive developer experience. Easily customise your site via SCSS variables and files.
9193

9294
# Image compare
93-
image_compare:
95+
imageCompare:
9496
enable: true
9597
weight: 30
98+
template: image compare
9699

97100
title: Customise The Lotus Docs Appearance
98101
subtitle: Much of Lotus Docs' appearance can be customised. Dark mode is optional (enabled by default) and you can choose a Google font that suites you via the config parameters.

‎exampleSite/data/landing.yaml

Lines changed: 44 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -4,18 +4,19 @@
44
hero:
55
enable: true
66
weight: 10
7+
template: hero
78

89
backgroundImage:
910
path: "images/templates/hero"
1011
filename:
1112
desktop: "gradient-desktop.webp"
1213
mobile: "gradient-mobile.webp"
1314

14-
# badge:
15-
# text: v0.0.2
16-
# color: primary # primary, secondary, success, danger, warning, info, light, dark
17-
# pill: false # boolean
18-
# soft: true # boolean
15+
badge:
16+
text: v0.1.0
17+
color: primary # primary, secondary, success, danger, warning, info, light, dark
18+
pill: false # boolean
19+
soft: true # boolean
1920

2021
# titleLogo:
2122
# path: "images/logos"
@@ -36,18 +37,19 @@ hero:
3637
ctaButton:
3738
icon: rocket_launch
3839
btnText: "Get Started"
39-
url: "/docs/quickstart/"
40+
url: "/docs/quickstart/#create-a-new-lotus-docs-site"
4041
cta2Button:
4142
icon: construction
4243
btnText: "In Development"
4344
url: "https://github.com/colinwilson/lotusdocs"
4445

4546
info: "**Open Source** MIT Licensed."
4647

47-
# Features Grid
48-
features:
48+
# Feature Grid
49+
featureGrid:
4950
enable: true
5051
weight: 20
52+
template: feature grid
5153

5254
title: Why choose Lotus Docs?
5355
subtitle: Lotus Docs is a highly configurable Hugo documentation theme. Yet, with the default configuration you can deploy and publish your documentation site in a matter of minutes. Check out some core features below.
@@ -79,7 +81,7 @@ features:
7981

8082
- title: Search by DocSearch
8183
icon: search
82-
description: Search your docs with DocSearch. A powerful, efficient and accessible search solution built on Algolia Crawler & Autocomplete.
84+
description: Search your docs with DocSearch. A powerful, efficient and accessible search solution built on Algolia Crawler & Autocomplete. TBC.
8385

8486
- title: Multilingual Support
8587
icon: translate
@@ -89,10 +91,42 @@ features:
8991
icon: palette
9092
description: Built on Bootstrap 5, Lotus Docs allows for a familiar, flexible, and intuitive developer experience. Easily customise your site via SCSS variables and files.
9193

94+
imageText:
95+
enable: true
96+
weight: 25
97+
template: image text
98+
99+
title: Built with performance and accessability in mind. Top scores on Google's Lighthouse
100+
subtitle: A default Lotus Docs deployment is capable of achieving 4 x 100 scores on Google's Lighthouse performance analysis tool.
101+
102+
list:
103+
- text: Blazing fast page loads
104+
icon: speed
105+
106+
- text: Sensible default SEO friendly settings
107+
icon: area_chart
108+
109+
- text: Designed to be accessible
110+
icon: accessibility
111+
112+
image:
113+
path: "images/templates/single"
114+
filename: "google_lighthouse_circle_v1.0.svg"
115+
alt: "Google LightHouse 100% Illustration" # Optional but recommended
116+
117+
imgOrder:
118+
desktop: 2
119+
mobile: 1
120+
121+
ctaButton:
122+
text: Learn more
123+
url: "/docs/"
124+
92125
# Image compare
93-
image_compare:
126+
imageCompare:
94127
enable: true
95128
weight: 30
129+
template: image compare
96130

97131
title: Customise The Lotus Docs Appearance
98132
subtitle: Much of Lotus Docs' appearance can be customised. Dark mode is optional (enabled by default) and you can choose a Google font that suites you via the config parameters.

‎layouts/_default/baseof.html

Lines changed: 32 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,25 @@
88
{{ end }}
99
{{ end }}
1010

11+
<!--
12+
Is an image_compare landing page template enabled?
13+
If so, collect and consolidate the items config from each enabled instance
14+
-->
15+
{{ $ic := newScratch }}
16+
{{ range $value := .Site.Data.landing }}
17+
{{ $template := string (replaceRE `( |-{1,})` "_" $value.template) }}
18+
{{ if eq $template "image_compare" }}
19+
{{ if $value.enable }}
20+
{{ $ic.Add "enabled" (slice $value.enable) }}
21+
{{ range $value.items }}
22+
{{ $ic.Add "config" (slice (.config | jsonify | safeJS)) }}
23+
{{ end }}
24+
{{ end }}
25+
{{- end }}
26+
{{ end }}
27+
28+
{{ $.Scratch.Set "image_compare_enabled" (in ($ic.Get "enabled") true) }}
29+
1130
<html lang="{{ site.LanguageCode }}" dir="ltr">
1231
{{- partial "head.html" . -}}
1332
<body>
@@ -28,21 +47,19 @@
2847
{{- $js := (slice $app) | resources.Concat "/js/bundle.js" }}
2948
<script type="text/javascript" src="{{ $js.Permalink }}" {{ if hugo.IsProduction }}integrity="{{ $js.Data.Integrity }}"{{ end }}></script>
3049
{{- end }}
31-
{{ if .Site.Data.landing.image_compare.enable }}
32-
<script>
33-
// Image Compare Viewer
34-
const viewers = document.querySelectorAll(".image-compare");
35-
let configs = [
36-
{{ range .Site.Data.landing.image_compare.items }}
37-
{{ if .config }}
38-
{{ .config | jsonify | safeJS }},
39-
{{ end }}
40-
{{ end }}
41-
];
42-
viewers.forEach((element, i) => {
50+
51+
<!-- Image Compare Viewer Config -->
52+
{{ if ($.Scratch.Get "image_compare_enabled") }}
53+
<script>
54+
const viewers = document.querySelectorAll(".image-compare");
55+
let configs = [
56+
{{ (delimit ($ic.Get `config`) `,`) | safeJS }}
57+
];
58+
viewers.forEach((element, i) => {
4359
let view = new ImageCompare(element, configs[i]).mount();
44-
});
45-
</script>
46-
{{- end }}
60+
});
61+
</script>
62+
{{ end }}
63+
4764
</body>
4865
</html>

‎layouts/index.html

Lines changed: 13 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -3,19 +3,22 @@
33
{{ $map := newScratch }}
44

55
{{ range $key, $value := $landingData }}
6-
{{ $template := (index $key) }}
6+
{{ $sectionTitle := (index $key) }}
77
{{ $weight := string ($value.weight) }}
8-
{{ with $weight }}
9-
{{ $map.SetInMap "wgtTpl" $weight $template }}
10-
{{ else }}
11-
{{ $map.SetInMap "wgtTpl" (index $key) $template }}
8+
{{ $template := string (replaceRE `( |-{1,})` "_" $value.template) }}
9+
{{ with and $template $weight }}
10+
{{ $map.SetInMap "wgtTpl" $sectionTitle (dict
11+
"weight" $weight
12+
"template" $template
13+
"sectionTitle" $sectionTitle
14+
)}}
1215
{{ end }}
1316
{{ end }}
1417

15-
{{ $indexContext := newScratch }}
16-
{{ $indexContext.Set "indexContext" . }}
17-
{{ range sort ($map.Get "wgtTpl") }}
18-
{{ $path := printf "landing/%s.html" . }}
19-
{{ partialCached $path ($indexContext.Get "indexContext") }}
18+
{{ range sort ($map.Get "wgtTpl") ".weight" }}
19+
{{ $.Scratch.Set "sectionTitle" .sectionTitle }}
20+
{{ $path := printf "landing/%s.html" .template }}
21+
{{ partial $path $.Page }}
2022
{{ end }}
23+
{{/* printf "%s" (sort ($map.Get "wgtTpl") ".weight" ) */}}
2124
{{ end }}

‎layouts/partials/head.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@
3737
{{ end }}
3838
<script src="{{ $js.RelPermalink }}" {{ if hugo.IsProduction }}integrity="{{ $js.Data.Integrity }}"{{ end -}} defer></script>
3939
<!-- Image Compare Viewer -->
40-
{{ if .Site.Data.landing.image_compare.enable }}
40+
{{ if ($.Scratch.Get "image_compare_enabled") }}
4141
{{ $imagecompare := resources.Get "js/image-compare-viewer.min.js" }}
4242
{{- if not .Site.IsServer }}
4343
{{- $js := (slice $imagecompare) | resources.Concat "/js/image-compare.js" | minify | fingerprint "sha384" }}

‎layouts/partials/landing/features.html renamed to ‎layouts/partials/landing/feature_grid.html

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,16 @@
1-
{{ if .Site.Data.landing.features.enable }}
1+
{{ $sectionTitle := .Scratch.Get "sectionTitle" }}
2+
{{ with (index .Site.Data.landing $sectionTitle) }}
3+
{{ if eq .enable true }}
24
<!-- Features Start -->
35
<div class="container mt-100 mt-60">
46
<div class="row justify-content-center">
57
<div class="col-12 text-center">
68
<div class="section-title">
7-
{{ if .Site.Data.landing.features.title }}
8-
<h4 class="title fw-bold mb-4">{{ .Site.Data.landing.features.title }}</h4>
9+
{{ with .title }}
10+
<h4 class="title fw-bold mb-4">{{ . }}</h4>
911
{{ end }}
10-
{{ if .Site.Data.landing.features.subtitle }}
11-
<p class="text-muted para-desc mb-4 pb-2 mx-auto">{{ .Site.Data.landing.features.subtitle | markdownify }}</p>
12+
{{ with .subtitle }}
13+
<p class="text-muted para-desc mb-4 pb-2 mx-auto">{{ . | markdownify }}</p>
1214
{{ end }}
1315
</div>
1416
</div><!--end col-->
@@ -17,7 +19,7 @@ <h4 class="title fw-bold mb-4">{{ .Site.Data.landing.features.title }}</h4>
1719
<div class="row">
1820
<div class="col-lg-12">
1921
<div class="row">
20-
{{ range .Site.Data.landing.features.items }}
22+
{{ range .items }}
2123
<div class="col-md-4 col-12">
2224
<div class="d-flex features feature-primary p-3">
2325
<div class="{{ if .icon }}icon{{ else }}no-icon{{ end }} text-center rounded-3 text-primary me-3">
@@ -40,4 +42,5 @@ <h4 class="title">{{ .title }}</h4>
4042
</div>
4143
<!--end container-->
4244
<!-- features End -->
45+
{{ end }}
4346
{{ end }}

0 commit comments

Comments
 (0)