Upgrades to Fileforge's API

OnedocLabs · Sep 9, 2024 · e47c4b6 · e47c4b6
1 parent 7c39fc1
commit e47c4b6
Show file tree

Hide file tree

Showing 99 changed files with 125 additions and 129 deletions.
diff --git a/docgen/renderPreview.tsx b/docgen/renderPreview.tsx
@@ -1,18 +1,21 @@
 import { config } from "dotenv";
 
-import { Onedoc } from "@onedoc/client";
+import { FileforgeClient } from "@fileforge/client";
 import * as crypto from "crypto";
 import * as path from "path";
 import * as fs from "fs";
 import { fromBuffer } from "pdf2pic";
 import { glob } from "glob";
 import { compile, CompileOptions } from "../dist";
 import React from "react";
+import { pipeline } from "stream/promises";
 
 config({ path: ".env.local" });
 config();
 
-const onedoc = new Onedoc(process.env.ONEDOC_API_KEY!);
+const ff = new FileforgeClient({
+  apiKey: process.env.ONEDOC_API_KEY!,
+});
 
 export const baseCss = fs.readFileSync(path.join(__dirname, "./base.css"));
 export const indexCss = fs.readFileSync(
@@ -29,7 +32,10 @@ export async function renderPreview(
   const Component = component;
   const Element = <>{Component}</>;
 
-  const html = (await compile(Element, compileOptions)) as string;
+  const html = `<!doctype html><html><head>
+          <link rel="stylesheet" href="base.css" />
+          <link rel="stylesheet" href="index.css" />
+          </head><body>${await compile(Element, compileOptions)}</body></html>` as string;
 
   const hash = crypto.createHash("sha256");
   hash.update(html);
@@ -41,45 +47,34 @@ export async function renderPreview(
 
   // If the file doesn't exist, create it by generating the document with Onedoc
   if (!fs.existsSync(targetFolder)) {
-    const { file, info, error } = await onedoc.render({
-      html,
-      assets: [
-        ...(useBaseCss
-          ? [
-              {
-                path: "base.css",
-                content: baseCss,
-              },
-            ]
-          : [
-              {
-                path: "default.css",
-                content: Buffer.from(`@page { size: A4; }`),
-              },
-            ]),
-        {
-          path: "index.css",
-          content: indexCss,
-        },
+    const file = await ff.pdf.generate(
+      [
+        new File([html], "index.html", { type: "text/html" }),
+        useBaseCss
+          ? new File([baseCss], "base.css", { type: "text/css" })
+          : new File([`@page { size: A4; }`], "base.css", { type: "text/css" }),
+        new File([indexCss], "index.css", { type: "text/css" }),
       ],
-      save: false,
-      test: false,
-    });
-
-    if (error) {
-      throw new Error(`Error rendering the document: ${error}`);
-    }
+      {
+        options: {
+          host: false,
+          test: false,
+        },
+      }
+    );
 
     // Create the directory
     fs.mkdirSync(targetFolder, { recursive: true });
 
     // Write the HTML to a file
     fs.writeFileSync(path.join(targetFolder, "index.html"), html);
 
-    const buffer = Buffer.from(file);
+    await pipeline(
+      file,
+      fs.createWriteStream(path.join(targetFolder, "document.pdf"))
+    );
 
-    // Save the buffer to a file called id.pdf
-    fs.writeFileSync(path.join(targetFolder, "document.pdf"), buffer);
+    const buffer = fs.readFileSync(path.join(targetFolder, "document.pdf"));
 
     const pdf2pic = fromBuffer(buffer, {
       density: 300,

diff --git a/docs/components/compile/compile.mdx b/docs/components/compile/compile.mdx
@@ -19,7 +19,7 @@ A simple function to compile a React component to an HTML string with the Onedoc
           const html = await compile(<Component />);
           ```
 
-<Frame background="subtle"><img src="../../images/previews/compile-5570a5ba/document.1.jpg" style={{  width: '100%', height: 'auto', maxHeight: '500px', borderRadius: "0.25rem", overflow: "hidden", border: '1px solid #E5E4E2' }} /></Frame>
+<Frame background="subtle"><img src="../../images/previews/compile-f31067dd/document.1.jpg" style={{  width: '100%', height: 'auto', maxHeight: '500px', borderRadius: "0.25rem", overflow: "hidden", border: '1px solid #E5E4E2' }} /></Frame>
 
 <div style={{paddingTop: "1rem", paddingBottom: "1rem"}}><CodeBlocks>
 <CodeBlock title="template.tsx">
@@ -60,7 +60,7 @@ Pass `{ emotion: true }` as the second compile option to merge and extract criti
 const html = await compile(<Component />, { emotion: true });
 ```
 
-<Frame background="subtle"><img src="../../images/previews/compile-cbbe811f/document.1.jpg" style={{  width: '100%', height: 'auto', maxHeight: '500px', borderRadius: "0.25rem", overflow: "hidden", border: '1px solid #E5E4E2' }} /></Frame>
+<Frame background="subtle"><img src="../../images/previews/compile-8dbcfb7e/document.1.jpg" style={{  width: '100%', height: 'auto', maxHeight: '500px', borderRadius: "0.25rem", overflow: "hidden", border: '1px solid #E5E4E2' }} /></Frame>
 
 <div style={{paddingTop: "1rem", paddingBottom: "1rem"}}><CodeBlocks>
 <CodeBlock title="template.tsx">

diff --git a/docs/components/css/css.mdx b/docs/components/css/css.mdx
@@ -16,7 +16,7 @@ Support
 
 Use a simple CSS tag to support CSS in your document.
 
-<Frame background="subtle"><img src="../../images/previews/css-7dd14403/document.1.jpg" style={{  width: '100%', height: 'auto', maxHeight: '500px', borderRadius: "0.25rem", overflow: "hidden", border: '1px solid #E5E4E2' }} /></Frame>
+<Frame background="subtle"><img src="../../images/previews/css-fa74d9a5/document.1.jpg" style={{  width: '100%', height: 'auto', maxHeight: '500px', borderRadius: "0.25rem", overflow: "hidden", border: '1px solid #E5E4E2' }} /></Frame>
 
 <div style={{paddingTop: "1rem", paddingBottom: "1rem"}}><CodeBlocks>
 <CodeBlock title="template.tsx">

diff --git a/docs/components/css/font.mdx b/docs/components/css/font.mdx
@@ -16,7 +16,7 @@ Support
 
 Load a Google Font its URL. This will allow you to use the font in your document.
 
-<Frame background="subtle"><img src="../../images/previews/font-e0a8ef44/document.1.jpg" style={{  width: '100%', height: 'auto', maxHeight: '500px', borderRadius: "0.25rem", overflow: "hidden", border: '1px solid #E5E4E2' }} /></Frame>
+<Frame background="subtle"><img src="../../images/previews/font-0d283416/document.1.jpg" style={{  width: '100%', height: 'auto', maxHeight: '500px', borderRadius: "0.25rem", overflow: "hidden", border: '1px solid #E5E4E2' }} /></Frame>
 
 <div style={{paddingTop: "1rem", paddingBottom: "1rem"}}><CodeBlocks>
 <CodeBlock title="template.tsx">

diff --git a/docs/components/css/margins.mdx b/docs/components/css/margins.mdx
@@ -16,7 +16,7 @@ Support
 
 Set the page ratio and margin sizes in px. You can also use the `@page` at-rule in CSS to manage all aspects of printed pages. More on this [here](https://developer.mozilla.org/en-US/docs/Web/CSS/@page).
 
-<Frame background="subtle"><img src="../../images/previews/margins-50add8b7/document.1.jpg" style={{  width: '100%', height: 'auto', maxHeight: '500px', borderRadius: "0.25rem", overflow: "hidden", border: '1px solid #E5E4E2' }} /></Frame>
+<Frame background="subtle"><img src="../../images/previews/margins-35fa1266/document.1.jpg" style={{  width: '100%', height: 'auto', maxHeight: '500px', borderRadius: "0.25rem", overflow: "hidden", border: '1px solid #E5E4E2' }} /></Frame>
 
 <div style={{paddingTop: "1rem", paddingBottom: "1rem"}}><CodeBlocks>
 <CodeBlock title="template.tsx">

diff --git a/docs/components/footnote/footnote.mdx b/docs/components/footnote/footnote.mdx
@@ -16,7 +16,7 @@ Support
 
 #### Preview
 
-<Frame background="subtle"><img src="../../images/previews/footnote-fa9b006a/document.1.jpg" style={{  width: '100%', height: 'auto', maxHeight: '500px', borderRadius: "0.25rem", overflow: "hidden", border: '1px solid #E5E4E2' }} /></Frame>
+<Frame background="subtle"><img src="../../images/previews/footnote-e49ec577/document.1.jpg" style={{  width: '100%', height: 'auto', maxHeight: '500px', borderRadius: "0.25rem", overflow: "hidden", border: '1px solid #E5E4E2' }} /></Frame>
 
 <div style={{paddingTop: "1rem", paddingBottom: "1rem"}}><CodeBlocks>
 <CodeBlock title="template.tsx">

diff --git a/docs/components/latex/latex.mdx b/docs/components/latex/latex.mdx
@@ -16,7 +16,7 @@ Support
 
 Use a simple Latex tag to support Latex in your document.
 
-<Frame background="subtle"><img src="../../images/previews/latex-f2f93949/document.1.jpg" style={{  width: '100%', height: 'auto', maxHeight: '500px', borderRadius: "0.25rem", overflow: "hidden", border: '1px solid #E5E4E2' }} /></Frame>
+<Frame background="subtle"><img src="../../images/previews/latex-2663e15e/document.1.jpg" style={{  width: '100%', height: 'auto', maxHeight: '500px', borderRadius: "0.25rem", overflow: "hidden", border: '1px solid #E5E4E2' }} /></Frame>
 
 <div style={{paddingTop: "1rem", paddingBottom: "1rem"}}><CodeBlocks>
 <CodeBlock title="template.tsx">
@@ -51,7 +51,7 @@ body {
 
 Write complex LaTeX formulas in your document.
 
-<Frame background="subtle"><img src="../../images/previews/latex-df0188b4/document.1.jpg" style={{  width: '100%', height: 'auto', maxHeight: '500px', borderRadius: "0.25rem", overflow: "hidden", border: '1px solid #E5E4E2' }} /></Frame>
+<Frame background="subtle"><img src="../../images/previews/latex-c1cd8f84/document.1.jpg" style={{  width: '100%', height: 'auto', maxHeight: '500px', borderRadius: "0.25rem", overflow: "hidden", border: '1px solid #E5E4E2' }} /></Frame>
 
 <div style={{paddingTop: "1rem", paddingBottom: "1rem"}}><CodeBlocks>
 <CodeBlock title="template.tsx">

diff --git a/docs/components/markdown/markdown.mdx b/docs/components/markdown/markdown.mdx
@@ -16,7 +16,7 @@ Support
 
 Use a simple Markdown tag to support Markdown in your document.
 
-<Frame background="subtle"><img src="../../images/previews/markdown-788360ba/document.1.jpg" style={{  width: '100%', height: 'auto', maxHeight: '500px', borderRadius: "0.25rem", overflow: "hidden", border: '1px solid #E5E4E2' }} /></Frame>
+<Frame background="subtle"><img src="../../images/previews/markdown-f4432de3/document.1.jpg" style={{  width: '100%', height: 'auto', maxHeight: '500px', borderRadius: "0.25rem", overflow: "hidden", border: '1px solid #E5E4E2' }} /></Frame>
 
 <div style={{paddingTop: "1rem", paddingBottom: "1rem"}}><CodeBlocks>
 <CodeBlock title="template.tsx">
@@ -57,7 +57,7 @@ body {
 
 You can leverage the `overrides` prop to replace Markdown components with your own components. This is useful for custom components or even for dynamic content.
 
-<Frame background="subtle"><img src="../../images/previews/markdown-7e966af7/document.1.jpg" style={{  width: '100%', height: 'auto', maxHeight: '500px', borderRadius: "0.25rem", overflow: "hidden", border: '1px solid #E5E4E2' }} /></Frame>
+<Frame background="subtle"><img src="../../images/previews/markdown-cdc02780/document.1.jpg" style={{  width: '100%', height: 'auto', maxHeight: '500px', borderRadius: "0.25rem", overflow: "hidden", border: '1px solid #E5E4E2' }} /></Frame>
 
 <div style={{paddingTop: "1rem", paddingBottom: "1rem"}}><CodeBlocks>
 <CodeBlock title="template.tsx">
@@ -74,7 +74,7 @@ import { Markdown } from "@fileforge/react-print";
         component: () => "John Doe",
       },
       KPI: {
-        component: ({ children }) => (
+        component: ({ children }: { children: React.ReactNode }) => (
           <div style={{ color: "blue", fontSize: "2rem" }}>{children}</div>
         ),
       },

diff --git a/docs/components/shell/currentpagetop.mdx b/docs/components/shell/currentpagetop.mdx
@@ -18,7 +18,7 @@ Support
 
 #### Preview
 
-<Frame background="subtle"><img src="../../images/previews/currentpagetop-81734720/document.1.jpg" style={{  width: '100%', height: 'auto', maxHeight: '500px', borderRadius: "0.25rem", overflow: "hidden", border: '1px solid #E5E4E2' }} /></Frame>
+<Frame background="subtle"><img src="../../images/previews/currentpagetop-2643a477/document.1.jpg" style={{  width: '100%', height: 'auto', maxHeight: '500px', borderRadius: "0.25rem", overflow: "hidden", border: '1px solid #E5E4E2' }} /></Frame>
 
 <div style={{paddingTop: "1rem", paddingBottom: "1rem"}}><CodeBlocks>
 <CodeBlock title="template.tsx">

diff --git a/docs/components/shell/floatbottom.mdx b/docs/components/shell/floatbottom.mdx
@@ -16,7 +16,7 @@ Support
 
 #### Preview
 
-<Frame background="subtle"><img src="../../images/previews/floatbottom-17237ced/document.1.jpg" style={{  width: '100%', height: 'auto', maxHeight: '500px', borderRadius: "0.25rem", overflow: "hidden", border: '1px solid #E5E4E2' }} /></Frame>
+<Frame background="subtle"><img src="../../images/previews/floatbottom-1c4af231/document.1.jpg" style={{  width: '100%', height: 'auto', maxHeight: '500px', borderRadius: "0.25rem", overflow: "hidden", border: '1px solid #E5E4E2' }} /></Frame>
 
 <div style={{paddingTop: "1rem", paddingBottom: "1rem"}}><CodeBlocks>
 <CodeBlock title="template.tsx">

diff --git a/docs/components/shell/nobreak.mdx b/docs/components/shell/nobreak.mdx
@@ -16,7 +16,7 @@ Support
 
 #### Preview
 
-<Frame background="subtle"><img src="../../images/previews/nobreak-47b8dd06/document.1.jpg" style={{  width: '100%', height: 'auto', maxHeight: '500px', borderRadius: "0.25rem", overflow: "hidden", border: '1px solid #E5E4E2' }} /></Frame>
+<Frame background="subtle"><img src="../../images/previews/nobreak-ba337df4/document.1.jpg" style={{  width: '100%', height: 'auto', maxHeight: '500px', borderRadius: "0.25rem", overflow: "hidden", border: '1px solid #E5E4E2' }} /></Frame>
 
 <div style={{paddingTop: "1rem", paddingBottom: "1rem"}}><CodeBlocks>
 <CodeBlock title="template.tsx">

diff --git a/docs/components/shell/pagebottom.mdx b/docs/components/shell/pagebottom.mdx
@@ -16,7 +16,7 @@ Support
 
 #### Preview
 
-<Frame background="subtle"><img src="../../images/previews/pagebottom-f6fd9841/document.1.jpg" style={{  width: '100%', height: 'auto', maxHeight: '500px', borderRadius: "0.25rem", overflow: "hidden", border: '1px solid #E5E4E2' }} /></Frame>
+<Frame background="subtle"><img src="../../images/previews/pagebottom-fd5eaff9/document.1.jpg" style={{  width: '100%', height: 'auto', maxHeight: '500px', borderRadius: "0.25rem", overflow: "hidden", border: '1px solid #E5E4E2' }} /></Frame>
 
 <div style={{paddingTop: "1rem", paddingBottom: "1rem"}}><CodeBlocks>
 <CodeBlock title="template.tsx">

diff --git a/docs/components/shell/pagebreak.mdx b/docs/components/shell/pagebreak.mdx
@@ -16,7 +16,7 @@ Support
 
 #### Preview
 
-<Frame background="subtle"><img src="../../images/previews/pagebreak-d3424866/document.1.jpg" style={{  width: '100%', height: 'auto', maxHeight: '500px', borderRadius: "0.25rem", overflow: "hidden", border: '1px solid #E5E4E2' }} /></Frame>
+<Frame background="subtle"><img src="../../images/previews/pagebreak-bb162ea2/document.1.jpg" style={{  width: '100%', height: 'auto', maxHeight: '500px', borderRadius: "0.25rem", overflow: "hidden", border: '1px solid #E5E4E2' }} /></Frame>
 
 <div style={{paddingTop: "1rem", paddingBottom: "1rem"}}><CodeBlocks>
 <CodeBlock title="template.tsx">

diff --git a/docs/components/shell/pagetop.mdx b/docs/components/shell/pagetop.mdx
@@ -18,7 +18,7 @@ Support
 
 #### Preview
 
-<Frame background="subtle"><img src="../../images/previews/pagetop-ef21c693/document.1.jpg" style={{  width: '100%', height: 'auto', maxHeight: '500px', borderRadius: "0.25rem", overflow: "hidden", border: '1px solid #E5E4E2' }} /></Frame>
+<Frame background="subtle"><img src="../../images/previews/pagetop-53bf6bd2/document.1.jpg" style={{  width: '100%', height: 'auto', maxHeight: '500px', borderRadius: "0.25rem", overflow: "hidden", border: '1px solid #E5E4E2' }} /></Frame>
 
 <div style={{paddingTop: "1rem", paddingBottom: "1rem"}}><CodeBlocks>
 <CodeBlock title="template.tsx">

diff --git a/docs/components/signature/field.mdx b/docs/components/signature/field.mdx
@@ -46,7 +46,7 @@ Supported fields:
 | signerAttachment | Signer attachment field |
 | signerAttachmentOptional | Optional signer attachment field |
 
-<Frame background="subtle"><img src="../../images/previews/field-0dfd9c56/document.1.jpg" style={{  width: '100%', height: 'auto', maxHeight: '500px', borderRadius: "0.25rem", overflow: "hidden", border: '1px solid #E5E4E2' }} /></Frame>
+<Frame background="subtle"><img src="../../images/previews/field-8e7a7bcb/document.1.jpg" style={{  width: '100%', height: 'auto', maxHeight: '500px', borderRadius: "0.25rem", overflow: "hidden", border: '1px solid #E5E4E2' }} /></Frame>
 
 <div style={{paddingTop: "1rem", paddingBottom: "1rem"}}><CodeBlocks>
 <CodeBlock title="template.tsx">

diff --git a/docs/components/tailwind/tailwind.mdx b/docs/components/tailwind/tailwind.mdx
@@ -16,7 +16,7 @@ Support
 
 Use a simple Tailwind tag to support Tailwind in your document.
 
-<Frame background="subtle"><img src="../../images/previews/tailwind-319e2653/document.1.jpg" style={{  width: '100%', height: 'auto', maxHeight: '500px', borderRadius: "0.25rem", overflow: "hidden", border: '1px solid #E5E4E2' }} /></Frame>
+<Frame background="subtle"><img src="../../images/previews/tailwind-e99fe796/document.1.jpg" style={{  width: '100%', height: 'auto', maxHeight: '500px', borderRadius: "0.25rem", overflow: "hidden", border: '1px solid #E5E4E2' }} /></Frame>
 
 <div style={{paddingTop: "1rem", paddingBottom: "1rem"}}><CodeBlocks>
 <CodeBlock title="template.tsx">
@@ -57,7 +57,7 @@ body {
 
 You can also pass a custom Tailwind config to the Tailwind component.
 
-<Frame background="subtle"><img src="../../images/previews/tailwind-bc09d01e/document.1.jpg" style={{  width: '100%', height: 'auto', maxHeight: '500px', borderRadius: "0.25rem", overflow: "hidden", border: '1px solid #E5E4E2' }} /></Frame>
+<Frame background="subtle"><img src="../../images/previews/tailwind-b7e447a6/document.1.jpg" style={{  width: '100%', height: 'auto', maxHeight: '500px', borderRadius: "0.25rem", overflow: "hidden", border: '1px solid #E5E4E2' }} /></Frame>
 
 <div style={{paddingTop: "1rem", paddingBottom: "1rem"}}><CodeBlocks>
 <CodeBlock title="template.tsx">
@@ -106,7 +106,7 @@ body {
 
 You can disable the Tailwind Preflight CSS.
 
-<Frame background="subtle"><img src="../../images/previews/tailwind-33b7c4e5/document.1.jpg" style={{  width: '100%', height: 'auto', maxHeight: '500px', borderRadius: "0.25rem", overflow: "hidden", border: '1px solid #E5E4E2' }} /></Frame>
+<Frame background="subtle"><img src="../../images/previews/tailwind-1aadcc0c/document.1.jpg" style={{  width: '100%', height: 'auto', maxHeight: '500px', borderRadius: "0.25rem", overflow: "hidden", border: '1px solid #E5E4E2' }} /></Frame>
 
 <div style={{paddingTop: "1rem", paddingBottom: "1rem"}}><CodeBlocks>
 <CodeBlock title="template.tsx">

diff --git a/docs/components/variables/pagenumber.mdx b/docs/components/variables/pagenumber.mdx
@@ -16,7 +16,7 @@ Support
 
 #### Preview
 
-<Frame background="subtle"><img src="../../images/previews/pagenumber-ea46baaf/document.1.jpg" style={{  width: '100%', height: 'auto', maxHeight: '500px', borderRadius: "0.25rem", overflow: "hidden", border: '1px solid #E5E4E2' }} /></Frame>
+<Frame background="subtle"><img src="../../images/previews/pagenumber-fe8490ef/document.1.jpg" style={{  width: '100%', height: 'auto', maxHeight: '500px', borderRadius: "0.25rem", overflow: "hidden", border: '1px solid #E5E4E2' }} /></Frame>
 
 <div style={{paddingTop: "1rem", paddingBottom: "1rem"}}><CodeBlocks>
 <CodeBlock title="template.tsx">
@@ -51,7 +51,7 @@ body {
 
 You can use a custom CSS counter-style, by passing a known name or a custom counter style.
 
-<Frame background="subtle"><img src="../../images/previews/pagenumber-391d6c27/document.1.jpg" style={{  width: '100%', height: 'auto', maxHeight: '500px', borderRadius: "0.25rem", overflow: "hidden", border: '1px solid #E5E4E2' }} /></Frame>
+<Frame background="subtle"><img src="../../images/previews/pagenumber-4d636b47/document.1.jpg" style={{  width: '100%', height: 'auto', maxHeight: '500px', borderRadius: "0.25rem", overflow: "hidden", border: '1px solid #E5E4E2' }} /></Frame>
 
 <div style={{paddingTop: "1rem", paddingBottom: "1rem"}}><CodeBlocks>
 <CodeBlock title="template.tsx">

diff --git a/docs/components/variables/pagesnumber.mdx b/docs/components/variables/pagesnumber.mdx
@@ -16,7 +16,7 @@ Support
 
 #### Preview
 
-<Frame background="subtle"><img src="../../images/previews/pagesnumber-10c1cbad/document.1.jpg" style={{  width: '100%', height: 'auto', maxHeight: '500px', borderRadius: "0.25rem", overflow: "hidden", border: '1px solid #E5E4E2' }} /></Frame>
+<Frame background="subtle"><img src="../../images/previews/pagesnumber-ba7ca0ce/document.1.jpg" style={{  width: '100%', height: 'auto', maxHeight: '500px', borderRadius: "0.25rem", overflow: "hidden", border: '1px solid #E5E4E2' }} /></Frame>
 
 <div style={{paddingTop: "1rem", paddingBottom: "1rem"}}><CodeBlocks>
 <CodeBlock title="template.tsx">

diff --git a/docs/components/variables/runningh1.mdx b/docs/components/variables/runningh1.mdx
@@ -18,7 +18,7 @@ Support
 
 Show the current running header of level 1 in the page header. All running headers are reset when any of their parent headings are encountered (e.g. a level 2 heading resets the level 3, 4, 5 and 6 headings).
 
-<Frame background="subtle"><img src="../../images/previews/runningh1-16658c8e/document.1.jpg" style={{  width: '100%', height: 'auto', maxHeight: '500px', borderRadius: "0.25rem", overflow: "hidden", border: '1px solid #E5E4E2' }} /></Frame>
+<Frame background="subtle"><img src="../../images/previews/runningh1-230ef375/document.1.jpg" style={{  width: '100%', height: 'auto', maxHeight: '500px', borderRadius: "0.25rem", overflow: "hidden", border: '1px solid #E5E4E2' }} /></Frame>
 
 <div style={{paddingTop: "1rem", paddingBottom: "1rem"}}><CodeBlocks>
 <CodeBlock title="template.tsx">

diff --git a/.../previews/compile-cbbe811f/document.1.jpg → .../previews/compile-8dbcfb7e/document.1.jpg b/.../previews/compile-cbbe811f/document.1.jpg → .../previews/compile-8dbcfb7e/document.1.jpg
diff --git a/...es/previews/compile-cbbe811f/document.pdf → ...es/previews/compile-8dbcfb7e/document.pdf b/...es/previews/compile-cbbe811f/document.pdf → ...es/previews/compile-8dbcfb7e/document.pdf
diff --git a/.../previews/compile-5570a5ba/document.1.jpg → .../previews/compile-f31067dd/document.1.jpg b/.../previews/compile-5570a5ba/document.1.jpg → .../previews/compile-f31067dd/document.1.jpg
diff --git a/...es/previews/compile-5570a5ba/document.pdf → ...es/previews/compile-f31067dd/document.pdf b/...es/previews/compile-5570a5ba/document.pdf → ...es/previews/compile-f31067dd/document.pdf
diff --git a/...ages/previews/css-7dd14403/document.1.jpg → ...ages/previews/css-fa74d9a5/document.1.jpg b/...ages/previews/css-7dd14403/document.1.jpg → ...ages/previews/css-fa74d9a5/document.1.jpg
diff --git a/...images/previews/css-7dd14403/document.pdf → ...images/previews/css-fa74d9a5/document.pdf b/...images/previews/css-7dd14403/document.pdf → ...images/previews/css-fa74d9a5/document.pdf
diff --git a/...ws/currentpagetop-81734720/document.1.jpg → ...ws/currentpagetop-2643a477/document.1.jpg b/...ws/currentpagetop-81734720/document.1.jpg → ...ws/currentpagetop-2643a477/document.1.jpg
diff --git a/...iews/currentpagetop-81734720/document.pdf → ...iews/currentpagetop-2643a477/document.pdf b/...iews/currentpagetop-81734720/document.pdf → ...iews/currentpagetop-2643a477/document.pdf
diff --git a/docs/images/previews/field-0dfd9c56/document.pdf b/docs/images/previews/field-0dfd9c56/document.pdf
diff --git a/...es/previews/field-0dfd9c56/document.1.jpg → ...es/previews/field-8e7a7bcb/document.1.jpg b/...es/previews/field-0dfd9c56/document.1.jpg → ...es/previews/field-8e7a7bcb/document.1.jpg
diff --git a/docs/images/previews/field-8e7a7bcb/document.pdf b/docs/images/previews/field-8e7a7bcb/document.pdf
diff --git a/...views/floatbottom-17237ced/document.1.jpg → ...views/floatbottom-1c4af231/document.1.jpg b/...views/floatbottom-17237ced/document.1.jpg → ...views/floatbottom-1c4af231/document.1.jpg
diff --git a/...reviews/floatbottom-17237ced/document.pdf → ...reviews/floatbottom-1c4af231/document.pdf b/...reviews/floatbottom-17237ced/document.pdf → ...reviews/floatbottom-1c4af231/document.pdf
diff --git a/...ges/previews/font-e0a8ef44/document.1.jpg → ...ges/previews/font-0d283416/document.1.jpg b/...ges/previews/font-e0a8ef44/document.1.jpg → ...ges/previews/font-0d283416/document.1.jpg
diff --git a/...mages/previews/font-e0a8ef44/document.pdf → ...mages/previews/font-0d283416/document.pdf b/...mages/previews/font-e0a8ef44/document.pdf → ...mages/previews/font-0d283416/document.pdf
diff --git a/...previews/footnote-fa9b006a/document.1.jpg → ...previews/footnote-e49ec577/document.1.jpg b/...previews/footnote-fa9b006a/document.1.jpg → ...previews/footnote-e49ec577/document.1.jpg
diff --git a/...s/previews/footnote-fa9b006a/document.pdf → ...s/previews/footnote-e49ec577/document.pdf b/...s/previews/footnote-fa9b006a/document.pdf → ...s/previews/footnote-e49ec577/document.pdf
diff --git a/...es/previews/latex-f2f93949/document.1.jpg → ...es/previews/latex-2663e15e/document.1.jpg b/...es/previews/latex-f2f93949/document.1.jpg → ...es/previews/latex-2663e15e/document.1.jpg
diff --git a/...ages/previews/latex-f2f93949/document.pdf → ...ages/previews/latex-2663e15e/document.pdf b/...ages/previews/latex-f2f93949/document.pdf → ...ages/previews/latex-2663e15e/document.pdf
diff --git a/...es/previews/latex-df0188b4/document.1.jpg → ...es/previews/latex-c1cd8f84/document.1.jpg b/...es/previews/latex-df0188b4/document.1.jpg → ...es/previews/latex-c1cd8f84/document.1.jpg
diff --git a/...ages/previews/latex-df0188b4/document.pdf → ...ages/previews/latex-c1cd8f84/document.pdf b/...ages/previews/latex-df0188b4/document.pdf → ...ages/previews/latex-c1cd8f84/document.pdf
diff --git a/.../previews/margins-50add8b7/document.1.jpg → .../previews/margins-35fa1266/document.1.jpg b/.../previews/margins-50add8b7/document.1.jpg → .../previews/margins-35fa1266/document.1.jpg
diff --git a/...es/previews/margins-50add8b7/document.pdf → ...es/previews/margins-35fa1266/document.pdf b/...es/previews/margins-50add8b7/document.pdf → ...es/previews/margins-35fa1266/document.pdf
diff --git a/...previews/markdown-7e966af7/document.1.jpg → ...previews/markdown-cdc02780/document.1.jpg b/...previews/markdown-7e966af7/document.1.jpg → ...previews/markdown-cdc02780/document.1.jpg
diff --git a/...s/previews/markdown-7e966af7/document.pdf → ...s/previews/markdown-cdc02780/document.pdf b/...s/previews/markdown-7e966af7/document.pdf → ...s/previews/markdown-cdc02780/document.pdf
diff --git a/...previews/markdown-788360ba/document.1.jpg → ...previews/markdown-f4432de3/document.1.jpg b/...previews/markdown-788360ba/document.1.jpg → ...previews/markdown-f4432de3/document.1.jpg
diff --git a/...s/previews/markdown-788360ba/document.pdf → ...s/previews/markdown-f4432de3/document.pdf b/...s/previews/markdown-788360ba/document.pdf → ...s/previews/markdown-f4432de3/document.pdf
diff --git a/.../previews/nobreak-47b8dd06/document.1.jpg → .../previews/nobreak-ba337df4/document.1.jpg b/.../previews/nobreak-47b8dd06/document.1.jpg → .../previews/nobreak-ba337df4/document.1.jpg
diff --git a/...es/previews/nobreak-47b8dd06/document.pdf → ...es/previews/nobreak-ba337df4/document.pdf b/...es/previews/nobreak-47b8dd06/document.pdf → ...es/previews/nobreak-ba337df4/document.pdf
diff --git a/...eviews/pagebottom-f6fd9841/document.1.jpg → ...eviews/pagebottom-fd5eaff9/document.1.jpg b/...eviews/pagebottom-f6fd9841/document.1.jpg → ...eviews/pagebottom-fd5eaff9/document.1.jpg
diff --git a/...previews/pagebottom-f6fd9841/document.pdf → ...previews/pagebottom-fd5eaff9/document.pdf b/...previews/pagebottom-f6fd9841/document.pdf → ...previews/pagebottom-fd5eaff9/document.pdf
diff --git a/...reviews/pagebreak-d3424866/document.1.jpg → ...reviews/pagebreak-bb162ea2/document.1.jpg b/...reviews/pagebreak-d3424866/document.1.jpg → ...reviews/pagebreak-bb162ea2/document.1.jpg
diff --git a/...reviews/pagebreak-d3424866/document.2.jpg → ...reviews/pagebreak-bb162ea2/document.2.jpg b/...reviews/pagebreak-d3424866/document.2.jpg → ...reviews/pagebreak-bb162ea2/document.2.jpg
diff --git a/.../previews/pagebreak-d3424866/document.pdf → .../previews/pagebreak-bb162ea2/document.pdf b/.../previews/pagebreak-d3424866/document.pdf → .../previews/pagebreak-bb162ea2/document.pdf
diff --git a/...eviews/pagenumber-391d6c27/document.1.jpg → ...eviews/pagenumber-4d636b47/document.1.jpg b/...eviews/pagenumber-391d6c27/document.1.jpg → ...eviews/pagenumber-4d636b47/document.1.jpg
diff --git a/...previews/pagenumber-391d6c27/document.pdf → ...previews/pagenumber-4d636b47/document.pdf b/...previews/pagenumber-391d6c27/document.pdf → ...previews/pagenumber-4d636b47/document.pdf
diff --git a/...eviews/pagenumber-ea46baaf/document.1.jpg → ...eviews/pagenumber-fe8490ef/document.1.jpg b/...eviews/pagenumber-ea46baaf/document.1.jpg → ...eviews/pagenumber-fe8490ef/document.1.jpg
diff --git a/...previews/pagenumber-ea46baaf/document.pdf → ...previews/pagenumber-fe8490ef/document.pdf b/...previews/pagenumber-ea46baaf/document.pdf → ...previews/pagenumber-fe8490ef/document.pdf
diff --git a/...views/pagesnumber-10c1cbad/document.1.jpg → ...views/pagesnumber-ba7ca0ce/document.1.jpg b/...views/pagesnumber-10c1cbad/document.1.jpg → ...views/pagesnumber-ba7ca0ce/document.1.jpg
diff --git a/...reviews/pagesnumber-10c1cbad/document.pdf → ...reviews/pagesnumber-ba7ca0ce/document.pdf b/...reviews/pagesnumber-10c1cbad/document.pdf → ...reviews/pagesnumber-ba7ca0ce/document.pdf
diff --git a/.../previews/pagetop-ef21c693/document.1.jpg → .../previews/pagetop-53bf6bd2/document.1.jpg b/.../previews/pagetop-ef21c693/document.1.jpg → .../previews/pagetop-53bf6bd2/document.1.jpg
diff --git a/...es/previews/pagetop-ef21c693/document.pdf → ...es/previews/pagetop-53bf6bd2/document.pdf b/...es/previews/pagetop-ef21c693/document.pdf → ...es/previews/pagetop-53bf6bd2/document.pdf
diff --git a/...reviews/runningh1-16658c8e/document.1.jpg → ...reviews/runningh1-230ef375/document.1.jpg b/...reviews/runningh1-16658c8e/document.1.jpg → ...reviews/runningh1-230ef375/document.1.jpg
diff --git a/.../previews/runningh1-16658c8e/document.pdf → .../previews/runningh1-230ef375/document.pdf b/.../previews/runningh1-16658c8e/document.pdf → .../previews/runningh1-230ef375/document.pdf
diff --git a/...previews/tailwind-33b7c4e5/document.1.jpg → ...previews/tailwind-1aadcc0c/document.1.jpg b/...previews/tailwind-33b7c4e5/document.1.jpg → ...previews/tailwind-1aadcc0c/document.1.jpg
diff --git a/...s/previews/tailwind-33b7c4e5/document.pdf → ...s/previews/tailwind-1aadcc0c/document.pdf b/...s/previews/tailwind-33b7c4e5/document.pdf → ...s/previews/tailwind-1aadcc0c/document.pdf
diff --git a/...previews/tailwind-bc09d01e/document.1.jpg → ...previews/tailwind-b7e447a6/document.1.jpg b/...previews/tailwind-bc09d01e/document.1.jpg → ...previews/tailwind-b7e447a6/document.1.jpg
diff --git a/...s/previews/tailwind-bc09d01e/document.pdf → ...s/previews/tailwind-b7e447a6/document.pdf b/...s/previews/tailwind-bc09d01e/document.pdf → ...s/previews/tailwind-b7e447a6/document.pdf
diff --git a/...previews/tailwind-319e2653/document.1.jpg → ...previews/tailwind-e99fe796/document.1.jpg b/...previews/tailwind-319e2653/document.1.jpg → ...previews/tailwind-e99fe796/document.1.jpg
diff --git a/...s/previews/tailwind-319e2653/document.pdf → ...s/previews/tailwind-e99fe796/document.pdf b/...s/previews/tailwind-319e2653/document.pdf → ...s/previews/tailwind-e99fe796/document.pdf
diff --git a/...templates-invoice-068b91ff/document.1.jpg → ...templates-invoice-808342e7/document.1.jpg b/...templates-invoice-068b91ff/document.1.jpg → ...templates-invoice-808342e7/document.1.jpg
diff --git a/...i-templates-invoice-068b91ff/document.pdf → ...i-templates-invoice-808342e7/document.pdf b/...i-templates-invoice-068b91ff/document.pdf → ...i-templates-invoice-808342e7/document.pdf
diff --git a/...-invoice-advanced-dfd5a7fc/document.1.jpg → ...-invoice-advanced-089aa4f4/document.1.jpg b/...-invoice-advanced-dfd5a7fc/document.1.jpg → ...-invoice-advanced-089aa4f4/document.1.jpg
diff --git a/...es-invoice-advanced-dfd5a7fc/document.pdf → ...es-invoice-advanced-089aa4f4/document.pdf b/...es-invoice-advanced-dfd5a7fc/document.pdf → ...es-invoice-advanced-089aa4f4/document.pdf
diff --git a/docs/images/previews/ui-templates-nda-markdown-3a264b41/document.1.jpg b/docs/images/previews/ui-templates-nda-markdown-3a264b41/document.1.jpg
diff --git a/docs/images/previews/ui-templates-nda-markdown-3a264b41/document.2.jpg b/docs/images/previews/ui-templates-nda-markdown-3a264b41/document.2.jpg
diff --git a/docs/images/previews/ui-templates-nda-markdown-3a264b41/document.pdf b/docs/images/previews/ui-templates-nda-markdown-3a264b41/document.pdf
diff --git a/docs/images/previews/ui-templates-nda-markdown-a1c048ca/document.1.jpg b/docs/images/previews/ui-templates-nda-markdown-a1c048ca/document.1.jpg
diff --git a/docs/images/previews/ui-templates-nda-markdown-a1c048ca/document.2.jpg b/docs/images/previews/ui-templates-nda-markdown-a1c048ca/document.2.jpg
diff --git a/...ates-nda-markdown-3a264b41/document.3.jpg → ...ates-nda-markdown-a1c048ca/document.3.jpg b/...ates-nda-markdown-3a264b41/document.3.jpg → ...ates-nda-markdown-a1c048ca/document.3.jpg
diff --git a/...ates-nda-markdown-3a264b41/document.4.jpg → ...ates-nda-markdown-a1c048ca/document.4.jpg b/...ates-nda-markdown-3a264b41/document.4.jpg → ...ates-nda-markdown-a1c048ca/document.4.jpg
diff --git a/...ates-nda-markdown-3a264b41/document.5.jpg → ...ates-nda-markdown-a1c048ca/document.5.jpg b/...ates-nda-markdown-3a264b41/document.5.jpg → ...ates-nda-markdown-a1c048ca/document.5.jpg
diff --git a/docs/images/previews/ui-templates-nda-markdown-a1c048ca/document.pdf b/docs/images/previews/ui-templates-nda-markdown-a1c048ca/document.pdf
diff --git a/...templates-receipt-976ba276/document.1.jpg → ...templates-receipt-4906d507/document.1.jpg b/...templates-receipt-976ba276/document.1.jpg → ...templates-receipt-4906d507/document.1.jpg
diff --git a/...i-templates-receipt-976ba276/document.pdf → ...i-templates-receipt-4906d507/document.pdf b/...i-templates-receipt-976ba276/document.pdf → ...i-templates-receipt-4906d507/document.pdf
diff --git a/...tes-report-charts-93a76b2a/document.1.jpg → ...tes-report-charts-fe27a92e/document.1.jpg b/...tes-report-charts-93a76b2a/document.1.jpg → ...tes-report-charts-fe27a92e/document.1.jpg
diff --git a/...lates-report-charts-93a76b2a/document.pdf → ...lates-report-charts-fe27a92e/document.pdf b/...lates-report-charts-93a76b2a/document.pdf → ...lates-report-charts-fe27a92e/document.pdf
diff --git a/...scientific-report-131b6f8b/document.1.jpg → ...scientific-report-0fc7c85c/document.1.jpg b/...scientific-report-131b6f8b/document.1.jpg → ...scientific-report-0fc7c85c/document.1.jpg
diff --git a/...scientific-report-131b6f8b/document.2.jpg → ...scientific-report-0fc7c85c/document.2.jpg b/...scientific-report-131b6f8b/document.2.jpg → ...scientific-report-0fc7c85c/document.2.jpg
diff --git a/...s-scientific-report-131b6f8b/document.pdf → ...s-scientific-report-0fc7c85c/document.pdf b/...s-scientific-report-131b6f8b/document.pdf → ...s-scientific-report-0fc7c85c/document.pdf
diff --git a/docs/sortedDocs.json b/docs/sortedDocs.json