with one click
website-create-examples
// Create and update interactive examples for the Eleventy website using page entrypoints and src/examples fragments.
// Create and update interactive examples for the Eleventy website using page entrypoints and src/examples fragments.
| name | website-create-examples |
| description | Create and update interactive examples for the Eleventy website using page entrypoints and src/examples fragments. |
Create and update interactive examples on the tfplan2md website using the Eleventy authoring model.
Interactive examples are not hand-authored inline as large HTML blocks on page files.
website/src/pages/website/src/examples/<example-id>/meta.json for the example title and metadatarendered.html for the rendered output panesource.html for the source pane markupexampleBlock shortcode defined in website/.eleventy.jswebsite/src/site-assets/js/site.js, so page-local script tags are not neededwebsite/src/pages/ and example fragments in website/src/examples/; do not hand-edit generated output in website/dist/.<page-or-section>--example-<n> pattern.artifacts/, examples/, generated demo output, or other repository-backed material.scripts/website-verify.sh --all after adding or changing examples.The artifacts/ directory contains pre-generated markdown and HTML examples from the comprehensive demo:
Markdown Source:
artifacts/comprehensive-demo.md - Full markdown outputartifacts/comprehensive-demo-simple-diff.md - Simplified diff formatRendered HTML:
artifacts/comprehensive-demo.github.html - GitHub-rendered HTMLartifacts/comprehensive-demo.azdo.html - Azure DevOps-rendered HTMLHow to Extract:
azurerm_firewall_network_rule_collection).github.html fileIf the exact example doesn't exist in artifacts:
Run the demo generation script:
scripts/generate-demo-artifacts.sh
This regenerates all artifacts from the current codebase.
Create custom examples:
# Create a custom Terraform plan
cd examples/
# Modify existing demo or create new scenario
terraform plan -out=plan.tfplan
terraform show -json plan.tfplan > plan.json
# Generate markdown
docker run -v $(pwd):/data oocx/tfplan2md:latest plan.json > output.md
Render to HTML: Use the HtmlRenderer tool:
dotnet run --project src/tools/Oocx.TfPlan2Md.HtmlRenderer \
--input artifacts/comprehensive-demo.md \
--output artifacts/custom-example.github.html \
--platform github
website/src/pages/website/src/pages/examples.njkwebsite/src/pages/features/website/src/examples/<example-id>/meta.jsonrendered.htmlsource.htmlmeta.json holds the example title and metadata used by the rendererrendered.html contains the rendered example pane contentsource.html contains the source-pane markup, typically a <pre><code>...</code></pre> blockFirewall Network Rule Collection OutputexampleBlock shortcode from the relevant .njk page:{{ exampleBlock("features--firewall-rules--example-1") | safe }}
website/src/_includes/components/scripts/website-verify.sh --allwebsite/dist/Regenerate artifacts:
scripts/generate-demo-artifacts.sh
Locate the example:
exampleBlock("...") call in website/src/pages/website/src/examples/Update rendered view:
rendered.htmlUpdate source view:
source.htmlTest:
<code>Most features show tables. Rendered view has <table>, source view has pipe-separated markdown.
Use inline styles for before/after highlighting. Keep all styles in rendered view; show escaped HTML tags in source view.
Show hierarchical structure with <details> in rendered view; show markdown <details> tags in source view.
Show collapsed sections in rendered view; show the markdown collapsible syntax in source view.
website/src/site-assets/js/site.js and the interactive examples module wiringrendered.html is valid and completesource.html contains the expected code block structureWhen adding examples, these files are typically involved:
website/src/pages/*.njk, website/src/pages/features/*.njkwebsite/src/examples/<example-id>/meta.json, rendered.html, source.htmlwebsite/src/site-assets/js/ (rarely modified)artifacts/*.md (regenerated via script)artifacts/*.html (regenerated via script)Before committing changes:
.njk page using exampleBlockMinimum-requirements checklist for any change — code or docs-only. Run this before every PR creation or push to avoid CI failures on the first attempt.
Generate PNG screenshots for release notes using the repository's HtmlRenderer and ScreenshotGenerator tools. Use when asked to add screenshots to release notes or documentation.
Determine the next available issue number across all change types (feature, fix, workflow) by checking both local docs and remote branches, then reserve it by pushing an empty branch.
Convert the mermaid diagram in docs/agents.md to a blueprint-styled SVG for the website. Use when the workflow diagram in agents.md is updated and needs to be reflected on the website.
Run a focused accessibility pass for website changes (WCAG 2.1 AA-oriented).
Use browser tools to inspect rendering and troubleshoot website issues with the Maintainer.