Merge pull request #353 from 1chooo/refactor/integrate-title-descript…

…ion-keyword-to-config

refactor: integrate metadata information to config

apps/web/src/app/blog/[slug]/page.tsx

@@ -107,7 +107,7 @@ export default function Blog({ params }: { params: { slug: string } }) {
   return (
     <article>
       <section className="blog-text">
-        <PageHeader title="Hugo's Blog" />
+        <PageHeader header="Hugo's Blog" />
         <h1 className="title font-medium text-2xl tracking-tighter max-w-[650px]">
           <MarkdownRenderer content={post.metadata.title} />
         </h1>

apps/web/src/app/blog/page.tsx

@@ -4,14 +4,17 @@ import PageHeader from "@/components/page-header";
 import FilterSelectBox from "@/components/blog/filter-select-box";
 import FilterList from "@/components/blog/filter-list";
 import MarkdownRenderer from "@/components/markdown/markdown-renderer";
-import { getBlogPosts } from "@/lib/db/blog";
 import SkeletonBlogLoader from "@/components/skeleton-loader";
+import { getBlogPosts } from "@/lib/db/blog";
 import { POSTS_PER_PAGE } from "@/lib/constants";
+import config from "@/config";
+
+const { title } = config;
 
 import "react-loading-skeleton/dist/skeleton.css";
 
 export const metadata = {
-  title: "Blog | Hugo ChunHo Lin (1chooo) | Open Source Enthusiast",
+  title: `Blog | ${title}`,
   description: "Read my thoughts on software development, design, and more.",
 };
 
@@ -55,7 +58,7 @@ export default function BlogPage({
 
   return (
     <article>
-      <PageHeader title="Hugo's Blog" />
+      <PageHeader header="Hugo's Blog" />
       <section className="blog-posts">
         <FilterList selectedTag={selectedTag} blogTags={blogTags} />
         <FilterSelectBox selectedTag={selectedTag} blogTags={blogTags} />
@@ -115,9 +118,8 @@ export default function BlogPage({
                   pathname: "/blog",
                   query: { ...searchParams, page: pageNum.toString() },
                 }}
-                className={`pagination-btn ${
-                  pageNum === currentPage ? "active" : ""
-                }`}
+                className={`pagination-btn ${pageNum === currentPage ? "active" : ""
+                  }`}
               >
                 {pageNum}
               </Link>

apps/web/src/app/contact/page.tsx

@@ -1,21 +1,28 @@
-'use client';
+"use client";
 
-import React from "react";
-import { usePathname } from 'next/navigation';
+import React, { useEffect } from 'react';
 import MapBox from '@/components/contact/map-box';
 import { FaRegPaperPlane } from "react-icons/fa";
-import PageContent from "@/components/page-content";
+import PageHeader from '@/components/page-header';
+import config from '@/config';
+
+const { title } = config;
+
+/**
+ * TODO: #341 still need to update with another method to avoid client side not available metadata
+ * export const metadata: Metadata = {
+ *   title: `Contact | ${title}`,
+ * };
+ */
 
 const Contact = () => {
-  const pathname = usePathname();
+  useEffect(() => {
+    document.title = `Contact | ${title}`;
+  }, [title]);
 
   return (
-    <PageContent
-      documentTitle='Contact'
-      title="Hugo's Contact"
-      page="contact"
-      pathName={pathname}
-    >
+    <article data-page=''>
+      <PageHeader header="Hugo's Contact" />
       <section className="contact-form">
         <MapBox />
         <h3 className="h3 form-title">Contact Form</h3>
@@ -56,7 +63,7 @@ const Contact = () => {
           </button>
         </form>
       </section>
-    </PageContent >
+    </article >
   );
 }
 

apps/web/src/app/layout.tsx

@@ -4,24 +4,29 @@ import { GoogleAnalytics } from "@/components/google/ga";
 import Hello from "@/components/hello";
 import NavBar from "@/components/nav-bar";
 import SideBar from "@/components/side-bar";
+import config from "@/config";
+
+const { title } = config;
+const { description } = config;
+const { author } = config;
+const { keywords } = config;
 
 import "./globals.css";
 
 const googleAnalyticId = "G-JGG75799PJ";
 
 export const metadata: Metadata = {
-  title: "Hugo ChunHo Lin (1chooo) | Open Source Enthusiast",
-  description:
-    "I'm Hugo ChunHo Lin, a graduate with a Bachelor's degree from National Central University (NCU) 🐿️, driven by a sincere passion for Software Engineering 💻.",
-  authors: [{ name: "Hugo ChunHo Lin (1chooo)" }],
-  keywords: ["Hugo ChunHo Lin", "1chooo", "Software Engineering", "Next.js", "React"],
+  title: title,
+  description: description,
+  authors: [{ name: author }],
+  keywords: keywords,
   openGraph: {
     url: "https://1chooo.com/",
     type: "website",
     siteName: "Hugo ChunHo Lin (1chooo) | Open Source Enthusiast",
     title: "Hugo ChunHo Lin (1chooo) | Open Source Enthusiast",
     description:
-      "I'm Hugo ChunHo Lin, a graduate with a Bachelor's degree from National Central University (NCU) 🐿️, driven by a sincere passion for Software Engineering 💻.",
+      "I'm Chun-Ho (Hugo) Lin, a graduate with a Bachelor's degree from National Central University (NCU) 🐿️, driven by a sincere passion for Software Engineering 💻.",
     images: [
       {
         url: "https://docs.1chooo.com/images/cover-with-1chooo-com.png",
@@ -35,7 +40,7 @@ export const metadata: Metadata = {
     card: "summary_large_image",
     title: "Hugo ChunHo Lin (1chooo) | Open Source Enthusiast",
     description:
-      "I'm Hugo ChunHo Lin, a graduate with a Bachelor's degree from National Central University (NCU) 🐿️, driven by a sincere passion for Software Engineering 💻.",
+      "I'm Chun-Ho (Hugo) Lin, a graduate with a Bachelor's degree from National Central University (NCU) 🐿️, driven by a sincere passion for Software Engineering 💻.",
     images: "https://docs.1chooo.com/images/cover-with-1chooo-com.png",
   },
 };

apps/web/src/app/not-found.tsx

@@ -4,8 +4,12 @@ import React from 'react';
 import { usePathname } from 'next/navigation';
 import PageContent from '@/components/page-content';
 import MarkdownRenderer from '@/components/markdown/markdown-renderer';
+import config from '@/config';
+
 import '@/styles/about/about-text.css';
 
+const { title } = config;
+
 const errorMessages = [
   'This page doesn\'t exist.',
   'If this is a mistake, [let us know](https://github.com/1chooo/1chooo.com/issues/new), and we will try to fix it!',
@@ -22,7 +26,8 @@ const NotFound: React.FC = () => {
   return (
     <PageContent
       documentTitle='Not Found'
-      title="404 Not Found"
+      title={title}
+      header="404 Not Found"
       page="404"
       pathName={pathname}
     >

apps/web/src/app/page.tsx

@@ -1,42 +1,39 @@
-'use client';
-
-import { usePathname } from 'next/navigation';
+import type { Metadata } from "next";
 import AboutText from '@/components/about/about-text';
 import GitHubStats from '@/components/about/github-stats';
 import TechStack from '@/components/about/tech-stack';
 import LifeStyles from '@/components/about/life-styles';
-import PageContent from '@/components/page-content';
+import PageHeader from '@/components/page-header';
 import H4 from '@/components/markdown/h4';
 import config from '@/config';
 
 const { about } = config;
 const { subHeader, pronouns } = about;
 const { firstName, lastName } = about;
 const { preferredName } = about;
+const { title } = config;
+
+export const metadata: Metadata = {
+  title: title,
+};
 
-const title =
+const header =
   preferredName === ''
     ? `About ${firstName} ${lastName} 👨🏻‍💻`
     : `About ${preferredName} 👨🏻‍💻`;
 
 const About = () => {
-  const pathname = usePathname();
-
   return (
-    <PageContent
-      documentTitle=''
-      title={title}
-      page="about"
-      pathName={pathname}
-    >
+    <article data-page=''>
+      <PageHeader header={header} />
       {/* TODO: #157 */}
       <H4 text={`${subHeader} (${pronouns})`} />
       <br />
       <AboutText />
       <GitHubStats />
       <TechStack />
       <LifeStyles />
-    </PageContent >
+    </article>
   );
 }
 

apps/web/src/app/portfolio/page.tsx

@@ -5,6 +5,17 @@ import { usePathname } from 'next/navigation';
 import PageContent from '@/components/page-content';
 import Projects from '@/components/portfolio/projects';
 import { initializeCustomSelect, filterItemsByCategory } from '@/lib/utils/dom-utils';
+import config from '@/config';
+
+const { title } = config;
+
+/**
+ * TODO: #257
+ * update the document title see (#341)
+ * export const metadata: Metadata = {
+ *   title: `Contact | ${title}`,
+ * };
+ */
 
 const Portfolio = () => {
   const pathname = usePathname();
@@ -14,9 +25,14 @@ const Portfolio = () => {
   }, []);
 
   return (
+    /**
+     * TODO: #257
+     * update the document title see (#341)
+     */
     <PageContent
       documentTitle='Portfolio'
-      title="Hugo's Portfolio"
+      title={title}
+      header="Hugo's Portfolio"
       page="portfolio"
       pathName={pathname}
     >

apps/web/src/app/resume/page.tsx

@@ -1,40 +1,38 @@
-'use client';
-
+import type { Metadata } from "next";
 import React from "react";
-import { usePathname } from 'next/navigation';
 import DownloadCV from '@/components/resume/download-cv';
 import TimeLine from '@/components/resume/timeline';
-import PageContent from '@/components/page-content';
+import PageHeader from '@/components/page-header';
+import config from '@/config';
 
-import config from "@/config";
+const { title } = config;
 
 const { resume } = config;
 const { professionalExperiences } = resume;
 const { educations } = resume;
 const { awardLeaderships } = resume;
 const { teachingExperiences } = resume;
 
+export const metadata: Metadata = {
+  title: `Resume | ${title}`,
+};
+
 const profExp = <TimeLine data={professionalExperiences} />;
 const education = <TimeLine data={educations} />;
 const awardLeadership = <TimeLine data={awardLeaderships} />;
 const teachingExp = <TimeLine data={teachingExperiences} />;
 
 const Resume = () => {
-  const pathname = usePathname();
 
   return (
-    <PageContent
-      documentTitle='Resume'
-      title="Hugo's Resume"
-      page="resume"
-      pathName={pathname}
-    >
+    <article data-page=''>
+      <PageHeader header="Hugo's Resume" />
       <DownloadCV />
       {profExp}
       {education}
       {awardLeadership}
       {teachingExp}
-    </PageContent >
+    </article >
   );
 }
 

apps/web/src/components/about/github-stats.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React, { useEffect, useState, FC } from 'react';
 import GitHubCalendar from 'react-github-calendar';
 import { ThemeInput } from 'react-activity-calendar';

apps/web/src/components/page-content.tsx

@@ -1,20 +1,31 @@
 import React, { useEffect } from 'react';
 import PageHeader from '@/components/page-header';
+import config from '@/config';
+
+
 
 const PageContent: React.FC<{
   documentTitle: string;
   title: string;
+  header: string;
   children: React.ReactNode;
   page?: string;
   pathName?: string;
-}> = ({ documentTitle, title, children, page, pathName }) => {
+}> = ({
+  documentTitle,
+  title,
+  header,
+  children,
+  page,
+  pathName
+}) => {
 
   const isRootPage = pathName === '/' && page === 'about';
 
   if (isRootPage) {
-    documentTitle = "Hugo ChunHo Lin (1chooo) | Open Source Enthusiast";
+    documentTitle = title;
   } else {
-    documentTitle = `${documentTitle} | Hugo ChunHo Lin (1chooo) | Open Source Enthusiast`;
+    documentTitle = `${documentTitle} | ${title}`;
   }
 
   useEffect(() => {
@@ -23,7 +34,7 @@ const PageContent: React.FC<{
 
   return (
     <article data-page={isRootPage ? '' : page}>
-      <PageHeader title={title} />
+      <PageHeader header={header} />
       {children}
     </article>
   );

apps/web/src/components/page-header.tsx

@@ -2,10 +2,10 @@
 
 import React from 'react';
 
-const PageHeader = ({ title }: { title: string }) => (
+const PageHeader = ({ header }: { header: string }) => (
   <header>
     <h2 className="h2 article-title">
-      {title}
+      {header}
     </h2>
   </header>
 );

apps/web/src/config/index.ts

@@ -8,6 +8,10 @@ import { PiBooks } from "react-icons/pi";
 
 const config: Config = {
   avatar: '/images/profile.jpg',
+  title: "Chun-Ho (Hugo) Lin - 1chooo | Open Source Enthusiast",
+  description: "I'm Chun-Ho (Hugo) Lin, a graduate with a Bachelor's degree from National Central University (NCU) 🐿️, driven by a sincere passion for Software Engineering 💻.",
+  author: "Chun-Ho (Hugo) Lin - 1chooo",
+  keywords: ["Hugo ChunHo Lin", "1chooo", "Software Engineering", "Next.js", "React"],
   status: "Day ONE ⚡️",
   navItems: [
     { path: '/', label: 'About' },

apps/web/src/types/config.d.ts

@@ -13,6 +13,10 @@ import type { NavItem } from "@/types/nav-bar";
 
 export type Config = {
   avatar: string;
+  title: string;
+  description: string;
+  author: string;
+  keywords: string[];
   status: string;
   navItems: NavItem[];
   socialMedia: SocialMedia;