feat: title周りの設定

yossydev · Mar 5, 2024 · 62aa50d · 62aa50d
1 parent ab8a540
commit 62aa50d
Show file tree

Hide file tree

Showing 7 changed files with 21 additions and 36 deletions.
diff --git a/app/constants/link/link.ts b/app/constants/link/link.ts
@@ -1,6 +1,6 @@
 export const LINK = {
-  HOME: "/",
   X: "https://twitter.com/yossydev",
+  BlueSky: "https://bsky.app/profile/yossydev.com",
   GITHUB: "https://github.com/yossydev",
   LINKEDIN: "https://www.linkedin.com/in/yutodev",
   EMAIL: "[email protected]",

diff --git a/app/global.d.ts b/app/global.d.ts
@@ -8,7 +8,7 @@ declare module "hono" {
   interface ContextRenderer {
     (
       content: string | Promise<string>,
-      head?: Head,
+      head?: Head & { frontmatter?: Head },
     ): Response | Promise<Response>;
   }
 }
diff --git a/app/routes/_renderer.tsx b/app/routes/_renderer.tsx
@@ -9,7 +9,7 @@ export default jsxRenderer(({ children, title }) => {
       <head>
         <meta charset="utf-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-        <title>{title}</title>
+        {<title>{title ?? "yossy.dev"}</title>}
         <Script src="/app/client.ts" async />
         <Style />
         {import.meta.env.PROD ? (
@@ -54,6 +54,9 @@ export default jsxRenderer(({ children, title }) => {
           </div>
         </header>
         <main className="max-w-[900px] mx-auto">{children}</main>
+        <footer>
+          <p>&copy; 2024 yossy blog. All rights reserved.</p>
+        </footer>
       </body>
     </html>
   );

diff --git a/app/routes/index.tsx b/app/routes/index.tsx
@@ -1,10 +1,9 @@
+import { Heading } from "../components/Heading";
 import { FC } from "hono/jsx";
-import { createRoute } from "honox/factory";
 
-export default createRoute((c) => {
-  const name = c.req.query("name") ?? "Hono";
-  return c.render(
-    <div>
+export default function Top() {
+  return (
+    <>
       <Heading title="Hi! I'm Yuto" />
       <div class="mt-5">
         <p class="font-medium">
@@ -20,12 +19,10 @@ export default createRoute((c) => {
           </span>
         </p>
       </div>
-
-      <Post />
-    </div>,
-    { title: name },
+      <Posts />
+    </>
   );
-});
+}
 
 type PostEntry = {
   [key: string]: {
@@ -38,7 +35,7 @@ type PostEntry = {
 
 const FIRST_BLOG_POST_YEAR = 2021;
 
-const Post: FC = () => {
+const Posts: FC = () => {
   const posts = import.meta.glob<{
     frontmatter: { title: string; date: string; published: boolean };
   }>("./posts/*.mdx", { eager: true });
@@ -62,12 +59,9 @@ const Post: FC = () => {
     const thisYear = new Date().getFullYear();
     for (let year = FIRST_BLOG_POST_YEAR; year <= thisYear; year++) {
       const arrBlog = Object.entries(sortedPosts).filter(([_, module]) => {
-        // 日付文字列からDateオブジェクトを作成
         const postYear = new Date(module.frontmatter.date).getFullYear();
-        // 投稿の年がループ中の年と一致するかチェック
         return postYear === year;
       });
-      // 年ごとの投稿データを配列に追加
       blogData.push({
         year: year,
         posts: arrBlog,
@@ -106,11 +100,3 @@ const Post: FC = () => {
     </div>
   );
 };
-
-const Heading: FC<{ title: string }> = ({ title }) => {
-  return (
-    <div class="border-b border-black mt-10">
-      <h1 class="text-2xl font-semibold pb-1">{title}</h1>
-    </div>
-  );
-};
diff --git a/app/routes/posts/_renderer.tsx b/app/routes/posts/_renderer.tsx
@@ -1,8 +1,8 @@
 import { jsxRenderer } from "hono/jsx-renderer";
 
-export default jsxRenderer(({ children, Layout }) => {
+export default jsxRenderer(({ children, Layout, frontmatter }) => {
   return (
-    <Layout>
+    <Layout title={`${frontmatter?.title} | yossy.dev`}>
       <div class="markdown">{children}</div>
     </Layout>
   );

diff --git a/app/routes/profile/index.tsx b/app/routes/profile/index.tsx
@@ -3,10 +3,6 @@ import { createRoute } from "honox/factory";
 import { LINK } from "../../constants";
 import { Heading } from "../../components/Heading";
 
-const Text: FC<{ text: string }> = ({ text }) => {
-  return <p class="text-lg font-medium mt-6">{text}</p>;
-};
-
 const SnsList: {
   id: number;
   title: "X" | "BlueSky" | "GitHub" | "LinkedIn" | "Email" | "Zenn";
@@ -44,8 +40,11 @@ const SnsList: {
   },
 ];
 
+const Text: FC<{ text: string }> = ({ text }) => {
+  return <p class="text-lg font-medium mt-6">{text}</p>;
+};
+
 export default createRoute((c) => {
-  const name = c.req.query("name") ?? "Hono";
   return c.render(
     <>
       <Heading title="About Me" />
@@ -72,6 +71,6 @@ export default createRoute((c) => {
         ))}
       </ul>
     </>,
-    { title: name },
+    { title: "Profile | yossy.dev" },
   );
 });
diff --git a/vite.config.ts b/vite.config.ts
@@ -33,8 +33,5 @@ export default defineConfig(({ mode }) => {
       }),
       ssg({ entry }),
     ],
-    build: {
-      outDir: "public",
-    },
   };
 });