cobweb/xmitter-11ty
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactors style bundling so it's easy to avoid an insecure CSP

Browse Source
This commit is contained in:
P. Douglas Reeder 2023-04-19 00:34:18 -04:00
parent 933099a497
commit b85269b1aa
3 changed files with 13 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
README.md
View File

@ -112,3 +112,12 @@ Deploy this Eleventy site in just a few clicks on these services:
- `_includes/layouts/post.njk`: the blog post template (wrapped into `base.njk`) - `_includes/layouts/post.njk`: the blog post template (wrapped into `base.njk`)
- `_includes/postslist.njk` is a Nunjucks include and is a reusable component used to display a list of all the posts. `content/index.njk` has an example of how to use it. - `_includes/postslist.njk` is a Nunjucks include and is a reusable component used to display a list of all the posts. `content/index.njk` has an example of how to use it.
If your site enforces a Content Security Policy (as public-facing sites should), either, in `base.njk`, disable
```html
<style>{% getBundle "css" %}</style>
```
and enable
```html
<link rel="stylesheet" href="{% getBundleFileUrl "css" %}">
```
or configure the server with the CSP directive `style-src: 'unsafe-inline'` (which is less secure).

2
_includes/layouts/base.njk
View File

@ -30,6 +30,8 @@
{#- 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> <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" %}"> #}
</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>

3
_includes/postslist.njk
View File

@ -1,4 +1,5 @@
<ol reversed class="postlist" style="counter-reset: start-from {{ (postslistCounter or postslist.length) + 1 }}"> {%- css %}.postlist { counter-reset: start-from {{ (postslistCounter or postslist.length) + 1 }} }{% endcss %}
<ol reversed class="postlist">
{% for post in postslist | reverse %} {% for post in postslist | reverse %}
<li class="postlist-item{% if post.url == url %} postlist-item-active{% endif %}"> <li class="postlist-item{% if post.url == url %} postlist-item-active{% endif %}">
<a href="{{ post.url }}" class="postlist-link">{% if post.data.title %}{{ post.data.title }}{% else %}<code>{{ post.url }}</code>{% endif %}</a> <a href="{{ post.url }}" class="postlist-link">{% if post.data.title %}{{ post.data.title }}{% else %}<code>{{ post.url }}</code>{% endif %}</a>