Adds further previews

.gitignore

@@ -3,3 +3,5 @@ test
 dist
 .DS_Store
 .tmp
+
+.env.local

docgen/base.css

@@ -0,0 +1,11 @@
+@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;
+}

docgen/buildExample.tsx

@@ -1,4 +1,6 @@
-import { EnrichedExample, Example } from "./types";
+import { config } from "dotenv";
+
+import { EnrichedExample } from "./types";
 import { Onedoc } from "@onedoc/client";
 import { bundle, formatSnippet } from "./utils";
 import * as crypto from "crypto";
@@ -7,7 +9,12 @@ import * as fs from "fs";
 import { fromBuffer } from "pdf2pic";
 import { glob } from "glob";
 
-const onedoc = new Onedoc("");
+config({ path: ".env.local" });
+config();
+
+const onedoc = new Onedoc(process.env.ONEDOC_API_KEY!);
+
+const baseCss = fs.readFileSync(path.join(__dirname, "./base.css"));
 
 export const buildExample = async (
   example: EnrichedExample,
@@ -34,6 +41,12 @@ export const buildExample = async (
   if (!fs.existsSync(targetFolder)) {
     const { file, info, error } = await onedoc.render({
       html,
+      assets: [
+        {
+          path: "base.css",
+          content: baseCss,
+        },
+      ],
       save: false,
       test: false,
     });
@@ -67,11 +80,24 @@ export const buildExample = async (
   const pages = await glob(path.join(targetFolder, "*.jpg"));
   const imagePath = path.relative(path.join(__dirname, "../docs/"), pages[0]);
 
-  markdown += `<Frame type="glass"><img src="${imagePath}" style={{height: '400px'}} /></Frame>\n\n`;
+  if (example.description) {
+    markdown += `${example.description}\n\n`;
+  }
+
+  markdown += `<Frame type="glass"><img className="shadow shadow-black/20" src="${imagePath}" style={{ height: '400px' }} /></Frame>\n\n<div style={{height: '1rem'}}></div>\n\n`;
 
   // Check if the folder docs/previews contain the image
 
-  markdown += `\`\`\`jsx\n${snippet}\n\`\`\`\n\n`;
+  markdown += `<CodeGroup>
+\`\`\`jsx template.tsx
+import { ${component} } from "@onedoc/react-print";
+
+${snippet}
+\`\`\`
+\`\`\`css base.css
+${baseCss}
+\`\`\`
+</CodeGroup>\n\n`;
 
   return {
     markdown,

docgen/buildFileMarkdown.ts

@@ -1,6 +1,7 @@
-import { DocConfig, ExtendedDocConfig } from "./types";
+import { ExtendedDocConfig } from "./types";
 import { ComponentDoc } from "react-docgen-typescript";
 import { buildExample } from "./buildExample";
+import { formatCamelCaseToTitle } from "./utils";
 
 export const buildFileMarkdown = async (
   docConfig: ExtendedDocConfig,
@@ -9,6 +10,7 @@ export const buildFileMarkdown = async (
 ) => {
   let markdown = `---
 title: ${docConfig.name}
+${docConfig.icon ? `icon: ${docConfig.icon}` : ""}
 ---\n\n`;
 
   for (const component of componentDocs) {
@@ -20,14 +22,50 @@ title: ${docConfig.name}
       markdown += `${component.description}\n\n`;
     }
 
-    if (examples.default) {
-      const { markdown: exampleMarkdown } = await buildExample(
-        examples.default,
-        component.displayName,
-        style
-      );
+    if (Object.keys(examples).length > 0) {
+      markdown += `### Examples\n\n`;
 
-      markdown += exampleMarkdown;
+      if (examples.default) {
+        markdown += `#### Preview\n\n`;
+
+        const { markdown: exampleMarkdown } = await buildExample(
+          examples.default,
+          component.displayName,
+          style
+        );
+
+        markdown += exampleMarkdown;
+      }
+
+      if (Object.keys(examples).filter((key) => key !== "default").length > 0) {
+        for (const [exampleName, example] of Object.entries(examples)) {
+          if (exampleName === "default") {
+            continue;
+          }
+
+          markdown += `#### ${
+            example.name || formatCamelCaseToTitle(exampleName)
+          }\n\n`;
+
+          const { markdown: exampleMarkdown } = await buildExample(
+            example,
+            component.displayName,
+            style
+          );
+
+          markdown += exampleMarkdown;
+        }
+      }
+    }
+
+    if (component.props) {
+      markdown += `### API\n\n<ResponseField name="Props">\n<Expandable title="Show available props">\n`;
+
+      Object.entries(component.props).forEach(([propName, prop]) => {
+        markdown += `<ResponseField name="${propName}" type="${prop.type.name}" required={${prop.required}}>${prop.description}</ResponseField>\n`;
+      });
+
+      markdown += `</Expandable></ResponseField>\n`;
     }
   }
 

docgen/types.ts

@@ -2,6 +2,7 @@ import React from "react";
 
 export interface Example {
   description?: string;
+  name?: string;
   template: React.ReactNode;
 }
 

docs/components/footnote.mdx

@@ -1,14 +1,77 @@
 ---
 title: Footnote
+icon: info
 ---
 
 ## Footnote
 
 Creates an automatically numbered footnote. This will remove the footnote content from the document flow and place it at the bottom of the page.
 
-<Frame type="glass"><img src="images/previews/footnote-7404e94f/document.1.jpg" style={{height: '400px'}} /></Frame>
+### Examples
+
+#### Preview
+
+<Frame type="glass"><img className="shadow shadow-black/20" src="images/previews/footnote-7404e94f/document.1.jpg" style={{ height: '400px' }} /></Frame>
+
+<div style={{height: '1rem'}}></div>
+
+<CodeGroup>
+```jsx template.tsx
+import { Footnote } from "@onedoc/react-print";
 
-```jsx
 <Footnote>Ceci est un exemple dynamique</Footnote>
 ```
+```css base.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;
+}
+
+```
+</CodeGroup>
+
+#### Test
+
+<Frame type="glass"><img className="shadow shadow-black/20" src="images/previews/footnote-32d75237/document.1.jpg" style={{ height: '400px' }} /></Frame>
+
+<div style={{height: '1rem'}}></div>
+
+<CodeGroup>
+```jsx template.tsx
+import { Footnote } from "@onedoc/react-print";
+
+(
+<Footnote>
+  Ceci est un exemple d'une footnote qui est très longue et qui a du styling de configuré dessus.
+</Footnote>
+)
+```
+```css base.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;
+}
+
+```
+</CodeGroup>
+
+### API
 
+<ResponseField name="Props">
+<Expandable title="Show available props">
+<ResponseField name="children" type="React.ReactNode" required={true}>The text to display in the footnote. This can be rich text.</ResponseField>
+</Expandable></ResponseField>

docs/mint.json

@@ -58,19 +58,28 @@
   "navigation": [
     {
       "group": "Overview",
-      "pages": ["introduction", "contributing"]
+      "pages": [
+        "introduction",
+        "contributing"
+      ]
     },
     {
       "group": "Getting Started",
-      "pages": ["getting-started/setup"]
+      "pages": [
+        "getting-started/setup"
+      ]
     },
     {
       "group": "Integrations",
-      "pages": ["integrations/onedoc"]
+      "pages": [
+        "integrations/onedoc"
+      ]
     },
     {
       "group": "Components",
-      "pages": ["components/footnote"]
+      "pages": [
+        "components/footnote"
+      ]
     }
   ],
   "footerSocials": {
@@ -83,4 +92,4 @@
     "anchors": "group-hover:bg-gradient-to-tr from-primary to-primary-dark dark:from-[#61DAFB] dark:to-[#06BCEE]",
     "activeAnchors": "bg-gradient-to-tr"
   }
-}
+}

package.json

@@ -32,6 +32,7 @@
     "acorn": "^8.11.3",
     "acorn-typescript": "^1.4.13",
     "css-to-style": "^1.4.0",
+    "dotenv": "^16.4.1",
     "esformatter": "^0.11.3",
     "esformatter-jsx": "^8.0.1",
     "juice": "^10.0.0",

src/Footnote/footnote.tsx

@@ -25,12 +25,21 @@ export const Footnote = ({
 };
 
 export const __docConfig: DocConfig = {
+  icon: "info",
   components: {
     Footnote: {
       examples: {
         default: {
           template: <Footnote>Ceci est un exemple dynamique</Footnote>,
         },
+        test: {
+          template: (
+            <Footnote>
+              Ceci est un exemple d'une footnote qui est très longue et qui a du
+              styling de configuré dessus.
+            </Footnote>
+          ),
+        },
       },
     },
   },