@astro-minimax/core 0.1.0

package/src/components/blog/Comments.astro

@@ -0,0 +1,527 @@
+---
+import { SITE } from "@/config";
+
+// Only render if Waline is enabled in config
+const enabled = SITE.waline?.enabled;
+---
+
+{
+  enabled && (
+    <div class="comments-section panel-card mt-8 px-5 py-5 sm:px-6">
+      {/* Comment Section Header */}
+      <div class="mb-6 flex flex-col gap-3 border-b border-border/70 pb-4 sm:flex-row sm:items-center sm:justify-between">
+        <h3 class="flex items-center gap-2 font-display text-2xl leading-tight tracking-[-0.02em] 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="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
+          </svg>
+          <span>评论区</span>
+        </h3>
+        <span class="text-sm text-foreground-soft">文明评论，共建和谐社区</span>
+      </div>
+      
+      {/* Waline Container */}
+      <div id="waline" class="not-prose"></div>
+      
+      {/* Loading indicator */}
+      <div id="waline-loading" class="flex items-center justify-center py-8">
+        <div class="animate-spin size-8 border-2 border-accent border-t-transparent rounded-full"></div>
+      </div>
+      
+      {/* Fallback for disabled JS */}
+      <noscript>
+        <div class="rounded-lg bg-muted/50 p-4 text-center text-muted-foreground">
+          请启用 JavaScript 以查看评论功能。
+        </div>
+      </noscript>
+      
+      <link rel="stylesheet" href="https://unpkg.com/@waline/client@v3/dist/waline.css" />
+      
+      <script is:inline type="module" define:vars={{ 
+        serverURL: SITE.waline.serverURL, 
+        emoji: SITE.waline.emoji, 
+        lang: SITE.waline.lang, 
+        reaction: SITE.waline.reaction, 
+        pageview: SITE.waline.pageview,
+        login: SITE.waline.login,
+        wordLimit: SITE.waline.wordLimit,
+        imageUploader: SITE.waline.imageUploader,
+        requiredMeta: SITE.waline.requiredMeta,
+        copyright: SITE.waline.copyright
+      }}>
+        import { init } from 'https://unpkg.com/@waline/client@v3/dist/waline.js';
+        
+        let walineInstance = null;
+        
+        function loadWaline() {
+          const container = document.getElementById('waline');
+          const loading = document.getElementById('waline-loading');
+          
+          if (container && serverURL) {
+            try {
+              // Clean up previous instance
+              if (walineInstance) {
+                // Handle both sync errors and Promise rejections from destroy()
+                // Waline's internal Vue components may reject with AbortError during cleanup
+                const result = walineInstance.destroy();
+                if (result && typeof result.catch === 'function') {
+                  result.catch(() => {
+                    // Suppress internal Vue AbortError during cleanup
+                  });
+                }
+                walineInstance = null;
+              }
+              
+              walineInstance = init({
+                el: '#waline',
+                serverURL: serverURL,
+                emoji: emoji,
+                lang: lang,
+                reaction: reaction,
+                pageview: pageview,
+                login: login,
+                wordLimit: wordLimit,
+                imageUploader: imageUploader,
+                requiredMeta: requiredMeta,
+                copyright: copyright,
+                dark: 'html[data-theme="dark"]',
+                path: window.location.pathname.replace(/\/$/, ''), // Ensure path consistency
+                locale: {
+                  placeholder: '欢迎评论，支持 Markdown 语法。\n请遵守社区规范，友善发言。',
+                  sofa: '快来抢沙发吧~',
+                  submit: '发布评论',
+                  reply: '回复',
+                  cancelReply: '取消回复',
+                  comment: '评论',
+                  refresh: '刷新',
+                  more: '加载更多...',
+                  preview: '预览',
+                  emoji: '表情',
+                  uploadImage: '上传图片',
+                  seconds: '秒前',
+                  minutes: '分钟前',
+                  hours: '小时前',
+                  days: '天前',
+                  now: '刚刚',
+                  uploading: '上传中',
+                  login: '登录',
+                  logout: '退出',
+                  admin: '博主',
+                  sticky: '置顶',
+                  word: '字',
+                  wordHint: '评论字数应在 $0 到 $1 字之间！\n当前字数：$2',
+                  anonymous: '匿名',
+                  level0: '潜水',
+                  level1: '冒泡',
+                  level2: '吐槽',
+                  level3: '活跃',
+                  level4: '话痨',
+                  level5: '传说',
+                },
+              });
+              
+              // Hide loading indicator after successful load
+              if (loading) {
+                loading.style.display = 'none';
+              }
+            } catch (e) {
+              // eslint-disable-next-line no-console
+              console.error('Failed to load Waline:', e);
+              if (loading) {
+                loading.innerHTML = '<div class="text-center text-muted-foreground">评论加载失败，请刷新重试</div>';
+              }
+            }
+          }
+        }
+
+        // Handle initial load
+        loadWaline();
+
+        // Handle View Transitions (if using ClientRouter)
+        document.addEventListener('astro:page-load', loadWaline);
+        
+        // Cleanup before page swap to prevent AbortError
+        document.addEventListener('astro:before-swap', () => {
+          if (walineInstance) {
+            // Handle both sync errors and Promise rejections from destroy()
+            const result = walineInstance.destroy();
+            if (result && typeof result.catch === 'function') {
+              result.catch(() => {
+                // Ignore errors during cleanup - component may already be unmounted
+              });
+            }
+            walineInstance = null;
+          }
+        });
+      </script>
+      
+      <style is:global>
+        /* ===========================================
+         * WALINE COMMENT SYSTEM STYLES
+         * Comprehensive theming for light/dark modes
+         * =========================================== */
+        
+        .comments-section {
+          animation: fadeIn 0.5s ease-out;
+        }
+        
+        @keyframes fadeIn {
+          from {
+            opacity: 0;
+            transform: translateY(10px);
+          }
+          to {
+            opacity: 1;
+            transform: translateY(0);
+          }
+        }
+        
+        /* ===========================================
+         * ROOT VARIABLES (Common)
+         * =========================================== */
+        :root {
+          /* Theme Colors */
+          --waline-theme-color: var(--accent) !important;
+          --waline-active-color: var(--accent) !important;
+          
+          /* Typography */
+          --waline-font-size: 0.9375rem !important;
+          --waline-border-radius: 0.5rem !important;
+          
+          /* Avatar */
+          --waline-avatar-size: 2.75rem !important;
+          --waline-m-avatar-size: 2.25rem !important;
+          
+          /* Box Shadow */
+          --waline-box-shadow: none !important;
+        }
+        
+        /* ===========================================
+         * LIGHT MODE THEME
+         * =========================================== */
+        html:not([data-theme="dark"]) {
+          /* Primary Backgrounds - use --card for consistency */
+          --waline-bg-color: var(--card) !important;
+          --waline-bg-color-light: var(--muted) !important;
+          --waline-bg-color-hover: rgba(0, 0, 0, 0.05) !important;
+          
+          /* Text Colors */
+          --waline-color: var(--foreground) !important;
+          --waline-font-color: var(--foreground) !important;
+          
+          /* Border & Disabled */
+          --waline-border-color: var(--border) !important;
+          --waline-disable-bg-color: var(--muted) !important;
+          --waline-disable-color: var(--foreground-soft) !important;
+          
+          /* Special Colors */
+          --waline-bq-color: var(--muted) !important;
+          --waline-info-bg-color: var(--muted) !important;
+          --waline-info-color: var(--foreground-soft) !important;
+          --waline-code-bg-color: #1e1e1e !important;
+          
+          /* White/Grey overrides */
+          --waline-white: var(--card) !important;
+          --waline-light-grey: var(--foreground-soft) !important;
+          --waline-dark-grey: var(--foreground) !important;
+        }
+        
+        /* ===========================================
+         * DARK MODE THEME
+         * =========================================== */
+        html[data-theme="dark"] {
+          /* Primary Backgrounds - use --card for consistency */
+          --waline-bg-color: var(--card) !important;
+          --waline-bg-color-light: var(--muted) !important;
+          --waline-bg-color-hover: rgba(255, 255, 255, 0.05) !important;
+          
+          /* Text Colors */
+          --waline-color: var(--foreground) !important;
+          --waline-font-color: var(--foreground) !important;
+          
+          /* Border & Disabled */
+          --waline-border-color: var(--border) !important;
+          --waline-disable-bg-color: rgba(128, 128, 128, 0.2) !important;
+          --waline-disable-color: var(--foreground-soft) !important;
+          
+          /* Special Colors */
+          --waline-bq-color: var(--muted) !important;
+          --waline-info-bg-color: var(--muted) !important;
+          --waline-info-color: var(--foreground-soft) !important;
+          --waline-code-bg-color: #0d1117 !important;
+          
+          /* White/Grey overrides */
+          --waline-white: var(--card) !important;
+          --waline-light-grey: var(--foreground-soft) !important;
+          --waline-dark-grey: var(--foreground) !important;
+        }
+        
+        /* ===========================================
+         * CONTAINER & PANEL STYLES
+         * =========================================== */
+        #waline {
+          padding-top: 0.5rem;
+        }
+        
+        /* Main panel - ensure consistent background */
+        #waline .wl-panel {
+          background-color: var(--card) !important;
+          border-color: var(--border) !important;
+        }
+        
+        /* Header area */
+        #waline .wl-header {
+          background-color: transparent !important;
+        }
+        
+        #waline .wl-header-item {
+          background-color: var(--muted) !important;
+          border-color: var(--border) !important;
+        }
+        
+        /* Input wrapper */
+        #waline .wl-input-wrapper {
+          background-color: var(--card) !important;
+          border-color: var(--border) !important;
+        }
+        
+        /* ===========================================
+         * INPUT & EDITOR STYLES
+         * =========================================== */
+        #waline .wl-editor,
+        #waline .wl-input {
+          min-height: 120px !important;
+          background-color: var(--card) !important;
+          border-color: var(--border) !important;
+          border-radius: 0.5rem !important;
+          transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
+        }
+        
+        #waline .wl-input {
+          min-height: auto !important;
+        }
+        
+        #waline .wl-editor:focus,
+        #waline .wl-input:focus {
+          border-color: var(--accent) !important;
+          box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent) !important;
+        }
+        
+        /* Textarea */
+        #waline textarea {
+          background-color: var(--card) !important;
+          color: var(--foreground) !important;
+        }
+        
+        /* ===========================================
+         * BUTTON STYLES
+         * =========================================== */
+        #waline .wl-btn {
+          transition: all 0.2s ease !important;
+          border-radius: 0.375rem !important;
+          background-color: var(--muted) !important;
+          color: var(--foreground) !important;
+        }
+        
+        #waline .wl-btn:hover {
+          transform: translateY(-1px);
+          box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+          background-color: var(--bg-color-hover) !important;
+        }
+        
+        #waline .wl-primary-btn {
+          font-weight: 500 !important;
+          background-color: var(--accent) !important;
+          color: var(--background) !important;
+        }
+        
+        #waline .wl-primary-btn:hover {
+          background-color: var(--accent) !important;
+          opacity: 0.9;
+        }
+        
+        /* ===========================================
+         * COMMENT CARD STYLES
+         * =========================================== */
+        #waline .wl-card {
+          border-radius: 0.5rem !important;
+          background-color: var(--card) !important;
+          border-color: var(--border) !important;
+          transition: box-shadow 0.2s ease !important;
+        }
+        
+        #waline .wl-card:hover {
+          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+        }
+        
+        /* Comment content area */
+        #waline .wl-content {
+          background-color: transparent !important;
+        }
+        
+        /* Comment meta info */
+        #waline .wl-meta {
+          color: var(--foreground-soft) !important;
+        }
+        
+        /* ===========================================
+         * AVATAR STYLES
+         * =========================================== */
+        #waline .wl-avatar {
+          border-radius: 50% !important;
+        }
+        
+        /* ===========================================
+         * REACTION STYLES
+         * =========================================== */
+        #waline .wl-reaction {
+          background-color: transparent !important;
+        }
+        
+        #waline .wl-reaction-img {
+          transition: transform 0.2s ease !important;
+          background-color: var(--muted) !important;
+          border-radius: 0.5rem !important;
+        }
+        
+        #waline .wl-reaction-img:hover {
+          transform: scale(1.1);
+        }
+        
+        #waline .wl-reaction-title {
+          color: var(--foreground-soft) !important;
+        }
+        
+        /* ===========================================
+         * QUOTE & CODE STYLES
+         * =========================================== */
+        #waline .wl-quote {
+          border-left-color: var(--accent) !important;
+          background-color: var(--muted) !important;
+          color: var(--foreground) !important;
+        }
+        
+        #waline .wl-content pre,
+        #waline .wl-content code {
+          background-color: var(--waline-code-bg-color) !important;
+          border-radius: 0.25rem !important;
+        }
+        
+        /* ===========================================
+         * EMOJI PICKER
+         * =========================================== */
+        #waline .wl-emoji-popup {
+          border-radius: 0.5rem !important;
+          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
+          background-color: var(--card) !important;
+          border-color: var(--border) !important;
+        }
+        
+        #waline .wl-tab-wrapper button {
+          color: var(--foreground) !important;
+        }
+        
+        #waline .wl-tab-wrapper button.active {
+          color: var(--accent) !important;
+          border-bottom-color: var(--accent) !important;
+        }
+        
+        /* ===========================================
+         * REPLY FORM
+         * =========================================== */
+        #waline .wl-reply-wrapper {
+          border-radius: 0.5rem !important;
+          background-color: var(--muted) !important;
+        }
+        
+        #waline .wl-reply {
+          background-color: var(--card) !important;
+        }
+        
+        /* ===========================================
+         * PAGINATION
+         * =========================================== */
+        #waline .wl-page-button {
+          border-radius: 0.25rem !important;
+          transition: background-color 0.2s ease !important;
+          background-color: var(--muted) !important;
+          color: var(--foreground) !important;
+        }
+        
+        #waline .wl-page-button:hover {
+          background-color: var(--accent) !important;
+          color: var(--background) !important;
+        }
+        
+        #waline .wl-page-button.active {
+          background-color: var(--accent) !important;
+          color: var(--background) !important;
+        }
+        
+        /* ===========================================
+         * ADMIN & BADGE STYLES
+         * =========================================== */
+        #waline .wl-badge {
+          background-color: var(--accent) !important;
+          color: var(--background) !important;
+        }
+        
+        #waline .wl-admin {
+          color: var(--accent) !important;
+        }
+        
+        /* ===========================================
+         * LOGIN FORM
+         * =========================================== */
+        #waline .wl-login-form {
+          background-color: var(--card) !important;
+        }
+        
+        /* ===========================================
+         * LOADING ANIMATION
+         * =========================================== */
+        #waline-loading {
+          transition: opacity 0.3s ease;
+        }
+        
+        /* ===========================================
+         * GUEST STYLES
+         * =========================================== */
+        #waline .wl-guest {
+          background-color: transparent !important;
+        }
+        
+        #waline .wl-guest .wl-nick,
+        #waline .wl-guest .wl-link {
+          background-color: var(--card) !important;
+          border-color: var(--border) !important;
+          color: var(--foreground) !important;
+        }
+        
+        /* ===========================================
+         * COMMENT OPERATIONS
+         * =========================================== */
+        #waline .wl-comment-actions button {
+          color: var(--foreground-soft) !important;
+        }
+        
+        #waline .wl-comment-actions button:hover {
+          color: var(--accent) !important;
+        }
+        
+        /* ===========================================
+         * IMAGE PREVIEW
+         * =========================================== */
+        #waline .wl-image-preview {
+          background-color: rgba(0, 0, 0, 0.85) !important;
+        }
+        
+        /* ===========================================
+         * VERIFICATION BADGE
+         * =========================================== */
+        #waline .wl-verified-icon {
+          color: var(--accent) !important;
+        }
+      </style>
+    </div>
+  )
+}

package/src/components/blog/Copyright.astro

@@ -0,0 +1,152 @@
+---
+import { SITE } from "@/config";
+
+interface Props {
+  title: string;
+  pubDatetime: Date;
+  url?: string;
+  lang?: string;
+}
+
+const { title, pubDatetime, url, lang = "zh" } = Astro.props;
+const pageUrl = url || Astro.url.href;
+const copyrightConfig = SITE.copyright;
+const hasSponsor = SITE.sponsor?.enabled;
+---
+
+<div class="copyright-box mt-8 rounded-xl border">
+  <div class="flex flex-col gap-2 px-3 py-3 sm:px-4">
+    <div class="flex items-center gap-2 text-sm font-medium text-foreground">
+      <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="12" cy="12" r="10"></circle>
+        <path d="M14.83 14.83a4 4 0 1 1 0-5.66"></path>
+      </svg>
+      <span class="line-clamp-1">{title}</span>
+    </div>
+    <div class="text-xs text-foreground-soft break-all">{pageUrl}</div>
+    <div class="flex flex-wrap gap-x-4 gap-y-1 text-xs text-foreground-soft">
+      <span>
+        {lang === "zh" ? "作者" : "Author"}:
+        <span class="text-foreground">{SITE.author}</span>
+      </span>
+      <span>
+        {lang === "zh" ? "发布于" : "Published"}:
+        <time class="text-foreground">
+          {pubDatetime.toLocaleDateString(lang === "zh" ? "zh-CN" : "en-US", {
+            year: "numeric",
+            month: "short",
+            day: "numeric",
+          })}
+        </time>
+      </span>
+      <span>
+        {lang === "zh" ? "许可" : "License"}:
+        <a
+          href={copyrightConfig?.licenseUrl || "https://creativecommons.org/licenses/by-nc-sa/4.0/"}
+          target="_blank"
+          rel="noopener noreferrer"
+          class="text-accent hover:underline"
+        >
+          {copyrightConfig?.license || "CC BY-NC-SA 4.0"}
+        </a>
+      </span>
+    </div>
+    <div class="mt-1 flex items-center gap-2">
+      <button
+        id="copy-link-btn"
+        class="flex items-center gap-1 rounded-md border px-2 py-1 text-xs text-foreground-soft transition-colors hover:bg-muted hover:text-foreground"
+        aria-label={lang === "zh" ? "复制链接" : "Copy link"}
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="14"
+          height="14"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        >
+          <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path>
+          <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path>
+        </svg>
+        {lang === "zh" ? "复制链接" : "Copy link"}
+      </button>
+      <a
+        href={`https://x.com/intent/tweet?url=${encodeURIComponent(pageUrl)}&text=${encodeURIComponent(title)}`}
+        target="_blank"
+        rel="noopener noreferrer"
+        class="flex items-center gap-1 rounded-md border px-2 py-1 text-xs text-foreground-soft transition-colors hover:bg-muted hover:text-foreground"
+        aria-label="Share on X"
+      >
+        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
+          <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" />
+        </svg>
+      </a>
+      <a
+        href={`https://service.weibo.com/share/share.php?url=${encodeURIComponent(pageUrl)}&title=${encodeURIComponent(title)}`}
+        target="_blank"
+        rel="noopener noreferrer"
+        class="flex items-center gap-1 rounded-md border px-2 py-1 text-xs text-foreground-soft transition-colors hover:bg-muted hover:text-foreground"
+        aria-label="Share on Weibo"
+      >
+        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
+          <path d="M9.82 13.87c-2.27 0-4.11.96-4.11 2.14s1.84 2.14 4.11 2.14 4.11-.96 4.11-2.14-1.84-2.14-4.11-2.14zm1.28 3.16c-.63.37-1.52.43-2 .13-.47-.29-.4-.87.18-1.28.58-.41 1.48-.47 1.97-.13.49.34.42.91-.15 1.28zM20.5 7.5c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5.67 1.5 1.5 1.5 1.5-.67 1.5-1.5zM22 4c.55 0 1-.45 1-1s-.45-1-1-1-1 .45-1 1 .45 1 1 1zm-2.18 3.35c-.94-3.47-4.58-5.16-8.13-3.78-3.43 1.34-5.54 5.1-4.6 8.31.93 3.18 4.58 4.86 8.12 3.85 3.66-1.04 5.55-5.06 4.61-8.38z" />
+        </svg>
+      </a>
+    </div>
+  </div>
+  {
+    hasSponsor && (
+      <div class="rounded-b-xl border-t px-3 pb-1.5 pt-1">
+        <a
+          href={`/${lang}/about#sponsorship`}
+          class="flex items-center justify-between text-sm text-foreground-soft transition-colors hover:text-accent"
+        >
+          <span>{lang === "zh" ? "请我喝杯咖啡 ☕" : "Buy me a cup of coffee ☕"}</span>
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="16"
+            height="16"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <polyline points="9 18 15 12 9 6"></polyline>
+          </svg>
+        </a>
+      </div>
+    )
+  }
+</div>
+
+<script>
+  function initCopyLink() {
+    document.querySelectorAll("#copy-link-btn").forEach(btn => {
+      btn.addEventListener("click", () => {
+        navigator.clipboard.writeText(window.location.href);
+        const original = btn.textContent;
+        btn.textContent = "✓ Copied!";
+        setTimeout(() => {
+          if (original) btn.textContent = original;
+        }, 2000);
+      });
+    });
+  }
+  initCopyLink();
+  document.addEventListener("astro:page-load", initCopyLink);
+</script>