@jet-w/astro-blog 0.2.0 → 0.2.2

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

@@ -0,0 +1,245 @@
+---
+title: Containers
+description: Use callout boxes for tips, warnings, and important information
+pubDate: 2025-01-01
+author: jet-w
+categories:
+  - Documentation
+tags:
+  - Markdown
+  - Containers
+---
+
+# Containers
+
+Containers are special callout boxes that help highlight important information.
+
+## Basic Syntax
+
+```markdown
+::: type
+Content goes here
+:::
+```
+
+## Container Types
+
+### Tip
+
+For helpful suggestions:
+
+```markdown
+::: tip
+This is a helpful tip for the reader.
+:::
+```
+
+<div class="container-tip custom-container" data-container-type="tip">
+<div class="container-title">Tip</div>
+<div class="container-content">
+<p>This is a helpful tip for the reader.</p>
+</div>
+</div>
+
+### Info
+
+For informational notes:
+
+```markdown
+::: info
+Here's some additional information.
+:::
+```
+
+<div class="container-info custom-container" data-container-type="info">
+<div class="container-title">Info</div>
+<div class="container-content">
+<p>Here's some additional information.</p>
+</div>
+</div>
+
+### Warning
+
+For things to be careful about:
+
+```markdown
+::: warning
+Be careful with this operation.
+:::
+```
+
+<div class="container-warning custom-container" data-container-type="warning">
+<div class="container-title">Warning</div>
+<div class="container-content">
+<p>Be careful with this operation.</p>
+</div>
+</div>
+
+### Danger
+
+For critical warnings:
+
+```markdown
+::: danger
+This action cannot be undone!
+:::
+```
+
+<div class="container-danger custom-container" data-container-type="danger">
+<div class="container-title">Danger</div>
+<div class="container-content">
+<p>This action cannot be undone!</p>
+</div>
+</div>
+
+### Note
+
+For general notes:
+
+```markdown
+::: note
+A side note for the reader.
+:::
+```
+
+<div class="container-note custom-container" data-container-type="note">
+<div class="container-title">Note</div>
+<div class="container-content">
+<p>A side note for the reader.</p>
+</div>
+</div>
+
+## Custom Titles
+
+Add a custom title after the type:
+
+```markdown
+::: tip Pro Tip
+This container has a custom title.
+:::
+```
+
+<div class="container-tip custom-container" data-container-type="tip">
+<div class="container-title">Pro Tip</div>
+<div class="container-content">
+<p>This container has a custom title.</p>
+</div>
+</div>
+
+```markdown
+::: warning Security Notice
+Always validate user input!
+:::
+```
+
+<div class="container-warning custom-container" data-container-type="warning">
+<div class="container-title">Security Notice</div>
+<div class="container-content">
+<p>Always validate user input!</p>
+</div>
+</div>
+
+## Rich Content
+
+Containers support full Markdown inside:
+
+```markdown
+::: info Features
+This blog supports:
+- **Markdown** formatting
+- `Code` snippets
+- [Links](https://example.com)
+:::
+```
+
+<div class="container-info custom-container" data-container-type="info">
+<div class="container-title">Features</div>
+<div class="container-content">
+<p>This blog supports:</p>
+<ul>
+<li><strong>Markdown</strong> formatting</li>
+<li><code>Code</code> snippets</li>
+<li><a href="https://example.com">Links</a></li>
+</ul>
+</div>
+</div>
+
+## Details (Collapsible)
+
+Create expandable sections:
+
+```markdown
+::: details Click to expand
+This content is hidden by default.
+You can put lots of content here.
+:::
+```
+
+<details class="container-details custom-container" data-container-type="details">
+<summary class="container-title">Click to expand</summary>
+<div class="container-content">
+<p>This content is hidden by default.</p>
+<p>You can put lots of content here.</p>
+</div>
+</details>
+
+### Details with Code
+
+```markdown
+::: details View the solution
+function solve() {
+  return 42;
+}
+:::
+```
+
+<details class="container-details custom-container" data-container-type="details">
+<summary class="container-title">View the solution</summary>
+<div class="container-content">
+
+```javascript
+function solve() {
+  return 42;
+}
+```
+
+</div>
+</details>
+
+## Best Practices
+
+<div class="container-tip custom-container" data-container-type="tip">
+<div class="container-title">When to Use Containers</div>
+<div class="container-content">
+<ul>
+<li><strong>tip</strong> - Helpful suggestions, best practices</li>
+<li><strong>info</strong> - Background information, context</li>
+<li><strong>warning</strong> - Potential issues, things to watch</li>
+<li><strong>danger</strong> - Critical errors, data loss risks</li>
+<li><strong>note</strong> - General observations</li>
+<li><strong>details</strong> - Optional content, long examples</li>
+</ul>
+</div>
+</div>
+
+<div class="container-warning custom-container" data-container-type="warning">
+<div class="container-title">Don't Overuse</div>
+<div class="container-content">
+<p>Too many containers can be distracting. Use them sparingly for truly important information.</p>
+</div>
+</div>
+
+## Quick Reference
+
+| Type | Syntax | Use Case |
+|------|--------|----------|
+| tip | `::: tip` | Helpful suggestions |
+| info | `::: info` | Additional information |
+| warning | `::: warning` | Cautions |
+| danger | `::: danger` | Critical warnings |
+| note | `::: note` | Side notes |
+| details | `::: details` | Collapsible content |
+
+---
+
+Next: Master [Code Blocks](./03-code-blocks) for beautiful code snippets.

package/templates/default/content/posts/blog_docs_en/{guide/markdown → 02.guide}/03-code-blocks.md

@@ -2,7 +2,7 @@
 title: Code Blocks
 description: Syntax highlighting, line numbers, and code display features
 pubDate: 2025-01-01
-author: Astro Blog
+author: jet-w
 categories:
   - Documentation
 tags:
@@ -199,6 +199,7 @@ Show code changes:
 2. **Keep examples focused** - show only relevant code
 3. **Add comments** to explain complex logic
 4. **Test your code** - ensure examples actually work
+
 :::
 
 ---

package/templates/default/content/posts/blog_docs_en/{guide/features/01-mermaid.md → 02.guide/03-mermaid.md}

@@ -2,7 +2,7 @@
 title: Mermaid Diagrams
 description: Create flowcharts, sequence diagrams, and more with Mermaid
 pubDate: 2025-01-01
-author: Astro Blog
+author: jet-w
 categories:
   - Documentation
 tags:

package/templates/default/content/posts/blog_docs_en/{guide/features → 02.guide}/04-icons.md

@@ -2,7 +2,7 @@
 title: Icons
 description: Use icons from Font Awesome, Material, Remix, and Bootstrap
 pubDate: 2025-01-01
-author: Astro Blog
+author: jet-w
 categories:
   - Documentation
 tags:
@@ -224,4 +224,6 @@ Find icons at:
 
 ---
 
-Continue to [Configuration](../../config/) to customize your blog.
+Next: [Slides](./05-slides) to create interactive presentations.
+
+Or continue to [Configuration](../../config/) to customize your blog.

package/templates/default/content/posts/blog_docs_en/{guide/features/02-latex.md → 02.guide/06-latex.md}

@@ -2,7 +2,7 @@
 title: LaTeX Math
 description: Write mathematical formulas with LaTeX and KaTeX
 pubDate: 2025-01-01
-author: Astro Blog
+author: jet-w
 categories:
   - Documentation
 tags:

package/templates/default/content/posts/blog_docs_en/{guide/features/03-video.md → 02.guide/07-video.md}

@@ -2,7 +2,7 @@
 title: Video Embedding
 description: Embed YouTube, Bilibili, and custom videos in your posts
 pubDate: 2025-01-01
-author: Astro Blog
+author: jet-w
 categories:
   - Documentation
 tags:

package/templates/default/content/posts/blog_docs_en/02.guide/08-slides.md

@@ -0,0 +1,359 @@
+---
+title: Slides (Presentations)
+description: Create interactive presentations with Reveal.js
+pubDate: 2025-01-01
+author: jet-w
+categories:
+  - Documentation
+tags:
+  - Slides
+  - Reveal.js
+  - Presentations
+---
+
+# Slides (Presentations)
+
+This blog integrates [Reveal.js](https://revealjs.com/) to let you create beautiful interactive presentations using Markdown.
+
+## Quick Start
+
+### Creating a Presentation
+
+Create a Markdown file in the `content/slides/` directory:
+
+```markdown
+---
+title: My Presentation
+description: A demo presentation
+pubDate: 2025-01-01
+theme: black
+---
+
+# First Slide
+
+This is the opening
+
+---
+
+## Second Slide
+
+- Point one
+- Point two
+- Point three
+
+---
+
+# Thank You!
+```
+
+### Slide Separators
+
+- Use `---` (three dashes) to separate **horizontal slides**
+- Use `----` (four dashes) to separate **vertical slides**
+
+```markdown
+# Topic One
+
+---
+
+# Topic Two
+
+This is horizontal navigation
+
+----
+
+## Topic Two Details
+
+This is a vertical sub-slide (press ↓)
+
+----
+
+## More Details
+
+Continue vertical navigation
+
+---
+
+# Topic Three
+
+Back to horizontal navigation
+```
+
+## Frontmatter Configuration
+
+| Option | Type | Default | Description |
+|:---|:---|:---|:---|
+| `title` | string | - | Presentation title (required) |
+| `description` | string | - | Presentation description |
+| `pubDate` | Date | - | Publication date |
+| `author` | string | - | Author |
+| `tags` | string[] | [] | Tags |
+| `theme` | string | "black" | Theme name |
+| `transition` | string | "slide" | Transition animation |
+| `controls` | boolean | true | Show control arrows |
+| `progress` | boolean | true | Show progress bar |
+| `slideNumber` | boolean | false | Show slide numbers |
+| `draft` | boolean | false | Draft status |
+
+### Available Themes
+
+| Theme | Description |
+|:---|:---|
+| `black` | Black background, white text (default) |
+| `white` | White background, black text |
+| `league` | Gray background |
+| `beige` | Beige background, vintage style |
+| `night` | Night mode, dark blue background |
+| `serif` | Serif fonts, academic style |
+| `simple` | Minimalist white |
+| `solarized` | Solarized color scheme |
+
+### Transitions
+
+| Transition | Description |
+|:---|:---|
+| `none` | No animation |
+| `fade` | Fade in/out |
+| `slide` | Slide (default) |
+| `convex` | Convex effect |
+| `concave` | Concave effect |
+| `zoom` | Zoom effect |
+
+## Writing Content
+
+### Titles and Text
+
+```markdown
+# Main Title
+
+## Section Title
+
+Regular paragraph text
+
+**Bold** and *italic*
+
+> Blockquote
+```
+
+### Lists
+
+```markdown
+## Unordered List
+
+- Item one
+- Item two
+- Item three
+
+---
+
+## Ordered List
+
+1. First step
+2. Second step
+3. Third step
+```
+
+### Code Highlighting
+
+````markdown
+## Code Example
+
+```javascript
+function hello(name) {
+  console.log(`Hello, ${name}!`);
+}
+
+hello('World');
+```
+````
+
+Supports syntax highlighting for all common programming languages.
+
+### Math Formulas
+
+LaTeX math formulas are supported:
+
+```markdown
+## Math Formulas
+
+Inline: $E = mc^2$
+
+Block:
+
+$$
+\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}
+$$
+```
+
+### Mermaid Diagrams
+
+````markdown
+## Flowchart
+
+```mermaid
+graph TD
+    A[Start] --> B{Condition}
+    B -->|Yes| C[Execute]
+    B -->|No| D[Skip]
+    C --> E[End]
+    D --> E
+```
+````
+
+### Column Layout
+
+```html
+## Two Columns
+
+<div style="display: flex; gap: 2rem;">
+<div style="flex: 1;">
+
+### Left Side
+
+- Content one
+- Content two
+
+</div>
+<div style="flex: 1;">
+
+### Right Side
+
+- Content three
+- Content four
+
+</div>
+</div>
+```
+
+### Images
+
+```markdown
+## Image Display
+
+![Description](/images/example.png)
+```
+
+### Tables
+
+```markdown
+## Comparison
+
+| Feature | Option A | Option B |
+|:---|:---:|:---:|
+| Performance | High | Medium |
+| Usability | Medium | High |
+| Cost | Low | Medium |
+```
+
+## Fragment Animations
+
+Use HTML attributes to add step-by-step reveal effects:
+
+```html
+## Step by Step
+
+<ul>
+  <li class="fragment">Step one</li>
+  <li class="fragment">Step two</li>
+  <li class="fragment">Step three</li>
+</ul>
+```
+
+### Fragment Types
+
+```html
+<p class="fragment fade-in">Fade in</p>
+<p class="fragment fade-out">Fade out</p>
+<p class="fragment highlight-red">Highlight red</p>
+<p class="fragment highlight-blue">Highlight blue</p>
+<p class="fragment grow">Grow</p>
+<p class="fragment shrink">Shrink</p>
+```
+
+## Keyboard Shortcuts
+
+Available shortcuts in presentation mode:
+
+| Shortcut | Function |
+|:---|:---|
+| `→` / `←` | Horizontal navigation |
+| `↓` / `↑` | Vertical navigation |
+| `Space` | Next slide |
+| `Esc` | Overview mode |
+| `F` | Fullscreen mode |
+| `S` | Speaker view |
+| `B` | Black screen pause |
+| `?` | Show help |
+
+## Speaker View
+
+Press `S` to open speaker view, which shows:
+
+- Current slide
+- Next slide preview
+- Speaker notes
+- Timer
+
+### Adding Speaker Notes
+
+```markdown
+## Slide Title
+
+Slide content
+
+Note:
+These are speaker notes that the audience won't see.
+You can write prompts, key points, etc.
+```
+
+## File Organization
+
+Recommended directory structure:
+
+```
+content/
+└── slides/
+    ├── my-presentation.md     # Single presentation
+    └── workshop/              # Series
+        ├── 01-intro.md
+        ├── 02-basics.md
+        └── 03-advanced.md
+```
+
+## Best Practices
+
+::: tip Keep It Simple
+Focus on one key point per slide. Avoid information overload.
+:::
+
+::: tip Visual Hierarchy
+- Use headings to establish structure
+- Use lists and diagrams effectively
+- Leave appropriate whitespace
+:::
+
+::: tip Code Presentation
+- Keep code snippets short
+- Highlight key parts
+- Add explanatory text
+:::
+
+::: warning Performance
+- Optimize and compress images
+- Avoid extremely long presentations
+- Complex diagrams may need loading time
+:::
+
+## Example Presentations
+
+Visit the `/slides` page to browse example presentations, including:
+
+- Basic syntax demo
+- Code highlighting examples
+- Math formula showcase
+- Mermaid diagrams
+- Theme previews
+
+---
+
+Next: Check out [Icons](./04-icons) for visual elements.

package/templates/default/content/posts/blog_docs_en/{guide/markdown → 02.guide}/README.md

@@ -1,15 +1,34 @@
 ---
-title: Markdown Essentials
-description: Core Markdown syntax for everyday writing
+title: Writing Guide
+description: Master content creation with Markdown, components, and advanced features
 pubDate: 2025-01-01
-author: Astro Blog
+author: jet-w
 categories:
   - Documentation
 tags:
+  - Guide
   - Markdown
   - Writing
 ---
 
+# Writing Guide
+
+Learn how to create beautiful, engaging content for your blog.
+
+## Content Guide
+
+| Guide | Description |
+|-------|-------------|
+| [Containers](./02-containers) | Tips, warnings, and callout boxes |
+| [Code Blocks](./03-code-blocks) | Syntax highlighting and features |
+| [Mermaid Diagrams](./03-mermaid) | Flowcharts, sequences, and more |
+| [Icons](./04-icons) | Use icons from multiple libraries |
+| [LaTeX Math](./06-latex) | Mathematical formulas |
+| [Video Embedding](./07-video) | YouTube, Bilibili, custom videos |
+| [Slides](./08-slides) | Interactive presentations with Reveal.js |
+
+---
+
 # Markdown Essentials
 
 Markdown is a lightweight markup language that makes writing formatted content easy and intuitive.

package/templates/default/content/posts/blog_docs_en/{config → 03.config}/01-site.md

@@ -2,7 +2,7 @@
 title: Site Settings
 description: Configure your site's title, description, and metadata
 pubDate: 2025-01-01
-author: Astro Blog
+author: jet-w
 categories:
   - Documentation
 tags: