Add custom SASS and JS support

6 files changed, 21 insertions, 6 deletions

diff --git a/assets/js/custom.js b/assets/js/custom.js
new file mode 100644
index 0000000..11b1d82
--- /dev/null
+++ b/assets/js/custom.js
@@ -0,0 +1 @@
+// add custom js in this file
\ No newline at end of file
diff --git a/assets/sass/_custom.sass b/assets/sass/_custom.sass
new file mode 100644
index 0000000..2d22745
--- /dev/null
+++ b/assets/sass/_custom.sass
@@ -0,0 +1,4 @@
+// add customs styles and general overrides here
+// due to the cascading nature of css, if you try to override theme css variables in this file, those changes will not apply. Instead, override css variables in the `override.sass` file
+// we recommend not editing this file directly. Instead, create an `assets/sass/_custom.sass` file at the root level of your site.
+// if you edit this file directly, you will have to resolve git conflicts when and if you decide to pull changes we make on the theme
diff --git a/assets/sass/main.sass b/assets/sass/main.sass
index 0ecb157..de730ff 100644
--- a/assets/sass/main.sass
+++ b/assets/sass/main.sass
@@ -11,4 +11,5 @@ html
 @import "utils"
 @import "syntax"
 @import "fonts"
-@import "chart"
\ No newline at end of file
+@import "chart"
+@import "custom"
diff --git a/exampleSite/content/docs/clarity/theme-overrides.md b/exampleSite/content/docs/clarity/theme-overrides.md
index abcb933..11ba63f 100644
--- a/exampleSite/content/docs/clarity/theme-overrides.md
+++ b/exampleSite/content/docs/clarity/theme-overrides.md
@@ -7,7 +7,7 @@ weight=18
 
 To minimize HTTP requests per page, we would recommend loading CSS styles and JavaScript helpers in single bundles. That is to say, one CSS file and one JavaScript file. Using Hugo minify functions, these files will be minified to optimize the size.
 
-Going by the above 👆🏻 reason, we recommend adding custom CSS and JS via [this custom SASS file](https://github.com/chipzoller/hugo-clarity/blob/master/assets/sass/_custom.sass) and [custom JavaScript file](https://github.com/chipzoller/hugo-clarity/blob/master/assets/js/custom.js).
+Going by the above 👆🏻 reason, we recommend adding custom CSS and JS via the custom SASS file ([Compose](https://github.com/onweru/compose/blob/master/assets/sass/_custom.sass), [Clarity](https://github.com/chipzoller/hugo-clarity/blob/master/assets/sass/_custom.sass)) and the custom JS file ([Compose](https://github.com/onweru/compose/hugo-compose/blob/master/assets/js/custom.js), [Clarity](https://github.com/chipzoller/hugo-clarity/blob/master/assets/js/custom.js)).
 
 However, sometimes you may need to load additional style or script files. In such cases, you can add custom `.css` and `.js` files by listing them in the `config.toml` file (see the snippet below). Similar to images, these paths should be relative to the `static` directory.
 
@@ -35,4 +35,4 @@ Similar, if you want to add some code right before the body end, create your own
 
 ```
 layouts/partials/hooks/body-end.html
-```
\ No newline at end of file
+```
diff --git a/exampleSite/content/docs/compose/customize.md b/exampleSite/content/docs/compose/customize.md
index be85383..05f0e65 100644
--- a/exampleSite/content/docs/compose/customize.md
+++ b/exampleSite/content/docs/compose/customize.md
@@ -3,6 +3,7 @@ description = "basic configuration"
 title = "Customize layouts & components"
 weight = 10
 +++
+
 ### Shortcodes modifiers
 
 These modifiers are classes you can use with shortcodes to customize the look and feel of your layouts and components.
@@ -43,7 +44,7 @@ Under `params` add `enableDarkMode = false` to your `config.toml` file. If your
 
 ### How do I change the theme color?
 
-If the theme is a git submodule, you can copy the file `assets/sass/_variables.sass` from the theme into your own site.  
+If the theme is a git submodule, you can copy the file `assets/sass/_variables.sass` from the theme into your own site.
 The location must be exactly the same as in the theme, so put it in `YourFancySite/assets/sass/`.
 You can then edit the file to customize the theme color in your site without having to modify the theme itself.
 
@@ -78,4 +79,6 @@ customJS = [scriptURL1, scriptURL2 ... ]
 ...
 ```
 
-### I want to add custom sass
\ No newline at end of file
+### I want to add custom SASS or JS
+
+Add custom SASS and JS via [this custom SASS file](https://github.com/onweru/compose/blob/master/assets/sass/_custom.sass) and [this custom JavaScript file](https://github.com/onweru/compose/hugo-compose/blob/master/assets/js/custom.js).
diff --git a/layouts/partials/scripts/bundle.html b/layouts/partials/scripts/bundle.html
index e144389..332eeab 100644
--- a/layouts/partials/scripts/bundle.html
+++ b/layouts/partials/scripts/bundle.html
@@ -16,7 +16,13 @@
 {{- $mainScriptPath := "js/index.js" }}
 {{- $main := resources.Get $mainScriptPath | resources.ExecuteAsTemplate $mainScriptPath . }}
 
-{{- $bundle := slice $variables $functions $code $main $fuse $search | resources.Concat "js/bundle.js" | resources.Minify | resources.Fingerprint "sha512" }}
+{{- $customScriptPath := "js/custom.js" }}
+{{ if (fileExists "../../assets/js/custom.js") }}
+  {{ $customScriptPath := "../../assets/js/custom.js" }}
+{{ end }}
+{{- $custom := resources.Get $customScriptPath | resources.ExecuteAsTemplate $customScriptPath . }}
+
+{{- $bundle := slice $variables $functions $code $main $fuse $search $custom | resources.Concat "js/bundle.js" | resources.Minify | resources.Fingerprint "sha512" }}
 <script src="{{ $bundle.Permalink }}"></script>
 
 {{- partialCached "hooks/scripts" . -}}