From c04e5fbc19af5ffbd2332ca23885803c56682726 Mon Sep 17 00:00:00 2001
From: Trang Le <trang.thule@zoho.com>
Date: Wed, 29 Jun 2022 19:01:17 +0700
Subject: [PATCH 1/2] docs: add explanation for NotionRenderer

---
 packages/react-notion-x/readme.md | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/packages/react-notion-x/readme.md b/packages/react-notion-x/readme.md
index fcffc919..daed32b0 100644
--- a/packages/react-notion-x/readme.md
+++ b/packages/react-notion-x/readme.md
@@ -10,6 +10,22 @@
 
 ## Docs
 
+One of the most frequently export from React Notion X is `NotionRenderer`, a component that streamlines the rendering Notion content into HTML.
+
+It requires the mandatory prop `recordMap`, which is the result of querying a Notion page by calling `getPage` method from `notion-client`.
+
+In addition, it accepts the following optional props:
+
+- `mapPageUrl`: Function for rewriting path to another Notion page if it is linked to in the given page's content.
+- `header` and `footer`: Set the components to be used for rendering `<header>` and `<footer>` element.
+- `defaultPageIcon`, `defaultPageCover`, `defaultPageCoverPosition`: Default icon, image cover and image cover position. If they are defined, they will be rendered inside the `<main>` element.
+- `fullPage`: Render page content only and disregards any header, cover image, and footer
+- `rootDomain`: If defined, when Notion content contains link to another Notion page, NotionRenderer will include the root domain in rewriting `href`.
+- `rootPageId`: If defined, it is useful in the following two cases:
+  - When `header` prop is given, which contains a search bar component, which in turns needs to know the root page id to return children pages within the root page that matches a search query.
+  - When `mapPageUrl` prop is given a function for mapping Notion page urls, it needs to know the root page id. If a given page ID is equal to this root page id, it returns url as `/`, or `/${pageId}` otherwise.
+
+
 See the [full docs](https://github.com/NotionX/react-notion-x).
 
 ## License

From 18632384afacf25430ce650e0d03663f5441904a Mon Sep 17 00:00:00 2001
From: Trang Le <trang.thule@zoho.com>
Date: Thu, 30 Jun 2022 22:28:19 +0700
Subject: [PATCH 2/2] feat(docs): add explanation for NotionRenderer

---
 packages/react-notion-x/readme.md | 82 +++++++++++++++++++++++++++++--
 1 file changed, 77 insertions(+), 5 deletions(-)

diff --git a/packages/react-notion-x/readme.md b/packages/react-notion-x/readme.md
index daed32b0..07c89869 100644
--- a/packages/react-notion-x/readme.md
+++ b/packages/react-notion-x/readme.md
@@ -14,12 +14,84 @@ One of the most frequently export from React Notion X is `NotionRenderer`, a com
 
 It requires the mandatory prop `recordMap`, which is the result of querying a Notion page by calling `getPage` method from `notion-client`.
 
-In addition, it accepts the following optional props:
+Bare minimum markup for a Notion page with id `1234` which contains two block ids 1 and 2:
 
-- `mapPageUrl`: Function for rewriting path to another Notion page if it is linked to in the given page's content.
-- `header` and `footer`: Set the components to be used for rendering `<header>` and `<footer>` element.
-- `defaultPageIcon`, `defaultPageCover`, `defaultPageCoverPosition`: Default icon, image cover and image cover position. If they are defined, they will be rendered inside the `<main>` element.
-- `fullPage`: Render page content only and disregards any header, cover image, and footer
+```
+<main class="notion notion-app notion-block-1234">
+  <div class="notion-viewport"></div>
+  <div class="notion-text notion-block-1"></div>
+  <div class="notion-text notion-block-2"></div>
+</main>
+```
+
+`<NotionRender>` accepts many optional props to suit a variety of page building scenarios:
+
+### `fullPage`
+
+This prop determines how the rendered page will look. If set to `true`, the page will include the extra elements:
+- header (provided by `NotionRenderer` by default)
+- page title (inferred from the Title property of the page)
+- aside and footer (only if the `aside` and `footer` props are given values)
+
+### `header`
+
+`NotionRender` already renders a `<header>` element by default that includes breadcrumbs for the current page. If `header` prop is defined, this element will be added right after the default `<header>` element.
+
+Example markup when `fullPage` is set to `true` and `header` is defined:
+
+```
+const header = <div className="header"></div>
+
+return (
+  <NotionRender
+    fullPage={true}
+    header={header}
+  />
+)
+```
+
+Equivalent markup:
+
+```
+<div class="notion notion-app notion-block-1234">
+  <div class="notion-viewport"></div>
+  <div class="notion-frame">
+    <header class="notion-header"></header>
+    <div class="notion-page-scroller">
+      <main>
+        <h1 class="notion-title"></h1>
+        <div notion-page-content>
+          <article class="notion-page-content-inner">
+            <div class="notion-text notion-block-1"></div>
+            <div class="notion-text notion-block-2"></div>
+          </article>
+        </div>
+      </main>
+    </div>
+  </div>
+</div>
+
+```
+
+### `footer`
+
+This only takes effect when `fullPage` is set to `true` and will add an extra element after the `<main>` element.
+
+### `pageHeader`
+
+This adds an extra element before `<h1>` and this element will become the first child of `<main>`.
+
+### `pageFooter`
+
+This adds an extra element as the last child of `<main>`.
+
+### `mapPageUrl`
+
+Function for rewriting path to another Notion page if it is linked to in the given page's content.
+
+### `defaultPageIcon`, `defaultPageCover`, `defaultPageCoverPosition`
+
+Default icon, image cover and image cover position. If they are defined, they will be rendered inside the `<main>` element.
 - `rootDomain`: If defined, when Notion content contains link to another Notion page, NotionRenderer will include the root domain in rewriting `href`.
 - `rootPageId`: If defined, it is useful in the following two cases:
   - When `header` prop is given, which contains a search bar component, which in turns needs to know the root page id to return children pages within the root page that matches a search query.