From c45ba279b3ff37af2a7d983d0eb53193ba491c0b Mon Sep 17 00:00:00 2001 From: Hugo ChunHo Lin Date: Fri, 4 Oct 2024 22:52:21 +0800 Subject: [PATCH 1/6] refactor(web): integrate title in the config (#341) --- apps/web/src/app/blog/[slug]/page.tsx | 2 +- apps/web/src/app/blog/page.tsx | 4 ++-- apps/web/src/app/contact/page.tsx | 6 +++++- apps/web/src/app/page.tsx | 4 +++- apps/web/src/app/portfolio/page.tsx | 6 +++++- apps/web/src/app/resume/page.tsx | 7 +++++-- apps/web/src/components/page-content.tsx | 19 +++++++++++++++---- apps/web/src/components/page-header.tsx | 4 ++-- apps/web/src/config/index.ts | 1 + apps/web/src/types/config.d.ts | 1 + 10 files changed, 40 insertions(+), 14 deletions(-) diff --git a/apps/web/src/app/blog/[slug]/page.tsx b/apps/web/src/app/blog/[slug]/page.tsx index a7c51300..05679d2b 100644 --- a/apps/web/src/app/blog/[slug]/page.tsx +++ b/apps/web/src/app/blog/[slug]/page.tsx @@ -107,7 +107,7 @@ export default function Blog({ params }: { params: { slug: string } }) { return (
- +

diff --git a/apps/web/src/app/blog/page.tsx b/apps/web/src/app/blog/page.tsx index 842220e3..cae3c2ce 100644 --- a/apps/web/src/app/blog/page.tsx +++ b/apps/web/src/app/blog/page.tsx @@ -11,7 +11,7 @@ import { POSTS_PER_PAGE } from "@/lib/constants"; import "react-loading-skeleton/dist/skeleton.css"; export const metadata = { - title: "Blog | Hugo ChunHo Lin (1chooo) | Open Source Enthusiast", + title: "Blog | Chun-Ho (Hugo) Lin - 1chooo | Open Source Enthusiast", description: "Read my thoughts on software development, design, and more.", }; @@ -55,7 +55,7 @@ export default function BlogPage({ return (
- +
diff --git a/apps/web/src/app/contact/page.tsx b/apps/web/src/app/contact/page.tsx index 69c92dba..7c064f01 100644 --- a/apps/web/src/app/contact/page.tsx +++ b/apps/web/src/app/contact/page.tsx @@ -5,6 +5,9 @@ import { usePathname } from 'next/navigation'; import MapBox from '@/components/contact/map-box'; import { FaRegPaperPlane } from "react-icons/fa"; import PageContent from "@/components/page-content"; +import config from '@/config'; + +const { title } = config; const Contact = () => { const pathname = usePathname(); @@ -12,7 +15,8 @@ const Contact = () => { return ( diff --git a/apps/web/src/app/page.tsx b/apps/web/src/app/page.tsx index 7e99066c..b13e5041 100644 --- a/apps/web/src/app/page.tsx +++ b/apps/web/src/app/page.tsx @@ -13,8 +13,9 @@ const { about } = config; const { subHeader, pronouns } = about; const { firstName, lastName } = about; const { preferredName } = about; +const { title } = config; -const title = +const header = preferredName === '' ? `About ${firstName} ${lastName} 👨🏻‍💻` : `About ${preferredName} 👨🏻‍💻`; @@ -26,6 +27,7 @@ const About = () => { diff --git a/apps/web/src/app/portfolio/page.tsx b/apps/web/src/app/portfolio/page.tsx index 46a37db9..08993ea4 100644 --- a/apps/web/src/app/portfolio/page.tsx +++ b/apps/web/src/app/portfolio/page.tsx @@ -5,6 +5,9 @@ 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; const Portfolio = () => { const pathname = usePathname(); @@ -16,7 +19,8 @@ const Portfolio = () => { return ( diff --git a/apps/web/src/app/resume/page.tsx b/apps/web/src/app/resume/page.tsx index 6dce65ec..dad64dd5 100644 --- a/apps/web/src/app/resume/page.tsx +++ b/apps/web/src/app/resume/page.tsx @@ -6,7 +6,9 @@ import DownloadCV from '@/components/resume/download-cv'; import TimeLine from '@/components/resume/timeline'; import PageContent from '@/components/page-content'; -import config from "@/config"; +import config from '@/config'; + +const { title } = config; const { resume } = config; const { professionalExperiences } = resume; @@ -25,7 +27,8 @@ const Resume = () => { return ( diff --git a/apps/web/src/components/page-content.tsx b/apps/web/src/components/page-content.tsx index 6a758ba9..f438f885 100644 --- a/apps/web/src/components/page-content.tsx +++ b/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 (
- + {children}
); diff --git a/apps/web/src/components/page-header.tsx b/apps/web/src/components/page-header.tsx index b688a201..c563db09 100644 --- a/apps/web/src/components/page-header.tsx +++ b/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 }) => (

- {title} + {header}

); diff --git a/apps/web/src/config/index.ts b/apps/web/src/config/index.ts index 65efc25a..a051cb40 100644 --- a/apps/web/src/config/index.ts +++ b/apps/web/src/config/index.ts @@ -8,6 +8,7 @@ import { PiBooks } from "react-icons/pi"; const config: Config = { avatar: '/images/profile.jpg', + title: "Chun-Ho (Hugo) Lin - 1chooo | Open Source Enthusiast", status: "Day ONE ⚡️", navItems: [ { path: '/', label: 'About' }, diff --git a/apps/web/src/types/config.d.ts b/apps/web/src/types/config.d.ts index a34bc476..8b30a6cd 100644 --- a/apps/web/src/types/config.d.ts +++ b/apps/web/src/types/config.d.ts @@ -13,6 +13,7 @@ import type { NavItem } from "@/types/nav-bar"; export type Config = { avatar: string; + title: string; status: string; navItems: NavItem[]; socialMedia: SocialMedia; From bfadef467c7054c2968e12a9838f623c06c7fbb1 Mon Sep 17 00:00:00 2001 From: Hugo ChunHo Lin Date: Fri, 4 Oct 2024 22:56:39 +0800 Subject: [PATCH 2/6] fix(not-found): add missing update in c45ba27 --- apps/web/src/app/not-found.tsx | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/apps/web/src/app/not-found.tsx b/apps/web/src/app/not-found.tsx index 01177977..3103f14b 100644 --- a/apps/web/src/app/not-found.tsx +++ b/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 ( From a8e85047cf80a00cf2be71d787d315b2ef5d3965 Mon Sep 17 00:00:00 2001 From: Hugo ChunHo Lin Date: Sat, 5 Oct 2024 00:20:55 +0800 Subject: [PATCH 3/6] refactor(web): integrate title in the config (#341) - Move the title configuration from the metadata object to the config object in the web page component. - Update the document title in the Contact, About, Portfolio, and Resume pages to include the title from the config object. - Remove unused imports and fix formatting issues. --- apps/web/src/app/blog/page.tsx | 12 ++++---- apps/web/src/app/contact/page.tsx | 29 ++++++++++--------- apps/web/src/app/page.tsx | 23 ++++++--------- apps/web/src/app/portfolio/page.tsx | 12 ++++++++ apps/web/src/app/resume/page.tsx | 23 ++++++--------- .../web/src/components/about/github-stats.tsx | 2 ++ 6 files changed, 55 insertions(+), 46 deletions(-) diff --git a/apps/web/src/app/blog/page.tsx b/apps/web/src/app/blog/page.tsx index cae3c2ce..bee2a04a 100644 --- a/apps/web/src/app/blog/page.tsx +++ b/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 | Chun-Ho (Hugo) Lin - 1chooo | Open Source Enthusiast", + title: `Blog | ${title}`, description: "Read my thoughts on software development, design, and more.", }; @@ -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} diff --git a/apps/web/src/app/contact/page.tsx b/apps/web/src/app/contact/page.tsx index 7c064f01..77d4b5c3 100644 --- a/apps/web/src/app/contact/page.tsx +++ b/apps/web/src/app/contact/page.tsx @@ -1,25 +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 ( - +
+

Contact Form

@@ -60,7 +63,7 @@ const Contact = () => {
- +
); } diff --git a/apps/web/src/app/page.tsx b/apps/web/src/app/page.tsx index b13e5041..1ccd96c9 100644 --- a/apps/web/src/app/page.tsx +++ b/apps/web/src/app/page.tsx @@ -1,11 +1,9 @@ -'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'; @@ -15,22 +13,19 @@ const { firstName, lastName } = about; const { preferredName } = about; const { title } = config; +export const metadata: Metadata = { + title: title, +}; + const header = preferredName === '' ? `About ${firstName} ${lastName} 👨🏻‍💻` : `About ${preferredName} 👨🏻‍💻`; const About = () => { - const pathname = usePathname(); - return ( - +
+ {/* TODO: #157 */}


@@ -38,7 +33,7 @@ const About = () => { - +

); } diff --git a/apps/web/src/app/portfolio/page.tsx b/apps/web/src/app/portfolio/page.tsx index 08993ea4..0e208f40 100644 --- a/apps/web/src/app/portfolio/page.tsx +++ b/apps/web/src/app/portfolio/page.tsx @@ -9,6 +9,14 @@ 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(); @@ -17,6 +25,10 @@ const Portfolio = () => { }, []); return ( + /** + * TODO: #257 + * update the document title see (#341) + */ ; const education = ; const awardLeadership = ; const teachingExp = ; const Resume = () => { - const pathname = usePathname(); return ( - +
+ {profExp} {education} {awardLeadership} {teachingExp} - +
); } diff --git a/apps/web/src/components/about/github-stats.tsx b/apps/web/src/components/about/github-stats.tsx index 8915e39f..09ed608d 100644 --- a/apps/web/src/components/about/github-stats.tsx +++ b/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'; From bd8ab0be35ef0a91e7cd4cdaa0d16c8c6d0b1081 Mon Sep 17 00:00:00 2001 From: Hugo ChunHo Lin Date: Sat, 5 Oct 2024 00:31:54 +0800 Subject: [PATCH 4/6] refactor(web): integrate description in config (#341) --- apps/web/src/app/layout.tsx | 13 ++++++++----- apps/web/src/config/index.ts | 1 + apps/web/src/types/config.d.ts | 1 + 3 files changed, 10 insertions(+), 5 deletions(-) diff --git a/apps/web/src/app/layout.tsx b/apps/web/src/app/layout.tsx index e4914431..3e72ce81 100644 --- a/apps/web/src/app/layout.tsx +++ b/apps/web/src/app/layout.tsx @@ -4,15 +4,18 @@ 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; 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 💻.", + title: title, + description: description, authors: [{ name: "Hugo ChunHo Lin (1chooo)" }], keywords: ["Hugo ChunHo Lin", "1chooo", "Software Engineering", "Next.js", "React"], openGraph: { @@ -21,7 +24,7 @@ export const metadata: Metadata = { 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 +38,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", }, }; diff --git a/apps/web/src/config/index.ts b/apps/web/src/config/index.ts index a051cb40..957937ee 100644 --- a/apps/web/src/config/index.ts +++ b/apps/web/src/config/index.ts @@ -9,6 +9,7 @@ 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 💻.", status: "Day ONE ⚡️", navItems: [ { path: '/', label: 'About' }, diff --git a/apps/web/src/types/config.d.ts b/apps/web/src/types/config.d.ts index 8b30a6cd..eecfbe1e 100644 --- a/apps/web/src/types/config.d.ts +++ b/apps/web/src/types/config.d.ts @@ -14,6 +14,7 @@ import type { NavItem } from "@/types/nav-bar"; export type Config = { avatar: string; title: string; + description: string; status: string; navItems: NavItem[]; socialMedia: SocialMedia; From 0d628b285618bc3ccbb3e9b806aff0c9949ffc16 Mon Sep 17 00:00:00 2001 From: Hugo ChunHo Lin Date: Sat, 5 Oct 2024 00:36:29 +0800 Subject: [PATCH 5/6] refactor(web): update config to include author field (#341) --- apps/web/src/app/layout.tsx | 3 ++- apps/web/src/config/index.ts | 1 + apps/web/src/types/config.d.ts | 1 + 3 files changed, 4 insertions(+), 1 deletion(-) diff --git a/apps/web/src/app/layout.tsx b/apps/web/src/app/layout.tsx index 3e72ce81..f1679def 100644 --- a/apps/web/src/app/layout.tsx +++ b/apps/web/src/app/layout.tsx @@ -8,6 +8,7 @@ import config from "@/config"; const { title } = config; const { description } = config; +const { author } = config; import "./globals.css"; @@ -16,7 +17,7 @@ const googleAnalyticId = "G-JGG75799PJ"; export const metadata: Metadata = { title: title, description: description, - authors: [{ name: "Hugo ChunHo Lin (1chooo)" }], + authors: [{ name: author }], keywords: ["Hugo ChunHo Lin", "1chooo", "Software Engineering", "Next.js", "React"], openGraph: { url: "https://1chooo.com/", diff --git a/apps/web/src/config/index.ts b/apps/web/src/config/index.ts index 957937ee..d89acb49 100644 --- a/apps/web/src/config/index.ts +++ b/apps/web/src/config/index.ts @@ -10,6 +10,7 @@ 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", status: "Day ONE ⚡️", navItems: [ { path: '/', label: 'About' }, diff --git a/apps/web/src/types/config.d.ts b/apps/web/src/types/config.d.ts index eecfbe1e..c1a93b5b 100644 --- a/apps/web/src/types/config.d.ts +++ b/apps/web/src/types/config.d.ts @@ -15,6 +15,7 @@ export type Config = { avatar: string; title: string; description: string; + author: string; status: string; navItems: NavItem[]; socialMedia: SocialMedia; From 4e8d240ef3d852b5428392fc6e79acdde3fb3bae Mon Sep 17 00:00:00 2001 From: Hugo ChunHo Lin Date: Sat, 5 Oct 2024 00:40:42 +0800 Subject: [PATCH 6/6] refactor(web): update config to include keywords field (#341) --- apps/web/src/app/layout.tsx | 3 ++- apps/web/src/config/index.ts | 1 + apps/web/src/types/config.d.ts | 1 + 3 files changed, 4 insertions(+), 1 deletion(-) diff --git a/apps/web/src/app/layout.tsx b/apps/web/src/app/layout.tsx index f1679def..dbec03bc 100644 --- a/apps/web/src/app/layout.tsx +++ b/apps/web/src/app/layout.tsx @@ -9,6 +9,7 @@ import config from "@/config"; const { title } = config; const { description } = config; const { author } = config; +const { keywords } = config; import "./globals.css"; @@ -18,7 +19,7 @@ export const metadata: Metadata = { title: title, description: description, authors: [{ name: author }], - keywords: ["Hugo ChunHo Lin", "1chooo", "Software Engineering", "Next.js", "React"], + keywords: keywords, openGraph: { url: "https://1chooo.com/", type: "website", diff --git a/apps/web/src/config/index.ts b/apps/web/src/config/index.ts index d89acb49..0625375a 100644 --- a/apps/web/src/config/index.ts +++ b/apps/web/src/config/index.ts @@ -11,6 +11,7 @@ const config: Config = { 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' }, diff --git a/apps/web/src/types/config.d.ts b/apps/web/src/types/config.d.ts index c1a93b5b..9edea45e 100644 --- a/apps/web/src/types/config.d.ts +++ b/apps/web/src/types/config.d.ts @@ -16,6 +16,7 @@ export type Config = { title: string; description: string; author: string; + keywords: string[]; status: string; navItems: NavItem[]; socialMedia: SocialMedia;