switch to managing CSS and JS as assets

config.toml

@@ -17,8 +17,8 @@ style = "emacs"
   keywords = "open source, free software, Deutsche Bahn, DB Systel, FSFE, management, campaign, communication, strategy, konstanz, berlin, munster, IT service, politics, administration, scouts, founder"
 
   # Custom assets can be linked with their paths relative to static/
-  custom_css = ['css/custom.css', 'comments/mastodon-comments.css']
-  custom_js  = ['comments/getcomments.js']
+  custom_css = ["comments/mastodon-comments.css"]
+  custom_js  = ["comments/getcomments.js"]
 
 [params.blog]
   headline = "Thoughts about tech, politics, and more"

themes/hugo-sustain/assets/js/filter-tags.js

@@ -1,4 +1,4 @@
-/*
+/*!
  * SPDX-FileCopyrightText: 2020 Max Mehl <https://mehl.mx>
  * SPDX-License-Identifier: GPL-3.0-or-later
 */

themes/hugo-sustain/assets/scss/fonts.scss

@@ -0,0 +1,27 @@
+/* source-sans-pro-200 - latin */
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: normal;
+  font-weight: 200;
+  src: url('../webfonts/source-sans-pro-v11-latin-200.eot'); /* IE9 Compat Modes */
+  src: local('Source Sans Pro ExtraLight'), local('SourceSansPro-ExtraLight'),
+       url('../webfonts/source-sans-pro-v11-latin-200.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+       url('../webfonts/source-sans-pro-v11-latin-200.woff2') format('woff2'), /* Super Modern Browsers */
+       url('../webfonts/source-sans-pro-v11-latin-200.woff') format('woff'), /* Modern Browsers */
+       url('../webfonts/source-sans-pro-v11-latin-200.ttf') format('truetype'), /* Safari, Android, iOS */
+       url('../webfonts/source-sans-pro-v11-latin-200.svg#SourceSansPro') format('svg'); /* Legacy iOS */
+}
+
+/* source-sans-pro-regular - latin */
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: normal;
+  font-weight: 400;
+  src: url('../webfonts/source-sans-pro-v11-latin-regular.eot'); /* IE9 Compat Modes */
+  src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'),
+       url('../webfonts/source-sans-pro-v11-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+       url('../webfonts/source-sans-pro-v11-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
+       url('../webfonts/source-sans-pro-v11-latin-regular.woff') format('woff'), /* Modern Browsers */
+       url('../webfonts/source-sans-pro-v11-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
+       url('../webfonts/source-sans-pro-v11-latin-regular.svg#SourceSansPro') format('svg'); /* Legacy iOS */
+}

themes/hugo-sustain/assets/scss/main.scss

@@ -0,0 +1,4 @@
+@import "default";
+@import "fonts";
+@import "luxbar";
+@import "custom";

themes/hugo-sustain/layouts/partials/head.html

@@ -25,14 +25,9 @@
     <link href="/categories/english/index.xml" rel="alternate" type="application/rss+xml" title="Max Mehl - blog feed (EN)">
     <link href="/categories/deutsch/index.xml" rel="alternate" type="application/rss+xml" title="Max Mehl - blog feed (DE)">
     <title>{{ $title }}</title>
-    <link rel="stylesheet" type="text/css" href="{{ .Site.BaseURL }}css/bootstrap-3.3.7.min.css" />
-    <link rel="stylesheet" type="text/css" href="{{ .Site.BaseURL }}css/main.css" />
-    <link rel="stylesheet" type="text/css" href="{{ .Site.BaseURL }}css/luxbar.css" />
-    <link rel="stylesheet" type="text/css" href="{{ .Site.BaseURL }}css/fontawesome/css/all.min.css" />
-    <link rel="stylesheet" type="text/css" href="{{ .Site.BaseURL }}css/fonts.css" />
-    {{- range .Site.Params.custom_css }}
-    <link rel="stylesheet" href="{{ $.Site.BaseURL}}{{ . }}?v={{ md5 time.Now.Unix }}" />
-    {{- end }}
+
+    <!-- CSS and JS -->
+    {{- partialCached "head/css.html" . }}
 
     {{ "<!-- Open Graph meta-data (e.g. Facebook) -->" | safeHTML }}
     <meta property="og:title" content="{{ $title }}"/>

themes/hugo-sustain/layouts/partials/head/css.html

@@ -0,0 +1,21 @@
+<!-- Static, third-party CSS -->
+{{- range (slice "css/bootstrap-3.3.7.min.css" "css/fontawesome-all.min.css") }}
+  {{- with resources.Get . }}
+    {{- if eq hugo.Environment "development" }}
+      <link rel="stylesheet" href="{{ .RelPermalink }}">
+    {{- else }}
+      {{- with . | minify | fingerprint }}
+        <link rel="stylesheet" href="{{ .RelPermalink }}" integrity="{{ .Data.Integrity }}" crossorigin="anonymous">
+      {{- end }}
+    {{- end }}
+  {{- end }}
+{{- end }}
+
+<!-- Theme stylesheet, combination of all in assets/scss -->
+{{- $style := resources.Get "scss/main.scss" | resources.ExecuteAsTemplate "scss/main.scss" . | toCSS (dict "targetPath" "css/main.css" "enableSourceMap" false) }}
+<link rel="stylesheet" href="{{ ($style).RelPermalink }}?v={{ md5 time.Now.Unix }}">
+
+<!-- Custom CSS -->
+{{- range .Site.Params.custom_css }}
+<link rel="stylesheet" href="{{ relURL . }}?v={{ md5 time.Now.Unix }}" />
+{{- end }}

themes/hugo-sustain/layouts/partials/js.html

@@ -1,8 +1,17 @@
-<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
-<script src="{{ .Site.BaseURL }}js/jquery-1.11.3.min.js"></script>
-<script src="{{ .Site.BaseURL }}js/filter-tags.js"></script>
-<!-- Bootstrap core JavaScript -->
-<!--<script src="{{ .Site.BaseURL }}js/bootstrap-3.3.7.min.js" ></script>-->
-{{ range .Site.Params.custom_js -}}
-<script src="{{ $.Site.BaseURL }}{{ . }}"></script>
-{{ end }}
+{{- range (slice "js/jquery-1.11.3.min.js" "js/filter-tags.js") }}
+  {{- with resources.Get . }}
+    {{- if eq hugo.Environment "development" }}
+      {{- with . }}
+        <script src="{{ .RelPermalink }}"></script>
+      {{- end }}
+    {{- else }}
+      {{- with . | minify | fingerprint }}
+        <script src="{{ .RelPermalink }}" integrity="{{- .Data.Integrity }}" crossorigin="anonymous"></script>
+      {{- end }}
+    {{- end }}
+  {{- end }}
+{{- end }}
+
+{{- range .Site.Params.custom_js }}
+<script src="{{ relURL . }}"></script>
+{{- end }}

themes/hugo-sustain/static/css/fonts.css

@@ -1,27 +0,0 @@
-/* source-sans-pro-200 - latin */
-@font-face {
-  font-family: 'Source Sans Pro';
-  font-style: normal;
-  font-weight: 200;
-  src: url('../fonts/source-sans-pro-v11-latin-200.eot'); /* IE9 Compat Modes */
-  src: local('Source Sans Pro ExtraLight'), local('SourceSansPro-ExtraLight'),
-       url('../fonts/source-sans-pro-v11-latin-200.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
-       url('../fonts/source-sans-pro-v11-latin-200.woff2') format('woff2'), /* Super Modern Browsers */
-       url('../fonts/source-sans-pro-v11-latin-200.woff') format('woff'), /* Modern Browsers */
-       url('../fonts/source-sans-pro-v11-latin-200.ttf') format('truetype'), /* Safari, Android, iOS */
-       url('../fonts/source-sans-pro-v11-latin-200.svg#SourceSansPro') format('svg'); /* Legacy iOS */
-}
-
-/* source-sans-pro-regular - latin */
-@font-face {
-  font-family: 'Source Sans Pro';
-  font-style: normal;
-  font-weight: 400;
-  src: url('../fonts/source-sans-pro-v11-latin-regular.eot'); /* IE9 Compat Modes */
-  src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'),
-       url('../fonts/source-sans-pro-v11-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
-       url('../fonts/source-sans-pro-v11-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
-       url('../fonts/source-sans-pro-v11-latin-regular.woff') format('woff'), /* Modern Browsers */
-       url('../fonts/source-sans-pro-v11-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
-       url('../fonts/source-sans-pro-v11-latin-regular.svg#SourceSansPro') format('svg'); /* Legacy iOS */
-}