Ryan/documenso
1
0
Fork 1
mirror of https://github.com/documenso/documenso.git synced 2025-11-19 19:21:39 +10:00
Code Issues Packages Projects Releases Wiki Activity

fix: minimal vite config

Browse Source
This commit is contained in:
David Nguyen
2025-02-07 16:33:30 +11:00
parent 8373af3f41
commit d3392dada7
17 changed files with 683 additions and 1394 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
apps/remix/app/entry.client.tsx
View File

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

11
apps/remix/app/providers/plausible.tsx
View File

@ -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>;
};

0
apps/remix/app/routes/_authenticated+/admin+/documents.tsx → apps/remix/app/routes/_authenticated+/admin+/documents._index.tsx
View File

0
apps/remix/app/routes/_authenticated+/admin+/users.tsx → apps/remix/app/routes/_authenticated+/admin+/users._index.tsx
View File

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

@ -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);

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

@ -1,6 +1,6 @@
// Todo: This relies on NextJS
import { ImageResponse } from 'next/og';
// Todo: Test, used AI to migrate this component from NextJS to Remix.
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,65 +63,100 @@ export const loader = async ({ params }: Route.LoaderArgs) => {
return sender.name || sender.email;
});
return new ImageResponse(
(
<div tw="relative flex h-full w-full bg-white">
{/* @ts-expect-error Lack of typing from ImageResponse */}
<img src={shareFrameImage} alt="og-share-frame" tw="absolute inset-0 w-full h-full" />
{signatureImage ? (
<div
tw="absolute py-6 px-12 flex items-center justify-center text-center"
style={{
top: `${CARD_OFFSET_TOP}px`,
left: `${CARD_OFFSET_LEFT}px`,
width: `${CARD_WIDTH}px`,
height: `${CARD_HEIGHT}px`,
}}
>
<img src={signatureImage} alt="signature" tw="opacity-60 h-full max-w-[100%]" />
</div>
) : (
<p
tw="absolute py-6 px-12 -mt-2 flex items-center justify-center text-center text-slate-500"
style={{
fontFamily: 'Caveat',
fontSize: `${Math.max(
Math.min((CARD_WIDTH * 1.5) / signatureName.length, 80),
36,
)}px`,
top: `${CARD_OFFSET_TOP}px`,
left: `${CARD_OFFSET_LEFT}px`,
width: `${CARD_WIDTH}px`,
height: `${CARD_HEIGHT}px`,
}}
>
{signatureName}
</p>
)}
// Generate SVG using Satori
const svg = await satori(
<div
style={{
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 flex w-full"
style={{
top: `${CARD_OFFSET_TOP - 78}px`,
left: `${CARD_OFFSET_LEFT}px`,
position: 'absolute',
padding: '24px 48px',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
textAlign: 'center',
top: CARD_OFFSET_TOP,
left: CARD_OFFSET_LEFT,
width: CARD_WIDTH,
height: CARD_HEIGHT,
}}
>
<h2
tw="text-xl"
<img
src={signatureImage}
alt="signature"
style={{
color: '#828282',
fontFamily: 'Inter',
fontWeight: 700,
opacity: 0.6,
height: '100%',
maxWidth: '100%',
}}
>
{isRecipient ? 'Document Signed!' : 'Document Sent!'}
</h2>
/>
</div>
) : (
<p
style={{
position: 'absolute',
padding: '24px 48px',
marginTop: '-8px',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
textAlign: 'center',
color: '#64748b',
fontFamily: 'Caveat',
fontSize: Math.max(Math.min((CARD_WIDTH * 1.5) / signatureName.length, 80), 36),
top: CARD_OFFSET_TOP,
left: CARD_OFFSET_LEFT,
width: CARD_WIDTH,
height: CARD_HEIGHT,
}}
>
{signatureName}
</p>
)}
<div
style={{
position: 'absolute',
display: 'flex',
width: '100%',
top: CARD_OFFSET_TOP - 78,
left: CARD_OFFSET_LEFT,
}}
>
<h2
style={{
fontSize: '20px',
color: '#828282',
fontFamily: 'Inter',
fontWeight: 700,
}}
>
{isRecipient ? 'Document Signed!' : 'Document Sent!'}
</h2>
</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,
},
],
headers: {
'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Methods': 'GET, OPTIONS',
},
},
);
// 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',
},
});
};

14
apps/remix/package.json
View File

@ -3,9 +3,8 @@
"private": true,
"type": "module",
"scripts": {
"build": "cross-env NODE_ENV=production bunx --bun vite build",
"dev": "bunx --bun vite",
"dev:node": "react-router dev",
"build": "cross-env NODE_ENV=production react-router build",
"dev": "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/detect-locale": "^4.11.1",
"@lingui/macro": "^4.11.3",
"@lingui/react": "^4.11.3",
"@lingui/core": "^5.2.0",
"@lingui/detect-locale": "^5.2.0",
"@lingui/macro": "^5.2.0",
"@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",

3
apps/remix/server/main.ts
View File

@ -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 });

26
apps/remix/server/utils/get-loader-session.ts
View File

@ -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.
*/

75
apps/remix/vite.config.ts
View File

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