Upgrade deps, tweaks to bundle comments

11ty · Sep 11, 2024 · 5eca0a3 · 5eca0a3
1 parent ffa7c67
commit 5eca0a3
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 13 deletions.
diff --git a/_includes/layouts/base.njk b/_includes/layouts/base.njk
@@ -14,25 +14,29 @@
 		{#- <meta name="generator" content="{{ eleventy.generator }}"> #}
 
 		{#-
-		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 <script>{% getBundle "js" %}</script>
-		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) #}
 		<style>{% getBundle "css" %}</style>
 		{#- Renders the CSS bundle using a separate file, if you can't set CSP directive style-src: 'unsafe-inline' #}
 		{#- <link rel="stylesheet" href="{% getBundleFileUrl "css" %}"> #}
 
+		{#- Add the heading-anchors web component to the JavaScript bundle #}
 		{%- js %}{% include "node_modules/@zachleat/heading-anchors/heading-anchors.js" %}{% endjs %}
 	</head>
 	<body>

diff --git 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 %}
 <h1>{{ title }}</h1>

diff --git 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
@@ -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",