mirror_css/98.css
1
0
Fork 0
mirror of https://github.com/jdan/98.css.git synced 2025-09-03 02:42:48 +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;
}
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 })
);
}

40
docs/index.html.ejs
View File

@@ -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>