✨feat(config): add dynamic stylesheet loading (#118)

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
 

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 %}

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