QT/bigcapital
1
0
Fork 0
mirror of https://github.com/bigcapitalhq/bigcapital.git synced 2026-02-16 21:00:31 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: add style to SSR invoice paper template

Browse Source
This commit is contained in:
Ahmed Bouhuolia
2024-11-05 17:09:47 +02:00
parent 22ea557337
commit d23f33bae4
9 changed files with 131 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
shared/pdf-templates/src/renders/render-invoice-paper-template.tsx
View File

@@ -1,36 +1,21 @@
import { renderToString } from 'react-dom/server';
import createCache from '@emotion/cache';
import { css } from '@emotion/css';
import {
InvoicePaperTemplate,
InvoicePaperTemplateProps,
} from '../components/InvoicePaperTemplate';
import { PaperTemplateLayout } from '../components/PaperTemplateLayout';
import { extractCritical } from '@emotion/server';
import { OpenSansFontLink } from '../constants';
import { renderSSR } from './render-ssr';
export const renderInvoicePaperTemplateHtml = (
props: InvoicePaperTemplateProps
) => {
const key = 'invoice-paper-template';
const cache = createCache({ key });
const renderedHtml = renderToString(
<PaperTemplateLayout cache={cache}>
<InvoicePaperTemplate {...props} />
</PaperTemplateLayout>
return renderSSR(
<InvoicePaperTemplate
{...props}
/>
);
const { html, css, ids } = 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>
<style data-emotion="${key} ${ids.join(' ')}">${css}</style>
</head>
<body>
<div id="root">${html}</div>
</body>
</html>`;
};

31
shared/pdf-templates/src/renders/render-ssr.tsx Normal file
View File

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