refactor: add skeleton and tweaks network request logic

Author: ShroXd

app/components/Package/Skeleton.vue

@@ -15,6 +15,8 @@
         <SkeletonBlock class="w-14 h-9 rounded" />
         <!-- Fund link placeholder -->
         <SkeletonBlock class="w-22 h-9 rounded self-baseline" />
+        <!-- Share button placeholder -->
+        <SkeletonBlock class="w-9 md:w-22 h-9 rounded self-baseline" />
       </div>
     </div>
   </header>

server/api/card/[...pkg].get.ts

@@ -1,5 +1,6 @@
 import { createError, getQuery, getRouterParam, sendRedirect } from 'h3'
 import { assertValidPackageName } from '#shared/utils/npm'
+import { ACCENT_COLOR_IDS } from '#shared/utils/constants'
 
 export default defineEventHandler(async event => {
   const segments = getRouterParam(event, 'pkg')?.split('/') ?? []
@@ -20,7 +21,11 @@ export default defineEventHandler(async event => {
 
   const query = getQuery(event)
   const theme = query.theme === 'light' ? 'light' : 'dark'
-  const color = typeof query.color === 'string' ? `&color=${encodeURIComponent(query.color)}` : ''
+  const rawColor = typeof query.color === 'string' ? query.color : null
+  const color =
+    rawColor && (ACCENT_COLOR_IDS as readonly string[]).includes(rawColor)
+      ? `&color=${rawColor}`
+      : ''
 
   return sendRedirect(
     event,

server/utils/image-proxy.ts

@@ -76,7 +76,6 @@ export const TRUSTED_IMAGE_DOMAINS = [
   'travis-ci.org',
   'secure.travis-ci.org',
   'img.badgesize.io',
-  'api.securityscorecards.dev',
 ]
 
 /**