Merge branch 'main' into feat-page-notfound

astro.config.ts

@@ -1,3 +1,4 @@
+import { codecovVitePlugin } from "@codecov/vite-plugin";
 import type { AstroIntegration } from "astro";
 import icon from "astro-icon";
 import { defineConfig } from "astro/config";
@@ -9,4 +10,15 @@ if (process.env.ASTROBOOK) {
   integrations.push(astrobook({ directory: "src/components" }));
 }
 
-export default defineConfig({ integrations });
+export default defineConfig({
+  integrations,
+  vite: {
+    plugins: [
+      codecovVitePlugin({
+        enableBundleAnalysis: process.env.CODECOV_TOKEN !== undefined,
+        bundleName: "mobicard",
+        uploadToken: process.env.CODECOV_TOKEN,
+      }),
+    ],
+  },
+});

package.json

@@ -24,6 +24,7 @@
   "devDependencies": {
     "@astrojs/check": "0.9.4",
     "@biomejs/biome": "1.9.4",
+    "@codecov/vite-plugin": "1.2.1",
     "@types/node": "22.9.0",
     "@types/qrcode": "1.5.5",
     "@vitest/coverage-v8": "2.1.4",

src/components/Contact/Contact.astro

@@ -21,18 +21,33 @@ const contact = getContact(props.service, props.id);
   <span>{props.id}</span>
 </a>
 
-<style>
+<style define:vars={{ "accent-color": contact.color }}>
   a {
     display: inline-flex;
     align-items: center;
     gap: 0.5rem;
     text-decoration: none;
     color: var(--foreground);
+    border-bottom: 2px solid
+      color-mix(in srgb, var(--foreground) 30%, transparent);
+    transition:
+      color 0.3s ease-in-out,
+      border-color 0.3s ease-in-out;
+    &:hover,
+    &:focus-visible {
+      color: color-mix(in srgb, var(--accent-color) 20%, var(--foreground));
+      border-color: color-mix(
+        in srgb,
+        var(--accent-color) 60%,
+        var(--foreground)
+      );
+    }
   }
 
   #icon {
     width: 1.5rem;
     height: auto;
+    opacity: 80%;
   }
 
   span {

src/components/Homepage/Homepage.astro

@@ -35,6 +35,10 @@ const qrCode: string = await generateQRCode(props.url);
     align-items: center;
     gap: 0.3rem;
     text-decoration: none;
+    &:hover div,
+    &:focus-visible div {
+      border-color: color-mix(in srgb, var(--foreground) 60%, transparent);
+    }
   }
 
   #qr {
@@ -50,7 +54,11 @@ const qrCode: string = await generateQRCode(props.url);
     justify-content: center;
     align-items: center;
     gap: 0.3rem;
+    padding: 0 0.3rem;
     color: var(--foreground);
+    border-bottom: 2px solid
+      color-mix(in srgb, var(--foreground) 30%, transparent);
+    transition: border-color 0.3s ease-in-out;
   }
 
   #icon {

src/libs/contact.ts

@@ -4,7 +4,7 @@ const isFediverse = (service: service): boolean => {
   return service === "Mastodon" || service === "Misskey";
 };
 
-type contact = { url: string; icon: string };
+type contact = { url: string; icon: string; color: string };
 
 export const getContact = (service: service, id: string): contact => {
   const specified: contact = services[service];
@@ -21,5 +21,5 @@ export const getContact = (service: service, id: string): contact => {
   const url: string = isFediverse(service)
     ? `https://${id.split("@")[2]}/${id}`
     : specified.url + id;
-  return { url, icon: specified.icon };
+  return { url, icon: specified.icon, color: specified.color };
 };

src/styles/global.css

@@ -1,14 +1,14 @@
 @font-face {
   font-family: "LINE Seed JP";
-  src: url("/fonts/LINESeedJP_Rg.otf") format("opentype");
+  src: url("/fonts/LINESeedJP_Rg.woff2") format("woff2");
   font-weight: normal;
   font-style: normal;
   font-display: swap;
 }
 
 @font-face {
   font-family: "LINE Seed JP";
-  src: url("/fonts/LINESeedJP_Bd.otf") format("opentype");
+  src: url("/fonts/LINESeedJP_Bd.woff2") format("woff2");
   font-weight: bold;
   font-style: normal;
   font-display: swap;

src/types/services.ts

@@ -2,38 +2,47 @@ export const services = {
   Bluesky: {
     url: "https://bsky.app/profile/",
     icon: "mingcute:bluesky-social-line",
+    color: "#0285FF",
   },
   Facebook: {
     url: "https://www.facebook.com/",
     icon: "mingcute:facebook-line",
+    color: "#0866FF",
   },
   GitHub: {
     url: "https://github.com/",
     icon: "mingcute:github-line",
+    color: "#181717",
   },
   Instagram: {
     url: "https://www.instagram.com/",
     icon: "mingcute:ins-line",
+    color: "#E4405F",
   },
   Mastodon: {
     url: "",
     icon: "mingcute:mastodon-line",
+    color: "#6364FF",
   },
   Misskey: {
     url: "",
     icon: "simple-icons:misskey",
+    color: "#A1CA03",
   },
   Posts: {
     url: "https://posts.cv/",
     icon: "simple-icons:readdotcv",
+    color: "#111111",
   },
   Twitter: {
     url: "https://twitter.com/",
     icon: "mingcute:twitter-line",
+    color: "#1D9BF0",
   },
   Mail: {
     url: "mailto:",
     icon: "mingcute:mail-line",
+    color: "",
   },
 };