feat: refactor og image generation (#639)

apps/marketing/content/blog/pre-seed.mdx

@@ -14,9 +14,11 @@ tags:
 Today I'm happy to announce that we closed a \$1.25M Pre-Seed round for Documenso, bringing our total funding to \$1.54M. The round actually closed last month, we just were sneaky about it.
 
 ## Two more for the road (to open signing)
+
 We're ecstatic to welcome [OSS Capital](https://twitter.com/osscapital) and especially [Joseph Jacks](https://twitter.com/JosephJacks_) to the inner circle of the open signing revolution. We're also fortunate to be joined by Orrick's very own [John Harrison](https://www.linkedin.com/in/john-harrison-a1213b9/) and his legal experience. For those who are wondering, yes, the round was, of course, signed using Documenso.
 
 ## Open Source, Open Metrics
+
 If you follow us, you know we're firmly committed to the open source values of openness and transparency. For us, this includes not only the code side of things but also the business. As we aim to build trust among our investors, customers, and partners, we want to be open about what's going on. We also want to allow everyone to learn from our data and choices, just as we did from so many other COSS (Commercial Open Source) startups. The term "Open Startup" isn't precisely defined (and probably will never be, just like startup). There is however a [great write-up](https://cal.com/blog/open-startup) about the basics by the founder of our favorite open source scheduling tool Cal.com.
 
 The two main takeaways are:

apps/marketing/content/blog/switching-from-slack-to-discord.mdx

@@ -24,9 +24,9 @@ We’re an open-source project and focus on building a great developer experienc
 
 So, we’re switching all conversations, team and community-wide, to Discord.
 
-In this post, we won’t debate *why* we’re switching — Slack vs. Discord is a long-lasting debate with pros and cons, and fans on both sides. There are great [stories](https://blog.meilisearch.com/from-slack-to-discord-our-migration/) and [threads](https://twitter.com/McPizza0/status/1655519558600470528) on the topic. We just don’t want to write yet another story here.
+In this post, we won’t debate _why_ we’re switching — Slack vs. Discord is a long-lasting debate with pros and cons, and fans on both sides. There are great [stories](https://blog.meilisearch.com/from-slack-to-discord-our-migration/) and [threads](https://twitter.com/McPizza0/status/1655519558600470528) on the topic. We just don’t want to write yet another story here.
 
-Instead, we’ll focus on *how* we plan to make the switch.
+Instead, we’ll focus on _how_ we plan to make the switch.
 
 ## Who is this story for?
 
@@ -46,90 +46,91 @@ The detailed plan goes like this:
 - 2023-07-26 `t+1`: The team switches to Discord. The objective is to get used to the product and to customize it to feel at home and, when we’re ready to welcome the community, to make new members feel at home, too.
 - 2023-08-02 `t+8`: We announce to the community the upcoming changes in the different channels — GitHub, Twitter, and Slack.
 
-    - **GitHub**
+  - **GitHub**
-        - Create new Pull Request
-            - Add story to the blog
-            - Update link to the community
 
-            ```
+    - Create new Pull Request
-            https://documen.so/discord
+      - Add story to the blog
-            ```
+      - Update link to the community
+      ```
+      https://documen.so/discord
+      ```
+    - Start a new Discussion
 
-        - Start a new Discussion
+      ```markdown
+      Happy Wednesday!
 
-            ```markdown
+      TL,DR: We’re switching to Discord. [Join the fun!](https://documen.so/discord)
-            Happy Wednesday!
 
-            TL,DR: We’re switching to Discord. [Join the fun!](https://documen.so/discord)
+      We want to build a beautiful, open-source DocuSign alternative. As we're growing (reached 2.3K Stars), we feel the need to have a more community- and developer-friendly environment to share ideas, support, and memes.
 
-            We want to build a beautiful, open-source DocuSign alternative. As we're growing (reached 2.3K Stars), we feel the need to have a more community- and developer-friendly environment to share ideas, support, and memes.
+      Make sure to join the server to keep up to date on all things Documenso.
 
-            Make sure to join the server to keep up to date on all things Documenso. 
+      Oh and, spoiler alert, there may be some swag there 👀
 
-            Oh and, spoiler alert, there may be some swag there 👀
+      See you there!
+      Flo
+      ```
 
-            See you there!
+  - **Twitter**
-            Flo
-            ```
 
-    - **Twitter**
+    - [Tweet the announcement](https://twitter.com/documenso/status/1686719482096766977)
-        - [Tweet the announcement](https://twitter.com/documenso/status/1686719482096766977)
+    - Pin Tweet
-        - Pin Tweet
+    - Update link in bio
-        - Update link in bio
 
-            ```
+      ```
-            The Open Source DocuSign Alternative.
+      The Open Source DocuSign Alternative.
 
-            http://documen.so/github
+      http://documen.so/github
-            http://documen.so/discord
+      http://documen.so/discord
-            http://documen.so/manifest
+      http://documen.so/manifest
-            ㅤ
+      ㅤ
-            ```
+      ```
 
-    - **Slack**
+  - **Slack**
-        - Post message in `#general`
 
-            ```markdown
+    - Post message in `#general`
-            Happy Wednesday!
 
-            TL,DR: We’re switching to Discord. [Join the fun!](https://documen.so/discord)
+      ```markdown
+      Happy Wednesday!
 
-            We want to build a beautiful, open-source DocuSign alternative. As we're growing (reached 2.3K Stars), we feel the need to have a more community- and developer-friendly environment to share ideas, support, and memes.
+      TL,DR: We’re switching to Discord. [Join the fun!](https://documen.so/discord)
 
-            Make sure to [join the server](https://documen.so/discord) to keep up to date on all things Documenso. 
+      We want to build a beautiful, open-source DocuSign alternative. As we're growing (reached 2.3K Stars), we feel the need to have a more community- and developer-friendly environment to share ideas, support, and memes.
 
-            Oh and, spoiler alert, there may be some swag there 👀
+      Make sure to [join the server](https://documen.so/discord) to keep up to date on all things Documenso.
 
-            See you there!
+      Oh and, spoiler alert, there may be some swag there 👀
-            Flo
-            ```
 
-        - Pin post
+      See you there!
-        - Set topic and description
+      Flo
+      ```
 
-            ```
+    - Pin post
-            We're switching to Discord. Join the fun: https://documen.so/discord
+    - Set topic and description
-            ```
+      ```
-            
+      We're switching to Discord. Join the fun: https://documen.so/discord
-        - Archive channels: `#code-review` `#how-to` `#meet-and-greet` `#random-memes` `#self-hosting` `#support`
+      ```
+    - Archive channels: `#code-review` `#how-to` `#meet-and-greet` `#random-memes` `#self-hosting` `#support`
 
 - 2023-08-09 `t+15`: 7 days later, we send a reminder on Slack.
-    - **Slack**
-        - Schedule reminder in `#general`
 
-            ```
+  - **Slack**
-            Friendly reminder: we're switching to Discord and will soon disconnect this Slack workspace.
 
-            Join the fun! https://documen.so/discord
+    - Schedule reminder in `#general`
-            ```
+
+      ```
+      Friendly reminder: we're switching to Discord and will soon disconnect this Slack workspace.
+
+      Join the fun! https://documen.so/discord
+      ```
 
 - 2023-08-16 `t+22`: 15 days later, we’re making the final edits to the Slack workspace.
-    - **Slack**
+  - **Slack**
-        - [Edit posting permissions](https://app.slack.com/slackhelp/en-US/360004635551) in `#general`
+    - [Edit posting permissions](https://app.slack.com/slackhelp/en-US/360004635551) in `#general`
-        - Disconnect Slack
+    - Disconnect Slack
 
 ## Final thoughts
 
 - We’re at the very, early stage on our journey to building a beautiful, open-source DocuSign alternative. We want to build a great developer experience with the open-source community and, switching to Discord, we want to set up the foundations of an open, safe place for community members to get in touch, brainstorm ideas, and have fun.
-- It doesn’t mean we won’t ever switch back to Slack. The tools of today aren’t the ones of tomorrow. We don’t delete the Slack workspace, we archive it, and keep the `documenso` handle. May it be just an *au revoir?*
+- It doesn’t mean we won’t ever switch back to Slack. The tools of today aren’t the ones of tomorrow. We don’t delete the Slack workspace, we archive it, and keep the `documenso` handle. May it be just an _au revoir?_
 - For now, we’re pushing forward and are eager to welcome you on Discord. Make sure to [join the server](https://documen.so/discord) in order to keep up to date on all things Documenso. See you there!

apps/marketing/next.config.js

@@ -14,6 +14,7 @@ ENV_FILES.forEach((file) => {
 const config = {
   experimental: {
     serverActionsBodySizeLimit: '10mb',
+    outputFileTracingRoot: path.join(__dirname, '../../'),
   },
   reactStrictMode: true,
   transpilePackages: ['@documenso/lib', '@documenso/prisma', '@documenso/trpc', '@documenso/ui'],

apps/marketing/src/app/(marketing)/blog/[post]/opengraph-image.tsx

@@ -4,13 +4,13 @@ import { allBlogPosts } from 'contentlayer/generated';
 
 export const runtime = 'edge';
 
-export const size = {
+export const contentType = 'image/png';
+
+export const IMAGE_SIZE = {
   width: 1200,
   height: 630,
 };
 
-export const contentType = 'image/png';
-
 type BlogPostOpenGraphImageProps = {
   params: { post: string };
 };
@@ -25,16 +25,16 @@ export default async function BlogPostOpenGraphImage({ params }: BlogPostOpenGra
   // The long urls are needed for a compiler optimisation on the Next.js side, lifting this up
   // to a constant will break og image generation.
   const [interBold, interRegular, backgroundImage, logoImage] = await Promise.all([
-    fetch(new URL('./../../../../assets/inter-bold.ttf', import.meta.url)).then(async (res) =>
+    fetch(new URL('@documenso/assets/fonts/inter-bold.ttf', import.meta.url)).then(async (res) =>
       res.arrayBuffer(),
     ),
-    fetch(new URL('./../../../../assets/inter-regular.ttf', import.meta.url)).then(async (res) =>
+    fetch(new URL('@documenso/assets/fonts/inter-regular.ttf', import.meta.url)).then(async (res) =>
       res.arrayBuffer(),
     ),
-    fetch(new URL('./../../../../assets/background-blog-og.png', import.meta.url)).then(
+    fetch(new URL('@documenso/assets/images/background-blog-og.png', import.meta.url)).then(
       async (res) => res.arrayBuffer(),
     ),
-    fetch(new URL('./../../../../../public/logo.png', import.meta.url)).then(async (res) =>
+    fetch(new URL('@documenso/assets/logo.png', import.meta.url)).then(async (res) =>
       res.arrayBuffer(),
     ),
   ]);
@@ -56,7 +56,7 @@ export default async function BlogPostOpenGraphImage({ params }: BlogPostOpenGra
       </div>
     ),
     {
-      ...size,
+      ...IMAGE_SIZE,
       fonts: [
         {
           name: 'Inter',

apps/marketing/src/app/(marketing)/oss-friends/page.tsx

@@ -2,7 +2,7 @@ import Image from 'next/image';
 
 import { z } from 'zod';
 
-import backgroundPattern from '~/assets/background-pattern.png';
+import backgroundPattern from '@documenso/assets/images/background-pattern.png';
 
 import { OSSFriendsContainer } from './container';
 import { TOSSFriendsSchema, ZOSSFriendsSchema } from './schema';

apps/marketing/src/app/not-found.tsx

@@ -7,11 +7,10 @@ import { useRouter } from 'next/navigation';
 import { motion } from 'framer-motion';
 import { ChevronLeft } from 'lucide-react';
 
+import backgroundPattern from '@documenso/assets/images/background-pattern.png';
 import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
 
-import backgroundPattern from '~/assets/background-pattern.png';
-
 export default function NotFound() {
   const router = useRouter();
 

apps/marketing/src/components/(marketing)/faster-smarter-beautiful-bento.tsx

@@ -2,14 +2,13 @@ import { HTMLAttributes } from 'react';
 
 import Image from 'next/image';
 
+import backgroundPattern from '@documenso/assets/images/background-pattern.png';
+import cardBeautifulFigure from '@documenso/assets/images/card-beautiful-figure.png';
+import cardFastFigure from '@documenso/assets/images/card-fast-figure.png';
+import cardSmartFigure from '@documenso/assets/images/card-smart-figure.png';
 import { cn } from '@documenso/ui/lib/utils';
 import { Card, CardContent } from '@documenso/ui/primitives/card';
 
-import backgroundPattern from '~/assets/background-pattern.png';
-import cardBeautifulFigure from '~/assets/card-beautiful-figure.png';
-import cardFastFigure from '~/assets/card-fast-figure.png';
-import cardSmartFigure from '~/assets/card-smart-figure.png';
-
 export type FasterSmarterBeautifulBentoProps = HTMLAttributes<HTMLDivElement>;
 
 export const FasterSmarterBeautifulBento = ({

apps/marketing/src/components/(marketing)/footer.tsx

@@ -11,6 +11,7 @@ import { FaXTwitter } from 'react-icons/fa6';
 import { LiaDiscord } from 'react-icons/lia';
 import { LuGithub } from 'react-icons/lu';
 
+import LogoImage from '@documenso/assets/logo.png';
 import { cn } from '@documenso/ui/lib/utils';
 
 export type FooterProps = HTMLAttributes<HTMLDivElement>;
@@ -42,7 +43,7 @@ export const Footer = ({ className, ...props }: FooterProps) => {
         <div>
           <Link href="/">
             <Image
-              src="/logo.png"
+              src={LogoImage}
               alt="Documenso Logo"
               className="dark:invert"
               width={170}

apps/marketing/src/components/(marketing)/header.tsx

@@ -5,6 +5,7 @@ import { HTMLAttributes, useState } from 'react';
 import Image from 'next/image';
 import Link from 'next/link';
 
+import LogoImage from '@documenso/assets/logo.png';
 import { useFeatureFlags } from '@documenso/lib/client-only/providers/feature-flag';
 import { cn } from '@documenso/ui/lib/utils';
 
@@ -25,7 +26,7 @@ export const Header = ({ className, ...props }: HeaderProps) => {
       <div className="flex items-center space-x-4">
         <Link href="/" className="z-10" onClick={() => setIsHamburgerMenuOpen(false)}>
           <Image
-            src="/logo.png"
+            src={LogoImage}
             alt="Documenso Logo"
             className="dark:invert"
             width={170}

apps/marketing/src/components/(marketing)/hero.tsx

@@ -8,12 +8,11 @@ import { usePlausible } from 'next-plausible';
 import { LuGithub } from 'react-icons/lu';
 import { match } from 'ts-pattern';
 
+import backgroundPattern from '@documenso/assets/images/background-pattern.png';
 import { useFeatureFlags } from '@documenso/lib/client-only/providers/feature-flag';
 import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
 
-import backgroundPattern from '~/assets/background-pattern.png';
-
 import { Widget } from './widget';
 
 export type HeroProps = {

apps/marketing/src/components/(marketing)/mobile-navigation.tsx

@@ -8,6 +8,7 @@ import { FaXTwitter } from 'react-icons/fa6';
 import { LiaDiscord } from 'react-icons/lia';
 import { LuGithub } from 'react-icons/lu';
 
+import LogoImage from '@documenso/assets/logo.png';
 import { Sheet, SheetContent } from '@documenso/ui/primitives/sheet';
 
 export type MobileNavigationProps = {
@@ -63,7 +64,7 @@ export const MobileNavigation = ({ isMenuOpen, onMenuOpenChange }: MobileNavigat
       <SheetContent className="w-full max-w-[400px]">
         <Link href="/" className="z-10" onClick={handleMenuItemClick}>
           <Image
-            src="/logo.png"
+            src={LogoImage}
             alt="Documenso Logo"
             className="dark:invert"
             width={170}

apps/marketing/src/components/(marketing)/open-build-template-bento.tsx

@@ -2,14 +2,13 @@ import { HTMLAttributes } from 'react';
 
 import Image from 'next/image';
 
+import backgroundPattern from '@documenso/assets/images/background-pattern.png';
+import cardBuildFigure from '@documenso/assets/images/card-build-figure.png';
+import cardOpenFigure from '@documenso/assets/images/card-open-figure.png';
+import cardTemplateFigure from '@documenso/assets/images/card-template-figure.png';
 import { cn } from '@documenso/ui/lib/utils';
 import { Card, CardContent } from '@documenso/ui/primitives/card';
 
-import backgroundPattern from '~/assets/background-pattern.png';
-import cardBuildFigure from '~/assets/card-build-figure.png';
-import cardOpenFigure from '~/assets/card-open-figure.png';
-import cardTemplateFigure from '~/assets/card-template-figure.png';
-
 export type OpenBuildTemplateBentoProps = HTMLAttributes<HTMLDivElement>;
 
 export const OpenBuildTemplateBento = ({ className, ...props }: OpenBuildTemplateBentoProps) => {

apps/marketing/src/components/(marketing)/share-connect-paid-widget-bento.tsx

@@ -2,15 +2,14 @@ import { HTMLAttributes } from 'react';
 
 import Image from 'next/image';
 
+import backgroundPattern from '@documenso/assets/images/background-pattern.png';
+import cardConnectionsFigure from '@documenso/assets/images/card-connections-figure.png';
+import cardPaidFigure from '@documenso/assets/images/card-paid-figure.png';
+import cardSharingFigure from '@documenso/assets/images/card-sharing-figure.png';
+import cardWidgetFigure from '@documenso/assets/images/card-widget-figure.png';
 import { cn } from '@documenso/ui/lib/utils';
 import { Card, CardContent } from '@documenso/ui/primitives/card';
 
-import backgroundPattern from '~/assets/background-pattern.png';
-import cardConnectionsFigure from '~/assets/card-connections-figure.png';
-import cardPaidFigure from '~/assets/card-paid-figure.png';
-import cardSharingFigure from '~/assets/card-sharing-figure.png';
-import cardWidgetFigure from '~/assets/card-widget-figure.png';
-
 export type ShareConnectPaidWidgetBentoProps = HTMLAttributes<HTMLDivElement>;
 
 export const ShareConnectPaidWidgetBento = ({

apps/marketing/src/components/(marketing)/single-player-mode/single-player-mode-success.tsx

@@ -4,6 +4,7 @@ import { useEffect, useState } from 'react';
 
 import Link from 'next/link';
 
+import signingCelebration from '@documenso/assets/images/signing-celebration.png';
 import { useFeatureFlags } from '@documenso/lib/client-only/providers/feature-flag';
 import { DocumentStatus, Signature } from '@documenso/prisma/client';
 import { DocumentWithRecipient } from '@documenso/prisma/types/document-with-recipient';
@@ -14,7 +15,6 @@ import { SigningCard3D } from '@documenso/ui/components/signing-card';
 import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
 
-import signingCelebration from '~/assets/signing-celebration.png';
 import { ConfettiScreen } from '~/components/(marketing)/confetti-screen';
 
 interface SinglePlayerModeSuccessProps {

apps/marketing/src/pages/api/stripe/webhook/index.ts

@@ -1,7 +1,6 @@
 import { NextApiRequest, NextApiResponse } from 'next';
 
 import { randomBytes } from 'crypto';
-import { readFileSync } from 'fs';
 import { buffer } from 'micro';
 
 import { insertImageInPDF } from '@documenso/lib/server-only/pdf/insert-image-in-pdf';
@@ -88,7 +87,11 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
 
       const now = new Date();
 
-      const bytes64 = readFileSync('./public/documenso-supporter-pledge.pdf').toString('base64');
+      const bytes64 = await fetch(
+        new URL('@documenso/assets/documenso-supporter-pledge.pdf', import.meta.url),
+      )
+        .then(async (res) => res.arrayBuffer())
+        .then((buffer) => Buffer.from(buffer).toString('base64'));
 
       const { id: documentDataId } = await prisma.documentData.create({
         data: {

apps/web/next.config.js

@@ -14,6 +14,7 @@ ENV_FILES.forEach((file) => {
 const config = {
   output: process.env.DOCKER_OUTPUT ? 'standalone' : undefined,
   experimental: {
+    outputFileTracingRoot: path.join(__dirname, '../../'),
     serverActionsBodySizeLimit: '50mb',
   },
   reactStrictMode: true,

apps/web/src/app/(share)/share/[slug]/opengraph/route.tsx

@@ -3,17 +3,17 @@ import { NextResponse } from 'next/server';
 
 import { P, match } from 'ts-pattern';
 
-import { getRecipientOrSenderByShareLinkSlug } from '@documenso/lib/server-only/share/get-recipient-or-sender-by-share-link-slug';
-
 import { Logo } from '~/components/branding/logo';
-import { getAssetBuffer } from '~/helpers/get-asset-buffer';
+import { ShareHandlerAPIResponse } from '~/pages/api/share';
+
+export const runtime = 'edge';
 
 const CARD_OFFSET_TOP = 152;
 const CARD_OFFSET_LEFT = 350;
 const CARD_WIDTH = 500;
 const CARD_HEIGHT = 250;
 
-const size = {
+const IMAGE_SIZE = {
   width: 1200,
   height: 630,
 };
@@ -24,15 +24,27 @@ type SharePageOpenGraphImageProps = {
 
 export async function GET(_request: Request, { params: { slug } }: SharePageOpenGraphImageProps) {
   const [interSemiBold, interRegular, caveatRegular, shareFrameImage] = await Promise.all([
-    getAssetBuffer('/fonts/inter-semibold.ttf'),
+    fetch(new URL('@documenso/assets/fonts/inter-semibold.ttf', import.meta.url)).then(
-    getAssetBuffer('/fonts/inter-regular.ttf'),
+      async (res) => res.arrayBuffer(),
-    getAssetBuffer('/fonts/caveat-regular.ttf'),
+    ),
-    getAssetBuffer('/static/og-share-frame.png'),
+    fetch(new URL('@documenso/assets/fonts/inter-regular.ttf', import.meta.url)).then(async (res) =>
+      res.arrayBuffer(),
+    ),
+    fetch(new URL('@documenso/assets/fonts/caveat-regular.ttf', import.meta.url)).then(
+      async (res) => res.arrayBuffer(),
+    ),
+    fetch(new URL('@documenso/assets/static/og-share-frame.png', import.meta.url)).then(
+      async (res) => res.arrayBuffer(),
+    ),
   ]);
 
-  const recipientOrSender = await getRecipientOrSenderByShareLinkSlug({ slug }).catch(() => null);
+  const baseUrl = process.env.NEXT_PUBLIC_WEBAPP_URL || 'http://localhost:3000';
 
-  if (!recipientOrSender) {
+  const recipientOrSender: ShareHandlerAPIResponse = await fetch(
+    new URL(`/api/share?slug=${slug}`, baseUrl),
+  ).then(async (res) => res.json());
+
+  if ('error' in recipientOrSender) {
     return NextResponse.json({ error: 'Not found' }, { status: 404 });
   }
 
@@ -96,18 +108,6 @@ export async function GET(_request: Request, { params: { slug } }: SharePageOpen
           </p>
         )}
 
-        {/* <div
-          tw="absolute flex items-center justify-center text-slate-500"
-          style={{
-            top: `${CARD_OFFSET_TOP + CARD_HEIGHT - 45}px`,
-            left: `${CARD_OFFSET_LEFT}`,
-            width: `${CARD_WIDTH}px`,
-            fontSize: '30px',
-          }}
-        >
-          {signatureName}
-        </div> */}
-
         <div
           tw="absolute flex flex-col items-center justify-center pt-12 w-full"
           style={{
@@ -129,7 +129,7 @@ export async function GET(_request: Request, { params: { slug } }: SharePageOpen
       </div>
     ),
     {
-      ...size,
+      ...IMAGE_SIZE,
       fonts: [
         {
           name: 'Caveat',

apps/web/src/app/(signing)/sign/[token]/complete/page.tsx

@@ -4,6 +4,7 @@ import { notFound } from 'next/navigation';
 import { CheckCircle2, Clock8 } from 'lucide-react';
 import { match } from 'ts-pattern';
 
+import signingCelebration from '@documenso/assets/images/signing-celebration.png';
 import { getDocumentAndSenderByToken } from '@documenso/lib/server-only/document/get-document-by-token';
 import { getFieldsForToken } from '@documenso/lib/server-only/field/get-fields-for-token';
 import { getRecipientByToken } from '@documenso/lib/server-only/recipient/get-recipient-by-token';
@@ -13,8 +14,6 @@ import { DocumentDownloadButton } from '@documenso/ui/components/document/docume
 import { DocumentShareButton } from '@documenso/ui/components/document/document-share-button';
 import { SigningCard3D } from '@documenso/ui/components/signing-card';
 
-import signingCelebration from '~/assets/signing-celebration.png';
-
 export type CompletedSigningPageProps = {
   params: {
     token?: string;

apps/web/src/app/(unauthenticated)/layout.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import Image from 'next/image';
 
-import backgroundPattern from '~/assets/background-pattern.png';
+import backgroundPattern from '@documenso/assets/images/background-pattern.png';
 
 type UnauthenticatedLayoutProps = {
   children: React.ReactNode;

apps/web/src/components/partials/not-found.tsx

@@ -6,11 +6,10 @@ import { useRouter } from 'next/navigation';
 import { motion } from 'framer-motion';
 import { ChevronLeft } from 'lucide-react';
 
+import backgroundPattern from '@documenso/assets/images/background-pattern.png';
 import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
 
-import backgroundPattern from '~/assets/background-pattern.png';
-
 export type NotFoundPartialProps = {
   children?: React.ReactNode;
 };

apps/web/src/pages/api/share/index.ts

@@ -0,0 +1,23 @@
+import type { NextApiRequest, NextApiResponse } from 'next';
+
+import { getRecipientOrSenderByShareLinkSlug } from '@documenso/lib/server-only/share/get-recipient-or-sender-by-share-link-slug';
+
+export type ShareHandlerAPIResponse =
+  | Awaited<ReturnType<typeof getRecipientOrSenderByShareLinkSlug>>
+  | { error: string };
+
+export default async function shareHandler(req: NextApiRequest, res: NextApiResponse) {
+  try {
+    if (typeof req.query.slug !== 'string') {
+      throw new Error('Invalid slug');
+    }
+
+    const data = await getRecipientOrSenderByShareLinkSlug({
+      slug: req.query.slug,
+    });
+
+    return res.json(data);
+  } catch (error) {
+    return res.status(404).json({ error: 'Not found' });
+  }
+}

package-lock.json

@@ -1685,6 +1685,10 @@
       "resolved": "packages/app-tests",
       "link": true
     },
+    "node_modules/@documenso/assets": {
+      "resolved": "packages/assets",
+      "link": true
+    },
     "node_modules/@documenso/ee": {
       "resolved": "packages/ee",
       "link": true
@@ -19351,6 +19355,10 @@
         "undici-types": "~5.25.1"
       }
     },
+    "packages/assets": {
+      "name": "@documenso/assets",
+      "version": "0.1.0"
+    },
     "packages/ee": {
       "name": "@documenso/ee",
       "version": "1.0.0",

packages/assets/package.json

@@ -0,0 +1,8 @@
+{
+  "name": "@documenso/assets",
+  "version": "0.1.0",
+  "private": true,
+  "files": [
+    "**/*"
+  ]
+}

packages/assets/site.webmanifest

@@ -0,0 +1,19 @@
+{
+  "name": "Documenso",
+  "short_name": "Documenso",
+  "icons": [
+    {
+      "src": "/android-chrome-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "/android-chrome-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ],
+  "theme_color": "#A2E771",
+  "background_color": "#FFFFFF",
+  "display": "standalone"
+}

packages/ee/server-only/stripe/webhook/on-early-adopters-checkout.ts

@@ -71,7 +71,7 @@ export const onEarlyAdoptersCheckout = async ({ session }: OnEarlyAdoptersChecko
     const signatureDataUrl = await redis.get<string>(`signature:${session.client_reference_id}`);
 
     const documentBuffer = await fetch(
-      `${process.env.NEXT_PUBLIC_WEBAPP_URL}/documenso-supporter-pledge.pdf`,
+      new URL('@documenso/assets/documenso-supporter-pledge.pdf', import.meta.url),
     ).then(async (res) => res.arrayBuffer());
 
     const { id: documentDataId } = await putFile({

packages/lib/server-only/share/get-recipient-or-sender-by-share-link-slug.ts

@@ -32,6 +32,11 @@ export const getRecipientOrSenderByShareLinkSlug = async ({
       Document: { some: { id: documentId } },
       email,
     },
+    select: {
+      email: true,
+      name: true,
+      signature: true,
+    },
   });
 
   if (sender) {