diff --git a/pages/api/og-generator/Inter-Bold.ttf b/pages/api/og-generator/Inter-Bold.ttf new file mode 100644 index 00000000..15e908f2 Binary files /dev/null and b/pages/api/og-generator/Inter-Bold.ttf differ diff --git a/pages/api/og-generator/Inter-VariableFont.ttf b/pages/api/og-generator/Inter-VariableFont.ttf new file mode 100644 index 00000000..e31b51e3 Binary files /dev/null and b/pages/api/og-generator/Inter-VariableFont.ttf differ diff --git a/pages/api/og-generator/InterDisplay-Bold.ttf b/pages/api/og-generator/InterDisplay-Bold.ttf new file mode 100644 index 00000000..51b5fd58 Binary files /dev/null and b/pages/api/og-generator/InterDisplay-Bold.ttf differ diff --git a/pages/api/og-generator/InterDisplay-Regular.ttf b/pages/api/og-generator/InterDisplay-Regular.ttf new file mode 100644 index 00000000..1d85af32 Binary files /dev/null and b/pages/api/og-generator/InterDisplay-Regular.ttf differ diff --git a/pages/api/og.js b/pages/api/og-generator/og-job.js similarity index 100% rename from pages/api/og.js rename to pages/api/og-generator/og-job.js diff --git a/pages/api/og-generator/og-note.js b/pages/api/og-generator/og-note.js new file mode 100644 index 00000000..111db6bc --- /dev/null +++ b/pages/api/og-generator/og-note.js @@ -0,0 +1,241 @@ +import { NotePencil } from "@/components/icons"; +import { ImageResponse } from "@vercel/og"; + +const interBold = fetch( + new URL("./InterDisplay-Bold.ttf", import.meta.url) +).then(res => res.arrayBuffer()); +const interRegular = fetch( + new URL("./InterDisplay-Regular.ttf", import.meta.url) +).then(res => res.arrayBuffer()); + +export const config = { + runtime: "edge", +}; + +const OgImageHandler = async req => { + const { searchParams } = new URL(req.url); + const title = searchParams.get("title") || "New note"; + const avatar = + searchParams.get("avatar") || + "https://s3-us-west-1.amazonaws.com/tinify-bucket/%2Fprototypr%2Ftemp%2F1595435549331-1595435549330.png"; + const author = searchParams.get("author") || ""; + const date = searchParams.get("date") || ""; + + const boldFont = await interBold; + const regularFont = await interRegular; + + return new ImageResponse( + ( +
+ +
+ {/* paper stack */} +
+
+
+ + {/* Main content */} +
+
+ +
+ Prototypr Notes +
+
+

+ {title} +

+ +
+ {avatar && ( + + )} + {author && ( +
+
{author}
+
+ {date} +
+
+ )} +
+
+
+
+ ), + { + width: 1200, + height: 630, + fonts: [ + { + name: "InterBold", + data: boldFont, + style: "bold", + }, + { + name: "InterRegular", + data: regularFont, + style: "normal", + }, + ], + } + ); +}; + +export default OgImageHandler; diff --git a/pages/jobs/[id].js b/pages/jobs/[id].js index 1525b082..c195a26c 100644 --- a/pages/jobs/[id].js +++ b/pages/jobs/[id].js @@ -75,7 +75,7 @@ export default function Post({ const image = `${ process.env.NEXT_PUBLIC_HOME_URL - }/api/og?title=${encodeURIComponent(title)}&companyName=${encodeURIComponent( + }/api/og-generator/og-job?title=${encodeURIComponent(title)}&companyName=${encodeURIComponent( companyName )}&companyLogo=${companyLogo}&salary=${encodeURIComponent(salaryText)}`; return ( diff --git a/pages/n/[slug].js b/pages/n/[slug].js index 4a77bc94..6d77568d 100644 --- a/pages/n/[slug].js +++ b/pages/n/[slug].js @@ -51,11 +51,11 @@ export default function EditPostPage() { url: "https://prototypr.io/note", }} > -
+
-
+
-
-
+
+
import("@/components/StickyFooterCTA"), { @@ -133,6 +134,13 @@ export default function Post({ } }, [post.attributes?.content]); + const ogImage = `${ + process.env.NEXT_PUBLIC_HOME_URL + }/api/og-generator/og-note?title=${encodeURIComponent(title)}&author=${encodeURIComponent( + authorName + )}&date=${encodeURIComponent(date)}&avatar=${encodeURIComponent(avatar)}`; + + return (