Replace jsdelivr resource references for better accessibility (#294)

* Initial plan

* Initial exploration - add font-logos dependency

Co-authored-by: hamster1963 <[email protected]>

* Replace jsdelivr CDN with local npm package imports

Co-authored-by: hamster1963 <[email protected]>

* chore: auto-fix linting and formatting issues

* chore: upgrade next.js version

* chore: auto-fix linting and formatting issues

* fix: update Card component styles to include ring-0 class for consistent appearance

---------

Co-authored-by: copilot-swe-agent[bot] <[email protected]>
Co-authored-by: hamster1963 <[email protected]>

Author: Copilot

app/(main)/ClientComponents/detail/ServerIPInfo.tsx

@@ -30,7 +30,7 @@ export default function ServerIPInfo({ server_id }: { server_id: number }) {
   return (
     <section className="mb-4 flex flex-wrap gap-2">
       {data.asn?.autonomous_system_organization && (
-        <Card className="rounded-[10px] border-none bg-transparent shadow-none">
+        <Card className="rounded-[10px] border-none bg-transparent shadow-none ring-0">
           <CardContent className="px-1.5 py-1">
             <section className="flex flex-col items-start gap-0.5">
               <p className="text-muted-foreground text-xs">{"ASN"}</p>
@@ -40,7 +40,7 @@ export default function ServerIPInfo({ server_id }: { server_id: number }) {
         </Card>
       )}
       {data.asn?.autonomous_system_number && (
-        <Card className="rounded-[10px] border-none bg-transparent shadow-none">
+        <Card className="rounded-[10px] border-none bg-transparent shadow-none ring-0">
           <CardContent className="px-1.5 py-1">
             <section className="flex flex-col items-start gap-0.5">
               <p className="text-muted-foreground text-xs">{t("asn_number")}</p>
@@ -50,7 +50,7 @@ export default function ServerIPInfo({ server_id }: { server_id: number }) {
         </Card>
       )}
       {data.city?.registered_country?.names.en && (
-        <Card className="rounded-[10px] border-none bg-transparent shadow-none">
+        <Card className="rounded-[10px] border-none bg-transparent shadow-none ring-0">
           <CardContent className="px-1.5 py-1">
             <section className="flex flex-col items-start gap-0.5">
               <p className="text-muted-foreground text-xs">{t("registered_country")}</p>
@@ -60,7 +60,7 @@ export default function ServerIPInfo({ server_id }: { server_id: number }) {
         </Card>
       )}
       {data.city?.country?.iso_code && (
-        <Card className="rounded-[10px] border-none bg-transparent shadow-none">
+        <Card className="rounded-[10px] border-none bg-transparent shadow-none ring-0">
           <CardContent className="px-1.5 py-1">
             <section className="flex flex-col items-start gap-0.5">
               <p className="text-muted-foreground text-xs">{"ISO"}</p>
@@ -70,7 +70,7 @@ export default function ServerIPInfo({ server_id }: { server_id: number }) {
         </Card>
       )}
       {data.city?.city?.names.en && (
-        <Card className="rounded-[10px] border-none bg-transparent shadow-none">
+        <Card className="rounded-[10px] border-none bg-transparent shadow-none ring-0">
           <CardContent className="px-1.5 py-1">
             <section className="flex flex-col items-start gap-0.5">
               <p className="text-muted-foreground text-xs">{t("city")}</p>
@@ -80,7 +80,7 @@ export default function ServerIPInfo({ server_id }: { server_id: number }) {
         </Card>
       )}
       {data.city?.location?.longitude && (
-        <Card className="rounded-[10px] border-none bg-transparent shadow-none">
+        <Card className="rounded-[10px] border-none bg-transparent shadow-none ring-0">
           <CardContent className="px-1.5 py-1">
             <section className="flex flex-col items-start gap-0.5">
               <p className="text-muted-foreground text-xs">{t("longitude")}</p>
@@ -90,7 +90,7 @@ export default function ServerIPInfo({ server_id }: { server_id: number }) {
         </Card>
       )}
       {data.city?.location?.latitude && (
-        <Card className="rounded-[10px] border-none bg-transparent shadow-none">
+        <Card className="rounded-[10px] border-none bg-transparent shadow-none ring-0">
           <CardContent className="px-1.5 py-1">
             <section className="flex flex-col items-start gap-0.5">
               <p className="text-muted-foreground text-xs">{t("latitude")}</p>
@@ -100,7 +100,7 @@ export default function ServerIPInfo({ server_id }: { server_id: number }) {
         </Card>
       )}
       {data.city?.location?.time_zone && (
-        <Card className="rounded-[10px] border-none bg-transparent shadow-none">
+        <Card className="rounded-[10px] border-none bg-transparent shadow-none ring-0">
           <CardContent className="px-1.5 py-1">
             <section className="flex flex-col items-start gap-0.5">
               <p className="text-muted-foreground text-xs">{t("time_zone")}</p>
@@ -110,7 +110,7 @@ export default function ServerIPInfo({ server_id }: { server_id: number }) {
         </Card>
       )}
       {data.city?.postal && (
-        <Card className="rounded-[10px] border-none bg-transparent shadow-none">
+        <Card className="rounded-[10px] border-none bg-transparent shadow-none ring-0">
           <CardContent className="px-1.5 py-1">
             <section className="flex flex-col items-start gap-0.5">
               <p className="text-muted-foreground text-xs">{t("postal_code")}</p>

app/layout.tsx

@@ -2,6 +2,8 @@ import { ThemeColorManager } from "@/components/ThemeColorManager"
 import getEnv from "@/lib/env-entry"
 import { cn } from "@/lib/utils"
 import "@/styles/globals.css"
+import "flag-icons/css/flag-icons.min.css"
+import "font-logos/assets/font-logos.css"
 import type { Metadata, Viewport } from "next"
 import { Inter as FontSans } from "next/font/google"
 import { NextIntlClientProvider } from "next-intl"
@@ -49,14 +51,6 @@ export default async function LocaleLayout({ children }: { children: React.React
     <html lang={locale} suppressHydrationWarning>
       <head>
         <PublicEnvScript />
-        <link
-          rel="stylesheet"
-          href="https://fastly.jsdelivr.net/gh/lipis/[email protected]/css/flag-icons.min.css"
-        />
-        <link
-          rel="stylesheet"
-          href="https://fastly.jsdelivr.net/npm/font-logos@1/assets/font-logos.css"
-        />
       </head>
       <body className={cn("min-h-screen bg-background font-sans antialiased", fontSans.variable)}>
         <ThemeProvider