From f6a039905bb4a0d048d7e95951f4db6346c357fd Mon Sep 17 00:00:00 2001 From: Jordan Scales Date: Tue, 21 Apr 2020 13:50:15 -0400 Subject: [PATCH] add dedent package and finish example usage --- build.js | 6 ++- docs/index.html.ejs | 103 +++++++++++--------------------------------- package-lock.json | 6 +++ package.json | 1 + 4 files changed, 37 insertions(+), 79 deletions(-) diff --git a/build.js b/build.js index a777c81..2993bca 100644 --- a/build.js +++ b/build.js @@ -1,4 +1,5 @@ #!/usr/bin/env node +const dedent = require("dedent"); const ejs = require("ejs"); const fs = require("fs"); @@ -12,8 +13,9 @@ function getCurrentId() { function example(code) { const magicBrackets = /\[\[(.*)\]\]/g; - const inline = code.replace(magicBrackets, "$1"); - const escaped = code + const dedented = dedent(code); + const inline = dedented.replace(magicBrackets, "$1"); + const escaped = dedented .replace(magicBrackets, "") .replace(//g, ">"); diff --git a/docs/index.html.ejs b/docs/index.html.ejs index 8cace6a..fbd6776 100644 --- a/docs/index.html.ejs +++ b/docs/index.html.ejs @@ -141,16 +141,10 @@ being able to click the entire label to select the box).

-
- - - -
- Show code - 
<input type="checkbox" id="example1">
-<label for="example1">This is a checkbox</label>
-
-
+ <%- example(` + + + `) %>

Checkboxes can be selected and disabled with the standard checked and disabled @@ -162,36 +156,20 @@ a consistent spacing between inputs.

-
+ <%- example(`
- - + +
- - + +
- - + +
- -
- Show code - 
<div class="field-row">
-  <input checked type="checkbox" id="example2">
-  <label for="example2">I am checked</label>
-</div>
-<div class="field-row">
-  <input disabled type="checkbox" id="example3">
-  <label for="example3">I am inactive</label>
-</div>
-<div class="field-row">
-  <input checked disabled type="checkbox" id="example4">
-  <label for="example4">I am inactive but still checked</label>
-</div>
-
-
+ `) %> @@ -212,65 +190,36 @@ field-row class to ensure a consistent spacing between inputs.

-
+ <%- example(`
- - + +
- - + +
- -
- Show code - 
<div class="field-row">
-  <input id="radio1" type="radio" name="first-example">
-  <label for="radio1">Yes</label>
-</div>
-<div class="field-row">
-  <input id="radio2" type="radio" name="first-example">
-  <label for="radio2">No</label>
-</div>
-
-
+ `) %>

Option buttons can also be checked and disabled with their corresponding HTML attributes.

-
+ <%- example(`
- - + +
- - + +
- - + +
- -
- Show code - - 
<div class="field-row">
-  <input id="radio3" type="radio" name="second-example">
-  <label for="radio3">Peanut butter should be smooth</label>
-</div>
-<div class="field-row">
-  <input checked disabled id="radio4" type="radio" name="second-example">
-  <label for="radio4">I understand why people like crunchy peanut butter</label>
-</div>
-<div class="field-row">
-  <input disabled id="radio5" type="radio" name="second-example">
-  <label for="radio5">Crunchy peanut butter is good</label>
-</div>
-
-
+ `) %> diff --git a/package-lock.json b/package-lock.json index f03891b..eef926e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -4,6 +4,12 @@ "lockfileVersion": 1, "requires": true, "dependencies": { + "dedent": { + "version": "0.7.0", + "resolved": "https://registry.npmjs.org/dedent/-/dedent-0.7.0.tgz", + "integrity": "sha1-JJXduvbrh0q7Dhvp3yLS5aVEMmw=", + "dev": true + }, "ejs": { "version": "3.0.2", "resolved": "https://registry.npmjs.org/ejs/-/ejs-3.0.2.tgz", diff --git a/package.json b/package.json index cb580a6..6c59890 100644 --- a/package.json +++ b/package.json @@ -25,6 +25,7 @@ }, "homepage": "https://github.com/jdan/windows98.css#readme", "devDependencies": { + "dedent": "^0.7.0", "ejs": "^3.0.2" } }