app/src/content/article.mdx

---
title: "From Idea to Life:\n A Modern Template for Scientific Writing
"
subtitle: "Markdown-first research article template with math, citations, and interactive figures."
description: "A modern, MDX-first research article template with math, citations, and interactive figures."
authors:
  - "John Doe"
  - "Alice Martin"
  - "Robert Brown"
affiliation: "Hugging Face"
published: "Feb 19, 2025"
tags:
  - research
  - template
ogImage: "/thumb.jpg"
---

import HtmlFragment from "../components/HtmlFragment.astro";
import Wide from "../components/Wide.astro";
import FullBleed from "../components/FullBleed.astro";
import { Image } from 'astro:assets';
import placeholder from "../assets/images/placeholder.png";
import audioDemo from "../assets/audio/audio-example.wav";
import Aside from "../components/Aside.astro";
import visualPoster from "../assets/images/visual-vocabulary-poster.png";

import BestPractices from "./chapters/best-pratices.mdx";
import WritingYourContent from "./chapters/writing-your-content.mdx";
import AvailableBlocks from "./chapters/available-blocks.mdx";  
import GettingStarted from "./chapters/getting-started.mdx";

<Aside>
  Welcome to this single-page research article template built with **Markdown**.
  It’s designed to help you write clear, modern, and **interactive** technical articles with **minimal setup**.
  Whether you cover machine learning, data science, physics, or software topics, this template keeps the authoring flow simple while offering robust features out of the box.
  <Fragment slot="aside">
    Reading time: 20–25 minutes.
  </Fragment>
  In this guide, you’ll learn how to install the template,
  write content (math, citations, images, code, asides, interactive fragments),
  customize styles and behavior, and follow a few **best practices** for publishing.
  
</Aside>


#### Features

<Aside>
<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">Citations & footnotes</span>
  <span className="tag">Automatic build</span>
  <span className="tag">Table of content</span>
  <span className="tag">Dark theme</span>
  <span className="tag">HTML fragments</span>
  <span className="tag">Plotly ready</span>
  <span className="tag">D3.js ready</span>
  <span className="tag">SEO Friendly</span>
  <span className="tag">Mermaid diagrams</span>
  <span className="tag">Lightweight bundle</span>
  <span className="tag">Aside notes</span>
  <span className="tag">Mobile friendly</span>
  <span className="tag">Optimized images</span>
  <span className="tag">Medium like zoomable images</span>
  <span className="tag">PDF export</span>
  <span className="tag">To do: Accordion</span>
  <span className="tag">To do: dataviz color palette generator</span>
</div>
<Fragment slot="aside">
    If you have questions or remarks open a discussion on the <a href="https://huggingface.co/spaces/tfrere/research-blog-template/discussions?status=open&type=discussion">Community tab</a>!
  </Fragment>
</Aside>

## Introduction
A modern medium for presenting research
The web enables forms of explanation that static PDFs cannot: **reactive diagrams**, progressive notation, and **exploratory views** that reveal how ideas behave. Use **interactive fragments** to let readers hover, scrub, and inspect—building **intuition**, not just reading results.

New ways of thinking enable new discoveries
Careful notation, **well‑chosen visual encodings**, and **small interactive experiments** deepen understanding. By making these artifacts **first‑class**—alongside text, math, and code—this template helps your audience grasp mechanisms, limits, and trade‑offs.

Machine learning needs more transparency
Clear, **inspectable examples** make methods safer and more comprehensible. Embed live widgets, reveal **intermediate states**, and link to sources so readers can verify claims and **reproduce results**.

Legitimacy for non‑traditional research artifacts
Not every contribution fits a PDF. Treat demos, visualizations, and interactive write‑ups as **real scholarship**: cite them, version them, and ship them together.

This project is heavely inspired by [**Distill**](https://distill.pub) (2016–2021), which championed clear, web‑native scholarship.


{/* ### Notable examples of excellent scientific articles

A short, curated list of well‑designed and often interactive work:

- **Distill — The Building Blocks of Interpretability**: [distill.pub/2018/building-blocks](https://distill.pub/2018/building-blocks/)
- **R2D3 — A Visual Introduction to Machine Learning (Part 1)**: [r2d3.us/visual-intro-to-machine-learning-part-1](http://www.r2d3.us/visual-intro-to-machine-learning-part-1/)
- **Seeing Theory — An interactive introduction to probability and statistics**: [seeing-theory.brown.edu](https://seeing-theory.brown.edu/)
- **ConvNetJS — Neural networks in the browser**: [cs.stanford.edu/people/karpathy/convnetjs](http://cs.stanford.edu/people/karpathy/convnetjs/)
- **Explorable Explanations — Collection**: [explorableexplanations.com](http://explorableexplanations.com/)
- **Distill — Why Momentum Really Works**: [distill.pub/2017/momentum](https://distill.pub/2017/momentum/)
 */} 

<GettingStarted />

<WritingYourContent />

<AvailableBlocks />

<BestPractices />


## Conclusion

This template provides a **practical baseline** for writing and sharing technical articles with **math**, **citations**, and **interactive figures**. **Start simple**, **iterate** on structure and style, and keep content **maintainable** for future readers and collaborators.