Add custom SASS and JS support

Blake Gearin

03.02.2022 c4ce90ce987a0f93fd2a4c70f1d42886cdb34534

Add custom SASS and JS support

 assets/js/custom.js

New file
@@ -0,0 +1 @@
// add custom js in this file

 assets/sass/_custom.sass

New file
@@ -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

 assets/sass/main.sass

@@ -11,4 +11,5 @@
@import "utils"
@import "syntax"
@import "fonts"
@import "chart"
@import "chart"
@import "custom"

 exampleSite/content/docs/clarity/theme-overrides.md

@@ -7,7 +7,7 @@

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 @@

```
layouts/partials/hooks/body-end.html
```
```

 exampleSite/content/docs/compose/customize.md

@@ -3,6 +3,7 @@
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 @@

### 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 @@
...
```

### I want to add custom sass
### 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).

 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" . -}}