@jet-w/astro-blog 0.1.5 → 0.2.0

package/templates/default/content/posts/blog_docs_en/guide/features/04-icons.md

@@ -0,0 +1,227 @@
+---
+title: Icons
+description: Use icons from Font Awesome, Material, Remix, and Bootstrap
+pubDate: 2025-01-01
+author: Astro Blog
+categories:
+  - Documentation
+tags:
+  - Icons
+  - Design
+---
+
+# Icons
+
+Add visual elements with icons from multiple popular libraries.
+
+## Available Libraries
+
+| Library | Prefix | Icons |
+|---------|--------|-------|
+| Font Awesome | `fa-` | 2000+ |
+| Material Icons | `material-icons` | 2500+ |
+| Remix Icon | `ri-` | 2400+ |
+| Bootstrap Icons | `bi-` | 2000+ |
+| Ionicons | `ion-` | 1300+ |
+
+## Font Awesome
+
+### Solid Icons
+
+```html
+<i class="fas fa-home"></i>
+<i class="fas fa-star"></i>
+<i class="fas fa-heart"></i>
+<i class="fas fa-user"></i>
+```
+
+<i class="fas fa-home"></i> <i class="fas fa-star"></i> <i class="fas fa-heart"></i> <i class="fas fa-user"></i>
+
+### Regular Icons
+
+```html
+<i class="far fa-star"></i>
+<i class="far fa-heart"></i>
+<i class="far fa-comment"></i>
+```
+
+<i class="far fa-star"></i> <i class="far fa-heart"></i> <i class="far fa-comment"></i>
+
+### Brand Icons
+
+```html
+<i class="fab fa-github"></i>
+<i class="fab fa-twitter"></i>
+<i class="fab fa-linkedin"></i>
+```
+
+<i class="fab fa-github"></i> <i class="fab fa-twitter"></i> <i class="fab fa-linkedin"></i>
+
+## Material Icons
+
+```html
+<span class="material-icons">home</span>
+<span class="material-icons">favorite</span>
+<span class="material-icons">settings</span>
+```
+
+<span class="material-icons">home</span> <span class="material-icons">favorite</span> <span class="material-icons">settings</span>
+
+### Outlined Style
+
+```html
+<span class="material-icons-outlined">home</span>
+<span class="material-icons-outlined">favorite</span>
+```
+
+<span class="material-icons-outlined">home</span> <span class="material-icons-outlined">favorite</span>
+
+### Rounded Style
+
+```html
+<span class="material-icons-round">home</span>
+<span class="material-icons-round">favorite</span>
+```
+
+<span class="material-icons-round">home</span> <span class="material-icons-round">favorite</span>
+
+## Remix Icon
+
+```html
+<i class="ri-home-line"></i>
+<i class="ri-home-fill"></i>
+<i class="ri-star-line"></i>
+<i class="ri-star-fill"></i>
+```
+
+<i class="ri-home-line"></i> <i class="ri-home-fill"></i> <i class="ri-star-line"></i> <i class="ri-star-fill"></i>
+
+### Common Icons
+
+```html
+<i class="ri-github-fill"></i>
+<i class="ri-twitter-fill"></i>
+<i class="ri-code-line"></i>
+<i class="ri-terminal-box-line"></i>
+```
+
+<i class="ri-github-fill"></i> <i class="ri-twitter-fill"></i> <i class="ri-code-line"></i> <i class="ri-terminal-box-line"></i>
+
+## Bootstrap Icons
+
+```html
+<i class="bi bi-house"></i>
+<i class="bi bi-star"></i>
+<i class="bi bi-heart"></i>
+<i class="bi bi-github"></i>
+```
+
+<i class="bi bi-house"></i> <i class="bi bi-star"></i> <i class="bi bi-heart"></i> <i class="bi bi-github"></i>
+
+## Ionicons
+
+```html
+<ion-icon name="home"></ion-icon>
+<ion-icon name="star"></ion-icon>
+<ion-icon name="heart"></ion-icon>
+```
+
+<ion-icon name="home"></ion-icon> <ion-icon name="star"></ion-icon> <ion-icon name="heart"></ion-icon>
+
+## Sizing
+
+### Font Awesome
+
+```html
+<i class="fas fa-star fa-xs"></i>
+<i class="fas fa-star fa-sm"></i>
+<i class="fas fa-star"></i>
+<i class="fas fa-star fa-lg"></i>
+<i class="fas fa-star fa-2x"></i>
+<i class="fas fa-star fa-3x"></i>
+```
+
+<i class="fas fa-star fa-xs"></i> <i class="fas fa-star fa-sm"></i> <i class="fas fa-star"></i> <i class="fas fa-star fa-lg"></i> <i class="fas fa-star fa-2x"></i> <i class="fas fa-star fa-3x"></i>
+
+### CSS Sizing
+
+```html
+<i class="ri-star-fill" style="font-size: 24px;"></i>
+<i class="ri-star-fill" style="font-size: 32px;"></i>
+```
+
+<i class="ri-star-fill" style="font-size: 24px;"></i> <i class="ri-star-fill" style="font-size: 32px;"></i>
+
+## Coloring
+
+```html
+<i class="fas fa-star" style="color: gold;"></i>
+<i class="fas fa-heart" style="color: red;"></i>
+<i class="fas fa-leaf" style="color: green;"></i>
+```
+
+<i class="fas fa-star" style="color: gold;"></i> <i class="fas fa-heart" style="color: red;"></i> <i class="fas fa-leaf" style="color: green;"></i>
+
+## Animation
+
+### Font Awesome
+
+```html
+<i class="fas fa-spinner fa-spin"></i>
+<i class="fas fa-circle-notch fa-spin"></i>
+<i class="fas fa-sync fa-spin"></i>
+```
+
+<i class="fas fa-spinner fa-spin"></i> <i class="fas fa-circle-notch fa-spin"></i> <i class="fas fa-sync fa-spin"></i>
+
+## Common Use Cases
+
+### In Text
+
+Use icons inline with text:
+
+```markdown
+<i class="fas fa-check" style="color: green;"></i> Task completed
+
+<i class="fas fa-times" style="color: red;"></i> Task failed
+
+<i class="fas fa-info-circle" style="color: blue;"></i> Information
+```
+
+<i class="fas fa-check" style="color: green;"></i> Task completed
+
+<i class="fas fa-times" style="color: red;"></i> Task failed
+
+<i class="fas fa-info-circle" style="color: blue;"></i> Information
+
+### In Lists
+
+```markdown
+- <i class="ri-checkbox-circle-fill" style="color: green;"></i> Feature A
+- <i class="ri-checkbox-circle-fill" style="color: green;"></i> Feature B
+- <i class="ri-close-circle-fill" style="color: red;"></i> Not supported
+```
+
+- <i class="ri-checkbox-circle-fill" style="color: green;"></i> Feature A
+- <i class="ri-checkbox-circle-fill" style="color: green;"></i> Feature B
+- <i class="ri-close-circle-fill" style="color: red;"></i> Not supported
+
+## Icon Search
+
+Find icons at:
+- [Font Awesome](https://fontawesome.com/icons)
+- [Material Icons](https://fonts.google.com/icons)
+- [Remix Icon](https://remixicon.com/)
+- [Bootstrap Icons](https://icons.getbootstrap.com/)
+- [Ionicons](https://ionic.io/ionicons)
+
+::: tip Choosing Icons
+1. **Stay consistent** - Pick one library for most icons
+2. **Match your style** - Outlined vs filled, thin vs bold
+3. **Consider meaning** - Icons should be intuitive
+4. **Don't overuse** - Icons should enhance, not clutter
+:::
+
+---
+
+Continue to [Configuration](../../config/) to customize your blog.

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

@@ -0,0 +1,51 @@
+---
+title: Advanced Features
+description: Diagrams, math formulas, videos, and icons
+pubDate: 2025-01-01
+author: Astro Blog
+categories:
+  - Documentation
+tags:
+  - Features
+  - Advanced
+---
+
+# Advanced Features
+
+Take your content to the next level with these powerful features.
+
+## Feature Overview
+
+| Feature | Description |
+|---------|-------------|
+| [Mermaid Diagrams](./01-mermaid) | Flowcharts, sequences, Gantt charts |
+| [LaTeX Math](./02-latex) | Mathematical formulas and equations |
+| [Video Embedding](./03-video) | YouTube, Bilibili, custom videos |
+| [Icons](./04-icons) | 5000+ icons from multiple libraries |
+
+## Quick Examples
+
+### Diagrams
+
+```mermaid
+graph LR
+    A[Write] --> B[Build]
+    B --> C[Deploy]
+```
+
+### Math
+
+Inline: $E = mc^2$
+
+Block:
+$$
+\int_0^\infty e^{-x^2} dx = \frac{\sqrt{\pi}}{2}
+$$
+
+### Icons
+
+Use icons anywhere: <i class="fas fa-star"></i> <i class="ri-heart-fill"></i>
+
+---
+
+Start with [Mermaid Diagrams](./01-mermaid)!

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

@@ -0,0 +1,226 @@
+---
+title: Containers
+description: Use callout boxes for tips, warnings, and important information
+pubDate: 2025-01-01
+author: Astro Blog
+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.
+:::
+```
+
+::: tip
+This is a helpful tip for the reader.
+:::
+
+### Info
+
+For informational notes:
+
+```markdown
+::: info
+Here's some additional information.
+:::
+```
+
+::: info
+Here's some additional information.
+:::
+
+### Warning
+
+For things to be careful about:
+
+```markdown
+::: warning
+Be careful with this operation.
+:::
+```
+
+::: warning
+Be careful with this operation.
+:::
+
+### Danger
+
+For critical warnings:
+
+```markdown
+::: danger
+This action cannot be undone!
+:::
+```
+
+::: danger
+This action cannot be undone!
+:::
+
+### Note
+
+For general notes:
+
+```markdown
+::: note
+A side note for the reader.
+:::
+```
+
+::: note
+A side note for the reader.
+:::
+
+## Custom Titles
+
+Add a custom title after the type:
+
+```markdown
+::: tip Pro Tip
+This container has a custom title.
+:::
+```
+
+::: tip Pro Tip
+This container has a custom title.
+:::
+
+```markdown
+::: warning Security Notice
+Always validate user input!
+:::
+```
+
+::: warning Security Notice
+Always validate user input!
+:::
+
+## Rich Content
+
+Containers support full Markdown inside:
+
+```markdown
+::: info Features
+This blog supports:
+- **Markdown** formatting
+- `Code` snippets
+- [Links](https://example.com)
+
+| Feature | Status |
+|---------|--------|
+| Images  | ✅     |
+| Tables  | ✅     |
+:::
+```
+
+::: info Features
+This blog supports:
+- **Markdown** formatting
+- `Code` snippets
+- [Links](https://example.com)
+
+| Feature | Status |
+|---------|--------|
+| Images  | ✅     |
+| Tables  | ✅     |
+:::
+
+## Details (Collapsible)
+
+Create expandable sections:
+
+```markdown
+::: details Click to expand
+This content is hidden by default.
+You can put lots of content here.
+:::
+```
+
+::: details Click to expand
+This content is hidden by default.
+You can put lots of content here.
+:::
+
+### Details with Custom Title
+
+```markdown
+::: details View the solution
+```javascript
+function solve() {
+  return 42;
+}
+```
+:::
+```
+
+::: details View the solution
+```javascript
+function solve() {
+  return 42;
+}
+```
+:::
+
+## Nested Containers
+
+You can nest containers (use more colons for outer):
+
+```markdown
+:::: warning Important
+This is important!
+
+::: tip
+A tip inside a warning.
+:::
+::::
+```
+
+:::: warning Important
+This is important!
+
+::: tip
+A tip inside a warning.
+:::
+::::
+
+## Best Practices
+
+::: tip When to Use Containers
+- **tip** - Helpful suggestions, best practices
+- **info** - Background information, context
+- **warning** - Potential issues, things to watch
+- **danger** - Critical errors, data loss risks
+- **note** - General observations
+- **details** - Optional content, long examples
+:::
+
+::: warning Don't Overuse
+Too many containers can be distracting. Use them sparingly for truly important information.
+:::
+
+---
+
+Next: Master [Code Blocks](./03-code-blocks) for beautiful code snippets.

package/templates/default/content/posts/blog_docs_en/guide/markdown/03-code-blocks.md

@@ -0,0 +1,206 @@
+---
+title: Code Blocks
+description: Syntax highlighting, line numbers, and code display features
+pubDate: 2025-01-01
+author: Astro Blog
+categories:
+  - Documentation
+tags:
+  - Markdown
+  - Code
+---
+
+# Code Blocks
+
+Display code with beautiful syntax highlighting powered by Shiki.
+
+## Basic Code Blocks
+
+Wrap code in triple backticks:
+
+````markdown
+```
+Plain text code block
+```
+````
+
+## Syntax Highlighting
+
+Specify the language after the backticks:
+
+````markdown
+```javascript
+function greet(name) {
+  return `Hello, ${name}!`;
+}
+```
+````
+
+```javascript
+function greet(name) {
+  return `Hello, ${name}!`;
+}
+```
+
+## Supported Languages
+
+Over 100 languages are supported:
+
+| Language | Identifier |
+|----------|------------|
+| JavaScript | `javascript`, `js` |
+| TypeScript | `typescript`, `ts` |
+| Python | `python`, `py` |
+| HTML | `html` |
+| CSS | `css` |
+| JSON | `json` |
+| Bash | `bash`, `sh` |
+| Markdown | `markdown`, `md` |
+
+## Language Examples
+
+### JavaScript/TypeScript
+
+```typescript
+interface User {
+  name: string;
+  age: number;
+}
+
+const user: User = {
+  name: 'Alice',
+  age: 25
+};
+```
+
+### Python
+
+```python
+def fibonacci(n):
+    if n <= 1:
+        return n
+    return fibonacci(n-1) + fibonacci(n-2)
+
+print([fibonacci(i) for i in range(10)])
+```
+
+### HTML
+
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Hello</title>
+  </head>
+  <body>
+    <h1>Hello World</h1>
+  </body>
+</html>
+```
+
+### CSS
+
+```css
+.container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 1rem;
+}
+
+.button {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: white;
+  padding: 0.5rem 1rem;
+  border-radius: 0.25rem;
+}
+```
+
+### Bash
+
+```bash
+#!/bin/bash
+
+# Install dependencies
+npm install
+
+# Build project
+npm run build
+
+# Deploy
+rsync -avz dist/ server:/var/www/blog/
+```
+
+### JSON
+
+```json
+{
+  "name": "my-blog",
+  "version": "1.0.0",
+  "dependencies": {
+    "astro": "^5.0.0",
+    "vue": "^3.4.0"
+  }
+}
+```
+
+## Inline Code
+
+Use single backticks for inline code:
+
+```markdown
+Use `npm install` to install dependencies.
+```
+
+Use `npm install` to install dependencies.
+
+## Code Block Features
+
+### Copy Button
+
+All code blocks have a copy button that appears on hover.
+
+### Language Label
+
+The language name is displayed in the header.
+
+### Collapsible Code
+
+Long code blocks (15+ lines) are automatically collapsed with an "Expand" button.
+
+::: tip Try It
+Scroll up to see the expand/collapse feature on longer code blocks.
+:::
+
+## Code in Containers
+
+Code works inside containers:
+
+::: tip Example
+```javascript
+// This code is inside a tip container
+console.log('Hello from a container!');
+```
+:::
+
+## Diff Syntax
+
+Show code changes:
+
+```diff
+- const old = 'before';
++ const new = 'after';
+```
+
+## Best Practices
+
+::: info Code Block Tips
+1. **Always specify the language** for proper highlighting
+2. **Keep examples focused** - show only relevant code
+3. **Add comments** to explain complex logic
+4. **Test your code** - ensure examples actually work
+:::
+
+---
+
+Continue to advanced features: [Mermaid Diagrams](../features/01-mermaid).