Authoring Feature Showcase

This lesson is deliberately dense: it exists so contributors and testers can see the platform surface area in one place. It also works as a pattern catalog for new lessons.

Markdown and Math

Authors can write normal Markdown, tables, code fences, inline math such as $f(x)=x^2+1$, and display math:

type LessonFeature = "markdown" | "math" | "diagram" | "code" | "assessment";

const usefulFeature = (feature: LessonFeature) =>
  feature === "diagram" ? "show structure" : "support understanding";

PlantUML Sequence Diagram

skinparam backgroundColor transparent
actor Contributor
participant "MDX Lesson" as MDX
participant "Astro Build" as Astro
participant "Static Site" as Site

Contributor -> MDX: edit content
MDX -> Astro: import components
Astro -> Site: render pages
Site --> Contributor: preview and test

PlantUML Activity Diagram

skinparam backgroundColor transparent
start
:Pick one learning goal;
if (Does a visual help?) then (yes)
:Add PlantUML, TikZ, or Python visual;
else (no)
:Keep the prose lean;
endif
:Add one check for understanding;
:Run the build;
stop

TikZ Diagram

TikZ is useful for precise mathematical and conceptual drawings. This one is rendered at build time and participates in the same click-to-open overlay behavior as PlantUML.

\draw[->, thick] (-0.3,0) -- (4.3,0) node[right] {$x$};
\draw[->, thick] (0,-0.3) -- (0,3.2) node[above] {$y$};
\draw[domain=0.25:4, smooth, variable=\x, blue, very thick] plot ({\x},{0.35*\x*\x});
\draw[dashed] (2,0) -- (2,1.4) -- (0,1.4);
\filldraw[blue] (2,1.4) circle (2pt);
\node[above right] at (2,1.4) {$f(x)=0.35x^2$};
\node[below] at (2,0) {$a$};
\node[left] at (0,1.4) {$f(a)$};

\draw[->, thick] (-0.3,0) -- (4.3,0) node[right] {$x$};
\draw[->, thick] (0,-0.3) -- (0,3.2) node[above] {$y$};
\draw[domain=0.25:4, smooth, variable=\x, blue, very thick] plot ({\x},{0.35*\x*\x});
\draw[dashed] (2,0) -- (2,1.4) -- (0,1.4);
\filldraw[blue] (2,1.4) circle (2pt);
\node[above right] at (2,1.4) {$f(x)=0.35x^2$};
\node[below] at (2,0) {$a$};
\node[left] at (0,1.4) {$f(a)$};

Build-Time Python Diagram

Python diagrams are rendered during the Astro build, cached, and displayed as normal lesson diagrams. This is the standard choice when an author wants Python to generate a stable visual explanation rather than an interactive lab.

import os
import numpy as np
import matplotlib.pyplot as plt

x = np.linspace(0, 2 * np.pi, 240)
y = np.sin(x)
z = np.cos(x)

plt.figure(figsize=(8, 4.5))
plt.plot(x, y, label="sin(x)", linewidth=2)
plt.plot(x, z, label="cos(x)", linewidth=2)
plt.fill_between(x, y, z, where=y > z, alpha=0.18)
plt.title("Build-Time Python Diagram")
plt.xlabel("x")
plt.ylabel("value")
plt.legend()
plt.grid(alpha=0.25)
plt.savefig(os.environ["LIBREUNI_OUTPUT"], format="svg", bbox_inches="tight")

Python SVG Diagram

Python can also generate SVG directly. This is useful for small custom diagrams where using a full plotting library would be heavier than the diagram itself.

nodes = [
  ("Idea", 70, 75, "#2563eb"),
  ("Draft", 220, 75, "#7c3aed"),
  ("Review", 370, 75, "#059669"),
  ("Publish", 520, 75, "#f59e0b"),
]

parts = ['<svg xmlns="http://www.w3.org/2000/svg" width="620" height="170" viewBox="0 0 620 170">']
parts.append('<rect width="620" height="170" rx="18" fill="#f8fafc"/>')
for label, x, y, color in nodes:
  parts.append(f'<circle cx="{x}" cy="{y}" r="34" fill="{color}" opacity="0.92"/>')
  parts.append(f'<text x="{x}" y="{y + 62}" text-anchor="middle" font-family="sans-serif" font-size="14" font-weight="700" fill="#0f172a">{label}</text>')
parts.append('<path d="M104 75 H186 M254 75 H336 M404 75 H486" stroke="#0f172a" stroke-width="5" stroke-linecap="round"/>')
parts.append('</svg>')

with open(__import__("os").environ["LIBREUNI_OUTPUT"], "w", encoding="utf-8") as file:
  file.write("".join(parts))

Runtime Code Lab

The code runner is still useful when learners should experiment with code directly. It is not the standard way to publish stable diagrams, but it remains useful for exploration.

const features = ["content", "diagram", "quiz", "preview"];
console.log(features.map((feature, index) => `${index + 1}. ${feature}`).join("\n"));

Fill-In Exercise

import PlantUML from '../../../components/PlantUML.astro';

<PlantUML code={\`
Alice -> Bob: hello
\`} />

import  from '../../../components/PlantUML.astro';

< code={\`
Alice -> Bob: hello
\`} />