100 lines
4.1 KiB
TypeScript
100 lines
4.1 KiB
TypeScript
import React from "react";
|
|
import * as Iso from "@eno/iso";
|
|
import Collapse, {CollapseButton, CollapseGroup, CollapseMenu} from "$/collapse.tsx";
|
|
|
|
const Comp = React.lazy(()=>import("./deep/component.tsx"));
|
|
|
|
export default ()=>
|
|
{
|
|
const [countGet, countSet] = React.useState(1);
|
|
return <div class="font-sans flex flex-col items-center min-h-[100vh]">
|
|
<Iso.Meta.Metas title="Main Page!"/>
|
|
<header class="layout-middle border-b">
|
|
<nav class="flex gap-8 font-black text-sm">
|
|
<a class="" href="/">Home</a>
|
|
<a href="/about">About</a>
|
|
<a href="/details">Details</a>
|
|
<a href="/data">Data Fetching</a>
|
|
</nav>
|
|
</header>
|
|
<div class="self-start">
|
|
<CollapseGroup>
|
|
<CollapseButton></CollapseButton>
|
|
<CollapseMenu>
|
|
<p>collapsedable!</p>
|
|
<p>collapsedable!</p>
|
|
<p>collapsedable!</p>
|
|
<p>collapsedable!</p>
|
|
<p>collapsedable!</p>
|
|
</CollapseMenu>
|
|
</CollapseGroup>
|
|
</div>
|
|
<main class="layout-middle">
|
|
<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">
|
|
<div class="flex flex-col gap-y-2">
|
|
<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>
|
|
</div>
|
|
</Iso.Case>
|
|
<Iso.Case value="data">
|
|
<React.Suspense fallback={<p>Loading...</p>}>
|
|
<Comp/>
|
|
</React.Suspense>
|
|
</Iso.Case>
|
|
<Iso.Case default><p>404!</p></Iso.Case>
|
|
</Iso.Switch>
|
|
</main>
|
|
|
|
<footer class="bg-black grow w-full">
|
|
<div class="layout-middle mx-auto text-white">
|
|
© {new Date().getFullYear()} Seth Trowbridge
|
|
</div>
|
|
</footer>
|
|
|
|
</div>;
|
|
};
|
|
|
|
export const CSS = {
|
|
rules:
|
|
[
|
|
["layout-middle", "w-full max-w-4xl p-4"]
|
|
]
|
|
}; |