74 lines
3.2 KiB
TypeScript
74 lines
3.2 KiB
TypeScript
|
import React from "react";
|
||
|
|
import * as Iso from "@eno/iso";
|
||
|
|
|
||
|
|
const Comp = React.lazy(()=>import("./deep/component.tsx"));
|
||
|
|
|
||
|
|
export default ()=>
|
||
|
|
{
|
||
|
|
const [countGet, countSet] = React.useState(1);
|
||
|
|
return <div class="p-4 font-sans">
|
||
|
|
<Iso.Meta.Metas title="Main Page!"/>
|
||
|
|
<header class="max-w-4xl mx-auto">
|
||
|
|
<nav class="p-4 flex gap-8 border-b font-black text-sm">
|
||
|
|
<a class="" href="/">Home</a>
|
||
|
|
<a href="/about">About</a>
|
||
|
|
<a href="/details">Details</a>
|
||
|
|
</nav>
|
||
|
|
</header>
|
||
|
|
|
||
|
|
<main class="max-w-4xl mx-auto p-4">
|
||
|
|
<Iso.Switch>
|
||
|
|
<Iso.Case value="/">
|
||
|
|
<>
|
||
|
|
<Iso.Meta.Metas title="Home Page" />
|
||
|
|
<h1>iso: isomorphic typescript is simpler than ever.</h1>
|
||
|
|
<div>
|
||
|
|
<button></button>
|
||
|
|
</div>
|
||
|
|
</>
|
||
|
|
</Iso.Case>
|
||
|
|
<Iso.Case value="about">
|
||
|
|
<>
|
||
|
|
<h1>About</h1>
|
||
|
|
<p>Iso puts the Deno runtime and ES modules to work behind the scenes to turn your next single-page React+TypeScript application into an SEO capable website <em>with full hydration</em>.</p>
|
||
|
|
<p>The best part? It's all so simple you won't even even know it's there.</p>
|
||
|
|
<p>Say goodbye to stylesheets and CSS-in-JS bloat. Tailwind classes are available out of the gate so you can hit the ground running, and Iso will keep up the pace with state-preserving hot module reloading. </p>
|
||
|
|
<p>Batteries-included URL routing, page meta, and data fetching APIs are designed from the ground up to be as simple as possible.</p>
|
||
|
|
<p>Get fully featured in seconds.</p>
|
||
|
|
</>
|
||
|
|
</Iso.Case>
|
||
|
|
<Iso.Case value="details">
|
||
|
|
<>
|
||
|
|
<h1>Details</h1>
|
||
|
|
<p>
|
||
|
|
Iso uses Preact/Compat and Twind in lieu of React and Tailwind so you can keep the API's you know, serve less kilobytes, and gain new ways to simplify your layout code.
|
||
|
|
</p>
|
||
|
|
<p>While you can always:</p>
|
||
|
|
<pre>
|
||
|
|
{`<div className="font-serif font-bold font-italic"></div>`}
|
||
|
|
</pre>
|
||
|
|
<p>Now you can just:</p>
|
||
|
|
<pre>
|
||
|
|
{`<div class="font(serif bold italic)"></div>`}
|
||
|
|
</pre>
|
||
|
|
<p>
|
||
|
|
Iso is a Deno project! If you're coming from a Node background be sure to:
|
||
|
|
</p>
|
||
|
|
<ol>
|
||
|
|
<li>Get the latest Deno runtime and extension for your IDE</li>
|
||
|
|
<li>Use file extensions in import statements</li>
|
||
|
|
<li>Add new modules to the deno.jsonc config</li>
|
||
|
|
</ol>
|
||
|
|
</>
|
||
|
|
</Iso.Case>
|
||
|
|
<Iso.Case value="lol/idk">lol/idk</Iso.Case>
|
||
|
|
<Iso.Case default><p>404!</p></Iso.Case>
|
||
|
|
</Iso.Switch>
|
||
|
|
</main>
|
||
|
|
|
||
|
|
<footer>
|
||
|
|
footer
|
||
|
|
</footer>
|
||
|
|
|
||
|
|
</div>;
|
||
|
|
};
|