import { Image } from 'astro:assets';
import placeholder from '../assets/images/placeholder.png';
import audioDemo from '../assets/audio/audio-example.wav';
import HtmlEmbed from '../../components/HtmlEmbed.astro';
import Sidenote from '../../components/Sidenote.astro';
import Wide from '../../components/Wide.astro';
import FullWidth from '../../components/FullWidth.astro';
import Accordion from '../../components/Accordion.astro';
## Available blocks
All the following blocks are available in the article.mdx file. You can also create your own blocks by creating a new component in the components folder.
### Math
KaTeX is used for math rendering.
**Inline**
This is an inline math equation: $x^2 + y^2 = z^2$.
Example
```mdx
$x^2 + y^2 = z^2$
```
**Block**
$$
\mathrm{Attention}(Q,K,V)=\mathrm{softmax}\!\left(\frac{QK^\top}{\sqrt{d_k}}\right) V
$$
Example
```mdx
$$
\mathrm{Attention}(Q,K,V)=\mathrm{softmax}\!\left(\frac{QK^\top}{\sqrt{d_k}}\right) V
$$
```
### Image
**Responsive images** automatically generate an optimized `srcset` and `sizes` so the browser downloads the most appropriate file for the current viewport and DPR. You can also request multiple output formats (e.g., **AVIF**, **WebP**, fallback **PNG/JPEG**) and control **lazy loading/decoding** for better **performance**.
Props (optional)
- `data-zoomable`: adds a zoomable lightbox.
- `data-downloadable`: adds a small download button to fetch the image file.
- `loading="lazy"`: lazy loads the image.
- `figcaption`: adds a caption and credit.
**Optional:** Zoomable (Medium-like lightbox): add `data-zoomable` to opt-in. Only images with this attribute will open full-screen on click.
**Optional:** Download button: add `data-downloadable` to render a small button in the bottom-right corner that downloads the image. By default it tries to use the original filename; you can override via `data-download-name="myfile.png"` and `data-download-src="/path/to/original.png"`.
**Optional:** Lazy loading: add `loading="lazy"` to opt-in.
**Optional:** Figcaption and credits: add a `figcaption` element with a `span` containing the credit.
Tensor parallelism in a transformer block
Original work on Ultrascale Playbook
Example
```mdx
import { Image } from 'astro:assets'
import myImage from './assets/images/placeholder.jpg'
Optimized image with a descriptive caption.
Credit: Photo by Author
```
### Code
Use fenced code blocks with a language for syntax highlighting.
```python
def greet(name: str) -> None:
print(f"Hello, {name}!")
greet("Astro")
```
Example
````mdx
```python
def greet(name: str) -> None:
print(f"Hello, {name}!")
greet("Astro")
```
````
### Mermaid diagram
Native mermaid diagrams are supported. You can use the live editor to create your diagram and copy the code to your article.
```mermaid
erDiagram
DATASET ||--o{ SAMPLE : contains
RUN }o--o{ SAMPLE : uses
RUN ||--|| MODEL : trains
RUN ||--o{ METRIC : logs
DATASET {
string id
string name
}
SAMPLE {
string id
string uri
}
MODEL {
string id
string framework
}
RUN {
string id
date startedAt
}
METRIC {
string name
float value
}
```
Example
````mdx
```mermaid
erDiagram
DATASET ||--o{ SAMPLE : contains
RUN }o--o{ SAMPLE : uses
RUN ||--|| MODEL : trains
RUN ||--o{ METRIC : logs
DATASET {
string id
string name
}
SAMPLE {
string id
string uri
}
MODEL {
string id
string framework
}
RUN {
string id
date startedAt
}
METRIC {
string name
float value
}
```
````
### Citation and footnote
**Citations** use the `@` syntax (e.g., `[@vaswani2017attention]` or `@vaswani2017attention` in narrative form) and are **automatically** collected to render the **bibliography** at the end of the article. The citation keys come from `app/src/content/bibliography.bib`.
**Footnotes** use an identifier like `[^f1]` and a definition anywhere in the document, e.g., `[^f1]: Your explanation`. They are **numbered** and **listed automatically** at the end of the article.
Here are a few variations using the same bibliography:
1) **In-text citation** with brackets: [@example2023].
2) **Narrative citation**: As shown by @vaswani2017attention, transformers enable efficient sequence modeling.
3) **Multiple citations** and a **footnote** together: see [@vaswani2017attention; @example2023] for related work. Also note this footnote[^f1].
[^f1]: Footnote attached to the sentence above.
Example
```mdx
1) In-text citation with brackets: [@example2023].
2) Narrative citation: As shown by @vaswani2017attention, transformers enable efficient sequence modeling.
3) Multiple citations and a footnote together: see [@vaswani2017attention; @example2023] for related work. Also note this footnote[^f1].
[^f1]: Footnote attached to the sentence above.
```
### Separator
Use `---` on its own line to insert a horizontal separator between sections. This is a standard Markdown “thematic break”. Don’t confuse it with the `---` used at the very top of the file to delimit the frontmatter.
---
Example
```mdx
Intro paragraph.
---
Next section begins here.
```
### Accordion
Accessible accordion based on `details/summary`. You can pass any children content.
Text, lists, images, code blocks, etc.
Item one
Item two
```ts
function greet(name: string) {
console.log(`Hello, ${name}`);
}
greet("Astro");
```
Example
````mdx
import Accordion from '../components/Accordion.astro'
Free content with markdown and MDX components.
```ts
function greet(name: string) {
console.log(`Hello, ${name}`);
}
greet("Astro");
```
````
### Minimal table
| Method | Score |
|---|---|
| A | 0.78 |
| B | 0.86 |
Example
```mdx
| Method | Score |
| --- | --- |
| A | 0.78 |
| B | 0.86 |
```
### Audio