Version 1.5.0

If the user has configured a cookie consent information URL we will
show it in the banner.

.build.yml

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

.travis.yml

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

CHANGELOG.md

@@ -4,6 +4,59 @@ 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).
 
+## [[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
+- 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
+- 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
+- Several references to Google Plus (@xekon, #122)
+
+## [[1.3.3]] - 2019-12-02
+### Fixed
+- "Home" link for blogs that are not at the root of the domain (@phofman #115)
+
+### Changed
+- Use "posts" instead of "post" in exampleSite to align closer with Hugo quick start docs (@sboots #117)
+
+### Updated
+- node-sass 4.13.0 and rtlcss 2.4.1
+
 ## [[1.3.2]] - 2019-06-20
 ### Changed
 - Only list "Regular" pages in recent posts in sidebar (@alanorth)

README.md

@@ -11,12 +11,11 @@ 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/partial/head-custom.html` (see [#17](https://github.com/alanorth/hugo-theme-bootstrap4-blog/pull/17))
+- 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
 
@@ -38,7 +37,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 >= v6 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 NodeJS >= v10 installed, and then run the following from inside the theme's directory:
 
 ```console
 $ npm install

build/assets.json

@@ -1,6 +0,0 @@
-{
-  "style": "static/css/style.css",
-  "stylertl": "static/css/style.rtl.css",
-  "cookieconsentcss": "static/css/cookieconsent.min.css",
-  "cookieconsentjs": "static/js/cookieconsent.min.js"
-}

build/sri.js

@@ -1,23 +0,0 @@
-// Adapted from: https://gist.github.com/jmervine/ae1bace0fe37dce75b90ec3e9592771c
-
-var crypto = require('crypto');
-var fs     = require('fs');
-var assets = require('./assets.json');
-
-var generate384 = function (file) {
-  var enc  = 'utf8';
-  var body = fs.readFileSync(file, { encoding: enc });
-  var hash = crypto.createHash('sha384').update(body, enc);
-  var sha  = hash.digest('base64');
-
-  return 'sha384-' + sha;
-}
-
-for (var asset in assets) {
-  var path = assets[asset];
-  var hash = generate384(path);
-
-  console.log(asset + ' = "' + hash + '"');
-}
-
-// vim: set ts=2 sw=2 et:

data/sri.toml

@@ -1,4 +0,0 @@
-style = "sha384-G5B34w7DFTumWTswxYzTX7NWfbvQEg1HbFFEg6ItN03uTAAoS2qkPS/fu3LhuuSA"
-stylertl = "sha384-wxZc+CAOuj0Z/AJqCKfxerYzFw93KXl6wI/vGBVOmdqRyBrIv3STXmzcnBdyQK9C"
-cookieconsentcss = "sha384-6iYDyQZuuNT7DcPJGXx241czdv2+GDGUcXRiqw1iXrjgYMTorSetxFP3JCMQMwnR"
-cookieconsentjs = "sha384-PDjg2ZdS3khPzd53i18+7tzB32JVQfFMrTXYo21RqPgUmEVAPwIhxOUF/8sP79CS"

exampleSite/config.toml

@@ -6,13 +6,15 @@ title = "Hugo Bootstrap v4 Blog"
 theme = "hugo-theme-bootstrap4-blog"
 # number of posts to show on home/category/tag pages (Default: 10)
 paginate = 5
+# number of words to use for summary on home/category/tag pages (Default: 70)
+summaryLength = 50
 # optionally override the site's footer with custom copyright text
 # copyright = "Except where otherwise noted, content on this site is licensed under a [Creative Commons Attribution 4.0 International license](https://creativecommons.org/licenses/by-sa/4.0/)."
 #googleAnalytics = "UA-123-45"
 #disqusShortname = "XYW"
 
 [permalinks]
-  post = "/:year/:month/:title/"
+  posts = "/:year/:month/:title/"
   page = "/:slug/"
 
 [[menu.sidebar]]
@@ -89,5 +91,7 @@ paginate = 5
 # 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
-  translation: "Разбрах!"
+- id: cookieAccept
+  translation: "Съгласен съм"
+
+- id: cookieDecline
+  translation: "Не съм съгласен"
 
 - id: backToTop
   translation: "Нагоре"

i18n/de.yaml

@@ -28,11 +28,17 @@
 - id: cookieLink
   translation: "Weitere Informationen"
 
-- id: cookieDismiss
-  translation: "OK"
+- id: cookieDecline
+  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
-  translation: "Got it!"
+- id: cookieAccept
+  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

@@ -0,0 +1,47 @@
+- id: about
+  translation: "درباره من"
+
+- id: home
+  translation: "صفحه اصلی"
+
+- id: recentPosts
+  translation: "مطالب تازه"
+
+- id: readMore
+  translation: "بیشتر بخوانید ←"
+
+- id: translations
+  translation: "ترجمه"
+
+- id: share
+  translation: "به اشتراک گذاشتن"
+
+- id: paginatorPrevious
+  translation: "صفحه قبلی"
+
+- id: paginatorNext
+  translation: "صفحه بعدی"
+
+- id: cookieMessage
+  translation: "در این سایت از کوکیز استفاده میشود"
+
+- id: cookieLink
+  translation: ".بیشتر بدانید"
+
+- id: cookieAccept
+  translation: "!متوجه شدم"
+
+- id: backToTop
+  translation: "برگشت به بالا"
+
+- id: links
+  translation: "لینکها"
+
+- id: authoredBy
+  translation: "بوسیله"
+
+- id: postedIn
+  translation: "در"
+
+- id: comma
+  translation: "،"

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

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="{{ .Lang }}" {{ if eq .Lang "ar" }}dir="rtl"{{ end }}>
+<html lang="{{ .Lang }}" {{ if or (eq .Lang "ar") (eq .Lang "fa") }}dir="rtl"{{ end }}>
 
   <head>
     {{ partial "head-meta.html" . }}
@@ -12,22 +12,26 @@
 
     <title>{{ block "title" . }}{{ .Site.Title }}{{ end }}</title>
 
-    {{ if eq .Lang "ar" }}
-    {{ "<!-- ar -->" | safeHTML }}
-    <link href="{{ "css/style.rtl.css" | absURL }}" rel="stylesheet"{{ if not .Site.Params.disable_sri }} integrity="{{ .Site.Data.sri.styleltr}}" crossorigin="anonymous"{{ end }}>
+    {{ if or (eq .Lang "ar") (eq .Lang "fa") }}
+    {{ "<!-- RTL -->" | safeHTML }}
+    {{ $styleRtl := resources.Get "css/style.rtl.css" | resources.Fingerprint }}
+    <link href="{{ $styleRtl.Permalink }}" rel="stylesheet"{{ if not .Site.Params.disable_sri }} integrity="{{ $styleRtl.Data.Integrity }}" crossorigin="anonymous"{{ end }}>
     {{ else }}
     {{ "<!-- combined, minified CSS -->" | safeHTML }}
-    <link href="{{ "css/style.css" | absURL }}" rel="stylesheet"{{ if not .Site.Params.disable_sri }} integrity="{{ .Site.Data.sri.style}}" crossorigin="anonymous"{{ end }}>
+    {{ $style := resources.Get "css/style.css" | resources.Fingerprint }}
+    <link href="{{ $style.Permalink }}" rel="stylesheet"{{ if not .Site.Params.disable_sri }} integrity="{{ $style.Data.Integrity }}" crossorigin="anonymous"{{ end }}>
     {{ end }}
 
+    {{ "<!-- minified Font Awesome for SVG icons -->" | safeHTML }}
+    {{ $fontawesome := resources.Get "js/fontawesome.min.js" | resources.Fingerprint }}
+    <script defer src="{{ $fontawesome.Permalink }}" integrity="{{ $fontawesome.Data.Integrity }}" crossorigin="anonymous"></script>
+
     {{ "<!-- RSS 2.0 feed -->" | safeHTML }}
     {{ with .OutputFormats.Get "rss" -}}
       {{ 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.Params.cookie_consent_info_url }}
+    {{ if .Site.GoogleAnalytics }}
     {{ partial "cookie-consent.html" . }}
     {{ end }}
 
@@ -55,7 +59,7 @@
     {{ if (ne .Site.Params.header_visible false) }}
     <header class="blog-header">
       <div class="container">
-        <h1 class="blog-title" dir="auto"><a href="{{ "/" | absURL }}" rel="home">{{ .Site.Title | safeHTML }}</a></h1>
+        <h1 class="blog-title" dir="auto"><a href="{{ .Site.BaseURL | absURL }}" rel="home">{{ .Site.Title | safeHTML }}</a></h1>
         {{ if .Site.Params.description }}<p class="lead blog-description" dir="auto">{{ .Site.Params.description | markdownify }}</p>{{ end }}
       </div>
     </header>

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,24 +4,21 @@
   "@context": "http://schema.org",
   "@type": "Blog",
   {{- /* Google recommends the headline be no more than 110 characters */}}
-  "headline": "{{ substr .Site.Title 0 110 }}",
-  "url" : "{{ printf "%s" .Permalink }}",
+  "headline": {{ substr .Site.Title 0 110 }},
+  "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 }}
-  {{- with .Site.Social.GooglePlus }}
-  "publisher": "{{ printf "%s" . }}",
-  {{- 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": {{ range $plural, $terms := .Site.Taxonomies }}{{ range $term, $val := $terms }}{{ printf "%s," $term }}{{ end }}{{ end }}
   {{- with .Site.Params.description -}}
   ,
-  "description": "{{- . -}}"
+  "description": {{- . -}}
   {{- end }}
 }
 </script>

layouts/_default/single.html

@@ -6,11 +6,11 @@
   "@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 . }}
   "image": {
     "@type": "ImageObject",
-    "url": "{{ . | absURL }}"
+    "url": {{ . | absURL }}
     {{- /* Don't try to get imageConfig if image param is not local */ -}}
     {{- if not (or (hasPrefix . "http://") (hasPrefix . "https://")) -}}
     {{- with (imageConfig (printf "/static/%s" .)) -}}
@@ -21,7 +21,7 @@
     {{ 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 }}
@@ -32,21 +32,18 @@
   {{- if not .Lastmod.IsZero }}
   "dateModified": {{ .Lastmod.Format $ISO8601 }},
   {{- end }}
-  {{- with .Site.Social.GooglePlus }}
-  "publisher": "{{ printf "%s" . }}",
-  {{- 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>
@@ -59,7 +56,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 }}
 

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,26 +1,40 @@
-<link href="{{ "css/cookieconsent.min.css" | absURL }}" rel="stylesheet" type="text/css"{{ if not .Site.Params.disable_sri }} integrity="{{ .Site.Data.sri.cookieconsentcss }}" crossorigin="anonymous"{{ end }}>
-<script src="{{ "js/cookieconsent.min.js" |absURL }}"{{ if not .Site.Params.disable_sri }} integrity="{{ .Site.Data.sri.cookieconsentjs }}" crossorigin="anonymous"{{ end }} async></script>
+{{ $cookieConsentScript := resources.Get "js/haven.umd.min.js" | resources.Fingerprint }}
+<script src="{{ $cookieConsentScript.Permalink }}"{{ if not .Site.Params.disable_sri }} integrity="{{ $cookieConsentScript.Data.Integrity }}" crossorigin="anonymous"{{ end }}></script>
 
 <script>
-window.addEventListener("load", function(){
-  window.cookieconsent.initialise({
-    "palette": {
-      "popup": {
-        "background": "#428bca",
-        "text": "#ffffff"
-      },
-      "button": {
-        "background": "#f71559"
-      }
+Haven.create({
+    notification: {
+        {{ with .Site.Params.cookie_consent_info_url -}}
+        policyUrl: {{ . | absURL }},
+        {{- end }}
+        styles: {
+            background: '#428bca',
+            textColor: '#ffffff',
+            buttonBackgroundColor: '#f71559',
+            buttonTextColor: '#ffffff',
+        },
     },
-    "content": {
-      "message": '{{ i18n "cookieMessage" }}',
-      "dismiss": '{{ i18n "cookieDismiss" }}',
-      "link": '{{ i18n "cookieLink" }}',
-      "href": "{{ .Site.Params.cookie_consent_info_url | absURL}}"
+    translations: {
+      {{ .Lang }}: {
+            notification: {
+                policy: '{{ i18n "cookieLink" }}',
+                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/meta-terms.html

@@ -1,8 +1,8 @@
 {{ if .Params.categories }}
-<i class="fa fa-folder" aria-hidden="true"></i>&nbsp;{{ range $index, $category := .Params.categories }}{{ if gt $index 0 }}{{ i18n "comma" }} {{ end }}<a href="{{ "/categories/" | relLangURL }}{{ . | urlize }}" rel="category tag">{{ . }}</a>{{ end }}
+<span class="fas fa-folder" aria-hidden="true"></span>&nbsp;{{ range $index, $category := .Params.categories }}{{ if gt $index 0 }}{{ i18n "comma" }} {{ end }}<a href="{{ "/categories/" | relLangURL }}{{ . | urlize }}/" rel="category tag">{{ . }}</a>{{ end }}
 {{ end }}
 {{ if .Params.tags }}
-<i class="fa fa-tag" aria-hidden="true"></i>&nbsp;{{ range $index, $tag := .Params.tags }}{{ if gt $index 0 }}{{ i18n "comma" }} {{ end }}<a href="{{ "/tags/" | relLangURL }}{{ . | urlize }}" rel="tag">{{ . }}</a>{{ end }}
+<span class="fas fa-tag" aria-hidden="true"></span>&nbsp;{{ range $index, $tag := .Params.tags }}{{ if gt $index 0 }}{{ i18n "comma" }} {{ end }}<a href="{{ "/tags/" | relLangURL }}{{ . | urlize }}/" rel="tag">{{ . }}</a>{{ end }}
 {{ end }}
 
 {{- /* vim: set ts=2 sw=2 et: */}}

layouts/partials/sharing-icons.html

@@ -1,9 +1,9 @@
   <section>
     <h4>{{ i18n "share" }}</h4>
     <nav class="nav sharing-icons">
-      <a class="nav-item" href="https://www.facebook.com/sharer/sharer.php?u={{ .Permalink }}" title="Share on Facebook"><span class="fa fa-facebook fa-2x" aria-hidden="true"></span></a>
-      <a class="nav-item" href="https://www.linkedin.com/shareArticle?mini=true&amp;url={{ .Permalink }}" title="Share on LinkedIn"><span class="fa fa-linkedin fa-2x" aria-hidden="true"></span></a>
-      <a class="nav-item" href="https://twitter.com/intent/tweet?url={{ .Permalink }}&amp;text={{ .Title }}" title="Tweet this"><span class="fa fa-twitter fa-2x"></span></a>
+      <a class="nav-item" href="https://www.facebook.com/sharer/sharer.php?u={{ .Permalink }}" title="Share on Facebook"><span class="fab fa-facebook-f fa-2x" aria-hidden="true"></span></a>
+      <a class="nav-item" href="https://www.linkedin.com/shareArticle?mini=true&amp;url={{ .Permalink }}" title="Share on LinkedIn"><span class="fab fa-linkedin-in fa-2x" aria-hidden="true"></span></a>
+      <a class="nav-item" href="https://twitter.com/intent/tweet?url={{ .Permalink }}&amp;text={{ .Title }}" title="Tweet this"><span class="fab fa-twitter fa-2x"></span></a>
     </nav>
   </section>
 

package.json

@@ -1,29 +1,32 @@
 {
   "name": "hugo-theme-bootstrap4-blog",
-  "version": "1.3.2",
+  "version": "1.5.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 static/css/style.css.tmp && cleancss --level 1 static/css/style.css.tmp -o static/css/style.css",
-    "build:ltrcss": "rtlcss -s static/css/style.css.tmp static/css/style.rtl.css.tmp && cleancss --level 1 static/css/style.rtl.css.tmp -o static/css/style.rtl.css",
-    "build:fonts": "cp node_modules/font-awesome/fonts/* static/fonts",
-    "build:cookieconsent": "cp node_modules/cookieconsent/build/cookieconsent.min.css static/css && cp node_modules/cookieconsent/build/cookieconsent.min.js static/js",
-    "build:generatesri": "node build/sri.js > data/sri.toml",
-    "build": "npm run build:css && npm run build:ltrcss && npm run build:fonts && npm run build:cookieconsent && npm run build:generatesri && npm run clean",
-    "clean": "rm static/css/style.css.tmp static/css/style.rtl.css.tmp"
+    "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: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/@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"
   },
   "keywords": "hugo",
   "author": "Alan Orth",
   "license": "CC-BY-3.0",
   "devDependencies": {
-    "bootstrap": "~4.3.1",
+    "@chiiya/haven": "^0.6.0",
+    "@fortawesome/fontawesome-svg-core": "^1.2.28",
+    "@fortawesome/free-brands-svg-icons": "^5.13.0",
+    "@fortawesome/free-solid-svg-icons": "^5.13.0",
+    "bootstrap": "~4.5.0",
     "clean-css-cli": "^4.3.0",
-    "cookieconsent": "3.0.4",
-    "font-awesome": "^4.7.0",
-    "node-sass": "^4.12.0",
-    "rtlcss": "^2.4.0"
+    "node-sass": "^4.14.1",
+    "rtlcss": "^2.5.0",
+    "webpack": "^4.43.0",
+    "webpack-cli": "^3.3.11"
   }
 }

source/js/fontawesome.js

@@ -0,0 +1,13 @@
+import { library, dom } from '@fortawesome/fontawesome-svg-core'
+import { faFolder, faTag } from '@fortawesome/free-solid-svg-icons'
+import { faFacebookF, faTwitter, faLinkedinIn } from '@fortawesome/free-brands-svg-icons'
+
+// Add solid icons to our library
+library.add(faFolder, faTag)
+
+// Add brand icons to our library
+library.add(faFacebookF, faTwitter, faLinkedinIn)
+
+// Replace any existing <i> tags with <svg> and set up a MutationObserver to
+// continue doing this as the DOM changes.
+dom.watch()

source/scss/bootstrap.scss

@@ -1,7 +1,7 @@
 /*!
- * Bootstrap v4.3.1 (https://getbootstrap.com/)
- * Copyright 2011-2019 The Bootstrap Authors
- * Copyright 2011-2019 Twitter, Inc.
+ * Bootstrap v4.5.0 (https://getbootstrap.com/)
+ * Copyright 2011-2020 The Bootstrap Authors
+ * Copyright 2011-2020 Twitter, Inc.
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
  */
 

source/scss/font-awesome.scss

@@ -1,35 +0,0 @@
-/*!
- *  Font Awesome 4.7.0 by @davegandy - http://fontawesome.io - @fontawesome
- *  License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
- */
-
-@import "node_modules/font-awesome/scss/variables";
-@import "node_modules/font-awesome/scss/mixins";
-@import "node_modules/font-awesome/scss/path";
-@import "node_modules/font-awesome/scss/core";
-@import "node_modules/font-awesome/scss/larger";
-@import "node_modules/font-awesome/scss/fixed-width";
-//@import "list";
-//@import "bordered-pulled";
-//@import "animated";
-//@import "rotated-flipped";
-//@import "stacked";
-//@import "icons";
-// selectively import icons we need from font-awesome
-// see: node_modules/font-awesome/scss/_icons.scss
-.#{$fa-css-prefix}-tag:before { content: $fa-var-tag; }
-.#{$fa-css-prefix}-folder:before { content: $fa-var-folder; }
-.#{$fa-css-prefix}-facebook:before { content: $fa-var-facebook; }
-.#{$fa-css-prefix}-google-plus:before { content: $fa-var-google-plus; }
-.#{$fa-css-prefix}-linkedin:before { content: $fa-var-linkedin; }
-.#{$fa-css-prefix}-rss:before { content: $fa-var-rss; }
-.#{$fa-css-prefix}-rss-square:before { content: $fa-var-rss-square; }
-.#{$fa-css-prefix}-twitter:before { content: $fa-var-twitter; }
-.#{$fa-css-prefix}-y-combinator-square:before,
-.#{$fa-css-prefix}-yc-square:before,
-.#{$fa-css-prefix}-hacker-news:before { content: $fa-var-hacker-news; }
-.#{$fa-css-prefix}-reddit:before { content: $fa-var-reddit; }
-.#{$fa-css-prefix}-reddit-square:before { content: $fa-var-reddit-square; }
-.#{$fa-css-prefix}-stumbleupon-circle:before { content: $fa-var-stumbleupon-circle; }
-.#{$fa-css-prefix}-stumbleupon:before { content: $fa-var-stumbleupon; }
-@import "node_modules/font-awesome/scss/screen-reader";

source/scss/style.scss

@@ -1,7 +1,3 @@
-// selectively import components we need from font-awesome
-// see: node_modules/font-awesome/scss/font-awesome.scss
-@import 'source/scss/font-awesome';
-
 // selectively import components we need from bootstrap
 // see: node_modules/bootstrap/scss/bootstrap.scss
 @import 'source/scss/bootstrap';

static/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}

theme.toml

@@ -5,7 +5,7 @@ description = "A simple Hugo theme based on the Bootstrap v4 blog example."
 homepage = "https://github.com/alanorth/hugo-theme-bootstrap4-blog"
 tags = ["bootstrap", "blog", "font awesome"]
 features = ["responsive", "blog"]
-min_version = 0.25
+min_version = 0.55
 
 [author]
   name = "Alan Orth"

webpack.config.js

@@ -0,0 +1,10 @@
+const path = require('path');
+
+module.exports = {
+    entry: './source/js/fontawesome.js',
+    output: {
+            path: path.resolve(__dirname, 'assets/js'),
+            filename: 'fontawesome.min.js'
+          },
+    mode: 'production'
+};