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
-
-
-
-
+
diff --git a/src/pages/login.tsx b/src/pages/login.tsx
index a68d596..e74a212 100644
--- a/src/pages/login.tsx
+++ b/src/pages/login.tsx
@@ -36,6 +36,7 @@ import {
SiTwitch,
SiTwitter,
} from "react-icons/si";
+import Head from "@/components/head";
const authProviderIcons: Record = {
apple: ,
@@ -90,67 +91,70 @@ function Login() {
};
return (
-
-
-
-
-
+ ))}
+ {usernamePasswordEnabled && (
+
+
+ Sign Up
+
+
+
+ )}
+
+
+
+
+ >
);
}
diff --git a/src/pages/posts/[id].tsx b/src/pages/posts/[id].tsx
index 31651d2..5c3d081 100644
--- a/src/pages/posts/[id].tsx
+++ b/src/pages/posts/[id].tsx
@@ -1,4 +1,5 @@
import Dropzone from "@/components/dropzone";
+import Head from "@/components/head";
import Nav from "@/components/nav";
import {
initPocketBaseServer,
@@ -36,7 +37,6 @@ import {
} from "@tabler/icons-react";
import { FileWithPath } from "file-selector";
import { GetServerSideProps } from "next";
-import Head from "next/head";
import { useRouter } from "next/router";
import { Record } from "pocketbase";
import { useCallback, useEffect, useState } from "react";
@@ -185,31 +185,20 @@ export default function Post(props: PostProps) {
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [post, debouncedTitle, isPublic, nsfw]);
- const siteTitle = post?.title || `Post by ${props.postAuthorUsername}`;
+ const postTitle = post?.title || `Post by ${props.postAuthorUsername}`;
+ const description = `Shared by ${props.postAuthorUsername}`;
return (
<>
-
- {siteTitle} | Share Me
-
-
-
-
- {props.image && }
- {props.video && }
-
-
-
- {props.image && }
-
-
-
+