@jet-w/astro-blog 0.2.0 → 0.2.1

package/src/plugins/remark-protect-code.mjs

@@ -0,0 +1,69 @@
+/**
+ * Remark plugin to protect code blocks from directive processing
+ * This plugin runs BEFORE other plugins to replace ::: in code blocks
+ * with a placeholder, then a rehype plugin restores them after processing
+ */
+
+// Unique placeholder that won't appear in normal content
+const COLON_PLACEHOLDER = '___TRIPLE_COLON___';
+
+export function remarkProtectCode() {
+  return (tree) => {
+    // Visit all code nodes and replace ::: with placeholder
+    visitCode(tree);
+  };
+}
+
+function visitCode(node) {
+  if (node.type === 'code' && node.value) {
+    // Replace all ::: patterns in code blocks with placeholder
+    node.value = node.value.replace(/:::/g, COLON_PLACEHOLDER);
+  }
+
+  // Recursively visit children
+  if (node.children) {
+    for (const child of node.children) {
+      visitCode(child);
+    }
+  }
+}
+
+/**
+ * Rehype plugin to restore ::: in code blocks after directive processing
+ */
+export function rehypeRestoreCode() {
+  return (tree) => {
+    visitElement(tree);
+  };
+}
+
+function visitElement(node) {
+  // Handle text nodes
+  if (node.type === 'text' && node.value) {
+    node.value = node.value.replace(new RegExp(COLON_PLACEHOLDER, 'g'), ':::');
+  }
+
+  // Handle raw HTML nodes
+  if (node.type === 'raw' && node.value) {
+    node.value = node.value.replace(new RegExp(COLON_PLACEHOLDER, 'g'), ':::');
+  }
+
+  // Handle element nodes with properties (like code elements)
+  if (node.type === 'element') {
+    // Check for text content in code elements
+    if (node.children) {
+      for (const child of node.children) {
+        visitElement(child);
+      }
+    }
+  }
+
+  // Recursively visit children
+  if (node.children) {
+    for (const child of node.children) {
+      visitElement(child);
+    }
+  }
+}
+
+export { COLON_PLACEHOLDER };

package/src/styles/global.css

@@ -248,13 +248,47 @@
   }
 
   .container-details .container-title {
-    @apply text-purple-800 dark:text-purple-200 bg-purple-100 dark:bg-purple-800/30;
+    @apply text-purple-800 dark:text-purple-200 bg-purple-100 dark:bg-purple-800/30 cursor-pointer select-none;
   }
 
   .container-details .container-content {
     @apply text-purple-700 dark:text-purple-300;
   }
 
+  /* details 展开/折叠图标 */
+  .container-details > summary.container-title {
+    @apply list-none relative pr-8;
+  }
+
+  /* 移除默认的三角形图标 (Safari) */
+  .container-details > summary.container-title::-webkit-details-marker {
+    display: none;
+  }
+
+  /* 自定义展开/折叠箭头图标 */
+  .container-details > summary.container-title::after {
+    content: '';
+    @apply absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 transition-transform duration-200;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237c3aed' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E");
+    background-size: contain;
+    background-repeat: no-repeat;
+  }
+
+  /* 深色模式下的箭头颜色 */
+  .dark .container-details > summary.container-title::after {
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23c4b5fd' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E");
+  }
+
+  /* 展开状态时旋转箭头 */
+  .container-details[open] > summary.container-title::after {
+    transform: translateY(-50%) rotate(90deg);
+  }
+
+  /* 悬停效果 */
+  .container-details > summary.container-title:hover {
+    @apply bg-purple-200 dark:bg-purple-700/40;
+  }
+
   /* 容器内的段落样式 */
   .custom-container .container-content p {
     @apply mb-3 last:mb-0;

package/templates/default/.claude/ralph-loop.local.md

@@ -0,0 +1,48 @@
+---
+active: false
+iteration: 2
+max_iterations: 20
+completion_promise: "DONE"
+started_at: "2026-01-29T01:25:08Z"
+completed_at: "2026-01-29T01:48:00Z"
+---
+
+DONE
+
+## Issue Fixed
+
+The i18n URL routing and navigation link issue has been resolved.
+
+### Root Cause Analysis
+
+When English is set as the default locale with `prefixDefaultLocale: false`:
+- English pages use URLs without prefix: `/posts/...`
+- Chinese pages should use URLs with prefix: `/zh-CN/posts/...`
+
+However, the navigation menu and sidebar tree links in the zh-CN locale config were missing the `/zh-CN/` prefix, causing navigation links to point to the wrong locale.
+
+### Files Modified
+
+1. **`templates/default/src/config/locales/zh-CN/menu.ts`**
+   - Updated all menu links to include `/zh-CN/` prefix
+   - Changed `href: '/'` to `href: '/zh-CN/'`
+   - Changed `href: '/posts/...'` to `href: '/zh-CN/posts/...'`
+   - Changed `href: '/slides'` to `href: '/zh-CN/slides'`
+   - Changed `href: '/about'` to `href: '/zh-CN/about'`
+
+2. **`templates/default/src/config/locales/zh-CN/sidebar.ts`**
+   - Updated sidebar group titles to Chinese: '快速入门', '使用指南', '配置文档'
+   - Updated comments to Chinese
+
+3. **`src/components/layout/Sidebar.astro`**
+   - Fixed all tree links to use `${localePrefix}/posts/...` instead of hardcoded `/posts/...`
+   - This ensures sidebar tree navigation respects the current locale
+
+### URL Behavior (Correct)
+
+| Language | URL Pattern |
+|----------|-------------|
+| English (default) | `/posts/...`, `/slides`, `/about` |
+| Chinese | `/zh-CN/posts/...`, `/zh-CN/slides`, `/zh-CN/about` |
+
+This is the expected behavior with `prefixDefaultLocale: false`.

package/templates/default/astro.config.mjs

@@ -9,6 +9,7 @@ import rehypeRaw from 'rehype-raw';
 
 // Import plugins and integration from @jet-w/astro-blog
 import { astroBlog, defineI18nConfig } from '@jet-w/astro-blog';
+import { remarkProtectCode, rehypeRestoreCode } from '@jet-w/astro-blog/plugins/remark-protect-code.mjs';
 import { remarkContainers } from '@jet-w/astro-blog/plugins/remark-containers.mjs';
 import { remarkMermaid } from '@jet-w/astro-blog/plugins/remark-mermaid.mjs';
 import { rehypeCleanContainers } from '@jet-w/astro-blog/plugins/rehype-clean-containers.mjs';
@@ -23,15 +24,15 @@ import { enConfig } from './src/config/locales/en';
 const i18nConfig = defineI18nConfig({
   defaultLocale: 'en',
   locales: [
-    { code: 'zh-CN', name: '中文', htmlLang: 'zh-CN', dateLocale: 'zh-CN' },
     { code: 'en', name: 'English', htmlLang: 'en', dateLocale: 'en-US' },
+    { code: 'zh-CN', name: '中文', htmlLang: 'zh-CN', dateLocale: 'zh-CN' },
   ],
   routing: {
     prefixDefaultLocale: false, // en (default) uses /posts, zh-CN uses /zh-CN/posts
   },
   localeConfigs: {
-    'zh-CN': zhCNConfig,
     'en': enConfig,
+    'zh-CN': zhCNConfig,
   },
 });
 
@@ -47,9 +48,10 @@ export default defineConfig({
   ],
   markdown: {
     remarkPlugins: [
-      remarkDirective,
+      remarkProtectCode,  // Must run FIRST to protect code blocks
       remarkMath,
-      remarkContainers,
+      remarkDirective,    // Parse ::: syntax into directive nodes
+      remarkContainers,   // Handle container syntax (works with both plain text and directive nodes)
       remarkMermaid,
     ],
     rehypePlugins: [
@@ -58,6 +60,7 @@ export default defineConfig({
       rehypeCleanContainers,
       rehypeTabs,
       rehypeRelativeLinks,
+      rehypeRestoreCode,  // Must run LAST to restore ::: in code blocks
     ],
     shikiConfig: {
       theme: 'github-dark',
@@ -69,5 +72,11 @@ export default defineConfig({
   base: '/',
   build: {
     assets: 'assets'
+  },
+  vite: {
+    resolve: {
+      // Help Vite resolve peer dependencies from injected routes
+      dedupe: ['@astrojs/rss', 'astro']
+    }
   }
 });

package/templates/default/content/posts/blog_docs_en/{get-started → 01.get-started}/01-intro.md

@@ -2,7 +2,7 @@
 title: Introduction
 description: What is Astro Blog and why should you use it?
 pubDate: 2025-01-01
-author: Astro Blog
+author: jet-w
 categories:
   - Documentation
 tags:

package/templates/default/content/posts/blog_docs_en/{get-started → 01.get-started}/02-install.md

@@ -2,7 +2,7 @@
 title: Installation
 description: Set up your development environment and install Astro Blog
 pubDate: 2025-01-01
-author: Astro Blog
+author: jet-w
 categories:
   - Documentation
 tags:

package/templates/default/content/posts/blog_docs_en/{get-started → 01.get-started}/03-create-post.md

@@ -2,7 +2,7 @@
 title: Create Your First Post
 description: Write and publish your first blog article
 pubDate: 2025-01-01
-author: Astro Blog
+author: jet-w
 categories:
   - Documentation
 tags:

package/templates/default/content/posts/blog_docs_en/{get-started → 01.get-started}/04-structure.md

@@ -2,7 +2,7 @@
 title: Project Structure
 description: Understand how files and folders are organized
 pubDate: 2025-01-01
-author: Astro Blog
+author: jet-w
 categories:
   - Documentation
 tags:

package/templates/default/content/posts/blog_docs_en/01.get-started/05-deploy.md

@@ -0,0 +1,208 @@
+---
+title: Deployment
+description: Build and deploy your blog to GitHub Pages
+pubDate: 2025-01-01
+author: jet-w
+categories:
+  - Documentation
+tags:
+  - Getting Started
+  - Deployment
+---
+
+# Deployment
+
+Time to share your blog with the world! This guide covers deploying to GitHub Pages.
+
+## Build for Production
+
+First, create a production build:
+
+```bash
+npm run build
+```
+
+This creates a `dist/` folder with static files:
+
+```
+dist/
+├── index.html
+├── posts/
+│   └── hello-world/
+│       └── index.html
+├── assets/
+│   ├── styles.css
+│   └── scripts.js
+└── ...
+```
+
+## Preview Locally
+
+Test the build before deploying:
+
+```bash
+npm run preview
+```
+
+Visit `http://localhost:4321` to verify everything works.
+
+## Deploy to GitHub Pages
+
+### Step 1: Configure Astro
+
+Update your `astro.config.mjs`:
+
+```javascript
+import { defineConfig } from 'astro/config';
+
+export default defineConfig({
+  site: 'https://username.github.io',
+  base: '/repo-name/',  // Only if NOT using custom domain
+});
+```
+
+::: tip Custom Domain
+If using a custom domain (e.g., `myblog.com`), set `base: '/'` or remove it entirely.
+:::
+
+### Step 2: Create GitHub Actions Workflow
+
+Create `.github/workflows/deploy.yml`:
+
+```yaml
+name: Deploy to GitHub Pages
+
+on:
+  push:
+    branches: [main]
+  workflow_dispatch:
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+concurrency:
+  group: "pages"
+  cancel-in-progress: false
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: 'npm'
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Build
+        run: npm run build
+
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: dist/
+
+  deploy:
+    needs: build
+    runs-on: ubuntu-latest
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4
+```
+
+### Step 3: Enable GitHub Pages
+
+1. Go to your repository on GitHub
+2. Navigate to **Settings** → **Pages**
+3. Under "Build and deployment", select **GitHub Actions** as the source
+4. Push your code to the `main` branch
+
+Your site will be available at `https://username.github.io/repo-name/`
+
+### Step 4: Custom Domain (Optional)
+
+To use a custom domain:
+
+1. **Add CNAME file**: Create `public/CNAME` with your domain:
+   ```
+   myblog.com
+   ```
+
+2. **Configure DNS**: Add these records at your domain registrar:
+   - **A records** (for apex domain like `myblog.com`):
+     ```
+     185.199.108.153
+     185.199.109.153
+     185.199.110.153
+     185.199.111.153
+     ```
+   - **CNAME record** (for `www` subdomain):
+     ```
+     www -> username.github.io
+     ```
+
+3. **Update Astro config**:
+   ```javascript
+   export default defineConfig({
+     site: 'https://myblog.com',
+     // No base needed for custom domain
+   });
+   ```
+
+4. **Enable in GitHub**: In repository Settings → Pages, add your custom domain
+
+::: info SSL Certificate
+GitHub automatically provisions a free SSL certificate. It may take up to 24 hours.
+:::
+
+## Deployment Checklist
+
+Before deploying, verify:
+
+- [ ] `npm run build` completes without errors
+- [ ] `npm run preview` shows site correctly
+- [ ] All links work (no broken links)
+- [ ] Images load properly
+- [ ] Meta tags are set (title, description)
+- [ ] Favicon is configured
+
+## Continuous Deployment
+
+Once configured, your site updates automatically:
+
+```bash
+git add .
+git commit -m "Add new blog post"
+git push origin main
+# Site automatically updates in ~1-2 minutes!
+```
+
+## Other Deployment Options
+
+This blog can be deployed to any static hosting platform:
+
+- **Vercel** - Zero-config Astro support, global CDN
+- **Netlify** - Easy setup with form handling
+- **Cloudflare Pages** - Fast edge network, free tier
+- **AWS S3 + CloudFront** - Scalable cloud hosting
+- **Firebase Hosting** - Google's hosting platform
+
+For detailed instructions on these platforms, refer to the [Astro Deployment Guides](https://docs.astro.build/en/guides/deploy/).
+
+---
+
+Congratulations! You've completed the Get Started guide.
+
+Continue learning with the [Writing Guide](/posts/blog_docs_en/02.guide) to master content creation.

package/templates/default/content/posts/blog_docs_en/{get-started → 01.get-started}/README.md

@@ -2,7 +2,7 @@
 title: Get Started
 description: Begin your journey with Astro Blog - from installation to deployment
 pubDate: 2025-01-01
-author: Astro Blog
+author: jet-w
 categories:
   - Documentation
 tags: