Allow sites to use local Sass files (#413)

* Change: Allow sites to use local Sass files

This processes ".scss" files in the "assets/css" directory, allowing
downstream sites to use Sass as well as plain CSS.

* Also compile SCSS as templates

* Be explicit about style sheet extensions

* SCSS files are also templated

* Fix small typo introduced in css layout

* Fix rings.svg location

---------

Co-authored-by: Stefan van der Walt <stefanv@berkeley.edu>

Author: alphapapa

assets/theme-css/fresh.css

@@ -11,7 +11,7 @@
   position: absolute;
   left: 50%;
   top: 50%;
-  background-image: url(../../images/loaders/rings.svg);
+  background-image: url(../images/loaders/rings.svg);
   background-size: 80px 80px;
   background-repeat: no-repeat;
   background-position: 50%;

doc/content/getstarted.md

@@ -72,10 +72,10 @@ Example `config.yaml` files can be seen in [scientific-python.org](https://githu
 
 ### CSS
 
-To customize styles, add CSS files to the `./assets/css/` directory.
-It's recommended to put your customizations in a file named `custom.css`, but other `css` files added there will also be loaded.
+To customize styles, add CSS (`.css`) and Sass (`.scss`) files to the `./assets/css/` directory.
+It's recommended to put your customizations in a file named `custom.css`, but other `.css` and `.scss` files added there will also be loaded.
 
-CSS files are compiled as Hugo templates, i.e. configuration variables from the `config.yaml` file can be accessed as `{{ .Site.Params.VARIABLE }}`.
+CSS and SCSS files are compiled as Hugo templates, i.e. configuration variables from the `config.yaml` file can be accessed as `{{ .Site.Params.VARIABLE }}`.
 
 ### JavaScript
 

layouts/partials/css.html

@@ -5,7 +5,6 @@
 {{- $serverOpts := cond ($inServerMode) (dict "enableSourceMap" true) (dict "outputStyle" "compressed") -}}
 {{- $sassCompiler := dict "transpiler" "dartsass" -}}
 {{- $cssOpts := collections.Merge $sassCompiler $serverOpts -}}
-{{- $sass := (slice "theme-css/pst/pydata-sphinx-theme.scss") -}}
 
 <!-- Fonts -->
 {{- $fontName := .Site.Params.font.name | default "Open Sans" -}}
@@ -23,13 +22,16 @@
 <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Noto+Sans+Symbols+2">
 
 <!-- SASS -->
+{{- $sass := (slice "theme-css/pst/pydata-sphinx-theme.scss") | append (resources.Match "css/*.scss") -}}
 {{- range $sass -}}
 
+{{- $targetFile := printf "%s.scss" . -}}
+
 {{- if $inServerMode -}}
-{{ $css := resources.Get . | toCSS $cssOpts -}}
+{{ $css := resources.Get . | resources.ExecuteAsTemplate $targetFile $page | toCSS $cssOpts -}}
 <link rel="stylesheet" type="text/css" href="{{ $css.RelPermalink }}">
 {{ else }}
-{{ $css := resources.Get . | toCSS $cssOpts | minify | fingerprint -}}
+{{ $css := resources.Get . | resources.ExecuteAsTemplate $targetFile $page | toCSS $cssOpts | minify | fingerprint -}}
 <link rel="stylesheet" type="text/css" href="{{ $css.RelPermalink }}" integrity="{{ $css.Data.Integrity }}">
 {{- end -}}
 
@@ -41,13 +43,11 @@
 
 {{- range $cssFiles -}}
 
-{{- $targetFile := printf "css/%s" . -}}
-
 {{ if $inServerMode -}}
-{{ $custom_style := . | resources.ExecuteAsTemplate $targetFile $page -}}
+{{ $custom_style := . | resources.ExecuteAsTemplate . $page -}}
 <link rel="stylesheet" href="{{ $custom_style.RelPermalink }}">
 {{ else }}
-{{ $custom_style := . | resources.ExecuteAsTemplate $targetFile $page | minify | fingerprint -}}
+{{ $custom_style := . | resources.ExecuteAsTemplate . $page | minify | fingerprint -}}
 <link rel="stylesheet" href="{{ $custom_style.RelPermalink }}" integrity="{{ $custom_style.Data.Integrity }}">
 {{- end -}}