init frresh project

.gitignore

@@ -1,3 +1,5 @@
 # Logs
 logs
 *.log
+
+.vscode/

README.md

@@ -1,2 +1,11 @@
-# deno-fresh
-test fresh framework
+# fresh project
+
+### Usage
+
+Start the project:
+
+```
+deno task start
+```
+
+This will watch the project directory and restart as necessary.

components/Button.tsx

@@ -0,0 +1,12 @@
+import { JSX } from "preact";
+import { IS_BROWSER } from "$fresh/runtime.ts";
+
+export function Button(props: JSX.HTMLAttributes<HTMLButtonElement>) {
+  return (
+    <button
+      {...props}
+      disabled={!IS_BROWSER || props.disabled}
+      class="px-2 py-1 border(gray-100 2) hover:bg-gray-200"
+    />
+  );
+}

deno.json

@@ -0,0 +1,10 @@
+{
+  "tasks": {
+    "start": "deno run -A --watch=static/,routes/ dev.ts"
+  },
+  "importMap": "./import_map.json",
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "jsxImportSource": "preact"
+  }
+}

dev.ts

@@ -0,0 +1,5 @@
+#!/usr/bin/env -S deno run -A --watch=static/,routes/
+
+import dev from "$fresh/dev.ts";
+
+await dev(import.meta.url, "./main.ts");

fresh.gen.ts

@@ -0,0 +1,24 @@
+// DO NOT EDIT. This file is generated by fresh.
+// This file SHOULD be checked into source version control.
+// This file is automatically updated during development when running `dev.ts`.
+
+import config from "./deno.json" assert { type: "json" };
+import * as $0 from "./routes/[name].tsx";
+import * as $1 from "./routes/api/joke.ts";
+import * as $2 from "./routes/index.tsx";
+import * as $$0 from "./islands/Counter.tsx";
+
+const manifest = {
+  routes: {
+    "./routes/[name].tsx": $0,
+    "./routes/api/joke.ts": $1,
+    "./routes/index.tsx": $2,
+  },
+  islands: {
+    "./islands/Counter.tsx": $$0,
+  },
+  baseUrl: import.meta.url,
+  config,
+};
+
+export default manifest;

import_map.json

@@ -0,0 +1,12 @@
+{
+  "imports": {
+    "$fresh/": "https://deno.land/x/[email protected]/",
+    "preact": "https://esm.sh/[email protected]",
+    "preact/": "https://esm.sh/[email protected]/",
+    "preact-render-to-string": "https://esm.sh/*[email protected]",
+    "@preact/signals": "https://esm.sh/*@preact/[email protected]",
+    "@preact/signals-core": "https://esm.sh/*@preact/[email protected]",
+    "twind": "https://esm.sh/[email protected]",
+    "twind/": "https://esm.sh/[email protected]/"
+  }
+}

islands/Counter.tsx

@@ -0,0 +1,17 @@
+import { useState } from "preact/hooks";
+import { Button } from "../components/Button.tsx";
+
+interface CounterProps {
+  start: number;
+}
+
+export default function Counter(props: CounterProps) {
+  const [count, setCount] = useState(props.start);
+  return (
+    <div class="flex gap-2 w-full">
+      <p class="flex-grow-1 font-bold text-xl">{count}</p>
+      <Button onClick={() => setCount(count - 1)}>-1</Button>
+      <Button onClick={() => setCount(count + 1)}>+1</Button>
+    </div>
+  );
+}

main.ts

@@ -0,0 +1,13 @@
+/// <reference no-default-lib="true" />
+/// <reference lib="dom" />
+/// <reference lib="dom.iterable" />
+/// <reference lib="dom.asynciterable" />
+/// <reference lib="deno.ns" />
+
+import { start } from "$fresh/server.ts";
+import manifest from "./fresh.gen.ts";
+
+import twindPlugin from "$fresh/plugins/twind.ts";
+import twindConfig from "./twind.config.ts";
+
+await start(manifest, { plugins: [twindPlugin(twindConfig)] });

routes/[name].tsx

@@ -0,0 +1,5 @@
+import { PageProps } from "$fresh/server.ts";
+
+export default function Greet(props: PageProps) {
+  return <div>Hello {props.params.name}</div>;
+}

routes/api/joke.ts

@@ -0,0 +1,21 @@
+import { HandlerContext } from "$fresh/server.ts";
+
+// Jokes courtesy of https://punsandoneliners.com/randomness/programmer-jokes/
+const JOKES = [
+  "Why do Java developers often wear glasses? They can't C#.",
+  "A SQL query walks into a bar, goes up to two tables and says “can I join you?”",
+  "Wasn't hard to crack Forrest Gump's password. 1forrest1.",
+  "I love pressing the F5 key. It's refreshing.",
+  "Called IT support and a chap from Australia came to fix my network connection.  I asked “Do you come from a LAN down under?”",
+  "There are 10 types of people in the world. Those who understand binary and those who don't.",
+  "Why are assembly programmers often wet? They work below C level.",
+  "My favourite computer based band is the Black IPs.",
+  "What programme do you use to predict the music tastes of former US presidential candidates? An Al Gore Rhythm.",
+  "An SEO expert walked into a bar, pub, inn, tavern, hostelry, public house.",
+];
+
+export const handler = (_req: Request, _ctx: HandlerContext): Response => {
+  const randomIndex = Math.floor(Math.random() * JOKES.length);
+  const body = JOKES[randomIndex];
+  return new Response(body);
+};

routes/index.tsx

@@ -0,0 +1,24 @@
+import { Head } from "$fresh/runtime.ts";
+import Counter from "../islands/Counter.tsx";
+
+export default function Home() {
+  return (
+    <>
+      <Head>
+        <title>Fresh App</title>
+      </Head>
+      <div class="p-4 mx-auto max-w-screen-md">
+        <img
+          src="/logo.svg"
+          class="w-32 h-32"
+          alt="the fresh logo: a sliced lemon dripping with juice"
+        />
+        <p class="my-6">
+          Welcome to `fresh`. Try updating this message in the ./routes/index.tsx
+          file, and refresh.
+        </p>
+        <Counter start={3} />
+      </div>
+    </>
+  );
+}

twind.config.ts

@@ -0,0 +1,5 @@
+import { Options } from "$fresh/plugins/twind.ts";
+
+export default {
+  selfURL: import.meta.url,
+} as Options;