From fac730efad8de4d26e31579e03444466bbd213d6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=93scar?= <welpo@users.noreply.github.com>
Date: Sat, 26 Aug 2023 15:07:21 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8feat(config):=20add=20dynamic=20styles?=
 =?UTF-8?q?heet=20loading=20(#118)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 config.toml                    |  6 ++++++
 templates/partials/header.html | 20 ++++++++++++++++++--
 theme.toml                     |  6 ++++++
 3 files changed, 30 insertions(+), 2 deletions(-)

diff --git a/config.toml b/config.toml
index f2c9094..17b867e 100644
--- a/config.toml
+++ b/config.toml
@@ -176,6 +176,12 @@ default_theme = "light"
 # All other skins have optimal contrast.
 skin = ""
 
+# List additional stylesheets to load site-wide.
+# These stylesheets should be located in your site's `static` directory.
+# Example: stylesheets = ["extra1.css", "path/extra2.css"]
+# You can load a stylesheet for a single post by adding it to the [extra] section of the post's front matter, following this same format.
+stylesheets = []
+
 # Add a "copy" button to codeblocks (loads ~700 bytes of JavaScript).
 copy_button = true
 
diff --git a/templates/partials/header.html b/templates/partials/header.html
index 50b78e8..1d7c6fe 100644
--- a/templates/partials/header.html
+++ b/templates/partials/header.html
@@ -28,13 +28,29 @@
         <link rel="stylesheet" href={{ get_url(path="inter_subset_es.css" ) }}>
     {% endif %}
 
-    <link rel="stylesheet" type="text/css" media="screen" href={{ get_url(path="main.css", cachebust=true ) }} />
+    {# Define array of CSS files to load. main.css is always loaded. #}
+    {%- set stylesheets = [ "main.css" ] -%}
+
+    {# Load extra CSS files from config.toml #}
+    {%- if config.extra.stylesheets -%}
+        {%- set stylesheets = stylesheets | concat(with=config.extra.stylesheets) -%}
+    {%- endif -%}
+
+    {# Load extra CSS files from page metadata #}
+    {%- if page.extra.stylesheets -%}
+        {%- set stylesheets = stylesheets | concat(with=page.extra.stylesheets) -%}
+    {%- endif -%}
 
     {# Load extra CSS for custom skin #}
     {%- if config.extra.skin and config.extra.skin != "teal" -%}
-        <link rel="stylesheet" href="{{ get_url(path='skins/' ~ config.extra.skin ~ '.css', cachebust=true) | safe }}" />
+        {%- set stylesheets = stylesheets | concat(with='skins/' ~ config.extra.skin ~ '.css') -%}
     {%- endif -%}
 
+    {# Load all stylesheets #}
+    {%- for stylesheet in stylesheets %}
+        <link rel="stylesheet" href="{{ get_url(path=stylesheet, cachebust=true) | safe }}" />
+    {%- endfor %}
+    
     <meta name="color-scheme" content="{%- if config.extra.theme_switcher -%}light dark{%- elif config.extra.default_theme -%}{{config.extra.default_theme}}{%- else -%}light{%- endif -%}">
 
     {%- if page.description %}
diff --git a/theme.toml b/theme.toml
index 87a3ff7..09e4bdb 100644
--- a/theme.toml
+++ b/theme.toml
@@ -61,6 +61,12 @@ default_theme = "light"
 # All other skins have optimal contrast.
 skin = ""
 
+# List additional stylesheets to load site-wide.
+# These stylesheets should be located in your site's `static` directory.
+# Example: stylesheets = ["extra1.css", "path/extra2.css"]
+# You can load a stylesheet for a single post by adding it to the [extra] section of the post's front matter, following this same format.
+stylesheets = []
+
 # Add a "copy" button to codeblocks (loads ~700 bytes of JavaScript).
 copy_button = true