From a073a263cb5b1ba1291d0f3ec4d824fec106c322 Mon Sep 17 00:00:00 2001 From: RaviAnand Mohabir Date: Fri, 5 May 2023 16:19:11 +0200 Subject: [PATCH] feat: :sparkles: implement custom Head component with defaults and OG/Twitter support --- src/components/head.tsx | 50 ++++++++++++++ src/pages/index.tsx | 12 +--- src/pages/login.tsx | 124 ++++++++++++++++++----------------- src/pages/posts/[id].tsx | 137 ++++++++++++++++++--------------------- src/pages/sign-up.tsx | 84 ++++++++++++------------ 5 files changed, 223 insertions(+), 184 deletions(-) create mode 100644 src/components/head.tsx diff --git a/src/components/head.tsx b/src/components/head.tsx new file mode 100644 index 0000000..251e6d6 --- /dev/null +++ b/src/components/head.tsx @@ -0,0 +1,50 @@ +import NextHead from "next/head"; + +interface HeadProps { + children?: React.ReactNode; + pageTitle: string; + description?: string; + url?: string; + image?: string | null; + video?: string | null; + ogType?: "article" | "website" | "post"; + twitterCard?: "summary_large_image"; +} + +function Head({ + children, + pageTitle, + description = "Easily share images and videos with others", + url, + image, + video, + ogType, + twitterCard, +}: HeadProps) { + const siteTitle = pageTitle ? `${pageTitle} | Share Me` : "Share Me"; + + return ( + + {siteTitle} + + + + + {image && ( + <> + + + + )} + {video && } + {twitterCard && } + + + + + {children} + + ); +} + +export default Head; diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 858e9b2..695548d 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -9,7 +9,7 @@ import { FileWithPath } from "@mantine/dropzone"; import { notifications } from "@mantine/notifications"; import { IconAlertCircle } from "@tabler/icons-react"; import { GetServerSideProps } from "next"; -import Head from "next/head"; +import Head from "@/components/head"; import { useRouter } from "next/router"; import { useEffect, useState } from "react"; @@ -65,15 +65,7 @@ export default function Home() { return ( <> - - Share Me - - - - +