@astro-minimax/core 0.1.0

package/src/components/nav/BackToTopButton.astro

@@ -0,0 +1,223 @@
+---
+import IconArrowNarrowUp from "../../assets/icons/IconArrowNarrowUp.svg";
+---
+
+<!-- There can't be a filter on parent element, or it will break `fixed` -->
+<div class="back-to-top-wrapper hidden lg:block">
+  <div
+    id="back-to-top-btn"
+    class="back-to-top-btn hide flex items-center overflow-hidden rounded-2xl transition"
+    onclick="backToTop()"
+  >
+    <button aria-label="Back to Top" class="h-[3rem] w-[3rem] rounded-full">
+      <IconArrowNarrowUp class="mx-auto" />
+    </button>
+  </div>
+</div>
+
+<style lang="stylus">
+.back-to-top-wrapper
+    width: 3rem
+    height: 3rem
+    position: absolute
+    right: 0
+    top: 0
+    pointer-events: none
+
+.back-to-top-btn
+    color: #394E6A
+    font-size: 1.75rem
+    font-weight: bold
+    position: fixed
+    bottom: 2rem
+    right: 2rem
+    opacity: 1
+    cursor: pointer
+    pointer-events: auto
+    z-index: 1000
+    transition: all 0.3s ease
+    border-radius: 50%
+    background-color: #ffffff
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15)
+    border: none
+    width: 3rem
+    height: 3rem
+    svg
+        font-size: 1.25rem
+    &.hide
+        transform: scale(0.9)
+        opacity: 0
+        pointer-events: none
+    &:active
+      transform: scale(0.9)
+    &:hover
+        transform: scale(1.05)
+        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2)
+        background-color: #D2D7DE
+        border-color: none
+
+/* 暗色主题样式 */
+:global(.dark) .back-to-top-btn
+    background-color: #2B2D38
+    border: none
+    color: #ffffff
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15)
+    
+    &:hover
+        background-color: #3a3d4a
+        border-color: none
+        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2)
+
+/* 响应式调整 */
+@media (max-width: 1024px)
+    .back-to-top-btn
+        right: 1rem
+        bottom: 10rem
+        border-radius: 50%
+
+@media (max-width: 768px)
+    .back-to-top-btn
+        right: 0.75rem
+        bottom: 6rem
+        width: 2.75rem
+        height: 2.75rem
+        font-size: 1.5rem
+        border-radius: 50%
+        svg
+            font-size: 1.25rem
+
+@media (max-width: 480px)
+    .back-to-top-btn
+        right: 0.5rem
+        bottom: 4rem
+        width: 2.5rem
+        height: 2.5rem
+        font-size: 1.25rem
+        border-radius: 50%
+        svg
+            font-size: 1rem
+
+/* 高缩放比例适配 */
+@media (min-resolution: 2dppx)
+    .back-to-top-btn
+        right: max(0.5rem, 2rem - 2vw)
+        bottom: max(9rem, 10rem - 5vh)
+
+/* 超小屏幕适配 */
+@media (max-width: 360px)
+    .back-to-top-btn
+        right: 0.25rem
+        bottom: 5rem
+        width: 2rem
+        height: 2rem
+        font-size: 1rem
+        border-radius: 50%
+        svg
+            font-size: 0.875rem
+
+/* 横屏模式适配 */
+@media (orientation: landscape) and (max-height: 500px)
+    .back-to-top-btn
+        bottom: 8rem
+        right: 0.5rem
+
+/* 确保按钮始终在可视区域内 */
+.back-to-top-btn
+    /* 防止按钮被裁剪 */
+    min-width: 1.25rem
+    min-height: 1.25rem
+    /* 确保按钮有足够的点击区域 */
+    padding: 0.25rem
+    /* 防止按钮超出屏幕 */
+    max-width: 3rem
+    max-height: 3rem
+    /* 确保圆角在所有尺寸下都正确 */
+    border-radius: 50% !important
+
+/* 高DPI屏幕优化 */
+@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)
+    .back-to-top-btn
+        /* 确保在高DPI屏幕上清晰显示 */
+        image-rendering: -webkit-optimize-contrast
+        image-rendering: crisp-edges
+
+/* 极低分辨率适配 */
+@media (max-width: 320px)
+    .back-to-top-btn
+        right: 0.125rem
+        bottom: 4.5rem
+        width: 1.75rem
+        height: 1.75rem
+        font-size: 0.875rem
+        border-radius: 50%
+        svg
+            font-size: 0.75rem
+
+/* 确保按钮在容器内正确显示 */
+.back-to-top-wrapper
+    /* 确保容器不会裁剪内容 */
+    overflow: visible
+    /* 防止容器影响按钮定位 */
+    z-index: 999
+
+/* 按钮激活状态 */
+.back-to-top-btn:active
+    transform: scale(0.95)
+
+
+</style>
+
+<script is:raw is:inline>
+  window.backToTop = function () {
+    window.scroll({ top: 0, behavior: "smooth" });
+  };
+
+  // 响应式返回顶部按钮管理器
+  if (typeof window.BackToTopManager === "undefined") {
+    window.BackToTopManager = class BackToTopManager {
+      constructor() {
+        this.button = document.getElementById("back-to-top-btn");
+        this.wrapper = document.querySelector(".back-to-top-wrapper");
+        this.init();
+      }
+
+      init() {
+        if (!this.button || !this.wrapper) return;
+
+        this.setupScrollListener();
+      }
+
+      setupScrollListener() {
+        const updateVisibility = () => {
+          const scrollTop =
+            window.pageYOffset || document.documentElement.scrollTop;
+
+          // 当滚动超过200px时显示按钮
+          if (scrollTop > 200) {
+            this.button.classList.remove("hide");
+          } else {
+            this.button.classList.add("hide");
+          }
+        };
+
+        window.addEventListener("scroll", updateVisibility, { passive: true });
+      }
+
+      // 移除resize监听和位置更新逻辑，因为CSS媒体查询已经处理了响应式定位
+    };
+  }
+
+  // 页面加载完成后初始化
+  document.addEventListener("DOMContentLoaded", () => {
+    new BackToTopManager();
+  });
+
+  // 如果页面已经加载完成，立即初始化
+  if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", () => {
+      new BackToTopManager();
+    });
+  } else {
+    new BackToTopManager();
+  }
+</script>

package/src/components/nav/Breadcrumb.astro

@@ -0,0 +1,57 @@
+---
+// Remove current url path and remove trailing slash if exists
+const currentUrlPath = Astro.url.pathname.replace(/\/+$/, "");
+
+// Get url array from path
+// eg: /tags/tailwindcss => ['tags', 'tailwindcss']
+const breadcrumbList = currentUrlPath.split("/").slice(1);
+
+// if breadcrumb is Home > Posts > 1 <etc>
+// replace Posts with Posts (page number)
+if (breadcrumbList[0] === "posts") {
+  breadcrumbList.splice(0, 2, `Posts (page ${breadcrumbList[1] || 1})`);
+}
+
+// if breadcrumb is Home > Tags > [tag] > [page] <etc>
+// replace [tag] > [page] with [tag] (page number)
+if (breadcrumbList[0] === "tags" && !isNaN(Number(breadcrumbList[2]))) {
+  breadcrumbList.splice(
+    1,
+    3,
+    `${breadcrumbList[1]} ${Number(breadcrumbList[2]) === 1 ? "" : "(page " + breadcrumbList[2] + ")"}`
+  );
+}
+---
+
+<nav class="app-layout mt-8 mb-1" aria-label="breadcrumb">
+  <ul
+    class="font-light [&>li]:inline [&>li:not(:last-child)>a]:hover:opacity-100"
+  >
+    <li>
+      <a href="/" class="opacity-80">Home</a>
+      <span aria-hidden="true" class="opacity-80">&raquo;</span>
+    </li>
+    {
+      breadcrumbList.map((breadcrumb, index) =>
+        index + 1 === breadcrumbList.length ? (
+          <li>
+            <span
+              class:list={["capitalize opacity-75", { lowercase: index > 0 }]}
+              aria-current="page"
+            >
+              {/* make the last part lowercase in Home > Tags > some-tag */}
+              {decodeURIComponent(breadcrumb)}
+            </span>
+          </li>
+        ) : (
+          <li>
+            <a href={`/${breadcrumb}/`} class="capitalize opacity-70">
+              {breadcrumb}
+            </a>
+            <span aria-hidden="true">&raquo;</span>
+          </li>
+        )
+      )
+    }
+  </ul>
+</nav>

package/src/components/nav/FloatingActions.astro

@@ -0,0 +1,206 @@
+---
+import IconArrowNarrowUp from "../../assets/icons/IconArrowNarrowUp.svg";
+import IconMoon from "../../assets/icons/IconMoon.svg";
+import IconSunHigh from "../../assets/icons/IconSunHigh.svg";
+import { SITE } from "@/config";
+
+const aiEnabled = SITE.ai?.enabled ?? false;
+---
+
+<div
+  class="fixed right-6 bottom-6 z-50 flex flex-col items-center gap-3"
+  id="floating-actions"
+  role="group"
+  aria-label="Page actions"
+>
+  <!-- AI Assistant -->
+  {
+    aiEnabled && (
+      <button
+        id="ai-chat-toggle-fab"
+        class="fab-btn flex size-11 items-center justify-center rounded-full border border-accent bg-accent text-background shadow-md transition-all duration-200 hover:scale-105 hover:shadow-lg active:scale-95"
+        aria-label="AI Assistant"
+        title="AI Assistant"
+      >
+        <svg
+          class="size-5"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        >
+          <path d="M12 8V4H8" />
+          <rect width="16" height="12" x="4" y="8" rx="2" />
+          <path d="M2 14h2" />
+          <path d="M20 14h2" />
+          <path d="M15 13v2" />
+          <path d="M9 13v2" />
+        </svg>
+      </button>
+    )
+  }
+
+  <!-- Reading Mode (only on article pages) -->
+  <button
+    id="reading-mode-btn"
+    class="fab-btn hidden size-11 items-center justify-center rounded-full border border-border bg-background/90 shadow-md backdrop-blur-sm transition-all duration-200 hover:shadow-lg active:scale-95"
+    aria-label="Toggle reading mode"
+    aria-pressed="false"
+    title="Toggle reading mode"
+  >
+    <svg
+      id="reading-icon-off"
+      class="text-muted-foreground size-5"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      aria-hidden="true"
+    >
+      <path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"></path>
+      <path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"></path>
+    </svg>
+    <svg
+      id="reading-icon-on"
+      class="hidden size-5 text-accent"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      aria-hidden="true"
+    >
+      <path d="M18 6 6 18"></path>
+      <path d="m6 6 12 12"></path>
+    </svg>
+  </button>
+
+  <!-- Font Size Controls (visible in reading mode) -->
+  <div id="font-controls" class="hidden flex-col items-center gap-1.5">
+    <button
+      id="font-increase-btn"
+      class="text-muted-foreground size-9 rounded-full border border-border bg-background/90 text-xs font-bold shadow-sm backdrop-blur-sm transition-all hover:border-accent hover:text-accent active:scale-95"
+      aria-label="Increase font size"
+      title="Increase font size">A+</button
+    >
+    <button
+      id="font-decrease-btn"
+      class="text-muted-foreground size-9 rounded-full border border-border bg-background/90 text-xs font-bold shadow-sm backdrop-blur-sm transition-all hover:border-accent hover:text-accent active:scale-95"
+      aria-label="Decrease font size"
+      title="Decrease font size">A-</button
+    >
+  </div>
+
+  <!-- Theme Toggle -->
+  {
+    SITE.lightAndDarkMode && (
+      <button
+        id="theme-btn"
+        class="fab-btn group relative size-11 rounded-full border border-border bg-background/90 shadow-md backdrop-blur-sm hover:shadow-lg"
+        title="Toggle theme"
+        aria-label="auto"
+        aria-live="polite"
+      >
+        <IconMoon class="icon-moon text-muted-foreground absolute top-1/2 left-1/2 size-5 -translate-x-1/2 -translate-y-1/2 group-hover:text-foreground" />
+        <IconSunHigh class="icon-sun text-muted-foreground absolute top-1/2 left-1/2 size-5 -translate-x-1/2 -translate-y-1/2 group-hover:text-foreground" />
+      </button>
+    )
+  }
+
+  <!-- Back to Top -->
+  <button
+    id="back-to-top-btn"
+    class="fab-btn pointer-events-none size-11 rounded-full border border-border bg-background/90 opacity-0 shadow-md backdrop-blur-sm transition-all duration-200 hover:shadow-lg active:scale-95"
+    aria-label="Back to Top"
+    title="Back to Top"
+  >
+    <IconArrowNarrowUp class="text-muted-foreground mx-auto size-5" />
+  </button>
+</div>
+
+<script>
+  function initFloatingActions() {
+    const backToTopBtn = document.getElementById("back-to-top-btn");
+    const readingModeBtn = document.getElementById("reading-mode-btn");
+    const fontControls = document.getElementById("font-controls");
+    const fontIncBtn = document.getElementById("font-increase-btn");
+    const fontDecBtn = document.getElementById("font-decrease-btn");
+    const iconOff = document.getElementById("reading-icon-off");
+    const iconOn = document.getElementById("reading-icon-on");
+    const article = document.querySelector("#article") as HTMLElement | null;
+
+    const isArticlePage = !!document.querySelector("article#article");
+
+    if (readingModeBtn) {
+      if (isArticlePage) {
+        readingModeBtn.classList.remove("hidden");
+        readingModeBtn.classList.add("flex");
+      } else {
+        readingModeBtn.classList.add("hidden");
+        readingModeBtn.classList.remove("flex");
+      }
+
+      readingModeBtn.addEventListener("click", () => {
+        const active = document.body.classList.toggle("reading-mode");
+        readingModeBtn.setAttribute("aria-pressed", String(active));
+
+        if (active) {
+          readingModeBtn.classList.add("border-accent", "bg-accent/10");
+          readingModeBtn.classList.remove("bg-background/90");
+          iconOff?.classList.add("hidden");
+          iconOn?.classList.remove("hidden");
+          fontControls?.classList.remove("hidden");
+          fontControls?.classList.add("flex");
+        } else {
+          readingModeBtn.classList.remove("border-accent", "bg-accent/10");
+          readingModeBtn.classList.add("bg-background/90");
+          iconOff?.classList.remove("hidden");
+          iconOn?.classList.add("hidden");
+          fontControls?.classList.add("hidden");
+          fontControls?.classList.remove("flex");
+          if (article) article.style.fontSize = "";
+        }
+      });
+    }
+
+    let fontSize = 1;
+    fontIncBtn?.addEventListener("click", () => {
+      if (!article || fontSize >= 1.5) return;
+      fontSize = Math.min(fontSize + 0.1, 1.5);
+      article.style.fontSize = `${fontSize}em`;
+    });
+    fontDecBtn?.addEventListener("click", () => {
+      if (!article || fontSize <= 0.8) return;
+      fontSize = Math.max(fontSize - 0.1, 0.8);
+      article.style.fontSize = `${fontSize}em`;
+    });
+
+    if (!backToTopBtn) return;
+
+    const updateVisibility = () => {
+      const scrollTop = window.scrollY || document.documentElement.scrollTop;
+      if (scrollTop > 300) {
+        backToTopBtn.classList.remove("opacity-0", "pointer-events-none");
+        backToTopBtn.classList.add("opacity-100");
+      } else {
+        backToTopBtn.classList.add("opacity-0", "pointer-events-none");
+        backToTopBtn.classList.remove("opacity-100");
+      }
+    };
+
+    backToTopBtn.addEventListener("click", () => {
+      window.scrollTo({ top: 0, behavior: "smooth" });
+    });
+
+    window.addEventListener("scroll", updateVisibility, { passive: true });
+    updateVisibility();
+  }
+
+  initFloatingActions();
+  document.addEventListener("astro:after-swap", initFloatingActions);
+</script>

package/src/components/nav/Footer.astro

@@ -0,0 +1,107 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { SITE } from "@/config";
+import { t } from "../../utils/i18n";
+
+const currentYear = new Date().getFullYear();
+
+// Calculate running days
+const startDate = new Date(SITE.startDate);
+const today = new Date();
+const runningDays = Math.floor(
+  (today.getTime() - startDate.getTime()) / (1000 * 60 * 60 * 24)
+);
+
+type Props = {
+  noMarginTop?: boolean;
+  lang?: string;
+} & HTMLAttributes<"footer">;
+
+const {
+  noMarginTop = false,
+  lang = "zh",
+  class: className,
+  ...attrs
+} = Astro.props;
+
+const copyrightText = t("footer.copyright", lang)
+  .replace("{year}", String(currentYear))
+  .replace("{author}", SITE.author);
+---
+
+<footer
+  class:list={["app-layout max-w-5xl", { "mt-auto": !noMarginTop }, className]}
+  {...attrs}
+>
+  <div
+    class:list={[
+      "py-6 sm:py-4",
+      "border-t border-border",
+      "flex flex-col items-center justify-center",
+    ]}
+  >
+    <div
+      class="flex flex-col items-center justify-center text-sm whitespace-nowrap text-neutral-600 sm:flex-row dark:text-neutral-400"
+    >
+      <!-- Column 1: Avatar + Hi, {author} -->
+      <div class="px-4">
+        <a
+          href={`/${lang}/`}
+          class="flex items-center gap-2 transition-colors hover:text-accent"
+        >
+          <img
+            src="/favicon.ico"
+            alt={`${SITE.author}'s avatar`}
+            class="h-5 w-5 rounded-full"
+          />
+          <span>{t("footer.hi", lang)}, {SITE.author}</span>
+        </a>
+      </div>
+
+      <span class="hidden px-2 text-neutral-500 sm:inline dark:text-neutral-500"
+        >|</span
+      >
+
+      <!-- Column 2: Running days -->
+      <div class="px-4">
+        <span
+          >{t("footer.running", lang)}
+          {runningDays}
+          {t("footer.days", lang)}</span
+        >
+      </div>
+
+      <span class="hidden px-2 text-neutral-500 sm:inline dark:text-neutral-500"
+        >|</span
+      >
+
+      <!-- Column 3: Copyright -->
+      <div class="px-4">
+        <span>{copyrightText}</span>
+      </div>
+
+      <span class="hidden px-2 text-neutral-500 sm:inline dark:text-neutral-500"
+        >|</span
+      >
+
+      <!-- Column 4: Sitemap -->
+      <div class="px-4">
+        <a
+          href="/sitemap-index.xml"
+          class="transition-colors hover:text-accent"
+        >
+          {t("footer.sitemap", lang)}
+        </a>
+      </div>
+
+      <span class="hidden px-2 text-neutral-500 sm:inline dark:text-neutral-500"
+        >|</span
+      >
+
+      <!-- Column 5: RSS -->
+      <div class="px-4">
+        <a href="/rss.xml" class="transition-colors hover:text-accent"> RSS </a>
+      </div>
+    </div>
+  </div>
+</footer>