@xingwangzhe/stalux 1.2.0

package/src/components/stalux/links/linkCard.astro

@@ -0,0 +1,50 @@
+---
+import styles from "@styles/components/links/linkCard.module.css";
+import { getCollection } from "astro:content";
+import { createTranslator } from "@utils/i18n";
+import { getSiteData, getAuthorData, getHeadData, getNavsData, getLinksData, getCommentData, getFooterData, getPromoteData, getTypetextsData, getMediaLinksData } from "@utils/config-utils";
+
+interface LinkItem {
+    title?: string;
+    name?: string;
+    url?: string;
+    link?: string;
+    description?: string;
+    icon?: string;
+    avatar?: string;
+}
+
+interface Props {
+    link: LinkItem;
+}
+
+const configEntries = await getCollection("config");
+const siteConfig = getSiteData(configEntries);
+const { t } = createTranslator(siteConfig.lang || "zh-CN");
+const link = Astro.props.link;
+const href = link.url ?? link.link ?? "#";
+const title = link.title ?? link.name ?? t("links.defaultTitle");
+const desc = link.description ?? "";
+const icon = link.icon ?? link.avatar ?? "/favicon.ico";
+---
+
+<a
+    class={styles.card + " a-none"}
+    href={href}
+    target="_blank"
+    rel="noopener noreferrer"
+>
+    <div class={styles.avatar}>
+        <img
+            src={icon}
+            alt={t("links.iconAlt", { name: title })}
+            loading="lazy"
+            width="80"
+            height="80"
+        />
+    </div>
+    <div class={styles.content}>
+        <h3 class={styles.title}>{title}</h3>
+        {desc && <p class={styles.description}>{desc}</p>}
+    </div>
+</a>

package/src/components/stalux/links/linkList.astro

@@ -0,0 +1,20 @@
+---
+import LinkCard from "@components/stalux/links/linkCard.astro";
+import styles from "@styles/components/links/linkList.module.css";
+import { getCollection } from "astro:content";
+import { getLinksData } from "@utils/config-utils";
+
+const configEntries = await getCollection("config");
+const linksConfig = getLinksData(configEntries);
+const links = linksConfig?.sites ?? [];
+---
+
+<ul class={`${styles.list} stagger-children`}>
+    {
+        links.map((link) => (
+            <li class={styles.item}>
+                <LinkCard link={link} />
+            </li>
+        ))
+    }
+</ul>

package/src/components/stalux/links/socialMedia.astro

@@ -0,0 +1,102 @@
+---
+// 按需导入图标 — Vite tree-shake 只打包用到的图标
+import {
+    siGithub,
+    siBilibili,
+    siQq,
+    siMaildotru,
+    siJuejin,
+    siX,
+    type SimpleIcon,
+} from "simple-icons";
+import { getCollection } from "astro:content";
+import styles from "@styles/components/links/socialLinks.module.css";
+import { getSiteData, getMediaLinksData } from "@utils/config-utils";
+const configEntries = await getCollection("config");
+const siteConfig = getSiteData(configEntries);
+const mediaLinksSection = getMediaLinksData(configEntries);
+const mediaLinks = mediaLinksSection?.items ?? [];
+	
+	const isPostPage = Astro.url.pathname.startsWith("/posts/");
+
+// 静态图标映射表：新增图标时只需添加对应的 simple-icons 导入和映射
+const iconMap: Record<string, SimpleIcon> = {
+    github: siGithub,
+    bilibili: siBilibili,
+    qq: siQq,
+    maildotru: siMaildotru,
+    juejin: siJuejin,
+    x: siX,
+};
+
+function getIconByTitle(iconName: string): SimpleIcon | undefined {
+    return iconMap[iconName];
+}
+---
+
+<nav class={styles["social-links"]} transition:persist-props aria-label="Social media">
+    <ul>
+        {
+            mediaLinks.map((item) => {
+                const icon = item.icon ? getIconByTitle(item.icon) : undefined;
+                return (
+                    <li class="social_icon">
+                        <a
+                            href={item.link}
+                            target="_blank"
+                            aria-label={item.icon}
+                            rel="noopener noreferrer"
+                            title={item.icon}
+                            class="a-none"
+                        >
+                            {icon ? (
+                                <div class="icon-container">
+                                    <svg
+                                        role="img"
+                                        viewBox="0 0 24 24"
+                                        xmlns="http://www.w3.org/2000/svg"
+                                        width="24"
+                                        height="24"
+                                        fill="currentColor"
+                                        aria-hidden="true"
+                                    >
+                                        <title>{icon.title}</title>
+                                        <path d={icon.path} />
+                                    </svg>
+                                </div>
+                            ) : (
+                                <span class="custom-icon">
+                                    {item.icon
+                                        ? item.icon.charAt(0).toUpperCase()
+                                        : ""}
+                                </span>
+                            )}
+                        </a>
+                    </li>
+                );
+            })
+        }
+	    </ul>
+	</nav>
+
+{
+    !isPostPage && (
+        <script>
+            import { animate } from "animejs";
+            animate(".social_icon", {
+                y: [
+                    { to: "-2.75rem", ease: "outExpo", duration: 600 },
+                    { to: 0, ease: "outBounce", duration: 800, delay: 100 },
+                ],
+                rotate: {
+                    from: "-1turn",
+                    delay: 0,
+                },
+                delay: (_, i) => i * 50,
+                ease: "inOutCirc",
+                loopDelay: 1000,
+                loop: true,
+            });
+        </script>
+    )
+}

package/src/components/stalux/posts/PhotoSwipeStyle.astro

@@ -0,0 +1,3 @@
+---
+import "photoswipe/dist/photoswipe.css";
+---

package/src/components/stalux/posts/PostTaxonomy.astro

@@ -0,0 +1,65 @@
+---
+import { fade } from "astro:transitions";
+import style from "@styles/components/posts/postTaxonomy.module.css";
+import { getCollection } from "astro:content";
+import { getSiteData } from "@utils/config-utils";
+import { createTranslator } from "@utils/i18n";
+
+type Kind = "tag" | "category";
+
+interface Props {
+    kind: Kind;
+    items?: string[];
+    title?: string;
+}
+
+const configEntries = await getCollection("config");
+const siteConfig = getSiteData(configEntries);
+const { t } = createTranslator(siteConfig.lang || "zh-CN");
+
+const { kind, items = [], title } = Astro.props;
+
+// 根据 kind 选择文案、路由前缀与样式类名，
+// 避免 tag / category 两套几乎相同的组件互相复制。
+const cfg = {
+    tag: {
+        prefix: "/tags/",
+        heading: t("taxonomy.tag"),
+        empty: t("taxonomy.noTags"),
+        containerName: "tags-container",
+        contentName: "tags-content",
+        listClass: style.listWrap,
+        itemClass: style.itemPill,
+    },
+    category: {
+        prefix: "/categories/",
+        heading: t("taxonomy.category"),
+        empty: t("taxonomy.noCategories"),
+        containerName: "categories-container",
+        contentName: "categories-content",
+        listClass: style.listColumn,
+        itemClass: style.itemColumn,
+    },
+}[kind];
+---
+
+<nav class={style.container} transition:name={cfg.containerName} aria-label={title ?? cfg.heading}>
+    {items.length > 0 && <h3 class={style.title}>{title ?? cfg.heading}</h3>}
+    {
+        items.length > 0 ? (
+            <div
+                class={cfg.listClass}
+                transition:name={cfg.contentName}
+                transition:animate={fade({ duration: "0.3s" })}
+            >
+                {items.map((item) => (
+                    <a href={`${cfg.prefix}${item}/`} class={`${cfg.itemClass} a-none`} data-astro-prefetch>
+                        {item}
+                    </a>
+                ))}
+            </div>
+        ) : (
+            <div class={style.empty}>{cfg.empty}</div>
+        )
+    }
+</nav>