Skip to content

Instantly share code, notes, and snippets.

@overra

overra/index.html

Last active December 31, 2018 09:52
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save overra/358714f7dd17a5e8b571d01e62d2bc5c to your computer and use it in GitHub Desktop.
Save overra/358714f7dd17a5e8b571d01e62d2bc5c to your computer and use it in GitHub Desktop.
Download ZIP
htm demo
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<body>
<div id="root"></div>
<script type="module">
import { html, Component, render } from 'https://unpkg.com/htm/preact/index.mjs?module';
import Router from 'https://unpkg.com/preact-router?module';
const Home = () => html`<section><h1>Home</h1><p>This is the home page.</p></section>`;
const About = () => html`<section><h1>About</h1><p>My name is Jason.</p></section>`;
const NotFound = () => html`<section><h1>404: Not Found</h1><p>It's gone :(</p></section>`;
const App = () => html`
<div class=app>
<nav>
<a href="/">Home</a>
<a href="/about">About</a>
<a href="/error">Error</a>
</nav>
<${Router} onChange=${e => this.setState(e)}>
<${Home} path="/" />
<${About} path="/about" />
<${NotFound} default />
<//>
</div>
`;
render(html`<${App} />`, document.querySelector('root'));
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment