.drone.yml: Build on Node.js 16

We want to build on LTS or "current" releases only.

See: https://nodejs.org/en/about/releases/

.drone.yml

@@ -0,0 +1,43 @@
+kind: pipeline
+type: docker
+name: node12
+
+steps:
+- name: build
+  image: node:12-alpine
+  commands:
+  - npm --version
+  - npm install -g npm
+  - npm --version
+  - npm install
+  - npm run build
+
+---
+kind: pipeline
+type: docker
+name: node14
+
+steps:
+- name: build
+  image: node:14-alpine
+  commands:
+  - npm --version
+  - npm install -g npm
+  - npm --version
+  - npm install
+  - npm run build
+
+---
+kind: pipeline
+type: docker
+name: node16
+
+steps:
+- name: build
+  image: node:16-alpine
+  commands:
+  - npm --version
+  - npm install -g npm
+  - npm --version
+  - npm install
+  - npm run build

.travis.yml

@@ -1,10 +0,0 @@
-language: node_js
-node_js:
-  - 8
-  - 10
-  - 11
-script: npm run build
-sudo: false
-dist: xenial
-
-# vim: ts=2 sw=2 et

CHANGELOG.md

@@ -4,22 +4,67 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## Unreleased Changes
+### Updated
+- Bootstrap v4.6.0, webpack v5.16.0, haven 0.6.2, etc
+
+## [[ 1.6.0 ]] - 2020-12-05
+### Changed
+- Migrate to dart sass from node-sass (see [LibSass is Deprecated](https://sass-lang.com/blog/libsass-is-deprecated))
+- Use new [figure shortcode](https://cpbotha.net/2020/05/02/drop-in-replacement-for-hugo-figure-shortcode-with-responsive-img-srcset/a) that automatically processes images in a post's page bundle to multiple resolutions and outputs an appropriate img srcset (falls back to getting images from static dir)
+
+## [[1.5.1]] - 2020-11-15
+### Updated
+- Minor version bump for bootstrap, node-sass, and fontawesome
+- Update to webpack 5 (brings better tree shaking, reduces fontawesome JS by 8K)
+
+### Fixed
+- JSON-LD keyword formatting @jeremyrcampb #140
+
+### Added
+- Ability to omit date in front matter @jeremyrcampb #141
+
+## [[1.5.0]] - 2020-05-17
+### Updated
+- i18n language keys for German (#dermellor, #131)
+- Boostrap v4.5.0
+- Minor version bump for webpack, node-sass, and fontawesome
+
+### Changed
+- Use Haven for GDPR-compliant popup instead of cookieconsent, which is now
+configured as *opt-in* and does not load Google Analytics or send a hit until
+the user agrees.
+  - Note to translators that some strings have changed, please check:
+    - `cookieAccept`: the string for the "Agree" button
+    - `cookieDecline`: the string for the "Disagree" button
+
+## [[1.4.2]] - 2020-03-22
+### Fixed
+- Encoding of dates in HTML (@alanorth)
+
+## [[1.4.1]] - 2020-03-19
+### Updated
+- npm dependencies: rtlcss 2.5.0, webpack 4.42.0, fontawesome solid icons 5.12.1
+
+### Fixed
+- Fix "Unparsable structured data" error in JSON-LD (@alanorth)
+
 ## [[1.4.0]] - 2020-01-28
 ### Added
 - Farsi strings for user interface
 
-## Updated
+### Updated
 - bootstrap 4.4.1
 - Fix typo in README.md (@xekon, #118)
 - Font Awesome 5 (make sure you [update](https://fontawesome.com/how-to-use/on-the-web/setup/upgrading-from-version-4) any custom icons you might be using in your content, site layouts, partials, etc).
 
-## Changed
+### Changed
 - Use Hugo's built-in subresource integrity support instead of the generatesri
 tooling that I wrote by hand a few years ago (#120, @alanorth)
 - Use Font Awesome SVGs via JavaScript instead of web fonts (@alanorth)
 - Category and tag links now have a trailing slash (#128, @alanorth)
 
-## Removed
+### Removed
 - Several references to Google Plus (@xekon, #122)
 
 ## [[1.3.3]] - 2019-12-02

README.md

@@ -1,4 +1,4 @@
-# Hugo Bootstrap v4 Blog [![Build Status](https://travis-ci.org/alanorth/hugo-theme-bootstrap4-blog.svg?branch=master)](https://travis-ci.org/alanorth/hugo-theme-bootstrap4-blog) [![builds.sr.ht status](https://builds.sr.ht/~alanorth/hugo-theme-bootstrap4-blog.svg)](https://builds.sr.ht/~alanorth/hugo-theme-bootstrap4-blog?)
+# Hugo Bootstrap v4 Blog [![Build Status](https://ci.mjanja.ch/api/badges/alanorth/hugo-theme-bootstrap4-blog/status.svg)](https://ci.mjanja.ch/alanorth/hugo-theme-bootstrap4-blog) [![builds.sr.ht status](https://builds.sr.ht/~alanorth/hugo-theme-bootstrap4-blog.svg)](https://builds.sr.ht/~alanorth/hugo-theme-bootstrap4-blog?)
 A simple but opinionated [Hugo](https://gohugo.io) theme geared towards blog-style content. Based on the older two-column [Bootstrap blog example](https://v4-alpha.getbootstrap.com/examples/blog/) that was used for several Bootstrap versions, but has now been retired in favor of a "snarky" (their words) new example as of version [4.0.0's final release](https://blog.getbootstrap.com/2018/01/18/bootstrap-4/).
 
 ![Screenshot](https://raw.githubusercontent.com/alanorth/hugo-theme-bootstrap4-blog/master/screenshot.png "Screenshot")
@@ -11,14 +11,14 @@ See [picturingjordan.com](https://picturingjordan.com) for an example of this th
 - Uses Bootstrap v4's [native system font stack](https://getbootstrap.com/docs/4.0/content/reboot/#native-font-stack) to load quickly and look good on all platforms
 - Excellent [structured data](https://developers.google.com/search/docs/guides/intro-structured-data) (JSON-LD), [OpenGraph](http://ogp.me), and [Twitter Card](https://dev.twitter.com/cards/types) metadata support
 - robots.txt linking to XML sitemap (disabled by default, see [Hugo docs](https://gohugo.io/extras/robots-txt/))
-- Basic support for [multi-lingual content](https://gohugo.io/content-management/multilingual/) (added in Hugo 0.17) and user interface translation (i18n), including RTL languages like Arabic
+- Basic support for [multi-lingual content](https://gohugo.io/content-management/multilingual/) (added in Hugo 0.17) and user interface translation (i18n), including RTL languages like Arabic and Farsi
 - Supports Google, Bing, and Yandex site verification via meta tags
-- Supports Google Analytics (async version), see [Hugo docs](https://gohugo.io/extras/analytics/)
+- Supports GDPR-compliant Google Analytics (script is not even loaded until *after* the user agrees) with configurable consent banner, see [`exampleSite/config.toml`](https://github.com/alanorth/hugo-theme-bootstrap4-blog/blob/master/exampleSite/config.toml)
 - Supports Disqus comments, see [Hugo docs](https://gohugo.io/extras/comments/)
-- Can show a message about cookie usage to the user, see [`exampleSite/config.toml`](https://github.com/alanorth/hugo-theme-bootstrap4-blog/blob/master/exampleSite/config.toml)
 - Allow addition of custom `<head>` code in site's `layouts/partials/head-custom.html` (see [#17](https://github.com/alanorth/hugo-theme-bootstrap4-blog/pull/17))
 - Configurable display of summaries of content in list templates.
 - Configurable keywords for every post
+- Supports automatic generation of `<img>` srcsets for images in [page bundles](https://gohugo.io/content-management/page-bundles/) using a [new figure shortcode](https://cpbotha.net/2020/05/02/drop-in-replacement-for-hugo-figure-shortcode-with-responsive-img-srcset/) (falls back to default Hugo behavior of looking up images in the static directory)
 
 ## Usage
 Clone the repository to your site's `themes` directory. Refer to [`exampleSite/config.toml`](https://github.com/alanorth/hugo-theme-bootstrap4-blog/blob/master/exampleSite/config.toml) for recommended configuration values.

assets/css/cookieconsent.min.css

@@ -1,6 +0,0 @@
-.cc-window{opacity:1;transition:opacity 1s ease}.cc-window.cc-invisible{opacity:0}.cc-animate.cc-revoke{transition:transform 1s ease}.cc-animate.cc-revoke.cc-top{transform:translateY(-2em)}.cc-animate.cc-revoke.cc-bottom{transform:translateY(2em)}.cc-animate.cc-revoke.cc-active.cc-bottom,.cc-animate.cc-revoke.cc-active.cc-top,.cc-revoke:hover{transform:translateY(0)}.cc-grower{max-height:0;overflow:hidden;transition:max-height 1s}
-.cc-link,.cc-revoke:hover{text-decoration:underline}.cc-revoke,.cc-window{position:fixed;overflow:hidden;box-sizing:border-box;font-family:Helvetica,Calibri,Arial,sans-serif;font-size:16px;line-height:1.5em;display:-ms-flexbox;display:flex;-ms-flex-wrap:nowrap;flex-wrap:nowrap;z-index:9999}.cc-window.cc-static{position:static}.cc-window.cc-floating{padding:2em;max-width:24em;-ms-flex-direction:column;flex-direction:column}.cc-window.cc-banner{padding:1em 1.8em;width:100%;-ms-flex-direction:row;flex-direction:row}.cc-revoke{padding:.5em}.cc-header{font-size:18px;font-weight:700}.cc-btn,.cc-close,.cc-link,.cc-revoke{cursor:pointer}.cc-link{opacity:.8;display:inline-block;padding:.2em}.cc-link:hover{opacity:1}.cc-link:active,.cc-link:visited{color:initial}.cc-btn{display:block;padding:.4em .8em;font-size:.9em;font-weight:700;border-width:2px;border-style:solid;text-align:center;white-space:nowrap}.cc-banner .cc-btn:last-child{min-width:140px}.cc-highlight .cc-btn:first-child{background-color:transparent;border-color:transparent}.cc-highlight .cc-btn:first-child:focus,.cc-highlight .cc-btn:first-child:hover{background-color:transparent;text-decoration:underline}.cc-close{display:block;position:absolute;top:.5em;right:.5em;font-size:1.6em;opacity:.9;line-height:.75}.cc-close:focus,.cc-close:hover{opacity:1}
-.cc-revoke.cc-top{top:0;left:3em;border-bottom-left-radius:.5em;border-bottom-right-radius:.5em}.cc-revoke.cc-bottom{bottom:0;left:3em;border-top-left-radius:.5em;border-top-right-radius:.5em}.cc-revoke.cc-left{left:3em;right:unset}.cc-revoke.cc-right{right:3em;left:unset}.cc-top{top:1em}.cc-left{left:1em}.cc-right{right:1em}.cc-bottom{bottom:1em}.cc-floating>.cc-link{margin-bottom:1em}.cc-floating .cc-message{display:block;margin-bottom:1em}.cc-window.cc-floating .cc-compliance{-ms-flex:1;flex:1}.cc-window.cc-banner{-ms-flex-align:center;align-items:center}.cc-banner.cc-top{left:0;right:0;top:0}.cc-banner.cc-bottom{left:0;right:0;bottom:0}.cc-banner .cc-message{-ms-flex:1;flex:1}.cc-compliance{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-line-pack:justify;align-content:space-between}.cc-compliance>.cc-btn{-ms-flex:1;flex:1}.cc-btn+.cc-btn{margin-left:.5em}
-@media print{.cc-revoke,.cc-window{display:none}}@media screen and (max-width:900px){.cc-btn{white-space:normal}}@media screen and (max-width:414px) and (orientation:portrait),screen and (max-width:736px) and (orientation:landscape){.cc-window.cc-top{top:0}.cc-window.cc-bottom{bottom:0}.cc-window.cc-banner,.cc-window.cc-left,.cc-window.cc-right{left:0;right:0}.cc-window.cc-banner{-ms-flex-direction:column;flex-direction:column}.cc-window.cc-banner .cc-compliance{-ms-flex:1;flex:1}.cc-window.cc-floating{max-width:none}.cc-window .cc-message{margin-bottom:1em}.cc-window.cc-banner{-ms-flex-align:unset;align-items:unset}}
-.cc-floating.cc-theme-classic{padding:1.2em;border-radius:5px}.cc-floating.cc-type-info.cc-theme-classic .cc-compliance{text-align:center;display:inline;-ms-flex:none;flex:none}.cc-theme-classic .cc-btn{border-radius:5px}.cc-theme-classic .cc-btn:last-child{min-width:140px}.cc-floating.cc-type-info.cc-theme-classic .cc-btn{display:inline-block}
-.cc-theme-edgeless.cc-window{padding:0}.cc-floating.cc-theme-edgeless .cc-message{margin:2em 2em 1.5em}.cc-banner.cc-theme-edgeless .cc-btn{margin:0;padding:.8em 1.8em;height:100%}.cc-banner.cc-theme-edgeless .cc-message{margin-left:1em}.cc-floating.cc-theme-edgeless .cc-btn+.cc-btn{margin-left:0}

exampleSite/config.toml

@@ -91,5 +91,7 @@ summaryLength = 50
 # Languages to render
 #[languages.en]
 #[languages.bg]
+  # Bulgarian date format is dd.mm.yyyy
+  #date_format = "02.01.2006"
 
 # vim: ts=2 sw=2 et

i18n/ar.yaml

@@ -28,7 +28,7 @@
 - id: cookieLink
   translation: ".اعْرَف أَكْثَر"
 
-- id: cookieDismiss
+- id: cookieAccept
   translation: "!أُوَافِق"
 
 - id: backToTop

i18n/bg.yaml

@@ -28,8 +28,11 @@
 - id: cookieLink
   translation: "Научете повече."
 
-- id: cookieDismiss
+- id: cookieAccept
-  translation: "Разбрах!"
+  translation: "Съгласен съм"
+
+- id: cookieDecline
+  translation: "Не съм съгласен"
 
 - id: backToTop
   translation: "Нагоре"

i18n/de.yaml

@@ -28,11 +28,17 @@
 - id: cookieLink
   translation: "Weitere Informationen"
 
-- id: cookieDismiss
+- id: cookieDecline
-  translation: "OK"
+  translation: "Nicht zustimmen"
 
 - id: backToTop
   translation: "Zurück zum Anfang"
 
 - id: links
   translation: "Links"
+  
+- id: authoredBy
+  translation: "von"
+
+- id: postedIn
+  translation: "in"

i18n/en.yaml

@@ -28,8 +28,11 @@
 - id: cookieLink
   translation: "Learn more."
 
-- id: cookieDismiss
+- id: cookieAccept
-  translation: "Got it!"
+  translation: "Agree"
+
+- id: cookieDecline
+  translation: "Disagree"
 
 - id: backToTop
   translation: "Back to top"

i18n/es.yaml

@@ -28,7 +28,7 @@
 - id: cookieLink
   translation: "Leer más."
 
-- id: cookieDismiss
+- id: cookieAccept
   translation: "Comprendido!"
 
 - id: backToTop

i18n/fa.yaml

@@ -28,7 +28,7 @@
 - id: cookieLink
   translation: ".بیشتر بدانید"
 
-- id: cookieDismiss
+- id: cookieAccept
   translation: "!متوجه شدم"
 
 - id: backToTop

i18n/fr.yaml

@@ -28,7 +28,7 @@
 - id: cookieLink
   translation: "En savoir plus."
 
-- id: cookieDismiss
+- id: cookieAccept
   translation: "J'ai compris !"
 
 - id: backToTop

i18n/id.yaml

@@ -28,7 +28,7 @@
 - id: cookieLink
   translation: "Pelajari"
 
-- id: cookieDismiss
+- id: cookieAccept
   translation: "Paham!"
 
 - id: backToTop

i18n/nl.yaml

@@ -28,7 +28,7 @@
 - id: cookieLink
   translation: "Lees hier meer"
 
-- id: cookieDismiss
+- id: cookieAccept
   translation: "OK"
 
 - id: backToTop

i18n/no.yaml

@@ -28,7 +28,7 @@
 - id: cookieLink
   translation: "Lær mer."
 
-- id: cookieDismiss
+- id: cookieAccept
   translation: "Greit!"
 
 - id: backToTop

i18n/pt.yaml

@@ -28,5 +28,5 @@
 - id: cookieLink
   translation: "Saiba mais."
 
-- id: cookieDismiss
+- id: cookieAccept
   translation: "Ok!"

i18n/zh-Hant-TW.yaml

@@ -28,7 +28,7 @@
 - id: cookieLink
   translation: "進一步瞭解。"
 
-- id: cookieDismiss
+- id: cookieAccept
   translation: "知道了！"
 
 - id: backToTop

layouts/_default/baseof.html

@@ -31,9 +31,7 @@
       {{ printf `<link rel="%s" type="%s" href="%s" title="%s" />` .Rel .MediaType.Type .Permalink $.Site.Title | safeHTML }}
     {{ end -}}
 
-    {{ template "_internal/google_analytics_async.html" . }}
+    {{ if .Site.GoogleAnalytics }}
-
-    {{ if .Site.Params.cookie_consent_info_url }}
     {{ partial "cookie-consent.html" . }}
     {{ end }}
 

layouts/_default/content.html

@@ -3,7 +3,7 @@
 <article class="blog-post">
   <header>
     <h2 class="blog-post-title" dir="auto"><a href="{{ .Permalink }}">{{ .Title | markdownify }}</a></h2>
-    <p class="blog-post-meta"><time datetime="{{ .Date.Format "2006-01-02T15:04:05Z07:00" }}">{{ .Date.Format $dateFormat }}</time> {{ i18n "authoredBy" }} {{ .Params.author | default .Site.Params.author }}{{ if or (.Params.categories) (.Params.tags) }} {{ i18n "postedIn" }} {{ partial "meta-terms.html" . }}{{ end }}</p>
+    <p class="blog-post-meta"><time {{ .Date.Format "2006-01-02T15:04:05Z07:00" | printf "datetime=%q" | safeHTMLAttr }}>{{ .Date.Format $dateFormat }}</time> {{ i18n "authoredBy" }} {{ .Params.author | default .Site.Params.author }}{{ if or (.Params.categories) (.Params.tags) }} {{ i18n "postedIn" }} {{ partial "meta-terms.html" . }}{{ end }}</p>
   </header>
   {{ .Content }}
 </article> <!-- /.blog-post -->

layouts/_default/list.html

@@ -4,21 +4,22 @@
   "@context": "http://schema.org",
   "@type": "Blog",
   {{- /* Google recommends the headline be no more than 110 characters */}}
-  "headline": "{{ substr .Site.Title 0 110 }}",
+  "headline": {{ substr .Site.Title 0 110 }},
-  "url" : "{{ printf "%s" .Permalink }}",
+  "url" : {{ printf "%s" .Permalink }},
   "author": {
     "@type": "Person",
-    "name": "{{ .Site.Params.author }}"
+    "name": {{ .Site.Params.author }}
   },
   {{- $ISO8601 := "2006-01-02T15:04:05-07:00" }}
   {{- if not .Date.IsZero }}
   "dateModified": {{ .Date.Format $ISO8601 }},
   {{- end }}
   {{- /* all of the site's categories/tags, from Hugo's tpl/template_embedded.go */}}
-  "keywords": "{{ range $plural, $terms := .Site.Taxonomies }}{{ range $term, $val := $terms }}{{ printf "%s," $term }}{{ end }}{{ end }}"
+  {{- $keywords := slice }}{{ range $plural, $terms := .Site.Taxonomies }}{{ range $term, $val := $terms }}{{ $keywords = $keywords | append $term }}{{ end }}{{ end }}
+  "keywords": {{ delimit $keywords ", " }} 
   {{- with .Site.Params.description -}}
   ,
-  "description": "{{- . -}}"
+  "description": {{- . -}}
   {{- end }}
 }
 </script>

layouts/_default/single.html

@@ -6,22 +6,32 @@
   "@context": "http://schema.org",
   "@type": "BlogPosting",
   {{- /* Google recommends the headline be no more than 110 characters */}}
-  "headline": "{{ substr .Title 0 110 }}",
+  "headline": {{ substr .Title 0 110 }},
-  {{- with .Params.images -}}{{ range first 1 . }}
+  {{- with .Params.images -}}{{- range first 1 . -}}
+  {{/* try to get the image from the page bundle */}}
+  {{- with $.Page.Resources.GetMatch (printf "*%s*" .) }}
   "image": {
     "@type": "ImageObject",
-    "url": "{{ . | absURL }}"
+    "url": {{ .Permalink }},
+    "height": "{{ .Height }}",
+    "width": "{{ .Width }}"
+  {{/* otherwise, get the image from static */}}
+  {{- else }}
+  "image": {
+    "@type": "ImageObject",
+    {{- $image := . -}}
     {{- /* Don't try to get imageConfig if image param is not local */ -}}
     {{- if not (or (hasPrefix . "http://") (hasPrefix . "https://")) -}}
-    {{- with (imageConfig (printf "/static/%s" .)) -}}
+    {{- with (imageConfig (printf "/static/%s" .)) }}
-    ,
+    "url": {{ $image | absURL }},
     "height": "{{ .Height }}",
     "width": "{{ .Width }}"
     {{- end -}}
-    {{ end }}
+    {{- end -}}
+  {{ end }}
   },
   {{- end -}}{{ end }}
-  "url": "{{ printf "%s" .Permalink }}",
+  "url": {{ printf "%s" .Permalink }},
   "wordCount": "{{ .WordCount }}",
   {{- $ISO8601 := "2006-01-02T15:04:05-07:00" }}
   {{- if not .PublishDate.IsZero }}
@@ -34,16 +44,16 @@
   {{- end }}
   "author": {
     "@type": "Person",
-    "name": "{{ .Params.author | default .Site.Params.author }}"
+    "name": {{ .Params.author | default .Site.Params.author }}
   }
   {{- if or (.Params.keywords) (or (.Params.categories) (.Params.tags)) -}}
   ,
-  "keywords": "{{ delimit (union .Params.keywords (union .Params.categories .Params.tags)) ", " }}"
+  "keywords": {{ delimit (union .Params.keywords (union .Params.categories .Params.tags)) ", " }}
   {{- end }}
 
   {{- with .Params.description -}}
   ,
-  "description": "{{ . }}"
+  "description": {{ . }}
   {{- end }}
 }
 </script>
@@ -56,7 +66,9 @@
 <article class="blog-post">
   <header>
     <h2 class="blog-post-title" dir="auto"><a href="{{ .Permalink }}">{{ .Title | markdownify }}</a></h2>
-    <p class="blog-post-meta"><time datetime="{{ .Date.Format "2006-01-02T15:04:05Z07:00" }}">{{ .Date.Format $dateFormat }}</time> {{ i18n "authoredBy" }} {{ .Params.author | default .Site.Params.author }}{{ if or (.Params.categories) (.Params.tags) }} {{ i18n "postedIn" }} {{ partial "meta-terms.html" . }}{{ end }}</p>
+    <p class="blog-post-meta">
+{{ if not .PublishDate.IsZero }}<time {{ .Date.Format "2006-01-02T15:04:05Z07:00" | printf "datetime=%q" | safeHTMLAttr }}>{{ .Date.Format $dateFormat }}</time>{{ end }}
+{{ if or (.Params.categories) (.Params.tags) }} {{ i18n "postedIn" }} {{ partial "meta-terms.html" . }}{{ end }}</p>
   </header>
   {{ .Content }}
 

layouts/_default/summary.html

@@ -3,7 +3,7 @@
 <article class="blog-post">
   <header>
     <h2 class="blog-post-title" dir="auto"><a href="{{ .Permalink }}">{{ .Title | markdownify }}</a></h2>
-    <p class="blog-post-meta"><time datetime="{{ .Date.Format "2006-01-02T15:04:05Z07:00" }}">{{ .Date.Format $dateFormat }}</time> {{ i18n "authoredBy" }} {{ .Params.author | default .Site.Params.author }}{{ if or (.Params.categories) (.Params.tags) }} {{ i18n "postedIn" }} {{ partial "meta-terms.html" . }}{{ end }}</p>
+    <p class="blog-post-meta"><time {{ .Date.Format "2006-01-02T15:04:05Z07:00" | printf "datetime=%q" | safeHTMLAttr }}>{{ .Date.Format $dateFormat }}</time> {{ i18n "authoredBy" }} {{ .Params.author | default .Site.Params.author }}{{ if or (.Params.categories) (.Params.tags) }} {{ i18n "postedIn" }} {{ partial "meta-terms.html" . }}{{ end }}</p>
   </header>
   {{ .Summary }}
   <a href='{{ .Permalink }}'>{{ i18n "readMore" }}</a>

layouts/partials/cookie-consent.html

@@ -1,28 +1,40 @@
-{{ $cookieConsentStyle := resources.Get "css/cookieconsent.min.css" | resources.Fingerprint }}
+{{ $cookieConsentScript := resources.Get "js/haven.umd.min.js" | resources.Fingerprint }}
-<link href="{{ $cookieConsentStyle.Permalink }}" rel="stylesheet" type="text/css"{{ if not .Site.Params.disable_sri }} integrity="{{ $cookieConsentStyle.Data.Integrity }}" crossorigin="anonymous"{{ end }}>
+<script src="{{ $cookieConsentScript.Permalink }}"{{ if not .Site.Params.disable_sri }} integrity="{{ $cookieConsentScript.Data.Integrity }}" crossorigin="anonymous"{{ end }}></script>
-{{ $cookieConsentScript := resources.Get "js/cookieconsent.min.js" | resources.Fingerprint }}
-<script src="{{ $cookieConsentScript.Permalink }}"{{ if not .Site.Params.disable_sri }} integrity="{{ $cookieConsentScript.Data.Integrity }}" crossorigin="anonymous"{{ end }} async></script>
 
 <script>
-window.addEventListener("load", function(){
+Haven.create({
-  window.cookieconsent.initialise({
+    notification: {
-    "palette": {
+        {{ with .Site.Params.cookie_consent_info_url -}}
-      "popup": {
+        policyUrl: {{ . | absURL }},
-        "background": "#428bca",
+        {{- end }}
-        "text": "#ffffff"
+        styles: {
-      },
+            background: '#428bca',
-      "button": {
+            textColor: '#ffffff',
-        "background": "#f71559"
+            buttonBackgroundColor: '#f71559',
-      }
+            buttonTextColor: '#ffffff',
+        },
     },
-    "content": {
+    translations: {
-      "message": '{{ i18n "cookieMessage" }}',
+      {{ .Lang }}: {
-      "dismiss": '{{ i18n "cookieDismiss" }}',
+            notification: {
-      "link": '{{ i18n "cookieLink" }}',
+                policy: '{{ i18n "cookieLink" }}',
-      "href": "{{ .Site.Params.cookie_consent_info_url | absURL}}"
+                message: '{{ i18n "cookieMessage" }}',
+                accept: '{{ i18n "cookieAccept" }}',
+                decline: '{{ i18n "cookieDecline" }}',
+            }
+        },
     },
-    "position": "bottom-right"
+    services: [
-  })});
+        {
+            name: 'google-analytics',
+            options: {
+                    id: {{ .Site.GoogleAnalytics }},
+            },
+            purposes: ['analytics'],
+            inject: true,
+        }
+    ]
+});
 </script>
 
 {{- /* vim: set ts=2 sw=2 et: */}}

layouts/partials/head-meta.html

@@ -1,8 +1,8 @@
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 
-{{ template "_internal/opengraph.html" . }}
+{{ partial "opengraph.html" . }}
-{{ template "_internal/twitter_cards.html" . }}
+{{ partial "twitter_cards.html" . }}
 
 {{- with .Site.Params.google_verify_meta -}}
 <meta name="google-site-verification" content="{{ . }}" />

layouts/partials/opengraph.html

@@ -0,0 +1,73 @@
+<!--
+Import Hugo's internal twitter_cards.html template to add support for resolving
+images in page bundles and with falling back to the default of looking in the
+static assets directory.
+
+See: tpl/tplimpl/embedded/templates/opengraph.html
+See: https://github.com/gohugoio/hugo/issues/5078
+-->
+<meta property="og:title" content="{{ .Title }}" />
+<meta property="og:description" content="{{ with .Description }}{{ . }}{{ else }}{{if .IsPage}}{{ .Summary }}{{ else }}{{ with .Site.Params.description }}{{ . }}{{ end }}{{ end }}{{ end }}" />
+<meta property="og:type" content="{{ if .IsPage }}article{{ else }}website{{ end }}" />
+<meta property="og:url" content="{{ .Permalink }}" />
+{{ with $.Params.images }}{{ range first 6 . -}}
+{{/* try to get the image from the page bundle */}}
+{{- with $.Page.Resources.GetMatch (printf "*%s*" .) -}}
+<meta property="og:image" content="{{ .Permalink }}" />
+{{/* otherwise, get the image from /static */}}
+{{- else -}}
+<meta property="og:image" content="{{ . | absURL }}" />
+{{- end }}
+{{ end }}{{ else -}}
+{{- $images := $.Resources.ByType "image" -}}
+{{- $featured := $images.GetMatch "*feature*" -}}
+{{- if not $featured }}{{ $featured = $images.GetMatch "{*cover*,*thumbnail*}" }}{{ end -}}
+{{- with $featured -}}
+<meta property="og:image" content="{{ $featured.Permalink }}"/>
+{{ else -}}
+{{- with $.Site.Params.images -}}
+<meta property="og:image" content="{{ index . 0 | absURL }}"/>
+{{ end }}{{ end }}{{ end }}
+
+{{- $iso8601 := "2006-01-02T15:04:05-07:00" -}}
+{{- if .IsPage }}
+{{- if not .PublishDate.IsZero }}<meta property="article:published_time" {{ .PublishDate.Format $iso8601 | printf "content=%q" | safeHTMLAttr }} />
+{{ else if not .Date.IsZero }}<meta property="article:published_time" {{ .Date.Format $iso8601 | printf "content=%q" | safeHTMLAttr }} />
+{{ end }}
+{{- if not .Lastmod.IsZero }}<meta property="article:modified_time" {{ .Lastmod.Format $iso8601 | printf "content=%q" | safeHTMLAttr }} />{{ end }}
+{{- else }}
+{{- if not .Date.IsZero }}<meta property="og:updated_time" {{ .Lastmod.Format $iso8601 | printf "content=%q" | safeHTMLAttr }} />
+{{- end }}
+{{- end }}{{/* .IsPage */}}
+
+{{- with .Params.audio }}<meta property="og:audio" content="{{ . }}" />{{ end }}
+{{- with .Params.locale }}<meta property="og:locale" content="{{ . }}" />{{ end }}
+{{- with .Site.Params.title }}<meta property="og:site_name" content="{{ . }}" />{{ end }}
+{{- with .Params.videos }}
+{{- range . }}
+<meta property="og:video" content="{{ . | absURL }}" />
+{{ end }}{{ end }}
+
+{{- /* If it is part of a series, link to related articles */}}
+{{- $permalink := .Permalink }}
+{{- $siteSeries := .Site.Taxonomies.series }}{{ with .Params.series }}
+{{- range $name := . }}
+  {{- $series := index $siteSeries $name }}
+  {{- range $page := first 6 $series.Pages }}
+    {{- if ne $page.Permalink $permalink }}<meta property="og:see_also" content="{{ $page.Permalink }}" />{{ end }}
+  {{- end }}
+{{ end }}{{ end }}
+
+{{- if .IsPage }}
+{{- range .Site.Authors }}{{ with .Social.facebook }}
+<meta property="article:author" content="https://www.facebook.com/{{ . }}" />{{ end }}{{ with .Site.Social.facebook }}
+<meta property="article:publisher" content="https://www.facebook.com/{{ . }}" />{{ end }}
+<meta property="article:section" content="{{ .Section }}" />
+{{- with .Params.tags }}{{ range first 6 . }}
+<meta property="article:tag" content="{{ . }}" />{{ end }}{{ end }}
+{{- end }}{{ end }}
+
+{{- /* Facebook Page Admin ID for Domain Insights */}}
+{{- with .Site.Social.facebook_admin }}<meta property="fb:admins" content="{{ . }}" />{{ end }}
+
+

layouts/partials/twitter_cards.html

@@ -0,0 +1,42 @@
+<!--
+Import Hugo's internal twitter_cards.html template to add support for resolving
+images in page bundles and with falling back to the default of looking in the
+static assets directory.
+
+See: tpl/tplimpl/embedded/templates/twitter_cards.html
+See: https://github.com/gohugoio/hugo/issues/5078
+-->
+{{- with $.Params.images -}}
+<meta name="twitter:card" content="summary_large_image"/>
+{{/* try to get the image from the page bundle */}}
+{{- with $.Page.Resources.GetMatch (printf "*%s*" .) -}}
+<meta name="twitter:image" content="{{ .Permalink }}"/>
+{{- else -}}
+<meta name="twitter:image" content="{{ index . 0 | absURL }}"/>
+{{- end -}}
+{{ else -}}
+{{- $images := $.Resources.ByType "image" -}}
+{{- $featured := $images.GetMatch "*feature*" -}}
+{{- if not $featured }}{{ $featured = $images.GetMatch "{*cover*,*thumbnail*}" }}{{ end -}}
+{{- with $featured -}}
+<meta name="twitter:card" content="summary_large_image"/>
+<meta name="twitter:image" content="{{ $featured.Permalink }}"/>
+{{- else -}}
+{{- with $.Site.Params.images -}}
+<meta name="twitter:card" content="summary_large_image"/>
+<meta name="twitter:image" content="{{ index . 0 | absURL }}"/>
+{{ else -}}
+<meta name="twitter:card" content="summary"/>
+{{- end -}}
+{{- end -}}
+{{- end }}
+<meta name="twitter:title" content="{{ .Title }}"/>
+<meta name="twitter:description" content="{{ with .Description }}{{ . }}{{ else }}{{if .IsPage}}{{ .Summary }}{{ else }}{{ with .Site.Params.description }}{{ . }}{{ end }}{{ end }}{{ end -}}"/>
+{{ with .Site.Social.twitter -}}
+<meta name="twitter:site" content="@{{ . }}"/>
+{{ end -}}
+{{ range .Site.Authors }}
+{{ with .twitter -}}
+<meta name="twitter:creator" content="@{{ . }}"/>
+{{ end -}}
+{{ end -}}

layouts/shortcodes/figure.html

@@ -0,0 +1,92 @@
+{{/*
+
+figure with auto-resizing and srcset v2020-11-30
+
+Drop-in replacement for Hugo's figure shortcode as of 2020-05-02 that uses img srcset
+to enable browsers to download only the resolution that they need.
+
+The resizing and srcset magic only works for images that are part of the page
+bundle. It will fall back to stock Hugo figure behaviour otherwise.
+
+Improvements that were initially out of reach of my Hugo template programming "skills"
+but have now been taken care of:
+- [x] gracefully handle images that are not in page bundle, i.e. no image processing available
+- [x] use a single configurable sizes array, and derive everything from there
+
+See https://cpbotha.net/2020/05/02/drop-in-replacement-for-hugo-figure-shortcode-with-img-srcset-support/
+
+- original srcset img shortcode from: https://laurakalbag.com/processing-responsive-images-with-hugo/
+- original hugo figure shortcode from: https://github.com/gohugoio/hugo/blob/master/tpl/tplimpl/embedded/templates/shortcodes/figure.html
+- no unnecessary resizes and more nudges by Stéfan van der Walt https://mentat.za.net/
+- mashing together and srcset logic fixes by Charl P. Botha https://cpbotha.net/
+
+Changes:
+- 2020-11-30 handle images that are rotated 90 degrees (should handle more eventually)
+- 2020-05-10 fall back to stock Hugo behaviour when no page bundle found
+- 2020-05-04 no unnecessary resizes, sizes in array
+- 2020-05-02 initial release
+
+*/}}
+
+{{/* hugo will resize to all of these sizes that are smaller than your original. configure if you like! */}}
+{{ $sizes := (slice "480" "800" "1200" "1500") }}
+
+{{/* get file that matches the filename as specified as src="" in shortcode */}}
+{{ $src := .Page.Resources.GetMatch (printf "*%s*" (.Get "src")) }}
+
+<figure{{ with .Get "class" }} class="{{ . }}"{{ end }}>
+    {{- if .Get "link" -}}
+        <a href="{{ .Get "link" }}"{{ with .Get "target" }} target="{{ . }}"{{ end }}{{ with .Get "rel" }} rel="{{ . }}"{{ end }}>
+    {{- end }}
+    <img
+        {{ if $src }}
+            sizes="(min-width: 35em) 1200px, 100vw"
+            {{/* only srcset images smaller than or equal to the src (original) image size, as Hugo will upscale small images */}}  
+            srcset='
+            {{ range $sizes }}
+                   {{ $size := . }}
+                   {{/* https://discourse.gohugo.io/t/image-exif-orientation/22902/7 */}}
+                   {{/* set orientation to 1 just in case it doesnt exist in Exif */}}
+                   {{ $orientation := 1 }}
+                   {{ with $src.Exif }}
+                   {{ $orientation := .Tags.Orientation }}
+                   {{ if and (ge $src.Width $size) (eq $orientation 8) }}
+                       {{ ($src.Resize (printf "%sx r90" $size)).Permalink }} {{ (printf "%sw" $size) }},
+                   {{ else if ge $src.Width $size }}{{ ($src.Resize (printf "%sx" $size)).Permalink }} {{ (printf "%sw" $size) }},{{ end }}
+                   {{ end }}
+            {{ end }}'
+
+            {{/* when no support for srcset (old browsers, RSS), we load small (800px) */}}
+            {{/* if image smaller than 800, then load the image itself */}}
+            {{ if ge $src.Width "800" }}src="{{ ($src.Resize "800x").Permalink }}"
+            {{ else }}src="{{ $src.Permalink }}"
+            {{ end }}
+
+        {{ else }}
+            {{/* fall back to stock hugo behaviour when image is not available in bundle */}}
+            src="{{ .Get "src" }}"
+        {{ end }}
+
+        {{- if or (.Get "alt") (.Get "caption") }}
+            alt="{{ with .Get "alt" }}{{ . }}{{ else }}{{ .Get "caption" | markdownify| plainify }}{{ end }}"
+        {{- end -}}
+        {{- with .Get "width" }} width="{{ . }}"{{ end -}}
+        {{- with .Get "height" }} height="{{ . }}"{{ end -}}
+    /> <!-- Closing img tag -->
+    {{- if .Get "link" }}</a>{{ end -}}
+    {{- if or (or (.Get "title") (.Get "caption")) (.Get "attr") -}}
+        <figcaption>
+            {{ with (.Get "title") -}}
+                <h4>{{ . }}</h4>
+            {{- end -}}
+            {{- if or (.Get "caption") (.Get "attr") -}}<p>
+                {{- .Get "caption" | markdownify -}}
+                {{- with .Get "attrlink" }}
+                    <a href="{{ . }}">
+                {{- end -}}
+                {{- .Get "attr" | markdownify -}}
+                {{- if .Get "attrlink" }}</a>{{ end }}</p>
+            {{- end }}
+        </figcaption>
+    {{- end }}
+</figure>

package.json

@@ -1,32 +1,31 @@
 {
   "name": "hugo-theme-bootstrap4-blog",
-  "version": "1.3.3",
+  "version": "1.6.0",
   "description": "A Bootstrap v4 theme for the Hugo static site generator.",
   "repository": {
     "type": "git",
     "url": "https://github.com/alanorth/hugo-theme-bootstrap4-blog.git"
   },
   "scripts": {
-    "build:css": "node-sass --output-style expanded --precision 6 source/scss/style.scss assets/css/style.css.tmp && cleancss --level 1 assets/css/style.css.tmp -o assets/css/style.css",
+    "build:css": "sass --style expanded source/scss/style.scss assets/css/style.css.tmp && cleancss --level 1 assets/css/style.css.tmp -o assets/css/style.css",
     "build:rtlcss": "rtlcss -s assets/css/style.css.tmp assets/css/style.rtl.css.tmp && cleancss --level 1 assets/css/style.rtl.css.tmp -o assets/css/style.rtl.css",
-    "build:cookieconsent": "cp node_modules/cookieconsent/build/cookieconsent.min.css assets/css && cp node_modules/cookieconsent/build/cookieconsent.min.js assets/js",
+    "build:cookieconsent": "cp node_modules/@chiiya/haven/dist/haven.umd.min.js assets/js",
     "build:js": "webpack",
     "build": "npm run build:css && npm run build:rtlcss && npm run build:js && npm run build:cookieconsent && npm run clean",
-    "clean": "rm assets/css/style.css.tmp assets/css/style.rtl.css.tmp"
+    "clean": "rm assets/css/style.css.tmp assets/css/style.css.tmp.map assets/css/style.rtl.css.tmp"
   },
   "keywords": "hugo",
   "author": "Alan Orth",
   "license": "CC-BY-3.0",
   "devDependencies": {
-    "@fortawesome/fontawesome-svg-core": "^1.2.26",
+    "@chiiya/haven": "^0.6.2",
-    "@fortawesome/free-brands-svg-icons": "^5.12.0",
+    "@fortawesome/fontawesome-svg-core": "^1.2.34",
-    "@fortawesome/free-solid-svg-icons": "^5.12.0",
+    "@fortawesome/free-brands-svg-icons": "^5.15.2",
-    "bootstrap": "~4.4.1",
+    "@fortawesome/free-solid-svg-icons": "^5.15.2",
+    "bootstrap": "^4.6.0",
     "clean-css-cli": "^4.3.0",
-    "cookieconsent": "3.0.4",
+    "rtlcss": "^2.6.2",
-    "node-sass": "^4.13.1",
+    "sass": "^1.32.4",
-    "rtlcss": "^2.4.1",
+    "webpack-cli": "^4.5.0"
-    "webpack": "^4.41.5",
-    "webpack-cli": "^3.3.10"
   }
 }

source/scss/bootstrap.scss

@@ -1,44 +1,44 @@
 /*!
- * Bootstrap v4.4.1 (https://getbootstrap.com/)
+ * Bootstrap v4.6.0 (https://getbootstrap.com/)
- * Copyright 2011-2019 The Bootstrap Authors
+ * Copyright 2011-2021 The Bootstrap Authors
- * Copyright 2011-2019 Twitter, Inc.
+ * Copyright 2011-2021 Twitter, Inc.
- * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
  */
 
-@import "node_modules/bootstrap/scss/functions";
+@import "../../node_modules/bootstrap/scss/functions";
-@import "node_modules/bootstrap/scss/variables";
+@import "../../node_modules/bootstrap/scss/variables";
-@import "node_modules/bootstrap/scss/mixins";
+@import "../../node_modules/bootstrap/scss/mixins";
-//@import "node_modules/bootstrap/scss/root";
+@import "../../node_modules/bootstrap/scss/root";
-@import "node_modules/bootstrap/scss/reboot";
+@import "../../node_modules/bootstrap/scss/reboot";
-@import "node_modules/bootstrap/scss/type";
+@import "../../node_modules/bootstrap/scss/type";
-@import "node_modules/bootstrap/scss/images";
+@import "../../node_modules/bootstrap/scss/images";
-@import "node_modules/bootstrap/scss/code";
+@import "../../node_modules/bootstrap/scss/code";
-@import "node_modules/bootstrap/scss/grid";
+@import "../../node_modules/bootstrap/scss/grid";
-//@import "node_modules/bootstrap/scss/tables";
+//@import "../../node_modules/bootstrap/scss/tables";
-@import "node_modules/bootstrap/scss/forms";
+@import "../../node_modules/bootstrap/scss/forms";
-@import "node_modules/bootstrap/scss/buttons";
+@import "../../node_modules/bootstrap/scss/buttons";
-//@import "node_modules/bootstrap/scss/transitions";
+//@import "../../node_modules/bootstrap/scss/transitions";
-//@import "node_modules/bootstrap/scss/dropdown";
+//@import "../../node_modules/bootstrap/scss/dropdown";
-//@import "node_modules/bootstrap/scss/button-group";
+//@import "../../node_modules/bootstrap/scss/button-group";
-//@import "node_modules/bootstrap/scss/input-group";
+//@import "../../node_modules/bootstrap/scss/input-group";
-//@import "node_modules/bootstrap/scss/custom-forms";
+//@import "../../node_modules/bootstrap/scss/custom-forms";
-@import "node_modules/bootstrap/scss/nav";
+@import "../../node_modules/bootstrap/scss/nav";
-@import "node_modules/bootstrap/scss/navbar";
+@import "../../node_modules/bootstrap/scss/navbar";
-//@import "node_modules/bootstrap/scss/card";
+//@import "../../node_modules/bootstrap/scss/card";
-//@import "node_modules/bootstrap/scss/breadcrumb";
+//@import "../../node_modules/bootstrap/scss/breadcrumb";
-@import "node_modules/bootstrap/scss/pagination";
+@import "../../node_modules/bootstrap/scss/pagination";
-//@import "node_modules/bootstrap/scss/badge";
+//@import "../../node_modules/bootstrap/scss/badge";
-//@import "node_modules/bootstrap/scss/jumbotron";
+//@import "../../node_modules/bootstrap/scss/jumbotron";
-//@import "node_modules/bootstrap/scss/alert";
+//@import "../../node_modules/bootstrap/scss/alert";
-//@import "node_modules/bootstrap/scss/progress";
+//@import "../../node_modules/bootstrap/scss/progress";
-//@import "node_modules/bootstrap/scss/media";
+//@import "../../node_modules/bootstrap/scss/media";
-//@import "node_modules/bootstrap/scss/list-group";
+//@import "../../node_modules/bootstrap/scss/list-group";
-//@import "node_modules/bootstrap/scss/close";
+//@import "../../node_modules/bootstrap/scss/close";
-//@import "node_modules/bootstrap/scss/toasts";
+//@import "../../node_modules/bootstrap/scss/toasts";
-//@import "node_modules/bootstrap/scss/modal";
+//@import "../../node_modules/bootstrap/scss/modal";
-//@import "node_modules/bootstrap/scss/tooltip";
+//@import "../../node_modules/bootstrap/scss/tooltip";
-//@import "node_modules/bootstrap/scss/popover";
+//@import "../../node_modules/bootstrap/scss/popover";
-//@import "node_modules/bootstrap/scss/carousel";
+//@import "../../node_modules/bootstrap/scss/carousel";
-//@import "node_modules/bootstrap/scss/spinners";
+//@import "../../node_modules/bootstrap/scss/spinners";
-@import "node_modules/bootstrap/scss/utilities";
+@import "../../node_modules/bootstrap/scss/utilities";
-@import "node_modules/bootstrap/scss/print";
+@import "../../node_modules/bootstrap/scss/print";

source/scss/style.scss

@@ -1,6 +1,6 @@
 // selectively import components we need from bootstrap
 // see: node_modules/bootstrap/scss/bootstrap.scss
-@import 'source/scss/bootstrap';
+@import 'bootstrap';
 
 // local style overrides
-@import 'source/scss/main';
+@import 'main';

theme.toml

@@ -3,13 +3,14 @@ license = "CC-BY-3.0"
 licenselink = "https://github.com/alanorth/hugo-theme-bootstrap4-blog/blob/master/LICENSE.txt"
 description = "A simple Hugo theme based on the Bootstrap v4 blog example."
 homepage = "https://github.com/alanorth/hugo-theme-bootstrap4-blog"
+demosite = "https://picturingjordan.com"
 tags = ["bootstrap", "blog", "font awesome"]
 features = ["responsive", "blog"]
 min_version = 0.55
 
 [author]
   name = "Alan Orth"
-  homepage = "https://englishbulgaria.net"
+  homepage = "https://picturingjordan.com"
 
 [original]
   author = "mdo"