app/src/content/chapters/demo/introduction.mdx

import Sidenote from "../../../components/Sidenote.astro";

Welcome to this open source **research article template**. It helps you publish **clear**, **modern**, and **interactive technical writing** with **minimal setup**.

<Sidenote>
  Read time: 20–25 minutes.
</Sidenote>

Grounded in up to date good practices in web dev, it favors **interactive explanations**, **clear notation**, and **inspectable examples** over static snapshots.

Available on [GitHub](https://github.com/tfrere/research-article-template) deployable on [Hugging Face Spaces](https://huggingface.co/spaces/tfrere/research-article-template).

#### Features

<div className="tag-list">
  <span className="tag">Markdown-based</span>
  <span className="tag">KaTeX math</span>
  <span className="tag">Syntax highlighting</span>
  <span className="tag">Academic citations</span>
  <span className="tag">Footnotes</span>
  <span className="tag">Table of contents</span>
  <span className="tag">Mermaid diagrams</span>
  <span className="tag">Plotly ready</span>
  <span className="tag">D3.js ready</span>
  <span className="tag">HTML embeds</span>
  <span className="tag">Gradio app embeds</span>
  <span className="tag">Dataviz color palettes</span>
  <span className="tag">Optimized images</span>
  <span className="tag">Lightweight bundle</span>
  <span className="tag">SEO friendly</span>
  <span className="tag">Automatic build</span>
  <span className="tag">Automatic PDF export</span>
  <span className="tag">Dark theme</span>
  <span className="tag">Mobile friendly</span>
  <span className="tag">Latex import</span>
  <span className="tag">Template update system</span>
</div>

<Sidenote>
  If you have questions, remarks or suggestions, open a discussion on the <a href="https://huggingface.co/spaces/tfrere/research-article-template/discussions?status=open&type=discussion">Community tab</a>!
</Sidenote>

## Introduction
The web offers what static PDFs can’t: **interactive diagrams**, **progressive notation**, and **exploratory views** that show how ideas behave. This template treats **interactive artifacts**—figures, math, code, and inspectable experiments—as **first‑class** alongside prose, helping readers **build intuition** instead of skimming results.

### Who is this for

Ideal for anyone creating **web‑native** and **interactive** content with **minimal setup**:

- For **scientists** writing modern web‑native papers
- For **educators** building explorable lessons.

**No web knowledge required**—just write in **Markdown**.

This is not a CMS or a multi‑page blog—it's a **focused**, **single‑page**, **MDX‑first** workflow.

### Inspired by Distill

This project stands in the direct continuity of [Distill](https://distill.pub/) (2016–2021). Our goal is to carry that spirit forward and push it even further: **accessible scientific writing**, **high‑quality interactive explanations**, and **reproducible**, production‑ready demos.

To give you a sense of what inspired this template, here is a short, curated list of **well‑designed** and often **interactive** works from Distill:

- [Growing Neural Cellular Automata](https://distill.pub/2020/growing-ca/)
- [Activation Atlas](https://distill.pub/2019/activation-atlas/)
- [Handwriting with a Neural Network](https://distill.pub/2016/handwriting/)
- [The Building Blocks of Interpretability](https://distill.pub/2018/building-blocks/)

<Sidenote>
  I'm always excited to discover more great examples—please share your favorites in the <a href="https://huggingface.co/spaces/tfrere/research-blog-template/discussions?status=open&type=discussion">Community tab</a>!
</Sidenote>