From aa536e42bc7f88db8f7217712a3a0e7edcc3f2c0 Mon Sep 17 00:00:00 2001
From: Helen Chong <119173961+helenclx@users.noreply.github.com>
Date: Thu, 18 Jul 2024 21:08:32 +0800
Subject: [PATCH] Use bundle plugin to bundle CSS

---
 eleventy.config.js                         |  1 +
 src/_includes/global/baselayout.njk        |  1 +
 src/_includes/global/content.njk           | 13 +++------
 src/_includes/global/footer.njk            |  4 +--
 src/_includes/global/hero.njk              |  5 ++--
 src/_includes/global/navbar.njk            |  4 +--
 src/_includes/global/pagination-oldnew.njk |  8 ++----
 src/_includes/global/shrineinfo.njk        |  4 +--
 src/_includes/global/toc.njk               |  4 +--
 src/_includes/global/top-btn.njk           |  4 +--
 src/_includes/main/archive.njk             |  4 +--
 src/_includes/main/changelogs.njk          |  4 +--
 src/_includes/main/content-nav.njk         |  4 +--
 src/_includes/main/hero.njk                |  4 +--
 src/_includes/main/statuscafe.njk          |  6 +---
 src/_includes/main/support-me.njk          |  4 +--
 src/blog/posts.njk                         |  4 +--
 src/changelogs/changelogs.njk              |  7 +----
 src/pages/blog.njk                         | 13 +++------
 src/pages/guestbook.njk                    |  4 +--
 src/pages/shrines.njk                      |  4 +--
 src/pages/sitemap.njk                      | 32 ++++++----------------
 22 files changed, 50 insertions(+), 88 deletions(-)

diff --git a/eleventy.config.js b/eleventy.config.js
index aecd1603..d619c185 100644
--- a/eleventy.config.js
+++ b/eleventy.config.js
@@ -22,6 +22,7 @@ module.exports = function (eleventyConfig) {
     eleventyConfig.addPlugin(eleventyNavigationPlugin);
     eleventyConfig.addPlugin(metagen);
     eleventyConfig.addPlugin(emojiReadTime);
+    eleventyConfig.addBundle("css");
 
     // Add content categories to a collection
     eleventyConfig.addCollection("categories", function(collectionApi) {
diff --git a/src/_includes/global/baselayout.njk b/src/_includes/global/baselayout.njk
index 5e7f505f..484168d1 100644
--- a/src/_includes/global/baselayout.njk
+++ b/src/_includes/global/baselayout.njk
@@ -17,6 +17,7 @@
         <link rel="stylesheet" href="{{'/assets/css/' + sheet + '.css' | url | safe}}">
         {%- endfor -%}
     {% endif %}
+        <style>{% getBundle "css" %}</style>
 
         {# Fonts #}
         {% include "global/fontdefault.njk" %}
diff --git a/src/_includes/global/content.njk b/src/_includes/global/content.njk
index 7e838ffe..d4ab8043 100644
--- a/src/_includes/global/content.njk
+++ b/src/_includes/global/content.njk
@@ -86,7 +86,7 @@
     {% block shrineInfo %}{% endblock %}
 </content-wrapper>
 
-<style>
+{%- css %}
     .breadcrumbs {
         list-style-type: "";
         padding: 0;
@@ -118,11 +118,6 @@
         grid-template-areas: 'prev next';
     }
 
-    .blog__post--prev {
-        grid-area: prev;
-    }
-
-    .blog__post--next {
-        grid-area: next;
-    }
-</style>
\ No newline at end of file
+    .blog__post--prev { grid-area: prev; }
+    .blog__post--next { grid-area: next; }
+{% endcss %}
\ No newline at end of file
diff --git a/src/_includes/global/footer.njk b/src/_includes/global/footer.njk
index 119ce606..55274bfa 100644
--- a/src/_includes/global/footer.njk
+++ b/src/_includes/global/footer.njk
@@ -17,7 +17,7 @@
     {%- include "global/top-btn.njk" %}
 </footer>
 
-<style>
+{%- css %}
     :root { --footer-gap: 0.5em; }
 
     .footer {
@@ -40,4 +40,4 @@
 
     .footer__links { justify-self: center; }
     .footer__shrines { align-self: center; }
-</style>
\ No newline at end of file
+{% endcss %}
\ No newline at end of file
diff --git a/src/_includes/global/hero.njk b/src/_includes/global/hero.njk
index 9d82f782..6ed4ed8e 100644
--- a/src/_includes/global/hero.njk
+++ b/src/_includes/global/hero.njk
@@ -7,7 +7,7 @@
     </div>
 </header>
 
-<style>
+{%- css %}
     .hero {
         width: 100%;
         background-color: var(--clr-hero-bg);
@@ -32,9 +32,8 @@
         object-fit: contain;
         overflow: hidden;
         max-height: 16rem;
-        {% block heroDropShadowStyle %}{% endblock %}
     }
-</style>
+{% endcss %}
 
 <script>
     const hero = document.querySelector(".hero");
diff --git a/src/_includes/global/navbar.njk b/src/_includes/global/navbar.njk
index 00ee1d2d..82fa3b7c 100644
--- a/src/_includes/global/navbar.njk
+++ b/src/_includes/global/navbar.njk
@@ -36,7 +36,7 @@ https://kalechips.net/projects/snippets/burger #}
     </ul>
 </nav>
 
-<style>
+{%- css %}
     :root {
         --icon-burger: url(/assets/icons/burger.svg);
         --icon-close: url(/assets/icons/close.svg);
@@ -131,7 +131,7 @@ https://kalechips.net/projects/snippets/burger #}
             padding: 0;
         }
     }
-</style>
+{% endcss %}
 
 <script>
     const navbarBurger = document.querySelector(".navbar__burger");
diff --git a/src/_includes/global/pagination-oldnew.njk b/src/_includes/global/pagination-oldnew.njk
index c7312c82..5a2a75ff 100644
--- a/src/_includes/global/pagination-oldnew.njk
+++ b/src/_includes/global/pagination-oldnew.njk
@@ -57,7 +57,7 @@ Newer{% endset %}
     </ul>
 </nav>
 
-<style>
+{%- css %}
     .pagination__wrapper {
         display: grid;
         place-content: center;
@@ -100,7 +100,5 @@ Newer{% endset %}
         text-decoration: none;
     }
 
-    .pagination li a:focus {
-        outline: none;
-    }
-</style>
\ No newline at end of file
+    .pagination li a:focus { outline: none; }
+{% endcss %}
\ No newline at end of file
diff --git a/src/_includes/global/shrineinfo.njk b/src/_includes/global/shrineinfo.njk
index 94b0763e..c8ccacae 100644
--- a/src/_includes/global/shrineinfo.njk
+++ b/src/_includes/global/shrineinfo.njk
@@ -13,7 +13,7 @@
     </div>
 </aside>
 
-<style>
+{%- css %}
     .right-sidebar {
         background-color: var(--clr-content-bg);
         font-size: clamp(0.9rem, 0.9rem + 3vw, 1rem);
@@ -35,4 +35,4 @@
     }
 
     .shrine__info ul { margin-top: 0.5em; }
-</style>
\ No newline at end of file
+{% endcss %}
\ No newline at end of file
diff --git a/src/_includes/global/toc.njk b/src/_includes/global/toc.njk
index 0fa1ffdd..5c67875e 100644
--- a/src/_includes/global/toc.njk
+++ b/src/_includes/global/toc.njk
@@ -9,7 +9,7 @@
     </details-utils>
 </aside>
 
-<style>
+{%- css %}
     .toc__wrapper {
         max-height: 89vh;
         overflow-x: auto;
@@ -52,4 +52,4 @@
         padding: 0;
         font-size: 1rem;
     }
-</style>
+{% endcss %}
diff --git a/src/_includes/global/top-btn.njk b/src/_includes/global/top-btn.njk
index 7b2e5c7c..5a8914bf 100644
--- a/src/_includes/global/top-btn.njk
+++ b/src/_includes/global/top-btn.njk
@@ -5,7 +5,7 @@
     Back to Top
 </a>
 
-<style>
+{%- css %}
     .top-btn,
     .top-btn:hover {
         color: var(--clr-top-btn-txt);
@@ -39,4 +39,4 @@
         stroke: currentColor;
         fill: currentColor;
     }
-</style>
\ No newline at end of file
+{% endcss %}
\ No newline at end of file
diff --git a/src/_includes/main/archive.njk b/src/_includes/main/archive.njk
index c5f21e6c..5b8b248a 100644
--- a/src/_includes/main/archive.njk
+++ b/src/_includes/main/archive.njk
@@ -14,7 +14,7 @@
     {% endfor %}
 </ul>
 
-<style>
+{%- css %}
     .item-list {
         display: grid;
         gap: 1em;
@@ -26,4 +26,4 @@
         line-height: 1.3;
         margin-bottom: 0.2em;
     }
-</style>
+{% endcss %}
\ No newline at end of file
diff --git a/src/_includes/main/changelogs.njk b/src/_includes/main/changelogs.njk
index f0f4acc0..8753b30b 100644
--- a/src/_includes/main/changelogs.njk
+++ b/src/_includes/main/changelogs.njk
@@ -26,7 +26,7 @@ articleElement: true
 
 {{ content | safe }}
 
-<style>
+{%- css %}
     .changelog__nav,
     .changelog__nav--links {
         display: flex;
@@ -59,4 +59,4 @@ articleElement: true
             gap: 1em;
         }
     }
-</style>
\ No newline at end of file
+{% endcss %}
\ No newline at end of file
diff --git a/src/_includes/main/content-nav.njk b/src/_includes/main/content-nav.njk
index 3bde29e6..c887905e 100644
--- a/src/_includes/main/content-nav.njk
+++ b/src/_includes/main/content-nav.njk
@@ -13,7 +13,7 @@
     </nav>
 </aside>
 
-<style>
+{%- css %}
     .content__nav {
         padding: 1.2em clamp(1em, 5%, 1.5em);
         background-color: var(--clr-content-bg);
@@ -22,4 +22,4 @@
     .content__nav--title {
         font-size: 1.7rem;
     }
-</style>
\ No newline at end of file
+{% endcss %}
\ No newline at end of file
diff --git a/src/_includes/main/hero.njk b/src/_includes/main/hero.njk
index 463ee67a..053ba3ed 100644
--- a/src/_includes/main/hero.njk
+++ b/src/_includes/main/hero.njk
@@ -4,9 +4,7 @@
     <img fetchpriority="high" src="/assets/leilukin/Leilukins-Hub-website-banner.avif" alt="Banner of Leilukin's Hub">
 {% endblock %}
 
-{% block heroDropShadowStyle %}
-    filter: drop-shadow(0.1rem 0.1rem 0.2rem black);
-{% endblock %}
+{%- css %}.hero img { filter: drop-shadow(0.1rem 0.1rem 0.2rem black); }{% endcss %}
 
 {% block eventScript %}
     const todayEvent = getTodayEvent();
diff --git a/src/_includes/main/statuscafe.njk b/src/_includes/main/statuscafe.njk
index c634dc9c..bced2f00 100644
--- a/src/_includes/main/statuscafe.njk
+++ b/src/_includes/main/statuscafe.njk
@@ -10,11 +10,7 @@
     <p><a href="https://status.cafe/users/leilukin">View my statuses on status.cafe</a></p>
 </div>
 
-<style>
-    #statuscafe-content {
-        margin: 0 0 0.5em 0;
-    }
-</style>
+{%- css %}#statuscafe-content { margin-bottom: 0.5em; }{% endcss %}
 
 <script>
     const statusCafeContent = document.getElementById("statuscafe-content");
diff --git a/src/_includes/main/support-me.njk b/src/_includes/main/support-me.njk
index 7a90b8ed..d0ff93ca 100644
--- a/src/_includes/main/support-me.njk
+++ b/src/_includes/main/support-me.njk
@@ -4,7 +4,7 @@
     <a href="https://ko-fi.com/A1042UH4"><img height="36" style="border:0px;" src="/assets/buttons/misc/ko-fi.webp" border="0" alt="Buy Me a Coffee at ko-fi.com" loading="lazy"></a>
 </div>
 
-<style>
+{%- css %}
     .support-me {
         display: flex;
         flex-wrap: wrap;
@@ -12,4 +12,4 @@
         align-items: center;
         margin-top: 0.7em;
     }
-</style>
\ No newline at end of file
+{% endcss %}
\ No newline at end of file
diff --git a/src/blog/posts.njk b/src/blog/posts.njk
index af2cab3e..47c41b05 100644
--- a/src/blog/posts.njk
+++ b/src/blog/posts.njk
@@ -25,7 +25,7 @@ eleventyNavigation:
     {% endfor %}
 </ul>
 
-<style>
+{%- css %}
     .blog__postlist {
         display: grid;
         gap: 1em;
@@ -37,4 +37,4 @@ eleventyNavigation:
         line-height: 1.3;
         margin-bottom: 0.2em;
     }
-</style>
+{% endcss %}
\ No newline at end of file
diff --git a/src/changelogs/changelogs.njk b/src/changelogs/changelogs.njk
index 246c42ef..e37bb174 100644
--- a/src/changelogs/changelogs.njk
+++ b/src/changelogs/changelogs.njk
@@ -22,9 +22,4 @@ eleventyNavigation:
 
 {% include "global/pagination-oldnew.njk" %}
 
-<style>
-    * + h2,
-    * + h3 {
-        margin-top: 1.5em;
-    }
-</style>
+{%- css %}* + h2, * + h3 { margin-top: 1.5em; }{% endcss %}
\ No newline at end of file
diff --git a/src/pages/blog.njk b/src/pages/blog.njk
index 71ecb78a..ee184e78 100644
--- a/src/pages/blog.njk
+++ b/src/pages/blog.njk
@@ -43,11 +43,8 @@ eleventyComputed:
     {% include "global/pagination-oldnew.njk" %}
 </section>
 
-<style>
-    .blog__posts,
-    .blog__post {
-        display: grid;
-    }
+{%- css %}
+    .blog__posts, .blog__post { display: grid; }
 
     .blog__posts {
         list-style-type: none;
@@ -62,9 +59,7 @@ eleventyComputed:
         border-bottom: var(--bdr-blogpost);
     }
 
-    .blog__post:first-of-type {
-        border-top: var(--bdr-blogpost);
-    }
+    .blog__post:first-of-type { border-top: var(--bdr-blogpost); }
 
     .blog__post--title {
         font-size: clamp(1.55rem, 1rem + 3vw, 1.8rem);
@@ -76,4 +71,4 @@ eleventyComputed:
         color: var(--clr-sub-heading);
         font-weight: 700;
     }
-</style>
+{% endcss %}
\ No newline at end of file
diff --git a/src/pages/guestbook.njk b/src/pages/guestbook.njk
index d2422a5b..1475f41e 100644
--- a/src/pages/guestbook.njk
+++ b/src/pages/guestbook.njk
@@ -40,9 +40,9 @@ eleventyComputed:
     </div>
 </noscript>
 
-<style>
+{%- css %}
     .gb__messages--title {
         text-align: center;
         margin-bottom: 0.5em;
     }
-</style>
\ No newline at end of file
+{% endcss %}
\ No newline at end of file
diff --git a/src/pages/shrines.njk b/src/pages/shrines.njk
index 32b97fb4..9eb793e8 100644
--- a/src/pages/shrines.njk
+++ b/src/pages/shrines.njk
@@ -25,7 +25,7 @@ eleventyComputed:
     </li>
 </ul>
 
-<style>
+{%- css %}
     .shrine-index {
         display: grid;
         gap: 2em;
@@ -38,4 +38,4 @@ eleventyComputed:
         display: grid;
         gap: 0.7em;
     }
-</style>
\ No newline at end of file
+{% endcss %}
\ No newline at end of file
diff --git a/src/pages/sitemap.njk b/src/pages/sitemap.njk
index c3b5183f..af6f51a4 100644
--- a/src/pages/sitemap.njk
+++ b/src/pages/sitemap.njk
@@ -19,7 +19,7 @@ eleventyComputed:
 <h2>Main Site</h2>
 {{ collections.all | eleventyNavigation | eleventyNavigationToHtml(navigationOptions) | safe }}
 
-<style>
+{%- css %}
     main ul {
         display: grid;
         gap: 0.5rem;
@@ -32,32 +32,16 @@ eleventyComputed:
         list-style-type: "";
     }
 
-    .sitemap a:focus {
-        outline: 0.15rem solid var(--clr-link);
-    }
+    .sitemap a:focus { outline: 0.15rem solid var(--clr-link); }
 
     .sitemap li {
         padding-left: 0.5em;
         align-items: start;
     }
 
-    .sitemap li::marker {
-        content: "▶";
-    }
-
-    .sitemap ul {
-        padding-left: 1em;
-    }
-
-    .sitemap ul li::marker {
-        content: "★";
-    }
-
-    .sitemap ul ul li::marker {
-        content: "♥";
-    }
-
-    .sitemap ul ul ul li::marker {
-        content: "❣";
-    }
-</style>
+    .sitemap li::marker { content: "▶"; }
+    .sitemap ul { padding-left: 1em; }
+    .sitemap ul li::marker { content: "★"; }
+    .sitemap ul ul li::marker { content: "♥"; }
+    .sitemap ul ul ul li::marker { content: "❣"; }
+{% endcss %}
\ No newline at end of file