From c9595d8f42752fa72c66991c71f281ea960840c9 Mon Sep 17 00:00:00 2001 From: Zach Leatherman Date: Thu, 2 Feb 2023 17:35:18 -0600 Subject: [PATCH] Use the new eleventy-plugin-bundle --- _includes/layouts/base.njk | 40 ++++++++++++++++---------------------- _includes/layouts/home.njk | 1 + _includes/layouts/post.njk | 5 +++++ eleventy.config.js | 2 ++ package.json | 1 + 5 files changed, 26 insertions(+), 23 deletions(-) diff --git a/_includes/layouts/base.njk b/_includes/layouts/base.njk index cebf438..df8e3b7 100644 --- a/_includes/layouts/base.njk +++ b/_includes/layouts/base.njk @@ -14,31 +14,25 @@ {#- #} {#- - Choices for CSS: + CSS bundles are provided via the eleventy-plugin-bundle plugin: + 1. You can add to them using `{% css %}` + 2. You can get from them using `{% getBundle "css" %}` or `{% getBundleFileUrl "css" %}` - 1. External files (best with local dev server live reload) - - - - - - - 2. Inlined (fastest site performance in production) -#} - -{# - 3. You could even swap between the two methods above using {% if eleventy.env.runMode === "serve" %} - 4. Concatenate CSS to one file (site performance is slower than 2 but faster than 1): - https://www.11ty.dev/docs/quicktips/concatenate/ - 5. Use a bundler - e.g. Vite https://www.11ty.dev/docs/server-vite/ - Or search for additional community plugins for esbuild, rollup, webpack, etc. + Learn more: https://github.com/11ty/eleventy-plugin-bundle #} + + {#- Add to the CSS bundle #} + {%- css %}{% include "public/css/index.css" %}{% endcss %} + {%- css %}{# add your own CSS! #}{% endcss %} + + {#- Render the CSS bundle #} + {%- if eleventy.env.runMode === "serve" %} + {# External files (local dev live reload will refresh without page reload) #} + + {%- else %} + {# Inlined CSS (fastest site performance in production) #} + + {%- endif %} diff --git a/_includes/layouts/home.njk b/_includes/layouts/home.njk index 5f9c02d..16e9819 100644 --- a/_includes/layouts/home.njk +++ b/_includes/layouts/home.njk @@ -2,6 +2,7 @@ layout: layouts/base.njk --- +{%- css %}{% include "public/css/message-box.css" %}{% endcss %}
  1. Edit the _data/metadata.json with your blog’s information.
    2. diff --git a/_includes/layouts/post.njk b/_includes/layouts/post.njk index 68228ea..bf4fa82 100644 --- a/_includes/layouts/post.njk +++ b/_includes/layouts/post.njk @@ -1,6 +1,11 @@ --- layout: layouts/base.njk --- +{%- css %} +/* Only include the syntax highlighter CSS on blog posts */ +{% include "node_modules/prismjs/themes/prism-okaidia.css" %} +{% include "public/css/prism-diff.css" %} +{%- endcss %}

    {{ title }}

      diff --git a/eleventy.config.js b/eleventy.config.js index b345cee..e06e432 100644 --- a/eleventy.config.js +++ b/eleventy.config.js @@ -3,6 +3,7 @@ const markdownItAnchor = require("markdown-it-anchor"); const pluginRss = require("@11ty/eleventy-plugin-rss"); const pluginSyntaxHighlight = require("@11ty/eleventy-plugin-syntaxhighlight"); +const pluginBundle = require("@11ty/eleventy-plugin-bundle"); const pluginNavigation = require("@11ty/eleventy-navigation"); const { EleventyHtmlBasePlugin } = require("@11ty/eleventy"); @@ -31,6 +32,7 @@ module.exports = function(eleventyConfig) { }); eleventyConfig.addPlugin(pluginNavigation); eleventyConfig.addPlugin(EleventyHtmlBasePlugin); + eleventyConfig.addPlugin(pluginBundle); // Filters eleventyConfig.addFilter("readableDate", (dateObj, format, zone) => { diff --git a/package.json b/package.json index eac8da0..7ce05c7 100644 --- a/package.json +++ b/package.json @@ -35,6 +35,7 @@ "@11ty/eleventy": "2.0.0-beta.2", "@11ty/eleventy-img": "^3.0.0", "@11ty/eleventy-navigation": "^0.3.5", + "@11ty/eleventy-plugin-bundle": "^1.0.1", "@11ty/eleventy-plugin-rss": "^1.2.0", "@11ty/eleventy-plugin-syntaxhighlight": "^4.2.0", "luxon": "^3.2.1",