feat: add head to the project

jonyw4 · Nov 24, 2021 · 2518575 · 2518575 · vercel · Nov 24, 2021
1 parent 179725a
commit 2518575
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 8 deletions.
diff --git a/webapp/src/pages/articles/[slug].tsx b/webapp/src/pages/articles/[slug].tsx
@@ -1,3 +1,4 @@
+import Head from "next/head";
 import { GetStaticProps, GetStaticPaths } from "next";
 import { ArticlePage } from "../../components/templates/ArticlePage";
 import { Markdown } from "../../components/atoms/Markdown";
@@ -18,15 +19,34 @@ export default function Article({
   updatedAt,
 }: ArticleProps) {
   return (
-    <ArticlePage title={title} createdAt={createdAt} updatedAt={updatedAt}>
-      <Markdown content={content} />
-    </ArticlePage>
+    <>
+      <Head>
+        <title>{title} | Blog - Jonathan Celio</title>
+        <meta name="description" content={title} />
+        <meta property="og:title" content={title} key="title" />
+        <meta property="og:type" content="article" key="type" />
+        <meta
+          property="og:image"
+          content="https://jonycelio.com/images/jony.jpg"
+          key="image"
+        />
+        <meta property="og:article:published_time" content={createdAt} />
+        <meta property="og:article:modified_time" content={updatedAt} />
+      </Head>
+      <ArticlePage
+        title={title}
+        createdAt={formatDate(new Date(createdAt))}
+        updatedAt={formatDate(new Date(updatedAt))}
+      >
+        <Markdown content={content} />
+      </ArticlePage>
+    </>
   );
 }
 
 export const getStaticProps: GetStaticProps<ArticleProps> = async ({
   params,
-  locale
+  locale,
 }) => {
   setLocale(locale);
 
@@ -36,8 +56,8 @@ export const getStaticProps: GetStaticProps<ArticleProps> = async ({
   return {
     props: {
       ...article,
-      createdAt: formatDate(new Date(article.createdAt)),
-      updatedAt: formatDate(new Date(article.updatedAt)),
+      createdAt: new Date(article.createdAt).toISOString(),
+      updatedAt: new Date(article.updatedAt).toISOString(),
     },
   };
 };
@@ -47,7 +67,9 @@ export const getStaticPaths: GetStaticPaths = async ({ locales }) => {
   const articleSlugs = await articleRepository.getAllArticleSlugs();
 
   const paths = articleSlugs.map((slug) => ({ params: { slug } }));
-  const pathsByLocale = locales.map((locale) => paths.map((path) => ({...path, locale})));
+  const pathsByLocale = locales.map((locale) =>
+    paths.map((path) => ({ ...path, locale }))
+  );
 
   return {
     paths: pathsByLocale.flat(),

diff --git a/webapp/src/pages/index.tsx b/webapp/src/pages/index.tsx
@@ -1,10 +1,26 @@
 import { GetStaticProps } from "next";
+import Head from "next/head";
 import { formatDate, setLocale } from "../components/global/formatDate";
 import { HomePage, HomePageProps } from "../components/templates/HomePage";
 import { createArticleRepository } from "../factories";
 
 function Home(props: HomePageProps) {
-  return <HomePage {...props} />;
+  return (
+    <>
+      <Head>
+        <title>Blog - Jonathan Celio</title>
+        <meta name="description" content="Jonathan Celio's Blog" />
+        <meta property="og:title" content="Blog - Jonathan Celio" key="title" />
+        <meta property="og:type" content="website" key="type" />
+        <meta
+          property="og:image"
+          content="https://jonycelio.com/images/jony.jpg"
+          key="image"
+        />
+      </Head>
+      <HomePage {...props} />
+    </>
+  );
 }
 
 export const getStaticProps: GetStaticProps<HomePageProps> = async ({ locale }) => {