chore: add JSRequired component

Author: userquin

app/components/JSRequired.vue

@@ -0,0 +1,10 @@
+<template>
+  <noscript>
+    <div
+      class="mb-8 px-4 py-3 border rounded-lg border-red-700 bg-red-50 text-red-800 dark:border-red-400 dark:bg-red-900/20 dark:text-red-200 text-base"
+      role="alert"
+    >
+      {{ $t('js_required') }}
+    </div>
+  </noscript>
+</template>

app/pages/compare.vue

@@ -136,6 +136,8 @@ useSeoMeta({
         </p>
       </header>
 
+      <JSRequired />
+
       <!-- Package selector -->
       <section class="mb-8" aria-labelledby="packages-heading">
         <h2 id="packages-heading" class="text-xs text-fg-subtle uppercase tracking-wider mb-3">
@@ -304,7 +306,8 @@ useSeoMeta({
 
         <template #fallback>
           <!-- Generic loading state for the whole grid section if needed, or rely on inner skeletons -->
-          <div class="mt-10 space-y-4">
+          <div class="mt-10 space-y-4" role="status" :aria-label="$t('compare.packages.loading')">
+            <span class="sr-only">{{ $t('compare.packages.loading') }}</span>
             <SkeletonBlock class="w-32 h-4 mb-4" />
             <div class="border border-border rounded-lg p-4 space-y-4">
               <div class="flex gap-4">

i18n/locales/en.json

@@ -6,6 +6,7 @@
       "description": "a fast, modern browser for the npm registry. Search, browse, and explore packages with a modern interface."
     }
   },
+  "js_required": "This page requires JavaScript to function.",
   "built_at": "built {0}",
   "alt_logo": "npmx logo",
   "tagline": "a fast, modern browser for the npm registry",

i18n/schema.json

@@ -22,6 +22,9 @@
       },
       "additionalProperties": false
     },
+    "js_required": {
+      "type": "string"
+    },
     "built_at": {
       "type": "string"
     },

lunaria/files/en-GB.json

@@ -5,6 +5,7 @@
       "description": "a fast, modern browser for the npm registry. Search, browse, and explore packages with a modern interface."
     }
   },
+  "js_required": "This page requires JavaScript to function.",
   "built_at": "built {0}",
   "alt_logo": "npmx logo",
   "tagline": "a fast, modern browser for the npm registry",

lunaria/files/en-US.json

@@ -5,6 +5,7 @@
       "description": "a fast, modern browser for the npm registry. Search, browse, and explore packages with a modern interface."
     }
   },
+  "js_required": "This page requires JavaScript to function.",
   "built_at": "built {0}",
   "alt_logo": "npmx logo",
   "tagline": "a fast, modern browser for the npm registry",