From f013d4a9b2ec26f8a44c2726a5059e54d0445a9f Mon Sep 17 00:00:00 2001
From: Austin Dworaczyk Wiltshire <561689+adworacz@users.noreply.github.com>
Date: Thu, 13 May 2021 22:09:00 -0700
Subject: [PATCH 1/2] Support inlining CSS for a performance boost.

Can reduce First Content Paint time and overall download size for a
single page. This is useful for sites where often only one page is
visited by a user. In such a case, separately loading/caching the CSS
provides no extra benefit, and slows down content rendering while
waiting the CSS network request to start and finish.

Additionally, when using a decent compression algorithm like Brotli, the
total number of bytes sent over the wire can drop a bit. In my testing,
I saw total CSS + HTML size drop by 0.17KB, or ~2.5%.

Original idea taken from "Lightspeed" Zola theme:
https://github.com/carpetscheme/lightspeed/blob/master/templates/index.html#L15-L16
---
 config.toml                |  4 ++++
 templates/macros/head.html | 19 +++++++++++++------
 2 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/config.toml b/config.toml
index 6865055..ed318a3 100644
--- a/config.toml
+++ b/config.toml
@@ -63,6 +63,10 @@ show_tags = true
 # ["orange", "blue", "red", "green", "pink"]
 theme_color = "orange"
 
+# Whether or not to inline CSS in the generated HTML. Can provide
+# a performance improvement for some sites.
+inline_css = false
+
 # Custom css to style over the defaults. This is useful when you only have a
 # few small tweaks to make rather than a major rehaul to the theme.
 # It would be best to make this a proper .sass or .scss file in sass/ rather
diff --git a/templates/macros/head.html b/templates/macros/head.html
index 6b4e5b5..17599cd 100644
--- a/templates/macros/head.html
+++ b/templates/macros/head.html
@@ -7,12 +7,19 @@
 -#}
 
 {% macro styling() %}
-    <link rel="stylesheet" href="{{ get_url(path="style.css") }}">
-    {% if config.extra.theme_color != "orange" -%}
-        {% set color = "color/" ~ config.extra.theme_color ~ ".css" -%}
-        <link rel="stylesheet" href="{{ get_url(path=color) }}">
-    {%- else -%}
-        <link rel="stylesheet" href=" {{ get_url(path="color/orange.css") }}">
+    {% if config.extra.inline_css -%}
+        {% set styleCSS = load_data(path="public/style.css", format="plain") -%}
+        <style>{{ styleCSS | trim | safe }}</style>
+    {% else %}
+        <link rel="stylesheet" href="{{ get_url(path="style.css") }}">
+    {% endif %}
+    {% set color = config.extra.theme_color | default(value="orange")  -%}
+    {% set colorCSS = "color/" ~ color ~ ".css" -%}
+    {% if config.extra.inline_css -%}
+        {% set colorCSS = load_data(path="public/" ~ colorCSS, format="plain") -%}
+        <style>{{ colorCSS | trim | safe }}</style>
+    {% else -%}
+        <link rel="stylesheet" href="{{ get_url(path=colorCSS) }}">
     {% endif %}
     {%- if config.extra.custom_css is defined -%}
         <link rel="stylesheet" href="{{ get_url(path="custom.css") }}">

From 6666a427acc3ec62d7a977d680fc4858febd6754 Mon Sep 17 00:00:00 2001
From: Austin Dworaczyk Wiltshire <561689+adworacz@users.noreply.github.com>
Date: Wed, 28 Jul 2021 15:39:41 +0000
Subject: [PATCH 2/2] Update config.toml with additional details from PR
 summary

Co-authored-by: elias <elias.jm.garcia@gmail.com>
---
 config.toml | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/config.toml b/config.toml
index ed318a3..0f437ba 100644
--- a/config.toml
+++ b/config.toml
@@ -65,6 +65,10 @@ theme_color = "orange"
 
 # Whether or not to inline CSS in the generated HTML. Can provide
 # a performance improvement for some sites.
+# This is useful for sites where often only one page is visited by a user.
+# In such a case, separately loading/caching the CSS provides no extra 
+# benefit, and slows down content rendering while waiting the CSS network 
+# request to start and finish.
 inline_css = false
 
 # Custom css to style over the defaults. This is useful when you only have a