Upgrade deps, tweaks to bundle comments

This commit is contained in:
Zach Leatherman 2024-09-11 16:14:43 -05:00
parent ffa7c673cd
commit 5eca0a3035
4 changed files with 20 additions and 13 deletions

View File

@ -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>

View File

@ -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>

View File

@ -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, {

View File

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