From 905522e8747119f415032386800c8d6687762d01 Mon Sep 17 00:00:00 2001
From: de-souza <43355143+de-souza@users.noreply.github.com>
Date: Sat, 16 Nov 2019 00:37:45 +0100
Subject: Add possibility to use site-wide custom CSS and JS

---
 README.md                    | 35 +++++++++++++++++++++++++++++------
 config.yaml                  |  7 +++++++
 layouts/_default/baseof.html | 13 ++++++++++++-
 3 files changed, 48 insertions(+), 7 deletions(-)

diff --git a/README.md b/README.md
index ad9a360..aa29218 100644
--- a/README.md
+++ b/README.md
@@ -17,7 +17,7 @@ Optional features:
 - Show summaries on homepage
 - Schema.org, Open Graph and Twitter Cards metadata
 - Utterances comments widget
-- CSS and JS can be [dynamically embedded](#dynamically-embedded-css-and-js) with shortcodes
+- Custom CSS and JS can be added [site-wide](#custom-css-and-js), or [dynamically](#dynamically-embedded) with shortcodes
 - Built-in shortcodes:
   - Netlify contact form
   - On-click Soundcloud player
@@ -77,6 +77,12 @@ params:
   netlify:
     honeypot: false     # Set to true to add honeypot field in contact form
     recaptcha: false    # Set to true to add recaptcha challenge in contact form
+  # css:                # Uncomment to add custom CSS from a list of files
+  #   - css/foo.css
+  #   - bar.css
+  # js:                 # Uncomment to add custom JS from a list of files
+  #   - js/foo.js
+  #   - bar.js
 
 menu:
   nav:
@@ -125,21 +131,38 @@ An on-click Soundcloud Player is inserted with the shortcode:
 The parameter is a track ID and can be extracted from the "embed" sharing menu on the track webpage.
 
 
-## Dynamically embedded CSS and JS
+## Custom CSS and JS
 
-To embed additional CSS and JS in custom shortcodes, they must be loaded as resources by Hugo and added to the `.Scratch` variable. As a result, they will be loaded in pages where the shortcodes are used.
+### Site-Wide
 
-For instance, from within a shortcode template:
+Custom CSS and JS can be added to all the pages on the website. To do so, the relevant filenames must be added to the website config file:
+
+```yaml
+params:
+  css:
+    - css/foo.css
+    - bar.css
+  js:
+    - js/foo.js
+    - bar.js
+```
+
+The paths are relative to the project working directory.
+
+
+### Dynamically Embedded
+
+To embed CSS and JS resources on specific pages of the website, they must be added to the `.Scratch` variable from a shortcode template. As a result, they will be loaded in pages where the shortcode is used. For instance, a shortcode template could contain:
 
 ```html
 {{ resources.Get "myscript.js" | fingerprint | .Page.Scratch.SetInMap "js" "myscript" }}
 ```
 
-As an example here is the shortcode template for the on-click Soundcloud player:
+As an example, here is the complete template for the Soundcloud shortcode:
 
 ```html
 {{ resources.Get "css/soundcloud.css" | minify | fingerprint | .Page.Scratch.SetInMap "css" "soundcloud" }}
-{{ resources.Get "js/soundcloud.js" | minify | fingerprint | .Page.Scratch.SetInMap "js" "soundcloud" }}
+{{ resources.Get "js/soundcloud.js" | minify | fingerprint  | .Page.Scratch.SetInMap "js" "soundcloud" }}
 <div class="Soundcloud" data-id="{{ .Get 0 }}"></div>
 ```
 
diff --git a/config.yaml b/config.yaml
index d70dd6a..93e12d3 100644
--- a/config.yaml
+++ b/config.yaml
@@ -18,6 +18,13 @@ params:
   netlify:
     honeypot: false     # Set to true to add honeypot field in contact form
     recaptcha: false    # Set to true to add recaptcha challenge in contact form
+  # css:                # Uncomment to add custom CSS from a list of files
+  #   - css/foo.css
+  #   - bar.css
+  # js:                 # Uncomment to add custom JS from a list of files
+  #   - js/foo.js
+  #   - bar.js
+
 
 menu:
   nav:
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index d4e17f9..8c412ea 100644
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -18,7 +18,18 @@
   {{ range .AlternativeOutputFormats }}
   {{ printf "<link rel=%q type=%q href=%q title=%q>" .Rel .MediaType .Permalink site.Title | safeHTML }}
   {{ end }}
-  {{ resources.Get "css/base.tpl.css" | resources.ExecuteAsTemplate "css/base.css" . | minify | fingerprint | .Page.Scratch.SetInMap "css" "base" }}
+  {{ $basecss := resources.Get "css/base.tpl.css" | resources.ExecuteAsTemplate "css/base.css" . }}
+  {{ with site.Params.css }}
+  {{ $customcss := slice $basecss }}
+  {{ range . }}{{ $customcss = $customcss | append (readFile . | resources.FromString (printf "custom/%s" .)) }}{{ end }}
+  {{ $basecss = $customcss | resources.Concat "css/base.css" }}
+  {{ end }}
+  {{ $basecss | minify | fingerprint | .Page.Scratch.SetInMap "css" "base" }}
+  {{ with site.Params.js }}
+  {{ $customjs := slice }}
+  {{ range . }}{{ $customjs = $customjs | append (readFile . | resources.FromString (printf "custom/%s" .)) }}{{ end }}
+  {{ $customjs | resources.Concat "js/base.js" | minify | fingerprint | $.Page.Scratch.SetInMap "js" "base" }}
+  {{ end }}
   {{/*
     In the following block, Hugo is forced to stop and pre-render the
     content of the current page with all its shortcodes. Thanks to this
-- 
cgit v1.2.3