Add much better system for style lists in Input.astro, and format.

astro.config.mjs

@@ -6,18 +6,20 @@ import sitemap from "@astrojs/sitemap";
 // https://astro.build/config
 export default defineConfig({
   site: "https://aluu.xyz",
-  integrations: [sitemap({
-    lastmod: new Date(),
-    i18n: {
-      locales: {
-        en: "en-US",
-        jp: "ja-JP",
+  integrations: [
+    sitemap({
+      lastmod: new Date(),
+      i18n: {
+        locales: {
+          en: "en-US",
+          jp: "ja-JP",
+        },
+        defaultLocale: "en",
       },
-      defaultLocale: "en"
-    }
-  })],
+    }),
+  ],
   output: "hybrid",
   adapter: node({
-    mode: "middleware"
-  })
-});
+    mode: "middleware",
+  }),
+});

index.js

@@ -151,7 +151,7 @@ app.get("/robots.txt", (req, res) => {
   } else {
     res.sendFile(path.join(process.cwd(), "dist/client/robots-deny.txt"));
   }
-})
+});
 app.get("/search", async (req, res) => {
   try {
     const { query } = req.query;

src/components/UI/Input.astro

@@ -1,5 +1,18 @@
 ---
-const { inputName, defaultTextContent, height, placeholder, className, defaultStyles = true } = Astro.props;
+const {
+  inputName,
+  defaultTextContent,
+  height,
+  placeholder,
+  className,
+  defaultStyles = true,
+} = Astro.props;
+
+const styleList = className ? className.split(" ") : [];
+
+if (defaultStyles) {
+  styleList.push("astro-input");
+}
 
 interface Props {
   inputName: string;
@@ -17,27 +30,5 @@ interface Props {
   placeholder={placeholder || ""}
   value={defaultTextContent || ""}
   type="text"
-  class={className}
+  class={styleList.map((style) => style).join(" ")}
 />
-
-{defaultStyles && <style>
-    input {
-      font-size: 16px;
-      width: 100%;
-      border: 2px solid var(--background-highlight);
-      border-radius: 10px;
-      background-color: var(--accent-color);
-      color: var(--text-color);
-      transition: 0.1s ease-in-out;
-    }
-    input::placeholder {
-      color: var(--text-color);
-    }
-    input:focus {
-      outline: none;
-      border: 2px solid var(--text-color);
-    }
-  </style>
-}
-
-

src/layouts/Layout.astro

@@ -199,6 +199,22 @@ const { title, optionalPreloads } = Astro.props;
         border-radius: 15px;
         cursor: pointer;
       }
+      .astro-input {
+        font-size: 16px;
+        width: 100%;
+        border: 2px solid var(--background-highlight);
+        border-radius: 10px;
+        background-color: var(--accent-color);
+        color: var(--text-color);
+        transition: 0.1s ease-in-out;
+      }
+      .astro-input::placeholder {
+        color: var(--text-color);
+      }
+      .astro-input:focus {
+        outline: none;
+        border: 2px solid var(--text-color);
+      }
     </style>
   </body>
 </html>