Merge pull request #24 from nyaomaru/refactor

refactor

src/components/PageLayout.tsx

@@ -0,0 +1,13 @@
+import { JSX } from "preact";
+import { Link } from "#src/components/Link.tsx";
+
+export function PageLayout(props: JSX.HTMLAttributes) {
+  return (
+    <div>
+      {props.children}
+      <div class="mt-4">
+        <Link text="Back" href="/" color="secondary" />
+      </div>
+    </div>
+  );
+}

src/fresh.gen.ts

@@ -13,7 +13,6 @@ import * as $api_random_uuid from "./routes/api/random-uuid.ts";
 import * as $api_users_id_ from "./routes/api/users/[id].ts";
 import * as $api_users_index from "./routes/api/users/index.ts";
 import * as $chart from "./routes/chart.tsx";
-import * as $correctCSPwithReport from "./routes/correctCSPwithReport.tsx";
 import * as $countdown from "./routes/countdown.tsx";
 import * as $greet_name_ from "./routes/greet/[name].tsx";
 import * as $greet_middleware from "./routes/greet/_middleware.ts";
@@ -45,7 +44,6 @@ const manifest = {
     "./routes/api/users/[id].ts": $api_users_id_,
     "./routes/api/users/index.ts": $api_users_index,
     "./routes/chart.tsx": $chart,
-    "./routes/correctCSPwithReport.tsx": $correctCSPwithReport,
     "./routes/countdown.tsx": $countdown,
     "./routes/greet/[name].tsx": $greet_name_,
     "./routes/greet/_middleware.ts": $greet_middleware,

src/routes/about.tsx

@@ -1,7 +1,7 @@
 import { Handlers, PageProps, RouteContext } from "$fresh/server.ts";
 import { Partial } from "$fresh/runtime.ts";
 import NextContentButton from "#src/islands/NextContentButton.tsx";
-import { Link } from "#src/components/Link.tsx";
+import { PageLayout } from "#src/components/PageLayout.tsx";
 
 const loadFooValue = () => {
   return "nyaomaru";
@@ -32,7 +32,7 @@ export default async function AboutPage(props: PageProps, ctx: RouteContext) {
   }
 
   return (
-    <>
+    <PageLayout>
       <main f-client-nav>
         <h1 class="text-4xl font-bold">About</h1>
         <p>This is the about page.</p>
@@ -44,9 +44,6 @@ export default async function AboutPage(props: PageProps, ctx: RouteContext) {
           <NextContentButton name="Next Content" />
         </div>
       </main>
-      <div class="mt-8">
-        <Link text="Back" href="/" color="secondary" />
-      </div>
-    </>
+    </PageLayout>
   );
 }

src/routes/api/users/[id].ts

@@ -14,20 +14,26 @@ export const handler: Handlers<User | null> = {
     const id = ctx.params.id;
     const user = (await req.json()) as User;
     const userKey = ["user", id];
+
     const userRes = await kv.get(userKey);
     if (!userRes.value) return new Response(`no user with id ${id} found`);
+
     const ok = await kv.atomic().check(userRes).set(userKey, user).commit();
     if (!ok) throw new Error("Something went wrong.");
+
     return new Response(JSON.stringify(user));
   },
 
   async DELETE(_req, ctx) {
     const id = ctx.params.id;
     const userKey = ["user", id];
+
     const userRes = await kv.get(userKey);
     if (!userRes.value) return new Response(`no user with id ${id} found`);
+
     const ok = await kv.atomic().check(userRes).delete(userKey).commit();
     if (!ok) throw new Error("Something went wrong.");
+
     return new Response(`user ${id} deleted`);
   },
 };

src/routes/api/users/index.ts

@@ -6,8 +6,10 @@ export const handler: Handlers<User | null> = {
   async POST(req, _ctx) {
     const user = (await req.json()) as User;
     const userKey = ["user", user.id];
+
     const ok = await kv.atomic().set(userKey, user).commit();
     if (!ok) throw new Error("Something went wrong.");
+
     return new Response(JSON.stringify(user));
   },
 };

src/routes/chart.tsx

@@ -1,6 +1,6 @@
 import ChartIsland from "#src/islands/Chart.tsx";
 import { ChartColors } from "$fresh_charts/utils.ts";
-import { Link } from "#src/components/Link.tsx";
+import { PageLayout } from "#src/components/PageLayout.tsx";
 
 const createRandomNumber = () => {
   return Math.floor(Math.random() * 100);
@@ -12,7 +12,7 @@ const createChartNumberArray = () => {
 
 export default function Home() {
   return (
-    <>
+    <PageLayout>
       <h1 class="text-4xl font-bold">Chart</h1>
       <div class="mt-4 mx-auto max-w-screen-md">
         <ChartIsland
@@ -40,9 +40,6 @@ export default function Home() {
           }}
         />
       </div>
-      <div class="mt-4">
-        <Link text="Back" href="/" color="secondary" />
-      </div>
-    </>
+    </PageLayout>
   );
 }

src/routes/countdown.tsx

@@ -1,20 +1,17 @@
 import { defineRoute } from "$fresh/server.ts";
 import Countdown from "#src/islands/Countdown.tsx";
-import { Link } from "#src/components/Link.tsx";
+import { PageLayout } from "#src/components/PageLayout.tsx";
 
 export default defineRoute((_req, _ctx) => {
   const date = new Date();
   date.setHours(date.getHours() + 1);
   return (
-    <>
+    <PageLayout>
       <article class="prose lg:prose-xl">
         <p>
           The big event is happening <Countdown target={date.toISOString()} />.
         </p>
       </article>
-      <div class="mt-4">
-        <Link text="Back" href="/" color="secondary" />
-      </div>
-    </>
+    </PageLayout>
   );
 });

src/routes/greet/[name].tsx

@@ -1,6 +1,6 @@
 import { Head } from "$fresh/runtime.ts";
 import { PageProps, RouteConfig } from "$fresh/server.ts";
-import { Link } from "#src/components/Link.tsx";
+import { PageLayout } from "#src/components/PageLayout.tsx";
 
 export const config: RouteConfig = {
   skipInheritedLayouts: true,
@@ -15,14 +15,13 @@ export default function GreetPage(props: PageProps) {
         <title>Meow</title>
       </Head>
       <main>
-        <h1 class="text-4xl font-bold">Greetings to you, {name}!</h1>
-        <p>
-          This page is <em>not</em>{" "}
-          applied layout because I want to check ignore layout config.
-        </p>
-        <div class="mt-4">
-          <Link text="Back" href="/" color="secondary" />
-        </div>
+        <PageLayout>
+          <h1 class="text-4xl font-bold">Greetings to you, {name}!</h1>
+          <p>
+            This page is <em>not</em>{" "}
+            applied layout because I want to check ignore layout config.
+          </p>
+        </PageLayout>
       </main>
     </>
   );

src/routes/index.tsx

@@ -1,11 +1,22 @@
 import { Handlers, PageProps, RouteConfig } from "$fresh/server.ts";
-import { useCSP } from "$fresh/runtime.ts";
+import { type ContentSecurityPolicy, useCSP } from "$fresh/runtime.ts";
 import { useSignal } from "@preact/signals";
 import { Link } from "#src/components/Link.tsx";
 import Counter from "#src/islands/Counter.tsx";
 
 const nameList = ["Alice", "Bob", "Charlie", "David", "Eve"];
 
+const DOMAIN = {
+  DEVELOPMENT: "http://localhost:8000",
+  PRODUCTION: "https://nyaomaru-deno-sample.deno.dev",
+};
+
+const addCSPUrls = (csp: ContentSecurityPolicy, url: string) => {
+  csp.directives.styleSrc?.push(`${url}/styles.css`);
+  csp.directives.imgSrc?.push(`${url}/logo.svg`);
+  csp.directives.scriptSrc?.push(url);
+};
+
 export const handler: Handlers<unknown, { data: string }> = {
   GET(_req, ctx) {
     return ctx.render(ctx.state.data);
@@ -17,6 +28,7 @@ export default function Home({ data }: PageProps<string>) {
   const count = useSignal(0);
 
   useCSP((csp) => {
+    csp.reportOnly = true;
     if (!csp.directives.styleSrc) {
       csp.directives.styleSrc = [];
     }
@@ -27,21 +39,16 @@ export default function Home({ data }: PageProps<string>) {
       csp.directives.scriptSrc = [];
     }
     const baseUrl = Deno.env.get("DENO_ENV") === "development"
-      ? "http://localhost:8000"
-      : "https://nyaomaru-deno-sample.deno.dev";
+      ? DOMAIN.DEVELOPMENT
+      : DOMAIN.PRODUCTION;
 
-    csp.directives.styleSrc.push(`${baseUrl}/styles.css`);
-    csp.directives.imgSrc.push(`${baseUrl}/logo.svg`);
-    csp.directives.scriptSrc.push(baseUrl);
+    addCSPUrls(csp, baseUrl);
 
-    if (Deno.env.get("DENO_ENV") !== "production") {
-      const previewUrl = `https://nyaomaru-deno-sample-${
-        Deno.env.get("DENO_DEPLOYMENT_ID")
-      }.deno.dev`;
-      csp.directives.styleSrc.push(`${previewUrl}/styles.css`);
-      csp.directives.imgSrc.push(`${previewUrl}/logo.svg`);
-      csp.directives.scriptSrc.push(previewUrl);
-    }
+    const previewUrl = `https://nyaomaru-deno-sample-${
+      Deno.env.get("DENO_DEPLOYMENT_ID")
+    }.deno.dev`;
+
+    addCSPUrls(csp, previewUrl);
   });
 
   return (
@@ -84,9 +91,6 @@ export default function Home({ data }: PageProps<string>) {
           />
           <Link text="Chart" href="chart" />
           <Link text="Markdown" href="markdowns/string" />
-          <Link text="CSP" href="correctCSPwithReport" />
-        </div>
-        <div class="my-4 flex gap-4">
           <Link
             text="Map"
             href="map"

src/routes/map.tsx

@@ -1,16 +1,11 @@
 import { defineRoute } from "$fresh/server.ts";
-import { Link } from "#src/components/Link.tsx";
+import { PageLayout } from "#src/components/PageLayout.tsx";
 import { MapIsland } from "#src/islands/MapIsland.tsx";
 
 export default defineRoute((_req, _ctx) => {
   return (
-    <>
-      <div>
-        <MapIsland />
-      </div>
-      <div class="mt-4">
-        <Link text="Back" href="/" color="secondary" />
-      </div>
-    </>
+    <PageLayout>
+      <MapIsland />
+    </PageLayout>
   );
 });

src/routes/markdowns/[slug].tsx

@@ -2,6 +2,17 @@ import { Handlers, PageProps } from "$fresh/server.ts";
 import { extract } from "$std/front_matter/yaml.ts";
 import { CSS, render } from "$gfm";
 import { Head } from "$fresh/runtime.ts";
+import { PageLayout } from "#src/components/PageLayout.tsx";
+
+const markdownText = `---
+description: test
+---
+
+## big text
+
+Look, it's working. _This is in italics._
+
+      `;
 
 interface Page {
   markdown: string;
@@ -11,29 +22,31 @@ interface Page {
 export const handler: Handlers<Page> = {
   async GET(_req, ctx) {
     let rawMarkdown = "";
-    if (ctx.params.slug === "remote") {
-      const resp = await fetch(
-        `https://raw.githubusercontent.com/denoland/fresh/main/docs/latest/introduction/index.md`,
-      );
-      if (resp.status !== 200) {
+
+    switch (ctx.params.slug) {
+      case "remote": {
+        const resp = await fetch(
+          `https://raw.githubusercontent.com/denoland/fresh/main/docs/latest/introduction/index.md`,
+        );
+        if (resp.status !== 200) {
+          return ctx.render(undefined);
+        }
+        rawMarkdown = await resp.text();
+        break;
+      }
+      case "string": {
+        rawMarkdown = markdownText;
+        break;
+      }
+      case "file": {
+        rawMarkdown = await Deno.readTextFile("text.md");
+        break;
+      }
+      default: {
         return ctx.render(undefined);
       }
-      rawMarkdown = await resp.text();
-    } else if (ctx.params.slug === "string") {
-      rawMarkdown = `---
-description: test
----
-
-## big text
-
-Look, it's working. _This is in italics._
-
-      `;
-    } else if (ctx.params.slug === "file") {
-      rawMarkdown = await Deno.readTextFile("text.md");
-    } else {
-      return ctx.render(undefined);
     }
+
     const { attrs, body } = extract(rawMarkdown);
     return ctx.render({ markdown: body, data: attrs });
   },
@@ -50,11 +63,13 @@ export default function MarkdownPage({ data }: PageProps<Page | null>) {
         <style dangerouslySetInnerHTML={{ __html: CSS }} />
       </Head>
       <main>
-        <div>{JSON.stringify(data.data)}</div>
-        <div
-          class="markdown-body"
-          dangerouslySetInnerHTML={{ __html: render(data?.markdown) }}
-        />
+        <PageLayout>
+          <div>{JSON.stringify(data.data)}</div>
+          <div
+            class="markdown-body"
+            dangerouslySetInnerHTML={{ __html: render(data?.markdown) }}
+          />
+        </PageLayout>
       </main>
     </>
   );