Update docs

danvim · Jan 15, 2024 · 3c4c940 · 3c4c940
1 parent e099263
commit 3c4c940
Show file tree

Hide file tree

Showing 11 changed files with 388 additions and 82 deletions.
diff --git a/docs/docs/jsx/pdf-components/pdf-document.mdx b/docs/docs/jsx/pdf-components/pdf-document.mdx
@@ -1,11 +1,10 @@
 ---
 sidebar_position: 1
-sidebar_label: <PdfDocument>
 ---
 
 import { PropTable } from "../../../src/components/PropsTable";
 
-# &lt;PdfDocument>
+# PdfDocument
 
 ## Props
 

diff --git a/docs/docs/jsx/pdf-components/pdf-footer.mdx b/docs/docs/jsx/pdf-components/pdf-footer.mdx
diff --git a/docs/docs/jsx/pdf-components/pdf-header-footer.mdx b/docs/docs/jsx/pdf-components/pdf-header-footer.mdx
@@ -0,0 +1,45 @@
+---
+sidebar_position: 2
+---
+
+import { PropTable } from "../../../src/components/PropsTable";
+
+# PdfHeader & PdfFooter
+
+Implemented using React Portals, you can define static/dynamic header and footer using `<PdfHeader>` and `<PdfFooter>`.
+
+## PdfHeader Props
+
+<PropTable name="PdfHeader" />
+
+## PdfFooter Props
+
+<PropTable name="PdfFooter" />
+
+## Example
+
+```tsx twoslash
+import { PdfHeader, PdfFooter } from "react-pdfmake-reconciler";
+
+const staticHeader = (
+  <PdfHeader>
+    <pdf-text>Hello world!</pdf-text>
+  </PdfHeader>
+);
+
+const dynamicFooter = (
+  <PdfFooter>
+    {(currentPage, pageCount, pageSize) => (
+      <pdf-text>
+        Page {currentPage} / {pageCount}
+      </pdf-text>
+    )}
+  </PdfFooter>
+);
+```
+
+## Regarding React Context
+
+The way how dynamic content is that the renderer statically renders the function separately, so Context doesn't
+penetrate into dynamic content, just like [PdfRenderer](../util-components/pdf-preview.mdx#regarding-react-context).
+See also for workaround.
diff --git a/docs/docs/jsx/pdf-components/pdf-header.mdx b/docs/docs/jsx/pdf-components/pdf-header.mdx
diff --git a/docs/docs/jsx/pdf-components/pdf-table.mdx b/docs/docs/jsx/pdf-components/pdf-table.mdx
@@ -1,11 +1,10 @@
 ---
-sidebar_position: 4
-sidebar_label: <PdfTable>
+sidebar_position: 3
 ---
 
 import { PropTable } from "../../../src/components/PropsTable";
 
-# &lt;PdfTable>
+# PdfTable
 
 A more user-friendly way to define tables than to use `<pdf-table>`.
 

diff --git a/docs/docs/jsx/util-components/pdf-preview.mdx b/docs/docs/jsx/util-components/pdf-preview.mdx
@@ -42,8 +42,6 @@ PdfContext.Provider
     └ Fragment key="1-1"
 ```
 
-Try removing a row via the React Development Tools and see the PDF rerendering in action.
-
 <PdfPreview style={{ width: "100%", height: 500 }}>
   <StrictMode>
     <pdf-text>Hello world!</pdf-text>

diff --git a/docs/docusaurus.config.ts b/docs/docusaurus.config.ts
@@ -3,6 +3,7 @@ import type { Config } from "@docusaurus/types";
 import type * as Preset from "@docusaurus/preset-classic";
 import remarkTwoslash from "remark-shiki-twoslash";
 import remarkHtmlToJsx from "./remark-plugins/remarkHtmlToJsx";
+import { Options } from "docusaurus-plugin-react-docgen-typescript";
 
 const config: Config = {
   title: "React pdfmake Reconciler",
@@ -75,7 +76,7 @@ const config: Config = {
 
   themeConfig: {
     // Replace with your project's social card
-    image: "img/social-card.jpg",
+    image: "img/social-card.png",
     navbar: {
       title: "React pdfmake Reconciler",
       logo: {
@@ -129,18 +130,18 @@ const config: Config = {
   plugins: [
     [
       "docusaurus-plugin-react-docgen-typescript",
-      /** @type {import('docusaurus-plugin-react-docgen-typescript').Options} */
       {
         // pass in a single string or an array of strings
+        global: false,
+        globOptions: null,
         src: ["../src/**/*.tsx"],
         parserOptions: {
-          propFilter: {
-            skipChildrenPropWithoutDoc: false,
-          },
+          skipChildrenPropWithoutDoc: false,
         },
-      },
+      } satisfies Options,
     ],
     "docusaurus-plugin-sass",
+    "docusaurus-lunr-search",
   ],
 };
 

diff --git a/docs/package.json b/docs/package.json
@@ -30,9 +30,11 @@
     "@types/pdfkit": "^0.13.3",
     "@types/pdfmake": "^0.2.8",
     "@types/react": "^18.2.43",
+    "docusaurus-lunr-search": "^3.3.1",
     "docusaurus-plugin-react-docgen-typescript": "^1.1.0",
     "docusaurus-plugin-sass": "^0.2.5",
     "docusaurus-preset-shiki-twoslash": "^1.1.41",
+    "lunr": "^2.3.9",
     "mdast-util-from-markdown": "^2.0.0",
     "mdast-util-mdx": "^3.0.0",
     "micromark-extension-mdxjs": "^3.0.0",