docs: add docs for RealtimeDB

Author: codediodeio

docs/src/components/SideNav.astro

@@ -21,6 +21,11 @@
     <li><a href="/storage/upload-task">&ltUploadTask&gt</a></li>
     <li><a href="/storage/download-url">&ltDownloadURL&gt</a></li>
     <li><a href="/storage/storage-list">&ltStorageList&gt</a></li>
+    <li class="heading">realtime db</li>
+    <li><a href="/rtdb/node-store">nodeStore</a></li>
+    <li><a href="/rtdb/node-list-store">nodeListStore</a></li>
+    <li><a href="/rtdb/node-component">&ltNode&gt</a></li>
+    <li><a href="/rtdb/node-list-component">&ltNodeList&gt</a></li>
     <li class="heading">analytics</li>
     <li><a href="/guide/todo">&ltPageView&gt</a></li>
   </ul>

docs/src/pages/rtdb/node-component.md

@@ -0,0 +1,40 @@
+---
+title: Node Component
+pubDate: 2023-07-23
+description: SvelteFire Node Component API reference
+layout: ../../layouts/MainLayout.astro
+---
+
+# Node
+
+The `Node` component is a wrapper around the `nodeStore`. It renders the node data and handles the loading state. 
+
+### Props
+
+- `path` - RealtimeDB path string (e.g. `posts/hi-mom`)
+- `startWith` - (optional) initial value to use before the data is fetched
+
+### Slots
+
+- `default` - The node data
+- `loading` - Loading state
+
+### Slot Props
+
+- `data` - The node data
+- `path` - The Database reference
+- `rtdb` - The Database instance
+
+### Example
+
+```svelte
+<script>
+    import { Node } from 'sveltefire';
+</script>
+
+<Node path={'posts/id'} let:data>
+    <p>{data?.title}</p>
+
+    <p slot="loading">Loading...</p>
+</Node>
+```

docs/src/pages/rtdb/node-list-component.md

@@ -0,0 +1,46 @@
+---
+title: NodeList Component
+pubDate: 2023-07-23
+description: SvelteFire NodeList Component API reference
+layout: ../../layouts/MainLayout.astro
+---
+
+# NodeList
+
+The `NodeList` component is a wrapper around the `nodeListStore`. It renders the node list data and handles the loading state. 
+
+### Props
+
+- `path` - RealtimeDB reference
+- `startWith` - (optional) initial value to use before the collection is fetched
+
+### Slots
+
+- `default` - The node list data
+- `loading` - Loading state
+
+### Slot Props
+
+- `data` - An array of nodes
+- `ref` - The Database node reference
+- `rtdb` - The Database instance
+- `count` - The number of nodes returned by the query
+
+### Example
+
+```svelte
+<script>
+    import { NodeList } from 'sveltefire';
+</script>
+
+<NodeList path={'posts'} let:data let:count>
+
+    <p>Found {count} posts</p>
+    
+    {#each data as post}
+        <p>{post.title}</p>
+    {/each}
+
+    <p slot="loading">Loading...</p>
+</NodeList>
+```

docs/src/pages/rtdb/node-list-store.md

@@ -0,0 +1,31 @@
+---
+title: nodeListStore
+pubDate: 2023-11-23
+description: SvelteFire nodeStore API reference
+layout: ../../layouts/MainLayout.astro
+---
+
+# nodeListStore
+
+Subscribes to RealtimeDB node list data and listens to real-time updates. 
+
+### Parameters
+
+- `rtdb` - RealtimeDB instance
+- `path` - A RealtimeDB path string (e.g. `posts`)
+- `startWith` - (optional) initial value to use before the data is fetched
+
+### Example
+
+```svelte
+<script>
+    import { nodeListStore } from 'sveltefire';
+    import { rtdb } from '$lib/firebase'; // your rtdb instance
+
+    const posts = nodeListStore(rtdb, 'posts');
+</script>
+
+{#each $posts as post}
+    <p>{post.title}</p>
+{/each}
+```

docs/src/pages/rtdb/node-store.md

@@ -0,0 +1,29 @@
+---
+title: nodeStore
+pubDate: 2023-11-23
+description: SvelteFire nodeStore API reference
+layout: ../../layouts/MainLayout.astro
+---
+
+# nodeStore
+
+Subscribes to RealtimeDB node and listens to realtime updates. 
+
+### Parameters
+
+- `rtdb` - RealtimeDB instance
+- `path` - A RealtimeDB path string (e.g. `posts/hi-mom`)
+- `startWith` - (optional) initial value to use before the data is fetched
+
+### Example
+
+```svelte
+<script>
+    import { nodeStore } from 'sveltefire';
+    import { rtdb } from '$lib/rtdb'; // your RealtimeDB instance
+
+    const post = nodeStore(rtdb, 'posts/id');
+</script>
+
+{$post?.title}
+```