jquery · timmywil · Sep 28, 2024 · Sep 27, 2024 · Sep 28, 2024
diff --git a/README.md b/README.md
@@ -109,19 +109,3 @@ Deploy this Eleventy site in just a few clicks on these services:
   - `_includes/layouts/home.njk`: the home page 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.
-
-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).
diff --git a/_data/metadata.cjs → _data/metadata.js b/_data/metadata.cjs → _data/metadata.js
@@ -1,4 +1,4 @@
-module.exports = {
+export default {
   title: 'The jQuery Plugin Registry',
   url: 'https://plugins.jquery.com/',
   language: 'en',

diff --git a/_includes/header.njk b/_includes/header.njk
@@ -28,11 +28,12 @@
       </li>
     </ul>
     <input id="jq-menutoggle" type="checkbox" class="peer/menu hamburger-toggle sr-only"/>
-    <label aria-label="Toggle Menu" for="jq-menutoggle" class="hamburger-lines flex lg:hidden flex-col justify-between relative w-[18px] h-[14px]">
+    <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]">
       <span class="hamburger-line"></span>
       <span class="hamburger-line"></span>
       <span class="hamburger-line"></span>
     </label>
+    <script async src="/menu.js" type="text/javascript"></script>
     {% include "menu.njk" %}
   </div>
 </header>
diff --git a/_includes/layouts/base.njk b/_includes/layouts/base.njk
@@ -10,23 +10,6 @@
     <meta name="description" content="{{ description or metadata.description }}">
     {% favicon './public/favicon.svg' %}
     <link rel="stylesheet" href="/style.css?v={% version %}"/>
-    {# Insert styles dependent on path prefix here #}
-    <style type="text/css">
-      @font-face {
-        font-family: Cairo;
-        src: url({{ '/fonts/Cairo/Cairo-Bold.ttf' | url }}) format("truetype");
-        font-weight: bold;
-      }
-      .bg-dark-tiles {
-        background-image: url({{ '/img/dark-grey-tile.png' | url }});
-      }
-      .pagefind-ui__form:after {
-        background: url({{ '/img/search.svg' | url }}) no-repeat 2px center;
-      }
-      .list-custom-bullet {
-        list-style-image: url({{ '/img/bullet.png' | url }});
-      }
-    </style>
   </head>
   <body class="flex flex-col h-full items-center">
     <a href="#skip" class="sr-only">Skip to main content</a>
@@ -41,5 +24,6 @@
       </main>
     </div>
     {% include "footer.njk" %}
+    <script async src="/pagefind/pagefind-ui.js" type="text/javascript"></script>
   </body>
 </html>
diff --git a/_includes/menu.njk b/_includes/menu.njk
@@ -65,22 +65,3 @@
     </li>
   </ul>
 </nav>
-<script>
-  (function () {
-    const checkbox = document.getElementById('jq-menutoggle')
-    checkbox.addEventListener('change', function () {
-      if (this.checked) {
-        document
-          .body
-          .classList
-          .add('overflow-hidden')
-        document.body.scrollTop = 0
-      } else {
-        document
-          .body
-          .classList
-          .remove('overflow-hidden')
-      }
-    })
-  })()
-</script>
diff --git a/_includes/milestone-summary.njk b/_includes/milestone-summary.njk
diff --git a/_includes/plugin-card.njk b/_includes/plugin-card.njk
@@ -1,14 +1,14 @@
 <div class="flex flex-col gap-4 lg:flex-row py-3 px-5 border border-border rounded mb-2 bg-gray-lightest">
   <div class="flex flex-col grow gap-4">
-    <a class="text-xl font-bold font-serif" href="{{ plugin.url }}">{{ plugin.name }}</a>
+    <a class="text-xl font-bold font-title" href="{{ plugin.url }}">{{ plugin.name }}</a>
     <p>{{ plugin.description }}</p>
   </div>
   <div class="flex flex-col gap-4 shrink-0">
     <div class="flex flex-col gap-2 text-gray-lighter text-xs lg:items-end lg:text-right">
       <p>{{ plugin.latest }}</p>
       <p>Released {{ plugin.date | readableDate }}</p>
     </div>
-    <div class="flex flex-row gap-4 font-bold font-serif text-center">
+    <div class="flex flex-row gap-4 font-bold font-title text-center">
       <div class="flex flex-col w-[80px]">
         <div class="w-full py-[2px] px-2 rounded-t bg-black text-white text-sm">{{ watchers[plugin.id].watchers }}</div>
         <div class="w-full py-1 px-2 rounded-b bg-blue-light text-xs uppercase">Watchers</div>

diff --git a/_includes/search.njk b/_includes/search.njk
@@ -1,14 +1 @@
 <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>
-<script src="/pagefind/pagefind-ui.js" type="text/javascript"></script>
-<script>
-  window.addEventListener('DOMContentLoaded', (event) => {
-    new PagefindUI({
-      element: "#search",
-      showImages: false,
-      translations: {
-        placeholder: 'Search',
-        zero_results: 'No matches found.'
-      }
-    })
-  })
-</script>
diff --git a/content/plugin.njk b/content/plugin.njk
@@ -94,9 +94,9 @@
           <div class="grid grid-cols-2 lg:grid-cols-3 border-t p-2 border-border hover:bg-white-dark odd:bg-white-dark">
             <div>
               {% if post.version == plugin.current %}
-                <div class="font-bold font-serif">{{ post.version }}</div>
+                <div class="font-bold font-title">{{ post.version }}</div>
               {% else %}
-                <a class="font-bold font-serif" href="{{ plugin.url }}{% if post.name != plugin.latest %}/{{ post.version }}{% endif %}">
+                <a class="font-bold font-title" href="{{ plugin.url }}{% if post.name != plugin.latest %}/{{ post.version }}{% endif %}">
                   {{ post.version }}
                 </a>
               {% endif %}
@@ -112,7 +112,7 @@
   <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]">
 
     <div class="w-full rounded-lg border border-black bg-black shadow-[0_0_5px_rgba(0,0,0,0.5)]">
-      <div class="flex flex-col w-full border border-gray-light rounded-lg bg-[#202020] text-white font-bold font-serif">
+      <div class="flex flex-col w-full border border-gray-light rounded-lg bg-[#202020] text-white font-bold font-title">
 
         <div class="flex flex-col py-2 px-4">
           <div class="flex flex-row justify-between items-center">
@@ -163,7 +163,7 @@
         {% include "icons/github.svg" %}
         GitHub Activity
       </h3>
-      <div class="flex flex-row gap-3 font-extrabold font-serif text-center">
+      <div class="flex flex-row gap-3 font-extrabold font-title text-center">
         <div class="flex flex-col">
           <div class="py-[2px] px-2 rounded-t bg-black leading-tight text-white text-4xl">{{ watchers[plugin.id].watchers }}</div>
           <div class="py-1 px-2 rounded-b bg-blue-light text-xs uppercase">Watchers</div>

diff --git a/eleventy.config.js b/eleventy.config.js
@@ -1,13 +1,11 @@
-import { DateTime } from 'luxon'
-
-import pluginSyntaxHighlight from '@11ty/eleventy-plugin-syntaxhighlight'
-import pluginNavigation from '@11ty/eleventy-navigation'
 import { EleventyHtmlBasePlugin } from '@11ty/eleventy'
+import pluginNavigation from '@11ty/eleventy-navigation'
+import pluginSyntaxHighlight from '@11ty/eleventy-plugin-syntaxhighlight'
 import pluginFavicon from 'eleventy-favicon'
-import path from 'node:path'
+import { DateTime } from 'luxon'
 import { exec } from 'node:child_process'
 import { createHash } from 'node:crypto'
-
+import path from 'node:path'
 import pluginImages from './eleventy.config.images.js'
 
 const now = String(Date.now())