Merge pull request #324 from chipzoller/baseurl-fixes

16 files changed, 65 insertions, 46 deletions

diff --git a/README.md b/README.md
index f9dd595..c938961 100644
--- a/README.md
+++ b/README.md
@@ -399,9 +399,9 @@ Image captions are automatically generated. If an image has title text, the capt
 
 Examples of captions:
 
-- `![Jane Doe](/images/jane-doe.png)` will display the local `jane-doe.png` image with a caption of "Jane Doe".
+- `![Jane Doe](../images/jane-doe.png)` will display the local `jane-doe.png` image with a caption of "Jane Doe".
 - `![Jane Doe](https://raw.githubusercontent.com/chipzoller/hugo-clarity/master/exampleSite/static/images/jane-doe.png "This is Jane Doe")` will display the remote image `jane-doe.png` with a caption of "This is Jane Doe".
-- `![A building](/images/building.png " ")` will display the local image `building.png` with no caption.
+- `![A building](../images/building.png " ")` will display the local image `building.png` with no caption.
 
 Examples of this can also be found in the "Markdown Syntax Guide" post in the example site content.
 
diff --git a/assets/js/code.js b/assets/js/code.js
index 6746065..bdaff51 100644
--- a/assets/js/code.js
+++ b/assets/js/code.js
@@ -139,7 +139,7 @@ function actionPanel() {
     btn.className = `icon panel_icon panel_${button.id}`;
     button.show ? false : pushClass(btn, panelHide);
     // load icon inside button
-    btn.style.backgroundImage = `url(${parentURL}${iconsPath}${button.icon}.svg)`;
+    btn.style.backgroundImage = `url(${baseURL}${iconsPath}${button.icon}.svg)`;
     // append button on panel
     panel.appendChild(btn);
   });
@@ -274,4 +274,4 @@ function disableCodeLineNumbers(block){
       }
     });
   })();
-})();
\ No newline at end of file
+})();
diff --git a/assets/js/functions.js b/assets/js/functions.js
index 12187df..e40076f 100644
--- a/assets/js/functions.js
+++ b/assets/js/functions.js
@@ -2,7 +2,6 @@
 const doc = document.documentElement;
 const inline = ":inline";
 // variables read from your hugo configuration
-const parentURL = window.location.protocol + "//" + window.location.host + "/";
 let showImagePosition = "{{ .Site.Params.figurePositionShow }}";
 
 const showImagePositionLabel = '{{ .Site.Params.figurePositionLabel }}';
@@ -269,4 +268,4 @@ function goBack(target) {
   if(platform.includes("win")) {
     pushClass(bodyElement, 'windows');
   }
-})();
\ No newline at end of file
+})();
diff --git a/assets/js/index.js b/assets/js/index.js
index 6c33ac8..66f7277 100644
--- a/assets/js/index.js
+++ b/assets/js/index.js
@@ -73,7 +73,7 @@ function fileClosure(){
       Array.from(links).forEach(function(link){
         let target, rel, blank, noopener, attr1, attr2, url, isExternal;
         url = elemAttribute(link, 'href');
-        isExternal = (url && typeof url == 'string' && url.startsWith('http')) && !url.startsWith(parentURL) ? true : false;
+        isExternal = (url && typeof url == 'string' && url.startsWith('http')) && !url.startsWith(baseURL) ? true : false;
         if(isExternal) {
           target = 'target';
           rel = 'rel';
@@ -105,7 +105,6 @@ function fileClosure(){
   headingNodes.forEach(function(node){
     link = createEl('a');
     link.className = 'link icon';
-    link.style.backgroundImage = `url(${parentURL}${iconsPath}link.svg)`;
     id = node.getAttribute('id');
     if(id) {
       link.href = `${current}#${id}`;
diff --git a/assets/js/search.js b/assets/js/search.js
index 9dde9b0..577e270 100644
--- a/assets/js/search.js
+++ b/assets/js/search.js
@@ -124,7 +124,7 @@ function initializeSearch(index) {
           const searchTerm = searchField.value.trim().toLowerCase();
           if(searchTerm.length)  {
             const scopeParameter = searchScope ? `&scope=${searchScope}` : '';
-            window.location.href = new URL(`search/?query=${searchTerm}${ scopeParameter }`, rootURL).href;
+            window.location.href = new URL(baseURL + `search/?query=${searchTerm}${ scopeParameter }`).href;
           }
         });
       }
@@ -211,7 +211,7 @@ function initializeSearch(index) {
 window.addEventListener('load', function() {
   const pageLanguage = document.documentElement.lang;
   const searchIndex = `${ pageLanguage === 'en' ? '': pageLanguage}/index.json`;
-  fetch(new URL(searchIndex, rootURL).href)
+  fetch(new URL(baseURL + searchIndex).href)
   .then(response => response.json())
   .then(function(data) {
     data = data.length ? data : [];
diff --git a/assets/js/variables.js b/assets/js/variables.js
index ed949e3..93dc40a 100644
--- a/assets/js/variables.js
+++ b/assets/js/variables.js
@@ -4,7 +4,7 @@ const scaleImageClass = 'image-scale';
 const pageHasLoaded = 'DOMContentLoaded';
 const imageAltClass = 'img_alt'
 
-const rootURL = window.location.protocol + "//" + window.location.host;
+const baseURL = '{{ .Site.BaseURL }}';
 const searchFieldClass = '.search_field';
 const searchClass = '.search';
 const goBackClass = 'button_back';
diff --git a/assets/sass/_components.sass b/assets/sass/_components.sass
index beaeb12..59e784b 100644
--- a/assets/sass/_components.sass
+++ b/assets/sass/_components.sass
@@ -213,7 +213,7 @@
     height: 50vh
     max-height: 35rem
     background-color: $bg
-    // background-image: url(/images/island.jpg)
+    // background-image: url(#{$imagesPath}island.jpg)
     background-size: cover
     background-position: center
     margin-top: 4.2rem
@@ -410,6 +410,7 @@
   position: relative
   &_owner
     .icon
+      background-image: url('#{$iconsPath}link.svg')
       background-size: 100%
       background-repeat: no-repeat
       background-position: center right
@@ -593,7 +594,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%
@@ -662,7 +663,7 @@ figcaption
     color: #fff
     margin-top: -1.75rem
     font-weight: bold
-    &::first-child::before
+    &:first-child::before
       font-weight: 900
       margin-left: -.35rem
       margin-right: .35rem
diff --git a/assets/sass/_fonts.sass b/assets/sass/_fonts.sass
index 2ea6d01..12cbf24 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
diff --git a/exampleSite/content/post/markdown-syntax.md b/exampleSite/content/post/markdown-syntax.md
index 4e9245b..c9b8062 100644
--- a/exampleSite/content/post/markdown-syntax.md
+++ b/exampleSite/content/post/markdown-syntax.md
@@ -46,7 +46,7 @@ Itatur? Quiatae cullecum rem ent aut odis in re eossequodi nonsequ idebis ne sap
 
 The following image is located within the Hugo site. Because it has alt text but no title text, the caption is generated by the alt text.
 
-![Jane Doe](/images/jane-doe.png)
+![Jane Doe](../images/jane-doe.png)
 
 ### Remote image, specified caption
 
@@ -58,7 +58,7 @@ The following image is loaded from a remote URL. The alt text is the same (for s
 
 Alt text is always recommended for SEO, accessibility and in cases when images don't load. However, you don't necessarily always want an image to have a caption. In that case, use a title with one space:
 
-![A building](/images/building.png " ")
+![A building](../images/building.png " ")
 
 ## Blockquotes
 
diff --git a/exampleSite/content/post/markdown-syntax.pt.md b/exampleSite/content/post/markdown-syntax.pt.md
index 74a6293..695235a 100644
--- a/exampleSite/content/post/markdown-syntax.pt.md
+++ b/exampleSite/content/post/markdown-syntax.pt.md
@@ -51,7 +51,7 @@ Itatur? Quiatae cullecum rem ent aut odis in re eossequodi nonsequ idebis ne sap
 
 The following image is located within the Hugo site. Because it has alt text but no title text, the caption is generated by the alt text.
 
-![Jane Doe](/images/jane-doe.png)
+![Jane Doe](../images/jane-doe.png)
 
 ### Remote image, specified caption
 
@@ -63,7 +63,7 @@ The following image is loaded from a remote URL. The alt text is the same (for s
 
 Alt text is always recommended for SEO, accessibility and in cases when images don't load. However, you don't necessarily always want an image to have a caption. In that case, use a title with one space:
 
-![A building](/images/building.png " ")
+![A building](../images/building.png " ")
 
 ## Blockquotes
 
diff --git a/exampleSite/content/post/notices.md b/exampleSite/content/post/notices.md
index 66b9a50..41b4553 100644
--- a/exampleSite/content/post/notices.md
+++ b/exampleSite/content/post/notices.md
@@ -61,7 +61,7 @@ public void SayHello()
 If you're using VS Code for your editing, copy the `.vscode\clarity.code-snippets` file into a `.vscode` root folder on your repo.  This will enable you to type
 `note` then `<tab>` then choose with up/down arrows which flavor notice you want, then `<tab>` again to provide a title, then `<tab>` to add your content!
 
-![](/images/Note-Snippet.gif)
+![](../images/Note-Snippet.gif)
 
 To use the snippet, you need to first **enable quickSuggestions for Markdown** (one time only):
 
@@ -74,4 +74,4 @@ To use the snippet, you need to first **enable quickSuggestions for Markdown** (
   }
 ```
 4. Close and save the settings.
-{{% /notice %}}
\ No newline at end of file
+{{% /notice %}}
diff --git a/layouts/_default/_markup/render-image.html b/layouts/_default/_markup/render-image.html
index 5ca7332..2ddb29a 100644
--- a/layouts/_default/_markup/render-image.html
+++ b/layouts/_default/_markup/render-image.html
@@ -1,4 +1,5 @@
 {{- $file := .Destination -}}
+{{- $imagesDir := .Page.Site.Params.imagesDir -}}
 {{- $alt := .Text -}}
 {{- $cap := .Title -}}
 {{- $scratch := newScratch -}}
@@ -24,7 +25,7 @@
         {{- $image = "" -}}
         {{- $scratch.Add "classes" " image_svg" -}}
       {{- else -}}
-        {{- $file = path.Join "images" $image -}}
+        {{- $file = path.Join $imagesDir $image -}}
         {{- $image = $image.Content | resources.FromString $file -}}
       {{- end -}}
     {{- else -}}
diff --git a/layouts/partials/image.html b/layouts/partials/image.html
index c9b9662..a5cae3e 100644
--- a/layouts/partials/image.html
+++ b/layouts/partials/image.html
@@ -1,4 +1,5 @@
 {{- $file := .file -}}
+{{- $imagesDir := .Page.Site.Params.imagesDir -}}
 {{- $alt := .alt -}}
 {{- if not $alt -}}
   {{- $alt = .Text -}}
@@ -34,7 +35,7 @@
         {{- $image = "" -}}
         {{- $scratch.Add "classes" " image_svg" -}}
       {{- else -}}
-        {{- $file = path.Join "images" $image -}}
+        {{- $file = path.Join $imagesDir $image -}}
         {{- $image = $image.Content | resources.FromString $file -}}
       {{- end -}}
     {{- else -}}