Compare commits

...

8 Commits

Author SHA1 Message Date
Mark Dumay
b888ad5b02 Merge pull request #45 from markdumay/develop
Develop
2022-11-03 10:52:53 +01:00
mark
a6cc743573 Update dependencies 2022-11-03 10:49:46 +01:00
mark
577fc55fef Render remote images in img folder 2022-11-03 10:46:27 +01:00
mark
4df6168e87 Move all images to separate folder 2022-11-03 10:45:47 +01:00
Mark Dumay
14b6d25f79 Merge pull request #44 from markdumay/develop
External links
2022-11-03 07:23:02 +01:00
mark
2ed6e0aa4b Refine section about security policy 2022-11-03 07:18:13 +01:00
mark
dd9ccb4351 Refine content security policy 2022-11-03 07:12:40 +01:00
mark
96b7ce6259 Improve image processing 2022-11-01 06:30:06 +01:00
15 changed files with 185 additions and 150 deletions

View File

@@ -41,7 +41,7 @@
## About
![Logo](https://raw.githubusercontent.com/markdumay/hugo-theme-hinode/main/static/logo.png)
![Logo](https://raw.githubusercontent.com/markdumay/hugo-theme-hinode/main/static/img/logo.png)
- [Online Demo][demo]
- [PageSpeed Insights][pagespeed]
@@ -109,7 +109,7 @@ The main site configuration is available in `./config/_default`. Some remarks:
- **Content** - Ensure the `mainSections` in `config.toml` is synchronized with the `content` folder, default values are `["blog", "projects"]`.
- **Theme color** - Update `themeColor` and `themeOpacity` within the `[style]` section of `params.toml` to update the site's primary color and opacity. You can use the [WCAG Color Contrast Checker][contrast_checker] to validate the contrast ratio of your color to improve accessibility.
- **Comments** - Comments are powered by [utterances][utterances], a lightweight comments widget built on GitHub issues. Update the `repo` of the `[comments]` section of `params.toml`.
- **Security headings** - The local development server uses the header configuration as provided by `server.toml`. Similar settings are defined in the `netlify.toml` file provided in the repository's root when deploying to [Netlify][netlify].
- **Security policy** - The theme uses rather strict security policies by default. Be sure to allow references to external sources in the header configuration to avoid broken links. The settings of the local development server are defined in `server.toml`. Similar settings are defined in the `netlify.toml` file provided in the repository's root when deploying to [Netlify][netlify].
## Contributing

View File

@@ -21,10 +21,10 @@ schemaAuthorTwitter = "https://twitter.com/markdumay"
schemaAuthorLinkedIn = "https://www.linkedin.com/in/markdumay/"
schemaAuthorGitHub = "https://github.com/markdumay"
schemaLocale = "en-US"
schemaLogo = "logo512x512.png"
schemaLogo = "img/logo512x512.png"
schemaLogoWidth = 512
schemaLogoHeight = 512
schemaImage = "logo1280x640.png"
schemaImage = "img/logo1280x640.png"
schemaImageWidth = 1280
schemaImageHeight = 640
# schemaTwitter = "https://twitter.com/gethinode"
@@ -48,8 +48,8 @@ schemaSection = "blog"
themeOpacity = "10"
[main]
featurePhoto = "img/sunrise.jpg" # source: https://unsplash.com/photos/ZX6BPboJrYk
logo = "/logo_embedded.svg"
featurePhoto = "/img/sunrise.jpg" # source: https://unsplash.com/photos/ZX6BPboJrYk
logo = "/img/logo_embedded.svg"
[comments]

View File

@@ -16,7 +16,7 @@ for = '/**'
connect-src 'self' localhost:1313 ws://localhost:1313/livereload; \
font-src 'self' https://fonts.gstatic.com; \
frame-src 'self' localhost:1313 https://utteranc.es https://www.youtube-nocookie.com https://www.youtube.com; \
img-src 'self' https://i.vimeocdn.com https://i.ytimg.com; \
img-src 'self' https: data:; \
manifest-src 'self'; \
media-src 'self' \
"""

View File

@@ -5,7 +5,7 @@ date: "2022-04-11"
showComments: false
---
<p class="text-center"><img src="/logo_embedded.svg" class="img-fluid w-50" alt="Logo"></p>
<p class="text-center"><img src="/img/logo_embedded.svg" class="img-fluid w-50" alt="Logo"></p>
<center>Hinode is a clean blog theme for Hugo, an open-source static site generator.</center>

View File

@@ -4,7 +4,8 @@ title: "Emoji Support"
date: 2021-07-15
description: "Guide to emoji usage in Hugo"
tags: ["emoji"]
thumbnail: img/dunes.jpg # https://picsum.photos/id/184/4288/2848
# thumbnail: img/dunes.jpg
thumbnail: https://picsum.photos/id/184/4288/2848.jpg
credits: Photo by <a href="https://unsplash.com/@timdegroot">Tim de Groot</a> on <a href="https://unsplash.com/photos/yNGQ830uFB4">Unsplash</a>
---

View File

@@ -17,9 +17,20 @@
{{ with .Params.thumbnail }}
{{ $source := resources.Get . -}}
{{ $dim := "1280x640" -}}
{{ $img := ($source.Fill (printf "%s jpg" $dim)) -}}
{{ $.Scratch.Set "thumbnail" ($img.Permalink | absURL) -}}
{{ if not $source }}
{{ $source = resources.GetRemote . -}}
{{ if $source }}
{{ $filename := index (last 1 (split (delimit (split . "/") "," "") ",")) 0 }}
{{ $source = $source.Content | resources.FromString (printf "/img/%s" $filename) }}
{{ end }}
{{ end }}
{{ with $source }}
{{ $dim := "1280x640" -}}
{{ $img := (.Fill (printf "%s jpg" $dim)) -}}
{{ $.Scratch.Set "thumbnail" ($img.Permalink | absURL) -}}
{{ else }}
{{ warnf "Cannot find thumbnail: %q" . }}
{{ end }}
{{ else }}
{{ with .Site.Params.schemaImage -}}
{{ $.Scratch.Set "thumbnail" (. | absURL) }}

View File

@@ -1,9 +1,9 @@
<!--
Render an image with responsive image sizing. The image should be available as resource stored in the "assets"
folder. Images are resized using default media breakpoints and are converted to webp format. The image is
processed using the quality setting specified in the [imaging] section of the main config file (defaults to 75).
A fallback image is provided for older browsers. The image is wrapped in a figure if a caption is provided, else
the image is wrapped in a div with a ratio constraint. The partial supports the following arguments:
Render a local or remote image with responsive image sizing. Images are resized using default media breakpoints
and are converted to webp format. The image is processed using the quality setting specified in the [imaging]
section of the main config file (defaults to 75). A fallback image is provided for older browsers. The image is
wrapped in a figure if a caption is provided, else the image is wrapped in a div with a ratio constraint. The
partial supports the following arguments:
"url": Required relative url of the image, e.g. "img/example.jpg"
"ratio": Bootstrap ratio of the image, either "1x1", "4x3" (default), "16x9", or "21x9".
"outerClass": Optional class attribute of the outer div element, e.g. "img-wrap".
@@ -13,70 +13,85 @@
-->
{{ $img := resources.Get .url -}}
{{ $img := resources.GetMatch .url -}}
{{ $ratio := .ratio}}
{{ $outerClass := .outerClass -}}
{{ $innerClass := .innerClass -}}
{{ $title := .title -}}
{{ $caption := .caption -}}
<!-- default ratio 4x3 -->
{{ $smDim := "576x432" -}}
{{ $mdDim := "768x576" -}}
{{ $lgDim := "992x744" -}}
{{ $xlDim := "1200x900" -}}
{{ $xxlDim := "1400x1050" -}}
{{ if not $img }}
{{ $img = resources.GetRemote .url -}}
{{ if $img }}
{{ $filename := index (last 1 (split (delimit (split .url "/") "," "") ",")) 0 }}
{{ $img = $img.Content | resources.FromString (printf "/img/%s" $filename) }}
{{ end }}
{{ end}}
{{ if eq .ratio "1x1" -}}
{{ $smDim = "576x576" -}}
{{ $mdDim = "768x768" -}}
{{ $lgDim = "992x992" -}}
{{ $xlDim = "1200x1200" -}}
{{ $xxlDim = "1400x1400" -}}
{{ else if eq .ratio "16x9" -}}
{{ $smDim = "576x324" -}}
{{ $mdDim = "768x432" -}}
{{ $lgDim = "992x558" -}}
{{ $xlDim = "1200x675" -}}
{{ $xxlDim = "1400x788" -}}
{{ else if eq .ratio "21x9" -}}
{{ $smDim = "576x247" -}}
{{ $mdDim = "768x329" -}}
{{ $lgDim = "992x425" -}}
{{ $xlDim = "1200x514" -}}
{{ $xxlDim = "1400x600" -}}
{{ end -}}
{{ with $img }}
<!-- default ratio 4x3 -->
{{ $smDim := "576x432" -}}
{{ $mdDim := "768x576" -}}
{{ $lgDim := "992x744" -}}
{{ $xlDim := "1200x900" -}}
{{ $xxlDim := "1400x1050" -}}
{{ $sm := ($img.Fill (printf "%s webp" $smDim)) -}}
{{ $md := ($img.Fill (printf "%s webp" $mdDim)) -}}
{{ $lg := ($img.Fill (printf "%s webp" $lgDim)) -}}
{{ $xl := ($img.Fill (printf "%s webp" $xlDim)) -}}
{{ $xxl := ($img.Fill (printf "%s webp" $xxlDim)) -}}
{{ $fallback := ($img.Fill (printf "%s jpg" $xxlDim)) -}}
{{ if eq $ratio "1x1" -}}
{{ $smDim = "576x576" -}}
{{ $mdDim = "768x768" -}}
{{ $lgDim = "992x992" -}}
{{ $xlDim = "1200x1200" -}}
{{ $xxlDim = "1400x1400" -}}
{{ else if eq $ratio "16x9" -}}
{{ $smDim = "576x324" -}}
{{ $mdDim = "768x432" -}}
{{ $lgDim = "992x558" -}}
{{ $xlDim = "1200x675" -}}
{{ $xxlDim = "1400x788" -}}
{{ else if eq $ratio "21x9" -}}
{{ $smDim = "576x247" -}}
{{ $mdDim = "768x329" -}}
{{ $lgDim = "992x425" -}}
{{ $xlDim = "1200x514" -}}
{{ $xxlDim = "1400x600" -}}
{{ end -}}
{{ $sm := ($img.Fill (printf "%s webp" $smDim)) -}}
{{ $md := ($img.Fill (printf "%s webp" $mdDim)) -}}
{{ $lg := ($img.Fill (printf "%s webp" $lgDim)) -}}
{{ $xl := ($img.Fill (printf "%s webp" $xlDim)) -}}
{{ $xxl := ($img.Fill (printf "%s webp" $xxlDim)) -}}
{{ $fallback := ($img.Fill (printf "%s jpg" $xxlDim)) -}}
{{ with .caption -}}
<figure class="figure">
<img class="figure-img img-fluid {{ $innerClass }}"
srcset="
{{- with $xxl.RelPermalink -}}{{.}} 1400w{{- end -}}
{{- with $xl.RelPermalink -}}, {{.}} 1200w{{- end -}}
{{- with $lg.RelPermalink -}}, {{.}} 992w{{- end -}}
{{- with $md.RelPermalink -}}, {{.}} 768w{{- end -}}
{{- with $sm.RelPermalink -}}, {{.}} 576w{{- end -}}"
sizes="100vw"
src="{{ $fallback.RelPermalink }}"
alt="{{ $title }}">
<figcaption class="figure-caption">{{ . | safeHTML }}</figcaption>
</figure>
{{ else -}}
<div class="ratio ratio-{{ .ratio }} {{ .outerClass }}">
<img class="img-fluid {{ $innerClass }}"
srcset="
{{- with $xxl.RelPermalink -}}{{.}} 1400w{{- end -}}
{{- with $xl.RelPermalink -}}, {{.}} 1200w{{- end -}}
{{- with $lg.RelPermalink -}}, {{.}} 992w{{- end -}}
{{- with $md.RelPermalink -}}, {{.}} 768w{{- end -}}
{{- with $sm.RelPermalink -}}, {{.}} 576w{{- end -}}"
sizes="100vw"
src="{{ $fallback.RelPermalink }}"
alt="{{ $title }}">
</div>
{{ end -}}
{{ with $caption -}}
<figure class="figure">
<img class="figure-img img-fluid {{ $innerClass }}"
srcset="
{{- with $xxl.RelPermalink -}}{{.}} 1400w{{- end -}}
{{- with $xl.RelPermalink -}}, {{.}} 1200w{{- end -}}
{{- with $lg.RelPermalink -}}, {{.}} 992w{{- end -}}
{{- with $md.RelPermalink -}}, {{.}} 768w{{- end -}}
{{- with $sm.RelPermalink -}}, {{.}} 576w{{- end -}}"
sizes="100vw"
src="{{ $fallback.RelPermalink }}"
alt="{{ $title }}">
<figcaption class="figure-caption">{{ . | safeHTML }}</figcaption>
</figure>
{{ else -}}
<div class="ratio ratio-{{ $ratio }} {{ $outerClass }}">
<img class="img-fluid {{ $innerClass }}"
srcset="
{{- with $xxl.RelPermalink -}}{{.}} 1400w{{- end -}}
{{- with $xl.RelPermalink -}}, {{.}} 1200w{{- end -}}
{{- with $lg.RelPermalink -}}, {{.}} 992w{{- end -}}
{{- with $md.RelPermalink -}}, {{.}} 768w{{- end -}}
{{- with $sm.RelPermalink -}}, {{.}} 576w{{- end -}}"
sizes="100vw"
src="{{ $fallback.RelPermalink }}"
alt="{{ $title }}">
</div>
{{ end -}}
{{ else }}
{{ warnf "Cannot find image resource: %q" .url }}
{{ end }}

View File

@@ -1,8 +1,8 @@
<!--
Render an image with responsive image sizing. The image should be available as resource stored in the "assets"
folder. Images are resized using default media breakpoints and are converted to webp format. The image is
processed using the quality setting specified in the [imaging] section of the main config file (defaults to 75).
A fallback image is provided for older browsers. The partial supports the following arguments:
Render a local or remote image with responsive image sizing. Images are resized using default media breakpoints
and are converted to webp format. The image is processed using the quality setting specified in the [imaging]
section of the main config file (defaults to 75). A fallback image is provided for older browsers. The partial
supports the following arguments:
"src": Required relative url of the image, e.g. "img/example.jpg"
"ratio": Bootstrap ratio of the image, either "1x1", "4x3" (default), "16x9", or "21x9".
"class": Optional class attribute of the inner img element, e.g. "rounded".
@@ -13,64 +13,72 @@
{{ if isset .Params "src" }}
{{ $url := .Get "src" }}
{{ $ratio := "4x3" }}
{{ $class := "" }}
{{ $title := "" }}
{{ $caption := "" }}
{{ $img := resources.Get $url }}
{{ with .Get "ratio" }}{{ $ratio = . }}{{ end }}
{{ with .Get "class" }}{{ $class = . }}{{ end }}
{{ with .Get "title" }}{{ $title = . }}{{ end }}
{{ with .Get "caption" }}{{ $caption = . }}{{ end }}
<!-- default ratio 4x3 -->
{{ $smDim := "576x432" }}
{{ $mdDim := "768x576" }}
{{ $lgDim := "992x744" }}
{{ $xlDim := "1200x900" }}
{{ $xxlDim := "1400x1050" }}
{{ if eq $ratio "1x1"}}
{{ $smDim = "576x576" }}
{{ $mdDim = "768x768" }}
{{ $lgDim = "992x992" }}
{{ $xlDim = "1200x1200" }}
{{ $xxlDim = "1400x1400" }}
{{ else if eq $ratio "16x9"}}
{{ $smDim = "576x324" }}
{{ $mdDim = "768x432" }}
{{ $lgDim = "992x558" }}
{{ $xlDim = "1200x675" }}
{{ $xxlDim = "1400x788" }}
{{ else if eq $ratio "21x9"}}
{{ $smDim = "576x247" }}
{{ $mdDim = "768x329" }}
{{ $lgDim = "992x425" }}
{{ $xlDim = "1200x514" }}
{{ $xxlDim = "1400x600" }}
{{ end }}
{{ $sm := ($img.Fill (printf "%s webp" $smDim)) }}
{{ $md := ($img.Fill (printf "%s webp" $mdDim)) }}
{{ $lg := ($img.Fill (printf "%s webp" $lgDim)) }}
{{ $xl := ($img.Fill (printf "%s webp" $xlDim)) }}
{{ $xxl := ($img.Fill (printf "%s webp" $xxlDim)) }}
{{ $fallback := ($img.Fill (printf "%s jpg" $xxlDim)) }}
{{ $class := .Get "class" }}
{{ $title := .Get "title" }}
{{ $caption := .Get "caption" }}
<figure class="figure">
<img class="figure-img img-fluid {{ $class}}"
srcset="
{{- with $xxl.RelPermalink -}}{{.}} 1400w{{- end -}}
{{- with $xl.RelPermalink -}}, {{.}} 1200w{{- end -}}
{{- with $lg.RelPermalink -}}, {{.}} 992w{{- end -}}
{{- with $md.RelPermalink -}}, {{.}} 768w{{- end -}}
{{- with $sm.RelPermalink -}}, {{.}} 576w{{- end -}}"
sizes="100vw"
src="{{ $fallback.RelPermalink }}"
alt="{{ $title }}">
<figcaption class="figure-caption">{{ $caption }}</figcaption>
</figure>
{{ $img := resources.GetMatch $url }}
{{ if not $img }}
{{ $img = resources.GetRemote $url -}}
{{ if $img }}
{{ $filename := index (last 1 (split (delimit (split $url "/") "," "") ",")) 0 }}
{{ $img = $img.Content | resources.FromString (printf "/img/%s" $filename) }}
{{ end }}
{{ end}}
{{ with $img }}
<!-- default ratio 4x3 -->
{{ $smDim := "576x432" }}
{{ $mdDim := "768x576" }}
{{ $lgDim := "992x744" }}
{{ $xlDim := "1200x900" }}
{{ $xxlDim := "1400x1050" }}
{{ if eq $ratio "1x1"}}
{{ $smDim = "576x576" }}
{{ $mdDim = "768x768" }}
{{ $lgDim = "992x992" }}
{{ $xlDim = "1200x1200" }}
{{ $xxlDim = "1400x1400" }}
{{ else if eq $ratio "16x9"}}
{{ $smDim = "576x324" }}
{{ $mdDim = "768x432" }}
{{ $lgDim = "992x558" }}
{{ $xlDim = "1200x675" }}
{{ $xxlDim = "1400x788" }}
{{ else if eq $ratio "21x9"}}
{{ $smDim = "576x247" }}
{{ $mdDim = "768x329" }}
{{ $lgDim = "992x425" }}
{{ $xlDim = "1200x514" }}
{{ $xxlDim = "1400x600" }}
{{ end }}
{{ $sm := ($img.Fill (printf "%s webp" $smDim)) }}
{{ $md := ($img.Fill (printf "%s webp" $mdDim)) }}
{{ $lg := ($img.Fill (printf "%s webp" $lgDim)) }}
{{ $xl := ($img.Fill (printf "%s webp" $xlDim)) }}
{{ $xxl := ($img.Fill (printf "%s webp" $xxlDim)) }}
{{ $fallback := ($img.Fill (printf "%s jpg" $xxlDim)) }}
<figure class="figure">
<img class="figure-img img-fluid {{ $class}}"
srcset="
{{- with $xxl.RelPermalink -}}{{.}} 1400w{{- end -}}
{{- with $xl.RelPermalink -}}, {{.}} 1200w{{- end -}}
{{- with $lg.RelPermalink -}}, {{.}} 992w{{- end -}}
{{- with $md.RelPermalink -}}, {{.}} 768w{{- end -}}
{{- with $sm.RelPermalink -}}, {{.}} 576w{{- end -}}"
sizes="100vw"
src="{{ $fallback.RelPermalink }}"
alt="{{ $title }}">
<figcaption class="figure-caption">{{ $caption }}</figcaption>
</figure>
{{ else }}
{{ warnf "Cannot find image resource: %q" $url }}
{{ end }}
{{ else }}
{{ errorf "missing value for param 'src': %s" .Position }}
{{ errorf "Missing value for param 'src': %s" .Position }}
{{ end }}

18
package-lock.json generated
View File

@@ -1,12 +1,12 @@
{
"name": "@markdumay/hugo-theme-hinode",
"version": "0.5.0",
"version": "0.5.2",
"lockfileVersion": 2,
"requires": true,
"packages": {
"": {
"name": "@markdumay/hugo-theme-hinode",
"version": "0.5.0",
"version": "0.5.2",
"hasInstallScript": true,
"license": "MIT",
"devDependencies": {
@@ -17,7 +17,7 @@
"eslint": "^8.26.0",
"eslint-config-standard": "^17.0.0",
"eslint-plugin-import": "^2.26.0",
"eslint-plugin-n": "^15.3.0",
"eslint-plugin-n": "^15.4.0",
"eslint-plugin-promise": "^6.1.1",
"exec-bin": "^1.0.0",
"flexsearch": "^0.7.31",
@@ -1727,9 +1727,9 @@
"dev": true
},
"node_modules/eslint-plugin-n": {
"version": "15.3.0",
"resolved": "https://registry.npmjs.org/eslint-plugin-n/-/eslint-plugin-n-15.3.0.tgz",
"integrity": "sha512-IyzPnEWHypCWasDpxeJnim60jhlumbmq0pubL6IOcnk8u2y53s5QfT8JnXy7skjHJ44yWHRb11PLtDHuu1kg/Q==",
"version": "15.4.0",
"resolved": "https://registry.npmjs.org/eslint-plugin-n/-/eslint-plugin-n-15.4.0.tgz",
"integrity": "sha512-MkoKy9/lfd52TAXK4fkABgCp0aglk82Q3viy2UOWIEpTVE/Cem5P/UAxMBA4vSw7Gy+2egPqImE9euitLGp5aw==",
"dev": true,
"dependencies": {
"builtins": "^5.0.1",
@@ -6811,9 +6811,9 @@
}
},
"eslint-plugin-n": {
"version": "15.3.0",
"resolved": "https://registry.npmjs.org/eslint-plugin-n/-/eslint-plugin-n-15.3.0.tgz",
"integrity": "sha512-IyzPnEWHypCWasDpxeJnim60jhlumbmq0pubL6IOcnk8u2y53s5QfT8JnXy7skjHJ44yWHRb11PLtDHuu1kg/Q==",
"version": "15.4.0",
"resolved": "https://registry.npmjs.org/eslint-plugin-n/-/eslint-plugin-n-15.4.0.tgz",
"integrity": "sha512-MkoKy9/lfd52TAXK4fkABgCp0aglk82Q3viy2UOWIEpTVE/Cem5P/UAxMBA4vSw7Gy+2egPqImE9euitLGp5aw==",
"dev": true,
"requires": {
"builtins": "^5.0.1",

View File

@@ -1,6 +1,6 @@
{
"name": "@markdumay/hugo-theme-hinode",
"version": "0.5.0",
"version": "0.5.2",
"description": "Hinode is a clean blog theme for Hugo, an open-source static site generator",
"main": "index.js",
"publishConfig": {
@@ -52,7 +52,7 @@
"eslint": "^8.26.0",
"eslint-config-standard": "^17.0.0",
"eslint-plugin-import": "^2.26.0",
"eslint-plugin-n": "^15.3.0",
"eslint-plugin-n": "^15.4.0",
"eslint-plugin-promise": "^6.1.1",
"exec-bin": "^1.0.0",
"flexsearch": "^0.7.31",
@@ -65,6 +65,6 @@
"stylelint-config-standard-scss": "^6.0.0"
},
"otherDependencies": {
"hugo": "0.104.3"
"hugo": "0.105.0"
}
}

View File

Before

Width:  |  Height:  |  Size: 36 KiB

After

Width:  |  Height:  |  Size: 36 KiB

View File

Before

Width:  |  Height:  |  Size: 2.3 KiB

After

Width:  |  Height:  |  Size: 2.3 KiB

View File

Before

Width:  |  Height:  |  Size: 26 KiB

After

Width:  |  Height:  |  Size: 26 KiB

View File

Before

Width:  |  Height:  |  Size: 17 KiB

After

Width:  |  Height:  |  Size: 17 KiB

View File

Before

Width:  |  Height:  |  Size: 6.7 KiB

After

Width:  |  Height:  |  Size: 6.7 KiB