@astro-minimax/core 0.1.0

package/src/components/blog/EditPost.astro

@@ -0,0 +1,59 @@
+---
+import type { CollectionEntry } from "astro:content";
+import IconEdit from "../../assets/icons/IconEdit.svg";
+import { SITE } from "@/config";
+
+type Props = {
+  hideEditPost?: CollectionEntry<"blog">["data"]["hideEditPost"];
+  class?: string;
+  post: CollectionEntry<"blog">;
+};
+
+const { hideEditPost, post, class: className = "" } = Astro.props;
+
+const editHref = `${SITE.editPost.url}${post.filePath}`;
+const historyHref = SITE.editPost.url
+  ? `${SITE.editPost.url.replace("/edit/", "/commits/").replace(/\/$/, "")}/${post.filePath}`
+  : "";
+const showEditPost =
+  SITE.editPost.enabled && !hideEditPost && editHref.trim() !== "";
+---
+
+{
+  showEditPost && (
+    <span class:list={["flex justify-baseline gap-3", className]}>
+      <a
+        href={editHref}
+        target="_blank"
+        rel="noopener noreferrer"
+        class="flex items-center gap-1.5 opacity-80 hover:text-accent"
+      >
+        <IconEdit class="inline-block" />
+        <span>{SITE.editPost.text}</span>
+      </a>
+      {historyHref && (
+        <a
+          href={historyHref}
+          target="_blank"
+          rel="noopener noreferrer"
+          class="flex items-center gap-1.5 opacity-80 hover:text-accent"
+          title="Version history"
+        >
+          <svg
+            class="inline-block 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" />
+            <polyline points="12 6 12 12 16 14" />
+          </svg>
+          <span>History</span>
+        </a>
+      )}
+    </span>
+  )
+}

package/src/components/blog/FloatingTOC.astro

@@ -0,0 +1,260 @@
+---
+/**
+ * FloatingTOC - A floating table of contents that appears on the right side
+ * Features:
+ * - Vertical list style
+ * - Highlights active section while scrolling
+ * - Smooth scrolling
+ * - Idle state: Minimalist bars
+ * - Hover state: Full text
+ * - Auto-expand active section
+ */
+import { type TocHeading, buildNestedHeadings } from "../../utils/toc";
+
+type Props = {
+  headings: TocHeading[];
+};
+
+const { headings } = Astro.props;
+
+const nestedHeadings = buildNestedHeadings(headings);
+---
+
+<aside
+  class="floating-toc-container group/container fixed top-32 left-[calc(50%+28rem)] z-20 hidden flex-col items-start gap-2 xl:flex"
+  aria-label="文章目录"
+  data-floating-toc
+>
+  {/* Invisible Hover Area: Extends coverage to make hover more stable */}
+  <div class="absolute -inset-8 z-[-1] min-w-[200px]"></div>
+
+  <div
+    class="floating-toc-panel relative flex w-auto flex-col items-start gap-1 bg-transparent p-0"
+  >
+    <nav class="toc-nav max-h-[70vh] pr-1 pl-1">
+      <ul class="flex flex-col items-start gap-3">
+        {
+          nestedHeadings.map(heading => (
+            <li
+              class="toc-item flex flex-col items-start"
+              data-slug={heading.slug}
+            >
+              <a
+                href={`#${heading.slug}`}
+                class="toc-link group/link relative block flex min-h-[16px] items-center transition-all duration-300"
+                data-toc-slug={heading.slug}
+              >
+                {/* Bar: Visible in Idle, transitions to 0 width in Container Hover */}
+                <span class="toc-bar block h-1 w-[48px] rounded-sm bg-muted transition-all duration-300 group-hover/container:w-0 group-hover/container:opacity-0 group-hover/link:bg-accent group-data-[active=true]/link:bg-accent" />
+
+                {/* Text: Hidden in Idle, Visible in Container Hover */}
+                <span class="toc-text text-muted-foreground pointer-events-none absolute left-0 -translate-x-2 text-sm whitespace-nowrap opacity-0 transition-all duration-300 group-hover/container:pointer-events-auto group-hover/container:translate-x-0 group-hover/container:opacity-100 group-hover/link:text-accent group-data-[active=true]/link:font-medium group-data-[active=true]/link:text-accent">
+                  {heading.text}
+                </span>
+              </a>
+
+              {heading.children.length > 0 && (
+                <ul class="toc-sublist mt-3 hidden flex-col items-start gap-2 border-l border-border/0 pl-1">
+                  {heading.children.map((subHeading: TocHeading) => (
+                    <li data-slug={subHeading.slug} class="flex justify-start">
+                      <a
+                        href={`#${subHeading.slug}`}
+                        class="toc-link group/link relative block flex min-h-[16px] items-center transition-all duration-300"
+                        data-toc-slug={subHeading.slug}
+                      >
+                        {/* Sub-item Bar: shorter width */}
+                        <span class="toc-bar block h-1 w-[38px] rounded-sm bg-muted transition-all duration-300 group-hover/container:w-0 group-hover/container:opacity-0 group-hover/link:bg-accent group-data-[active=true]/link:bg-accent" />
+
+                        {/* Sub-item Text */}
+                        <span class="toc-text text-muted-foreground pointer-events-none absolute left-0 -translate-x-2 text-xs whitespace-nowrap opacity-0 transition-all duration-300 group-hover/container:pointer-events-auto group-hover/container:translate-x-0 group-hover/container:opacity-100 group-hover/link:text-accent group-data-[active=true]/link:font-medium group-data-[active=true]/link:text-accent">
+                          {subHeading.text}
+                        </span>
+                      </a>
+                    </li>
+                  ))}
+                </ul>
+              )}
+            </li>
+          ))
+        }
+      </ul>
+    </nav>
+  </div>
+</aside>
+
+<style>
+  /* Ensure sublists are hidden by default */
+  .toc-sublist {
+    display: none;
+  }
+
+  /* Show sublist when parent is active */
+  .toc-item.active .toc-sublist {
+    display: flex;
+    animation: fadeIn 0.3s ease;
+  }
+
+  /* Also show sublist if a child is active */
+  .toc-item:has(.toc-sublist .toc-link.active) .toc-sublist {
+    display: flex;
+  }
+
+  @keyframes fadeIn {
+    from {
+      opacity: 0;
+      transform: translateY(-2px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  /* Scrollbar hiding */
+  .toc-nav {
+    scrollbar-width: none; /* Firefox */
+    -ms-overflow-style: none; /* IE/Edge */
+  }
+  .toc-nav::-webkit-scrollbar {
+    display: none; /* Chrome/Safari/Opera */
+  }
+</style>
+
+<script>
+  function initFloatingTOC() {
+    const tocContainer = document.querySelector("[data-floating-toc]");
+    if (!tocContainer) return;
+
+    const tocLinks =
+      tocContainer.querySelectorAll<HTMLAnchorElement>("a[data-toc-slug]");
+    const tocItems = tocContainer.querySelectorAll(".toc-item");
+    const indicator = tocContainer.querySelector<HTMLElement>(".toc-progress");
+
+    // Intersection Observer
+    const observerOptions = {
+      root: null,
+      rootMargin: "-100px 0px -66% 0px",
+      threshold: 0,
+    };
+
+    const headingElements = new Map<string, Element>();
+
+    tocLinks.forEach(link => {
+      const slug = link.dataset.tocSlug;
+      if (slug) {
+        const heading = document.getElementById(slug);
+        if (heading) {
+          headingElements.set(slug, heading);
+        }
+      }
+    });
+
+    const observer = new IntersectionObserver(entries => {
+      entries.forEach(entry => {
+        if (entry.isIntersecting) {
+          setActive(entry.target.id);
+        }
+      });
+    }, observerOptions);
+
+    headingElements.forEach(element => {
+      observer.observe(element);
+    });
+
+    function setActive(activeSlug: string) {
+      // 1. Update Active Links
+      tocLinks.forEach(link => {
+        const isActive = link.dataset.tocSlug === activeSlug;
+        if (isActive) {
+          link.setAttribute("data-active", "true");
+          link.classList.add("active");
+        } else {
+          link.removeAttribute("data-active");
+          link.classList.remove("active");
+        }
+      });
+
+      // 2. Update Active Items (for sublist expansion)
+      tocItems.forEach(item => {
+        const slug = item.getAttribute("data-slug");
+        const hasActiveChild = item.querySelector(`.toc-link.active`);
+
+        // If this item is active OR has an active child, mark as active
+        if (slug === activeSlug || hasActiveChild) {
+          item.classList.add("active");
+        } else {
+          // Only remove if it's not the parent of the active item
+          // Actually, we re-evaluate all.
+          // Simpler: Just remove active from all, then add to the one matching activeSlug's parent h2
+          item.classList.remove("active");
+        }
+      });
+
+      // Re-apply active to parent of currently active link
+      if (activeSlug && tocContainer) {
+        const activeLink = tocContainer.querySelector(
+          `.toc-link[data-toc-slug="${activeSlug}"]`
+        );
+        if (activeLink) {
+          const parentItem = activeLink.closest(".toc-item");
+          if (parentItem) {
+            parentItem.classList.add("active");
+          }
+        }
+      }
+      if (indicator) {
+        const winScroll =
+          document.body.scrollTop || document.documentElement.scrollTop;
+        const height =
+          document.documentElement.scrollHeight -
+          document.documentElement.clientHeight;
+        const scrolled = (winScroll / height) * 100;
+        indicator.style.height = `${scrolled}%`;
+      }
+    }
+
+    // Scroll Progress Update (Continuous)
+    document.addEventListener("scroll", () => {
+      if (indicator) {
+        const winScroll =
+          document.body.scrollTop || document.documentElement.scrollTop;
+        const height =
+          document.documentElement.scrollHeight -
+          document.documentElement.clientHeight;
+        const scrolled = (winScroll / height) * 100;
+        indicator.style.height = `${scrolled}%`;
+      }
+    });
+
+    // Smooth Scroll Click Handler
+    tocLinks.forEach(link => {
+      link.addEventListener("click", e => {
+        e.preventDefault();
+        const slug = link.dataset.tocSlug;
+        if (slug) {
+          const heading = document.getElementById(slug);
+          if (heading) {
+            history.pushState(null, "", `#${slug}`);
+            const headerOffset = 80;
+            const elementPosition = heading.getBoundingClientRect().top;
+            const offsetPosition =
+              elementPosition + window.pageYOffset - headerOffset;
+            window.scrollTo({
+              top: offsetPosition,
+              behavior: "smooth",
+            });
+            setActive(slug);
+          }
+        }
+      });
+    });
+
+    // Cleanup
+    document.addEventListener("astro:before-swap", () => {
+      observer.disconnect();
+    });
+  }
+
+  document.addEventListener("astro:page-load", initFloatingTOC);
+  initFloatingTOC();
+</script>

package/src/components/blog/InlineTOC.astro

@@ -0,0 +1,223 @@
+---
+/**
+ * InlineTOC - An expandable table of contents below the title
+ * Features:
+ * - Expand/collapse toggle
+ * - Nested heading structure
+ * - Click to navigate
+ */
+import { type TocHeading, buildNestedHeadings } from "../../utils/toc";
+
+type Props = {
+  headings: TocHeading[];
+};
+
+const { headings } = Astro.props;
+
+const nestedHeadings = buildNestedHeadings(headings);
+---
+
+<div
+  class="inline-toc bg-card/50 mt-8 mb-8 rounded-lg border border-border backdrop-blur-sm"
+  data-inline-toc
+>
+  <button
+    type="button"
+    class="inline-toc-toggle flex w-full items-center justify-between rounded-lg px-4 py-3 text-sm font-medium text-foreground transition-colors hover:bg-muted/50 focus:outline-none focus-visible:ring-2 focus-visible:ring-accent"
+    aria-expanded="false"
+    aria-controls="inline-toc-content"
+    data-toc-toggle
+  >
+    <div class="flex items-center gap-2">
+      <svg
+        class="text-muted-foreground h-4 w-4"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+      >
+        <path d="M3 12h18M3 6h18M3 18h18"></path>
+      </svg>
+      <span>目录</span>
+      <span
+        class="text-muted-foreground rounded-md bg-muted px-1.5 py-0.5 text-xs"
+      >
+        {nestedHeadings.length} 章节
+      </span>
+    </div>
+    <svg
+      class="text-muted-foreground h-4 w-4 transition-transform duration-200"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      data-toggle-icon
+    >
+      <path d="M6 9l6 6 6-6"></path>
+    </svg>
+  </button>
+
+  <div
+    id="inline-toc-content"
+    class="inline-toc-content grid overflow-hidden transition-[grid-template-rows] duration-300 ease-out"
+    style="grid-template-rows: 0fr;"
+    data-toc-content
+  >
+    <nav class="bg-card/30 min-h-0 border-t border-border">
+      <ul class="space-y-1 px-4 py-2">
+        {
+          nestedHeadings.map(heading => (
+            <li>
+              <div class="group flex items-center justify-between">
+                <a
+                  href={`#${heading.slug}`}
+                  class="inline-toc-link text-muted-foreground block flex-1 truncate rounded-md px-2 py-1.5 text-sm font-medium transition-colors hover:bg-accent/5 hover:text-accent"
+                  data-toc-slug={heading.slug}
+                  data-toc-depth={heading.depth}
+                >
+                  {heading.text}
+                </a>
+                {heading.children.length > 0 && (
+                  <button
+                    type="button"
+                    class="text-muted-foreground rounded-md p-1 transition-colors hover:text-accent"
+                    aria-label="Toggle subheadings"
+                    onclick={`this.parentElement.nextElementSibling.classList.toggle('hidden'); this.querySelector('svg').classList.toggle('rotate-180')`}
+                  >
+                    <svg
+                      class="h-3.5 w-3.5 transition-transform duration-200"
+                      viewBox="0 0 24 24"
+                      fill="none"
+                      stroke="currentColor"
+                      stroke-width="2"
+                    >
+                      <path d="M6 9l6 6 6-6" />
+                    </svg>
+                  </button>
+                )}
+              </div>
+
+              {heading.children.length > 0 && (
+                <ul class="mt-1 ml-2 hidden space-y-1 border-l border-border/50 pl-4">
+                  {heading.children.map((subHeading: TocHeading) => (
+                    <li>
+                      <a
+                        href={`#${subHeading.slug}`}
+                        class="inline-toc-link text-muted-foreground block truncate rounded-md px-2 py-1 text-xs transition-colors hover:bg-accent/5 hover:text-accent"
+                        data-toc-slug={subHeading.slug}
+                        data-toc-depth={subHeading.depth}
+                      >
+                        {subHeading.text}
+                      </a>
+                    </li>
+                  ))}
+                </ul>
+              )}
+            </li>
+          ))
+        }
+      </ul>
+    </nav>
+  </div>
+</div>
+
+<style>
+  .inline-toc-toggle[aria-expanded="true"] [data-toggle-icon] {
+    transform: rotate(180deg);
+  }
+
+  .inline-toc-content[data-expanded="true"] {
+    grid-template-rows: 1fr;
+  }
+
+  .inline-toc-link.active {
+    color: var(--accent);
+    background-color: color-mix(in srgb, var(--accent) 10%, transparent);
+  }
+</style>
+
+<script>
+  function initInlineTOC() {
+    // Only initialize once per container
+    const tocContainers = document.querySelectorAll("[data-inline-toc]");
+
+    tocContainers.forEach(tocContainer => {
+      if (tocContainer.hasAttribute("data-initialized")) return;
+      tocContainer.setAttribute("data-initialized", "true");
+
+      const toggle = tocContainer.querySelector("[data-toc-toggle]");
+      const content = tocContainer.querySelector("[data-toc-content]");
+      const links = tocContainer.querySelectorAll(".inline-toc-link");
+
+      if (!toggle || !content) return;
+
+      // Toggle expand/collapse
+      const handleToggle = (e: Event) => {
+        e.preventDefault();
+        e.stopPropagation();
+        const isExpanded = toggle.getAttribute("aria-expanded") === "true";
+        toggle.setAttribute("aria-expanded", isExpanded ? "false" : "true");
+        content.setAttribute("data-expanded", isExpanded ? "false" : "true");
+        (content as HTMLElement).style.gridTemplateRows = isExpanded
+          ? "0fr"
+          : "1fr";
+      };
+
+      toggle.addEventListener("click", handleToggle);
+
+      // Track active section (optional for InlineTOC, but good for consistency)
+      const observerOptions = {
+        root: null,
+        rootMargin: "-80px 0px -70% 0px",
+        threshold: 0,
+      };
+
+      const headingElements = new Map();
+
+      links.forEach(link => {
+        const slug = (link as HTMLElement).dataset.tocSlug;
+        if (slug) {
+          const heading = document.getElementById(slug);
+          if (heading) {
+            headingElements.set(slug, heading);
+          }
+        }
+      });
+
+      const observer = new IntersectionObserver(entries => {
+        entries.forEach(entry => {
+          const slug = entry.target.id;
+
+          if (entry.isIntersecting) {
+            updateActiveLink(slug);
+          }
+        });
+      }, observerOptions);
+
+      headingElements.forEach(element => {
+        observer.observe(element);
+      });
+
+      function updateActiveLink(activeSlug: string) {
+        links.forEach(link => {
+          const isActive = (link as HTMLElement).dataset.tocSlug === activeSlug;
+          link.classList.toggle("active", isActive);
+        });
+      }
+
+      // Clean up observer when navigating away (Astro specific)
+      document.addEventListener(
+        "astro:before-swap",
+        () => {
+          observer.disconnect();
+        },
+        { once: true }
+      );
+    });
+  }
+
+  // Handle initial load and view transitions
+  document.addEventListener("astro:page-load", initInlineTOC);
+  // Also run on DOMContentLoaded for first paint if not using View Transitions or as fallback
+  document.addEventListener("DOMContentLoaded", initInlineTOC);
+</script>