@jet-w/astro-blog 0.1.5 → 0.2.0

package/templates/default/content/posts/blog_docs_en/get-started/README.md

@@ -0,0 +1,52 @@
+---
+title: Get Started
+description: Begin your journey with Astro Blog - from installation to deployment
+pubDate: 2025-01-01
+author: Astro Blog
+categories:
+  - Documentation
+tags:
+  - Getting Started
+  - Tutorial
+---
+
+# Get Started
+
+Welcome! This guide will walk you through setting up your Astro Blog from scratch.
+
+::: tip Who Is This For?
+This tutorial is designed for beginners. Even if you're new to Astro or static site generators, you'll be able to follow along step by step.
+:::
+
+## Learning Path
+
+Follow these chapters in order:
+
+| Step | Chapter | What You'll Learn |
+|------|---------|-------------------|
+| 1 | [Introduction](./01-intro) | What Astro Blog is and its features |
+| 2 | [Installation](./02-install) | Set up Node.js and install the project |
+| 3 | [First Post](./03-create-post) | Write and publish your first article |
+| 4 | [Project Structure](./04-structure) | Understand how files are organized |
+| 5 | [Deployment](./05-deploy) | Build and deploy to the web |
+
+## Prerequisites
+
+Before starting, make sure you have:
+
+- **Node.js 18+** installed on your computer
+- A **code editor** (VS Code recommended)
+- Basic familiarity with the **command line**
+
+::: info Don't Have Node.js?
+Download it from [nodejs.org](https://nodejs.org). Choose the LTS (Long Term Support) version.
+:::
+
+## Time Required
+
+- **Quick setup**: ~5 minutes
+- **Full tutorial**: ~30 minutes
+
+---
+
+Ready? Let's start with the [Introduction](./01-intro)!

package/templates/default/content/posts/blog_docs_en/guide/README.md

@@ -0,0 +1,59 @@
+---
+title: Writing Guide
+description: Master content creation with Markdown, components, and advanced features
+pubDate: 2025-01-01
+author: Astro Blog
+categories:
+  - Documentation
+tags:
+  - Guide
+  - Writing
+---
+
+# Writing Guide
+
+Learn how to create beautiful, engaging content for your blog.
+
+## Markdown Basics
+
+Start with the fundamentals:
+
+| Guide | Description |
+|-------|-------------|
+| [Markdown Essentials](./markdown/) | Core syntax you'll use every day |
+| [Containers](./markdown/02-containers) | Tips, warnings, and callout boxes |
+| [Code Blocks](./markdown/03-code-blocks) | Syntax highlighting and features |
+
+## Advanced Features
+
+Take your content to the next level:
+
+| Feature | Description |
+|---------|-------------|
+| [Mermaid Diagrams](./features/01-mermaid) | Flowcharts, sequences, and more |
+| [LaTeX Math](./features/02-latex) | Mathematical formulas |
+| [Video Embedding](./features/03-video) | YouTube, Bilibili, custom videos |
+| [Icons](./features/04-icons) | Use icons from multiple libraries |
+
+## Quick Reference
+
+::: tip Common Patterns
+```markdown
+# Heading 1
+## Heading 2
+
+**bold** and *italic*
+
+- Bullet list
+1. Numbered list
+
+[Link](https://example.com)
+![Image](/images/photo.jpg)
+
+`inline code`
+```
+:::
+
+---
+
+Start with [Markdown Essentials](./markdown/)!

package/templates/default/content/posts/blog_docs_en/guide/features/01-mermaid.md

@@ -0,0 +1,194 @@
+---
+title: Mermaid Diagrams
+description: Create flowcharts, sequence diagrams, and more with Mermaid
+pubDate: 2025-01-01
+author: Astro Blog
+categories:
+  - Documentation
+tags:
+  - Mermaid
+  - Diagrams
+---
+
+# Mermaid Diagrams
+
+Create beautiful diagrams directly in Markdown using [Mermaid](https://mermaid.js.org).
+
+## Basic Syntax
+
+Use a code block with `mermaid` language:
+
+````markdown
+```mermaid
+graph TD
+    A[Start] --> B[End]
+```
+````
+
+## Flowchart
+
+### Basic Flow
+
+```mermaid
+graph TD
+    A[Start] --> B{Decision}
+    B -->|Yes| C[Do Something]
+    B -->|No| D[Do Something Else]
+    C --> E[End]
+    D --> E
+```
+
+### Left to Right
+
+```mermaid
+graph LR
+    A[Input] --> B[Process]
+    B --> C[Output]
+```
+
+### Node Shapes
+
+```mermaid
+graph TD
+    A[Rectangle]
+    B(Rounded)
+    C([Stadium])
+    D[[Subroutine]]
+    E[(Database)]
+    F((Circle))
+    G{Diamond}
+    H{{Hexagon}}
+```
+
+## Sequence Diagram
+
+```mermaid
+sequenceDiagram
+    participant User
+    participant Browser
+    participant Server
+    participant Database
+
+    User->>Browser: Enter URL
+    Browser->>Server: HTTP Request
+    Server->>Database: Query Data
+    Database-->>Server: Return Data
+    Server-->>Browser: HTTP Response
+    Browser-->>User: Display Page
+```
+
+## Class Diagram
+
+```mermaid
+classDiagram
+    class Animal {
+        +String name
+        +int age
+        +makeSound()
+    }
+    class Dog {
+        +String breed
+        +bark()
+    }
+    class Cat {
+        +String color
+        +meow()
+    }
+    Animal <|-- Dog
+    Animal <|-- Cat
+```
+
+## State Diagram
+
+```mermaid
+stateDiagram-v2
+    [*] --> Draft
+    Draft --> Review
+    Review --> Draft: Changes needed
+    Review --> Published
+    Published --> Archived
+    Archived --> [*]
+```
+
+## Gantt Chart
+
+```mermaid
+gantt
+    title Project Timeline
+    dateFormat YYYY-MM-DD
+    section Planning
+        Requirements     :a1, 2025-01-01, 7d
+        Design          :a2, after a1, 5d
+    section Development
+        Backend         :b1, after a2, 14d
+        Frontend        :b2, after a2, 14d
+    section Testing
+        Testing         :c1, after b1, 7d
+        Deployment      :c2, after c1, 3d
+```
+
+## Pie Chart
+
+```mermaid
+pie title Language Usage
+    "JavaScript" : 45
+    "TypeScript" : 30
+    "Python" : 15
+    "Other" : 10
+```
+
+## Entity Relationship
+
+```mermaid
+erDiagram
+    USER ||--o{ POST : writes
+    USER ||--o{ COMMENT : writes
+    POST ||--o{ COMMENT : has
+    POST }|--|| CATEGORY : belongs_to
+```
+
+## Git Graph
+
+```mermaid
+gitGraph
+    commit id: "Initial"
+    branch develop
+    checkout develop
+    commit id: "Feature A"
+    commit id: "Feature B"
+    checkout main
+    merge develop
+    commit id: "Release"
+```
+
+## Styling
+
+### Custom Colors
+
+```mermaid
+graph TD
+    A[Start]:::green --> B{Check}:::yellow
+    B -->|Pass| C[Success]:::green
+    B -->|Fail| D[Error]:::red
+
+    classDef green fill:#90EE90
+    classDef yellow fill:#FFE4B5
+    classDef red fill:#FFB6C1
+```
+
+## Tips
+
+::: tip Best Practices
+1. **Keep it simple** - Complex diagrams become hard to read
+2. **Use meaningful labels** - Clear text improves understanding
+3. **Choose the right type** - Match diagram to your content
+4. **Test rendering** - Preview before publishing
+:::
+
+::: info Learn More
+Full documentation: [mermaid.js.org](https://mermaid.js.org/syntax/flowchart.html)
+:::
+
+---
+
+Next: [LaTeX Math](./02-latex) for mathematical formulas.

package/templates/default/content/posts/blog_docs_en/guide/features/02-latex.md

@@ -0,0 +1,233 @@
+---
+title: LaTeX Math
+description: Write mathematical formulas with LaTeX and KaTeX
+pubDate: 2025-01-01
+author: Astro Blog
+categories:
+  - Documentation
+tags:
+  - LaTeX
+  - Math
+---
+
+# LaTeX Math
+
+Write beautiful mathematical formulas using LaTeX syntax, rendered with [KaTeX](https://katex.org).
+
+## Inline Math
+
+Use single `$` for inline formulas:
+
+```markdown
+The famous equation $E = mc^2$ changed physics.
+```
+
+The famous equation $E = mc^2$ changed physics.
+
+More examples:
+- Area of circle: $A = \pi r^2$
+- Pythagorean theorem: $a^2 + b^2 = c^2$
+- Quadratic formula: $x = \frac{-b \pm \sqrt{b^2-4ac}}{2a}$
+
+## Block Math
+
+Use double `$$` for centered, block-level formulas:
+
+```markdown
+$$
+\int_0^\infty e^{-x^2} dx = \frac{\sqrt{\pi}}{2}
+$$
+```
+
+$$
+\int_0^\infty e^{-x^2} dx = \frac{\sqrt{\pi}}{2}
+$$
+
+## Basic Syntax
+
+### Superscripts and Subscripts
+
+| Syntax | Result |
+|--------|--------|
+| `x^2` | $x^2$ |
+| `x_i` | $x_i$ |
+| `x_i^2` | $x_i^2$ |
+| `x^{10}` | $x^{10}$ |
+
+### Fractions
+
+```latex
+$$
+\frac{a}{b} \quad \frac{1}{2} \quad \frac{x+1}{y-1}
+$$
+```
+
+$$
+\frac{a}{b} \quad \frac{1}{2} \quad \frac{x+1}{y-1}
+$$
+
+### Square Roots
+
+```latex
+$$
+\sqrt{2} \quad \sqrt{x+y} \quad \sqrt[3]{8}
+$$
+```
+
+$$
+\sqrt{2} \quad \sqrt{x+y} \quad \sqrt[3]{8}
+$$
+
+## Greek Letters
+
+| Letter | Syntax | Letter | Syntax |
+|--------|--------|--------|--------|
+| $\alpha$ | `\alpha` | $\beta$ | `\beta` |
+| $\gamma$ | `\gamma` | $\delta$ | `\delta` |
+| $\pi$ | `\pi` | $\sigma$ | `\sigma` |
+| $\theta$ | `\theta` | $\lambda$ | `\lambda` |
+| $\Omega$ | `\Omega` | $\Sigma$ | `\Sigma` |
+
+## Operators
+
+### Sums and Products
+
+```latex
+$$
+\sum_{i=1}^{n} x_i \quad \prod_{i=1}^{n} x_i
+$$
+```
+
+$$
+\sum_{i=1}^{n} x_i \quad \prod_{i=1}^{n} x_i
+$$
+
+### Integrals
+
+```latex
+$$
+\int_a^b f(x)dx \quad \iint_D f(x,y)dxdy \quad \oint_C f(z)dz
+$$
+```
+
+$$
+\int_a^b f(x)dx \quad \iint_D f(x,y)dxdy \quad \oint_C f(z)dz
+$$
+
+### Limits
+
+```latex
+$$
+\lim_{x \to \infty} \frac{1}{x} = 0
+$$
+```
+
+$$
+\lim_{x \to \infty} \frac{1}{x} = 0
+$$
+
+## Matrices
+
+```latex
+$$
+\begin{pmatrix}
+a & b \\
+c & d
+\end{pmatrix}
+\quad
+\begin{bmatrix}
+1 & 2 & 3 \\
+4 & 5 & 6
+\end{bmatrix}
+$$
+```
+
+$$
+\begin{pmatrix}
+a & b \\
+c & d
+\end{pmatrix}
+\quad
+\begin{bmatrix}
+1 & 2 & 3 \\
+4 & 5 & 6
+\end{bmatrix}
+$$
+
+## Equations
+
+### Aligned Equations
+
+```latex
+$$
+\begin{aligned}
+(a+b)^2 &= a^2 + 2ab + b^2 \\
+(a-b)^2 &= a^2 - 2ab + b^2
+\end{aligned}
+$$
+```
+
+$$
+\begin{aligned}
+(a+b)^2 &= a^2 + 2ab + b^2 \\
+(a-b)^2 &= a^2 - 2ab + b^2
+\end{aligned}
+$$
+
+### Cases
+
+```latex
+$$
+f(x) = \begin{cases}
+x^2 & \text{if } x \geq 0 \\
+-x^2 & \text{if } x < 0
+\end{cases}
+$$
+```
+
+$$
+f(x) = \begin{cases}
+x^2 & \text{if } x \geq 0 \\
+-x^2 & \text{if } x < 0
+\end{cases}
+$$
+
+## Common Formulas
+
+### Statistics
+
+Standard deviation:
+$$
+\sigma = \sqrt{\frac{1}{N}\sum_{i=1}^{N}(x_i - \mu)^2}
+$$
+
+### Calculus
+
+Taylor series:
+$$
+e^x = \sum_{n=0}^{\infty} \frac{x^n}{n!} = 1 + x + \frac{x^2}{2!} + \frac{x^3}{3!} + \cdots
+$$
+
+### Physics
+
+Maxwell's equations:
+$$
+\nabla \cdot \mathbf{E} = \frac{\rho}{\varepsilon_0}
+$$
+
+## Tips
+
+::: tip Best Practices
+1. **Use inline math** for simple formulas in text
+2. **Use block math** for complex or important equations
+3. **Add spacing** with `\quad` between elements
+4. **Test rendering** - KaTeX doesn't support all LaTeX
+:::
+
+::: info Reference
+Full KaTeX syntax: [katex.org/docs/supported.html](https://katex.org/docs/supported.html)
+:::
+
+---
+
+Next: [Video Embedding](./03-video) for multimedia content.

package/templates/default/content/posts/blog_docs_en/guide/features/03-video.md

@@ -0,0 +1,184 @@
+---
+title: Video Embedding
+description: Embed YouTube, Bilibili, and custom videos in your posts
+pubDate: 2025-01-01
+author: Astro Blog
+categories:
+  - Documentation
+tags:
+  - Video
+  - Multimedia
+---
+
+# Video Embedding
+
+Add videos to make your content more engaging and informative.
+
+## YouTube
+
+Embed YouTube videos using the component:
+
+```markdown
+<YouTube id="dQw4w9WgXcQ" />
+```
+
+Or with a full URL:
+
+```markdown
+<YouTube url="https://www.youtube.com/watch?v=dQw4w9WgXcQ" />
+```
+
+### Options
+
+```markdown
+<YouTube
+  id="dQw4w9WgXcQ"
+  title="Video Title"
+  start={30}
+/>
+```
+
+| Option | Description |
+|--------|-------------|
+| `id` | YouTube video ID |
+| `url` | Full YouTube URL |
+| `title` | Video title for accessibility |
+| `start` | Start time in seconds |
+
+## Bilibili
+
+For Bilibili videos:
+
+```markdown
+<Bilibili bvid="BV1xx411c7mD" />
+```
+
+Or with AV number:
+
+```markdown
+<Bilibili aid="123456789" />
+```
+
+### Options
+
+```markdown
+<Bilibili
+  bvid="BV1xx411c7mD"
+  page={1}
+  title="Video Title"
+/>
+```
+
+| Option | Description |
+|--------|-------------|
+| `bvid` | Bilibili BV ID |
+| `aid` | Bilibili AV number |
+| `page` | Part number (for multi-part videos) |
+| `title` | Video title |
+
+## Self-Hosted Videos
+
+For videos in your `public/` folder:
+
+```markdown
+<Video src="/videos/demo.mp4" />
+```
+
+### Options
+
+```markdown
+<Video
+  src="/videos/demo.mp4"
+  poster="/images/video-cover.jpg"
+  autoplay
+  muted
+  loop
+/>
+```
+
+| Option | Description |
+|--------|-------------|
+| `src` | Video file path |
+| `poster` | Cover image URL |
+| `autoplay` | Auto-play on load |
+| `muted` | Muted by default |
+| `loop` | Loop playback |
+| `controls` | Show controls (default: true) |
+
+## HTML5 Video
+
+You can also use standard HTML5:
+
+```html
+<video
+  src="/videos/demo.mp4"
+  controls
+  width="100%"
+  poster="/images/cover.jpg">
+  Your browser doesn't support video.
+</video>
+```
+
+### Multiple Sources
+
+```html
+<video controls width="100%">
+  <source src="/videos/demo.webm" type="video/webm">
+  <source src="/videos/demo.mp4" type="video/mp4">
+  Your browser doesn't support video.
+</video>
+```
+
+## Video Formats
+
+| Format | Extension | Support |
+|--------|-----------|---------|
+| MP4 (H.264) | `.mp4` | Best compatibility |
+| WebM | `.webm` | Good compression |
+| Ogg | `.ogv` | Open format |
+
+::: tip Recommendation
+Use **MP4 (H.264)** for best browser support. WebM is a good secondary option.
+:::
+
+## Responsive Videos
+
+Videos are responsive by default. For custom aspect ratios:
+
+```html
+<div style="aspect-ratio: 16/9;">
+  <Video src="/videos/demo.mp4" style="width: 100%; height: 100%;" />
+</div>
+```
+
+## Best Practices
+
+::: info Video Guidelines
+1. **Optimize file size** - Compress videos for web
+2. **Add poster images** - Show a preview before loading
+3. **Provide captions** - Improve accessibility
+4. **Consider autoplay carefully** - Can be annoying
+5. **Use lazy loading** - Don't load videos until needed
+:::
+
+::: warning File Size
+Keep videos under 10MB when possible. For longer videos, consider hosting on YouTube or Vimeo.
+:::
+
+## External Embedding
+
+For other platforms, use their embed codes:
+
+```html
+<iframe
+  src="https://player.vimeo.com/video/123456789"
+  width="640"
+  height="360"
+  frameborder="0"
+  allowfullscreen>
+</iframe>
+```
+
+---
+
+Next: [Icons](./04-icons) to add visual elements.