Skip to content

Commit abb55a1

Browse files
lowlighterlowlighter
committed
wip(www): update website
1 parent 43d5c96 commit abb55a1

File tree

19 files changed

+595
-249
lines changed

19 files changed

+595
-249
lines changed

‎www/build.ts‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,6 @@ await Mizu.generate([
1111
{ source: () => html("playground"), destination: "playground.html", render: {} },
1212
{ source: () => js("@mizu/render/client", { format: "iife" }), destination: "client.js" },
1313
{ source: () => js("@mizu/render/client", { format: "esm" }), destination: "client.mjs" },
14-
// { source: () => js("@mizu/render/server", { server: true }), destination: "server.mjs" },
15-
// { source: () => js("@mizu/render/static", { server: true }), destination: "static.mjs" },
1614
{ source: new URL("/matcha.css", globalThis.location.href), destination: "matcha.css" },
1715
{ source: new URL("/highlight.js", globalThis.location.href), destination: "highlight.js" },
1816
{ source: "*.{svg,css,png,js}", directory: fromFileUrl(import.meta.resolve("./static")), destination: "." },

‎www/html/index.html‎

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -20,15 +20,11 @@
2020
<main>
2121
<section class="app">
2222
<hgroup *if="page !== 'playground'">
23-
<h1 id=""><a href="#">mizu<span class="muted">.js</span></a></h1>
24-
<p>
25-
Lightweight HTML templating library for any-side rendering.
26-
</p>
2723
<img class="logo" src="/logo.png" alt="" />
2824
</hgroup>
29-
<section *if="page === 'index'" *for="['about', 'examples', 'why', 'usage']" %http="`/html/mizu/${$value}.html`" %response.html></section>
25+
<section *if="page === 'index'" *for="['about', 'features']" %http="`/html/mizu/${$value}.html`" %response.html></section>
3026
</section>
31-
<section *if="page === 'index'" *for="['concepts', 'directives', 'api', 'faq']" %http="`/html/mizu/${$value}.html`" %response.html></section>
27+
<section *if="page === 'index'" *for="['faq', 'concepts', 'directives', 'api']" %http="`/html/mizu/${$value}.html`" %response.html></section>
3228
<section *if="page === 'build'" %http="/html/build.html" %response.html></section>
3329
<section *if="page === 'playground'" %http="/html/playground.html" %response.html></section>
3430
</main>

‎www/html/mizu/about.html‎

Lines changed: 3 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,3 @@
1-
<p>
2-
<em>mizu.js</em> is a JavaScript library that provides a simple and efficient way to create dynamic web pages without the complexity of a fully-fledged framework or additional setup.
3-
</p>
4-
<p>
5-
Ideal for rapid prototyping, generating static HTML pages, and developers seeking to wok in a hassle-free environment.
6-
</p>
7-
<ul class="features">
8-
<li>
9-
<b class="success">✓</b>
10-
<em>No</em> build steps
11-
</li>
12-
<li>
13-
<b class="success">✓</b>
14-
<em>No</em> configuration needed
15-
</li>
16-
<li>
17-
<b class="success">✓</b>
18-
<em>Any-side</em> rendering
19-
</li>
20-
<li>
21-
<b class="success">✓</b> Great for <em>static site generation</em>
22-
</li>
23-
<li>
24-
<b class="success">✓</b> Easily <em>customizable</em>
25-
</li>
26-
</ul>
27-
<p class="muted">
28-
<small><b>🌊 Fun Fact:</b> This very page is generated using <em>mizu.js</em>!</small>
29-
</p>
1+
<div class="catchphrase">
2+
Web development simple again.
3+
</div>

‎www/html/mizu/api.html‎

Lines changed: 153 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,156 @@
11
<h1 id="api"><a href="#api">API</a></h1>
2-
<div class="flash attention">
2+
<section>
3+
<h2 id="api-user"><a href="#api-user">User API</a></h2>
34
<p>
4-
This section has not been documented yet.
5+
This section is targeted at users who want to use <em>mizu.js</em> rendering and directives.
56
</p>
6-
</div>
7-
<p>
8-
Full API documentation is available at <a href="https://jsr.io/@mizu/mizu/doc">jsr.io/@mizu/mizu</a>.
9-
</p>
7+
<p>
8+
If you wish to develop custom directives, please refer to the <a href="#api-dev">Developer API</a> section instead.
9+
</p>
10+
<section>
11+
<h3 id="api-client"><a href="#api-client">Client-side API</a></h3>
12+
<p>
13+
There are two ways to setup <em>mizu.js</em> in a browser environment:
14+
<ul>
15+
<li><a href="https://developer.mozilla.org/docs/Glossary/IIFE">Immediately Invoked Function Expression (IIFE)</a></li>
16+
<li><a href="https://developer.mozilla.org/docs/Web/JavaScript/Guide/Modules">EcmaScript Module (ESM)</a></li>
17+
</ul>
18+
</p>
19+
<section>
20+
<h4 id="api-client-iife"><a href="#api-client-iife">IIFE <i>(<code>.js</code>)</i></a></h4>
21+
<p>
22+
In this setup <em>mizu.js</em> will automatically start rendering the page once the script is loaded.
23+
It is the simplest way to get started, but you will be limited to the default configuration.
24+
</p>
25+
<pre><code *code[html]>&lt;script src="https://mizu.sh/client.js" defer&gt;&lt;/script&gt;</code></pre>
26+
</section>
27+
<section>
28+
<h4 id="api-client-esm"><a href="#api-client-esm">ESM <i>(<code>.mjs</code>)</i></a></h4>
29+
<p>
30+
In this setup <em>mizu.js</em> needs to be imported and started manually.
31+
This allows you to customize the rendering process like setting the initial context, loading additional directives, etc.
32+
</p>
33+
<pre><code *clean.spaces>
34+
<span *code[html]>&lt;script type="module"&gt;</span><br>
35+
&nbsp;&nbsp;<span *code[ts]>import Mizu from "https://mizu.sh/client.mjs"</span><br>
36+
&nbsp;&nbsp;<span *code[ts]>await Mizu.render(document.body, { context: { foo: "🌊 Yaa, mizu!" } })</span><br>
37+
<span *code[html]>&lt;/script&gt;</span>
38+
</code></pre>
39+
</section>
40+
<section>
41+
<h4 id="api-client-defaults"><a href="#api-client-defaults">Defaults</a></h4>
42+
<p>
43+
When using the client-side API, the following defaults are applied:
44+
<dl class="ml-1">
45+
<dt>Rendering is explicit</dt>
46+
<dd>The <a href="#mizu"><code class="hljs-keyword">*mizu</code></a> attribute is required to enable <em>mizu.js</em> rendering on a subtree.</dd>
47+
<dt>Reactivity is enabled</dt>
48+
<dd>Changes performed to <a href="#concept-context">contexts</a> will trigger a re-render.</dd>
49+
</dl>
50+
</p>
51+
</section>
52+
<section>
53+
<h4 id="api-client-documentation"><a href="#api-client-documentation">Documentation</a></h4>
54+
<p>
55+
Full API documentation is available at <a href="https://jsr.io/@mizu/render/doc/client/~/Mizu">jsr.io/@mizu/render/client</a>.
56+
</p>
57+
</section>
58+
</section>
59+
<section>
60+
<h3 id="api-server"><a href="#api-server">Server-side API</a></h3>
61+
<p>
62+
To setup <em>mizu.js</em> in a server environment, you will need to install it locally.
63+
<em>mizu.js</em> packages are hosted on <a href="https://jsr.io/@mizu">jsr.io/@mizu</a>.
64+
</p>
65+
<section>
66+
<h4 id="api-server-deno"><a href="#api-server-deno">Deno</a></h4>
67+
<p>
68+
As <a href="https://deno.com/">Deno</a> supports <code>jsr:</code> specifier natively, you can import <em>mizu.js</em> directly.
69+
</p>
70+
<pre><code *code[ts]>
71+
import Mizu from "jsr:@mizu/render/server"
72+
await Mizu.render(`&lt;div *text="foo"&gt;&lt;/div&gt;`, { context: { foo: "🌊 Yaa, mizu!" } })
73+
</code></pre>
74+
<p>
75+
Or you can add it to your project using the Deno CLI.
76+
</p>
77+
<pre><code *code[bash]>
78+
deno add jsr:@mizu/render
79+
</code></pre>
80+
</section>
81+
<section>
82+
<h4 id="api-server-others-runtimes"><a href="#api-server-others-runtimes">Other runtimes (NodeJS, Bun, etc.)</a></h4>
83+
<p>
84+
<em>mizu.js</em> can be added to your project using <a href="https://jsr.io/docs/npm-compatibility">JSR npm compatibility layer</a>.
85+
</p>
86+
<pre><code *code[bash]>
87+
# NodeJS
88+
npx jsr add @mizu/render
89+
</code></pre>
90+
<pre><code *code[bash]>
91+
# Bun
92+
bunx jsr add @mizu/render
93+
</code></pre>
94+
<p>
95+
Once installed, you can use it in your project.
96+
</p>
97+
<pre><code *code[ts]>
98+
import Mizu from "@mizu/render/server"
99+
await Mizu.render(`&lt;div *text="foo"&gt;&lt;/div&gt;`, { context: { foo: "🌊 Yaa, mizu!" } })
100+
</code></pre>
101+
</section>
102+
<section>
103+
<h4 id="api-server-defaults"><a href="#api-server-defaults">Defaults</a></h4>
104+
<p>
105+
When using the server-side API, the following defaults are applied:
106+
<dl class="ml-1">
107+
<dt>Rendering is implicit</dt>
108+
<dd>The <a href="#mizu"><code class="hljs-keyword">*mizu</code></a> attribute is <b>NOT</b> required to enable <em>mizu.js</em> rendering on a subtree.</dd>
109+
<dt>Reactivity is disabled</dt>
110+
<dd>Changes performed to <a href="#concept-context">contexts</a> are not tracked and will not trigger a re-render.</dd>
111+
</dl>
112+
</p>
113+
</section>
114+
<section>
115+
<h4 id="api-server-documentation"><a href="#api-server-documentation">Documentation</a></h4>
116+
<p>
117+
Full API documentation is available at <a href="https://jsr.io/@mizu/render/doc/server/~/Mizu">jsr.io/@mizu/render/server</a>.
118+
</p>
119+
</section>
120+
</section>
121+
<section>
122+
<h3 id="api-static"><a href="#api-static">Static generation API</a></h3>
123+
<p>
124+
The static generation API is an extension of the <a href="#api-server">server-side API</a> that allows you to render pages easily during your build process.
125+
</p>
126+
<section>
127+
<h4 id="api-static-documentation"><a href="#api-static-documentation">Documentation</a></h4>
128+
<p>
129+
Full API documentation is available at <a href="https://jsr.io/@mizu/render/doc/static/~/Mizu">jsr.io/@mizu/render/static</a>.
130+
</p>
131+
</section>
132+
</section>
133+
</section>
134+
<section>
135+
<h2 id="api-dev"><a href="#api-dev">Developer API</a></h2>
136+
<p>
137+
This section is targeted at developers who want to create custom <em>mizu.js</em> rendering and directives.
138+
</p>
139+
<p>
140+
If you wish to render templates, please refer to the <a href="#api-user">User API</a> section instead.
141+
</p>
142+
<div class="flash attention">
143+
<p>
144+
This section has not been documented yet.
145+
</p>
146+
</div>
147+
<section *if="false">
148+
<h3 id="api-directive"><a href="#api-directive">Directive API</a></h3>
149+
</section>
150+
<section *if="false">
151+
<h3 id="api-renderer"><a href="#api-renderer">Renderer API</a></h3>
152+
</section>
153+
<section *if="false">
154+
<h3 id="api-testing"><a href="#api-testing">Testing API</a></h3>
155+
</section>
156+
</section>

0 commit comments

Comments
 (0)