Astro Command unlocks the world

Introduction

This weekend I built a new Astro component that lets callers use external commands on their machine to generate html content.

trashhalo / astro-command

run commands as astro components

In the repository there is a hello world demo that is shelling out to python.

---
import { Command } from "astro-command";
---
<Command caller={import.meta.url} command="./Component.py" message="from python!" />

#!/usr/bin/env python 

import sys, json

data = json.load(sys.stdin)
print(f'<h1> Hello {data["message"]} </h1>')

Props are passed in as a json blob to stdin. Html comes out stdout.

Taking it up a notch

Python has a very deep well of libraries that can be useful for astro page generation. One example is https://matplotlib.org/ a plotting library that can generate beautiful graphs outputting SVG.

As a quick example I rewrote the hello world py component to output a graph instead.

	#!/usr/bin/env python
	import sys
	import matplotlib.pyplot as plt
	import numpy as np
	# Data for plotting
	t = np.arange(0.0, 2.0, 0.01)
	s = 1 + np.sin(2 * np.pi * t)
	fig, ax = plt.subplots()
	ax.plot(t, s)
	ax.set(xlabel='time (s)', ylabel='voltage (mV)',
	title='About as simple as it gets, folks')
	ax.grid()
	image_format = 'svg'
	fig.savefig(sys.stdout, format=image_format, dpi=1200)

view raw Component.py hosted with ❤ by GitHub

	---
	import { Command } from "astro-command";
	---
	<h1> Python plot demo </h1>
	<Command caller={import.meta.url} command="./Component.py" sendProps={false} />

view raw Demo.astro hosted with ❤ by GitHub

Its not just python

Now that you have shell access from Astro you can use any command! The first one I created a custom component for is Pandoc to get access to all the types of content Pandoc can understand. With 12 lines of astro code I unlocked 30+ file formats!

trashhalo / astro-pandoc

astro component that lets you use pandoc

Astro Pandoc

Astro component for using pandoc to convert content. This allows you to embed any format pandoc supports.

• Supported formats https://pandoc.org/MANUAL.html#general-options
• Demo
• Requires you to have pandoc installed on your machine!

Usage

---
import { Pandoc } from "astro-pandoc";
---
<Pandoc caller={import.meta.url} file="Component.tex" extraArgs={["--webtex"]} /

Component.tex

\documentclass{article}
\usepackage{amsmath} % for the equation* environment
\begin{document}
This is a simple math expression \(\sqrt{x^2+1}\) inside text. 
And this is also the same: 
\begin{math}
\sqrt{x^2+1}
\end{math}
but by using another command.

This is a simple math expression without numbering
\[\sqrt{x^2+1}\] 
separated from text.

This is also the same:
\begin{displaymath}
\sqrt{x^2+1}
\end{displaymath

…

View on GitHub

Whats next?

There are lots of commands out there. Which one should I connect to astro next?