Bundle page-specific JavaScript

eleventy.config.js

@@ -23,6 +23,10 @@ module.exports = function (eleventyConfig) {
     eleventyConfig.addPlugin(metagen);
     eleventyConfig.addPlugin(emojiReadTime);
 
+    // Eleventy bundle plugin
+    eleventyConfig.addBundle("css");
+    eleventyConfig.addBundle("js");
+
     // Add content categories to a collection
     eleventyConfig.addCollection("categories", function(collectionApi) {
         let categories = new Set();

package.json

@@ -5,12 +5,12 @@
     "build": "bunx @11ty/eleventy"
   },
   "devDependencies": {
-    "@types/bun": "^1.1.5"
+    "@types/bun": "^1.1.6"
   },
   "dependencies": {
-    "@11ty/eleventy": "^2.0.1",
+    "@11ty/eleventy": "^3.0.0-alpha.17",
     "@11ty/eleventy-navigation": "^0.3.5",
-    "@11ty/eleventy-plugin-rss": "^1.2.0",
+    "@11ty/eleventy-plugin-rss": "^2.0.2",
     "@11tyrocks/eleventy-plugin-emoji-readtime": "^1.0.1",
     "@uncenter/eleventy-plugin-toc": "^1.0.3",
     "@zachleat/details-utils": "^2.0.2",

src/_includes/asummersend/base.njk

@@ -1,6 +1,4 @@
----
-customCSSSheets: ["asummersend"]
----
+{%- css %}{% include "src/assets/css/asummersend.css" %}{%- endcss %}
 
 {% extends "global/baselayout.njk" %}
 

src/_includes/cassettebeasts/base.njk

@@ -1,6 +1,4 @@
----
-customCSSSheets: ["cassettebeasts"]
----
+{%- css %}{% include "src/assets/css/cassettebeasts.css" %}{%- endcss %}
 
 {% extends "global/baselayout.njk" %}
 

src/_includes/global/baselayout.njk

@@ -12,11 +12,7 @@
     {% if hasTooltips %}
         <link rel="stylesheet" href="{{'/assets/css/tooltips.css' | url | safe}}">
     {% endif %}
-    {% if customCSSSheets %}
-        {%- for sheet in customCSSSheets -%}
-        <link rel="stylesheet" href="{{'/assets/css/' + sheet + '.css' | url | safe}}">
-        {%- endfor -%}
-    {% endif %}
+        <style>{% getBundle "css" %}</style>
 
         {# Fonts #}
         {% include "global/fontdefault.njk" %}
@@ -37,11 +33,9 @@
         {% block favicon %}{% include "global/favicon.njk" %}{% endblock %}
 
         {# JavaScript #}
+        <script src="{% getBundleFileUrl 'js' %}" defer></script>
+    {% if toc %}
         <script src="{{'/assets/js/details-utils.js'}}" defer></script>
-    {% if customJSFiles %}
-        {%- for jsFile in customJSFiles -%}
-        <script src="{{'/assets/js/' + jsFile + '.js' | url | safe}}" defer></script>
-        {%- endfor -%}
     {% endif %}
 
         <title>

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>
+    .blog__post--prev { grid-area: prev; }
+    .blog__post--next { grid-area: next; }
+{% endcss %}

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>
+{% endcss %}

src/_includes/global/hero.njk

@@ -7,7 +7,7 @@
     </div>
 </header>
 
-<style>
+{%- css %}
     .hero {
         width: 100%;
         background-color: var(--clr-hero-bg);
@@ -32,11 +32,10 @@
         object-fit: contain;
         overflow: hidden;
         max-height: 16rem;
-        {% block heroDropShadowStyle %}{% endblock %}
     }
-</style>
+{% endcss %}
 
-<script>
+{%- js %}
     const hero = document.querySelector(".hero");
     const heroTopBarEl = document.querySelector(".hero__top-bar");
     const headerImgEl = document.querySelector(".hero__img");
@@ -44,4 +43,4 @@
     {% block eventScript %}
         {{ eventScript }}
     {% endblock %}
-</script>
+{% endjs %}

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,9 +131,9 @@ https://kalechips.net/projects/snippets/burger #}
             padding: 0;
         }
     }
-</style>
+{% endcss %}
 
-<script>
+{%- js %}
     const navbarBurger = document.querySelector(".navbar__burger");
     navbarBurger.addEventListener("keydown", (event) => {
         if (event.key == "Escape") {
@@ -142,4 +142,4 @@ https://kalechips.net/projects/snippets/burger #}
             document.querySelector(".navbar__toggle").focus();
         }
     });
-</script>
+{% endjs %}

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>
+    .pagination li a:focus { outline: none; }
+{% endcss %}

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>
+{% endcss %}

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

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>
+{% endcss %}

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

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>
+{% endcss %}

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>
+{% endcss %}

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();

src/_includes/main/statuscafe.njk

@@ -10,13 +10,9 @@
     <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>
+{%- js %}
     const statusCafeContent = document.getElementById("statuscafe-content");
     statusCafeContent.innerHTML = `
         <p>Fetching data from status.cafe...</p>
@@ -40,4 +36,4 @@
         }
     };
     fetchStatusCafe();
-</script>
+{% endjs %}

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>
+{% endcss %}

src/_includes/starwarskotor/base.njk

@@ -1,6 +1,4 @@
----
-customCSSSheets: ["starwarskotor"]
----
+{%- css %}{% include "src/assets/css/starwarskotor.css" %}{%- endcss %}
 
 {% extends "global/baselayout.njk" %}
 

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

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

src/changelogs/logs/2024/2024-07-18.md

@@ -4,4 +4,6 @@ date: 2024-07-18
 
 * Add list of web cliques I joined to the home page
 * Add pixel cliques I joined to the [Adoptables page](/adoptables)
-* Add a [Joined](/links/#joined) tab to the [Links page](/links) to list the web cliques and widgets of web rings I joined, as well as linking to my fanlisting collective.
+* Add a [Joined](/links/#joined) tab to the [Links page](/links) to list the web cliques and widgets of web rings I joined, as well as linking to my fanlisting collective.
+* Upgrade Eleventy to version 3.0
+* Bundle page-specific CSS and JavaScript in the `<head>` element with Eleventy 3.0's [built-in bundle plugin](https://github.com/11ty/eleventy-plugin-bundle)

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

src/pages/guestbook.njk

@@ -1,12 +1,14 @@
 ---
 title: Guestbook
-customCSSSheets: ["comments"]
-customJSFiles: ["svgIconControl", "googleSheetsReaderGizmo", "comments"]
 eleventyNavigation:
     order: 10
 eleventyComputed:
     desc: Leave a message for {{ sitemeta.siteAuthor.name }}.
 ---
+{%- css %}{% include "src/assets/css/comments.css" %}{%- endcss %}
+{%- js %}{% include "src/assets/js/svgIconControl.js" %}{%- endjs %}
+{%- js %}{% include "src/assets/js/googleSheetsReaderGizmo.js" %}{%- endjs %}
+{%- js %}{% include "src/assets/js/comments.js" %}{%- endjs %}
 
 <p class="center-text">Guestbook Archive: <a href="https://web.archive.org/web/20240528231121/https%3A%2F%2Fleilukin.123guestbook.com%2F">123Guestbook</a></p>
 
@@ -40,9 +42,9 @@ eleventyComputed:
     </div>
 </noscript>
 
-<style>
+{%- css %}
     .gb__messages--title {
         text-align: center;
         margin-bottom: 0.5em;
     }
-</style>
+{% endcss %}

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>
+{% endcss %}

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

src/statements/colophon.md

@@ -10,7 +10,7 @@ eleventyNavigation:
 Information about how this website is built.
 
 ## Technology
-* Built with the static site generator [Eleventy](https://www.11ty.dev/)
+* Built with the static site generator [Eleventy](https://www.11ty.dev/) (version 3.0)
 * Templating languages: Nunjucks and Markdown
 * Code written with Visual Studio Code
 * JavaScript runtime: [Bun](https://bun.sh)