@jet-w/astro-blog 0.1.6 → 0.2.1

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

@@ -0,0 +1,233 @@
+---
+title: LaTeX Math
+description: Write mathematical formulas with LaTeX and KaTeX
+pubDate: 2025-01-01
+author: jet-w
+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/02.guide/07-video.md

@@ -0,0 +1,184 @@
+---
+title: Video Embedding
+description: Embed YouTube, Bilibili, and custom videos in your posts
+pubDate: 2025-01-01
+author: jet-w
+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.