Feature/docs (#67)

2022-11-04 17:41:12 -04:00
parent 7a1ec55a5c
commit 81ca566b5e
152 changed files with 1862 additions and 3832 deletions
--- a/website/content/docs/additional-links.mdx
+++ b/website/content/docs/additional-links.mdx
@ -0,0 +1,66 @@
+---
+group: Customization
+title: Custom Links & Pages
+weight: 60
+---
+
+The Static CMS exposes a `window.CMS` global object that you can use to register external links or links custom pages, via `registerAdditionalLink`. The links are displayed at the bottom of the navigation menu in the order they are registered.
+
+### React Components Inline
+
+The `registerPreviewTemplate` requires you to provide a React component. If you have a build process in place for your project, it is possible to integrate with this build process.
+
+However, although possible, it may be cumbersome or even impractical to add a React build phase. For this reason, Static CMS exposes some constructs globally to allow you to create components inline: `h` (alias for React.createElement) as well some basic hooks (`useState`, `useMemo`, `useEffect`, `useCallback`).
+
+**NOTE**: `createClass` is still provided, allowing for the creation of react class components. However it has now been deprecated and will be removed in `v2.0.0`.
+
+## Params
+
+`registerAdditionalLink` takes an `AdditionalLink` object with the following properties:
+
+| Param   | Type                                                                                          | Description                                                                                                                                   |
+| ------- | --------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------- |
+| id      | string                                                                                        | Unique identifier for the link                                                                                                                |
+| title   | string                                                                                        | Display text for the link                                                                                                                     |
+| data    | string<br />\| [React Function Component](https://reactjs.org/docs/components-and-props.html) | <ul><li>`string` - The href for the link</li><li>`React Function Component` - A react component to render on the route `/page/[id]`</li></ul> |
+| options | object                                                                                        | _Optional_. See [Options](#options)                                                                                                           |
+
+### Options
+
+Available options for each additional link are:
+
+| Param    | Type   | Description                                                                             |
+| -------- | ------ | --------------------------------------------------------------------------------------- |
+| iconName | string | The name of a custom registered icon to display. See [Custom Icons](/docs/custom-icons) |
+
+## Examples
+
+### External Links
+
+```js
+CMS.registerAdditionalLink({
+  id: 'example',
+  title: 'Example.com',
+  data: 'https://example.com',
+  options: {
+    icon: 'page',
+  },
+});
+```
+
+### Custom Page
+
+```js
+const CustomPage = () => {
+  return h('div', {}, 'I am a custom page!');
+};
+
+CMS.registerAdditionalLink({
+  id: 'custom-page',
+  title: 'Custom Page',
+  data: CustomPage,
+  options: {
+    icon: 'page',
+  },
+});
+```