CHANGELOG.md: add note about templates for Hugo v0.146.0

As of Hugo v0.146.0 the template system was overhauled and it seems
we need to use different syntax here. The reason for overriding the
Hugo internal templates in the past (post images) is no longer pre-
sent, so I can revert to the internal ones, but confusingly, we do
not refer to them with "_internal" now.

See: https://github.com/gohugoio/hugo/pull/13541

.build.yml

@@ -1,6 +1,6 @@
 image: archlinux
 packages:
-  - nodejs-lts-erbium
+  - nodejs-lts-fermium
   - npm
 sources:
   - https://git.sr.ht/~alanorth/hugo-theme-bootstrap4-blog

.drone.yml

@@ -0,0 +1,28 @@
+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,6 +4,49 @@ 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, haven 0.7.0, clean-css-cli, etc
+- Use Node.js 14 in CI, remove Node.js 12
+
+## Added
+- Support for Bootstrap table classes (#145)
+- i18n language keys for Danish (@schack, #146)
+
+## Fixed
+- Deprecations from Hugo (DisqusShortname and GoogleAnalytics)
+- Deprecations from Hugo (Templates)
+
+## [[ 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)

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")
@@ -13,12 +13,12 @@ See [picturingjordan.com](https://picturingjordan.com) for an example of this th
 - 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 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.
@@ -38,7 +38,7 @@ A few suggestions to help you get a good looking site quickly:
 See the source code and structure of [picturingjordan.com](https://github.com/alanorth/picturingjordan.com) to get more ideas.
 
 ## Building (For Developers)
-This theme uses the [Bootstrap](https://getbootstrap.com/) framework. A static version of this is already included, but if you want to bump the version, tweak the style, etc, you'll need to rebuild the assets. Make sure you have NodeJS >= v10 installed, and then run the following from inside the theme's directory:
+This theme uses the [Bootstrap](https://getbootstrap.com/) framework. A static version of this is already included, but if you want to bump the version, tweak the style, etc, you'll need to rebuild the assets. Make sure you have Node.js >= v14 installed, and then run the following from inside the theme's directory:
 
 ```console
 $ npm install

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/da.yaml

@@ -0,0 +1,50 @@
+- id: about
+  translation: "Om"
+
+- id: home
+  translation: "Hjem"
+
+- id: recentPosts
+  translation: "Seneste indlæg"
+
+- id: readMore
+  translation: "Læs mere"
+
+- id: translations
+  translation: "Oversættelser"
+
+- id: share
+  translation: "Del"
+
+- id: paginatorPrevious
+  translation: "Forrige side"
+
+- id: paginatorNext
+  translation: "Næste side"
+
+- id: cookieMessage
+  translation: "Denne hjemmeside anvender cookies."
+
+- id: cookieLink
+  translation: "Læs mere."
+
+- id: cookieAccept
+  translation: "OK"
+
+- id: cookieDecline
+  translation: "Afbryd"
+
+- id: backToTop
+  translation: "Til toppen"
+
+- id: links
+  translation: "Links"
+
+- id: authoredBy
+  translation: "af"
+
+- id: postedIn
+  translation: "i"
+
+- id: comma
+  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.Config.Services.GoogleAnalytics.ID }}
-
-    {{ if .Site.Params.cookie_consent_info_url }}
     {{ partial "cookie-consent.html" . }}
     {{ end }}
 

layouts/_default/list.html

@@ -15,7 +15,8 @@
   "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": {{- . -}}

layouts/_default/single.html

@@ -7,18 +7,28 @@
   "@type": "BlogPosting",
   {{- /* Google recommends the headline be no more than 110 characters */}}
   "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 }},
@@ -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 {{ .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>
+    <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 }}
 
@@ -71,7 +83,7 @@
   </ul>
   {{ end }}
 
-  {{ if or (ne ($.Param "sharingicons") false) (.Site.DisqusShortname) }}
+  {{ if or (ne ($.Param "sharingicons") false) (.Site.Config.Services.Disqus.Shortname) }}
   <hr>
   <footer>
 
@@ -79,7 +91,7 @@
   {{ partial "sharing-icons.html" . }}
   {{ end }}
 
-  {{ if and (.Site.DisqusShortname) (ne .Params.comments false) }}
+  {{ if and (.Site.Config.Services.Disqus.Shortname) (ne .Params.comments false) }}
   {{ template "_internal/disqus.html" . }}
   {{ end }}
   </footer>

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.Config.Services.GoogleAnalytics.ID }},
+            },
+            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/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.4.2",
+  "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 -O1 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:rtlcss": "rtlcss -s assets/css/style.css.tmp assets/css/style.rtl.css.tmp && cleancss -O1 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.27",
+    "@chiiya/haven": "^0.7.0",
-    "@fortawesome/free-brands-svg-icons": "^5.12.1",
+    "@fortawesome/fontawesome-svg-core": "^1.2.34",
-    "@fortawesome/free-solid-svg-icons": "^5.12.1",
+    "@fortawesome/free-brands-svg-icons": "^5.15.2",
-    "bootstrap": "~4.4.1",
+    "@fortawesome/free-solid-svg-icons": "^5.15.2",
-    "clean-css-cli": "^4.3.0",
+    "bootstrap": "^4.6.0",
-    "cookieconsent": "3.0.4",
+    "clean-css-cli": "^5.4.1",
-    "node-sass": "^4.13.1",
+    "rtlcss": "^3.3.0",
-    "rtlcss": "^2.5.0",
+    "sass": "^1.43.2",
-    "webpack": "^4.42.0",
+    "webpack-cli": "^4.9.1"
-    "webpack-cli": "^3.3.11"
   }
 }

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"