npm - @jet-w/astro-blog - Versions diffs - 0.1.6 → 0.2.1 - Mend

@jet-w/astro-blog 0.1.6 → 0.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (122) hide show

package/templates/default/content/posts/blog_docs_en/02.guide/03-code-blocks.md ADDED Viewed

@@ -0,0 +1,207 @@
+---
+title: Code Blocks
+description: Syntax highlighting, line numbers, and code display features
+pubDate: 2025-01-01
+author: jet-w
+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).

package/templates/default/content/posts/blog_docs_en/02.guide/03-mermaid.md ADDED Viewed

@@ -0,0 +1,194 @@
+---
+title: Mermaid Diagrams
+description: Create flowcharts, sequence diagrams, and more with Mermaid
+pubDate: 2025-01-01
+author: jet-w
+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/02.guide/04-icons.md ADDED Viewed

@@ -0,0 +1,229 @@
+---
+title: Icons
+description: Use icons from Font Awesome, Material, Remix, and Bootstrap
+pubDate: 2025-01-01
+author: jet-w
+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
+:::
+---
+Next: [Slides](./05-slides) to create interactive presentations.
+Or continue to [Configuration](../../config/) to customize your blog.