add additional info

package-lock.json

@@ -30,6 +30,20 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/@ampproject/remapping": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.3.0.tgz",
+      "integrity": "sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==",
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.5",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
     "node_modules/@astrojs/compiler": {
       "version": "2.10.3",
       "resolved": "https://registry.npmjs.org/@astrojs/compiler/-/compiler-2.10.3.tgz",
@@ -534,11 +548,11 @@
       }
     },
     "node_modules/@babel/parser": {
-      "version": "7.26.5",
+      "version": "7.26.7",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.26.5.tgz",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.26.7.tgz",
-      "integrity": "sha512-SRJ4jYmXRqV1/Xc+TIVG84WjHBXKlxO9sHQnA2Pf12QQEAp1LOh6kDzNHXcUnbH1QI0FDoPPVOt+vyUDucxpaw==",
+      "integrity": "sha512-kEvgGGgEjRUutvdVvZhbn/BxVt+5VSpwXz1j3WYXQbXDo8KzFOPNG2GQbdAiNq8g6wn1yKk7C/qrke03a84V+w==",
       "dependencies": {
-        "@babel/types": "^7.26.5"
+        "@babel/types": "^7.26.7"
       },
       "bin": {
         "parser": "bin/babel-parser.js"
@@ -548,9 +562,9 @@
       }
     },
     "node_modules/@babel/types": {
-      "version": "7.26.5",
+      "version": "7.26.7",
-      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.26.5.tgz",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.26.7.tgz",
-      "integrity": "sha512-L6mZmwFDK6Cjh1nRCLXpa6no13ZIioJDz7mdkzHv399pThrTa/k0nUlNaenOeh2kWu/iaOQYElEpKPUswUa9Vg==",
+      "integrity": "sha512-t8kDRGrKXyp6+tjUh7hw2RLyclsW4TRoRvRHtSyAX9Bb5ldlFh+90YAYY6awRXrlB4G5G2izNeGySpATlFzmOg==",
       "dependencies": {
         "@babel/helper-string-parser": "^7.25.9",
         "@babel/helper-validator-identifier": "^7.25.9"
@@ -1996,6 +2010,16 @@
         "acorn": "^8"
       }
     },
+    "node_modules/acorn-typescript": {
+      "version": "1.4.13",
+      "resolved": "https://registry.npmjs.org/acorn-typescript/-/acorn-typescript-1.4.13.tgz",
+      "integrity": "sha512-xsc9Xv0xlVfwp2o7sQ+GCQ1PgbkdcpWdTzrwXxO3xDMTAywVS3oXVOcOHuRjAPkS4P9b+yc/qNF15460v+jp4Q==",
+      "optional": true,
+      "peer": true,
+      "peerDependencies": {
+        "acorn": ">=8.9.0"
+      }
+    },
     "node_modules/agent-base": {
       "version": "7.1.3",
       "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-7.1.3.tgz",
@@ -2855,6 +2879,13 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/esm-env": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/esm-env/-/esm-env-1.2.2.tgz",
+      "integrity": "sha512-Epxrv+Nr/CaL4ZcFGPJIYLWFom+YeV1DqMLHJoEd9SYRxNbaFruBwfEX/kkHUJf55j2+TUbmDcmuilbP1TmXHA==",
+      "optional": true,
+      "peer": true
+    },
     "node_modules/esprima": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz",
@@ -2867,6 +2898,16 @@
         "node": ">=4"
       }
     },
+    "node_modules/esrap": {
+      "version": "1.4.3",
+      "resolved": "https://registry.npmjs.org/esrap/-/esrap-1.4.3.tgz",
+      "integrity": "sha512-Xddc1RsoFJ4z9nR7W7BFaEPIp4UXoeQ0+077UdWLxbafMQFyU79sQJMk7kxNgRwQ9/aVgaKacCHC2pUACGwmYw==",
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.4.15"
+      }
+    },
     "node_modules/estree-walker": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-3.0.3.tgz",
@@ -3479,6 +3520,16 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/is-reference": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/is-reference/-/is-reference-3.0.3.tgz",
+      "integrity": "sha512-ixkJoqQvAP88E6wLydLGGqCJsrFUnqoH6HnaczB8XmDH1oaWU+xxdptvikTgaEhtZ53Ky6YXiBuUI2WXLMCwjw==",
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "@types/estree": "^1.0.6"
+      }
+    },
     "node_modules/is-wsl": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-3.1.0.tgz",
@@ -3589,6 +3640,13 @@
         "js-yaml": "bin/js-yaml.js"
       }
     },
+    "node_modules/locate-character": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/locate-character/-/locate-character-3.0.0.tgz",
+      "integrity": "sha512-SW13ws7BjaeJ6p7Q6CO2nchbYEc3X3J6WrmTTDto7yMPqVSZTUyY5Tjbid+Ab8gLnATtygYtiDIJGQRRn2ZOiA==",
+      "optional": true,
+      "peer": true
+    },
     "node_modules/locate-path": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
@@ -5071,6 +5129,16 @@
       "resolved": "https://registry.npmjs.org/radix3/-/radix3-1.1.2.tgz",
       "integrity": "sha512-b484I/7b8rDEdSDKckSSBA8knMpcdsXudlE/LNL639wFoHKwLbEkQFZHWEYwDC0wa0FKUcCY+GAF73Z7wxNVFA=="
     },
+    "node_modules/react": {
+      "version": "19.0.0",
+      "resolved": "https://registry.npmjs.org/react/-/react-19.0.0.tgz",
+      "integrity": "sha512-V8AVnmPIICiWpGfm6GLzCR/W5FXLchHop40W4nXBmdlEceh16rCN8O8LNWm5bh5XUX91fh7KpA+W0TgMKmgTpQ==",
+      "optional": true,
+      "peer": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
@@ -5813,6 +5881,32 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/svelte": {
+      "version": "5.19.3",
+      "resolved": "https://registry.npmjs.org/svelte/-/svelte-5.19.3.tgz",
+      "integrity": "sha512-rb/bkYG9jq67OCWikMvaPnfOobyGn0JizVDwHpdeBtLiNXPMcoA9GTFC3BhptP7xGNquUU8J5GiS7PlGlfDAFA==",
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "@ampproject/remapping": "^2.3.0",
+        "@jridgewell/sourcemap-codec": "^1.5.0",
+        "@types/estree": "^1.0.5",
+        "acorn": "^8.12.1",
+        "acorn-typescript": "^1.4.13",
+        "aria-query": "^5.3.1",
+        "axobject-query": "^4.1.0",
+        "clsx": "^2.1.1",
+        "esm-env": "^1.2.1",
+        "esrap": "^1.4.3",
+        "is-reference": "^3.0.3",
+        "locate-character": "^3.0.0",
+        "magic-string": "^0.30.11",
+        "zimmerframe": "^1.1.2"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/tailwindcss": {
       "version": "3.4.17",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.17.tgz",
@@ -6319,9 +6413,9 @@
       }
     },
     "node_modules/vite": {
-      "version": "6.0.7",
+      "version": "6.0.11",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-6.0.7.tgz",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-6.0.11.tgz",
-      "integrity": "sha512-RDt8r/7qx9940f8FcOIAH9PTViRrghKaK2K1jY3RaAURrEUbm9Du1mJ72G+jlhtG3WwodnfzY8ORQZbBavZEAQ==",
+      "integrity": "sha512-4VL9mQPKoHy4+FE0NnRE/kbY51TOfaknxAjt3fJbGJxhIpBZiqVzlZDEesWWsuREXHwNdAoOFZ9MkPEVXczHwg==",
       "dependencies": {
         "esbuild": "^0.24.2",
         "postcss": "^8.4.49",
@@ -7012,6 +7106,13 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/zimmerframe": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/zimmerframe/-/zimmerframe-1.1.2.tgz",
+      "integrity": "sha512-rAbqEGa8ovJy4pyBxZM70hg4pE6gDgaQ0Sl9M3enG3I0d6H4XSAM3GeNGLKnsBpuijUow064sf7ww1nutC5/3w==",
+      "optional": true,
+      "peer": true
+    },
     "node_modules/zod": {
       "version": "3.24.1",
       "resolved": "https://registry.npmjs.org/zod/-/zod-3.24.1.tgz",

src/config/backgrounds.ts

@@ -0,0 +1,77 @@
+interface BackgroundImage {
+  url: string;
+  title: string;
+  artist: string;
+  source: string;
+  socials?: {
+    name: string;
+    link: string;
+  }[];
+}
+
+export const backgrounds: BackgroundImage[] = [
+  {
+    url: "https://cdn.donmai.us/original/97/c8/__citlali_genshin_impact_drawn_by_ryrmcher__97c810ff6e992f1789f93e2edbb683a3.jpg",
+    title: "Citlali (Genshin Impact)",
+    artist: "ryrmcher",
+    source: "https://danbooru.donmai.us/posts/6148600",
+    socials: [
+      {
+        name: "Twitter Post",
+        link: "https://x.com/ryrmcher/status/1878812100866560258",
+      },
+      {
+        name: "Artist's Twitter",
+        link: "https://x.com/ryrmcher",
+      },
+    ],
+  },
+  {
+    url: "https://cdn.donmai.us/original/b9/f3/__original_drawn_by_ayanagi0319__b9f35c4a2460a2b9b3755a254f32624a.png",
+    title: "ひとりぼっちのあさ",
+    artist: "ayanagi0319",
+    source: "https://danbooru.donmai.us/posts/6900673",
+    socials: [
+      {
+        name: "Twitter",
+        link: "https://twitter.com/ayanagi0319",
+      },
+    ],
+  },
+  {
+    url: "https://cdn.donmai.us/original/08/c3/__patchouli_knowledge_touhou_drawn_by_kame_kamepan44231__08c3d75d5ee4a046b2a0f2415f0add5a.jpg",
+    title: "読書",
+    artist: "kamepan44231 - かめぱすた",
+    source: "https://danbooru.donmai.us/posts/8743208?",
+    socials: [
+      {
+        name: "Twitter",
+        link: "https://x.com/kamepan44231",
+      },
+    ],
+  },
+  // Add more backgrounds here!
+  // {
+  //   url: 'your-image-url',
+  //   title: 'Image Title',
+  //   artist: 'Artist Name',
+  //   source: 'source-url',
+  //   socials: [
+  //     { name: 'Twitter', link: 'twitter-url' }
+  //   ]
+  // }
+];
+
+export function getRandomBackground(): BackgroundImage {
+  if (backgrounds.length === 0) {
+    // Fallback background if array is empty
+    return {
+      url: "https://cdn.donmai.us/original/97/c8/__citlali_genshin_impact_drawn_by_ryrmcher__97c810ff6e992f1789f93e2edbb683a3.jpg",
+      title: "Citlali (Genshin Impact)",
+      artist: "ryrmcher",
+      source: "https://danbooru.donmai.us/posts/6148600",
+      socials: [],
+    };
+  }
+  return backgrounds[Math.floor(Math.random() * backgrounds.length)];
+}

src/layouts/Layout.astro

@@ -1,6 +1,7 @@
 ---
 import ThemeToggle from '../components/ThemeToggle.astro';
 import Analytics from '@vercel/analytics/astro';
+import { getRandomBackground } from '../config/backgrounds';
 
 interface Props {
   title: string;
@@ -12,6 +13,7 @@ const {
   description = "Discover and track your favorite comics with ComicK-RSS" 
 } = Astro.props;
 
+const background = getRandomBackground();
 const canonicalURL = new URL(Astro.url.pathname, Astro.site ?? 'https://comick-rss.vercel.app').toString();
 const isCreditsPage = Astro.url.pathname === '/credits';
 ---
@@ -43,7 +45,11 @@ const isCreditsPage = Astro.url.pathname === '/credits';
     
     <meta name="generator" content={Astro.generator} />
   </head>
-  <body class="min-h-screen bg-primary text-primary before:fixed before:inset-0 before:bg-[url('https://cdn.donmai.us/original/97/c8/__citlali_genshin_impact_drawn_by_ryrmcher__97c810ff6e992f1789f93e2edbb683a3.jpg')] before:bg-cover before:bg-center before:bg-no-repeat before:opacity-30 before:-z-10 before:transition-all before:duration-300" id="body-element">
+  <body 
+    class={`min-h-screen bg-primary text-primary before:fixed before:inset-0 before:bg-[url('${background.url}')] before:bg-cover before:bg-center before:bg-no-repeat before:opacity-30 before:-z-10 before:transition-all before:duration-300`} 
+    id="body-element"
+    style={`--bg-url: url('${background.url}')`}
+  >
     {!isCreditsPage && (
       <div class="fixed top-4 right-4 z-50">
         <div class="relative" id="settings-dropdown">
@@ -249,4 +255,10 @@ const isCreditsPage = Astro.url.pathname === '/credits';
   .animate-pulse {
     animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
   }
+</style>
+
+<style define:vars={{ bgUrl: background.url }}>
+  body::before {
+    background-image: var(--bg-url);
+  }
 </style>

src/pages/credits.astro

@@ -1,5 +1,6 @@
 ---
 import Layout from '../layouts/Layout.astro';
+import { backgrounds } from '../config/backgrounds';
 
 const title = "ComicK-RSS - Credits";
 const description = "Credits and attributions for ComicK-RSS";
@@ -7,24 +8,13 @@ const description = "Credits and attributions for ComicK-RSS";
 const credits = [
   {
     title: "Background Art",
-    items: [
+    items: backgrounds.map(bg => ({
-      {
+      name: bg.title,
-        name: "Citlali (Genshin Impact)",
+      artist: bg.artist,
-        artist: "ryrmcher",
+      link: bg.source,
-        link: "https://danbooru.donmai.us/posts/6148600",
+      description: "Beautiful artwork used as site background",
-        description: "Beautiful artwork used as the site background",
+      socials: bg.socials
-        socials: [
+    }))
-          {
-            name: "Twitter Post",
-            link: "https://x.com/ryrmcher/status/1878812100866560258"
-          },
-          {
-            name: "Artist's Twitter",
-            link: "https://x.com/ryrmcher"
-          }
-        ]
-      }
-    ]
   },
   {
     title: "Technologies",