feat: add style to SSR invoice paper template

2026-02-19 22:30:31 +00:00 · 2024-11-05 17:09:47 +02:00
parent 22ea557337
commit d23f33bae4
9 changed files with 131 additions and 61 deletions
--- a/shared/pdf-templates/src/renders/render-ssr.tsx
+++ b/shared/pdf-templates/src/renders/render-ssr.tsx
@@ -0,0 +1,31 @@
+import { renderToString } from 'react-dom/server';
+import createCache from '@emotion/cache';
+import { extractCritical } from '@emotion/server';
+import { OpenSansFontLink } from '../constants';
+import { PaperTemplateLayout } from '../components/PaperTemplateLayout';
+
+export const renderSSR = (children: React.ReactNode) => {
+  const key = 'invoice-paper-template';
+  const cache = createCache({ key });
+
+  const renderedHtml = renderToString(
+    <PaperTemplateLayout cache={cache}>{children}</PaperTemplateLayout>
+  );
+  const extractedHtml = extractCritical(renderedHtml);
+
+  return `<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Invoice</title>
+    ${OpenSansFontLink}
+    <style data-emotion="${key} ${extractedHtml.ids.join(' ')}">${extractedHtml.css
+    }</style>
+</head>
+<body>
+    <div id="root">${extractedHtml.html}</div>
+</body>
+</html>`;
+};