Feat: Write docs for prefab contributions (#49)

_prefab-docs-boilerplate/add-to-prefabs-index.json

@@ -0,0 +1,19 @@
+{
+  "label": "My Prefab",
+  "desc": "A description of what my Prefab does",
+  "icon": "library/prefabs/my-prefab/thumb.png",
+  "project": "library/prefabs/my-prefab/YOUR_PREFAB_ZIP_HERE.zip",
+  "docs": "/library/prefabs/my-prefab/",
+  "tags": [
+    "UI",
+    "Data",
+    "Utility",
+    "Cloud",
+    "Service",
+    "Networking",
+    "Device",
+    "Code",
+    "Analytics",
+    "Animation"
+  ]
+}

_prefab-docs-boilerplate/add-to-sidebarsLibrary.js

@@ -0,0 +1,30 @@
+// My Prefab Sidebar
+MyPrefabSidebar: [
+  {
+    type: 'doc',
+    label: 'Overview',
+    id: 'prefabs/my-prefab/README',
+  },
+  {
+    type: 'category',
+    label: 'Components',
+    collapsible: false,
+    items: [
+      {
+        type: 'doc',
+        label: 'Setup My Prefab',
+        id: 'prefabs/my-prefab/components/setup-my-prefab/README',
+      },
+      {
+        type: 'doc',
+        label: 'Request',
+        id: 'prefabs/my-prefab/components/my-prefab-request/README',
+      },
+    ],
+  },
+  {
+    type: 'link',
+    label: 'Back to prefabs',
+    href: '/library/prefabs/overview',
+  },
+];

_prefab-docs-boilerplate/docs-starter/markdown/README.md

@@ -0,0 +1,40 @@
+---
+title: My Prefab
+hide_title: true
+---
+
+# My Prefab
+
+A good idea is to start the docs with a short 2-3 sentence description of what the prefab does. In this starter you will see some made up info about a made up prefab called My Prefab.
+
+> This is how to write a blockquote. It is neat to (sparingly) use for extra important info or if you want to add some attribution the [Author](https://noodl.net) of the Prefab.
+
+<div className="ndl-image-with-background">
+
+![](/library/prefabs/my-prefab/thumb.png)
+
+</div>
+
+Above you can see how images should be added. The last class is determining the size of the image. It can be left blank, but also supports the classes `s`, `m`, `l` and `xl`. Image paths are relative to the `static` folder in the docs root.
+
+## Included components
+
+After the introduction, it is recommended to add a linked index of all the included components, with a short description.
+
+- **[My Prefab - Setup](./components/setup-my-prefab/README.md)**: Sets up My Prefab. Must be placed in your projects home component.
+- **[My Prefab - Request](./components/my-prefab-request/README.md)**: Does an API Call to My Prefabs Endpoint and returns the result.
+
+## Quickstart
+
+A quickstart is always nice to have in the overview, for people to get going quickly. It could look something like this:
+
+First, drop a **My Prefab - Setup** in your project home component. Then set the `API Key` and the `Datasource`. Finally, open the Project Settings sidebar, find the **Head Code** input and paste the following at the top:
+
+```html
+<script
+  type="text/javascript"
+  src="https://some-cdn.com/my-example-library.js"
+></script>
+```
+
+After this you can use the **My Prefab - Request** to make requests across your app.

_prefab-docs-boilerplate/docs-starter/markdown/components/my-prefab-request/README.md

@@ -0,0 +1,45 @@
+---
+title: My Prefab - Request
+hide_title: true
+---
+
+# My Prefab - Request
+
+This component is used to call My Prefab endpoints.
+
+> Please note that [My Prefab - Setup](/library/prefabs/my-prefab/components/setup-my-prefab/) needs to be set up in your app before you can properly use this component.
+
+## Extracting the data
+
+The simplest way to extract the data from the response is by using an [Expression](/nodes/math/expression/) node, and accessing the body from the response:
+
+<div className="ndl-image-with-background l">
+
+![](/library/prefabs/my-prefab/request.png)
+
+</div>
+
+For more advanced extraction (and parsing) you can use a [Function](/nodes/javascript/function) node.
+
+## Inputs
+
+| Data                                           | Description                                                                                               |
+| ---------------------------------------------- | --------------------------------------------------------------------------------------------------------- |
+| <span className="ndl-data">Endpoint</span>     | The path of the endpoint to be called within the API Group, like `/auth/signup` or `/auth/login`.         |
+| <span className="ndl-data">Request Type</span> | The type of request you want send. Follows the HTTP standards `GET`, `POST`, `PUT`, `PATCH` and `DELETE`. |
+| <span className="ndl-data">Data</span>         | A JSON formatted payload that will be sent as Request Body.                                               |
+
+| Signals                                | Description                                        |
+| -------------------------------------- | -------------------------------------------------- |
+| <span className="ndl-signal">Do</span> | Sends a Signal to this input to start the request. |
+
+## Outputs
+
+| Data                                       | Description                                   |
+| ------------------------------------------ | --------------------------------------------- |
+| <span className="ndl-data">Response</span> | The JSON formatted response from the request. |
+
+| Signals                                     | Description                                                                      |
+| ------------------------------------------- | -------------------------------------------------------------------------------- |
+| <span className="ndl-signal">Success</span> | Sends a signal when the request succeeded.                                       |
+| <span className="ndl-signal">Failure</span> | Sends a signal when an error occurred, and logs an error message in the console. |

_prefab-docs-boilerplate/docs-starter/markdown/components/setup-my-prefab/README.md

@@ -0,0 +1,36 @@
+---
+title: My Prefab - Setup
+hide_title: true
+---
+
+# My Prefab - Setup
+
+This component is used to configure My Prefab, enabling your app to establish connections and query your endpoints.
+
+This prefab will not work unless you place one instance of the **My Prefab - Setup** component in your projects Home Component and set the `API Key` and `Datasource` values:
+
+<div className="ndl-image-with-background xl">
+
+![](/library/prefabs/my-prefab/setup.png)
+
+</div>
+
+Below is how **Inputs** and **Outputs** should be documented. Please note the CSS classes attached to each key in the table, as well as the tables titles.
+
+## Inputs
+
+| Data                                         | Description                                                                 |
+| -------------------------------------------- | --------------------------------------------------------------------------- |
+| <span className="ndl-data">API Key</span>    | The base Request URL used to call all the endpoints of the API Groups.      |
+| <span className="ndl-data">Datasource</span> | The data environment to be used in your Xano workspace. Defaults to `live`. |
+
+## Outputs
+
+| Data                                     | Description                                                                        |
+| ---------------------------------------- | ---------------------------------------------------------------------------------- |
+| <span className="ndl-data">Status</span> | The status of the prefab initialization. Can be `unloaded`, `loading` or `loaded`. |
+
+| Signals                                     | Description                                                                                        |
+| ------------------------------------------- | -------------------------------------------------------------------------------------------------- |
+| <span className="ndl-signal">Success</span> | Sends a signal when the Xano Client initilized successfully.                                       |
+| <span className="ndl-signal">Failure</span> | Sends a signal when the Xano Client failed initializing. Outputs the error message in the console. |