Simplify some of the bundle code

This commit is contained in:
Zach Leatherman 2023-02-06 14:12:02 -06:00
parent c9595d8f42
commit 95cddca4fa
2 changed files with 12 additions and 15 deletions

View File

@ -13,26 +13,23 @@
{#- Uncomment this if youd like folks to know that you used Eleventy to build your site! #} {#- Uncomment this if youd like folks to know that you used Eleventy to build your site! #}
{#- <meta name="generator" content="{{ eleventy.generator }}"> #} {#- <meta name="generator" content="{{ eleventy.generator }}"> #}
{#- {#-
CSS bundles are provided via the eleventy-plugin-bundle plugin: CSS bundles are provided via the `eleventy-plugin-bundle` plugin:
1. You can add to them using `{% css %}` 1. You can add to them using `{% css %}`
2. You can get from them using `{% getBundle "css" %}` or `{% getBundleFileUrl "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
#}
Learn more: https://github.com/11ty/eleventy-plugin-bundle {#- Add an arbitrary string to the bundle #}
#} {%- css %}* { box-sizing: border-box; }{% endcss %}
{#- Add the contents of a file to the bundle #}
{#- Add to the CSS bundle #}
{%- css %}{% include "public/css/index.css" %}{% endcss %} {%- css %}{% include "public/css/index.css" %}{% endcss %}
{%- css %}{# add your own CSS! #}{% endcss %} {#- Or add from node_modules #}
{# {%- css %}{% include "node_modules/prismjs/themes/prism-okaidia.css" %}{% endcss %} #}
{#- Render the CSS bundle #} {#- Render the CSS bundle using Inlined CSS (for the fastest site performance in production) #}
{%- if eleventy.env.runMode === "serve" %}
{# External files (local dev live reload will refresh without page reload) #}
<link rel="stylesheet" href="{% getBundleFileUrl "css" %}">
{%- else %}
{# Inlined CSS (fastest site performance in production) #}
<style>{% getBundle "css" %}</style> <style>{% getBundle "css" %}</style>
{%- endif %}
</head> </head>
<body> <body>
<a href="#skip" class="visually-hidden">Skip to main content</a> <a href="#skip" class="visually-hidden">Skip to main content</a>

View File

@ -1,7 +1,7 @@
--- ---
layout: layouts/base.njk layout: layouts/base.njk
--- ---
<!-- Delete this message --> <!-- Delete this message, it will also remove the component CSS from the bundle -->
{%- css %}{% include "public/css/message-box.css" %}{% endcss %} {%- css %}{% include "public/css/message-box.css" %}{% endcss %}
<div class="message-box"> <div class="message-box">
<ol> <ol>