intermediatemetadevopsshowcase

Interactive content showcase

Every renderer component on one page — reference for authoring new tutorials.

By Mohamed SalahApr 29, 2026

Interactive content showcase

Below: every component the renderer accepts, in one tutorial. Use this as a reference when authoring new DevOps tutorials.

This page is auto-generated to demonstrate the new MDX component spine (ADR-0006). Open the source on GitHub to see exactly what the agent emitted.

1. Mermaid — static diagrams

Mermaid

2. AnimatedDiagram — multi-frame Mermaid with play / pause

Frame 1Frame 2Frame 3Frame 4

3. Quiz — knowledge check

What is the smallest deployable unit in Kubernetes?

4. Compare — side-by-side diff

Helm (templated)
apiVersion: v1
kind: ConfigMap
metadata:
  name: {{ .Values.name }}
data:
  url: {{ .Values.url }}
Kustomize (overlay)
resources:
  - configmap.yaml
patches:
  - target:
      kind: ConfigMap
    patch: |
      data:
        url: https://prod.example.com

5. AskTwin — talk to the agent

Debug with the twinWalk me through how you'd debug a CrashLoopBackOff in production.

6. Code block

kubectl get pods -A --field-selector status.phase=Pending

7. Asciinema — terminal recording

(Replace the URL above with the output of asciinema_upload.)

8. Coming up

The next tutorial drills into observability — terminal clips of kubectl logs -f running against a real cluster, plus a runnable code editor for Prometheus rules.