From 9338217743681a556f8473b4a4de2fd885bb02d2 Mon Sep 17 00:00:00 2001
From: Jordan Scales <scalesjordan@gmail.com>
Date: Tue, 21 Apr 2020 13:41:54 -0400
Subject: [PATCH] helper code for rendering examples

---
 build.js            | 19 ++++++++++++++++++-
 docs/index.html.ejs | 40 ++++++++--------------------------------
 2 files changed, 26 insertions(+), 33 deletions(-)

diff --git a/build.js b/build.js
index af4746f..a777c81 100644
--- a/build.js
+++ b/build.js
@@ -10,12 +10,29 @@ function getCurrentId() {
   return id;
 }
 
+function example(code) {
+  const magicBrackets = /\[\[(.*)\]\]/g;
+  const inline = code.replace(magicBrackets, "$1");
+  const escaped = code
+    .replace(magicBrackets, "")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;");
+
+  return `<div class="example">
+    ${inline}
+    <details>
+      <summary>Show code</summary>
+      <pre><code>${escaped}</code></pre>
+    </details>
+  </div>`;
+}
+
 function buildDocs() {
   const template = fs.readFileSync("./docs/index.html.ejs", "utf-8");
 
   fs.writeFileSync(
     "./docs/index.html",
-    ejs.render(template, { getNewId, getCurrentId })
+    ejs.render(template, { getNewId, getCurrentId, example })
   );
 }
 
diff --git a/docs/index.html.ejs b/docs/index.html.ejs
index 0fc0bb3..8cace6a 100644
--- a/docs/index.html.ejs
+++ b/docs/index.html.ejs
@@ -92,55 +92,31 @@
           They are given 12px of horizontal padding by default.
         </p>
 
-        <div class="example">
-          <button>Click me</button>
-
-          <details>
-            <summary>Show code</summary>
-            <pre><code>&lt;button&gt;Click me&lt;/button&gt;</code></pre>
-          </details>
-        </div>
+        <%- example(`<button>Click me</button>`) %>
 
         <p>
           When buttons are clicked, the raised borders become sunken.
           The following button is simulated to be in the pressed (active) state.
-
-          <div class="example">
-            <button class="active">I am being pressed</button>
-
-            <details>
-              <summary>Show code</summary>
-              <pre><code>&lt;button&gt;I am being pressed&lt;/button&gt;</code></pre>
-            </details>
-          </div>
         </p>
 
+        <% /* [[ ... ]] is used to render contents that
+              will not appear in the "Show code" section */
+        %>
+        <%- example(`<button[[ class="active"]]>I am being pressed</button>`) %>
+
         <p>
           Disabled buttons maintain the same raised border, but have a "washed out"
           appearance in their label.
         </p>
 
-        <div class="example">
-          <button disabled>I cannot be clicked</button>
-
-          <details>
-            <summary>Show code</summary>
-            <pre><code>&lt;button disabled&gt;I cannot be clicked&lt;/button&gt;</code></pre>
-          </details>
-        </div>
+        <%- example(`<button disabled>I cannot be clicked</button>`) %>
 
         <p>
           Button focus is communicated with a dotted border, set 4px within the contents of the button.
           The following example is simulated to be focused.
         </p>
 
-        <div class="example">
-          <button class="focused">I am focused</button>
-          <details>
-            <summary>Show code</summary>
-            <pre><code>&lt;button&gt;I am focused&lt;/button&gt;</code></pre>
-          </details>
-        </div>
+        <%- example(`<button[[ class="focused"]]>I am focused</button>`) %>
       </div>
     </section>