@jet-w/astro-blog 0.2.7 → 0.2.9

package/README.md

@@ -0,0 +1,267 @@
+# @jet-w/astro-blog
+
+A modern, feature-rich Astro blog theme with Vue and Tailwind CSS support. Provides a complete blogging solution with multi-language support, rich markdown capabilities, and interactive components.
+
+**Official Website**: [https://jet-w.github.io/jet-w.astro-blog/](https://jet-w.github.io/jet-w.astro-blog/)
+
+## Features
+
+- **Multi-Language Support (i18n)** - Built-in internationalization with configurable locales
+- **Blog System** - Posts, tags, categories, archives, and pagination
+- **Search** - Full-text search powered by Fuse.js
+- **RSS Feed** - Automatic RSS feed generation
+- **Dark Mode** - Theme switching support
+- **Rich Markdown** - Code highlighting, math equations (KaTeX), Mermaid diagrams, custom containers
+- **Interactive Components** - Slides, ECharts, video embeds (YouTube, Bilibili)
+- **Responsive Design** - Mobile-friendly layouts with Tailwind CSS
+
+## Installation
+
+```bash
+npm install @jet-w/astro-blog
+```
+
+## Peer Dependencies
+
+Make sure you have these packages installed:
+
+```bash
+npm install astro @astrojs/mdx @astrojs/rss @astrojs/tailwind @astrojs/vue tailwindcss vue
+```
+
+## Quick Start
+
+### 1. Configure Astro
+
+Add the integration to your `astro.config.mjs`:
+
+```js
+import { defineConfig } from 'astro/config';
+import { astroBlog } from '@jet-w/astro-blog';
+
+export default defineConfig({
+  integrations: [astroBlog()],
+});
+```
+
+### 2. Set Up Content Collections
+
+Create `src/content/config.ts`:
+
+```ts
+import { defineCollection, z } from 'astro:content';
+
+const posts = defineCollection({
+  type: 'content',
+  schema: z.object({
+    title: z.string(),
+    description: z.string().optional(),
+    date: z.date(),
+    tags: z.array(z.string()).optional(),
+    categories: z.array(z.string()).optional(),
+    draft: z.boolean().optional(),
+  }),
+});
+
+export const collections = { posts };
+```
+
+### 3. Create Your First Post
+
+Create a markdown file in `src/content/posts/`:
+
+```markdown
+---
+title: Hello World
+date: 2024-01-01
+tags: [hello, first-post]
+---
+
+Welcome to my blog!
+```
+
+## Configuration
+
+### Site Configuration
+
+Create `src/config/site.ts`:
+
+```ts
+import { defineSiteConfig } from '@jet-w/astro-blog/config';
+
+export default defineSiteConfig({
+  title: 'My Blog',
+  description: 'A blog about...',
+  author: 'Your Name',
+  lang: 'en',
+});
+```
+
+### i18n Configuration
+
+Create `src/config/i18n.ts`:
+
+```ts
+import { defineI18nConfig } from '@jet-w/astro-blog/config';
+
+export default defineI18nConfig({
+  defaultLocale: 'en',
+  locales: ['en', 'zh-cn'],
+  translations: {
+    en: {
+      'nav.home': 'Home',
+      'nav.blog': 'Blog',
+      // ...
+    },
+    'zh-cn': {
+      'nav.home': '首页',
+      'nav.blog': '博客',
+      // ...
+    },
+  },
+});
+```
+
+### Sidebar Configuration
+
+Create `src/config/sidebar.ts`:
+
+```ts
+import { defineSidebarConfig } from '@jet-w/astro-blog/config';
+
+export default defineSidebarConfig({
+  // Manual configuration
+  items: [
+    { label: 'Getting Started', link: '/docs/getting-started' },
+    { label: 'Guide', items: [...] },
+  ],
+  // Or use auto-scan
+  autoScan: {
+    directory: 'docs',
+  },
+});
+```
+
+## Layouts
+
+The theme provides several layouts:
+
+- **BaseLayout** - Standard page layout
+- **PageLayout** - Blog post layout with sidebar
+- **AboutLayout** - Profile/about page layout
+- **SlidesLayout** - Presentation slides layout
+
+```astro
+---
+import { PageLayout } from '@jet-w/astro-blog/layouts';
+---
+
+<PageLayout title="My Page">
+  <p>Page content here</p>
+</PageLayout>
+```
+
+## Components
+
+Import components as needed:
+
+```astro
+---
+import { SearchBox, ThemeToggle, LanguageSwitcher } from '@jet-w/astro-blog/components';
+---
+
+<SearchBox />
+<ThemeToggle />
+<LanguageSwitcher />
+```
+
+### Available Components
+
+- **UI**: SearchBox, ThemeToggle, LanguageSwitcher, MobileMenu, Pagination
+- **Blog**: NavigationTabs, RelatedPosts, TagList
+- **Media**: Video, YouTube, Bilibili, Slides
+- **About**: TagCard, SocialLinks, Timeline
+
+## Markdown Extensions
+
+### Custom Containers
+
+```markdown
+:::tip
+This is a tip
+:::
+
+:::warning
+This is a warning
+:::
+
+:::danger
+This is dangerous
+:::
+
+:::details Summary
+Hidden content here
+:::
+```
+
+### Math Equations
+
+```markdown
+Inline: $E = mc^2$
+
+Block:
+$$
+\int_0^\infty e^{-x^2} dx = \frac{\sqrt{\pi}}{2}
+$$
+```
+
+### Mermaid Diagrams
+
+````markdown
+```mermaid
+graph TD
+    A[Start] --> B{Decision}
+    B -->|Yes| C[OK]
+    B -->|No| D[Cancel]
+```
+````
+
+### Tabs
+
+```markdown
+:::tabs
+@tab JavaScript
+console.log('Hello');
+
+@tab Python
+print('Hello')
+:::
+```
+
+## Project Structure
+
+```
+src/
+├── components/     # Vue and Astro components
+├── config/         # Configuration files
+├── layouts/        # Layout templates
+├── pages/          # Route pages
+├── plugins/        # Markdown/MDX plugins
+├── styles/         # Global styles
+├── types/          # TypeScript definitions
+└── utils/          # Utility functions
+```
+
+## License
+
+[Apache 2.0](./LICENSE)
+
+## Author
+
+Haiyue
+
+## Links
+
+- [Official Website](https://jet-w.github.io/jet-w.astro-blog/)
+- [GitHub Repository](https://github.com/jet-w/jet-w.astro-blog)
+- [NPM Package](https://www.npmjs.com/package/@jet-w/astro-blog)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jet-w/astro-blog",
-  "version": "0.2.7",
+  "version": "0.2.9",
   "description": "A modern Astro blog theme with Vue and Tailwind CSS support",
   "type": "module",
   "exports": {
@@ -44,7 +44,8 @@
     "src/types",
     "src/utils",
     "src/config",
-    "templates"
+    "templates",
+    "README.md"
   ],
   "scripts": {
     "build": "tsup",

package/src/components/ui/SearchBox.vue

@@ -36,7 +36,7 @@
             @click="handleResultClick"
           >
             <h4 class="text-sm font-medium text-slate-900 dark:text-slate-100 mb-1" v-html="highlightText(result.title)"></h4>
-            <p class="text-xs text-slate-600 dark:text-slate-400 line-clamp-2" v-html="highlightText(result.description)"></p>
+            <p class="text-xs text-slate-600 dark:text-slate-400 line-clamp-2" v-html="highlightText(getMatchedContent(result))"></p>
             <div class="flex flex-wrap gap-1 mt-2">
               <span
                 v-for="tag in result.tags.slice(0, 3)"
@@ -138,6 +138,38 @@ const handleResultClick = () => {
   searchResults.value = []
 }
 
+// 获取匹配的内容片段，优先显示匹配到的内容上下文
+const getMatchedContent = (result: SearchResult): string => {
+  const query = searchQuery.value.toLowerCase()
+
+  // 如果标题或描述匹配，优先显示描述
+  if (result.title.toLowerCase().includes(query) || result.description.toLowerCase().includes(query)) {
+    return result.description || result.content.substring(0, 150)
+  }
+
+  // 如果内容匹配，显示匹配位置的上下文
+  if (result.content) {
+    const contentLower = result.content.toLowerCase()
+    const matchIndex = contentLower.indexOf(query)
+
+    if (matchIndex !== -1) {
+      // 提取匹配位置前后的上下文
+      const contextStart = Math.max(0, matchIndex - 50)
+      const contextEnd = Math.min(result.content.length, matchIndex + query.length + 100)
+      let snippet = result.content.substring(contextStart, contextEnd)
+
+      // 添加省略号
+      if (contextStart > 0) snippet = '...' + snippet
+      if (contextEnd < result.content.length) snippet = snippet + '...'
+
+      return snippet
+    }
+  }
+
+  // 默认返回描述或内容开头
+  return result.description || result.content.substring(0, 150)
+}
+
 const highlightText = (text: string) => {
   if (!searchQuery.value || !text) return text || ''
 

package/src/pages/search-index.json.ts

@@ -1,17 +1,55 @@
 import type { APIRoute } from 'astro';
 import { getCollection } from 'astro:content';
 
+// 从 Markdown 内容中提取纯文本
+function extractPlainText(markdown: string): string {
+  if (!markdown) return '';
+
+  return markdown
+    // 移除代码块
+    .replace(/```[\s\S]*?```/g, '')
+    .replace(/`[^`]*`/g, '')
+    // 移除 HTML 标签
+    .replace(/<[^>]*>/g, '')
+    // 移除图片
+    .replace(/!\[.*?\]\(.*?\)/g, '')
+    // 移除链接但保留文本
+    .replace(/\[([^\]]*)\]\([^)]*\)/g, '$1')
+    // 移除标题标记
+    .replace(/^#{1,6}\s+/gm, '')
+    // 移除粗体/斜体标记
+    .replace(/\*\*([^*]*)\*\*/g, '$1')
+    .replace(/\*([^*]*)\*/g, '$1')
+    .replace(/__([^_]*)__/g, '$1')
+    .replace(/_([^_]*)_/g, '$1')
+    // 移除引用标记
+    .replace(/^>\s+/gm, '')
+    // 移除列表标记
+    .replace(/^[\s]*[-*+]\s+/gm, '')
+    .replace(/^[\s]*\d+\.\s+/gm, '')
+    // 移除水平线
+    .replace(/^[-*_]{3,}$/gm, '')
+    // 移除多余空白
+    .replace(/\n{3,}/g, '\n\n')
+    .trim();
+}
+
 export const GET: APIRoute = async () => {
   const posts = await getCollection('posts', ({ data }) => !data.draft);
 
-  const searchIndex = posts.map(post => ({
-    title: post.data.title,
-    description: post.data.description || '',
-    url: `/posts/${post.id.toLowerCase()}`,
-    content: post.body?.substring(0, 500) || '', // 取前500字符作为搜索内容
-    tags: post.data.tags || [],
-    categories: post.data.categories || []
-  }));
+  const searchIndex = posts.map(post => {
+    // 提取纯文本内容用于搜索
+    const plainContent = extractPlainText(post.body || '');
+
+    return {
+      title: post.data.title,
+      description: post.data.description || '',
+      url: `/posts/${post.id.toLowerCase()}`,
+      content: plainContent, // 完整的纯文本内容
+      tags: post.data.tags || [],
+      categories: post.data.categories || []
+    };
+  });
 
   return new Response(JSON.stringify(searchIndex), {
     headers: {