diff --git a/_includes/layouts/base.njk b/_includes/layouts/base.njk index 00c55c6..537f398 100644 --- a/_includes/layouts/base.njk +++ b/_includes/layouts/base.njk @@ -14,25 +14,29 @@ {#- #} {#- - 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" %}` - 3. You can do the same for JS: {% js %}{% endjs %} and - 4. Learn more: https://github.com/11ty/eleventy-plugin-bundle + Plain-text bundles are provided via the `eleventy-plugin-bundle` plugin: + 1. CSS: + * Add to a per-page bundle using `{% css %}{% endcss %}` + * Retrieve bundle content using `{% getBundle "css" %}` or `{% getBundleFileUrl "css" %}` + 2. Or for JavaScript: + * Add to a per-page bundle using `{% js %}{% endjs %}` + * Retrieve via `{% getBundle "js" %}` or `{% getBundleFileUrl "js" %}` + 3. Learn more: https://github.com/11ty/eleventy-plugin-bundle #} {#- Add an arbitrary string to the bundle #} {%- css %}/* This is an arbitrary CSS string added to the bundle */{% endcss %} {#- Add the contents of a file to the bundle #} {%- css %}{% include "public/css/index.css" %}{% endcss %} - {#- Or add from node_modules #} + {#- Or you can add from node_modules #} {# {%- css %}{% include "node_modules/prismjs/themes/prism-okaidia.css" %}{% endcss %} #} - {#- Render the CSS bundle using Inlined CSS (for the fastest site performance in production) #} + {#- Render the CSS bundle using inlined CSS (for the fastest site performance in production) #} {#- Renders the CSS bundle using a separate file, if you can't set CSP directive style-src: 'unsafe-inline' #} {#- #} + {#- Add the heading-anchors web component to the JavaScript bundle #} {%- js %}{% include "node_modules/@zachleat/heading-anchors/heading-anchors.js" %}{% endjs %} diff --git a/_includes/layouts/post.njk b/_includes/layouts/post.njk index 78166f3..d1827cf 100644 --- a/_includes/layouts/post.njk +++ b/_includes/layouts/post.njk @@ -1,7 +1,7 @@ --- layout: layouts/base.njk --- -{# Only include the syntax highlighter CSS on blog posts #} +{# Only include the syntax highlighter CSS on blog posts, included with the CSS per-page bundle #} {%- css %}{% include "node_modules/prismjs/themes/prism-okaidia.css" %}{% endcss %} {%- css %}{% include "public/css/prism-diff.css" %}{%- endcss %}

{{ title }}

diff --git a/eleventy.config.js b/eleventy.config.js index 350ac9a..c73e75e 100644 --- a/eleventy.config.js +++ b/eleventy.config.js @@ -12,8 +12,7 @@ export default async function(eleventyConfig) { // For example, `./public/css/` ends up in `_site/css/` eleventyConfig .addPassthroughCopy({ - "./public/": "/", - "./node_modules/prismjs/themes/prism-okaidia.css": "/css/prism-okaidia.css" + "./public/": "/" }) .addPassthroughCopy("./content/feed/pretty-atom-feed.xsl"); @@ -25,9 +24,13 @@ export default async function(eleventyConfig) { // Per-page bundles, see https://github.com/11ty/eleventy-plugin-bundle // Adds the {% css %} paired shortcode - eleventyConfig.addBundle("css"); + eleventyConfig.addBundle("css", { + toFileDirectory: "dist", + }); // Adds the {% js %} paired shortcode - eleventyConfig.addBundle("js"); + eleventyConfig.addBundle("js", { + toFileDirectory: "dist", + }); // Official plugins eleventyConfig.addPlugin(pluginSyntaxHighlight, { diff --git a/package.json b/package.json index 337e197..ba2f26d 100644 --- a/package.json +++ b/package.json @@ -35,7 +35,7 @@ }, "homepage": "https://github.com/11ty/eleventy-base-blog#readme", "devDependencies": { - "@11ty/eleventy": "3.0.0-alpha.19", + "@11ty/eleventy": "3.0.0-alpha.20", "@11ty/eleventy-img": "5.0.0-beta.9", "@11ty/eleventy-navigation": "^0.3.5", "@11ty/eleventy-plugin-rss": "^2.0.2",