Provide configurable image, font, icon paths and make them available within CSS along with baseURL

Signed-off-by: Ivan Boothe <git@rootwork.org>

5 files changed, 43 insertions, 25 deletions

diff --git a/assets/sass/_components.sass b/assets/sass/_components.sass
index ccd0b85..9b08dc6 100644
--- a/assets/sass/_components.sass
+++ b/assets/sass/_components.sass
@@ -593,7 +593,7 @@ figcaption
       left: 0.1rem
       width: 1.3rem
       height: 1.3rem
-      background-image: url("#{$images}sun.svg")
+      background-image: url("#{$imagesPath}sun.svg")
       background-position: center
       background-size: cover
       border-radius: 50%
diff --git a/assets/sass/_fonts.sass b/assets/sass/_fonts.sass
index 2ea6d01..4d93109 100644
--- a/assets/sass/_fonts.sass
+++ b/assets/sass/_fonts.sass
@@ -2,68 +2,68 @@
   font-family: 'Metropolis'
   font-style: normal
   font-weight: 200
-  src: local('Metropolis Extra Light'), local('Metropolis-Light'), url('#{$font-path}/Metropolis-ExtraLight.woff2') format('woff2'), url('#{$font-path}/Metropolis-ExtraLight.woff') format('woff')
+  src: local('Metropolis Extra Light'), local('Metropolis-Light'), url('#{$fontsPath}/Metropolis-ExtraLight.woff2') format('woff2'), url('#{$fontsPath}/Metropolis-ExtraLight.woff') format('woff')
   font-display: swap
 
 @font-face
   font-family: 'Metropolis'
   font-style: italic
   font-weight: 200
-  src: local('Metropolis Extra Light Italic'), local('Metropolis-ExtraLightItalic'), url('#{$font-path}/Metropolis-ExtraLightItalic.woff2') format('woff2'), url('#{$font-path}/Metropolis-ExtraLightItalic.woff') format('woff')
+  src: local('Metropolis Extra Light Italic'), local('Metropolis-ExtraLightItalic'), url('#{$fontsPath}/Metropolis-ExtraLightItalic.woff2') format('woff2'), url('#{$fontsPath}/Metropolis-ExtraLightItalic.woff') format('woff')
   font-display: swap
 
 @font-face
   font-family: 'Metropolis'
   font-style: normal
   font-weight: 300
-  src: local('Metropolis Light'), local('Metropolis-Light'), url('#{$font-path}/Metropolis-Light.woff2') format('woff2'), url('#{$font-path}/Metropolis-Light.woff') format('woff')
+  src: local('Metropolis Light'), local('Metropolis-Light'), url('#{$fontsPath}/Metropolis-Light.woff2') format('woff2'), url('#{$fontsPath}/Metropolis-Light.woff') format('woff')
   font-display: swap
 
 @font-face
   font-family: 'Metropolis'
   font-style: italic
   font-weight: 300
-  src: local('Metropolis Light Italic'), local('Metropolis-LightItalic'), url('#{$font-path}/Metropolis-LightItalic.woff2') format('woff2'), url('#{$font-path}/Metropolis-LightItalic.woff') format('woff')
+  src: local('Metropolis Light Italic'), local('Metropolis-LightItalic'), url('#{$fontsPath}/Metropolis-LightItalic.woff2') format('woff2'), url('#{$fontsPath}/Metropolis-LightItalic.woff') format('woff')
   font-display: swap
 
 @font-face
   font-family: 'Metropolis'
   font-style: normal
   font-weight: 400
-  src: local('Metropolis Regular'), local('Metropolis-Regular'), url('#{$font-path}/Metropolis-Regular.woff2') format('woff2'), url('#{$font-path}/Metropolis-Regular.woff') format('woff')
+  src: local('Metropolis Regular'), local('Metropolis-Regular'), url('#{$fontsPath}/Metropolis-Regular.woff2') format('woff2'), url('#{$fontsPath}/Metropolis-Regular.woff') format('woff')
   font-display: swap
 
 @font-face
   font-family: 'Metropolis'
   font-style: italic
   font-weight: 400
-  src: local('Metropolis Regular Italic'), local('Metropolis-RegularItalic'), url('#{$font-path}/Metropolis-RegularItalic.woff2') format('woff2'), url('#{$font-path}/Metropolis-RegularItalic.woff') format('woff')
+  src: local('Metropolis Regular Italic'), local('Metropolis-RegularItalic'), url('#{$fontsPath}/Metropolis-RegularItalic.woff2') format('woff2'), url('#{$fontsPath}/Metropolis-RegularItalic.woff') format('woff')
   font-display: swap
 
 @font-face
   font-family: 'Metropolis'
   font-style: normal
   font-weight: 500
-  src: local('Metropolis Medium'), local('Metropolis-Medium'), url('#{$font-path}/Metropolis-Medium.woff2') format('woff2'), url('#{$font-path}/Metropolis-Medium.woff') format('woff')
+  src: local('Metropolis Medium'), local('Metropolis-Medium'), url('#{$fontsPath}/Metropolis-Medium.woff2') format('woff2'), url('#{$fontsPath}/Metropolis-Medium.woff') format('woff')
   font-display: swap
 
 @font-face
   font-family: 'Metropolis'
   font-style: italic
   font-weight: 500
-  src: local('Metropolis Medium Italic'), local('Metropolis-MediumItalic'), url('#{$font-path}/Metropolis-MediumItalic.woff2') format('woff2'), url('#{$font-path}/Metropolis-MediumItalic.woff') format('woff')
+  src: local('Metropolis Medium Italic'), local('Metropolis-MediumItalic'), url('#{$fontsPath}/Metropolis-MediumItalic.woff2') format('woff2'), url('#{$fontsPath}/Metropolis-MediumItalic.woff') format('woff')
   font-display: swap
 
 @font-face
   font-family: 'Metropolis'
   font-style: normal
   font-weight: 700
-  src: local('Metropolis Bold'), local('Metropolis-Bold'), url('#{$font-path}/Metropolis-Bold.woff2') format('woff2'), url('#{$font-path}/Metropolis-Bold.woff') format('woff')
+  src: local('Metropolis Bold'), local('Metropolis-Bold'), url('#{$fontsPath}/Metropolis-Bold.woff2') format('woff2'), url('#{$fontsPath}/Metropolis-Bold.woff') format('woff')
   font-display: swap
 
 @font-face
   font-family: 'Metropolis'
   font-style: italic
   font-weight: 700
-  src: local('Metropolis Bold Italic'), local('Metropolis-BoldItalic'), url('#{$font-path}/Metropolis-BoldItalic.woff2') format('woff2'), url('#{$font-path}/Metropolis-BoldItalic.woff') format('woff')
+  src: local('Metropolis Bold Italic'), local('Metropolis-BoldItalic'), url('#{$fontsPath}/Metropolis-BoldItalic.woff2') format('woff2'), url('#{$fontsPath}/Metropolis-BoldItalic.woff') format('woff')
   font-display: swap
diff --git a/assets/sass/_variables.sass b/assets/sass/_variables.sass
index 2597a95..afabd69 100644
--- a/assets/sass/_variables.sass
+++ b/assets/sass/_variables.sass
@@ -1,6 +1,3 @@
-$font-path: '../fonts'
-// $icons: '{{ printf "../%s" (default "icons/" .Site.Params.iconsDir) }}'
-$images: '../images/'
 $light: #fff
 $haze: #fafafa
 $xhaze: darken($haze, 11%)
@@ -97,7 +94,7 @@ html
     .color
       &_choice
         &::after
-          background-image: url("#{$images}night-moon.jpg")
+          background-image: url("#{$imagesPath}night-moon.jpg")
           transform: translateX(1.4rem)
 
   @media (prefers-color-scheme: dark)
@@ -121,5 +118,5 @@ html
       .color
         &_choice
           &::after
-            background-image: url("#{$images}night-moon.jpg")
+            background-image: url("#{$imagesPath}night-moon.jpg")
             transform: translateX(1.4rem)
diff --git a/assets/sass/main.sass b/assets/sass/main.sass
index 4b63187..cd7db72 100644
--- a/assets/sass/main.sass
+++ b/assets/sass/main.sass
@@ -1,3 +1,7 @@
+$baseURL: '{{ .Site.BaseURL }}'
+$fontsPath: '{{ printf "../%s" (default "fonts/" .Site.Params.fontsDir) }}'
+$imagesPath: '{{ printf "../%s" (default "images/" .Site.Params.imagesDir) }}'
+$iconsPath: '{{ printf "../%s" (default "icons/" .Site.Params.iconsDir) }}'
 @import 'variables'
 @import 'override'
 // include static fonts only when they're not overriden
diff --git a/exampleSite/config/_default/params.toml b/exampleSite/config/_default/params.toml
index d565a29..2ba2b67 100644
--- a/exampleSite/config/_default/params.toml
+++ b/exampleSite/config/_default/params.toml
@@ -26,9 +26,34 @@ numberOfTagsShown = 14 # Applies for all other default & custom taxonomies. e.g
 # Details on page bundles: https://gohugo.io/content-management/page-bundles/#leaf-bundles
 usePageBundles = false
 
-# will be used on share >> twitter, facebook, linkedin
+# Path variables
+#
+# By default, each of these directories are children of the `static` directory.
+#
+# In some Apache server installs, these directory names could conflict and you
+# may want to change them. See:
+# https://github.com/chipzoller/hugo-clarity/issues/74
+#
+# If you change the names of these directories, be sure to copy the contents of
+# the originals to get the files included with Hugo Clarity.
+#
+# Images:
+imagesDir = "images/" # without a leading forward slash
+# Icons:
+iconsDir = "icons/" # without a leading forward slash
+# Fonts:
+fontsDir = "fonts/" # without a leading forward slash
+
+# Social media sharing image: Will be used on Twitter, Facebook, LinkedIn, etc.
+# when a given page has no other image present.
 fallBackOgImage = "images/thumbnail.png"
 
+# Logo image
+logo = "logos/logo.png"
+
+# center logo on navbar
+centerLogo = false # Set to "true" for centering or "false" for left aligned.
+
 # sets the maximum number of lines per codeblock. The codeblock will however be scrollable and expandable.
 codeMaxLines = 7
 
@@ -41,11 +66,6 @@ enableMathNotation = false
 # directory(s) where your articles are located
 mainSections = ["post"] # see config details here https://gohugo.io/functions/where/#mainsections
 
-# center logo on navbar
-centerLogo = false # Set to "true" for centering or "false" for left aligned.
-
-logo = "logos/logo.png"
-
 # Label Non inline images on an article body
 figurePositionShow = false # toggle on or off globally
 # you can toggle this behaviour on or off on per page using the same variable inside your articles frontmatter
@@ -99,9 +119,6 @@ languageMenuName = "🌐"
 # notice of the footer.
 # since = 2016
 
-# tell hugo where you store your icons e.g favicons. This is useful if you're using an apache server and there are conflicts >> see issue https://github.com/chipzoller/hugo-clarity/issues/74. If this is applicable to you, be sure to copy the contents of https://github.com/chipzoller/hugo-clarity/tree/master/static/icons to your preferred icons directory
-iconsDir = "icons/" # without a leading forward slash
-
 # Show related content at the end of an article based on the 'series' taxonomy. Can be set in post front matter.
 # showRelatedInArticle = false
 # showRelatedInSidebar = false