diff --git a/docs/components/markdown/markdown.mdx b/docs/components/markdown/markdown.mdx index ed361b3..e8e9884 100644 --- a/docs/components/markdown/markdown.mdx +++ b/docs/components/markdown/markdown.mdx @@ -106,3 +106,85 @@ body { +#### Table of Contents + +You can use the `tocRenderer` prop to render a table of contents from your Markdown content. The headers will be automatically detected and rendered in the order they appear. You need to place the `` component in your Markdown content to render the table of contents. + + + +
+ +```jsx +import { Markdown } from "@fileforge/react-print"; + + + {`a.-toc-link:after { + content: target-counter(attr(href), page); + float: right; + }`} + ( + + {children} + + )} + >{`# Table of Contents + + + + + +# This is a level 1 header + +## This is a level 2 header + +Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. + +## This is another level 2 header + +Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. + +# This is a level 1 header, bis + +Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi.`} +; + +``` + + +```css +@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap"); + +html, +body { + font-size: 28px; + font-family: "Inter", sans-serif; +} + +@page { + size: A4; +} + +``` + +
+ diff --git a/docs/images/previews/markdown-344947c9/document.1.jpg b/docs/images/previews/markdown-344947c9/document.1.jpg new file mode 100644 index 0000000..c7c5098 Binary files /dev/null and b/docs/images/previews/markdown-344947c9/document.1.jpg differ diff --git a/docs/images/previews/markdown-344947c9/document.2.jpg b/docs/images/previews/markdown-344947c9/document.2.jpg new file mode 100644 index 0000000..d2e844f Binary files /dev/null and b/docs/images/previews/markdown-344947c9/document.2.jpg differ diff --git a/docs/images/previews/markdown-344947c9/document.pdf b/docs/images/previews/markdown-344947c9/document.pdf new file mode 100644 index 0000000..f120ad9 Binary files /dev/null and b/docs/images/previews/markdown-344947c9/document.pdf differ diff --git a/docs/images/previews/ui-templates-scientific-report-0fc7c85c/document.2.jpg b/docs/images/previews/ui-templates-scientific-report-0fc7c85c/document.2.jpg deleted file mode 100644 index 73f881b..0000000 Binary files a/docs/images/previews/ui-templates-scientific-report-0fc7c85c/document.2.jpg and /dev/null differ diff --git a/docs/images/previews/ui-templates-scientific-report-0fc7c85c/document.1.jpg b/docs/images/previews/ui-templates-scientific-report-31829950/document.1.jpg similarity index 100% rename from docs/images/previews/ui-templates-scientific-report-0fc7c85c/document.1.jpg rename to docs/images/previews/ui-templates-scientific-report-31829950/document.1.jpg diff --git a/docs/images/previews/ui-templates-scientific-report-31829950/document.2.jpg b/docs/images/previews/ui-templates-scientific-report-31829950/document.2.jpg new file mode 100644 index 0000000..ed26898 Binary files /dev/null and b/docs/images/previews/ui-templates-scientific-report-31829950/document.2.jpg differ diff --git a/docs/images/previews/ui-templates-scientific-report-0fc7c85c/document.pdf b/docs/images/previews/ui-templates-scientific-report-31829950/document.pdf similarity index 95% rename from docs/images/previews/ui-templates-scientific-report-0fc7c85c/document.pdf rename to docs/images/previews/ui-templates-scientific-report-31829950/document.pdf index 20f041d..2cccda8 100644 Binary files a/docs/images/previews/ui-templates-scientific-report-0fc7c85c/document.pdf and b/docs/images/previews/ui-templates-scientific-report-31829950/document.pdf differ diff --git a/docs/sortedDocs.json b/docs/sortedDocs.json index b316d7a..c6ab217 100644 --- a/docs/sortedDocs.json +++ b/docs/sortedDocs.json @@ -1 +1 @@ -[{"icon":"fa-solid fa-code","name":"compile","description":"Compile a React component to a string with the Onedoc print styles.","outputPath":"/Users/titouanlaunay/Documents/Onedoc/react-print/docs/components/compile","files":[{"name":"compile","baseName":"compile","path":"compile/compile.tsx","outputPath":"/Users/titouanlaunay/Documents/Onedoc/react-print/docs/components/compile/compile.mdx","markdown":"---\ntitle: compile\n\n\n---\n\nSupport\n\n
Client-side
Server-side
\n\n#### Preview\n\nA simple function to compile a React component to an HTML string with the Onedoc print styles.\n ```jsx\n const html = await compile();\n ```\n\n\n\n
\n\n```jsx\nimport { compile } from \"@fileforge/react-print\";\n\n\n
Hello World!
\n;\n\n```\n\n\n```css\n@import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap\");\n\nhtml,\nbody {\n font-size: 28px;\n font-family: \"Inter\", sans-serif;\n}\n\n@page {\n size: A4;\n}\n\n```\n\n
\n\n### Examples\n\n#### Emotion CSS\n\nPass `{ emotion: true }` as the second compile option to merge and extract critical CSS using Emotion. Some libraries such as Chakra UI require this option to work correctly.\n\n```jsx\nconst html = await compile(, { emotion: true });\n```\n\n\n\n
\n\n```jsx\nimport { compile } from \"@fileforge/react-print\";\nimport { Button, ChakraProvider, extendTheme } from \"@chakra-ui/react\";\n\n<>\n \n \n \n;\n\n```\n\n\n```css\n@import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap\");\n\nhtml,\nbody {\n font-size: 28px;\n font-family: \"Inter\", sans-serif;\n}\n\n@page {\n size: A4;\n}\n\n```\n\n
\n\n","config":{"name":"compile","description":"","components":{"compile":{"server":true,"client":true,"examples":{"default":{"description":"A simple function to compile a React component to an HTML string with the Onedoc print styles.\n ```jsx\n const html = await compile();\n ```","template":{"key":null,"ref":null,"props":{"children":{"type":"div","key":null,"ref":null,"props":{"className":"bg-red-400","children":"Hello World!"},"_owner":null,"_store":{}}},"_owner":null,"_store":{}},"templateString":"(\n \n
Hello World!
\n \n )"},"emotion":{"description":"Pass `{ emotion: true }` as the second compile option to merge and extract critical CSS using Emotion. Some libraries such as Chakra UI require this option to work correctly.\n\n```jsx\nconst html = await compile(, { emotion: true });\n```","template":{"key":null,"ref":null,"props":{"children":{"key":null,"ref":null,"props":{"children":{"type":{},"key":null,"ref":null,"props":{"colorScheme":"blue","children":"Hello"},"_owner":null,"_store":{}}},"_owner":null,"_store":{}}},"_owner":null,"_store":{}},"name":"Emotion CSS","compileOptions":{"emotion":true},"externalImports":["import { Button, ChakraProvider, extendTheme } from \"@chakra-ui/react\";"],"templateString":"(\n <>\n \n \n \n \n )"}}}}}}]},{"icon":"fa-brands fa-css3-alt","name":"CSS","description":"Allows adding CSS to the document while securely parsing and escaping it.\n\nNB: While you can add regular CSS with the `