@astro-minimax/core 0.1.0

package/src/components/ui/Collapse.astro

@@ -0,0 +1,82 @@
+---
+interface Props {
+  class?: string;
+  title: string;
+}
+
+const { class: className = "", title, ...props } = Astro.props;
+---
+
+<collapse-component class="group/expand">
+  <div
+    class:list={[
+      "my-4 rounded-xl border px-3 sm:px-4 group-[.expanded]/expand:bg-muted",
+      className,
+    ]}
+    {...props}
+  >
+    <slot name="before" />
+    <div
+      class="group/highlight expand-title sticky top-0 z-20 flex cursor-pointer items-center justify-between py-1.5 group-[.expanded]/expand:bg-muted sm:py-2"
+    >
+      <p
+        class="m-0 transition-colors group-hover/highlight:text-accent"
+      >
+        {title}
+      </p>
+      <div class="expand-button">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="16"
+          height="16"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke-width="2.5"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          class="my-1 stroke-foreground-soft transition-all duration-300 group-hover/highlight:stroke-accent group-[.expanded]/expand:-rotate-90"
+        >
+          <line
+            x1="5"
+            y1="12"
+            x2="19"
+            y2="12"
+            class="translate-x-1 scale-x-100 duration-300 ease-in-out group-[.expanded]/expand:translate-x-4 group-[.expanded]/expand:scale-x-0"
+          ></line>
+          <polyline
+            points="12 5 19 12 12 19"
+            class="translate-x-1 duration-300 ease-in-out group-[.expanded]/expand:translate-x-0"
+          ></polyline>
+        </svg>
+      </div>
+    </div>
+    <div
+      class="expand-content grid opacity-0 transition-all duration-300 ease-in-out group-[.expanded]/expand:mb-3 group-[.expanded]/expand:opacity-100 sm:group-[.expanded]/expand:mb-4"
+    >
+      <div class="overflow-hidden">
+        <slot />
+      </div>
+    </div>
+  </div>
+</collapse-component>
+
+<script>
+  class CollapseElement extends HTMLElement {
+    connectedCallback() {
+      const expandTitle = this.querySelector(".expand-title");
+      expandTitle?.addEventListener("click", () => {
+        this.classList.toggle("expanded");
+      });
+    }
+  }
+  customElements.define("collapse-component", CollapseElement);
+</script>
+
+<style>
+  .expand-content {
+    grid-template-rows: 0fr;
+  }
+  .expanded .expand-content {
+    grid-template-rows: 1fr;
+  }
+</style>

package/src/components/ui/ColorPreview.astro

@@ -0,0 +1,29 @@
+---
+/**
+ * Color preview component
+ * Usage: <ColorPreview colors={["#FF6B6B", "#4ECDC4"]} />
+ */
+
+interface Props {
+  colors: string[];
+}
+
+const { colors } = Astro.props;
+---
+
+<div class="color-preview my-4 flex flex-wrap gap-3">
+  {
+    colors.map(color => (
+      <div class="flex items-center gap-2">
+        <span
+          class="color-swatch h-6 w-6 rounded-md border border-border shadow-sm"
+          style={`background-color: ${color}`}
+          title={color}
+        />
+        <code class="text-sm text-neutral-600 dark:text-neutral-400">
+          {color}
+        </code>
+      </div>
+    ))
+  }
+</div>

package/src/components/ui/Datetime.astro

@@ -0,0 +1,61 @@
+---
+import dayjs from "dayjs";
+import utc from "dayjs/plugin/utc";
+import timezone from "dayjs/plugin/timezone";
+import IconCalendar from "../../assets/icons/IconCalendar.svg";
+import { SITE } from "@/config";
+import { t } from "../../utils/i18n";
+
+dayjs.extend(utc);
+dayjs.extend(timezone);
+
+type Props = {
+  class?: string;
+  size?: "sm" | "lg";
+  pubDatetime: string | Date;
+  timezone?: string;
+  modDatetime?: string | Date | null;
+  lang?: string;
+};
+
+const {
+  pubDatetime,
+  modDatetime,
+  size = "sm",
+  class: className = "",
+  timezone: postTimezone,
+  lang,
+} = Astro.props;
+
+const currentLang = lang ?? SITE.lang;
+const isModified = modDatetime && modDatetime > pubDatetime;
+
+const datetime = dayjs(isModified ? modDatetime : pubDatetime).tz(
+  postTimezone || SITE.timezone
+);
+
+const date =
+  currentLang === "zh"
+    ? datetime.format("YYYY 年 M 月 D 日")
+    : datetime.format("D MMM, YYYY");
+---
+
+<div class:list={["flex items-center gap-x-2 opacity-80", className]}>
+  <IconCalendar
+    class:list={[
+      "inline-block size-6 min-w-5.5",
+      { "scale-90": size === "sm" },
+    ]}
+  />
+  {
+    isModified && (
+      <span class:list={["text-sm", { "sm:text-base": size === "lg" }]}>
+        {t("post.updated", currentLang)}
+      </span>
+    )
+  }
+  <time
+    class:list={["text-sm", { "sm:text-base": size === "lg" }]}
+    datetime={datetime.toISOString()}>{date}</time
+  >
+</div>

package/src/components/ui/GithubCard.astro

@@ -0,0 +1,191 @@
+---
+interface Props {
+  repo: string;
+}
+
+const { repo: repoRaw } = Astro.props;
+const repo = repoRaw.replace(/^https:\/\/github\.com\//, "");
+const [owner, repoName] = repo.split("/");
+---
+
+<github-card class="not-prose loading" data-repo={repo}>
+  <a
+    href={`https://github.com/${repo}`}
+    target="_blank"
+    rel="noopener noreferrer"
+    class="group flex flex-col gap-y-2 rounded-xl border px-4 py-3 transition-colors hover:bg-muted sm:px-5 sm:py-4"
+  >
+    <div class="flex items-center justify-between gap-x-2">
+      <div
+        class="flex min-w-0 flex-1 items-center gap-x-2 text-foreground group-hover:text-accent"
+      >
+        <div
+          id="gh-avatar"
+          class="load-block me-2 size-7 flex-shrink-0 rounded-full bg-cover sm:size-8"
+        >
+        </div>
+        <div class="min-w-0 flex-1">
+          <div class="flex items-center gap-x-1 max-sm:flex-wrap">
+            <span class="truncate text-base transition-colors sm:text-lg"
+              >{owner}</span
+            >
+            <span class="text-foreground-soft max-sm:hidden">/</span>
+            <span
+              class="truncate text-base font-medium transition-colors sm:text-lg max-sm:w-full"
+              >{repoName}</span
+            >
+          </div>
+        </div>
+      </div>
+      <div class="flex-shrink-0 rounded-full bg-card p-1">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="22"
+          height="22"
+          viewBox="0 0 24 24"
+          fill="currentColor"
+        >
+          <path
+            d="M12 2C6.477 2 2 6.477 2 12c0 4.42 2.865 8.166 6.839 9.489.5.092.682-.217.682-.482 0-.237-.008-.866-.013-1.7-2.782.604-3.369-1.34-3.369-1.34-.454-1.156-1.11-1.464-1.11-1.464-.908-.62.069-.608.069-.608 1.003.07 1.531 1.03 1.531 1.03.892 1.529 2.341 1.087 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.11-4.555-4.943 0-1.091.39-1.984 1.029-2.683-.103-.253-.446-1.27.098-2.647 0 0 .84-.269 2.75 1.025A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.294 2.747-1.025 2.747-1.025.546 1.377.203 2.394.1 2.647.64.699 1.028 1.592 1.028 2.683 0 3.842-2.339 4.687-4.566 4.935.359.309.678.919.678 1.852 0 1.336-.012 2.415-.012 2.743 0 .267.18.578.688.48C19.138 20.161 22 16.416 22 12c0-5.523-4.477-10-10-10z"
+          ></path>
+        </svg>
+      </div>
+    </div>
+    <p id="gh-description" class="load-block text-sm sm:text-base"
+      >Loading...</p
+    >
+    <div class="flex items-center justify-between gap-x-2">
+      <div
+        class="load-block flex flex-wrap items-center gap-x-3 gap-y-1 sm:gap-x-5"
+      >
+        <div class="flex items-center gap-x-1.5 sm:gap-x-2">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="18"
+            height="18"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <polygon
+              points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"
+            ></polygon>
+          </svg>
+          <span id="gh-stars" class="text-sm leading-tight sm:text-base"
+            >???</span
+          >
+        </div>
+        <div class="flex items-center gap-x-1.5 sm:gap-x-2">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="18"
+            height="18"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <circle cx="18" cy="18" r="3"></circle>
+            <circle cx="6" cy="6" r="3"></circle>
+            <path d="M13 6h3a2 2 0 0 1 2 2v7"></path>
+            <line x1="6" y1="9" x2="6" y2="21"></line>
+          </svg>
+          <span id="gh-forks" class="text-sm leading-tight sm:text-base"
+            >???</span
+          >
+        </div>
+      </div>
+      <span id="gh-language" class="load-block text-sm leading-tight sm:text-base"
+        >?????</span
+      >
+    </div>
+  </a>
+</github-card>
+
+<style>
+  @keyframes pulsate {
+    0% {
+      opacity: 1;
+    }
+    50% {
+      opacity: 0.4;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+  .loading .load-block {
+    color: transparent;
+    border-radius: 0.375rem;
+    background-color: var(--card);
+    animation: pulsate 2s infinite linear;
+    user-select: none;
+  }
+  .loading .load-block:nth-child(2) {
+    animation-delay: 1s;
+  }
+  :not(.loading) #gh-avatar {
+    background-color: var(--card);
+  }
+</style>
+
+<script>
+  interface GithubRepoData {
+    stargazers_count: number;
+    forks: number;
+    language: string;
+    owner: { avatar_url: string };
+    license?: { spdx_id: string };
+    description: string;
+  }
+
+  class GithubCardElement extends HTMLElement {
+    async connectedCallback() {
+      const repo = this.dataset.repo;
+      if (!repo) return;
+      try {
+        const res = await fetch(`https://api.github.com/repos/${repo}`, {
+          referrerPolicy: "no-referrer",
+        });
+        if (!res.ok) return;
+        const data = (await res.json()) as GithubRepoData;
+
+        this.setText("#gh-stars", this.fmt(data.stargazers_count));
+        this.setText("#gh-forks", this.fmt(data.forks));
+        this.setText("#gh-language", data.language || "N/A");
+        this.setText(
+          "#gh-description",
+          data.description?.replace(/:[a-zA-Z0-9_]+:/g, "") ||
+            "No description"
+        );
+
+        const avatar = this.querySelector("#gh-avatar") as HTMLElement;
+        if (avatar)
+          avatar.style.backgroundImage = `url(${data.owner.avatar_url})`;
+
+        this.classList.remove("loading");
+      } catch {
+        this.setText("#gh-description", "Failed to fetch data");
+      }
+    }
+
+    private setText(sel: string, text: string) {
+      const el = this.querySelector(sel) as HTMLElement;
+      if (el) el.textContent = text;
+    }
+
+    private fmt(n: number) {
+      return Intl.NumberFormat("en-us", {
+        notation: "compact",
+        maximumFractionDigits: 1,
+      }).format(n);
+    }
+  }
+
+  customElements.define("github-card", GithubCardElement);
+</script>

package/src/components/ui/LinkButton.astro

@@ -0,0 +1,21 @@
+---
+import type { HTMLAttributes } from "astro/types";
+
+type Props = { disabled?: boolean } & HTMLAttributes<"a">;
+
+const { disabled, class: className, ...attrs } = Astro.props;
+
+const Button = disabled ? "span" : "a";
+---
+
+<Button
+  aria-disabled={disabled}
+  class:list={[
+    "group inline-flex items-center gap-1",
+    { "hover:text-accent": !disabled },
+    className,
+  ]}
+  {...attrs}
+>
+  <slot />
+</Button>

package/src/components/ui/Tag.astro

@@ -0,0 +1,37 @@
+---
+import IconHash from "../../assets/icons/IconHash.svg";
+
+type Props = {
+  tag: string;
+  tagName: string;
+  size?: "sm" | "lg";
+  lang?: string;
+};
+
+const { tag, tagName, size = "lg", lang } = Astro.props;
+const tagHref = lang ? `/${lang}/tags/${tag}/` : `/tags/${tag}/`;
+---
+
+<li>
+  <a
+    href={tagHref}
+    transition:name={tag}
+    class:list={[
+      "flex items-center gap-0.5",
+      "border-b-2 border-dashed border-foreground",
+      "hover:-mt-0.5 hover:border-accent hover:text-accent",
+      "focus-visible:border-none focus-visible:text-accent",
+      { "text-sm": size === "sm" },
+      { "text-lg": size === "lg" },
+    ]}
+  >
+    <IconHash
+      class:list={[
+        "opacity-80",
+        { "size-5": size === "lg" },
+        { "size-4": size === "sm" },
+      ]}
+    />
+    {tagName}
+  </a>
+</li>

package/src/components/ui/TagCloud.astro

@@ -0,0 +1,69 @@
+---
+import IconHash from "../../assets/icons/IconHash.svg";
+
+type Props = {
+  tag: string;
+  tagName: string;
+  count: number;
+  maxCount: number;
+  minCount: number;
+  lang?: string;
+};
+
+const { tag, tagName, count, maxCount, minCount, lang = "zh" } = Astro.props;
+
+// Calculate relative size based on count
+const getTagSize = (currentCount: number, max: number, min: number): string => {
+  if (max === min) return "text-base";
+
+  // Normalize to 0-1 range
+  const normalized = (currentCount - min) / (max - min);
+
+  // Map to size classes with more granular steps
+  if (normalized > 0.9) return "text-3xl font-bold";
+  if (normalized > 0.8) return "text-2xl font-semibold";
+  if (normalized > 0.7) return "text-xl font-semibold";
+  if (normalized > 0.6) return "text-lg font-medium";
+  if (normalized > 0.5) return "text-base font-medium";
+  if (normalized > 0.4) return "text-sm font-medium";
+  if (normalized > 0.3) return "text-sm";
+  if (normalized > 0.2) return "text-xs";
+  return "text-xs";
+};
+
+// Calculate opacity based on count
+const getTagOpacity = (
+  currentCount: number,
+  max: number,
+  min: number
+): string => {
+  if (max === min) return "opacity-90";
+
+  const normalized = (currentCount - min) / (max - min);
+
+  if (normalized > 0.7) return "opacity-100";
+  if (normalized > 0.5) return "opacity-90";
+  if (normalized > 0.3) return "opacity-80";
+  return "opacity-70";
+};
+
+const sizeClass = getTagSize(count, maxCount, minCount);
+const opacityClass = getTagOpacity(count, maxCount, minCount);
+---
+
+<a
+  href={`/${lang}/tags/${tag}/`}
+  transition:name={tag}
+  class:list={[
+    "inline-flex items-center gap-0.5 rounded-md px-2 py-1 transition-all duration-300",
+    "hover:scale-105 hover:bg-accent/10 hover:text-accent",
+    "focus-visible:outline-2 focus-visible:outline-accent focus-visible:outline-dashed",
+    sizeClass,
+    opacityClass,
+  ]}
+  title={`${count} post${count > 1 ? "s" : ""}`}
+>
+  <IconHash class="size-4 opacity-70" />
+  <span>{tagName}</span>
+  <span class="text-xs opacity-60">({count})</span>
+</a>

package/src/components/ui/Timeline.astro

@@ -0,0 +1,39 @@
+---
+export interface TimelineEvent {
+  date: string;
+  content: string;
+}
+
+interface Props {
+  class?: string;
+  events: TimelineEvent[];
+}
+
+const { class: className, events, ...props } = Astro.props;
+---
+
+<div class={className} {...props}>
+  <ul class="ps-0 sm:ps-2">
+    {
+      events.map((event, index) => (
+        <li class="group relative flex list-none gap-x-3 rounded-full ps-0 sm:gap-x-2">
+          <span class="z-10 my-2 ms-2 h-3 w-3 min-w-3 rounded-full border-2 border-foreground-soft transition-transform group-hover:scale-125" />
+          {index !== events.length - 1 && (
+            <span
+              class="absolute start-[12px] top-[20px] w-1 bg-border"
+              style={{ height: "calc(100% - 4px)" }}
+            />
+          )}
+          <div class="flex gap-2 max-sm:flex-col">
+            <samp class="w-fit grow-0 rounded-md py-1 text-sm max-sm:bg-card max-sm:px-2 sm:min-w-[82px] sm:text-right">
+              {event.date}
+            </samp>
+            <div>
+              <Fragment set:html={event.content} />
+            </div>
+          </div>
+        </li>
+      ))
+    }
+  </ul>
+</div>

package/src/layouts/AboutLayout.astro

@@ -0,0 +1,24 @@
+---
+import type { MarkdownLayoutProps } from "astro";
+import Header from "../components/nav/Header.astro";
+import Footer from "../components/nav/Footer.astro";
+import Breadcrumb from "../components/nav/Breadcrumb.astro";
+import Layout from "./Layout.astro";
+import { SITE } from "@/config";
+
+type Props = MarkdownLayoutProps<{ title: string }>;
+
+const { frontmatter } = Astro.props;
+---
+
+<Layout title={`${frontmatter.title} | ${SITE.title}`}>
+  <Header />
+  <Breadcrumb />
+  <main id="main-content" class="app-layout">
+    <section id="about" class="app-prose mb-28 max-w-app prose-img:border-0">
+      <h1 class="text-2xl tracking-wider sm:text-3xl">{frontmatter.title}</h1>
+      <slot />
+    </section>
+  </main>
+  <Footer />
+</Layout>