Add Docusaurus

.github/workflows/deploy.yml

@@ -43,14 +43,23 @@ jobs:
       - name: Run tests
         run: pnpm vitest run
       - name: Build
-        run: pnpm run build:docs
-      - name: Setup Pages
-        uses: actions/configure-pages@v3
-      - name: Upload artifact
-        uses: actions/upload-pages-artifact@v2
-        with:
-          # Upload dist repository
-          path: './dist'
+        run: pnpm run build
+      - name: Build Docs
+        working-directory: docs
+        run: pnpm install & pnpm run build
+
+      # Popular action to deploy to GitHub Pages:
+      # Docs: https://github.com/peaceiris/actions-gh-pages#%EF%B8%8F-docusaurus
       - name: Deploy to GitHub Pages
-        id: deployment
-        uses: actions/deploy-pages@v2
+        uses: peaceiris/actions-gh-pages@v3
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          # Build output to publish to the `gh-pages` branch:
+          publish_dir: ./docs/build
+          # The following lines assign commit authorship to the official
+          # GH-Actions bot for deploys to `gh-pages` branch:
+          # https://github.com/actions/checkout/issues/13#issuecomment-724415212
+          # The GH actions bot is used by default if you didn't specify the two fields.
+          # You can swap them out with your own user credentials.
+          user_name: github-actions[bot]
+          user_email: github-actions[bot]@users.noreply.github.com

docs/.gitignore

@@ -0,0 +1,20 @@
+# Dependencies
+/node_modules
+
+# Production
+/build
+
+# Generated files
+.docusaurus
+.cache-loader
+
+# Misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

docs/README.md

@@ -0,0 +1,41 @@
+# Website
+
+This website is built using [Docusaurus](https://docusaurus.io/), a modern static website generator.
+
+### Installation
+
+```
+$ yarn
+```
+
+### Local Development
+
+```
+$ yarn start
+```
+
+This command starts a local development server and opens up a browser window. Most changes are reflected live without having to restart the server.
+
+### Build
+
+```
+$ yarn build
+```
+
+This command generates static content into the `build` directory and can be served using any static contents hosting service.
+
+### Deployment
+
+Using SSH:
+
+```
+$ USE_SSH=true yarn deploy
+```
+
+Not using SSH:
+
+```
+$ GIT_USER=<Your GitHub username> yarn deploy
+```
+
+If you are using GitHub pages for hosting, this command is a convenient way to build the website and push to the `gh-pages` branch.

docs/babel.config.js

@@ -0,0 +1,5 @@
+/* eslint-disable */
+// noinspection ES6ConvertModuleExportToExport
+module.exports = {
+  presets: [require.resolve("@docusaurus/core/lib/babel/preset")],
+};

docs/docs/intro.mdx

@@ -0,0 +1,9 @@
+---
+sidebar_position: 1
+---
+
+# Introduction
+
+import Readme from "../../README.md";
+
+<Readme />

docs/docs/jsx/index.md

@@ -0,0 +1,7 @@
+---
+sidebar_position: 3
+---
+
+# JSX
+
+This package exports the following JSX elements and React components. These are used in conjunction with [PdfRenderer](../renderer.md) to build a pdfmake document definition object.

docs/docs/jsx/intrinsics.md

@@ -0,0 +1,87 @@
+---
+sidebar_position: 1
+---
+
+# Intrinsic elements
+
+This package defines the following list of intrinsic elements.
+
+## Trivial elements
+
+These are defined such that the reasonable content property is made the `children` of the element, and that property is made the name of the element.
+
+```tsx twoslash
+/// <reference types="react-pdfmake-reconciler/react-jsx" />
+const text = <pdf-text></pdf-text>;
+//            ^?
+
+const columns = <pdf-columns></pdf-columns>;
+//               ^?
+
+const stack = <pdf-stack></pdf-stack>;
+//             ^?
+
+const ol = <pdf-ol></pdf-ol>;
+//          ^?
+
+const ul = <pdf-ul></pdf-ul>;
+//          ^?
+
+const table = <pdf-table></pdf-table>;
+//             ^?
+
+const pageReference = <pdf-pageReference>ref</pdf-pageReference>;
+//                     ^?
+
+const textReference = <pdf-textReference>ref</pdf-textReference>;
+//                     ^?
+
+const image = <pdf-image image="myImage" />;
+//             ^?
+
+const svg = <pdf-svg svg="<svg></svg>" />;
+//           ^?
+
+const qr = <pdf-qr qr="hello" />;
+//          ^?
+
+const canvas = <pdf-canvas canvas={[]} />;
+//              ^?
+```
+
+## Virtual elements
+
+In addition to the above intrinsic elements, there are also these which are categorized as **virtual elements**. These are, in one way or another, specially treated by the renderer where the content key doesn't match the name, or they do not correlate to a rendered content object.
+
+```tsx twoslash
+/// <reference types="react-pdfmake-reconciler/react-jsx" />
+const array = <pdf-array></pdf-array>;
+//             ^?
+
+const cell = (
+  <pdf-cell>
+    // ^?
+    <pdf-text></pdf-text>
+  </pdf-cell>
+);
+
+const column = (
+  <pdf-column>
+    // ^?
+    <pdf-text></pdf-text>
+  </pdf-column>
+);
+
+const li = (
+  <pdf-li>
+    // ^?
+    <pdf-text></pdf-text>
+  </pdf-li>
+);
+
+const tbody = <pdf-tbody>{[]}</pdf-tbody>;
+//             ^?
+
+const toc = <pdf-toc></pdf-toc>;
+//           ^?
+```

docs/docs/jsx/pdf-components/index.mdx

@@ -0,0 +1,7 @@
+---
+sidebar_position: 2
+---
+
+# React PDF components
+
+These components result in `<pdf-*>` intrinsic elements, and should be used for PDF rendering.

docs/docs/jsx/pdf-components/pdf-document.mdx

@@ -0,0 +1,24 @@
+---
+sidebar_position: 1
+sidebar_label: <PdfDocument>
+---
+
+import { PropTable } from "../../../src/components/PropsTable";
+
+# &lt;PdfDocument>
+
+## Props
+
+<PropTable name="PdfDocument" />
+
+## Example
+
+```tsx twoslash
+import { PdfDocument } from "react-pdfmake-reconciler";
+
+const doc = (
+  <PdfDocument pageOrientation="landscape" pageSize="A4">
+    <pdf-text>Hello world!</pdf-text>
+  </PdfDocument>
+);
+```

docs/docs/jsx/pdf-components/pdf-footer.mdx

@@ -0,0 +1,34 @@
+---
+sidebar_position: 3
+sidebar_label: <PdfFooter>
+---
+
+import { PropTable } from "../../../src/components/PropsTable";
+
+# &lt;PdfFooter>
+
+## Props
+
+<PropTable name="PdfFooter" />
+
+## Example
+
+```tsx twoslash
+import { PdfFooter } from "react-pdfmake-reconciler";
+
+const staticFooter = (
+  <PdfFooter>
+    <pdf-text>Hello world!</pdf-text>
+  </PdfFooter>
+);
+
+const dynamicFooter = (
+  <PdfFooter>
+    {(currentPage, pageCount, pageSize) => (
+      <pdf-text>
+        Page {currentPage} / {pageCount}
+      </pdf-text>
+    )}
+  </PdfFooter>
+);
+```

docs/docs/jsx/pdf-components/pdf-header.mdx

@@ -0,0 +1,34 @@
+---
+sidebar_position: 2
+sidebar_label: <PdfHeader>
+---
+
+import { PropTable } from "../../../src/components/PropsTable";
+
+# &lt;PdfHeader>
+
+## Props
+
+<PropTable name="PdfHeader" />
+
+## Example
+
+```tsx twoslash
+import { PdfHeader } from "react-pdfmake-reconciler";
+
+const staticHeader = (
+  <PdfHeader>
+    <pdf-text>Hello world!</pdf-text>
+  </PdfHeader>
+);
+
+const dynamicHeader = (
+  <PdfHeader>
+    {(currentPage, pageCount, pageSize) => (
+      <pdf-text>
+        Page {currentPage} / {pageCount}
+      </pdf-text>
+    )}
+  </PdfHeader>
+);
+```

docs/docs/jsx/pdf-components/pdf-table.mdx

@@ -0,0 +1,34 @@
+---
+sidebar_position: 4
+sidebar_label: <PdfTable>
+---
+
+import { PropTable } from "../../../src/components/PropsTable";
+
+# &lt;PdfTable>
+
+A more user-friendly way to define tables than to use `<pdf-table>`.
+
+## Props
+
+<PropTable name="PdfTable" />
+
+## Example
+
+```tsx twoslash
+import { PdfTable } from "react-pdfmake-reconciler";
+
+const table = (
+  <PdfTable
+    rows={[
+      [<pdf-text>Header 1</pdf-text>, <pdf-text>Header 2</pdf-text>],
+      [
+        <pdf-cell border={[true, true, true, true]}>
+          <pdf-text>Cell 1</pdf-text>
+        </pdf-cell>,
+        <pdf-text>Cell 2</pdf-text>,
+      ],
+    ]}
+  />
+);
+```

docs/docs/jsx/util-components/index.md

@@ -0,0 +1,7 @@
+---
+sidebar_position: 3
+---
+
+# React Utility components
+
+These components are used outside PDF nodes.