Merge pull request #3 from nyaomaru/deno-study

study: layout and routes
nyaomaru · Jul 20, 2024 · 7cbead7 · 7cbead7
2 parents 62e0d2a + 03df099
commit 7cbead7
Show file tree

Hide file tree

Showing 8 changed files with 62 additions and 42 deletions.
diff --git a/fresh.gen.ts b/fresh.gen.ts
@@ -4,6 +4,7 @@
 
 import * as $_404 from "./routes/_404.tsx";
 import * as $_app from "./routes/_app.tsx";
+import * as $_layout from "./routes/_layout.tsx";
 import * as $about from "./routes/about.tsx";
 import * as $api_joke from "./routes/api/joke.ts";
 import * as $api_random_uuid from "./routes/api/random-uuid.ts";
@@ -19,6 +20,7 @@ const manifest = {
   routes: {
     "./routes/_404.tsx": $_404,
     "./routes/_app.tsx": $_app,
+    "./routes/_layout.tsx": $_layout,
     "./routes/about.tsx": $about,
     "./routes/api/joke.ts": $api_joke,
     "./routes/api/random-uuid.ts": $api_random_uuid,

diff --git a/routes/_404.tsx b/routes/_404.tsx
@@ -2,7 +2,7 @@ import { Head } from "$fresh/runtime.ts";
 
 export default function Error404() {
   return (
-    <div class="px-4 py-8 mx-auto bg-cyan-300 h-screen">
+    <>
       <Head>
         <title>404 - Page not found</title>
       </Head>
@@ -22,6 +22,6 @@ export default function Error404() {
           <a href="/" class="underline">Go back home</a>
         </div>
       </div>
-    </div>
+    </>
   );
 }
diff --git a/routes/_layout.tsx b/routes/_layout.tsx
@@ -0,0 +1,10 @@
+import { PageProps } from "$fresh/server.ts";
+
+export default function Layout({ Component, state }: PageProps) {
+    // do something with state here
+    return (
+        <div class="px-4 py-8 mx-auto bg-cyan-300 h-screen">
+            <Component />
+        </div>
+    );
+}
diff --git a/routes/about.tsx b/routes/about.tsx
@@ -1,4 +1,8 @@
-import { Handlers } from "$fresh/server.ts";
+import { Handlers, PageProps } from "$fresh/server.ts";
+
+const loadFooValue = async () => {
+    return "nyaomaru";
+};
 
 export const handler: Handlers = {
     async GET(_req, ctx) {
@@ -8,13 +12,15 @@ export const handler: Handlers = {
     },
 };
 
-export default function AboutPage() {
+export default async function AboutPage(props: PageProps) {
+    const value = await loadFooValue();
+
     return (
         <main>
-            <div class="px-4 py-8 mx-auto bg-cyan-300 h-screen">
-                <h1>About</h1>
-                <p>This is the about page.</p>
-            </div>
+            <h1>About</h1>
+            <p>This is the about page.</p>
+            <div>You are on the page '{props.url.href}'.</div>
+            <p>foo is: {value}</p>
         </main>
     );
 }
diff --git a/routes/countdown.tsx b/routes/countdown.tsx
@@ -4,13 +4,11 @@ export default function Page() {
     const date = new Date();
     date.setHours(date.getHours() + 1);
     return (
-        <div class="px-4 py-8 mx-auto bg-cyan-300 h-screen">
-            <article class="prose lg:prose-xl">
-                <p>
-                    The big event is happening{" "}
-                    <Countdown target={date.toISOString()} />.
-                </p>
-            </article>
-        </div>
+        <article class="prose lg:prose-xl">
+            <p>
+                The big event is happening{" "}
+                <Countdown target={date.toISOString()} />.
+            </p>
+        </article>
     );
 }
diff --git a/routes/greet/[name].tsx b/routes/greet/[name].tsx
@@ -1,12 +1,18 @@
-import { PageProps } from "$fresh/server.ts";
+import { PageProps, RouteConfig } from "$fresh/server.ts";
+
+export const config: RouteConfig = {
+  skipInheritedLayouts: true,
+};
 
 export default function GreetPage(props: PageProps) {
   const { name } = props.params;
   return (
     <main>
-      <div class="px-4 py-8 mx-auto bg-cyan-300 h-screen">
-        <p>Greetings to you, {name}!</p>
-      </div>
+      <p>Greetings to you, {name}!</p>
+      <p>
+        This page is <em>not</em>{" "}
+        applied layout because I want to check ignore layout config.
+      </p>
     </main>
   );
 }
diff --git a/routes/index.tsx b/routes/index.tsx
@@ -9,26 +9,24 @@ export default function Home() {
   const name = nameList[Math.floor(Math.random() * 5)];
 
   return (
-    <div class="px-4 py-8 mx-auto bg-cyan-300 h-screen">
-      <div class="max-w-screen-md mx-auto flex flex-col items-center justify-center">
-        <img
-          class="my-6"
-          src="/logo.svg"
-          width="128"
-          height="128"
-          alt="the Fresh logo: a sliced lemon dripping with juice"
-        />
-        <h1 class="text-4xl font-bold">Nyaomaru Deno Sample</h1>
-        <p class="my-4">
-          I am a cat being!!
-        </p>
-        <Counter count={count} />
-        <div class="my-4">
-          <Link text="Go About Page" href="about" />
-          <Link text="Go Greet Page" href={`greet/${name}`} />
-          <Link text="Go Search Page" href="search" />
-          <Link text="Go Countdown Page" href="countdown" />
-        </div>
+    <div class="max-w-screen-md mx-auto flex flex-col items-center justify-center">
+      <img
+        class="my-6"
+        src="/logo.svg"
+        width="128"
+        height="128"
+        alt="the Fresh logo: a sliced lemon dripping with juice"
+      />
+      <h1 class="text-4xl font-bold">Nyaomaru Deno Sample</h1>
+      <p class="my-4">
+        I am a cat being!!
+      </p>
+      <Counter count={count} />
+      <div class="my-4">
+        <Link text="Go About Page" href="about" />
+        <Link text="Go Greet Page" href={`greet/${name}`} />
+        <Link text="Go Search Page" href="search" />
+        <Link text="Go Countdown Page" href="countdown" />
       </div>
     </div>
   );

diff --git a/routes/search.tsx b/routes/search.tsx
@@ -19,7 +19,7 @@ export const handler: Handlers<Data> = {
 export default function Page({ data }: PageProps<Data>) {
     const { results, query } = data;
     return (
-        <div class="px-4 py-8 mx-auto bg-cyan-300 h-screen">
+        <>
             <h1 class="text-4xl font-bold">Search</h1>
             <form class="mt-4">
                 <input
@@ -47,6 +47,6 @@ export default function Page({ data }: PageProps<Data>) {
                     </ul>
                 </article>
             </div>
-        </div>
+        </>
     );
 }