Merge pull request #391 from Illyism/og

improve metadata defaults + og image
mfts · Apr 29, 2024 · ce215cc · ce215cc
2 parents 26dc21c + ab8cb7a
commit ce215cc
Show file tree

Hide file tree

Showing 6 changed files with 169 additions and 152 deletions.
diff --git a/app/api/og/route.tsx b/app/api/og/route.tsx
@@ -0,0 +1,42 @@
+/* eslint-disable @next/next/no-img-element */
+import { ImageResponse } from "next/og";
+import { NextRequest } from "next/server";
+
+export const runtime = "edge";
+
+/**
+ * @name Headline Template
+ * @description Make it pop with a headline
+ */
+export async function GET(request: NextRequest) {
+  const searchParams = request.nextUrl.searchParams;
+  const title = searchParams.get("title") || "Papermark Document";
+  const Inter = await fetch(
+    new URL("@/public/_static/Inter-Bold.ttf", import.meta.url),
+  ).then((res) => res.arrayBuffer());
+
+  return new ImageResponse(
+    (
+      <div tw="flex flex-col items-center justify-between w-full h-full bg-white text-black p-12">
+        <div tw="text-[32px] flex items-center tracking-tighter">Papermark</div>
+        <div tw="text-[42px] text-center">{title}</div>
+        <div tw="text-[32px] flex items-center">
+          Open-Source Document Sharing
+        </div>
+      </div>
+    ),
+    {
+      width: 1200,
+      height: 630,
+      headers: {
+        "Cache-Control": "public, max-age=3600, immutable",
+      },
+      fonts: [
+        {
+          name: "Inter",
+          data: Inter,
+        },
+      ],
+    },
+  );
+}
diff --git a/components/view/custom-metatag.tsx b/components/view/custom-metatag.tsx
@@ -1,46 +1,76 @@
 import Head from "next/head";
 
 const CustomMetatag = ({
+  enableBranding,
   title,
   description,
   imageUrl,
+  url,
 }: {
+  enableBranding: boolean;
   title: string | null;
   description: string | null;
   imageUrl: string | null;
+  url: string;
 }) => {
   return (
     <Head>
-      {title ? <title>{title}</title> : null}
-      {description ? (
-        <meta name="description" content={description} key="description" />
-      ) : null}
-      {title ? (
-        <meta property="og:title" content={title} key="og-title" />
-      ) : null}
-      {description ? (
-        <meta
-          property="og:description"
-          content={description}
-          key="og-description"
-        />
-      ) : null}
-      {imageUrl ? (
-        <meta property="og:image" content={imageUrl} key="og-image" />
-      ) : null}
-      {title ? (
-        <meta name="twitter:title" content={title} key="tw-title" />
-      ) : null}
-      {description ? (
-        <meta
-          name="twitter:description"
-          content={description}
-          key="tw-description"
-        />
-      ) : null}
-      {imageUrl ? (
-        <meta name="twitter:image" content={imageUrl} key="tw-image" />
-      ) : null}
+      {url && (
+        <>
+          <link rel="canonical" href={url} key="canonical" />
+          <meta property="og:url" content={url} key="og-url" />
+        </>
+      )}
+      {title && (
+        <>
+          <title>{title}</title>
+          <meta property="og:title" content={title} key="og-title" />
+          <meta name="twitter:title" content={title} key="tw-title" />
+        </>
+      )}
+      {!enableBranding && (
+        <>
+          <meta
+            property="og:image"
+            content={`/api/og?title=${title ?? ""}`}
+            key="og-image"
+          />
+          <meta
+            name="twitter:image"
+            content={`/api/og?title=${title ?? ""}`}
+            key="tw-image"
+          />
+        </>
+      )}
+      {enableBranding && (
+        <>
+          {description ? (
+            <>
+              <meta
+                name="description"
+                content={description}
+                key="description"
+              />
+              <meta
+                property="og:description"
+                content={description}
+                key="og-description"
+              />
+              <meta
+                name="twitter:description"
+                content={description}
+                key="tw-description"
+              />
+            </>
+          ) : null}
+          {imageUrl ? (
+            <>
+              <meta property="og:image" content={imageUrl} key="og-image" />
+              <meta name="twitter:image" content={imageUrl} key="tw-image" />
+            </>
+          ) : null}
+        </>
+      )}
     </Head>
   );
 };

diff --git a/pages/view/[linkId]/index.tsx b/pages/view/[linkId]/index.tsx
@@ -118,20 +118,15 @@ export default function ViewPage({
   if (!link || status === "loading" || router.isFallback) {
     return (
       <>
-        <Head>
-          <meta
-            property="og:url"
-            key="og-url"
-            content={`https://www.papermark.io/view/${router.query.linkId}`}
-          />
-        </Head>
-        {meta && meta.enableCustomMetatag ? (
-          <CustomMetatag
-            title={meta.metaTitle}
-            description={meta.metaDescription}
-            imageUrl={meta.metaImage}
-          />
-        ) : null}
+        <CustomMetatag
+          enableBranding={meta?.enableCustomMetatag ?? false}
+          title={
+            meta?.metaTitle ?? link?.document?.name ?? "Papermark Document"
+          }
+          description={meta?.metaDescription ?? null}
+          imageUrl={meta?.metaImage ?? null}
+          url={`https://www.papermark.io/view/${router.query.linkId}`}
+        />
         <div className="h-screen flex items-center justify-center">
           <LoadingSpinner className="h-20 w-20" />
         </div>
@@ -167,20 +162,13 @@ export default function ViewPage({
   if (emailProtected || linkPassword) {
     return (
       <>
-        <Head>
-          <meta
-            property="og:url"
-            key="og-url"
-            content={`https://www.papermark.io/view/${link.id}`}
-          />
-        </Head>
-        {enableCustomMetatag ? (
-          <CustomMetatag
-            title={metaTitle}
-            description={metaDescription}
-            imageUrl={metaImage}
-          />
-        ) : null}
+        <CustomMetatag
+          enableBranding={enableCustomMetatag ?? false}
+          title={metaTitle ?? link.document.name}
+          description={metaDescription}
+          imageUrl={metaImage}
+          url={`https://www.papermark.io/view/${router.query.linkId}`}
+        />
         <DocumentView
           link={link}
           userEmail={userEmail}
@@ -198,20 +186,13 @@ export default function ViewPage({
 
   return (
     <>
-      <Head>
-        <meta
-          property="og:url"
-          key="og-url"
-          content={`https://www.papermark.io/view/${link.id}`}
-        />
-      </Head>
-      {enableCustomMetatag ? (
-        <CustomMetatag
-          title={metaTitle}
-          description={metaDescription}
-          imageUrl={metaImage}
-        />
-      ) : null}
+      <CustomMetatag
+        enableBranding={enableCustomMetatag ?? false}
+        title={metaTitle ?? link.document.name}
+        description={metaDescription}
+        imageUrl={metaImage}
+        url={`https://www.papermark.io/view/${router.query.linkId}`}
+      />
       <DocumentView
         link={link}
         userEmail={userEmail}

diff --git a/pages/view/d/[linkId]/index.tsx b/pages/view/d/[linkId]/index.tsx
@@ -131,20 +131,13 @@ export default function ViewPage({
   if (!link || status === "loading" || router.isFallback) {
     return (
       <>
-        <Head>
-          <meta
-            property="og:url"
-            key="og-url"
-            content={`https://www.papermark.io/view/d/${router.query.linkId}`}
-          />
-        </Head>
-        {meta && meta.enableCustomMetatag ? (
-          <CustomMetatag
-            title={meta.metaTitle}
-            description={meta.metaDescription}
-            imageUrl={meta.metaImage}
-          />
-        ) : null}
+        <CustomMetatag
+          enableBranding={meta?.enableCustomMetatag ?? false}
+          title={meta?.metaTitle ?? link?.dataroom.name ?? "Dataroom"}
+          description={meta?.metaDescription ?? null}
+          imageUrl={meta?.metaImage ?? null}
+          url={`https://www.papermark.io/view/d/${router.query.linkId}`}
+        />
         <div className="h-screen flex items-center justify-center">
           <LoadingSpinner className="h-20 w-20" />
         </div>
@@ -180,20 +173,13 @@ export default function ViewPage({
   if (emailProtected || linkPassword) {
     return (
       <>
-        <Head>
-          <meta
-            property="og:url"
-            key="og-url"
-            content={`https://www.papermark.io/view/d/${link.id}`}
-          />
-        </Head>
-        {enableCustomMetatag ? (
-          <CustomMetatag
-            title={metaTitle}
-            description={metaDescription}
-            imageUrl={metaImage}
-          />
-        ) : null}
+        <CustomMetatag
+          enableBranding={enableCustomMetatag ?? false}
+          title={metaTitle}
+          description={metaDescription}
+          imageUrl={metaImage}
+          url={`https://www.papermark.io/view/d/${router.query.linkId}`}
+        />
         <DataroomView
           link={link}
           userEmail={verifiedEmail ?? userEmail}
@@ -209,20 +195,13 @@ export default function ViewPage({
 
   return (
     <>
-      <Head>
-        <meta
-          property="og:url"
-          key="og-url"
-          content={`https://www.papermark.io/view/d/${link.id}`}
-        />
-      </Head>
-      {enableCustomMetatag ? (
-        <CustomMetatag
-          title={metaTitle}
-          description={metaDescription}
-          imageUrl={metaImage}
-        />
-      ) : null}
+      <CustomMetatag
+        enableBranding={enableCustomMetatag ?? false}
+        title={metaTitle}
+        description={metaDescription}
+        imageUrl={metaImage}
+        url={`https://www.papermark.io/view/d/${router.query.linkId}`}
+      />
       <DataroomView
         link={link}
         userEmail={userEmail}