@astro-minimax/core 0.1.0

package/src/components/nav/Header.astro

@@ -0,0 +1,252 @@
+---
+import IconX from "../../assets/icons/IconX.svg";
+import IconHome from "../../assets/icons/IconHome.svg";
+import IconArticle from "../../assets/icons/IconArticle.svg";
+import IconTag from "../../assets/icons/IconTag.svg";
+import IconUser from "../../assets/icons/IconUser.svg";
+import IconSearch from "../../assets/icons/IconSearch.svg";
+import IconArchive from "../../assets/icons/IconArchive.svg";
+import IconSeries from "../../assets/icons/IconSeries.svg";
+import IconProject from "../../assets/icons/IconProject.svg";
+import IconMenuDeep from "../../assets/icons/IconMenuDeep.svg";
+import { SITE } from "@/config";
+import { t, type TranslationKey } from "../../utils/i18n";
+import { isPathActive } from "../../utils/pathUtils";
+
+const { pathname } = Astro.url;
+const isActive = (path: string) => isPathActive(path, pathname);
+
+const { lang = "zh" } = Astro.props;
+
+const base = `/${lang}`;
+
+const iconMap: Record<string, typeof IconHome> = {
+  home: IconHome,
+  posts: IconArticle,
+  tags: IconTag,
+  categories: IconTag,
+  series: IconSeries,
+  projects: IconProject,
+  about: IconUser,
+  friends: IconUser,
+  archives: IconArchive,
+};
+
+const hrefMap: Record<string, string> = {
+  home: `${base}/`,
+  posts: `${base}/posts`,
+  tags: `${base}/tags`,
+  categories: `${base}/categories`,
+  series: `${base}/series`,
+  projects: `${base}/projects`,
+  about: `${base}/about`,
+  friends: `${base}/friends`,
+  archives: `${base}/archives`,
+};
+
+const navItems = SITE.nav.items
+  .filter(i => i.enabled)
+  .map(i => ({
+    href: hrefMap[i.key] ?? `${base}/${i.key}`,
+    label: t(`nav.${i.key}` as TranslationKey, lang),
+    icon: iconMap[i.key] ?? IconArticle,
+  }));
+---
+
+<a
+  id="skip-to-content"
+  href="#main-content"
+  class="absolute start-16 -top-full z-50 bg-background px-3 py-2 text-accent backdrop-blur-lg transition-all focus:top-4"
+>
+  Skip to content
+</a>
+
+<header
+  class="sticky top-0 z-40 w-full border-b border-border bg-background/80 backdrop-blur-md"
+>
+  <div
+    class="flex h-14 w-full items-center justify-between px-4 sm:px-6 lg:px-8"
+  >
+    <a
+      href={`/${lang}/`}
+      class="text-lg font-semibold tracking-tight text-foreground transition-colors hover:text-accent sm:text-xl"
+    >
+      {SITE.title}
+    </a>
+
+    <nav id="nav-menu" class="flex items-center">
+      {/* Desktop Navigation */}
+      <ul class="hidden items-center gap-1 sm:flex">
+        {
+          navItems.map(({ href, label, icon: Icon }) => (
+            <li>
+              <a
+                href={href}
+                class:list={[
+                  "flex items-center gap-1.5 rounded-md px-3 py-1.5 text-sm font-medium transition-colors",
+                  "text-muted-foreground hover:bg-muted/60 hover:text-foreground",
+                  { "bg-muted/80 text-foreground": isActive(href) },
+                ]}
+              >
+                <Icon class="size-4" />
+                <span>{label}</span>
+              </a>
+            </li>
+          ))
+        }
+        <li class="ml-1 flex items-center gap-1 border-l border-border pl-2">
+          <button
+            id="lang-switch-btn"
+            class="text-muted-foreground rounded-md px-2 py-1.5 text-xs font-semibold transition-colors hover:bg-muted/60 hover:text-foreground"
+            title="Switch language"
+            aria-label="Switch language"
+          >
+            <span id="lang-label">EN</span>
+          </button>
+          <a
+            href={`/${lang}/search`}
+            class:list={[
+              "flex items-center gap-1.5 rounded-md px-2 py-1.5 text-sm font-medium transition-colors",
+              "text-muted-foreground hover:bg-muted/60 hover:text-foreground",
+              { "bg-muted/80 text-foreground": isActive(`/${lang}/search`) },
+            ]}
+            title={t("nav.search", lang)}
+            aria-label={t("nav.search", lang)}
+          >
+            <IconSearch class="size-4" />
+          </a>
+        </li>
+      </ul>
+
+      {/* Mobile Menu Button */}
+      <button
+        id="menu-btn"
+        class="focus-outline rounded-md p-2 sm:hidden"
+        aria-label="Open Menu"
+        aria-expanded="false"
+        aria-controls="mobile-menu"
+      >
+        <IconX id="close-icon" class="hidden size-5" />
+        <IconMenuDeep id="menu-icon" class="size-5" />
+      </button>
+    </nav>
+  </div>
+
+  {/* Mobile Navigation Panel */}
+  <div
+    id="mobile-menu"
+    class="hidden border-t border-border bg-background sm:hidden"
+  >
+    <ul class="flex flex-col gap-1 px-4 py-3">
+      {
+        navItems.map(({ href, label, icon: Icon }) => (
+          <li>
+            <a
+              href={href}
+              class:list={[
+                "flex items-center gap-3 rounded-md px-3 py-2.5 text-sm font-medium transition-colors",
+                "text-muted-foreground hover:bg-muted/60 hover:text-foreground",
+                { "bg-muted/80 text-foreground": isActive(href) },
+              ]}
+            >
+              <Icon class="size-5" />
+              <span>{label}</span>
+            </a>
+          </li>
+        ))
+      }
+      <li class="mt-1 border-t border-border pt-2">
+        <a
+          href={`/${lang}/search`}
+          class:list={[
+            "flex items-center gap-3 rounded-md px-3 py-2.5 text-sm font-medium transition-colors",
+            "text-muted-foreground hover:bg-muted/60 hover:text-foreground",
+            { "bg-muted/80 text-foreground": isActive(`/${lang}/search`) },
+          ]}
+        >
+          <IconSearch class="size-5" />
+          <span>{t("nav.search", lang)}</span>
+        </a>
+      </li>
+      <li>
+        <button
+          id="lang-switch-btn-mobile"
+          class="text-muted-foreground flex w-full items-center gap-3 rounded-md px-3 py-2.5 text-sm font-medium transition-colors hover:bg-muted/60 hover:text-foreground"
+          aria-label="Switch language"
+        >
+          <svg
+            class="size-5"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <circle cx="12" cy="12" r="10"></circle>
+            <path d="M2 12h20"></path>
+            <path
+              d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"
+            ></path>
+          </svg>
+          <span id="lang-label-mobile">English</span>
+        </button>
+      </li>
+    </ul>
+  </div>
+</header>
+
+<script>
+  function toggleNav() {
+    const menuBtn = document.querySelector("#menu-btn");
+    const mobileMenu = document.querySelector("#mobile-menu");
+    const menuIcon = document.querySelector("#menu-icon");
+    const closeIcon = document.querySelector("#close-icon");
+
+    if (!menuBtn || !mobileMenu || !menuIcon || !closeIcon) return;
+
+    menuBtn.addEventListener("click", () => {
+      const openMenu = menuBtn.getAttribute("aria-expanded") === "true";
+
+      menuBtn.setAttribute("aria-expanded", openMenu ? "false" : "true");
+      menuBtn.setAttribute("aria-label", openMenu ? "Open Menu" : "Close Menu");
+
+      mobileMenu.classList.toggle("hidden");
+      menuIcon.classList.toggle("hidden");
+      closeIcon.classList.toggle("hidden");
+    });
+  }
+
+  toggleNav();
+  document.addEventListener("astro:after-swap", toggleNav);
+
+  function initLangSwitcher() {
+    const btns = [
+      document.getElementById("lang-switch-btn"),
+      document.getElementById("lang-switch-btn-mobile"),
+    ];
+    const label = document.getElementById("lang-label");
+    const labelMobile = document.getElementById("lang-label-mobile");
+
+    const path = window.location.pathname;
+    const isZh = path.startsWith("/zh/") || path === "/zh";
+
+    if (label) label.textContent = isZh ? "EN" : "中";
+    if (labelMobile) labelMobile.textContent = isZh ? "English" : "中文";
+
+    btns.forEach(btn => {
+      btn?.addEventListener("click", () => {
+        if (isZh) {
+          const newPath = path.replace(/^\/zh\/?/, "/en/") || "/en/";
+          window.location.href = newPath;
+        } else {
+          const newPath = path.replace(/^\/en\/?/, "/zh/") || "/zh/";
+          window.location.href = newPath;
+        }
+      });
+    });
+  }
+
+  initLangSwitcher();
+  document.addEventListener("astro:after-swap", initLangSwitcher);
+</script>

package/src/components/nav/Pagination.astro

@@ -0,0 +1,45 @@
+---
+import type { Page } from "astro";
+import type { CollectionEntry } from "astro:content";
+import IconArrowLeft from "../../assets/icons/IconArrowLeft.svg";
+import IconArrowRight from "../../assets/icons/IconArrowRight.svg";
+import LinkButton from "../../components/ui/LinkButton.astro";
+import { t } from "../../utils/i18n";
+
+type Props = {
+  page: Page<CollectionEntry<"blog">>;
+  lang?: string;
+};
+
+const { page, lang = "zh" } = Astro.props;
+---
+
+{
+  page.lastPage > 1 && (
+    <nav
+      class="mt-auto mb-8 flex justify-center"
+      role="navigation"
+      aria-label="Pagination Navigation"
+    >
+      <LinkButton
+        disabled={!page.url.prev}
+        href={page.url.prev as string}
+        class:list={["me-4 select-none", { "opacity-50": !page.url.prev }]}
+        aria-label="Goto Previous Page"
+      >
+        <IconArrowLeft class="inline-block rtl:rotate-180" />
+        {t("pagination.prev", lang)}
+      </LinkButton>
+      {page.currentPage} / {page.lastPage}
+      <LinkButton
+        disabled={!page.url.next}
+        href={page.url.next as string}
+        class:list={["ms-4 select-none", { "opacity-50": !page.url.next }]}
+        aria-label="Goto Next Page"
+      >
+        {t("pagination.next", lang)}
+        <IconArrowRight class="inline-block rtl:rotate-180" />
+      </LinkButton>
+    </nav>
+  )
+}

package/src/components/social/Socials.astro

@@ -0,0 +1,19 @@
+---
+import { SOCIALS } from "@/constants";
+import LinkButton from "../../components/ui/LinkButton.astro";
+---
+
+<div class="flex flex-wrap items-center gap-1">
+  {
+    SOCIALS.map(social => (
+      <LinkButton
+        href={social.href}
+        class="p-2 hover:rotate-6 sm:p-1"
+        title={social.linkTitle}
+      >
+        <social.icon class="inline-block size-6 scale-125 fill-transparent stroke-current stroke-2 opacity-90 group-hover:fill-transparent sm:scale-110" />
+        <span class="sr-only">{social.linkTitle}</span>
+      </LinkButton>
+    ))
+  }
+</div>

package/src/components/social/Sponsors.astro

@@ -0,0 +1,34 @@
+---
+import { SITE } from "@/config";
+
+interface Props {
+  class?: string;
+  progressMax?: number;
+}
+
+const { class: className = "", progressMax = 50 } = Astro.props;
+const sponsors = SITE.sponsor?.sponsors ?? [];
+---
+
+{
+  sponsors.length > 0 && (
+    <div class:list={["grid gap-3 sm:grid-cols-2 sm:gap-3.5 lg:grid-cols-3", className]}>
+      {sponsors.map(sponsor => (
+        <div class="relative h-full overflow-hidden rounded-xl border px-4 py-3">
+          <div class="mb-2 line-clamp-1 font-medium">{sponsor.name}</div>
+          <div class="text-xs text-foreground-soft">
+            {sponsor.date}
+            {sponsor.platform && ` via ${sponsor.platform}`}
+          </div>
+          <span class="absolute bottom-2 right-4 font-medium">
+            ¥{sponsor.amount}
+          </span>
+          <div
+            class="absolute bottom-0 left-0 h-1 rounded-b-xl bg-accent/30 transition-all"
+            style={{ width: `${Math.min((sponsor.amount / progressMax) * 100, 100)}%` }}
+          />
+        </div>
+      ))}
+    </div>
+  )
+}

package/src/components/social/Sponsorship.astro

@@ -0,0 +1,44 @@
+---
+import { SITE } from "@/config";
+
+interface Props {
+  class?: string;
+}
+
+const { class: className = "" } = Astro.props;
+const methods = SITE.sponsor?.methods ?? [];
+---
+
+{
+  methods.length > 0 && (
+    <div class:list={["flex flex-col justify-center gap-4 sm:flex-row", className]}>
+      {methods.map(item => (
+        <div class="sponsorship-card relative justify-center overflow-hidden rounded-xl border bg-white">
+          <div class="sponsorship-card-icon absolute inset-0 flex items-center justify-center text-4xl opacity-80 transition-opacity">
+            <span>{item.icon === "wechat" ? "💬" : item.icon === "alipay" ? "💰" : "☕"}</span>
+          </div>
+          <img
+            class="sponsorship-card-img mx-auto my-0 max-w-60 transition-all"
+            src={item.image}
+            alt={item.name}
+            loading="lazy"
+          />
+        </div>
+      ))}
+    </div>
+  )
+}
+
+<style>
+  .sponsorship-card .sponsorship-card-img {
+    opacity: 0.3;
+    filter: blur(4px);
+  }
+  .sponsorship-card:hover .sponsorship-card-icon {
+    opacity: 0;
+  }
+  .sponsorship-card:hover .sponsorship-card-img {
+    opacity: 1;
+    filter: blur(0);
+  }
+</style>

package/src/components/ui/Alert.astro

@@ -0,0 +1,28 @@
+---
+/**
+ * GitHub-style Alert component for MDX
+ */
+interface Props {
+  type: "note" | "tip" | "important" | "warning" | "caution";
+  title?: string;
+}
+
+const { type, title } = Astro.props;
+
+const defaultTitles: Record<string, string> = {
+  note: "Note",
+  tip: "Tip",
+  important: "Important",
+  warning: "Warning",
+  caution: "Caution",
+};
+
+const displayTitle = title || defaultTitles[type] || "Note";
+---
+
+<div class:list={["markdown-alert", `markdown-alert-${type}`]}>
+  <p class="markdown-alert-title">
+    {displayTitle}
+  </p>
+  <slot />
+</div>

package/src/components/ui/Card.astro

@@ -0,0 +1,206 @@
+---
+import type { CollectionEntry } from "astro:content";
+import type { ImageMetadata } from "astro";
+import { slugifyStr } from "../../utils/slugify";
+import { getLocalizedPostPath } from "../../utils/getPath";
+import { getReadingTime } from "../../utils/getReadingTime";
+import { t } from "../../utils/i18n";
+import IconArrowRight from "../../assets/icons/IconArrowRight.svg";
+
+type Props = {
+  variant?: "h2" | "h3";
+  compact?: boolean;
+  lang?: string;
+  priority?: boolean;
+} & CollectionEntry<"blog">;
+
+const {
+  variant: Heading = "h2",
+  compact = false,
+  id,
+  data,
+  body,
+  filePath,
+  lang = "zh",
+  priority = false,
+} = Astro.props;
+
+const { title, description, category, ogImage, tags, pubDatetime, modDatetime, timezone } = data;
+const postHref = getLocalizedPostPath(lang, id, filePath);
+const { minutes: readingMinutes } = getReadingTime(body ?? "");
+
+let coverSrc: string | undefined;
+if (ogImage && typeof ogImage === "object" && "src" in ogImage) {
+  coverSrc = (ogImage as ImageMetadata).src;
+} else if (typeof ogImage === "string" && ogImage.startsWith("http")) {
+  coverSrc = ogImage;
+}
+// Skip string paths that aren't URLs — they're likely broken local refs or dynamic OG stubs
+
+const langLabel = id.startsWith("en/") ? "English" : "中文";
+
+import dayjs from "dayjs";
+import utcPlugin from "dayjs/plugin/utc";
+import timezonePlugin from "dayjs/plugin/timezone";
+import { SITE } from "@/config";
+
+dayjs.extend(utcPlugin);
+dayjs.extend(timezonePlugin);
+
+const isModified = modDatetime && modDatetime > pubDatetime;
+const datetime = dayjs(isModified ? modDatetime : pubDatetime).tz(timezone || SITE.timezone);
+const dateStr = lang === "zh"
+  ? datetime.format("YYYY 年 M 月 D 日")
+  : datetime.format("MMM D, YYYY");
+---
+
+{compact ? (
+  <li class="group">
+    <a
+      href={postHref}
+      class="block rounded-lg border border-border bg-card/50 p-4 transition-all duration-200 hover:border-accent/40 hover:shadow-md focus-visible:outline-2 focus-visible:outline-dashed focus-visible:outline-accent"
+    >
+      {category && (
+        <span class="mb-1 inline-block text-xs font-medium text-accent">
+          {category}
+        </span>
+      )}
+      <Heading
+        style={{ viewTransitionName: slugifyStr(title.replaceAll(".", "-")) }}
+        class="text-base font-semibold text-foreground transition-colors group-hover:text-accent"
+      >
+        {title}
+      </Heading>
+      <p class="mt-1 line-clamp-1 text-sm text-foreground-soft">{description}</p>
+      <div class="mt-2 flex items-center gap-3 text-xs text-foreground-soft">
+        <time datetime={datetime.toISOString()}>{dateStr}</time>
+        <span>·</span>
+        <span>{t("post.readingTime", lang).replace("{min}", String(readingMinutes))}</span>
+      </div>
+    </a>
+  </li>
+) : (
+  <li class="group">
+    <a
+      href={postHref}
+      class="relative flex min-h-[220px] overflow-hidden rounded-xl border border-border/60 transition-all duration-300 hover:border-accent/40 hover:shadow-lg hover:shadow-shadow-elevated/10 focus-visible:outline-2 focus-visible:outline-dashed focus-visible:outline-accent sm:min-h-[200px]"
+    >
+      {/* Background image or gradient fallback */}
+      {coverSrc ? (
+        <div class="absolute inset-0">
+          <img
+            src={coverSrc}
+            alt=""
+            class="h-full w-full object-cover object-center"
+            loading={priority ? "eager" : "lazy"}
+            decoding="async"
+            fetchpriority={priority ? "high" : undefined}
+            width="800"
+            height="450"
+          />
+          <div class="absolute inset-0 bg-gradient-to-r from-black/80 via-black/60 to-black/30" />
+        </div>
+      ) : (
+        <div class="absolute inset-0 bg-gradient-to-br from-card via-muted/80 to-card" />
+      )}
+
+      {/* Content overlay */}
+      <div class={`relative z-10 flex w-full flex-col justify-between p-5 sm:p-6 ${coverSrc ? "text-white" : ""}`}>
+        {/* Top section: date + category */}
+        <div>
+          <div class="flex items-center gap-3">
+            <time
+              datetime={datetime.toISOString()}
+              class:list={[
+                "font-app text-xs tracking-wide",
+                coverSrc ? "text-white/80" : "text-foreground-soft"
+              ]}
+            >
+              {dateStr}
+            </time>
+            {category && (
+              <>
+                <span class:list={[coverSrc ? "text-white/40" : "text-foreground-soft/40"]}>·</span>
+                <span class:list={[
+                  "text-xs font-medium",
+                  coverSrc ? "text-white/80" : "text-accent"
+                ]}>
+                  {category}
+                </span>
+              </>
+            )}
+          </div>
+
+          {/* Title */}
+          <Heading
+            style={{ viewTransitionName: slugifyStr(title.replaceAll(".", "-")) }}
+            class:list={[
+              "mt-2 text-lg font-bold leading-snug sm:text-xl",
+              coverSrc ? "text-white" : "text-foreground",
+              "transition-colors group-hover:text-accent"
+            ]}
+          >
+            {title}
+          </Heading>
+
+          {/* Description */}
+          <p class:list={[
+            "mt-2 line-clamp-2 text-sm leading-relaxed",
+            coverSrc ? "text-white/75" : "text-foreground-soft"
+          ]}>
+            {description}
+          </p>
+        </div>
+
+        {/* Bottom section: meta + tags */}
+        <div class="mt-4 flex flex-wrap items-end justify-between gap-3">
+          <div class="flex flex-wrap items-center gap-3">
+            {/* Reading time */}
+            <span class:list={[
+              "flex items-center gap-1 text-xs",
+              coverSrc ? "text-white/70" : "text-foreground-soft"
+            ]}>
+              <svg class="size-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <circle cx="12" cy="12" r="10" /><polyline points="12 6 12 12 16 14" />
+              </svg>
+              {readingMinutes} min
+            </span>
+
+            {/* Language badge */}
+            <span class:list={[
+              "flex items-center gap-1 text-xs",
+              coverSrc ? "text-white/70" : "text-foreground-soft"
+            ]}>
+              <svg class="size-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <circle cx="12" cy="12" r="10" /><path d="M2 12h20" /><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z" />
+              </svg>
+              {langLabel}
+            </span>
+
+            {/* Tags */}
+            {tags.length > 0 && (
+              <div class="flex flex-wrap gap-1.5">
+                {tags.slice(0, 3).map(tag => (
+                  <span class:list={[
+                    "rounded-md px-2 py-0.5 text-xs",
+                    coverSrc
+                      ? "bg-white/15 text-white/80 backdrop-blur-sm"
+                      : "bg-muted text-foreground-soft"
+                  ]}>
+                    {tag}
+                  </span>
+                ))}
+              </div>
+            )}
+          </div>
+
+          {/* Arrow indicator */}
+          <IconArrowRight class:list={[
+            "size-5 shrink-0 transition-transform duration-200 group-hover:translate-x-1 rtl:rotate-180 rtl:group-hover:-translate-x-1",
+            coverSrc ? "text-white/60" : "text-foreground-soft"
+          ]} />
+        </div>
+      </div>
+    </a>
+  </li>
+)}