Skip to content

Commit 625de51

Browse files
timmywiltimmywil
authored
fix(*): move inline styles/scripts to files for CSP; optimize font (#4)
1 parent 6507fc5 commit 625de51

29 files changed

+1515
-730
lines changed

‎README.md

Lines changed: 0 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -109,19 +109,3 @@ Deploy this Eleventy site in just a few clicks on these services:
109109
- `_includes/layouts/home.njk`: the home page template (wrapped into `base.njk`)
110110
- `_includes/layouts/post.njk`: the blog post template (wrapped into `base.njk`)
111111
- `_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.
112-
113-
If your site enforces a Content Security Policy (as public-facing sites should), either, in `base.njk`, disable
114-
115-
```html
116-
<style>
117-
{% getBundle "css" %}
118-
</style>
119-
```
120-
121-
and enable
122-
123-
```html
124-
<link rel="stylesheet" href="{% getBundleFileUrl "css" %}">
125-
```
126-
127-
or configure the server with the CSP directive `style-src: 'unsafe-inline'` (which is less secure).

‎_data/metadata.cjs renamed to ‎_data/metadata.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
module.exports = {
1+
export default {
22
title: 'The jQuery Plugin Registry',
33
url: 'https://plugins.jquery.com/',
44
language: 'en',

‎_includes/header.njk

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,11 +28,12 @@
2828
</li>
2929
</ul>
3030
<input id="jq-menutoggle" type="checkbox" class="peer/menu hamburger-toggle sr-only"/>
31-
<label aria-label="Toggle Menu" for="jq-menutoggle" class="hamburger-lines flex lg:hidden flex-col justify-between relative w-[18px] h-[14px]">
31+
<label aria-label="Toggle Menu" for="jq-menutoggle" class="hamburger-lines cursor-pointer flex lg:hidden flex-col justify-between relative w-[18px] h-[14px]">
3232
<span class="hamburger-line"></span>
3333
<span class="hamburger-line"></span>
3434
<span class="hamburger-line"></span>
3535
</label>
36+
<script async src="/menu.js" type="text/javascript"></script>
3637
{% include "menu.njk" %}
3738
</div>
3839
</header>

‎_includes/layouts/base.njk

Lines changed: 1 addition & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -10,23 +10,6 @@
1010
<meta name="description" content="{{ description or metadata.description }}">
1111
{% favicon './public/favicon.svg' %}
1212
<link rel="stylesheet" href="/style.css?v={% version %}"/>
13-
{# Insert styles dependent on path prefix here #}
14-
<style type="text/css">
15-
@font-face {
16-
font-family: Cairo;
17-
src: url({{ '/fonts/Cairo/Cairo-Bold.ttf' | url }}) format("truetype");
18-
font-weight: bold;
19-
}
20-
.bg-dark-tiles {
21-
background-image: url({{ '/img/dark-grey-tile.png' | url }});
22-
}
23-
.pagefind-ui__form:after {
24-
background: url({{ '/img/search.svg' | url }}) no-repeat 2px center;
25-
}
26-
.list-custom-bullet {
27-
list-style-image: url({{ '/img/bullet.png' | url }});
28-
}
29-
</style>
3013
</head>
3114
<body class="flex flex-col h-full items-center">
3215
<a href="#skip" class="sr-only">Skip to main content</a>
@@ -41,5 +24,6 @@
4124
</main>
4225
</div>
4326
{% include "footer.njk" %}
27+
<script async src="/pagefind/pagefind-ui.js" type="text/javascript"></script>
4428
</body>
4529
</html>

‎_includes/menu.njk

Lines changed: 0 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -65,22 +65,3 @@
6565
</li>
6666
</ul>
6767
</nav>
68-
<script>
69-
(function () {
70-
const checkbox = document.getElementById('jq-menutoggle')
71-
checkbox.addEventListener('change', function () {
72-
if (this.checked) {
73-
document
74-
.body
75-
.classList
76-
.add('overflow-hidden')
77-
document.body.scrollTop = 0
78-
} else {
79-
document
80-
.body
81-
.classList
82-
.remove('overflow-hidden')
83-
}
84-
})
85-
})()
86-
</script>

‎_includes/milestone-summary.njk

Lines changed: 0 additions & 29 deletions
This file was deleted.

‎_includes/plugin-card.njk

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
<div class="flex flex-col gap-4 lg:flex-row py-3 px-5 border border-border rounded mb-2 bg-gray-lightest">
22
<div class="flex flex-col grow gap-4">
3-
<a class="text-xl font-bold font-serif" href="{{ plugin.url }}">{{ plugin.name }}</a>
3+
<a class="text-xl font-bold font-title" href="{{ plugin.url }}">{{ plugin.name }}</a>
44
<p>{{ plugin.description }}</p>
55
</div>
66
<div class="flex flex-col gap-4 shrink-0">
77
<div class="flex flex-col gap-2 text-gray-lighter text-xs lg:items-end lg:text-right">
88
<p>{{ plugin.latest }}</p>
99
<p>Released {{ plugin.date | readableDate }}</p>
1010
</div>
11-
<div class="flex flex-row gap-4 font-bold font-serif text-center">
11+
<div class="flex flex-row gap-4 font-bold font-title text-center">
1212
<div class="flex flex-col w-[80px]">
1313
<div class="w-full py-[2px] px-2 rounded-t bg-black text-white text-sm">{{ watchers[plugin.id].watchers }}</div>
1414
<div class="w-full py-1 px-2 rounded-b bg-blue-light text-xs uppercase">Watchers</div>

‎_includes/search.njk

Lines changed: 0 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1 @@
11
<div id="search" class="relative w-full lg:rounded-t-xl lg:bg-black/20 lg:h-[50px] lg:flex lg:items-center lg:justify-end lg:px-4 lg:shadow-[0_0_5px_rgba(0,0,0,0.7)] lg:border-t lg:border-x lg:border-t-white/30 lg:border-x-black/30"></div>
2-
<script src="/pagefind/pagefind-ui.js" type="text/javascript"></script>
3-
<script>
4-
window.addEventListener('DOMContentLoaded', (event) => {
5-
new PagefindUI({
6-
element: "#search",
7-
showImages: false,
8-
translations: {
9-
placeholder: 'Search',
10-
zero_results: 'No matches found.'
11-
}
12-
})
13-
})
14-
</script>

‎content/plugin.njk

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -94,9 +94,9 @@
9494
<div class="grid grid-cols-2 lg:grid-cols-3 border-t p-2 border-border hover:bg-white-dark odd:bg-white-dark">
9595
<div>
9696
{% if post.version == plugin.current %}
97-
<div class="font-bold font-serif">{{ post.version }}</div>
97+
<div class="font-bold font-title">{{ post.version }}</div>
9898
{% else %}
99-
<a class="font-bold font-serif" href="{{ plugin.url }}{% if post.name != plugin.latest %}/{{ post.version }}{% endif %}">
99+
<a class="font-bold font-title" href="{{ plugin.url }}{% if post.name != plugin.latest %}/{{ post.version }}{% endif %}">
100100
{{ post.version }}
101101
</a>
102102
{% endif %}
@@ -112,7 +112,7 @@
112112
<div class="flex flex-col w-full bg-sidebar-gradient gap-4 border-l border-l-white-dark lg:pl-5 lg:max-w-[330px]">
113113

114114
<div class="w-full rounded-lg border border-black bg-black shadow-[0_0_5px_rgba(0,0,0,0.5)]">
115-
<div class="flex flex-col w-full border border-gray-light rounded-lg bg-[#202020] text-white font-bold font-serif">
115+
<div class="flex flex-col w-full border border-gray-light rounded-lg bg-[#202020] text-white font-bold font-title">
116116

117117
<div class="flex flex-col py-2 px-4">
118118
<div class="flex flex-row justify-between items-center">
@@ -163,7 +163,7 @@
163163
{% include "icons/github.svg" %}
164164
GitHub Activity
165165
</h3>
166-
<div class="flex flex-row gap-3 font-extrabold font-serif text-center">
166+
<div class="flex flex-row gap-3 font-extrabold font-title text-center">
167167
<div class="flex flex-col">
168168
<div class="py-[2px] px-2 rounded-t bg-black leading-tight text-white text-4xl">{{ watchers[plugin.id].watchers }}</div>
169169
<div class="py-1 px-2 rounded-b bg-blue-light text-xs uppercase">Watchers</div>

‎eleventy.config.js

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,11 @@
1-
import { DateTime } from 'luxon'
2-
3-
import pluginSyntaxHighlight from '@11ty/eleventy-plugin-syntaxhighlight'
4-
import pluginNavigation from '@11ty/eleventy-navigation'
51
import { EleventyHtmlBasePlugin } from '@11ty/eleventy'
2+
import pluginNavigation from '@11ty/eleventy-navigation'
3+
import pluginSyntaxHighlight from '@11ty/eleventy-plugin-syntaxhighlight'
64
import pluginFavicon from 'eleventy-favicon'
7-
import path from 'node:path'
5+
import { DateTime } from 'luxon'
86
import { exec } from 'node:child_process'
97
import { createHash } from 'node:crypto'
10-
8+
import path from 'node:path'
119
import pluginImages from './eleventy.config.images.js'
1210

1311
const now = String(Date.now())

0 commit comments

Comments
 (0)