Merge pull request #20 from ClovertaTheTrilobita/dev

Update friends

src/components/FriendlyLinks/FriendlyLinkList.astro

@@ -23,6 +23,8 @@ const links = await getCollection("friends");
 
 <style>
     .friendly-link-list {
+        max-width: 770px;
+        margin: 0 auto;
         display: grid;
         grid-template-columns: repeat(2, minmax(0, 1fr));
         gap: 1rem;

src/components/FriendlyLinks/FriendsDescription.astro

@@ -0,0 +1,108 @@
+---
+import { getLangFromUrl, getTranslations } from "@/i18n";
+import "@/styles/global.css";
+
+const lang = getLangFromUrl(Astro.url);
+const t = getTranslations(lang);
+---
+
+<div class="description">
+    <div class="image-wrap">
+        <img
+            src="https://files.seeusercontent.com/2026/04/17/nOg4/7tx5GS3nAtOXM577XE9VOe0LUU8.webp"
+            alt="nichijo.webp"
+        />
+        <p class="caption">{t.friends.imgDesc}</p>
+    </div>
+
+    <h1>{t.friends.title}</h1>
+    <div class="content">
+        {t.friends.content.map((line: string) => <p set:html={line} />)}
+    </div>
+    <div class="friend-code-block">
+        <pre><code>---
+name: 'CLoverta的博客'
+description: "欢迎光临，请进门左转"
+url: "https://blog.cloverta.top"
+avatar: 'https://s2.loli.net/2025/11/22/tiDKuzdqycx1v9B.png' 
+---</code></pre>
+    </div>
+    <!-- <div class="player">
+        <iframe
+            data-testid="embed-iframe"
+            style="border-radius:2px"
+            src="https://open.spotify.com/embed/track/2vuSiplO7RnGkoyw2gH96M?utm_source=generator"
+            width="450px"
+            height="80"
+            frameborder="0"
+            allowfullscreen=""
+            allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture"
+            loading="lazy"></iframe>
+    </div> -->
+</div>
+<style>
+    .player {
+        margin-top: 1.5rem;
+        display: flex;
+        justify-content: center;
+    }
+
+    .content p {
+        line-height: 1.8;
+        margin: 1rem 0;
+    }
+
+    .description {
+        max-width: 800px;
+        margin: 0 auto;
+        padding: 2rem 1rem;
+    }
+
+    .friend-code-block {
+        background: #fbf5f2;
+        border: 1px solid #8fa1ad;
+        border-radius: 3px;
+        padding: 0rem;
+        overflow-x: auto;
+    }
+
+    .friend-code-block pre {
+        margin: 0;
+    }
+
+    .friend-code-block code {
+        font-family: monospace;
+        white-space: pre;
+    }
+
+    .image-wrap {
+        width: fit-content;
+        margin: 0 auto;
+    }
+
+    .image-wrap img {
+        width: calc((3.8em * 4) * 16 / 5);
+        height: calc(3.4em * 4);
+        aspect-ratio: 16 / 5;
+        object-fit: cover;
+        object-position: center;
+        display: block;
+        margin: 0 auto;
+        border: 2px dashed gray;
+        filter: sepia(0.3) saturate(1.08) hue-rotate(-12deg) brightness(0.97);
+    }
+
+    .image-wrap .caption {
+        margin-top: 0.3rem;
+        text-align: right;
+        color: #888;
+        font-style: italic;
+        font-size: 0.9rem;
+    }
+
+    @media (max-width: 600px) {
+        .description img {
+            height: calc(2.6em * 4);
+        }
+    }
+</style>

src/i18n/en.ts

@@ -54,5 +54,15 @@ export default {
     footer: {
         githubIntro: 'See more on <a href="https://github.com/ClovertaTheTrilobita">Github</a>!',
         repoIntro: 'This blog is fully open source at <a href="https://github.com/ClovertaTheTrilobita/SanYeCao-blog">ClovertaTheTrilobita/SanYeCao-blog</a>'
+    },
+    friends: {
+        title: "Friends",
+        content: [
+            "Thank you for making it this far.",
+            "These are my friends, and you're very welcome to exchange links with me too!",
+            'You can send your link information to <a href="mailto:cloverta@petalmail.com">my email</a>.',
+            "The format is as follows:"
+        ],
+        imgDesc: "Our everyday lives may, in fact, be a series of miracles."
     }
 };

src/i18n/zh.ts

@@ -54,5 +54,15 @@ export default {
     footer: {
         githubIntro: '在 <a href="https://github.com/ClovertaTheTrilobita">Github</a> 查看更多！',
         repoIntro: '这个博客完全开源于 <a href="https://github.com/ClovertaTheTrilobita/SanYeCao-blog">ClovertaTheTrilobita/SanYeCao-blog</a>'
+    },
+    friends: {
+        title: "友链",
+        content: [
+            "感谢你能看到这里。",
+            "这里是我的朋友们，也非常欢迎你来一起交换友链！",
+            '你可以把友链信息发送到<a href="mailto:cloverta@petalmail.com">我的邮箱</a>。',
+            "友链的格式如下："
+        ],
+        imgDesc: "——我们日复一日度过的日常，也许就是接连发生的奇迹"
     }
 };

src/pages/[lang]/friends.astro

@@ -1,6 +1,7 @@
 ---
 import BaseLayout from "@/layouts/BaseLayout.astro";
 import FriendlyLinkList from "@/components/FriendlyLinks/FriendlyLinkList.astro";
+import FriendsDescription from "@/components/FriendlyLinks/FriendsDescription.astro";
 import { getLangFromUrl, getTranslations } from "@/i18n";
 import "@/styles/global.css";
 
@@ -14,5 +15,16 @@ const headerTitle = lang === "zh" ? "友情链接" : "Friends";
 ---
 
 <BaseLayout pageTitle=`${headerTitle} - ${t.banner.title}`>
+    <FriendsDescription />
+    <div class="section-divider"></div>
     <FriendlyLinkList />
 </BaseLayout>
+
+<style>
+    .section-divider {
+        height: 1px;
+        background: #cdd2d8;
+        margin: 1.5rem 0;
+        opacity: 0.8;
+    }
+</style>