mirror_css/98.css
1
0
Fork 0
mirror of https://github.com/jdan/98.css.git synced 2025-09-09 05:30:49 +02:00
Code Issues Releases Wiki Activity

helper code for rendering examples

Browse Source
This commit is contained in:
Jordan Scales
2020-04-21 13:41:54 -04:00
parent a3f9651982
commit 9338217743
2 changed files with 26 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
build.js
View File

@@ -10,12 +10,29 @@ function getCurrentId() {
return id; 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() { function buildDocs() {
const template = fs.readFileSync("./docs/index.html.ejs", "utf-8"); const template = fs.readFileSync("./docs/index.html.ejs", "utf-8");
fs.writeFileSync( fs.writeFileSync(
"./docs/index.html", "./docs/index.html",
ejs.render(template, { getNewId, getCurrentId }) ejs.render(template, { getNewId, getCurrentId, example })
); );
} }

40
docs/index.html.ejs
View File

@@ -92,55 +92,31 @@
They are given 12px of horizontal padding by default. They are given 12px of horizontal padding by default.
</p> </p>
<div class="example"> <%- example(`<button>Click me</button>`) %>
<button>Click me</button>
<details>
<summary>Show code</summary>
<pre><code>&lt;button&gt;Click me&lt;/button&gt;</code></pre>
</details>
</div>
<p> <p>
When buttons are clicked, the raised borders become sunken. When buttons are clicked, the raised borders become sunken.
The following button is simulated to be in the pressed (active) state. 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> </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> <p>
Disabled buttons maintain the same raised border, but have a "washed out" Disabled buttons maintain the same raised border, but have a "washed out"
appearance in their label. appearance in their label.
</p> </p>
<div class="example"> <%- example(`<button disabled>I cannot be clicked</button>`) %>
<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>
<p> <p>
Button focus is communicated with a dotted border, set 4px within the contents of the button. Button focus is communicated with a dotted border, set 4px within the contents of the button.
The following example is simulated to be focused. The following example is simulated to be focused.
</p> </p>
<div class="example"> <%- example(`<button[[ class="focused"]]>I am focused</button>`) %>
<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>
</div> </div>
</section> </section>