Skip to content

Commit d39f456

Browse files
y3owk1ny3owk1n
authored
refactor(site-header): Update profile links to use siteConfig (#89)
* refactor(site-header): Update profile links to use siteConfig - Replace direct profile links with siteConfig links for LinkedIn and GitHub - Use siteConfig to centralize profile links and configurations. * Apply formatting changes --------- Co-authored-by: y3owk1n <[email protected]>
1 parent afbc504 commit d39f456

File tree

11 files changed

+174
-116
lines changed

11 files changed

+174
-116
lines changed

‎src/app/(main)/layout.tsx

+38-46
Original file line numberDiff line numberDiff line change
@@ -3,21 +3,14 @@ import SiteFooter from "@/components/site-footer";
33
import SiteHeader from "@/components/site-header";
44
import SkipToContent from "@/components/skip-to-content";
55
import { cn } from "@/lib/cn";
6-
import { DEVDOMAIN, DOMAIN, devEnvironment } from "@/lib/constants";
6+
import { siteConfig } from "@/lib/config";
7+
import { getBaseUrl } from "@/lib/get-base-url";
78
import "@/styles/globals.css";
89
import type { Metadata } from "next";
910
import { Inter as FontSans } from "next/font/google";
1011
import Script from "next/script";
1112
import RootProviders from "./root-providers";
1213

13-
const title = "Kyle Wong - Digital Marketer, Web Developer.";
14-
const description = `Hello, I'm Kyle, a digital marketer and web developer, based in the Malaysia 🇲.`;
15-
const image = encodeURI(
16-
`${
17-
devEnvironment ? DEVDOMAIN : DOMAIN
18-
}/api/og-image/Kyle Wong - Digital Marketer, Web Developer.`,
19-
);
20-
2114
export const viewport = {
2215
themeColor: [
2316
{ media: "(prefers-color-scheme: light)", color: "white" },
@@ -26,9 +19,12 @@ export const viewport = {
2619
};
2720

2821
export const metadata: Metadata = {
29-
metadataBase: new URL("https://kylewong.my"),
30-
title,
31-
description,
22+
metadataBase: new URL(siteConfig.url),
23+
title: {
24+
default: `${siteConfig.name} - Digital Marketer, Web Developer.`,
25+
template: `%s - ${siteConfig.name} - Digital Marketer, Web Developer.`,
26+
},
27+
description: siteConfig.description,
3228
keywords: [
3329
"Digital Marketing",
3430
"Web Development",
@@ -38,54 +34,50 @@ export const metadata: Metadata = {
3834
],
3935
authors: [
4036
{
41-
name: "kyle",
42-
url: "https://kylewong.my",
37+
name: siteConfig.name,
38+
url: siteConfig.url,
4339
},
4440
],
41+
robots: {
42+
index: true,
43+
follow: true,
44+
nocache: false,
45+
},
4546
creator: "kyle",
4647
openGraph: {
47-
title,
48-
description,
49-
url: DOMAIN,
50-
siteName: title,
51-
images: [image],
52-
locale: "en-US",
5348
type: "website",
54-
},
55-
icons: {
56-
icon: [
49+
locale: "en_US",
50+
url: getBaseUrl(siteConfig.url),
51+
title: siteConfig.name,
52+
description: siteConfig.description,
53+
siteName: siteConfig.name,
54+
images: [
5755
{
58-
url: "/favicon/favicon-32x32.png",
59-
sizes: "32x32",
60-
type: "image/png",
61-
},
62-
{
63-
url: "/favicon/favicon-16x16.png",
64-
sizes: "16x16",
65-
type: "image/png",
66-
},
67-
],
68-
shortcut: ["/favicon/favicon.ico"],
69-
apple: [
70-
{
71-
url: "/favicon/apple-touch-icon.png",
72-
sizes: "180x180",
73-
type: "image/png",
56+
url: siteConfig.ogImage,
57+
width: 1200,
58+
height: 628,
59+
alt: siteConfig.name,
7460
},
7561
],
62+
},
63+
twitter: {
64+
card: "summary_large_image",
65+
title: siteConfig.name,
66+
description: siteConfig.description,
67+
images: [siteConfig.ogImage],
68+
},
69+
icons: {
7670
other: [
7771
{
7872
rel: "mask-icon",
79-
url: "/favicon/safari-pinned-tab.svg",
73+
url: "/safari-pinned-tab.svg",
74+
color: "#274b50",
8075
},
8176
],
8277
},
83-
manifest: "/favicon/site.webmanifest",
84-
twitter: {
85-
card: "summary_large_image",
86-
title,
87-
description,
88-
images: [image],
78+
manifest: "/site.webmanifest",
79+
alternates: {
80+
canonical: getBaseUrl(siteConfig.url),
8981
},
9082
formatDetection: {
9183
email: false,

‎src/app/(main)/page.tsx

-6
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,6 @@ import Experiences from "@/components/homepage/experiences";
33
import Posts from "@/components/homepage/posts";
44
import Projects from "@/components/homepage/projects";
55

6-
export const metadata = {
7-
alternates: {
8-
canonical: "/",
9-
},
10-
};
11-
126
function Page(): JSX.Element {
137
return (
148
<>

‎src/app/(main)/posts/[slug]/layout.tsx

+12-29
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
import { DEVDOMAIN, DOMAIN, devEnvironment } from "@/lib/constants";
1+
import { siteConfig } from "@/lib/config";
2+
import { generateCustomMetadata } from "@/lib/generate-custom-metadata";
23
import { createReader } from "@keystatic/core/reader";
34
import type { Metadata } from "next";
45
import { notFound } from "next/navigation";
@@ -17,35 +18,17 @@ export async function generateMetadata({
1718
//
1819
if (!post) return notFound();
1920

20-
const title = `${post.title} | Kyle's Blog`;
21+
const title = post.title;
2122
const description = post.description;
22-
const image = encodeURI(
23-
`${devEnvironment ? DEVDOMAIN : DOMAIN}/api/og-image/${post.title}`,
24-
);
25-
const date = post.date
26-
? new Date(post.date).toISOString()
27-
: new Date().toISOString();
28-
29-
return {
30-
title,
31-
description,
32-
openGraph: {
33-
title,
34-
description,
35-
url: `${DOMAIN}/posts/${params.slug}`,
36-
siteName: title,
37-
images: [image],
38-
locale: "en-US",
39-
type: "article",
40-
publishedTime: date,
41-
},
42-
twitter: {
43-
card: "summary_large_image",
44-
title,
45-
description,
46-
images: [image],
47-
},
48-
};
23+
const slug = `/posts/${params.slug}`;
24+
const image = encodeURI(`${siteConfig.url}/api/og-image/${post.title}`);
25+
return generateCustomMetadata({
26+
mainTitle: title,
27+
maybeSeoTitle: title,
28+
maybeSeoDescription: description,
29+
ogImage: image,
30+
slug,
31+
});
4932
}
5033

5134
interface PostLayoutProps {

‎src/app/(main)/posts/page.tsx

+12-24
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,26 @@
11
import { cn } from "@/lib/cn";
2-
import { DEVDOMAIN, DOMAIN, devEnvironment } from "@/lib/constants";
2+
import { siteConfig } from "@/lib/config";
3+
import { generateCustomMetadata } from "@/lib/generate-custom-metadata";
34
import { ChevronLeftIcon } from "@heroicons/react/20/solid";
45
import { createReader } from "@keystatic/core/reader";
56
import dayjs from "dayjs";
67
import Link from "next/link";
78
import config from "../../../../keystatic.config";
89

9-
const title = "Post List | Kyle Wong";
10+
const title = "Post List";
1011
const description = "A list for all my blogs and sharings";
1112
const image = encodeURI(
12-
`${
13-
devEnvironment ? DEVDOMAIN : DOMAIN
14-
}/api/og-image/A list for all my blogs and sharings`,
13+
`${siteConfig.url}/api/og-image/A list for all my blogs and sharings`,
1514
);
15+
const slug = "/posts";
1616

17-
export const metadata = {
18-
title,
19-
description,
20-
openGraph: {
21-
title,
22-
description,
23-
url: DOMAIN,
24-
siteName: title,
25-
images: [image],
26-
locale: "en-US",
27-
type: "website",
28-
},
29-
twitter: {
30-
card: "summary_large_image",
31-
title,
32-
description,
33-
images: [image],
34-
},
35-
};
17+
export const metadata = generateCustomMetadata({
18+
mainTitle: title,
19+
maybeSeoTitle: title,
20+
maybeSeoDescription: description,
21+
ogImage: image,
22+
slug,
23+
});
3624

3725
const reader = createReader(process.cwd(), config);
3826

‎src/components/homepage/experiences.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { Badge } from "@/components/ui/badge";
22
import { LinkTag } from "@/components/ui/typography/link-tag";
3-
import { linkedInProfile } from "@/lib/constants";
3+
import { siteConfig } from "@/lib/config";
44
import { formatDateRange } from "@/lib/dates";
55
import { createReader } from "@keystatic/core/reader";
66
import dayjs from "dayjs";
@@ -73,7 +73,7 @@ async function Experiences(): Promise<JSX.Element> {
7373

7474
<LinkTag
7575
className="flex items-center gap-2"
76-
href={linkedInProfile}
76+
href={siteConfig.links.linkedin}
7777
target="_blank"
7878
rel="noreferrer noopener"
7979
>

‎src/components/site-footer.tsx

+3-2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
import { githubProfile, githubRepo } from "@/lib/constants";
1+
import { siteConfig } from "@/lib/config";
2+
import { githubRepo } from "@/lib/constants";
23
import React from "react";
34

45
function SiteFooter(): JSX.Element {
@@ -7,7 +8,7 @@ function SiteFooter(): JSX.Element {
78
<p className="text-center text-sm leading-loose md:text-left">
89
Built by{" "}
910
<a
10-
href={githubProfile}
11+
href={siteConfig.links.github}
1112
target="_blank"
1213
rel="noreferrer noopener"
1314
className="group font-medium text-foreground transition-all duration-300 ease-in-out "

‎src/components/site-header.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { cn } from "@/lib/cn";
2-
import { githubProfile, linkedInProfile } from "@/lib/constants";
2+
import { siteConfig } from "@/lib/config";
33
import { AiFillGithub, AiFillLinkedin } from "react-icons/ai";
44
import DarkModeToggle from "./dark-mode-toggle";
55
import SiteNav from "./site-nav";
@@ -33,7 +33,7 @@ function SiteHeader(): JSX.Element {
3333
<ul className="mt-10 flex items-center gap-2">
3434
<li className="text-xs">
3535
<a
36-
href={linkedInProfile}
36+
href={siteConfig.links.linkedin}
3737
target="_blank"
3838
rel="noreferrer noopener"
3939
className={cn(
@@ -50,7 +50,7 @@ function SiteHeader(): JSX.Element {
5050
</li>
5151
<li className="text-xs">
5252
<a
53-
href={githubProfile}
53+
href={siteConfig.links.github}
5454
target="_blank"
5555
rel="noreferrer noopener"
5656
className={cn(

‎src/lib/config.ts

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import { DEVDOMAIN, DOMAIN, devEnvironment } from "./constants";
2+
3+
export const siteConfig = {
4+
name: "Kyle Wong",
5+
url: devEnvironment ? DEVDOMAIN : DOMAIN,
6+
ogImage: encodeURI(
7+
`${
8+
devEnvironment ? DEVDOMAIN : DOMAIN
9+
}/api/og-image/Kyle Wong - Digital Marketer, Web Developer.`,
10+
),
11+
description:
12+
"Hello, I'm Kyle, a digital marketer and web developer, based in the Malaysia 🇲.",
13+
links: {
14+
github: "https://www.github.com/y3owk1n",
15+
linkedin: "https://www.linkedin.com/in/kyle-wong-958a58115/",
16+
},
17+
};

‎src/lib/constants.ts

+1-4
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,7 @@ export const siteDescription = "My personal site with lots of stuffs";
33
export const blurDataURL =
44
"iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8MmFbPQAHdQK78xXbewAAAABJRU5ErkJggg==";
55

6-
export const DOMAIN = "https://www.kylewong.my";
6+
export const DOMAIN = "https://kylewong.my";
77
export const DEVDOMAIN = "http://localhost:3000";
88
export const devEnvironment = process.env.NODE_ENV === "development";
9-
export const githubProfile = "https://www.github.com/y3owk1n";
10-
export const linkedInProfile =
11-
"https://www.linkedin.com/in/kyle-wong-958a58115/";
129
export const githubRepo = "https://github.com/y3owk1n/blog";

0 commit comments

Comments
 (0)