@mintfolio/theme-verdant 0.2.0

package/components/blog/ArticleProse.astro

@@ -0,0 +1,217 @@
+---
+/**
+ * ArticleProse - Blog article content wrapper component.
+ * 
+ * Provides styled prose container for Markdown-rendered blog content with:
+ * - Typography styles for headings, paragraphs, lists, code blocks
+ * - Table wrapping for horizontal scroll on narrow viewports
+ * - Responsive padding adjustments for mobile devices
+ */
+---
+
+<div class="post-content post-shell-card article-prose">
+  <slot />
+</div>
+
+<style>
+  .post-content.article-prose {
+    padding: 2rem;
+    line-height: 1.85;
+    border-radius: var(--radius-lg);
+    background: var(--color-surface);
+    border: 1px solid color-mix(in srgb, var(--color-border) 72%, transparent);
+    box-shadow: var(--shadow-sm);
+  }
+
+  .post-content.article-prose :global(h1),
+  .post-content.article-prose :global(h2),
+  .post-content.article-prose :global(h3),
+  .post-content.article-prose :global(h4),
+  .post-content.article-prose :global(h5),
+  .post-content.article-prose :global(h6) {
+    color: var(--color-text);
+    margin-top: 2rem;
+    margin-bottom: 1rem;
+    font-weight: 600;
+  }
+
+  .post-content.article-prose :global(h1) {
+    font-size: 2rem;
+  }
+
+  .post-content.article-prose :global(h2) {
+    font-size: 1.5rem;
+  }
+
+  .post-content.article-prose :global(h3) {
+    font-size: 1.25rem;
+  }
+
+  .post-content.article-prose :global(p) {
+    margin-bottom: 1rem;
+    color: var(--color-text-muted);
+  }
+
+  .post-content.article-prose :global(a) {
+    color: var(--color-primary);
+    text-decoration: underline;
+    text-underline-offset: 2px;
+  }
+
+  .post-content.article-prose :global(a:hover) {
+    color: var(--color-secondary);
+  }
+
+  .post-content.article-prose :global(ul),
+  .post-content.article-prose :global(ol) {
+    margin-bottom: 1rem;
+    padding-left: 1.5rem;
+    color: var(--color-text-muted);
+  }
+
+  .post-content.article-prose :global(li) {
+    margin-bottom: 0.5rem;
+  }
+
+  .post-content.article-prose :global(:not(pre) > code),
+  .post-content.article-prose :global(li > code),
+  .post-content.article-prose :global(p > code),
+  .post-content.article-prose :global(td > code) {
+    background: color-mix(in srgb, var(--color-primary) 12%, transparent);
+    color: var(--color-primary);
+    padding: 0.125rem 0.375rem;
+    border-radius: 6px;
+    font-size: 0.875em;
+    font-family: 'Fira Code', 'Consolas', monospace;
+    border: 1px solid color-mix(in srgb, var(--color-primary) 16%, transparent);
+  }
+
+  .post-content.article-prose :global(pre:not([data-code-block-enhanced='1'])) {
+    position: relative;
+    background: linear-gradient(180deg, rgba(14, 20, 27, 0.96) 0%, rgba(24, 32, 43, 0.98) 100%);
+    color: #edf2f7;
+    border: 1px solid rgba(148, 163, 184, 0.22);
+    border-radius: var(--radius-md);
+    padding: 1.1rem 1rem 1rem;
+    overflow-x: auto;
+    margin: 1.35rem 0;
+    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.18);
+  }
+
+  .post-content.article-prose :global(pre:not([data-code-block-enhanced='1']) code) {
+    background: none;
+    padding: 0;
+    color: inherit;
+    border: none;
+    display: block;
+    font-size: 0.92rem;
+    line-height: 1.7;
+    white-space: pre;
+  }
+
+  .post-content.article-prose :global(.code-block-shell pre) {
+    margin: 0;
+    padding: 0;
+    background: transparent;
+    border: none;
+    border-radius: 0;
+    box-shadow: none;
+    overflow: auto;
+  }
+
+  .post-content.article-prose :global(pre:not([data-code-block-enhanced='1']) code:not([class])),
+  .post-content.article-prose :global(pre:not([data-code-block-enhanced='1']) code.language-text),
+  .post-content.article-prose :global(pre:not([data-code-block-enhanced='1']) code[class*='language-text']) {
+    color: #f8fafc;
+  }
+
+  .post-content.article-prose :global(blockquote) {
+    border-left: 3px solid var(--color-primary);
+    padding-left: 1rem;
+    margin: 1rem 0;
+    color: var(--color-text-muted);
+    font-style: italic;
+  }
+
+  .post-content.article-prose :global(img) {
+    max-width: 100%;
+    height: auto;
+    border-radius: 8px;
+    margin: 1rem 0;
+  }
+
+  .post-content.article-prose :global(hr) {
+    border: none;
+    border-top: 1px solid rgba(255, 255, 255, 0.1);
+    margin: 2rem 0;
+  }
+
+  .post-content.article-prose :global(.table-scroll-wrap) {
+    margin: 1.5rem 0;
+    overflow-x: auto;
+    border: 1px solid color-mix(in srgb, var(--color-border) 85%, transparent);
+    border-radius: var(--radius-md);
+    background: color-mix(in srgb, var(--color-surface) 96%, var(--color-bg) 4%);
+    box-shadow: var(--shadow-sm);
+    -webkit-overflow-scrolling: touch;
+  }
+
+  .post-content.article-prose :global(table) {
+    width: 100%;
+    min-width: 32rem;
+    border-collapse: separate;
+    border-spacing: 0;
+    margin: 0;
+    background: transparent;
+  }
+
+  .post-content.article-prose :global(thead) {
+    background: color-mix(in srgb, var(--color-primary) 10%, var(--color-surface));
+  }
+
+  .post-content.article-prose :global(th),
+  .post-content.article-prose :global(td) {
+    padding: 0.9rem 1rem;
+    text-align: left;
+    vertical-align: top;
+    border-right: 1px solid color-mix(in srgb, var(--color-border) 75%, transparent);
+    border-bottom: 1px solid color-mix(in srgb, var(--color-border) 75%, transparent);
+  }
+
+  .post-content.article-prose :global(th) {
+    font-weight: 700;
+    color: var(--color-text);
+    white-space: nowrap;
+  }
+
+  .post-content.article-prose :global(td) {
+    color: var(--color-text-muted);
+    line-height: 1.7;
+  }
+
+  .post-content.article-prose :global(tr:last-child td) {
+    border-bottom: none;
+  }
+
+  .post-content.article-prose :global(th:last-child),
+  .post-content.article-prose :global(td:last-child) {
+    border-right: none;
+  }
+
+  @media (max-width: 768px) {
+    .post-content.article-prose {
+      padding: 1.5rem;
+    }
+
+    .post-content.article-prose :global(table) {
+      min-width: 28rem;
+      font-size: 0.92rem;
+    }
+
+    .post-content.article-prose :global(th),
+    .post-content.article-prose :global(td) {
+      padding: 0.8rem 0.9rem;
+    }
+  }
+</style>
+

package/components/blog/CodeBlockEnhancer.astro

@@ -0,0 +1,310 @@
+---
+/**
+ * CodeBlockEnhancer - Syntax-highlighted code block enhancer for blog posts.
+ * 
+ * Transforms plain <pre><code> blocks into feature-rich code editors with:
+ * - macOS-style window chrome (red/yellow/green dots)
+ * - Language label detection and display
+ * - Line numbers with row highlighting
+ * - Copy-to-clipboard functionality with success/error feedback
+ * - Responsive styling for mobile devices
+ * 
+ * Uses global styles and a page-scoped module for all article code blocks.
+ */
+---
+
+<style is:global>
+  .post-content .code-block-shell {
+    --code-block-bg: #0f172a;
+    --code-block-surface: #111827;
+    --code-block-toolbar: #1b2433;
+    --code-block-border: rgba(148, 163, 184, 0.22);
+    --code-block-highlight: rgba(255, 255, 255, 0.05);
+    --code-block-text: #e5eef9;
+    --code-block-muted: #7f8ea8;
+    --code-block-muted-strong: #9fb0cd;
+    --code-block-line-digits: 2;
+    position: relative;
+    margin: 1.5rem 0;
+    overflow: hidden;
+    border: 1px solid var(--code-block-border);
+    border-radius: calc(var(--radius-md) + 2px);
+    background:
+      radial-gradient(circle at top, rgba(96, 165, 250, 0.1), transparent 34%),
+      linear-gradient(180deg, #1a2333 0%, #101827 100%);
+    box-shadow:
+      0 18px 42px rgba(15, 23, 42, 0.22),
+      inset 0 1px 0 rgba(255, 255, 255, 0.04);
+  }
+
+  .post-content .code-block-toolbar {
+    position: relative;
+    display: flex;
+    align-items: center;
+    gap: 0.55rem;
+    min-height: 1.95rem;
+    padding: 0.28rem 0.72rem;
+    border-bottom: 1px solid rgba(148, 163, 184, 0.14);
+    background:
+      linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent),
+      linear-gradient(180deg, #263044 0%, var(--code-block-toolbar) 100%);
+    user-select: none;
+  }
+
+  .post-content .code-block-window-controls {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.34rem;
+    flex-shrink: 0;
+  }
+
+  .post-content .code-block-window-dot {
+    width: 0.6rem;
+    height: 0.6rem;
+    border-radius: 999px;
+    box-shadow:
+      inset 0 0 0 1px rgba(0, 0, 0, 0.14),
+      0 1px 2px rgba(15, 23, 42, 0.2);
+  }
+
+  .post-content .code-block-window-dot.is-red {
+    background: #ff5f57;
+  }
+
+  .post-content .code-block-window-dot.is-yellow {
+    background: #febc2e;
+  }
+
+  .post-content .code-block-window-dot.is-green {
+    background: #28c840;
+  }
+
+  .post-content .code-block-language {
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+    max-width: calc(100% - 6rem);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-family: var(--font-mono);
+    font-size: 0.62rem;
+    font-weight: 600;
+    letter-spacing: 0.1em;
+    text-transform: uppercase;
+    color: var(--code-block-muted-strong);
+    pointer-events: none;
+  }
+
+  .post-content .code-copy-btn {
+    margin-left: auto;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.55rem;
+    height: 1.55rem;
+    padding: 0;
+    border: 1px solid rgba(148, 163, 184, 0.14);
+    border-radius: 0.5rem;
+    background: rgba(255, 255, 255, 0.04);
+    color: var(--code-block-muted-strong);
+    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
+    transition:
+      color var(--transition-fast),
+      border-color var(--transition-fast),
+      background var(--transition-fast),
+      scale var(--transition-fast);
+  }
+
+  .post-content .code-copy-btn:hover {
+    border-color: rgba(148, 163, 184, 0.24);
+    background: rgba(255, 255, 255, 0.08);
+    color: var(--code-block-text);
+  }
+
+  .post-content .code-copy-btn:active {
+    scale: 0.96;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .post-content .code-copy-btn:active {
+      scale: 1;
+    }
+  }
+
+  .post-content .code-copy-btn.is-copied {
+    border-color: rgba(74, 222, 128, 0.45);
+    background: rgba(74, 222, 128, 0.12);
+    color: #86efac;
+  }
+
+  .post-content .code-copy-btn.is-copy-failed {
+    border-color: rgba(248, 113, 113, 0.42);
+    background: rgba(248, 113, 113, 0.12);
+    color: #fda4af;
+    animation: code-copy-failed 0.28s ease;
+  }
+
+  .post-content .code-copy-btn svg {
+    width: 0.8rem;
+    height: 0.8rem;
+  }
+
+  @keyframes code-copy-failed {
+    0% {
+      transform: translateX(0);
+    }
+
+    25% {
+      transform: translateX(-1.5px);
+    }
+
+    50% {
+      transform: translateX(1.5px);
+    }
+
+    75% {
+      transform: translateX(-1px);
+    }
+
+    100% {
+      transform: translateX(0);
+    }
+  }
+
+  .post-content .code-block-scroll {
+    --code-font-size: 0.87rem;
+    --code-line-height: 1.6;
+    display: grid;
+    grid-template-columns: calc(var(--code-block-line-digits) * 1ch + 1.5rem) minmax(0, 1fr);
+    font-family: var(--font-mono);
+    font-size: var(--code-font-size);
+    line-height: var(--code-line-height);
+    background:
+      linear-gradient(180deg, rgba(255, 255, 255, 0.01), transparent),
+      linear-gradient(180deg, var(--code-block-surface) 0%, var(--code-block-bg) 100%);
+  }
+
+  .post-content .code-block-shell pre {
+    min-width: 0;
+    margin: 0;
+    padding: 0;
+    overflow-x: auto !important;
+    overflow-y: hidden !important;
+    border: none;
+    border-radius: 0;
+    background: transparent !important;
+    box-shadow: none;
+    scrollbar-width: thin;
+    scrollbar-color: rgba(148, 163, 184, 0.42) transparent;
+    font: inherit;
+    line-height: var(--code-line-height);
+  }
+
+  .post-content .code-block-shell pre::-webkit-scrollbar {
+    width: 10px;
+    height: 10px;
+    display: block;
+  }
+
+  .post-content .code-block-shell pre::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  .post-content .code-block-shell pre::-webkit-scrollbar-thumb {
+    border: 2px solid transparent;
+    border-radius: 999px;
+    background: rgba(148, 163, 184, 0.36);
+    background-clip: padding-box;
+  }
+
+  .post-content .code-block-shell pre::-webkit-scrollbar-thumb:hover {
+    background: rgba(148, 163, 184, 0.5);
+    background-clip: padding-box;
+  }
+
+  .post-content .code-block-shell pre code {
+    display: block;
+    width: max-content;
+    min-width: 100%;
+    padding: 0.6rem 0;
+    border: 0;
+    border-radius: 0;
+    background: transparent;
+    color: var(--code-block-text);
+    font: inherit;
+    white-space: pre;
+  }
+
+  .post-content .code-block-shell .code-block-row {
+    display: block;
+    min-height: calc(var(--code-font-size) * var(--code-line-height));
+    padding: 0 0.85rem;
+    line-height: inherit;
+  }
+
+  .post-content .code-block-shell .code-block-row:hover {
+    background-color: var(--code-block-highlight);
+  }
+
+  .post-content .code-block-gutter {
+    padding: 0.6rem 0;
+    border-right: 1px solid rgba(148, 163, 184, 0.14);
+    background: var(--code-block-bg);
+    color: var(--code-block-muted);
+    text-align: right;
+    user-select: none;
+  }
+
+  .post-content .code-block-line-number {
+    display: block;
+    padding: 0 0.65rem;
+    height: calc(var(--code-font-size) * var(--code-line-height));
+    line-height: inherit;
+    font-variant-numeric: tabular-nums;
+  }
+
+  .post-content .code-block-shell :where(.code-block-row span) {
+    white-space: inherit;
+  }
+
+  @media (max-width: 640px) {
+    .post-content .code-block-shell {
+      margin: 1.2rem 0;
+      border-radius: var(--radius-md);
+    }
+
+    .post-content .code-block-toolbar {
+      min-height: 1.82rem;
+      padding: 0.24rem 0.62rem;
+    }
+
+    .post-content .code-block-window-controls {
+      gap: 0.26rem;
+    }
+
+    .post-content .code-block-window-dot {
+      width: 0.52rem;
+      height: 0.52rem;
+    }
+
+    .post-content .code-block-language {
+      max-width: calc(100% - 5.45rem);
+      font-size: 0.58rem;
+      letter-spacing: 0.08em;
+    }
+
+    .post-content .code-copy-btn {
+      width: 1.4rem;
+      height: 1.4rem;
+    }
+
+    .post-content .code-block-scroll {
+      --code-font-size: 0.78rem;
+    }
+  }
+</style>
+
+<script>
+  import '../../scripts/codeBlocks';
+</script>

package/components/blog/PostCard.astro

@@ -0,0 +1,98 @@
+---
+import Image from '@mintfolio/core/components/Image.astro';
+import type { PostSummary } from '@mintfolio/theme-api';
+import { createSearchEntry } from '@mintfolio/theme-api/search';
+
+interface Props {
+  /** Core-projected metadata; includes no password or protected plaintext. */
+  post: PostSummary;
+  index: number;
+  pageSize: number;
+  variant: 'home' | 'blog';
+}
+
+const { post, index, pageSize, variant } = Astro.props;
+const Heading = variant === 'home' ? 'h3' : 'h2';
+const search = createSearchEntry(post);
+const publishedAt = new Date(post.publishedAt);
+---
+
+<article
+  class:list={['post-card', { 'home-card': variant === 'home', 'has-cover': post.cover, 'initially-hidden': index >= pageSize }]}
+  data-id={post.id}
+  data-url={post.url}
+  data-title={search.title}
+  data-description={search.description}
+  data-tags={JSON.stringify(search.tags)}
+  data-category={search.category}
+>
+  <a href={post.url} data-article-link class="post-link" draggable="false">
+    {post.cover && (
+      <div class="post-cover">
+        <Image src={post.cover} alt="" loading="lazy" width={800} height={450} draggable="false"
+          layout="constrained" widths={[400, 800]} sizes="(max-width: 600px) calc(100vw - 5rem), (max-width: 900px) 29vw, 340px" />
+      </div>
+    )}
+    <div class="post-content">
+      <div class="post-meta">
+        <span class="post-category">{post.category.label}</span>
+        <time class="post-date" datetime={post.publishedAt}>{publishedAt.toLocaleDateString('zh-CN', { year: 'numeric', month: 'long', day: 'numeric' })}</time>
+      </div>
+      <Heading class="post-title">{post.protected && <span class="post-lock" aria-label="加密文章">🔒 </span>}{post.title}</Heading>
+      <p class="post-description">{post.description}</p>
+      {post.tags?.length ? (
+        <div class="post-tags">{post.tags.map((tag) => <span class="tag">{tag.label}</span>)}</div>
+      ) : null}
+    </div>
+    <span class="post-arrow" aria-hidden="true">→</span>
+  </a>
+</article>
+
+<style>
+  .post-card {
+    --card-color: var(--color-primary);
+    position: relative;
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-lg);
+    background: var(--color-surface);
+    box-shadow: var(--shadow-sm);
+    transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
+    overflow: hidden;
+  }
+  .post-card:nth-child(3n + 2) { --card-color: var(--color-accent); }
+  .post-card:nth-child(3n + 3) { --card-color: var(--color-play); }
+  .post-card::before { content: ''; position: absolute; left: 0; top: 1.5rem; bottom: 1.5rem; width: 4px; background: var(--card-color); border-radius: 0 4px 4px 0; }
+  .post-card:hover { transform: translateY(-3px); border-color: var(--color-primary); box-shadow: 5px 5px 0 color-mix(in srgb, var(--card-color) 22%, var(--color-bg)); }
+  .post-card:focus-within { border-color: var(--color-primary); }
+  .post-card.initially-hidden, .post-card.hidden { display: none; }
+  .post-link { display: flex; align-items: center; gap: 1.4rem; padding: 1.4rem 1.5rem; min-height: 210px; text-decoration: none; }
+  .post-link:focus-visible { outline-offset: -4px; border-radius: inherit; }
+  .post-content { flex: 1; min-width: 0; order: 0; }
+  .post-meta { display: flex; align-items: center; gap: .65rem; flex-wrap: wrap; margin-bottom: .7rem; }
+  .post-category { color: var(--color-primary); background: var(--color-tag-bg); padding: .15rem .6rem; border-radius: 6px; font-size: .66rem; font-weight: 650; }
+  .post-date { font: .64rem var(--font-mono); color: var(--color-text-muted); }
+  .post-title { font-size: 1.2rem; font-weight: 700; letter-spacing: -.025em; color: var(--color-text-headline); margin-bottom: .6rem; line-height: 1.5; transition: color var(--transition-fast); }
+  .post-card:hover .post-title { color: var(--color-primary); }
+  .post-description { font-size: .83rem; color: var(--color-text-muted); line-height: 1.75; margin-bottom: .9rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
+  .post-tags { display: flex; flex-wrap: wrap; gap: .3rem .65rem; }
+  .tag { color: var(--color-text-muted); font-size: .65rem; }
+  .tag::before { content: '#'; color: var(--color-primary); margin-right: .15rem; }
+  .post-cover { order: 2; flex: 0 0 29%; width: 29%; height: 165px; border-radius: var(--radius-md); overflow: hidden; background: var(--color-bg-alt); }
+  .post-cover img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
+  .post-card:hover .post-cover img { transform: scale(1.04); }
+  .post-arrow { flex: 0 0 32px; order: 1; width: 32px; height: 32px; border: 1px solid var(--color-border); border-radius: 50%; color: var(--color-primary); display: grid; place-items: center; font-size: 1.1rem; transition: background var(--transition-fast), color var(--transition-fast); }
+  .post-card:hover .post-arrow { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-on-primary); }
+  @media (max-width: 600px) {
+    .post-link { flex-wrap: wrap; padding: 1rem; gap: 1rem; }
+    .post-cover { flex: 0 0 100%; width: 100%; height: 170px; order: -1; }
+    .post-content { flex: 1 1 0; padding-left: .2rem; }
+    .post-title { font-size: 1.06rem; }
+    .post-arrow { align-self: flex-end; }
+    .post-meta { gap: .5rem; }
+    .post-card::before { top: auto; height: 50px; bottom: 1rem; }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .post-card, .post-cover img, .post-arrow { transition: none; }
+    .post-card:hover, .post-card:hover .post-cover img { transform: none; }
+  }
+</style>