Skip to content

Commit

Permalink
doc: add demo and improve examples
Browse files Browse the repository at this point in the history
  • Loading branch information
lowlighter committed Oct 28, 2024
1 parent e64253d commit a06b4d7
Show file tree
Hide file tree
Showing 13 changed files with 382 additions and 140 deletions.
3 changes: 1 addition & 2 deletions @mizu/render/static/static.ts
Original file line number Diff line number Diff line change
Expand Up @@ -123,9 +123,8 @@ export class Static extends Server {
await write(path, await this.#render(encoder.encode(source as string), options.render))
log.with({ path }).ok()
}

log.ok("done!")
}
log.ok("done!")
}

/** Used by {@linkcode Static#generate()} to render content. */
Expand Down
2 changes: 1 addition & 1 deletion www/html/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@
<section class="centered">
<img *if="page === 'index'" class="logo" src="/logo.png" alt="" />
</section>
<section *if="page === 'index'" *for="['about', 'features', 'faq', 'usage', 'concepts', 'directives', 'api']" %http="`/html/mizu/${$value}.html`" %response.html></section>
<section *if="page === 'index'" *for="['about', 'features', 'demo', 'faq', 'usage', 'concepts', 'directives', 'api']" %http="`/html/mizu/${$value}.html`" %response.html></section>
<section *else %http="`/html/${page}.html`" %response.html></section>
</main>
<aside *if="page === 'index'" data-expandable="☰ Quick navigation">
Expand Down
10 changes: 5 additions & 5 deletions www/html/mizu/api.html
Original file line number Diff line number Diff line change
@@ -1,4 +1,9 @@
<h1 id="api"><a href="#api">API</a></h1>
<div class="flash attention">
<p>
This section has not been properly documented yet.
</p>
</div>
<section>
<h2 id="api-user"><a href="#api-user">User API</a></h2>
<p>
Expand Down Expand Up @@ -37,11 +42,6 @@ <h2 id="api-dev"><a href="#api-dev">Developer API</a></h2>
<p>
If you wish to render templates, please refer to the <a href="#api-user">User API</a> section instead.
</p>
<div class="flash attention">
<p>
This section has not been documented yet.
</p>
</div>
<section *if="false">
<h3 id="api-directive"><a href="#api-directive">Directive API</a></h3>
</section>
Expand Down
183 changes: 115 additions & 68 deletions www/html/mizu/demo.html
Original file line number Diff line number Diff line change
@@ -1,61 +1,16 @@
***mizu.js*** aims to provide a simple alternative for creating dynamic web pages without ///

<div class="mockup-desktop">
<div class="background">
<svg viewBox="0 0 100 100" preserveAspectRatio="xMidYMid slice">
<defs>
<radialGradient id="Gradient1" cx="50%" cy="50%" fx="0.441602%" fy="50%" r=".5">
<animate attributeName="fx" dur="68s" values="0%;3%;0%" repeatCount="indefinite"></animate>
<stop offset="0%" stop-color="rgba(255, 0, 255, 1)"></stop>
<stop offset="100%" stop-color="rgba(255, 0, 255, 0)"></stop>
</radialGradient>
<radialGradient id="Gradient2" cx="50%" cy="50%" fx="2.68147%" fy="50%" r=".5">
<animate attributeName="fx" dur="47s" values="0%;3%;0%" repeatCount="indefinite"></animate>
<stop offset="0%" stop-color="rgba(255, 255, 0, 1)"></stop>
<stop offset="100%" stop-color="rgba(255, 255, 0, 0)"></stop>
</radialGradient>
<radialGradient id="Gradient3" cx="50%" cy="50%" fx="0.836536%" fy="50%" r=".5">
<animate attributeName="fx" dur="43s" values="0%;3%;0%" repeatCount="indefinite"></animate>
<stop offset="0%" stop-color="rgba(0, 255, 255, 1)"></stop>
<stop offset="100%" stop-color="rgba(0, 255, 255, 0)"></stop>
</radialGradient>
<radialGradient id="Gradient4" cx="50%" cy="50%" fx="4.56417%" fy="50%" r=".5">
<animate attributeName="fx" dur="46s" values="0%;5%;0%" repeatCount="indefinite"></animate>
<stop offset="0%" stop-color="rgba(0, 255, 0, 1)"></stop>
<stop offset="100%" stop-color="rgba(0, 255, 0, 0)"></stop>
</radialGradient>
<radialGradient id="Gradient5" cx="50%" cy="50%" fx="2.65405%" fy="50%" r=".5">
<animate attributeName="fx" dur="49s" values="0%;5%;0%" repeatCount="indefinite"></animate>
<stop offset="0%" stop-color="rgba(0,0,255, 1)"></stop>
<stop offset="100%" stop-color="rgba(0,0,255, 0)"></stop>
</radialGradient>
<radialGradient id="Gradient6" cx="50%" cy="50%" fx="0.981338%" fy="50%" r=".5">
<animate attributeName="fx" dur="51s" values="0%;5%;0%" repeatCount="indefinite"></animate>
<stop offset="0%" stop-color="rgba(255,0,0, 1)"></stop>
<stop offset="100%" stop-color="rgba(255,0,0, 0)"></stop>
</radialGradient>
</defs>
<rect x="13.744%" y="1.18473%" width="100%" height="100%" fill="url(#Gradient1)" transform="rotate(334.41 50 50)">
<animate attributeName="x" dur="80s" values="25%;0%;25%" repeatCount="indefinite"></animate>
<animate attributeName="y" dur="42s" values="0%;25%;0%" repeatCount="indefinite"></animate>
<animateTransform attributeName="transform" type="rotate" from="0 50 50" to="360 50 50" dur="14s" repeatCount="indefinite"></animateTransform>
</rect>
<rect x="-2.17916%" y="35.4267%" width="100%" height="100%" fill="url(#Gradient2)" transform="rotate(255.072 50 50)">
<animate attributeName="x" dur="92s" values="-25%;0%;-25%" repeatCount="indefinite"></animate>
<animate attributeName="y" dur="48s" values="0%;50%;0%" repeatCount="indefinite"></animate>
<animateTransform attributeName="transform" type="rotate" from="0 50 50" to="360 50 50" dur="24s" repeatCount="indefinite"></animateTransform>
</rect>
<rect x="9.00483%" y="14.5733%" width="100%" height="100%" fill="url(#Gradient3)" transform="rotate(139.903 50 50)">
<animate attributeName="x" dur="100s" values="0%;25%;0%" repeatCount="indefinite"></animate>
<animate attributeName="y" dur="24s" values="0%;25%;0%" repeatCount="indefinite"></animate>
<animateTransform attributeName="transform" type="rotate" from="360 50 50" to="0 50 50" dur="18s" repeatCount="indefinite"></animateTransform>
</rect>
</svg>
</div>
<div class="windows">
<div class="vscode">
<div class="titlebar">
<svg xmlns="http://www.w3.org/2000/svg" width="54" height="14" viewBox="0 0 54 14">
<div class="demo loading" *set="{ demo: { browsers: ['iife', 'esm'], deno: ['ssr', 'ssg'] } }" data-color-scheme="dark">
<div class="mockups">
<div class="mockup runtime">
<div class="tabs">
<img *for="['deno', 'node', 'bun']" class="app-icon" :src="`https://lecoq.io/cdn/logos/${$value}.svg`" :data-demo-for-runtime="$value" />
<div class="tab fake"><small>File</small></div>
<div class="tab fake hide-small"><small>Edit</small></div>
<div class="tab fake hide-small"><small>View</small></div>
<div class="tab fake hide-small"><small>Run</small></div>
<div class="tab fake"><small>Terminal</small></div>
<div class="tab fake hide-small"><small>Help</small></div>
<div class="grow"></div>
<svg class="mr-1" xmlns="http://www.w3.org/2000/svg" width="54" height="14" viewBox="0 0 54 14">
<g fill="none" fill-rule="evenodd" transform="translate(1 1)">
<circle cx="6" cy="6" r="6.5" fill="var(--danger)"></circle>
<circle cx="26" cy="6" r="6.5" fill="var(--attention)"></circle>
Expand All @@ -64,20 +19,112 @@
</svg>
</div>
<div class="tabs">
<div class="tab">app.html</div>
<div class="tab active">app.ts</div>
<i class="fake" %http="https://lecoq.io/cdn/octicons/three-bars-24.svg" %response.swap></i>
<div *for="demo.deno" class="tab" :data-demo-tab="`deno-${$value}`" *mustache>{{ $value }}.ts</div>
</div>
<div class="app-view">
<div class="runtime-view">
<pre *for="demo.deno" :data-demo-for-tab="`deno-${$value}`" class="usage-snippet"><code *code[ts] %http="`/html/mizu/examples/deno/${$value}.ts`" %response.text="this.textContent = $content.replace(/^\/\/ deno-lint-ignore.*\n/gm, '')"></code></pre>
<pre *for="demo.deno" :data-demo-for-tab="`deno-${$value}`" class="lines"><code %http="`/html/mizu/examples/deno/${$value}.ts`" %response.text="this.textContent = $content.split(`\n`).slice(1).map((_, i) => i).join(&quot;\n&quot;)"></code></pre>
</div>
<div class="runtime-terminal">
<div *for="demo.deno" :data-demo-for-tab="`deno-${$value}`" *mustache><span class="accent">/workspaces/mizu</span> $ deno {{ {ssr:'serve', ssg:'run'}[$value] }} examples/{{ $value }}.ts</div>
<div data-demo-for-tab="deno-ssr">
<span class="success">deno serve</span>: Listening on <span class="attention">http://0.0.0.0:8000/</span>
</div>
<div data-demo-for-tab="deno-ssg">
<span class="fg-accent">INFO</span> output:<span class="success">"/tmp/output"</span>
<span class="success">"generating..."</span>
</div>
<div data-demo-for-tab="deno-ssg">
<span class="fg-success">OK&nbsp;&nbsp;</span>
<span class="success">"done!"</span>
</div>
</div>
</div>
</div>
<div class="mockup browser" data-demo-for-runtime="browsers">
<div class="tabs">
<img class="app-icon" src="https://lecoq.io/cdn/logos/browsers.svg" />
<div *for="demo.browsers" class="tab" :data-demo-tab="`browsers-${$value}`" *mustache>
{{ {iife:"IIFE", esm:"ESM"}[$value] }}
<div class="before"></div>
<div class="after"></div>
</div>
<div class="grow"></div>
<svg class="mr-1" xmlns="http://www.w3.org/2000/svg" width="54" height="14" viewBox="0 0 54 14">
<g fill="none" fill-rule="evenodd" transform="translate(1 1)">
<circle cx="6" cy="6" r="6.5" fill="var(--danger)"></circle>
<circle cx="26" cy="6" r="6.5" fill="var(--attention)"></circle>
<circle cx="46" cy="6" r="6.5" fill="var(--success)"></circle>
</g>
</svg>
</div>
<div class="urlbar">
<i class="fake" %http="https://lecoq.io/cdn/octicons/arrow-left-24.svg" %response.swap></i>
<i class="fake" %http="https://lecoq.io/cdn/octicons/arrow-right-24.svg" %response.swap></i>
<input *for="demo.browsers" class="fake" type="text" :value="`https://mizu.test/${$value}.html`" :data-demo-for-tab="`browsers-${$value}`" />
<i class="fake hide-small" %http="https://lecoq.io/cdn/octicons/star-24.svg" %response.swap></i>
<i class="fake hide-small" %http="https://lecoq.io/cdn/octicons/three-bars-24.svg" %response.swap></i>
</div>
<div>
<pre>
<code *code[html] %http="`/html/mizu/examples/browsers/client.html`" %response.text></code>
</pre>
<pre>
<code *code[ts] %http="`/html/mizu/examples/deno/server.ts`" %response.text></code>
</pre>
<div class="app-view">
<div class="browser-view">
🌊 Yaa, mizu!
</div>
<div class="browser-inspector">
<div class="browser-inspector-bar">
<i class="fake" %http="https://lecoq.io/cdn/octicons/link-external-16.svg" %response.swap></i>
<i class="fake hide-small" %http="https://lecoq.io/cdn/octicons/device-mobile-16.svg" %response.swap></i>
<i class="fake hide-small" %http="https://lecoq.io/cdn/octicons/sidebar-collapse-16.svg" %response.swap></i>
<div class="active">
<i %http="https://lecoq.io/cdn/octicons/code-16.svg" %response.swap></i>
<small>Elements</small>
</div>
<i class="fake" %http="https://lecoq.io/cdn/octicons/terminal-16.svg" %response.swap></i>
<i class="fake" %http="https://lecoq.io/cdn/octicons/bug-16.svg" %response.swap></i>
<i class="fake" %http="https://lecoq.io/cdn/octicons/broadcast-16.svg" %response.swap></i>
<i class="fake" %http="https://lecoq.io/cdn/octicons/meter-16.svg" %response.swap></i>
<i class="fake" %http="https://lecoq.io/cdn/octicons/cpu-16.svg" %response.swap></i>
<i class="fake" %http="https://lecoq.io/cdn/octicons/browser-16.svg" %response.swap></i>
</div>
<div class="browser-inspector-content">
<pre *for="demo.browsers" :data-demo-for-tab="`browsers-${$value}`" class="usage-snippet"><code *code[html] %http="`/html/mizu/examples/browsers/${$value}.html`" %response.text></code></pre>
</div>
</div>
</div>
</div>
</div>
<div class="dock">
<img *for="['browsers', 'node', 'deno', 'bun']" :src="`https://lecoq.io/cdn/logos/${$value}.svg`" />
<img *for="['browsers', 'deno']" :data-demo-runtime="$value" :src="`https://lecoq.io/cdn/logos/${$value}.svg`" />
</div>
</div>
<script>
window.addEventListener("load", function () {
const data = { runtime: "", tab: "" }
for (const key of Object.keys(data)) {
document.querySelectorAll(`[data-demo-${key}]`).forEach((element) => {
element.addEventListener("click", () => {
if ((key === "runtime") && (data.runtime !== element.getAttribute(`data-demo-${key}`))) {
document.querySelector(`.mockup.${element.getAttribute(`data-demo-${key}`) === "browsers" ? "browser" : "runtime"} [data-demo-tab]`).click()
}
data[key] = element.getAttribute(`data-demo-${key}`)
document.querySelectorAll(`[data-demo-for-${key}]`).forEach((element) => {
if (element.getAttribute(`data-demo-for-${key}`) === data[key]) {
element.style.removeProperty("display")
} else {
element.style.setProperty("display", "none", "important")
}
})
document.querySelectorAll(".dock img").forEach((element) => element.classList.toggle("active", element.getAttribute("data-demo-runtime") === data.runtime))
document.querySelectorAll(".tab").forEach((element) => element.classList.toggle("active", element.getAttribute("data-demo-tab") === data.tab))
})
})
}
document.querySelector(`[data-demo-runtime]`).click()
document.querySelector(".demo").classList.remove("loading")
})
</script>
<div class="flash accent">
<p>Want to see <em>mizu.js</em> in action?</p>
<p>Dive into our <a href="/playground">interactive playground</a> and start experimenting!</p>
</div>
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
<!DOCTYPE html>
<html>
<head>
<title>ESM</title>
<meta charset="UTF-8" />
</head>
<body>
Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
<!DOCTYPE html>
<html>
<head>
<title>IIFE</title>
<meta charset="UTF-8" />
</head>
<body>
Expand Down
12 changes: 0 additions & 12 deletions www/html/mizu/examples/bun/server.ts

This file was deleted.

15 changes: 15 additions & 0 deletions www/html/mizu/examples/deno/ssg.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
#!/usr/bin/env -S deno run --allow-read --allow-env --allow-net --allow-write=/tmp/output
// Static Site Generation (SSG) with Mizu
// deno-lint-ignore no-external-import
import Mizu from "jsr:@mizu/render/static"

await Mizu.generate([
// Copy content from strings
[`<div *text="foo"></div>`, "index.html", { render: { context: { foo: "🌊 Yaa, mizu!" } } }],
// Copy content from callback return
[() => JSON.stringify(Date.now()), "timestamp.json"],
// Copy content from local files
["**/*", "static", { directory: "/fake/path" }],
// Copy content from URL
[new URL("https://matcha.mizu.sh/matcha.css"), "styles.css"],
], { clean: true, output: "/tmp/output" })
Original file line number Diff line number Diff line change
@@ -1,13 +1,12 @@
#!/usr/bin/env -S deno serve --allow-read --allow-env
// Server-Side Rendering (SSR) with Mizu
// deno-lint-ignore no-external-import
import Mizu from "jsr:@mizu/render/server"

const template = `<div *text="foo"></div>`
const context = { foo: "🌊 Yaa, mizu!" }

export default {
async fetch() {
const headers = new Headers({ "Content-Type": "text/html; charset=utf-8" })
return new Response(await Mizu.render(template, { context }), { headers })
const body = await Mizu.render(`<div *text="foo"></div>`, { context: { foo: "🌊 Yaa, mizu!" } })
return new Response(body, { headers })
},
}
Empty file.
14 changes: 1 addition & 13 deletions www/html/mizu/features.html
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<h1 id="features" style="visibility: hidden"><a href="#features">Features</a></h1>
<h1 id="features" style="visibility: hidden; height: calc(-1rem + var(--ly-header-size)) !important"><a href="#features">Features</a></h1>
<div class="features">
<div>
<h2>
Expand Down Expand Up @@ -61,15 +61,3 @@ <h2>
</small>
</div>
</div>
<div class="flash accent">
<p>Want to see <em>mizu.js</em> in action?</p>
<p>Dive into our <a href="/playground">interactive playground</a> and start experimenting!</p>
</div>
<div class="flash attention">
<p>
<em>mizu.js</em> is still in active development.
</p>
<p>
See <a href="https://github.com/lowlighter/mizu/issues/34">github.com/lowlighter/mizu/issues/34</a> for more information.
</p>
</div>
8 changes: 8 additions & 0 deletions www/html/mizu/usage.html
Original file line number Diff line number Diff line change
@@ -1,4 +1,12 @@
<h1 id="usage"><a href="#usage">Usage</a></h1>
<div class="flash attention">
<p>
<em>mizu.js</em> is still in active development.
</p>
<p>
See <a href="https://github.com/lowlighter/mizu/issues/34">github.com/lowlighter/mizu/issues/34</a> for more information.
</p>
</div>
<section>
<h2 id="usage-client"><a href="#usage-client">Client-side</a></h2>
<p>
Expand Down
Loading

0 comments on commit a06b4d7

Please sign in to comment.