From d960cbf6c7b61b76dbe25d7d7019f9c3f8d4c394 Mon Sep 17 00:00:00 2001
From: nyaomaru <nyaonyao0725@gmail.com>
Date: Sat, 28 Sep 2024 09:21:56 +0900
Subject: [PATCH] refactor: pages heading

---
 src/components/Heading.tsx         | 58 ++++++++++++++++++++++++++++++
 src/routes/about.tsx               | 19 +++++-----
 src/routes/chart.tsx               |  3 +-
 src/routes/countdown.tsx           |  1 +
 src/routes/greet/[name].tsx        |  3 +-
 src/routes/index.tsx               | 24 ++++++-------
 src/routes/map.tsx                 |  6 +++-
 src/routes/markdowns/[slug].tsx    | 14 +++++---
 src/routes/partials/about/[id].tsx |  3 +-
 src/routes/projects/[id].tsx       |  9 +++--
 src/routes/search.tsx              |  3 +-
 11 files changed, 111 insertions(+), 32 deletions(-)
 create mode 100644 src/components/Heading.tsx

diff --git a/src/components/Heading.tsx b/src/components/Heading.tsx
new file mode 100644
index 0000000..8825751
--- /dev/null
+++ b/src/components/Heading.tsx
@@ -0,0 +1,58 @@
+import { JSX } from "preact";
+
+type HeadingProps = {
+  variant: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+  text: string;
+} & JSX.HTMLAttributes<HTMLHeadingElement>;
+
+export function Heading({ variant, text, ...props }: HeadingProps) {
+  if (variant === "h1") {
+    return (
+      <h1 {...props} class="text-5xl font-bold text-gray-800">
+        {text}
+      </h1>
+    );
+  }
+
+  if (variant === "h2") {
+    return (
+      <h2 {...props} class="text-3xl font-semibold text-gray-800">
+        {text}
+      </h2>
+    );
+  }
+
+  if (variant === "h3") {
+    return (
+      <h3 {...props} class="text-2xl">
+        {text}
+      </h3>
+    );
+  }
+
+  if (variant === "h4") {
+    return (
+      <h4 {...props} class="text-xl">
+        {text}
+      </h4>
+    );
+  }
+
+  if (variant === "h5") {
+    return (
+      <h5 {...props}>
+        {text}
+      </h5>
+    );
+  }
+
+  if (variant === "h6") {
+    return (
+      <h6 {...props}>
+        {text}
+      </h6>
+    );
+  }
+
+  return <div></div>;
+}
diff --git a/src/routes/about.tsx b/src/routes/about.tsx
index 3b3045e..98c7893 100644
--- a/src/routes/about.tsx
+++ b/src/routes/about.tsx
@@ -1,6 +1,7 @@
 import { Handlers, PageProps, RouteContext } from "$fresh/server.ts";
 import { Partial } from "$fresh/runtime.ts";
 import NextContentButton from "#src/islands/NextContentButton.tsx";
+import { Heading } from "#src/components/Heading.tsx";
 import { PageLayout } from "#src/components/PageLayout.tsx";
 
 const loadFooValue = () => {
@@ -34,14 +35,16 @@ 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>
-        <Partial name="about-content">
-          <div>You are on the page '{props.url.href}'.</div>
-          <p>foo is: {value}</p>
-        </Partial>
-        <div class="mt-8">
-          <NextContentButton name="Next Content" />
+        <Heading variant="h1" text={"About"}></Heading>
+        <div class="mt-4">
+          <p>This is the about page.</p>
+          <Partial name="about-content">
+            <div>You are on the page '{props.url.href}'.</div>
+            <p>foo is: {value}</p>
+          </Partial>
+          <div class="mt-4 mb-8">
+            <NextContentButton name="Next Content" />
+          </div>
         </div>
       </main>
     </PageLayout>
diff --git a/src/routes/chart.tsx b/src/routes/chart.tsx
index 0b67685..b21c2dd 100644
--- a/src/routes/chart.tsx
+++ b/src/routes/chart.tsx
@@ -1,5 +1,6 @@
 import ChartIsland from "#src/islands/Chart.tsx";
 import { ChartColors } from "$fresh_charts/utils.ts";
+import { Heading } from "#src/components/Heading.tsx";
 import { PageLayout } from "#src/components/PageLayout.tsx";
 
 const createRandomNumber = () => {
@@ -13,7 +14,7 @@ const createChartNumberArray = () => {
 export default function Home() {
   return (
     <PageLayout>
-      <h1 class="text-4xl font-bold">Chart</h1>
+      <Heading variant="h1" text={"Chart"}></Heading>
       <div class="mt-4 mx-auto max-w-screen-md">
         <ChartIsland
           type="bar"
diff --git a/src/routes/countdown.tsx b/src/routes/countdown.tsx
index cda5e05..468448f 100644
--- a/src/routes/countdown.tsx
+++ b/src/routes/countdown.tsx
@@ -7,6 +7,7 @@ export default defineRoute((_req, _ctx) => {
   date.setHours(date.getHours() + 1);
   return (
     <PageLayout>
+      <h1 class="text-4xl font-bold">Count Down</h1>
       <article class="prose lg:prose-xl">
         <p>
           The big event is happening <Countdown target={date.toISOString()} />.
diff --git a/src/routes/greet/[name].tsx b/src/routes/greet/[name].tsx
index fde67a7..e542b42 100644
--- a/src/routes/greet/[name].tsx
+++ b/src/routes/greet/[name].tsx
@@ -1,5 +1,6 @@
 import { Head } from "$fresh/runtime.ts";
 import { PageProps, RouteConfig } from "$fresh/server.ts";
+import { Heading } from "#src/components/Heading.tsx";
 import { PageLayout } from "#src/components/PageLayout.tsx";
 
 export const config: RouteConfig = {
@@ -16,7 +17,7 @@ export default function GreetPage(props: PageProps) {
       </Head>
       <main>
         <PageLayout>
-          <h1 class="text-4xl font-bold">Greetings to you, {name}!</h1>
+          <Heading variant="h1" text={`Greetings to you, ${name}!`}></Heading>
           <p>
             This page is <em>not</em>{" "}
             applied layout because I want to check ignore layout config.
diff --git a/src/routes/index.tsx b/src/routes/index.tsx
index 77f0b00..05a5baf 100644
--- a/src/routes/index.tsx
+++ b/src/routes/index.tsx
@@ -1,6 +1,7 @@
 import { Handlers, PageProps, RouteConfig } from "$fresh/server.ts";
 import { type ContentSecurityPolicy, useCSP } from "$fresh/runtime.ts";
 import { useSignal } from "@preact/signals";
+import { Heading } from "#src/components/Heading.tsx";
 import { Link } from "#src/components/Link.tsx";
 import Counter from "#src/islands/Counter.tsx";
 
@@ -59,15 +60,16 @@ export default function Home({ data }: PageProps<string>) {
           src="/logo.svg"
           alt="the Fresh logo: a sliced lemon dripping with juice"
         />
-        <h1 class="text-5xl font-bold text-gray-800">Nyaomaru Deno Sample</h1>
-        <p class="mt-4 text-lg text-gray-600">I am a cat being!!</p>
       </header>
 
-      <main class="my-10">
-        <section class="mb-10">
-          <h2 class="text-3xl font-semibold text-gray-800 text-center">
-            Counter
-          </h2>
+      <main class="my-4">
+        <Heading variant="h1" text={"Nyaomaru Deno Sample"}></Heading>
+        <div class="block items-center text-center">
+          <p class="mt-4 text-lg text-gray-600">I am a cat being!!</p>
+        </div>
+
+        <section class="mb-10 text-center">
+          <Heading variant="h2" text={"Counter"}></Heading>
           <div class="mt-6 flex flex-col items-center">
             <Counter count={count}>
               <p class="mt-4 text-gray-700">
@@ -77,17 +79,15 @@ export default function Home({ data }: PageProps<string>) {
           </div>
         </section>
 
-        <section class="mb-10">
-          <h2 class="text-3xl font-semibold text-gray-800 text-center">
-            Page Buttons
-          </h2>
+        <section class="mb-10 text-center">
+          <Heading variant="h2" text={"Page Buttons"}></Heading>
           <div class="mt-6 flex flex-wrap justify-center gap-4">
             <Link text="About" href="about" />
             <Link text="Chart" href="chart" />
             <Link text="Search" href="search" />
             <Link text="Countdown" href="countdown" />
           </div>
-          <div class="my-4 flex gap-4">
+          <div class="my-4 flex flex-wrap justify-center gap-4">
             <Link text="Map" href="map" />
             <Link
               text="Projects"
diff --git a/src/routes/map.tsx b/src/routes/map.tsx
index 3d539ea..869fb26 100644
--- a/src/routes/map.tsx
+++ b/src/routes/map.tsx
@@ -1,11 +1,15 @@
 import { defineRoute } from "$fresh/server.ts";
+import { Heading } from "#src/components/Heading.tsx";
 import { PageLayout } from "#src/components/PageLayout.tsx";
 import { MapIsland } from "#src/islands/MapIsland.tsx";
 
 export default defineRoute((_req, _ctx) => {
   return (
     <PageLayout>
-      <MapIsland />
+      <Heading variant="h1" text={"Map"}></Heading>
+      <div class="mt-4">
+        <MapIsland />
+      </div>
     </PageLayout>
   );
 });
diff --git a/src/routes/markdowns/[slug].tsx b/src/routes/markdowns/[slug].tsx
index d4293e1..161e8ea 100644
--- a/src/routes/markdowns/[slug].tsx
+++ b/src/routes/markdowns/[slug].tsx
@@ -2,6 +2,7 @@ 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 { Heading } from "#src/components/Heading.tsx";
 import { PageLayout } from "#src/components/PageLayout.tsx";
 
 const markdownText = `---
@@ -64,11 +65,14 @@ export default function MarkdownPage({ data }: PageProps<Page | null>) {
       </Head>
       <main>
         <PageLayout>
-          <div>{JSON.stringify(data.data)}</div>
-          <div
-            class="markdown-body"
-            dangerouslySetInnerHTML={{ __html: render(data?.markdown) }}
-          />
+          <Heading variant="h1" text={"Markdown"}></Heading>
+          <div class="mt-4">
+            <div>{JSON.stringify(data.data)}</div>
+            <div
+              class="markdown-body"
+              dangerouslySetInnerHTML={{ __html: render(data?.markdown) }}
+            />
+          </div>
         </PageLayout>
       </main>
     </>
diff --git a/src/routes/partials/about/[id].tsx b/src/routes/partials/about/[id].tsx
index fbdf14a..47e45cc 100644
--- a/src/routes/partials/about/[id].tsx
+++ b/src/routes/partials/about/[id].tsx
@@ -1,5 +1,6 @@
 import { defineRoute, RouteConfig } from "$fresh/server.ts";
 import { Partial } from "$fresh/runtime.ts";
+import { Heading } from "#src/components/Heading.tsx";
 
 const contents = [
   "This is the documentation page. It should contain all the \n information you need to get started with the project.",
@@ -11,7 +12,7 @@ const loadContent = (id: string) => {
 
   return (
     <article class="prose lg:prose-xl">
-      <h1>Documentation: {id}</h1>
+      <Heading variant="h2" text={`Documentation: ${id}`}></Heading>
       <p>
         {currentContent}
       </p>
diff --git a/src/routes/projects/[id].tsx b/src/routes/projects/[id].tsx
index 80768c8..9c02d6e 100644
--- a/src/routes/projects/[id].tsx
+++ b/src/routes/projects/[id].tsx
@@ -1,4 +1,5 @@
 import { Handlers, PageProps } from "$fresh/server.ts";
+import { Heading } from "#src/components/Heading.tsx";
 import { PageLayout } from "#src/components/PageLayout.tsx";
 
 const projects = [{ id: 1, name: "Project 1", stars: 10 }, {
@@ -36,8 +37,12 @@ export default function ProjectPage(props: PageProps<Project>) {
 
   return (
     <PageLayout>
-      <h1 class="text-4xl font-bold">{props.data.name}</h1>
-      <p>{props.data.stars} stars</p>
+      <Heading variant="h1" text={"Project"}></Heading>
+
+      <div class="mt-4">
+        <Heading variant="h2" text={props.data.name}></Heading>
+        <p>{props.data.stars} stars</p>
+      </div>
     </PageLayout>
   );
 }
diff --git a/src/routes/search.tsx b/src/routes/search.tsx
index 48cfcf7..1571f1d 100644
--- a/src/routes/search.tsx
+++ b/src/routes/search.tsx
@@ -1,4 +1,5 @@
 import { Handlers, PageProps } from "$fresh/server.ts";
+import { Heading } from "#src/components/Heading.tsx";
 import { PageLayout } from "#src/components/PageLayout.tsx";
 
 const NAMES = ["Alice", "Bob", "Charlie", "Dave", "Eve", "Frank"];
@@ -21,7 +22,7 @@ export default function Page({ data }: PageProps<Data>) {
   const { results, query } = data;
   return (
     <PageLayout>
-      <h1 class="text-4xl font-bold">Search</h1>
+      <Heading variant="h1" text={"Search"}></Heading>
       <form class="mt-4">
         <input
           class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"