Allow merging website's custom styling with theme

cubiest · Jan 31, 2023 · 6c2f92d · 6c2f92d
1 parent f7e3a4a
commit 6c2f92d
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 10 deletions.
diff --git a/README.md b/README.md
@@ -37,6 +37,12 @@ Visual
   * layouts/partials/javascript.html will fetch and insert it in each page including this partial (as of now: `baseof.html`, `single.html`)
 
 
+### Custom Javascript
+
+* Write custom sass file in your `assets` folder and declare the path in config file using `params.customCSS`
+  * The styling will be merged with this theme
+
+
 ### Content Shortcodes
 
 [Hugo Docs](https://gohugo.io/content-management/shortcodes/)

diff --git a/exampleSite/config.yaml b/exampleSite/config.yaml
@@ -354,6 +354,7 @@ params:
   # ------------------------------------------
   customJS:
     - "js/main.js"
+  customCSS: "/css/style.sass"
   # ------------------------------------------
   # Theme Color Palette
   # ------------------------------------------

diff --git a/layouts/partials/css.html b/layouts/partials/css.html
@@ -1,17 +1,33 @@
-{{- $inServerMode := .Site.IsServer }}
-{{- $sass         := "style.sass" }}
-{{- $cssTarget    := "css/style.css" }}
-{{- $cssOpts      := cond ($inServerMode) (dict "targetPath" $cssTarget "enableSourceMap" true "transpiler" "libsass" "vars" site.Params.style) (dict "targetPath" $cssTarget "outputStyle" "compressed" "transpiler" "libsass" "vars" site.Params.style) }}
 <link rel="icon" type="image/png" href="{{ "images/favicon.png" | relURL }}" />
-<!-- bulma, fresh start -->
+{{- $inServerMode := .Site.IsServer }}
+<!-- bulma, invi, custom css start -->
+{{- $inviCSSTarget := "css/style.css" }}
+{{ if .Site.Params.customCSS }}
+    {{- $inviCSSTarget = "css/temp_invi_style.css" }}
+{{- end }}
+{{- $inviCSSOpts := cond ($inServerMode)
+    (dict "targetPath" $inviCSSTarget "enableSourceMap" true "transpiler" "libsass" "vars" site.Params.style)
+    (dict "targetPath" $inviCSSTarget "outputStyle" "compressed" "transpiler" "libsass" "vars" site.Params.style)
+}}
+{{- $inviSass    := resources.Get "style.sass" | toCSS $inviCSSOpts }}
+{{- $cssResource := $inviSass }}
+{{ with .Site.Params.customCSS }}
+    {{- $customCSSTarget := "css/temp_custom_style.css" }}
+    {{- $customCSSOpts   := cond ($inServerMode)
+        (dict "targetPath" $customCSSTarget "enableSourceMap" true "transpiler" "libsass" "vars" site.Params.style)
+        (dict "targetPath" $customCSSTarget "outputStyle" "compressed" "transpiler" "libsass" "vars" site.Params.style)
+    }}
+    {{- $customSass      := resources.Get . | toCSS $customCSSOpts }}
+    {{- $cssResource      = slice $inviSass $customSass | resources.Concat "css/style.css" }}
+{{- end }}
 {{- if $inServerMode }}
-{{- $css := resources.Get $sass | toCSS $cssOpts }}
-<link rel="stylesheet" type="text/css" href="{{ $css.RelPermalink }}">
+    {{- $css := $cssResource }}
+    <link rel="stylesheet" type="text/css" href="{{ $css.RelPermalink }}">
 {{- else }}
-{{- $css := resources.Get $sass | toCSS $cssOpts | minify | fingerprint }}
-<link rel="stylesheet" type="text/css" href="{{ $css.RelPermalink }}" integrity="{{ $css.Data.Integrity }}">
+    {{- $css := $cssResource | minify }}
+    <link rel="stylesheet" type="text/css" href="{{ $css.RelPermalink }}" integrity="{{ $css.Data.Integrity }}">
 {{- end }}
-<!-- bulma, fresh end -->
+<!-- bulma, invi css end -->
 <!-- photoswipe -->
 <link rel="stylesheet" type="text/css" href="{{ "modules/photoswipe/photoswipe.css" | relURL }}">
 <!-- fontawesome icons start -->