Chg: Astro 6.1.7 / New: kleismicをリンクに追加 / Chg: imgタグをImageに変更 / Chg: index.astroの自己紹介のfont-sizeを1remに変更 / Chg: ライトモードのborder-colorを変更 / Chg: ライトモードのフッターの背景色を変更

src/components/Card.astro

@@ -1,8 +1,11 @@
 ---
+import { Image } from "astro:assets";
+
 export interface Props {
   title: string;
   description: string;
   img: string;
+  imgLoading?: "eager" | "lazy";
   href?: URL;
   scale?: number;
   isFullWidth?: true;
@@ -18,9 +21,12 @@ export interface Props {
   target="_blank"
 >
   <div class="img">
-    <img
+    <Image
+      width="20"
+      height="20"
+      loading={Astro.props.imgLoading ?? "lazy"}
       src={new URL(`/icons/${Astro.props.img}`, Astro.url.origin).toString()}
-      alt="アイコン"
+      alt={Astro.props.title}
       class={Astro.props.canDarkInvert
         ? "canDarkInvert"
         : ""}

src/components/Footer.astro

@@ -16,7 +16,7 @@ footer {
   font-family: "BIZ UDPGothic", sans-serif;
   text-align: center;
   color: #667a8b;
-  background-color: #bdc3d0;
+  background-color: #d8d8d8;
   padding: 2rem;
   user-select: none;
   -webkit-user-select: none;

src/components/Header.astro

@@ -1,6 +1,13 @@
+---
+import { Image } from "astro:assets";
+---
+
 <header>
   <a href="/">
-    <img
+    <Image
+      width="20"
+      height="20"
+      loading="eager"
       src={new URL("/avatar.png", Astro.url.origin).toString()}
       alt="アバター"
     />
@@ -41,6 +48,7 @@ a {
 
 img {
   width: 2.75rem;
+  height: 2.75rem;
   border-radius: 100%;
   border: 1px solid var(--border-color);
 }

src/constants/contacts.ts

@@ -20,4 +20,4 @@ export default [
     href: new URL("https://misskey.systems/@last2014"),
     canDarkInvert: false,
   },
-] as CardProps[];
+] as CardProps[];

src/constants/links.ts

@@ -35,6 +35,13 @@ export default [
     img: "uwuzunet.png",
     href: new URL("https://uwuzu.net/@last2014"),
   },
+  {
+    title: "kleismic",
+    description: "@last2014.keik.info",
+    img: "kleismic.png",
+    href: new URL("https://kleismic.com/profile/last2014"),
+    scale: 0.9,
+  },
   {
     title: "マシュマロ",
     description: "/egdz8zducskjfqt",

src/pages/index.astro

@@ -5,11 +5,15 @@ import details from "@/constants/details";
 import links from "@/constants/links";
 import contacts from "@/constants/contacts";
 import supports from "@/constants/supports";
+import { Image } from "astro:assets";
 ---
 
 <Layout>
   <div class="profile">
-    <img
+    <Image
+      width="20"
+      height="20"
+      loading="eager"
       src={new URL("/avatar.png", Astro.url.origin).toString()}
       alt="アバター"
     />
@@ -50,7 +54,7 @@ import supports from "@/constants/supports";
     <span id="link">リンク</span>
     
     {links.map((link) => (
-      <Card {...link} />
+      <Card imgLoading="eager" {...link} />
     ))}
   </div>
 
@@ -102,7 +106,6 @@ import supports from "@/constants/supports";
 }
 
 .profile div p {
-  font-size: 0.9rem;
   font-weight: 350;
 }
 

src/styles/global.css

@@ -3,7 +3,7 @@
 :root {
   --background-color: #f0f0f0;
   --text-color: #000000;
-  --border-color: #f2e5e5;
+  --border-color: #e0e0e0;
 }
 
 @media (prefers-color-scheme: dark) {