feat(plugin): add warning banner to plugin pages

Author: timmywil

_includes/icons/warning.svg

@@ -12,7 +12,7 @@ layout: layouts/base.njk
     <p>New plugin releases will not be processed.</p>
     <hr/>
     <p>The jQuery Plugin Registry is preserved for historical purposes. Search is still supported.</p>
-    <p class="italic">We do not recommend using any plugins from this registry. Please find jQuery plugins on <a href="https://www.npmjs.com/search?q=keywords:jquery-plugin">npm</a>.</p>
+    <p class="italic">We do not recommend using any versions of plugins from this registry. Please find jQuery plugins on <a href="https://www.npmjs.com/search?q=keywords:jquery-plugin">npm</a>.</p>
   </div>
 
   <div class="flex flex-col px-6 py-5 lg:w-[300px]">

content/index.njk

@@ -36,7 +36,18 @@
 ---
 
 <div class="flex flex-col gap-5 py-5 px-6 lg:flex-row">
+
   <div class="flex flex-col gap-2 grow">
+    <div class="flex flex-row justify-center gap-1 mb-3 p-4 text-center bg-warning rounded">
+      <div class="pt-px">
+        {% include "icons/warning.svg" %}
+      </div>
+      <div class="text-lg">
+        This version is old school.
+        Please find jQuery plugins on <a href="https://www.npmjs.com/search?q=keywords:jquery-plugin">npm</a>.
+      </div>
+    </div>
+
     <h1 class="lg:text-4xl">{{ plugin.name }}</h1>
 
     <div>

content/plugin.njk

@@ -78,11 +78,6 @@ export default function eleventyConfig(eleventyConfig) {
     )
   })
 
-  eleventyConfig.addFilter('htmlDateString', (dateObj) => {
-    // dateObj input: https://html.spec.whatwg.org/multipage/common-microsyntaxes.html#valid-date-string
-    return DateTime.fromJSDate(dateObj, { zone: 'utc' }).toFormat('yyyy-LL-dd')
-  })
-
   // Get the first `n` elements of a collection.
   eleventyConfig.addFilter('head', (array, n) => {
     if (!Array.isArray(array) || array.length === 0) {

eleventy.config.js

@@ -53,6 +53,9 @@ module.exports = {
           hover: '#e6e6e6'
         },
         transparent: 'transparent',
+        warning: {
+          DEFAULT: '#ffffaa'
+        },
         white: {
           DEFAULT: '#ffffff',
           dark: '#f2f2f2',

styles/tailwind.config.js

@@ -43,6 +43,9 @@
   hr {
     @apply bg-gray-lightest my-3 h-3 border-none;
   }
+  svg {
+    @apply shrink-0;
+  }
 
   h1 svg,
   h2 svg,