preactjs · rschristian · Nov 20, 2023 · Nov 20, 2023 · Nov 20, 2023 · Nov 20, 2023
diff --git a/demo/index.html b/demo/index.html
@@ -2,12 +2,13 @@
 <html lang="en">
 	<head>
 		<meta charset="UTF-8" />
-		<link rel="icon" type="image/svg+xml" href="src/favicon.svg" />
+		<link rel="icon" type="image/svg+xml" href="/vite.svg" />
 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
-		<title>Vite App</title>
+		<meta name="color-scheme" content="light dark" />
+		<title>Vite + Preact</title>
 	</head>
 	<body>
 		<div id="app"></div>
-		<script type="module" src="/src/main.tsx"></script>
+		<script type="module" src="/src/index.tsx"></script>
 	</body>
 </html>
diff --git a/demo/public/vite.svg b/demo/public/vite.svg
diff --git a/demo/src/Foo.tsx b/demo/src/Foo.tsx
diff --git a/demo/src/assets/preact.svg b/demo/src/assets/preact.svg
diff --git a/demo/src/Compat.tsx → demo/src/components/Compat.tsx b/demo/src/Compat.tsx → demo/src/components/Compat.tsx
diff --git a/demo/src/components/Header.tsx b/demo/src/components/Header.tsx
@@ -0,0 +1,18 @@
+import { useLocation } from "preact-iso";
+
+export function Header() {
+	const { url } = useLocation();
+
+	return (
+		<header>
+			<nav>
+				<a href="/" class={url == "/" && "active"}>
+					Home
+				</a>
+				<a href="/404" class={url == "/404" && "active"}>
+					404
+				</a>
+			</nav>
+		</header>
+	);
+}
diff --git a/demo/src/index.css b/demo/src/index.css
diff --git a/demo/src/index.tsx b/demo/src/index.tsx
@@ -0,0 +1,23 @@
+import { render } from "preact";
+import { LocationProvider, Router, Route } from "preact-iso";
+
+import { Header } from "./components/Header.jsx";
+import { Home } from "./pages/Home/index.jsx";
+import { NotFound } from "./pages/_404.jsx";
+import "./style.css";
+
+export function App() {
+	return (
+		<LocationProvider>
+			<Header />
+			<main>
+				<Router>
+					<Route path="/" component={Home} />
+					<Route default component={NotFound} />
+				</Router>
+			</main>
+		</LocationProvider>
+	);
+}
+
+render(<App />, document.getElementById("app")!);
diff --git a/demo/src/main.tsx b/demo/src/main.tsx
diff --git a/demo/src/pages/Home/index.tsx b/demo/src/pages/Home/index.tsx
@@ -0,0 +1,42 @@
+import { ReactComponent } from "../../components/Compat";
+
+import preactLogo from "../../assets/preact.svg";
+import "./style.css";
+
+export function Home() {
+	return (
+		<div class="home">
+			<a href="https://preactjs.com" target="_blank">
+				<img src={preactLogo} alt="Preact logo" height="160" width="160" />
+			</a>
+			<h1>Get Started building Vite-powered Preact Apps </h1>
+			<ReactComponent />
+			<section>
+				<Resource
+					title="Learn Preact"
+					description="If you're new to Preact, try the interactive tutorial to learn important concepts"
+					href="https://preactjs.com/tutorial"
+				/>
+				<Resource
+					title="Differences to React"
+					description="If you're coming from React, you may want to check out our docs to see where Preact differs"
+					href="https://preactjs.com/guide/v10/differences-to-react"
+				/>
+				<Resource
+					title="Learn Vite"
+					description="To learn more about Vite and how you can customize it to fit your needs, take a look at their excellent documentation"
+					href="https://vitejs.dev"
+				/>
+			</section>
+		</div>
+	);
+}
+
+function Resource(props) {
+	return (
+		<a href={props.href} target="_blank" class="resource">
+			<h2>{props.title}</h2>
+			<p>{props.description}</p>
+		</a>
+	);
+}
diff --git a/demo/src/pages/Home/style.css b/demo/src/pages/Home/style.css
@@ -0,0 +1,47 @@
+img {
+	margin-bottom: 1.5rem;
+}
+
+img:hover {
+	filter: drop-shadow(0 0 2em #673ab8aa);
+}
+
+.home section {
+	margin-top: 5rem;
+	display: grid;
+	grid-template-columns: repeat(3, 1fr);
+	column-gap: 1.5rem;
+}
+
+.resource {
+	padding: 0.75rem 1.5rem;
+	border-radius: 0.5rem;
+	text-align: left;
+	text-decoration: none;
+	color: #222;
+	background-color: #f1f1f1;
+	border: 1px solid transparent;
+}
+
+.resource:hover {
+	border: 1px solid #000;
+	box-shadow: 0 25px 50px -12px #673ab888;
+}
+
+@media (max-width: 639px) {
+	.home section {
+		margin-top: 5rem;
+		grid-template-columns: 1fr;
+		row-gap: 1rem;
+	}
+}
+
+@media (prefers-color-scheme: dark) {
+	.resource {
+		color: #ccc;
+		background-color: #161616;
+	}
+	.resource:hover {
+		border: 1px solid #bbb;
+	}
+}
diff --git a/demo/src/pages/_404.tsx b/demo/src/pages/_404.tsx
@@ -0,0 +1,8 @@
+export function NotFound() {
+	return (
+		<section>
+			<h1>404: Not Found</h1>
+			<p>It's gone :(</p>
+		</section>
+	);
+}
diff --git a/demo/src/style.css b/demo/src/style.css
@@ -0,0 +1,70 @@
+:root {
+	font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+	line-height: 1.5;
+	font-weight: 400;
+
+	color: #222;
+	background-color: #ffffff;
+
+	font-synthesis: none;
+	text-rendering: optimizeLegibility;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+	-webkit-text-size-adjust: 100%;
+}
+
+body {
+	margin: 0;
+}
+
+#app {
+	display: flex;
+	flex-direction: column;
+	min-height: 100vh;
+}
+
+header {
+	display: flex;
+	justify-content: flex-end;
+	background-color: #673ab8;
+}
+
+header nav {
+	display: flex;
+}
+
+header a {
+	color: #fff;
+	padding: 0.75rem;
+	text-decoration: none;
+}
+
+header a.active {
+	background-color: #0005;
+}
+
+header a:hover {
+	background-color: #0008;
+}
+
+main {
+	flex: auto;
+	display: flex;
+	align-items: center;
+	max-width: 1280px;
+	margin: 0 auto;
+	text-align: center;
+}
+
+@media (max-width: 639px) {
+	main {
+		margin: 2rem;
+	}
+}
+
+@media (prefers-color-scheme: dark) {
+	:root {
+		color: #ccc;
+		background-color: #1a1a1a;
+	}
+}
diff --git a/test/dev.test.mjs b/test/dev.test.mjs
@@ -28,7 +28,7 @@ describe("dev server", async () => {
 	it(
 		"serves src/main.tsx",
 		wrap(async () => {
-			const mainURL = new URL("/src/main.tsx", devServerURL);
+			const mainURL = new URL("/src/index.tsx", devServerURL);
 			const res = await fetch(mainURL);
 			if (!res.ok) {
 				const body = await res.text();