⚡️ feat: metadata

andrehadianto · Jul 30, 2024 · 69e7730 · 69e7730
1 parent 573fd98
commit 69e7730
Show file tree

Hide file tree

Showing 10 changed files with 64 additions and 4 deletions.
diff --git a/common/components/PageHead/PageHead.tsx b/common/components/PageHead/PageHead.tsx
@@ -0,0 +1,48 @@
+import Head from "next/head";
+import { PropsWithChildren, useMemo } from "react";
+
+export interface PageHeadProps {
+  name?: string;
+  description?: string;
+  removeTitleAppend?: boolean;
+  titleAppendSeparator?: string;
+}
+
+const appName = "Andre Hadianto Lesmana";
+
+export const PageHead = ({
+  name,
+  description,
+  removeTitleAppend = false,
+  titleAppendSeparator = "|",
+  children,
+}: PropsWithChildren<PageHeadProps>) => {
+  const pageName = useMemo(() => {
+    if (!removeTitleAppend) {
+      return name ? `${name} ${titleAppendSeparator} ${appName}` : appName;
+    }
+    return name ?? appName;
+  }, [name, removeTitleAppend, titleAppendSeparator]);
+
+  const pageDesc =
+    description ??
+    "Welcome to my page! Check out my projects and contact me if you want to work together!";
+
+  return (
+    <Head>
+      <meta charSet="utf-8" />
+      <meta content="width=device-width, initial-scale=1.0" name="viewport" />
+      <title>{pageName}</title>
+      <meta content={pageDesc} name="description" />
+      <meta content={pageName} name="og:title" />
+      <meta content={pageDesc} name="og:description" />
+      <meta content={appName} property="og:site_name" />
+      <meta content="en" property="og:locale" />
+      <meta content="website" property="og:type" />
+      {/* Note: using <ThemeProvider themeColor> for this in _app */}
+      {/* <meta content="var(--theme-color)" name="theme-color" /> */}
+
+      {children}
+    </Head>
+  );
+};
diff --git a/common/components/PageHead/index.ts b/common/components/PageHead/index.ts
@@ -0,0 +1 @@
+export * from './PageHead';
diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -1,4 +1,5 @@
 import { CoreLayout } from "@/common/components/CoreLayout";
+import { PageHead } from "@/common/components/PageHead";
 import { inter } from "@/common/fonts";
 
 import type { AppProps } from "next/app";
@@ -12,6 +13,7 @@ export default function App({ Component, pageProps }: AppProps) {
 
   return (
     <>
+      <PageHead />
       {/* This is required for fonts to work in Portal too  */}
       <style global jsx>{`
         :root {

diff --git a/pages/_document.tsx b/pages/_document.tsx
@@ -3,7 +3,18 @@ import { Html, Head, Main, NextScript } from "next/document";
 export default function Document() {
   return (
     <Html lang="en">
-      <Head />
+      <Head>
+        <link
+          href="/andrehadianto.com/favicons/icon-dark.png"
+          media="(prefers-color-scheme: dark)"
+          rel="icon"
+        />
+        <link
+          href="/andrehadianto.com/favicons/icon-light.png"
+          media="(prefers-color-scheme: light)"
+          rel="icon"
+        />
+      </Head>
       <body>
         <Main />
         <NextScript />

diff --git a/pages/index.tsx b/pages/index.tsx
@@ -68,7 +68,7 @@ export default function Home() {
         </motion.div>
         <motion.div
           {...fadeInMotion()}
-          className="bg-primary-default col-span-1 row-span-1 rounded-md"
+          className="col-span-1 row-span-1 rounded-md bg-primary-default"
         >
           <div className="flex h-full w-full flex-col items-center justify-center gap-2">
             <Image

diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/favicons/icon-dark.png b/public/favicons/icon-dark.png
diff --git a/public/favicons/icon-light.png b/public/favicons/icon-light.png
diff --git a/public/next.svg b/public/next.svg
diff --git a/public/vercel.svg b/public/vercel.svg