Merge pull request #46 from OnedocLabs/add-support-for-advanced-renderer

Adds support for advanced renderer

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-2e394416/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-c4caf51a/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-1badee62/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-cbbe811f/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">

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-b26814a3/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-7dd14403/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">

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-393a92da/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-e0a8ef44/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">

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-db4795b6/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-50add8b7/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">

docs/components/footnote/footnote.mdx

@@ -16,7 +16,7 @@ Support
 
 #### Preview
 
-<Frame background="subtle"><img src="../../images/previews/footnote-7de297f4/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-fa9b006a/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">

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-83ad6403/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-f2f93949/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-7a00ed36/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-df0188b4/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">

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-c8d0ecd4/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-788360ba/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-882cc486/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-7e966af7/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">

docs/components/shell/currentpagetop.mdx

@@ -18,7 +18,7 @@ Support
 
 #### Preview
 
-<Frame background="subtle"><img src="../../images/previews/currentpagetop-9aae489e/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-81734720/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">

docs/components/shell/floatbottom.mdx

@@ -16,7 +16,7 @@ Support
 
 #### Preview
 
-<Frame background="subtle"><img src="../../images/previews/floatbottom-9a3986d7/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-17237ced/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">

docs/components/shell/nobreak.mdx

@@ -16,7 +16,7 @@ Support
 
 #### Preview
 
-<Frame background="subtle"><img src="../../images/previews/nobreak-d03f0d1f/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-47b8dd06/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">

docs/components/shell/pagebottom.mdx

@@ -16,7 +16,7 @@ Support
 
 #### Preview
 
-<Frame background="subtle"><img src="../../images/previews/pagebottom-206d811e/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-f6fd9841/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">

docs/components/shell/pagebreak.mdx

@@ -16,7 +16,7 @@ Support
 
 #### Preview
 
-<Frame background="subtle"><img src="../../images/previews/pagebreak-88acdbdf/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-d3424866/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">

docs/components/shell/pagetop.mdx

@@ -18,7 +18,7 @@ Support
 
 #### Preview
 
-<Frame background="subtle"><img src="../../images/previews/pagetop-9dd97ef3/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-ef21c693/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">

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-81a661f2/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-da48fb0c/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">

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-d34cd362/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-45926711/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-841def4d/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-15d3ba0e/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">

docs/components/variables/pagenumber.mdx

@@ -16,7 +16,7 @@ Support
 
 #### Preview
 
-<Frame background="subtle"><img src="../../images/previews/pagenumber-cc94f6f7/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-ea46baaf/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-7e3be4c3/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-391d6c27/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">

docs/components/variables/pagesnumber.mdx

@@ -16,7 +16,7 @@ Support
 
 #### Preview
 
-<Frame background="subtle"><img src="../../images/previews/pagesnumber-a7d845b5/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-10c1cbad/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">

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-b41bbc29/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-16658c8e/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">

docs/introduction.mdx

@@ -41,72 +41,25 @@ React Print is designed to be incrementally adopted, so you can add it to most c
 
 A set of standard components to help you build amazing documents without having to deal with the mess of creating complex layouts and maintaining archaic markup.
 
-<Cards>
-  <Card
-    title="compile"
-    icon="fa-solid fa-code"
-    href="/react-print/components/compile"
-  >
+<Cards><Card title="compile" icon="fa-solid fa-code" href="/react-print/components/compile">
     Compile a React component to a string with the Onedoc print styles.
-  </Card>
-  <Card
-    title="CSS"
-    icon="fa-brands fa-css3-alt"
-    href="/react-print/components/css"
-  >
+  </Card><Card title="CSS" icon="fa-brands fa-css3-alt" href="/react-print/components/css">
     Allows adding CSS to the document while securely parsing and escaping it.
-  </Card>
-  <Card
-    title="Footnote"
-    icon="fa-solid fa-info"
-    href="/react-print/components/footnote"
-  >
+  </Card><Card title="Footnote" icon="fa-solid fa-info" href="/react-print/components/footnote">
     Create automatically numbered footnotes.
-  </Card>
-  <Card
-    title="LaTeX"
-    icon="fa-solid fa-square-root-variable"
-    href="/react-print/components/latex"
-  >
+  </Card><Card title="LaTeX" icon="fa-solid fa-square-root-variable" href="/react-print/components/latex">
     Render LaTeX formulas right in your React components.
-  </Card>
-  <Card
-    title="Markdown"
-    icon="fa-brands fa-markdown"
-    href="/react-print/components/markdown"
-  >
+  </Card><Card title="Markdown" icon="fa-brands fa-markdown" href="/react-print/components/markdown">
     Render Markdown inside your templates.
-  </Card>
-  <Card
-    title="Shell"
-    icon="fa-solid fa-border-all"
-    href="/react-print/components/shell"
-  >
+  </Card><Card title="Shell" icon="fa-solid fa-border-all" href="/react-print/components/shell">
     Display content in other page regions.
-  </Card>
-  <Card
-    title="Signature"
-    icon="signature"
-    href="/react-print/components/signature"
-  >
+  </Card><Card title="Signature" icon="signature" href="/react-print/components/signature">
     Add signature fields to your document.
-  </Card>
-  <Card
-    title="Tailwind"
-    icon="fa-solid fa-wind"
-    href="/react-print/components/tailwind"
-  >
+  </Card><Card title="Tailwind" icon="fa-solid fa-wind" href="/react-print/components/tailwind">
     A simple, drop-in way to use Tailwind CSS in your components.
-  </Card>
-  <Card
-    title="Variables"
-    icon="fa-solid fa-subscript"
-    href="/react-print/components/variables"
-  >
-    Display dynamic values based on your document, such as page numbers and
-    running headers.
-  </Card>
-</Cards>
+  </Card><Card title="Variables" icon="fa-solid fa-subscript" href="/react-print/components/variables">
+    Display dynamic values based on your document, such as page numbers and running headers.
+  </Card></Cards>
 <Note>
   Help us increase the number of components and start being an active member of
   the react-print community by