From 471cb0287db1670dc0ff9b9b08773b0dcab35944 Mon Sep 17 00:00:00 2001 From: Lea Verou Date: Wed, 4 Dec 2024 16:25:35 -0500 Subject: [PATCH] Document API around code examples cc @claviska --- CONTRIBUTING.md | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 34ea8f77c..1a4b08b8d 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -3,3 +3,21 @@ Before contributing, please review the contributions guidelines at: [webawesome.com/docs/resources/contributing](https://webawesome.com/docs/resources/contributing) + +## Website Architecture + +### Code Examples + +`/docs/_utils/code-examples.js` is a small 11ty plugin that turns the code examples into previews. It relies on a client-side script of the same name that lives in /docs/assets/scripts and gets loaded into the site’s template. + +That takes care of rendering standard code blocks. It supports certain modifier classes: +- `example`: opts a code snippet in to live demo rendering +- `no-edit`: removes the codepen button +- `open`: shows the code snippet by default + +Modifier classes are used like this: +``` +```html {.example .no-edit .open} +``` + +That will render an example without the CodePen button and with the code already shown.