fix: minimal vite config

apps/remix/app/entry.client.tsx

@@ -25,4 +25,5 @@ async function main() {
   });
 }
 
-void main();
+// eslint-disable-next-line @typescript-eslint/no-floating-promises
+main();

apps/remix/app/providers/plausible.tsx

@@ -1,11 +0,0 @@
-import React from 'react';
-
-import NextPlausibleProvider from 'next-plausible';
-
-export type PlausibleProviderProps = {
-  children: React.ReactNode;
-};
-
-export const PlausibleProvider = ({ children }: PlausibleProviderProps) => {
-  return <NextPlausibleProvider domain="documenso.com">{children}</NextPlausibleProvider>;
-};

apps/remix/app/routes/_recipient+/sign.$token+/_index.tsx

@@ -2,7 +2,7 @@ import { Trans } from '@lingui/macro';
 import { DocumentStatus, SigningStatus } from '@prisma/client';
 import { Clock8 } from 'lucide-react';
 import { Link, redirect } from 'react-router';
-import { getOptionalLoaderSession } from 'server/utils/get-loader-session';
+import { getOptionalLoaderContext } from 'server/utils/get-loader-session';
 
 import signingCelebration from '@documenso/assets/images/signing-celebration.png';
 import { useOptionalSession } from '@documenso/lib/client-only/providers/session';
@@ -27,7 +27,7 @@ import { superLoaderJson, useSuperLoaderData } from '~/utils/super-json-loader';
 import type { Route } from './+types/_index';
 
 export async function loader({ params }: Route.LoaderArgs) {
-  const session = getOptionalLoaderSession();
+  const { session, requestMetadata } = getOptionalLoaderContext();
 
   const { token } = params;
 
@@ -91,7 +91,7 @@ export async function loader({ params }: Route.LoaderArgs) {
 
   await viewedDocument({
     token,
-    requestMetadata: context.requestMetadata,
+    requestMetadata,
     recipientAccessAuth: derivedRecipientAccessAuth,
   }).catch(() => null);
 

apps/remix/app/routes/_unauthenticated+/share.$slug.opengraph.tsx

@@ -1,6 +1,6 @@
-// Todo: This relies on NextJS
+// Todo: Test, used AI to migrate this component from NextJS to Remix.
-import { ImageResponse } from 'next/og';
+import satori from 'satori';
-
+import sharp from 'sharp';
 import { P, match } from 'ts-pattern';
 
 import { NEXT_PUBLIC_WEBAPP_URL } from '@documenso/lib/constants/app';
@@ -25,7 +25,7 @@ export const loader = async ({ params }: Route.LoaderArgs) => {
 
   const baseUrl = NEXT_PUBLIC_WEBAPP_URL();
 
-  const [interSemiBold, interRegular, caveatRegular, shareFrameImage] = await Promise.all([
+  const [interSemiBold, interRegular, caveatRegular] = await Promise.all([
     fetch(new URL(`${baseUrl}/fonts/inter-semibold.ttf`, import.meta.url)).then(async (res) =>
       res.arrayBuffer(),
     ),
@@ -35,9 +35,6 @@ export const loader = async ({ params }: Route.LoaderArgs) => {
     fetch(new URL(`${baseUrl}/fonts/caveat-regular.ttf`, import.meta.url)).then(async (res) =>
       res.arrayBuffer(),
     ),
-    fetch(new URL(`${baseUrl}/static/og-share-frame2.png`, import.meta.url)).then(async (res) =>
-      res.arrayBuffer(),
-    ),
   ]);
 
   const recipientOrSender: ShareHandlerAPIResponse = await fetch(
@@ -66,37 +63,70 @@ export const loader = async ({ params }: Route.LoaderArgs) => {
       return sender.name || sender.email;
     });
 
-  return new ImageResponse(
+  // Generate SVG using Satori
-    (
+  const svg = await satori(
-      <div tw="relative flex h-full w-full bg-white">
+    <div
-        {/* @ts-expect-error Lack of typing from ImageResponse */}
+      style={{
-        <img src={shareFrameImage} alt="og-share-frame" tw="absolute inset-0 w-full h-full" />
+        display: 'flex',
+        height: '100%',
+        width: '100%',
+        backgroundColor: 'white',
+        position: 'relative',
+      }}
+    >
+      <img
+        src={`${baseUrl}/static/og-share-frame2.png`}
+        alt="og-share-frame"
+        style={{
+          position: 'absolute',
+          inset: 0,
+          width: '100%',
+          height: '100%',
+        }}
+      />
 
       {signatureImage ? (
         <div
-            tw="absolute py-6 px-12 flex items-center justify-center text-center"
           style={{
-              top: `${CARD_OFFSET_TOP}px`,
+            position: 'absolute',
-              left: `${CARD_OFFSET_LEFT}px`,
+            padding: '24px 48px',
-              width: `${CARD_WIDTH}px`,
+            display: 'flex',
-              height: `${CARD_HEIGHT}px`,
+            alignItems: 'center',
+            justifyContent: 'center',
+            textAlign: 'center',
+            top: CARD_OFFSET_TOP,
+            left: CARD_OFFSET_LEFT,
+            width: CARD_WIDTH,
+            height: CARD_HEIGHT,
           }}
         >
-            <img src={signatureImage} alt="signature" tw="opacity-60 h-full max-w-[100%]" />
+          <img
+            src={signatureImage}
+            alt="signature"
+            style={{
+              opacity: 0.6,
+              height: '100%',
+              maxWidth: '100%',
+            }}
+          />
         </div>
       ) : (
         <p
-            tw="absolute py-6 px-12 -mt-2 flex items-center justify-center text-center text-slate-500"
           style={{
+            position: 'absolute',
+            padding: '24px 48px',
+            marginTop: '-8px',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            textAlign: 'center',
+            color: '#64748b',
             fontFamily: 'Caveat',
-              fontSize: `${Math.max(
+            fontSize: Math.max(Math.min((CARD_WIDTH * 1.5) / signatureName.length, 80), 36),
-                Math.min((CARD_WIDTH * 1.5) / signatureName.length, 80),
+            top: CARD_OFFSET_TOP,
-                36,
+            left: CARD_OFFSET_LEFT,
-              )}px`,
+            width: CARD_WIDTH,
-              top: `${CARD_OFFSET_TOP}px`,
+            height: CARD_HEIGHT,
-              left: `${CARD_OFFSET_LEFT}px`,
-              width: `${CARD_WIDTH}px`,
-              height: `${CARD_HEIGHT}px`,
           }}
         >
           {signatureName}
@@ -104,15 +134,17 @@ export const loader = async ({ params }: Route.LoaderArgs) => {
       )}
 
       <div
-          tw="absolute flex w-full"
         style={{
-            top: `${CARD_OFFSET_TOP - 78}px`,
+          position: 'absolute',
-            left: `${CARD_OFFSET_LEFT}px`,
+          display: 'flex',
+          width: '100%',
+          top: CARD_OFFSET_TOP - 78,
+          left: CARD_OFFSET_LEFT,
         }}
       >
         <h2
-            tw="text-xl"
           style={{
+            fontSize: '20px',
             color: '#828282',
             fontFamily: 'Inter',
             fontWeight: 700,
@@ -121,10 +153,10 @@ export const loader = async ({ params }: Route.LoaderArgs) => {
           {isRecipient ? 'Document Signed!' : 'Document Sent!'}
         </h2>
       </div>
-      </div>
+    </div>,
-    ),
     {
-      ...IMAGE_SIZE,
+      width: IMAGE_SIZE.width,
+      height: IMAGE_SIZE.height,
       fonts: [
         {
           name: 'Caveat',
@@ -134,20 +166,27 @@ export const loader = async ({ params }: Route.LoaderArgs) => {
         {
           name: 'Inter',
           data: interRegular,
-          style: 'normal',
           weight: 400,
         },
         {
           name: 'Inter',
           data: interSemiBold,
-          style: 'normal',
           weight: 600,
         },
       ],
+    },
+  );
+
+  // Convert SVG to PNG using sharp
+  const pngBuffer = await sharp(Buffer.from(svg)).toFormat('png').toBuffer();
+
+  return new Response(pngBuffer, {
     headers: {
+      'Content-Type': 'image/png',
+      'Content-Length': pngBuffer.length.toString(),
+      'Cache-Control': 'public, max-age=31536000, immutable',
       'Access-Control-Allow-Origin': '*',
       'Access-Control-Allow-Methods': 'GET, OPTIONS',
     },
-    },
+  });
-  );
 };

apps/remix/package.json

@@ -3,9 +3,8 @@
   "private": true,
   "type": "module",
   "scripts": {
-    "build": "cross-env NODE_ENV=production bunx --bun vite build",
+    "build": "cross-env NODE_ENV=production react-router build",
-    "dev": "bunx --bun vite",
+    "dev": "react-router dev",
-    "dev:node": "react-router dev",
     "start": "cross-env NODE_ENV=production node dist/server/index.js",
     "clean": "rimraf .react-router && rimraf node_modules",
     "typecheck": "react-router typegen && tsc",
@@ -26,10 +25,10 @@
     "@hono/trpc-server": "^0.3.4",
     "@hono/zod-validator": "^0.4.2",
     "@hookform/resolvers": "^3.1.0",
-    "@lingui/core": "^4.11.3",
+    "@lingui/core": "^5.2.0",
-    "@lingui/detect-locale": "^4.11.1",
+    "@lingui/detect-locale": "^5.2.0",
-    "@lingui/macro": "^4.11.3",
+    "@lingui/macro": "^5.2.0",
-    "@lingui/react": "^4.11.3",
+    "@lingui/react": "^5.2.0",
     "@oslojs/crypto": "^1.0.1",
     "@oslojs/encoding": "^1.1.0",
     "@react-router/node": "^7.1.5",
@@ -62,6 +61,7 @@
     "recharts": "^2.7.2",
     "remeda": "^2.17.3",
     "remix-themes": "^2.0.4",
+    "satori": "^0.12.1",
     "sharp": "0.32.6",
     "tailwindcss": "^3.4.15",
     "ts-pattern": "^5.0.5",

apps/remix/server/main.ts

@@ -5,7 +5,6 @@ import handle from 'hono-react-router-adapter/node';
 
 import server from '.';
 import * as build from '../build/server';
-import { getLoadContext } from './load-context';
 
 server.use(
   serveStatic({
@@ -13,6 +12,6 @@ server.use(
   }),
 );
 
-const handler = handle(build, server, { getLoadContext });
+const handler = handle(build, server);
 
 serve({ fetch: handler.fetch, port: 3000 });

apps/remix/server/utils/get-loader-session.ts

@@ -1,9 +1,30 @@
 import { getContext } from 'hono/context-storage';
 import { redirect } from 'react-router';
 import type { HonoEnv } from 'server';
+import type { AppContext } from 'server/context';
 
 import type { AppSession } from '@documenso/lib/client-only/providers/session';
 
+/**
+ * Get the full context passed to the loader.
+ *
+ * @returns The full app context.
+ */
+export const getOptionalLoaderContext = (): AppContext => {
+  const { context } = getContext<HonoEnv>().var;
+  return context;
+};
+
+/**
+ * Returns the session extracted from the app context.
+ *
+ * @returns The session, or null if not authenticated.
+ */
+export const getOptionalLoaderSession = (): AppSession | null => {
+  const { context } = getContext<HonoEnv>().var;
+  return context.session;
+};
+
 /**
  * Returns the session context or throws a redirect to signin if it is not present.
  */
@@ -17,11 +38,6 @@ export const getLoaderSession = (): AppSession => {
   return session;
 };
 
-export const getOptionalLoaderSession = (): AppSession | null => {
-  const { context } = getContext<HonoEnv>().var;
-  return context.session;
-};
-
 /**
  * Returns the team session context or throws a redirect to signin if it is not present.
  */

apps/remix/vite.config.ts

@@ -22,18 +22,41 @@ export default defineConfig({
       plugins: [tailwindcss, autoprefixer],
     },
   },
+  server: {
+    port: 3000,
+    strictPort: true,
+  },
+  plugins: [
+    reactRouter(),
+    macrosPlugin(),
+    lingui(),
+    tsconfigPaths(),
+    serverAdapter({
+      entry: 'server/index.ts',
+    }),
+  ],
   ssr: {
-    noExternal: [
+    noExternal: ['react-dropzone', 'plausible-tracker', 'pdfjs-dist'],
-      'react-dropzone',
+    external: ['@node-rs/bcrypt'],
-      'recharts',
+  },
-      'superjson',
+  optimizeDeps: {
-      // '@node-rs/bcrypt-wasm32-wasi',
+    exclude: ['@node-rs/bcrypt'],
-      // '@noble/ciphers/chacha',
+  },
-      // '@noble/ciphers/utils',
+  /**
-      // '@noble/ciphers/webcrypto/utils',
+   * Throwing shit at a wall to see what sticks for building below onwards.
-      // '@noble/hashes/sha256a',
+   */
-      // '@node-rs/bcrypt',
+  // resolve: {
-      // 'crypto',
+  //   alias: {
+  //     // https: 'node:https',
+  //     // '.prisma/client/default': '../../node_modules/.prisma/client/default.js',
+  //   },
+  // },
+  // optimizeDeps: {
+  //   include: [],
+  // },
+  // ssr: {
+  //   // noExternal: true,
+  //   noExternal: [
   //     '@documenso/assets',
   //     '@documenso/ee',
   //     '@documenso/lib',
@@ -41,31 +64,17 @@ export default defineConfig({
   //     '@documenso/tailwind-config',
   //     '@documenso/trpc',
   //     '@documenso/ui',
-    ],
+  //   ],
-  },
+  // },
-  server: {
+  // build: {
-    port: 3000,
+  //   rollupOptions: {
-    strictPort: true,
+  //     external: [
-  },
+  //       '@node-rs/bcrypt',
-  plugins: [
+  //       '@documenso/pdf-sign',
-    reactRouter(),
+  //       'nodemailer',
-    lingui(),
+  //       'playwright',
-    macrosPlugin(),
+  //       '@aws-sdk/cloudfront-signer',
-    serverAdapter({
+  //     ],
-      entry: 'server/index.ts',
+  //   },
-    }),
+  // },
-    tsconfigPaths(),
-  ],
-  optimizeDeps: {
-    exclude: ['superjson'],
-    // force: true,
-  },
-  build: {
-    commonjsOptions: {
-      include: ['superjson'],
-    },
-    rollupOptions: {
-      external: ['@node-rs/bcrypt'],
-    },
-  },
 });

lingui.config.ts

@@ -9,7 +9,7 @@ const config: LinguiConfig = {
   catalogs: [
     {
       path: '<rootDir>/packages/lib/translations/{locale}/web',
-      include: ['apps/web/src', 'packages/ui', 'packages/lib', 'packages/email'],
+      include: ['apps/remix/src', 'packages/ui', 'packages/lib', 'packages/email'],
       exclude: ['**/node_modules/**'],
     },
   ],

package.json

@@ -43,7 +43,7 @@
   "devDependencies": {
     "@commitlint/cli": "^17.7.1",
     "@commitlint/config-conventional": "^17.7.0",
-    "@lingui/cli": "^4.11.3",
+    "@lingui/cli": "^5.2.0",
     "@trigger.dev/cli": "^2.3.18",
     "dotenv": "^16.3.1",
     "dotenv-cli": "^7.3.0",
@@ -65,7 +65,8 @@
   "dependencies": {
     "@documenso/pdf-sign": "^0.1.0",
     "@documenso/prisma": "^0.0.0",
-    "@lingui/core": "^4.11.3",
+    "@lingui/conf": "^5.2.0",
+    "@lingui/core": "^5.2.0",
     "inngest-cli": "^0.29.1",
     "luxon": "^3.5.0",
     "mupdf": "^1.0.0",

packages/email/package.json

@@ -35,6 +35,8 @@
     "@react-email/section": "0.0.10",
     "@react-email/tailwind": "0.0.9",
     "@react-email/text": "0.0.6",
+    "@lingui/macro": "^5.2.0",
+    "@lingui/react": "^5.2.0",
     "nodemailer": "^6.9.9",
     "react-email": "^1.9.5",
     "resend": "^2.0.0"

packages/lib/package.json

@@ -25,9 +25,9 @@
     "@documenso/prisma": "*",
     "@documenso/signing": "*",
     "@honeybadger-io/js": "^6.10.1",
-    "@lingui/core": "^4.11.3",
+    "@lingui/core": "^5.2.0",
-    "@lingui/macro": "^4.11.3",
+    "@lingui/macro": "^5.2.0",
-    "@lingui/react": "^4.11.3",
+    "@lingui/react": "^5.2.0",
     "@noble/ciphers": "0.4.0",
     "@noble/hashes": "1.3.2",
     "@node-rs/bcrypt": "^1.10.0",

packages/lib/server-only/pdf/insert-field-in-pdf.ts

@@ -5,6 +5,9 @@ import type { PDFDocument } from 'pdf-lib';
 import { RotationTypes, degrees, radiansToDegrees } from 'pdf-lib';
 import { P, match } from 'ts-pattern';
 
+// Todo: Check if this is okay to do compared to the old approach.
+import fontCaveat from '@documenso/assets/fonts/caveat.ttf?inline';
+import fontNoto from '@documenso/assets/fonts/noto-sans.ttf?inline';
 import {
   DEFAULT_HANDWRITING_FONT_SIZE,
   DEFAULT_STANDARD_FONT_SIZE,
@@ -25,20 +28,8 @@ import {
   ZRadioFieldMeta,
   ZTextFieldMeta,
 } from '../../types/field-meta';
-import { env } from '../../utils/env';
 
 export const insertFieldInPDF = async (pdf: PDFDocument, field: FieldWithSignature) => {
-  const fontCaveatUri = env('FONT_CAVEAT_URI');
-  const fontNotoSansUri = env('FONT_NOTO_SANS_URI');
-
-  if (!fontCaveatUri || !fontNotoSansUri) {
-    throw new Error('Missing font URI');
-  }
-
-  const fontCaveat = await fetch(fontCaveatUri).then(async (res) => res.arrayBuffer());
-
-  const fontNoto = await fetch(fontNotoSansUri).then(async (res) => res.arrayBuffer());
-
   const isSignatureField = isSignatureFieldType(field.type);
 
   pdf.registerFontkit(fontkit);

packages/ui/package.json

@@ -29,8 +29,8 @@
     "@documenso/lib": "*",
     "@hello-pangea/dnd": "^16.6.0",
     "@hookform/resolvers": "^3.3.0",
-    "@lingui/macro": "^4.11.3",
+    "@lingui/macro": "^5.2.0",
-    "@lingui/react": "^4.11.3",
+    "@lingui/react": "^5.2.0",
     "@radix-ui/react-accordion": "^1.1.1",
     "@radix-ui/react-alert-dialog": "^1.0.3",
     "@radix-ui/react-aspect-ratio": "^1.0.2",