@astro-minimax/core 0.1.0

package/src/components/blog/PostActions.astro

@@ -0,0 +1,306 @@
+---
+// PostActions - Like and Bookmark functionality
+// Uses localStorage for persistence on static sites
+---
+
+<div
+  class="post-actions mt-6 flex flex-wrap items-center justify-center gap-4"
+  data-pagefind-ignore
+>
+  {/* Like Button */}
+  <button
+    id="like-btn"
+    class="action-btn group text-muted-foreground flex items-center gap-2 rounded-full border border-border bg-background/50 px-4 py-2 text-sm transition-all hover:border-accent hover:text-accent"
+    aria-label="Like this post"
+    aria-pressed="false"
+  >
+    <svg
+      class="size-5 transition-transform group-hover:scale-110"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    >
+      <path
+        d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"
+      ></path>
+    </svg>
+    <span class="like-text">喜欢</span>
+    <span id="like-count" class="rounded-full bg-muted px-2 text-xs">0</span>
+  </button>
+
+  {/* Bookmark Button */}
+  <button
+    id="bookmark-btn"
+    class="action-btn group text-muted-foreground flex items-center gap-2 rounded-full border border-border bg-background/50 px-4 py-2 text-sm transition-all hover:border-accent hover:text-accent"
+    aria-label="Bookmark this post"
+    aria-pressed="false"
+  >
+    <svg
+      class="size-5 transition-transform group-hover:scale-110"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    >
+      <path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"></path>
+    </svg>
+    <span class="bookmark-text">收藏</span>
+  </button>
+</div>
+
+<script is:inline>
+  const LIKES_KEY = "blog_likes";
+  const BOOKMARKS_KEY = "blog_bookmarks";
+
+  function getPostId() {
+    return window.location.pathname.replace(/\/$/, "");
+  }
+
+  function getLikes() {
+    try {
+      const stored = localStorage.getItem(LIKES_KEY);
+      return stored ? JSON.parse(stored) : {};
+    } catch {
+      return {};
+    }
+  }
+
+  function getBookmarks() {
+    try {
+      const stored = localStorage.getItem(BOOKMARKS_KEY);
+      return stored ? JSON.parse(stored) : [];
+    } catch {
+      return [];
+    }
+  }
+
+  function saveLikes(likes) {
+    localStorage.setItem(LIKES_KEY, JSON.stringify(likes));
+  }
+
+  function saveBookmarks(bookmarks) {
+    localStorage.setItem(BOOKMARKS_KEY, JSON.stringify(bookmarks));
+  }
+
+  function isLiked(postId) {
+    const likedPosts = localStorage.getItem("blog_liked_posts");
+    if (likedPosts) {
+      try {
+        const posts = JSON.parse(likedPosts);
+        return posts.includes(postId);
+      } catch {
+        return false;
+      }
+    }
+    return false;
+  }
+
+  function setLiked(postId, liked) {
+    let posts = [];
+
+    const stored = localStorage.getItem("blog_liked_posts");
+    if (stored) {
+      try {
+        posts = JSON.parse(stored);
+      } catch {
+        posts = [];
+      }
+    }
+    if (liked && !posts.includes(postId)) {
+      posts.push(postId);
+    } else if (!liked) {
+      posts = posts.filter(id => id !== postId);
+    }
+    localStorage.setItem("blog_liked_posts", JSON.stringify(posts));
+  }
+
+  function isBookmarked(postId) {
+    return getBookmarks().includes(postId);
+  }
+
+  function initPostActions() {
+    const likeBtn = document.getElementById("like-btn");
+    const bookmarkBtn = document.getElementById("bookmark-btn");
+    const likeCount = document.getElementById("like-count");
+    const likeText = likeBtn?.querySelector(".like-text");
+    const bookmarkText = bookmarkBtn?.querySelector(".bookmark-text");
+
+    if (!likeBtn || !bookmarkBtn || !likeCount) return;
+
+    const postId = getPostId();
+
+    // Initialize like state
+    const likes = getLikes();
+    const currentLikes = likes[postId] || 0;
+    likeCount.textContent = String(currentLikes);
+
+    const userLiked = isLiked(postId);
+    if (userLiked) {
+      likeBtn.classList.add(
+        "liked",
+        "border-accent",
+        "text-accent",
+        "bg-accent/10"
+      );
+      likeBtn.setAttribute("aria-pressed", "true");
+      if (likeText) likeText.textContent = "已喜欢";
+      // Fill heart
+      const heart = likeBtn.querySelector("svg path");
+      if (heart) {
+        heart.setAttribute("fill", "currentColor");
+      }
+    }
+
+    // Initialize bookmark state
+    if (isBookmarked(postId)) {
+      bookmarkBtn.classList.add(
+        "bookmarked",
+        "border-accent",
+        "text-accent",
+        "bg-accent/10"
+      );
+      bookmarkBtn.setAttribute("aria-pressed", "true");
+      if (bookmarkText) bookmarkText.textContent = "已收藏";
+      // Fill bookmark
+      const bookmark = bookmarkBtn.querySelector("svg path");
+      if (bookmark) {
+        bookmark.setAttribute("fill", "currentColor");
+      }
+    }
+
+    // Like button click handler
+    likeBtn.addEventListener("click", () => {
+      const likes = getLikes();
+      const userLiked = isLiked(postId);
+
+      if (userLiked) {
+        // Unlike
+        likes[postId] = Math.max(0, (likes[postId] || 1) - 1);
+        setLiked(postId, false);
+        likeBtn.classList.remove(
+          "liked",
+          "border-accent",
+          "text-accent",
+          "bg-accent/10"
+        );
+        likeBtn.setAttribute("aria-pressed", "false");
+        if (likeText) likeText.textContent = "喜欢";
+        // Unfill heart
+        const heart = likeBtn.querySelector("svg path");
+        if (heart) {
+          heart.setAttribute("fill", "none");
+        }
+      } else {
+        // Like
+        likes[postId] = (likes[postId] || 0) + 1;
+        setLiked(postId, true);
+        likeBtn.classList.add(
+          "liked",
+          "border-accent",
+          "text-accent",
+          "bg-accent/10"
+        );
+        likeBtn.setAttribute("aria-pressed", "true");
+        if (likeText) likeText.textContent = "已喜欢";
+        // Fill heart
+        const heart = likeBtn.querySelector("svg path");
+        if (heart) {
+          heart.setAttribute("fill", "currentColor");
+        }
+        // Add animation
+        likeBtn.classList.add("animate-pulse");
+        setTimeout(() => likeBtn.classList.remove("animate-pulse"), 300);
+      }
+
+      saveLikes(likes);
+      likeCount.textContent = String(likes[postId] || 0);
+    });
+
+    // Bookmark button click handler
+    bookmarkBtn.addEventListener("click", () => {
+      const bookmarks = getBookmarks();
+      const isCurrentlyBookmarked = bookmarks.includes(postId);
+
+      if (isCurrentlyBookmarked) {
+        // Remove bookmark
+        const newBookmarks = bookmarks.filter(id => id !== postId);
+        saveBookmarks(newBookmarks);
+        bookmarkBtn.classList.remove(
+          "bookmarked",
+          "border-accent",
+          "text-accent",
+          "bg-accent/10"
+        );
+        bookmarkBtn.setAttribute("aria-pressed", "false");
+        if (bookmarkText) bookmarkText.textContent = "收藏";
+        // Unfill bookmark
+        const bookmark = bookmarkBtn.querySelector("svg path");
+        if (bookmark) {
+          bookmark.setAttribute("fill", "none");
+        }
+      } else {
+        // Add bookmark
+        bookmarks.push(postId);
+        saveBookmarks(bookmarks);
+        bookmarkBtn.classList.add(
+          "bookmarked",
+          "border-accent",
+          "text-accent",
+          "bg-accent/10"
+        );
+        bookmarkBtn.setAttribute("aria-pressed", "true");
+        if (bookmarkText) bookmarkText.textContent = "已收藏";
+        // Fill bookmark
+        const bookmark = bookmarkBtn.querySelector("svg path");
+        if (bookmark) {
+          bookmark.setAttribute("fill", "currentColor");
+        }
+        // Add animation
+        bookmarkBtn.classList.add("animate-pulse");
+        setTimeout(() => bookmarkBtn.classList.remove("animate-pulse"), 300);
+      }
+    });
+  }
+
+  // Initialize on page load
+  initPostActions();
+
+  // Re-initialize after page transitions
+  document.addEventListener("astro:page-load", initPostActions);
+</script>
+
+<style is:global>
+  .post-actions .action-btn {
+    transition: all 0.2s ease;
+  }
+
+  .post-actions .action-btn:hover {
+    transform: translateY(-2px);
+  }
+
+  .post-actions .action-btn:active {
+    transform: translateY(0);
+  }
+
+  .post-actions .action-btn.liked svg,
+  .post-actions .action-btn.bookmarked svg {
+    animation: heartbeat 0.3s ease;
+  }
+
+  @keyframes heartbeat {
+    0% {
+      transform: scale(1);
+    }
+    50% {
+      transform: scale(1.2);
+    }
+    100% {
+      transform: scale(1);
+    }
+  }
+</style>

package/src/components/blog/RelatedPosts.astro

@@ -0,0 +1,60 @@
+---
+import type { CollectionEntry } from "astro:content";
+import { getLocalizedPostPath } from "../../utils/getPath";
+import Datetime from "../../components/ui/Datetime.astro";
+
+interface Props {
+  posts: CollectionEntry<"blog">[];
+  lang?: string;
+  title?: string;
+}
+
+const {
+  posts,
+  lang = "zh",
+  title = lang === "zh" ? "相关推荐" : "Related Posts",
+} = Astro.props;
+---
+
+{
+  posts.length > 0 && (
+    <div class="mt-8" data-pagefind-ignore>
+      <h3 class="mb-4 flex items-center gap-2 text-lg font-semibold text-foreground">
+        <svg
+          class="size-5 text-accent"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        >
+          <path d="M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z" />
+        </svg>
+        {title}
+      </h3>
+      <div class="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
+        {posts.map(post => (
+          <a
+            href={getLocalizedPostPath(lang, post.id)}
+            class="group flex flex-col rounded-lg border border-border bg-background/50 p-4 transition-all duration-200 hover:border-accent/50 hover:bg-muted/30 hover:shadow-sm"
+          >
+            <h4 class="line-clamp-2 text-sm font-medium text-foreground transition-colors group-hover:text-accent">
+              {post.data.title}
+            </h4>
+            <p class="text-muted-foreground mt-1.5 line-clamp-2 text-xs">
+              {post.data.description}
+            </p>
+            <div class="mt-auto pt-2">
+              <Datetime
+                pubDatetime={post.data.pubDatetime}
+                modDatetime={post.data.modDatetime}
+                lang={lang}
+              />
+            </div>
+          </a>
+        ))}
+      </div>
+    </div>
+  )
+}

package/src/components/blog/SeriesNav.astro

@@ -0,0 +1,176 @@
+---
+import type { CollectionEntry } from "astro:content";
+import { getCollection } from "astro:content";
+import { getPostsByLang } from "../../utils/getPostsByLang";
+import { getSeriesByName } from "../../utils/getSeriesData";
+import { getLocalizedPostPath } from "../../utils/getPath";
+import { t } from "../../utils/i18n";
+
+interface Props {
+  post: CollectionEntry<"blog">;
+  lang?: string;
+}
+
+const { post, lang = "zh" } = Astro.props;
+const series = post.data.series;
+
+if (!series) return;
+
+const allPosts = await getCollection("blog", ({ data }) => !data.draft);
+const langPosts = getPostsByLang(allPosts, lang);
+const seriesInfo = getSeriesByName(langPosts, series.name);
+
+if (!seriesInfo || seriesInfo.totalPosts < 2) return;
+
+const currentOrder = series.order;
+const seriesSlug = seriesInfo.slug;
+const progressPct = (currentOrder / seriesInfo.totalPosts) * 100;
+const orderStr = String(currentOrder).padStart(2, "0");
+const totalStr = String(seriesInfo.totalPosts).padStart(2, "0");
+---
+
+<nav
+  class="series-nav my-6 rounded-xl border p-4 sm:p-5"
+  aria-label={`${t("series.title", lang)}: ${series.name}`}
+>
+  {/* Header */}
+  <div class="mb-3 flex items-center justify-between gap-2">
+    <a
+      href={`/${lang}/series/${encodeURIComponent(seriesSlug)}/`}
+      class="series-link flex items-center gap-2 text-sm font-bold"
+    >
+      <svg class="series-icon size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+        <path d="M4 6h16M4 12h16M4 18h10" />
+        <circle cx="20" cy="18" r="2" fill="currentColor" stroke="none" />
+      </svg>
+      <span>{series.name}</span>
+    </a>
+    <span class="series-progress font-mono text-xs tracking-wider">
+      {orderStr}<span class="mx-0.5 opacity-40">/</span>{totalStr}
+    </span>
+  </div>
+
+  {/* Progress bar */}
+  <div class="series-track relative mb-4 h-[3px] w-full overflow-visible rounded-full">
+    <div class="series-fill absolute inset-y-0 left-0 rounded-full" style={`width: ${progressPct}%`}>
+      <span class="series-pulse-dot"></span>
+    </div>
+  </div>
+
+  {/* Post list */}
+  <ol class="space-y-0.5">
+    {
+      seriesInfo.posts.map((p, idx) => {
+        const isCurrent = p.id === post.id;
+        const href = getLocalizedPostPath(lang, p.id, p.filePath);
+        const num = String(idx + 1).padStart(2, "0");
+
+        return (
+          <li>
+            {isCurrent ? (
+              <span class="series-item series-item--active flex items-center gap-2.5 rounded-md px-3 py-1.5 text-sm font-medium">
+                <span class="font-mono text-xs opacity-70">{num}</span>
+                <span class="truncate">{p.data.title}</span>
+              </span>
+            ) : (
+              <a
+                href={href}
+                class="series-item flex items-center gap-2.5 rounded-md px-3 py-1.5 text-sm"
+              >
+                <span class="font-mono text-xs opacity-40">{num}</span>
+                <span class="truncate">{p.data.title}</span>
+              </a>
+            )}
+          </li>
+        );
+      })
+    }
+  </ol>
+</nav>
+
+<style>
+  .series-nav {
+    background: linear-gradient(135deg, var(--series-bg-from), var(--series-bg-to));
+    border-color: var(--series-border);
+    box-shadow: 0 0 15px var(--series-glow);
+    transition:
+      background-color 0.35s cubic-bezier(0.4, 0, 0.2, 1),
+      border-color 0.35s cubic-bezier(0.4, 0, 0.2, 1),
+      box-shadow 0.35s cubic-bezier(0.4, 0, 0.2, 1),
+      color 0.35s cubic-bezier(0.4, 0, 0.2, 1);
+  }
+
+  .series-link {
+    color: var(--foreground);
+    transition: color 0.2s;
+  }
+  .series-link:hover {
+    color: var(--accent);
+  }
+
+  .series-icon {
+    color: var(--accent);
+  }
+
+  .series-progress {
+    color: var(--foreground-soft);
+  }
+
+  /* Track */
+  .series-track {
+    background-color: var(--muted);
+  }
+  .series-fill {
+    background-color: var(--accent);
+    transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
+  }
+
+  /* Pulse dot */
+  .series-pulse-dot {
+    position: absolute;
+    right: -4px;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background-color: var(--series-pulse);
+    animation: pulse-glow 2s ease-in-out infinite;
+  }
+
+  @keyframes pulse-glow {
+    0%, 100% {
+      box-shadow: 0 0 4px 1px var(--series-glow);
+      opacity: 1;
+    }
+    50% {
+      box-shadow: 0 0 10px 4px var(--series-glow);
+      opacity: 0.7;
+    }
+  }
+
+  /* List items */
+  .series-item {
+    color: var(--foreground-soft);
+    transition:
+      color 0.2s,
+      background-color 0.2s;
+  }
+  a.series-item:hover {
+    color: var(--accent);
+    background-color: var(--muted);
+  }
+
+  .series-item--active {
+    color: var(--accent);
+    background-color: color-mix(in srgb, var(--accent) 8%, transparent);
+    border-left: 2px solid var(--accent);
+    padding-left: calc(0.75rem - 2px);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .series-pulse-dot {
+      animation: none;
+    }
+  }
+</style>

package/src/components/blog/ShareLinks.astro

@@ -0,0 +1,26 @@
+---
+import { SHARE_LINKS } from "@/constants";
+import LinkButton from "../../components/ui/LinkButton.astro";
+
+const URL = Astro.url;
+---
+
+{
+  SHARE_LINKS.length > 0 && (
+    <div class="flex flex-none flex-col items-center justify-center gap-1 md:items-start">
+      <span class="italic">Share this post on:</span>
+      <div class="text-center">
+        {SHARE_LINKS.map(social => (
+          <LinkButton
+            href={`${social.href + URL}`}
+            class="scale-90 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>
+    </div>
+  )
+}

package/src/components/nav/BackButton.astro

@@ -0,0 +1,37 @@
+---
+import IconChevronLeft from "../../assets/icons/IconChevronLeft.svg";
+import LinkButton from "../../components/ui/LinkButton.astro";
+import { SITE } from "@/config";
+---
+
+{
+  SITE.showBackButton && (
+    <div class="app-layout flex items-center justify-start">
+      <LinkButton
+        id="back-button"
+        href="/"
+        class="focus-outline -ms-2 mt-8 mb-2 hover:text-foreground/75"
+      >
+        <IconChevronLeft class="inline-block size-6 rtl:rotate-180" />
+        <span>Go back</span>
+      </LinkButton>
+    </div>
+  )
+}
+
+<script>
+  /* Update Search Praam */
+  function updateGoBackUrl() {
+    const backButton: HTMLAnchorElement | null =
+      document.querySelector("#back-button");
+
+    const backUrl = sessionStorage.getItem("backUrl");
+
+    if (backUrl && backButton) {
+      backButton.href = backUrl;
+    }
+  }
+
+  document.addEventListener("astro:page-load", updateGoBackUrl);
+  updateGoBackUrl();
+</script>