CoolFace
Apppublic

lvwerra/distill-blog-template-exp

sourceHugging Faceapache-2.0updated 2y agoView on Hugging Face
0likes
App README

Distill Blog Template

A beautiful, interactive blog template based on the Distill.pub format. This template provides everything you need to create technical blogs with mathematics, interactive visualizations, citations, and more.

Features

  • —Clean, responsive design based on Distill.pub
  • —Support for mathematical notation using KaTeX
  • —Interactive visualizations with D3.js and Plotly
  • —Citation and bibliography support
  • —Asynchronous loading of HTML fragments for complex components
  • —Webpack-based build system with optimization

Getting Started

Installation

bash
git clone https://github.com/your-username/distill-blog-template.git
cd distill-blog-template
npm install

Development

bash
npm run dev

This will start a local development server at http://localhost:8080.

Building for Production

bash
npm run build

This will create optimized files in the dist/ directory that you can deploy to any static hosting service.

HTML Fragments

This template supports HTML fragments, which are useful for including complex visualizations or interactive components:

Adding a New Fragment

  1. 1.Create a new HTML file in the src/fragments/ directory, e.g., src/fragments/my-visualization.html
  2. 2.Include it in your main document using {{{fragment-my-visualization}}}

When to Use Fragments

  • —Use compile-time fragments for content that should be available immediately after page load
  • —Use run-time fragments for most content to keep the initial HTML file size reasonable

Interactive Visualizations with Plotly

The template includes a Python script (generate_example_plot.py) that demonstrates how to create interactive Plotly visualizations and export them as HTML fragments:

bash
# Install required dependencies
pip install numpy plotly

# Run the script to generate example visualizations
python generate_example_plot.py

This will generate several HTML fragments in the src/fragments/ directory that you can include in your blog:

  • —example-plotly-chart.html: A simple line chart
  • —example-plotly-scatter.html: A scatter plot with hover information
  • —example-plotly-heatmap.html: A heatmap visualization
  • —example-plotly-combined.html: A multi-panel plot with different chart types

You can use these examples as a starting point for creating your own interactive visualizations.

Customization

  • —Edit src/index.html to change the main content
  • —Edit src/style.css to customize the appearance
  • —Edit src/bibliography.bib to include your citations
  • —Add JavaScript code to src/index.js or create new modules

Deployment

After building with npm run build, you can deploy the contents of the dist/ directory to any static site hosting service like GitHub Pages, Netlify, or Vercel.

License

Apache 2.0

Acknowledgements

This template is based on the excellent work of the Distill.pub team.