Skip to content

Commit cfa69b8

Browse files
dlforddlford
committedAug 13, 2022
part 1
1 parent 83a3eeb commit cfa69b8

24 files changed

+3874
-1
lines changed
 

‎.gitignore

+31
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
## Node
2+
node_modules
3+
.eslintcache
4+
.stylelintcache
5+
6+
## OS X
7+
.DS_Store
8+
._*
9+
.Spotlight-V100
10+
.Trashes
11+
12+
## Hugo
13+
build
14+
resources
15+
public
16+
.hugo_build.lock
17+
18+
## Dynamic data
19+
assets/generated
20+
data/generated
21+
src/generated
22+
.rsp.json
23+
24+
## Env
25+
.env
26+
27+
## Netlify
28+
lambda-dist
29+
30+
## gitkeep
31+
!**/.gitkeep

‎README.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
## Hugo Webpack Demo
22

3-
See https://www.dlford.io/hugo-webpack-fast-websites-part-1/
3+
Demo code for my Hugo and Webpack series, see https://www.dlford.io/series/hugo-and-webpack/

‎archetypes/blog.md

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
draft: true
3+
title: ""
4+
description: ""
5+
date: '{{ dateFormat "2006-01-02" now }}'
6+
---

‎assets/global.css

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
body {
2+
display: flex;
3+
flex-direction: column;
4+
width: 64rem;
5+
padding: 0 2rem;
6+
max-width: calc(100% - 4rem);
7+
margin: 0 auto;
8+
background-color: #232c34;
9+
color: lightgray;
10+
}
11+
12+
.site-header {
13+
padding: 0.5rem 0;
14+
}
15+
16+
.site-header .nav-list {
17+
padding: 0;
18+
list-style: none;
19+
display: flex;
20+
flex-wrap: wrap;
21+
gap: 0.5rem;
22+
}
23+
24+
a {
25+
color: orange;
26+
}

‎assets/lazyload.js

+41
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
if (document.readyState === "complete") {
2+
lazyload();
3+
} else {
4+
document.addEventListener("readystatechange", function () {
5+
if (document.readyState === "complete") {
6+
lazyload();
7+
}
8+
});
9+
}
10+
11+
function lazyload() {
12+
const targets = document.querySelectorAll(
13+
"[data-lazy-srcset], [data-lazy-src]",
14+
);
15+
targets.forEach((el) => {
16+
function callback(entries, observer) {
17+
entries.forEach((entry) => {
18+
const src = entry.target.getAttribute("data-lazy-src");
19+
const srcset = entry.target.getAttribute("data-lazy-srcset");
20+
if (entry.isIntersecting) {
21+
if (src) {
22+
el.setAttribute("src", src);
23+
el.removeAttribute("data-lazy-src");
24+
}
25+
if (srcset) {
26+
el.setAttribute("srcset", srcset);
27+
el.removeAttribute("data-lazy-srcset");
28+
}
29+
observer.unobserve(entry.target);
30+
}
31+
});
32+
}
33+
34+
const observer = new IntersectionObserver(callback, {
35+
rootMargin: "1000px",
36+
threshold: 0,
37+
});
38+
39+
observer.observe(el);
40+
});
41+
}

‎config.yml

+100
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
# hostname (and path) to the root
2+
baseURL: 'https://www.yourdomain.com'
3+
4+
# Custom parameters
5+
params:
6+
description: 'My New Blog'
7+
8+
# Markdown Settings
9+
markup:
10+
tableOfContents:
11+
endLevel: 6
12+
highlight:
13+
guessSyntax: true
14+
noClasses: true
15+
tabWidth: 2
16+
17+
# Get last modified date automatically from git
18+
enableGitInfo: true
19+
frontmatter:
20+
date:
21+
- date
22+
- lastmod
23+
lastmod:
24+
- :git
25+
- updated
26+
- lastmod
27+
- date
28+
publishDate:
29+
- date
30+
expiryDate:
31+
- expires
32+
- exiryDate
33+
34+
# Caches
35+
caches:
36+
getjson:
37+
maxAge: '5m'
38+
39+
# The language code for the site
40+
languageCode: 'en-us'
41+
42+
# Site title
43+
title: 'My New Blog'
44+
copyright: 'My Name'
45+
46+
# Build timeout, may need to increase if using a lot of image processing
47+
timeout: 10m
48+
49+
# Image processing defaults
50+
image:
51+
bgColor: '#011'
52+
quality: 60
53+
resampleFilter: Lanczos
54+
55+
# Permalinks overrides
56+
# See "content-management/permalinks"
57+
# This removes `/blog` from the URL for pages under /blog
58+
permalinks:
59+
blog: /:filename/
60+
61+
# We don't want to make all URLs absolute (in links/etc)
62+
# This will break React pre-rendered pages later on if it
63+
# is enabled.
64+
canonifyURLs: false
65+
66+
# Allows you to disable all page types and will render nothing related to 'kind';
67+
# values = "page", "home", "section", "taxonomy", "taxonomyTerm", "RSS", "sitemap", "robotsTXT", "404"
68+
disableKinds: ['hugoGeneratorInject', '404']
69+
70+
# Content organization
71+
taxonomies:
72+
category: categories
73+
tag: tags
74+
75+
# Files to ignore while rendering
76+
ignoreFiles: []
77+
78+
# the length of text to show in a .Summary
79+
summaryLength: 70
80+
81+
# Pagination
82+
paginate: 9
83+
# If you add a value here it will put that between the
84+
# path and page number (e.g. `/blog/2` as is, or add `page` to make it `/blog/page/2`)
85+
paginatePath: ''
86+
87+
# Markdown Options
88+
blackfriday:
89+
fractions: false
90+
91+
# Static
92+
module:
93+
mounts:
94+
- source: static
95+
target: static
96+
- source: assets
97+
target: assets
98+
- source: assets
99+
target: static
100+

‎content/_index.md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
title: My Website
3+
---
4+
5+
This is the home page

‎content/another-page.md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
title: Another Page
3+
---
4+
5+
This is another page

‎content/blog/first-post.md

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
---
2+
draft: true
3+
title: "First Post"
4+
description: "My first post"
5+
date: "2022-07-29"
6+
categories:
7+
- Posts
8+
tags:
9+
- First
10+
- Amazing
11+
- Wow
12+
---
13+
14+
# My first post
15+
16+
Wow! Look at that!
17+
18+
{{<introduction name="Bob">}}
19+
Yep, that's my name
20+
{{</introduction>}}

‎content/blog/second-post/img/photo.jpg

1.38 MB
Loading

‎content/blog/second-post/index.md

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
---
2+
draft: true
3+
title: "Second Post"
4+
description: "My second post"
5+
date: "2022-07-29"
6+
categories:
7+
- Posts
8+
tags:
9+
- Second
10+
- Amazing
11+
- Wow
12+
---
13+
14+
# My second post
15+
16+
This one has a photo
17+
18+
{{<responsive-image filename="img/photo.jpg" alt="A building with large glass windows">}}
19+

‎data/nav.yml

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
- title: Home
2+
url: /
3+
- title: Another Page
4+
url: /another-page
5+
- title: Blog
6+
url: /blog
7+
- title: Categories
8+
url: /categories
9+
- title: Tags
10+
url: /tags
11+

‎layouts/_default/baseof.html

+92
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
<!DOCTYPE html>
2+
<html lang="{{ .Site.LanguageCode }}">
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta
6+
http-equiv="X-UA-Compatible"
7+
content="IE=edge,chrome=1"
8+
/>
9+
<meta
10+
name="viewport"
11+
content="width=device-width, initial-scale=1"
12+
/>
13+
<meta
14+
name="HandheldFriendly"
15+
content="true"
16+
/>
17+
18+
{{/*
19+
This lets us add `noIndex: true` to the frontmatter of
20+
a markdown page and have it be ignored by search crawlers
21+
*/}}
22+
{{ if .Params.noIndex }}
23+
<meta
24+
name="ROBOTS"
25+
content="NOINDEX, NOFOLLOW"
26+
/>
27+
{{ end }}
28+
29+
{{/*
30+
We can override the title in a template,
31+
but this is a good default
32+
*/}}
33+
{{ block "title" . }}
34+
<title
35+
>{{ if not .IsHome }} {{ .Title }} | {{ end }}{{ .Site.Title
36+
}}</title
37+
>
38+
{{ end }}
39+
40+
{{/* Here is another block we can override later */}}
41+
{{ block "description" . }}
42+
{{/*
43+
We are using the Hugo generated page
44+
summary for meta description
45+
*/}}
46+
<meta
47+
name="description"
48+
content="{{ .Summary }}"
49+
/>
50+
{{ end }}
51+
52+
{{/*
53+
This empty block lets us add to the
54+
document head in another template
55+
*/}}
56+
{{ block "head" . }} {{ end }}
57+
58+
{{/* Sitemap is generated automatically */}}
59+
<link
60+
rel="sitemap"
61+
type="application/xml"
62+
href="/sitemap.xml"
63+
/>
64+
65+
{{ $globalStyles := resources.Get "global.css" }}
66+
<link
67+
rel="stylesheet"
68+
href="{{ $globalStyles.RelPermalink }}"
69+
/>
70+
</head>
71+
72+
{{/*
73+
This body class is helpful in figuring
74+
out which template is being loaded
75+
*/}}
76+
<body
77+
class="type-{{ .Type }}
78+
{{ if .IsPage }}
79+
page-single
80+
{{ else }}
81+
page-list
82+
{{ end }}"
83+
>
84+
{{ partial "header" . }}
85+
86+
{{/* This block is for the main page content */}}
87+
{{ block "main" . }} {{ end }}
88+
89+
{{ $lazyScript := resources.Get "lazyload.js" }}
90+
<script async defer src="{{ $lazyScript.RelPermalink }}"></script>
91+
</body>
92+
</html>

‎layouts/_default/list.html

+63
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
{{ define "main" }}
2+
<main id="main">
3+
<section>
4+
{{ if not .Params.noTitle }}
5+
<header>
6+
<h1>{{ .Title | htmlUnescape }}</h1>
7+
</header>
8+
{{ end }}
9+
10+
{{/*
11+
`Scratch` is like a global variable store
12+
for Hugo, anything you put into it is available
13+
anywhere on the site. Here we set up a variable
14+
for the total page count
15+
*/}}
16+
{{- $.Scratch.Set "pagecount" 0 -}}
17+
18+
{{/*
19+
Hugo has built-in functions for pagination, we are
20+
setting a local variable `paginate` to the result of
21+
the paginate function `.Paginate`, to which we pass
22+
in all the pages for this content type `.Pages`.
23+
*/}}
24+
{{ $paginate := .Paginate .Pages }}
25+
26+
{{/*
27+
Now we will loop over the pages in the paginate variable
28+
*/}}
29+
{{ range $paginate.Pages }}
30+
31+
{{/*
32+
We are setting the page count to the current page count
33+
plus one.
34+
*/}}
35+
{{- $.Scratch.Set "pagecount" (add ($.Scratch.Get "pagecount") 1) -}}
36+
37+
{{/*
38+
Now we need to show each posts info and link to it.
39+
*/}}
40+
<article>
41+
<header>
42+
<h3>
43+
<a href="{{ .RelPermalink }}">{{ .Title }}</a>
44+
</h3>
45+
<time datetime="{{ .PublishDate }}" pubdate>{{ .PublishDate.Format "January 2, 2006" }}</time>
46+
</header>
47+
{{ .Summary }}
48+
</article>
49+
{{ end }}
50+
51+
{{/*
52+
We will now show the pagination links, if there are any.
53+
*/}}
54+
{{ if gt $paginate.TotalPages 1 }}
55+
<nav>
56+
{{ if $paginate.HasPrev }}<a href="{{ $paginate.Prev.URL }}">&larr; Newer</a>{{ end }}
57+
{{ if and $paginate.HasPrev $paginate.HasNext }}&nbsp;/&nbsp;{{ end }}
58+
{{ if $paginate.HasNext }}<a href="{{ $paginate.Next.URL }}">Older &rarr;</a>{{ end }}
59+
</nav>
60+
{{ end }}
61+
62+
</main>
63+
{{ end }}

‎layouts/_default/page.html

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
{{ define "main" }}
2+
<article>
3+
<!--
4+
Another frontmatter field `noTitle: true` prevents
5+
the page title from showing up here
6+
-->
7+
{{ if not .Params.noTitle }}
8+
<header>
9+
<h1>{{ .Title | htmlUnescape }}</h1>
10+
</header>
11+
{{ end }}
12+
13+
<main id="main">
14+
<!-- This is the markdown file content -->
15+
{{ .Content }}
16+
</main>
17+
</article>
18+
{{ end }}
19+

‎layouts/_default/single.html

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
{{ define "main" }}
2+
<article>
3+
{{/*
4+
Another frontmatter field `noTitle: true` prevents
5+
the page title from showing up here
6+
*/}}
7+
{{ if not .Params.noTitle }}
8+
<header>
9+
<h1>{{ .Title | htmlUnescape }}</h1>
10+
</header>
11+
{{ end }}
12+
13+
<main id="main">
14+
{{/* This is the markdown file content */}}
15+
{{ .Content }}
16+
</main>
17+
</article>
18+
{{ end }}

‎layouts/_default/terms.html

+31
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
{{ define "main" }}
2+
<main id="main">
3+
<section class="terms">
4+
5+
<header>
6+
{{/* this will be our taxonomy name, e.g. categories */}}
7+
<h1>{{ .Title }}</h1>
8+
</header>
9+
10+
<ul>
11+
{{/* Loop over each term */}}
12+
{{ range $name, $taxonomy := .Data.Terms }}
13+
<li>
14+
{{/* Here we are getting the URL to that terms list page */}}
15+
<a
16+
href="{{ (print "/" $.Data.Plural "/" (lower $name)) | relURL }}"
17+
>
18+
{{/*
19+
Terms are saved in camel-case, so we are using Hugo's `humanize`
20+
function to convert it back to human readable, and the `title`
21+
function to capitalize each word
22+
*/}}
23+
{{ $name | humanize | title }}
24+
</a>
25+
</li>
26+
{{ end }}
27+
</ul>
28+
29+
</section>
30+
</main>
31+
{{ end }}

‎layouts/index.html

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
{{ define "main" }}
2+
<article>
3+
{{/*
4+
Another frontmatter field `noTitle: true` prevents
5+
the page title from showing up here
6+
*/}}
7+
{{ if not .Params.noTitle }}
8+
<header>
9+
<h1>{{ .Title | htmlUnescape }}</h1>
10+
</header>
11+
{{ end }}
12+
13+
<main id="main">
14+
{{/* This is the markdown file content */}}
15+
{{ .Content }}
16+
</main>
17+
</article>
18+
{{ end }}

‎layouts/partials/header.html

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<header class="site-header">
2+
<nav class="main-nav">
3+
<ul class="nav-list">
4+
{{/* Loop through all nav items */}}
5+
{{ range site.Data.nav }}
6+
<li class="nav-item">
7+
{{/* .url and .title are coming from the nav.yml file */}}
8+
<a href="{{ .url }}">{{ .title }}</a>
9+
</li>
10+
{{ end }}
11+
</ul>
12+
</nav>
13+
</header>

‎layouts/partials/responsive-image.html

+198
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,198 @@
1+
{{/* Filename and path of an image */}}
2+
{{ $filename := .filename }}
3+
4+
{{/* Image alt text */}}
5+
{{ $altText := default "" .altText }}
6+
7+
{{/* Optional class name for the outer image wrapper */}}
8+
{{ $classname := default "" .classname }}
9+
10+
{{/* Image sizes, this will go to the actual `img` element */}}
11+
{{ $sizes := default "100vw" .sizes }}
12+
13+
{{/*
14+
Image widths, these are the different widths the image
15+
will be copied down to for different devices.
16+
*/}}
17+
{{ $widths := default (slice 1920 1440 1024 640 480 375) .widths }}
18+
19+
{{/* Disable link to original full-size image */}}
20+
{{ $nolink := or .nolink false }}
21+
22+
{{/*
23+
If true, look for the image in the `assets` directory
24+
otherwise look for the image relative to the current file.
25+
*/}}
26+
{{ $isAsset := or .isAsset false }}
27+
28+
{{/* Optional maximum width of the image to be displayed */}}
29+
{{ $maxwidth := default (index $widths 0) .maxwidth }}
30+
{{ $maxwidth = int $maxwidth }}
31+
32+
{{/* Create a local scratch variable */}}
33+
{{ $asset := newScratch }}
34+
35+
{{/* Find the image file */}}
36+
{{ if $isAsset }}
37+
{{ $asset.Set "resource" (resources.Get $filename | fingerprint) }}
38+
{{ else }}
39+
{{ with site.GetPage "page" (printf "%s" .page) }}
40+
{{ with .Resources.GetMatch $filename }}
41+
{{ $asset.Set "resource" (. | fingerprint) }}
42+
{{ end }}
43+
{{ end }}
44+
{{ end }}
45+
46+
{{/* Create the image element */}}
47+
{{ $img := $asset.Get "resource" }}
48+
{{ $imageId := printf "img-%s" (md5 $img.RelPermalink) }}
49+
{{ with $img }}
50+
{{ $minImageSize := index (last 1 $widths) 0 }}
51+
52+
{{/*
53+
The outer element will be an anchor tag by default,
54+
or a div if the nolink option is set.
55+
*/}}
56+
{{ $wrapper := newScratch }}
57+
{{ $wrapper.Set "open" (printf `
58+
<a
59+
class="responsive-image %s"
60+
href="%s"
61+
target="_blank"
62+
rel="noopener noreferrer"
63+
aria-label="Open Image: %s"
64+
>` $classname $img.RelPermalink $altText | safeHTML)
65+
}}
66+
{{ $wrapper.Set "close" (`</a>` | safeHTML) }}
67+
{{ if eq $altText "" }}
68+
{{ $wrapper.Set "open" (printf `
69+
<a
70+
class="responsive-image %s"
71+
href="%s"
72+
target="_blank"
73+
rel="noopener noreferrer"
74+
aria-hidden="true"
75+
>` $classname $img.RelPermalink | safeHTML)
76+
}}
77+
{{ end }}
78+
{{ if $nolink }}
79+
{{ $wrapper.Set "open" (printf `
80+
<div
81+
class="responsive-image %s"
82+
>` $classname | safeHTML)
83+
}}
84+
{{ $wrapper.Set "close" (`</div>` | safeHTML) }}
85+
{{ end }}
86+
87+
{{/* If the image is an SVG, just render it as is */}}
88+
{{ if eq $img.MediaType.SubType "svg" }}
89+
{{ $wrapper.Get "open" }} <style>
90+
#{{ $imageId }} {
91+
max-width: {{ $maxwidth }};
92+
width: 100%;
93+
}
94+
</style>
95+
<img
96+
id="{{ $imageId }}"
97+
src="{{ $img.RelPermalink }}"
98+
alt="{{ $altText }}"
99+
loading="lazy"
100+
{{ if eq $altText "" }}
101+
aria-hidden="true"
102+
{{ end }}
103+
/>
104+
{{ $wrapper.Get "close" }}
105+
{{ else }}
106+
{{/* Create a low res copy for initial page load */}}
107+
{{ $blurred := $img.Resize "10x q10" }}
108+
109+
{{/* Apply the outer wrapper element */}}
110+
{{ $wrapper.Get "open" }}
111+
112+
{{/*
113+
If the image is a GIF, render it without sizes
114+
because changing the size will break the animation.
115+
*/}}
116+
{{ if eq $img.MediaType.SubType "gif" }}
117+
<style>
118+
#{{ $imageId }} {
119+
aspect-ratio: {{ $img.Width }} / {{ $img.Height }};
120+
max-width: {{ math.Min $img.Width $maxwidth }}px;
121+
object-fit: cover;
122+
object-position: center;
123+
width: 100%;
124+
}
125+
</style>
126+
<img
127+
id="{{ $imageId }}"
128+
src="{{ ($blurred.Resize (printf "%sx" (string $img.Width))).RelPermalink }}"
129+
data-lazy-src="{{ $img.RelPermalink }}"
130+
alt="{{ $altText }}"
131+
loading="lazy"
132+
{{ if eq $altText "" }}
133+
aria-hidden="true"
134+
{{ end }}
135+
/>
136+
{{ else }}
137+
{{/*
138+
Finally, render a picture element with sources for
139+
webp and jpeg formats.
140+
*/}}
141+
<style>
142+
#{{ $imageId }} {
143+
aspect-ratio: {{ $img.Width }} / {{ $img.Height }};
144+
max-width: {{ math.Min $maxwidth $img.Width }}px;
145+
width: 100%;
146+
object-fit: cover;
147+
object-position: center;
148+
}
149+
</style>
150+
<picture>
151+
<source
152+
type="image/webp"
153+
srcset="
154+
{{ range $index, $width := $widths }}
155+
{{ $lineEnd := cond (eq (add $index 1) (len $widths)) "" "," }}
156+
{{ ($blurred.Resize (printf "%dx webp" $width)).RelPermalink }}
157+
{{ printf "%dw" $width }}{{ $lineEnd }}
158+
{{ end }}
159+
"
160+
data-lazy-srcset="
161+
{{ range $index, $width := $widths }}
162+
{{ $lineEnd := cond (eq (add $index 1) (len $widths)) "" "," }}
163+
{{ ($img.Resize (printf "%dx webp" $width)).RelPermalink }}
164+
{{ printf "%dw" $width }}{{ $lineEnd }}
165+
{{ end }}
166+
"
167+
/>
168+
<img
169+
id="{{ $imageId }}"
170+
srcset="
171+
{{ range $index, $width := $widths }}
172+
{{ $lineEnd := cond (eq (add $index 1) (len $widths)) "" "," }}
173+
{{ ($blurred.Resize (printf "%dx" $width)).RelPermalink }}
174+
{{ printf "%dw" $width }}{{ $lineEnd }}
175+
{{ end }}
176+
"
177+
data-lazy-srcset="
178+
{{ range $index, $width := $widths }}
179+
{{ $lineEnd := cond (eq (add $index 1) (len $widths)) "" "," }}
180+
{{ ($img.Resize (printf "%dx" $width)).RelPermalink }}
181+
{{ printf "%dw" $width }}{{ $lineEnd }}
182+
{{ end }}
183+
"
184+
src="{{ ($blurred.Resize (printf "%dx" $minImageSize)).RelPermalink }}"
185+
data-lazy-src="{{ ($img.Resize (printf "%dx" $minImageSize)).RelPermalink }}"
186+
sizes="{{ $sizes }}"
187+
alt="{{ $altText }}"
188+
{{ if eq $altText "" }}
189+
aria-hidden="true"
190+
{{ end }}
191+
/>
192+
</picture>
193+
{{ end }}
194+
{{ $wrapper.Get "close" }}
195+
{{ end }}
196+
{{ else }}
197+
<p>could not find image</p>
198+
{{ end }}

‎layouts/shortcodes/introduction.html

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
{{/* Check for the "name" parameter, or use "Anonymous" */}}
2+
{{ $name := default "Anonymous" (.Get "name") }}
3+
4+
<div class="introduction">
5+
{{ with $name }}
6+
<h2>Hello, my name is {{ . }}!</h2>
7+
{{ end }}
8+
{{/* .Inner is the text passed inside the shortcode */}}
9+
{{ with .Inner }}
10+
<p>{{ . }}</p>
11+
{{ end }}
12+
</div>

‎layouts/shortcodes/responsive-image.html

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
{{/*
2+
We are using a different set of default widths here
3+
because the shortcode will mostly be used in content,
4+
so the widths are more appropriate for that context.
5+
*/}}
6+
{{ $widths := default (slice 768 640 480 375) (.Get "widths") }}
7+
{{ $sizes := default "(min-width: 768px) 768px, 100vw" (.Get "sizes") }}
8+
{{ $maxwidth := default (index $widths 0) (.Get "maxwidth") }}
9+
10+
{{/*
11+
Here we can pass all of our variables in a dict,
12+
this first thing we pass in is "context" with a
13+
value of ".", which is the current context.
14+
*/}}
15+
{{ partial "responsive-image"
16+
(dict
17+
"context" .
18+
"filename" (.Get "filename")
19+
"altText" (.Get "alt")
20+
"classname" (default nil (.Get "classname"))
21+
"sizes" $sizes
22+
"widths" $widths
23+
"nolink" (default false (.Get "nolink"))
24+
"isAsset" (default false (.Get "isAsset"))
25+
"maxwidth" (int $maxwidth)
26+
"page" ($.Page.File.Path)
27+
)
28+
}}
29+

‎package-lock.json

+3,089
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
{
2+
"name": "hugo-webpack-demo",
3+
"version": "1.0.0",
4+
"description": "See https://www.dlford.io/hugo-webpack-fast-websites-part-1/",
5+
"main": "index.js",
6+
"scripts": {
7+
"drafts": "hugo-extended list drafts",
8+
"build": "npm run hugo:build",
9+
"start": "npm run hugo:start",
10+
"hugo:build": "hugo-extended -d build --cleanDestinationDir --gc --printPathWarnings --printUnusedTemplates --templateMetricsHints --minify --verbose",
11+
"hugo:start": "hugo-extended -p 3001 server -D --cleanDestinationDir --gc --verbose"
12+
},
13+
"repository": {
14+
"type": "git",
15+
"url": "git+https://github.com/dlford/hugo-webpack-demo.git"
16+
},
17+
"keywords": [],
18+
"author": "",
19+
"license": "ISC",
20+
"bugs": {
21+
"url": "https://github.com/dlford/hugo-webpack-demo/issues"
22+
},
23+
"homepage": "https://github.com/dlford/hugo-webpack-demo#readme",
24+
"dependencies": {
25+
"hugo-extended": "^0.101.0"
26+
}
27+
}

0 commit comments

Comments
 (0)
Please sign in to comment.