@mintfolio/theme-verdant 0.2.0

package/README.md

@@ -0,0 +1,66 @@
+# Verdant
+
+一个给 [Mintfolio](https://github.com/cnflwzh/mintfolio) 使用的个人主页与博客主题。
+
+Verdant 保留了宽松的留白、文章卡片和绿色主色，也提供其他七套配色。主页可以放资料、项目与推荐文章；阅读页提供目录、代码复制、图片预览和阅读进度。
+
+![Verdant 首页](docs/assets/home-desktop.webp)
+
+## 安装
+
+先按 [入门教程](https://github.com/cnflwzh/mintfolio/wiki/Getting-Started) 建好站点，再在站点目录运行：
+
+~~~sh
+mintfolio theme install verdant --use
+mintfolio dev
+~~~
+
+项目仍在持续开发中。verdant 别名需要 Core >= 0.2.0。
+
+Verdant 的 npm 包名是 @mintfolio/theme-verdant，清单 id 为 verdant，配置文件是 theme-verdant.config.mjs。命令行可使用 verdant 简写。
+
+## 调整主题
+
+站点根目录的 theme-verdant.config.mjs 是显示设置入口。它会自动生成，重复初始化或升级会保留你的修改。
+
+~~~js
+export default {
+  initialMode: 'auto',
+  initialPalette: '1',
+  homePageSize: 6,
+  archivePageSize: 8,
+  sidebar: {
+    quote: { enabled: true, text: '慢慢写，也认真读。', author: '' },
+  },
+};
+~~~
+
+initialPalette 使用字符串 '1' 到 '8'。访客在浏览器中保存的配色偏好优先于初始值。网站标题、头像和项目内容放在 site.config.ts；侧栏、推荐文章和文末插图放在主题设置中。
+
+全部选项见 [配置模板](config/theme-verdant.config.mjs) 与 [主题配置教程](https://github.com/cnflwzh/mintfolio/wiki/Themes)。设置合并顺序为清单默认值、独立主题文件、旧内联 settings；数组整体替换。
+
+## 页面与资源
+
+主题提供首页、文章、归档和普通页面。404 页面由 Core 补齐。首页和普通页面会显示 site.config.ts 顶层的 icp 字段；其他页面目前未统一显示备案信息。
+
+字体与图标随包分发。React 和 Tailwind 在启用本主题时由 Core 加载。文章读取、URL、搜索和解锁逻辑使用 Core 公共 API。
+
+![阅读页面](docs/assets/article-reading.webp)
+
+## 修改源码
+
+~~~sh
+git clone https://github.com/cnflwzh/mintfolio-theme-verdant.git
+cd mintfolio-theme-verdant
+npm ci
+npm run check
+npm pack
+~~~
+
+将打出的 tgz 安装到测试站点，检查桌面、手机和密码文章页面。定制请保存在自己的主题仓库中，直接修改 node_modules 会在重新安装后丢失。
+
+[主题开发教程](https://github.com/cnflwzh/mintfolio/wiki/Theme-Development) · [贡献说明](CONTRIBUTING.md) · [安全问题](SECURITY.md)
+
+## 许可证
+
+代码为 [GPL-3.0-only](LICENSE)。Inter、JetBrains Mono、Playfair Display 按 SIL OFL 1.1 分发，原始声明保存在 [licenses](licenses) 中。

package/THIRD_PARTY_NOTICES.md

@@ -0,0 +1,11 @@
+# 第三方资源
+
+字体文件保留原项目许可证：
+
+| 字体 | 来源 | 许可副本 |
+| --- | --- | --- |
+| Inter | https://github.com/rsms/inter | [SIL OFL 1.1](licenses/Inter-OFL.txt) |
+| JetBrains Mono | https://github.com/JetBrains/JetBrainsMono | [SIL OFL 1.1](licenses/JetBrainsMono-OFL.txt) |
+| Playfair Display | https://github.com/google/fonts/tree/main/ofl/playfairdisplay | [SIL OFL 1.1](licenses/PlayfairDisplay-OFL.txt) |
+
+本包分发的是 WOFF2 字体。npm 依赖各自采用上游许可证。README 截图来自 Mintfolio 示例站点，使用演示资料。

package/assets/favicon.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 128 128">
+    <path d="M50.4 78.5a75.1 75.1 0 0 0-28.5 6.9l24.2-65.7c.7-2 1.9-3.2 3.4-3.2h29c1.5 0 2.7 1.2 3.4 3.2l24.2 65.7s-11.6-7-28.5-7L67 45.5c-.4-1.7-1.6-2.8-2.9-2.8-1.3 0-2.5 1.1-2.9 2.7L50.4 78.5Zm-1.1 28.2Zm-4.2-20.2c-2 6.6-.6 15.8 4.2 20.2a17.5 17.5 0 0 1 .2-.7 5.5 5.5 0 0 1 5.7-4.5c2.8.1 4.3 1.5 4.7 4.7.2 1.1.2 2.3.2 3.5v.4c0 2.7.7 5.2 2.2 7.4a13 13 0 0 0 5.7 4.9v-.3l-.2-.3c-1.8-5.6-.5-9.5 4.4-12.8l1.5-1a73 73 0 0 0 3.2-2.2 16 16 0 0 0 6.8-11.4c.3-2 .1-4-.6-6l-.8.6-1.6 1a37 37 0 0 1-22.4 2.7c-5-.7-9.7-2-13.2-6.2Z" />
+    <style>
+        path { fill: #000; }
+        @media (prefers-color-scheme: dark) {
+            path { fill: #FFF; }
+        }
+    </style>
+</svg>

package/components/base/Contact.astro

@@ -0,0 +1,173 @@
+---
+/**
+ * Contact - Contact section with email and social links.
+ * 
+ * Displays contact information from the public theme context:
+ * - Primary email with mailto link
+ * - Social media links (filtered by contact.social platform names)
+ */
+import type { ThemeContext } from '@mintfolio/theme-api';
+import type { VerdantSettings } from '../../settings';
+
+/** Public site data supplied by the containing theme page. */
+interface Props { theme: ThemeContext<VerdantSettings>; }
+import type { SocialLink } from '@mintfolio/theme-api';
+
+const { theme } = Astro.props;
+// Filter social links based on contact.social platform names
+const contactSocials: SocialLink[] = theme.site.social.filter((link) =>
+  theme.site.contact.social.includes(link.platform)
+);
+---
+
+<section id="contact" class="contact-section">
+  <div class="contact-container">
+    <h2 class="section-title gradient-text">联系我</h2>
+    <p class="cta-text">保持联系</p>
+
+    <div class="glass-card contact-card">
+      <div class="contact-email">
+        <span class="label">Email</span>
+        <a href={`mailto:${theme.site.contact.email}`} class="email-link">
+          {theme.site.contact.email}
+        </a>
+      </div>
+
+      <div class="contact-socials">
+        <span class="label">社交媒体</span>
+        <div class="social-links">
+          {contactSocials.map((social) => (
+            <a
+              href={social.url}
+              target="_blank"
+              rel="noopener noreferrer"
+              class="social-link"
+              aria-label={social.platform}
+            >
+              <span class="social-icon">{social.icon}</span>
+              <span class="social-platform">{social.platform}</span>
+            </a>
+          ))}
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
+
+<style>
+  .contact-section {
+    padding: var(--section-padding);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: 50vh;
+  }
+
+  .contact-container {
+    max-width: var(--max-width);
+    width: 100%;
+    text-align: center;
+  }
+
+  .section-title {
+    font-size: clamp(2rem, 5vw, 3rem);
+    font-weight: 700;
+    margin-bottom: 0.5rem;
+  }
+
+  .cta-text {
+    color: var(--color-text-muted);
+    font-size: 1.125rem;
+    margin-bottom: 2rem;
+  }
+
+  .contact-card {
+    padding: 2rem;
+    max-width: 600px;
+    margin: 0 auto;
+    display: flex;
+    flex-direction: column;
+    gap: 2rem;
+  }
+
+  .contact-email,
+  .contact-socials {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+  }
+
+  .label {
+    font-size: 0.875rem;
+    color: var(--color-text-muted);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+  }
+
+  .email-link {
+    color: var(--color-primary);
+    font-size: 1.25rem;
+    font-weight: 500;
+    text-decoration: none;
+    transition: color 0.2s ease;
+  }
+
+  .email-link:hover {
+    color: var(--color-secondary);
+  }
+
+  .social-links {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1rem;
+    justify-content: center;
+  }
+
+  .social-link {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.75rem 1.25rem;
+    background: var(--color-surface);
+    border: 1px solid var(--glass-border);
+    border-radius: 8px;
+    color: var(--color-text);
+    text-decoration: none;
+    font-size: 0.9375rem;
+    transition: all 0.2s ease;
+  }
+
+  .social-link:hover {
+    background: rgba(255, 255, 255, 0.1);
+    border-color: var(--color-primary);
+    color: var(--color-primary);
+  }
+
+  .social-icon {
+    font-size: 1.125rem;
+  }
+
+  .social-platform {
+    text-transform: capitalize;
+  }
+
+  @media (max-width: 640px) {
+    .contact-card {
+      padding: 1.5rem;
+    }
+
+    .email-link {
+      font-size: 1rem;
+      word-break: break-all;
+    }
+
+    .social-links {
+      flex-direction: column;
+      align-items: stretch;
+    }
+
+    .social-link {
+      justify-content: center;
+    }
+  }
+</style>

package/components/base/Hero.astro

@@ -0,0 +1,228 @@
+---
+/**
+ * Hero - Full-screen hero section component for the home page.
+ * 
+ * Displays the main profile introduction with:
+ * - Avatar image from the public profile
+ * - Name with gradient text styling
+ * - Bio and location information
+ * - Social media links (GitHub, Twitter, Email with icon support)
+ */
+import type { ThemeContext } from '@mintfolio/theme-api';
+import type { VerdantSettings } from '../../settings';
+
+/** Public site data supplied by the containing theme page. */
+interface Props { theme: ThemeContext<VerdantSettings>; }
+import Image from '@mintfolio/core/components/Image.astro';
+
+const { theme } = Astro.props;
+const { profile, social } = theme.site;
+const profileAvatar = profile.avatar;
+---
+
+<section id="hero" class="section-bg">
+  <div class="hero-container">
+    <div class="hero-content">
+      <Image
+        src={profileAvatar}
+        alt={`${profile.name}'s avatar`}
+        class="avatar"
+        width={150}
+        height={150}
+      />
+      
+      <h1 class="name gradient-text">{profile.name}</h1>
+      
+      <p class="bio">{profile.bio}</p>
+      
+      <div class="location">
+        <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"
+          class="location-icon"
+        >
+          <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path>
+          <circle cx="12" cy="10" r="3"></circle>
+        </svg>
+        <span>{profile.location}</span>
+      </div>
+      
+      <nav class="social-links" aria-label="Social media links">
+        {social.map((link) => (
+          <a
+            href={link.url}
+            target="_blank"
+            rel="noopener noreferrer"
+            class="social-link"
+            aria-label={link.platform}
+          >
+            {link.icon === 'github' && (
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="24"
+                height="24"
+                viewBox="0 0 24 24"
+                fill="currentColor"
+              >
+                <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
+              </svg>
+            )}
+            {link.icon === 'mail' && (
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="24"
+                height="24"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              >
+                <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path>
+                <polyline points="22,6 12,13 2,6"></polyline>
+              </svg>
+            )}
+            {link.icon === 'twitter' && (
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="24"
+                height="24"
+                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>
+            )}
+            {!['github', 'mail', 'twitter'].includes(link.icon) && (
+              <span class="fallback-icon">{link.platform.charAt(0).toUpperCase()}</span>
+            )}
+          </a>
+        ))}
+      </nav>
+    </div>
+  </div>
+</section>
+
+<style>
+  section {
+    min-height: 100vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 4rem 1.5rem;
+  }
+
+  .hero-container {
+    max-width: 800px;
+    width: 100%;
+    margin: 0 auto;
+  }
+
+  .hero-content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    gap: 1.5rem;
+  }
+
+  .avatar {
+    width: 150px;
+    height: 150px;
+    border-radius: 50%;
+    object-fit: cover;
+    border: 3px solid var(--glass-border);
+    box-shadow: var(--glow-primary);
+  }
+
+  .name {
+    font-size: clamp(2.5rem, 8vw, 4rem);
+    font-weight: 700;
+    line-height: 1.2;
+    margin: 0;
+    letter-spacing: -0.02em;
+  }
+
+  .bio {
+    font-size: clamp(1rem, 3vw, 1.25rem);
+    color: var(--color-text-muted);
+    max-width: 600px;
+    line-height: 1.6;
+    margin: 0;
+  }
+
+  .location {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    color: var(--color-text-muted);
+    font-size: 0.95rem;
+  }
+
+  .location-icon {
+    opacity: 0.7;
+  }
+
+  .social-links {
+    display: flex;
+    gap: 1rem;
+    margin-top: 0.5rem;
+  }
+
+  .social-link {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 48px;
+    height: 48px;
+    border-radius: 12px;
+    background: var(--color-surface);
+    border: 1px solid var(--glass-border);
+    color: var(--color-text);
+    transition: all 0.2s ease;
+  }
+
+  .social-link:hover {
+    background: rgba(255, 255, 255, 0.1);
+    border-color: rgba(255, 255, 255, 0.2);
+    transform: translateY(-2px);
+  }
+
+  .social-link svg {
+    width: 22px;
+    height: 22px;
+  }
+
+  .fallback-icon {
+    font-size: 1.25rem;
+    font-weight: 600;
+  }
+
+  @media (max-width: 640px) {
+    section {
+      padding: 3rem 1rem;
+    }
+
+    .avatar {
+      width: 120px;
+      height: 120px;
+    }
+
+    .social-links {
+      gap: 0.75rem;
+    }
+
+    .social-link {
+      width: 44px;
+      height: 44px;
+    }
+  }
+</style>