Merge pull request #44 from podium-lib/podium-store-bridge-browser

docs: consolidate getting started and context

Author: wkillerud

.github/workflows/pull-request.yml

@@ -0,0 +1,22 @@
+name: Pull request
+
+on:
+  pull_request:
+    branches:
+      - source
+
+jobs:
+  build:
+    name: Build
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+
+      - name: Install dependencies
+        run: npm install
+
+      - name: Build website
+        run: npm run build

docs/api/assets.md

@@ -96,7 +96,7 @@ const server = http.createServer(async (req, res) => {
 
 server.listen(7100);
 ```
-    
+
 </TabItem>
 </Tabs>
 
@@ -460,17 +460,17 @@ client side assets.
 
 An `AssetJS` instance has the following properties:
 
-| property       | type      | getter  | setter  | default      | details                                                        |
-| -------------- | --------- | ------- | ------- | ------------ | -------------------------------------------------------------- |
-| value          | `string`  | &check; |         | `''`         | Relative or absolute URL to the CSS asset                      |
-| src            | `string`  | &check; |         | `''`         | Alias for the `value` property                                 |
-| referrerpolicy | `string`  | &check; | &check; | `undefined`  | Correlates to the same attribute on an HTML `<script>` element |
-| crossorigin    | `string`  | &check; | &check; | `undefined`  | Correlates to the same attribute on an HTML `<script>` element |
-| integrity      | `string`  | &check; | &check; | `undefined`  | Correlates to the same attribute on an HTML `<script>` element |
-| nomodule       | `boolean` | &check; | &check; | `false`      | Correlates to the same attribute on an HTML `<script>` element |
-| async          | `boolean` | &check; | &check; | `false`      | Correlates to the same attribute on an HTML `<script>` element |
-| defer          | `boolean` | &check; | &check; | `false`      | Correlates to the same attribute on an HTML `<script>` element |
-| type           | `string`  | &check; | &check; | `undefined`  | Correlates to the same attribute on an HTML `<script>` element |
+| property       | type      | getter  | setter  | default     | details                                                        |
+| -------------- | --------- | ------- | ------- | ----------- | -------------------------------------------------------------- |
+| value          | `string`  | &check; |         | `''`        | Relative or absolute URL to the CSS asset                      |
+| src            | `string`  | &check; |         | `''`        | Alias for the `value` property                                 |
+| referrerpolicy | `string`  | &check; | &check; | `undefined` | Correlates to the same attribute on an HTML `<script>` element |
+| crossorigin    | `string`  | &check; | &check; | `undefined` | Correlates to the same attribute on an HTML `<script>` element |
+| integrity      | `string`  | &check; | &check; | `undefined` | Correlates to the same attribute on an HTML `<script>` element |
+| nomodule       | `boolean` | &check; | &check; | `false`     | Correlates to the same attribute on an HTML `<script>` element |
+| async          | `boolean` | &check; | &check; | `false`     | Correlates to the same attribute on an HTML `<script>` element |
+| defer          | `boolean` | &check; | &check; | `false`     | Correlates to the same attribute on an HTML `<script>` element |
+| type           | `string`  | &check; | &check; | `undefined` | Correlates to the same attribute on an HTML `<script>` element |
 
 ## Methods
 

docs/api/browser.md

@@ -3,30 +3,52 @@ id: browser
 title: "@podium/browser"
 ---
 
-The `@podium/browser` package contains classes to provide browser based functionality when building Podium micro-frontends.
-
-For now, this module only includes [MessageBus](#messagebus), but it is possible that it will include more features in the future.
+The `@podium/browser` module is a client-side library designed to simplify communication between a podlet and the layout, and between podlets.
 
 ## Installation
 
 ```bash
-$ npm install @podium/browser
+npm install @podium/browser
 ```
 
-## MessageBus
+## Usage
+
+In your podlet's client side JavaScript code, import the `MessageBus` class from the browser package and create a new instance of the class.
+
+```js
+import { MessageBus } from "@podium/browser";
 
-Cross podlet communication and message passing. For a information and examples on how and when to use this module, see [the guide](../podlet/podlet_to_podlet_communication)
+const messageBus = new MessageBus();
+```
+
+### Publishing messages
+
+To publish a message, call the `publish` method and pass a `channel`, a `topic` and any data you want subscribers to receive.
+
+```js
+messageBus.publish("reminders", "newReminder", reminder);
+```
 
-### Constructor
+### Subscribing to messages
 
-Create a new MessageBus instance.
+To subscribe to messages on a particular channel and topic, call the `subscribe` method passing it the `channel`, `topic` and a callback function to be executed whenever an event occurs. Whenever the callback is executed it gets passed an `Event` object which has the properties `channel`, `topic` and `payload`.
+
+```js
+messageBus.subscribe("reminders", "newReminder", (event) => {
+  const reminder = event.payload;
+});
+```
+
+## API
+
+### MessageBus
+
+Cross podlet communication and message passing.
 
 ```javascript
 const messageBus = new MessageBus();
 ```
 
-### API
-
 #### .publish(channel, topic, payload)
 
 Publish an event for a channel and topic combination. Returns the event object passed to subscribers.
@@ -42,9 +64,9 @@ This method takes the following arguments:
 Examples:
 
 ```javascript
-messageBus.publish('search', 'query', 'laptop');
+messageBus.publish("search", "query", "laptop");
 
-messageBus.publish('auth', 'logout');
+messageBus.publish("auth", "logout");
 ```
 
 #### .subscribe(channel, topic, callback)
@@ -62,8 +84,8 @@ This method takes the following arguments:
 Example:
 
 ```javascript
-messageBus.subscribe('channel', 'topic', event => {
-    console.log(event.payload);
+messageBus.subscribe("channel", "topic", (event) => {
+  console.log(event.payload);
 });
 ```
 
@@ -83,12 +105,12 @@ Example:
 
 ```javascript
 function cb(event) {
-    console.log(event.payload);
+  console.log(event.payload);
 }
 
-messageBus.subscribe('channel', 'topic', cb);
+messageBus.subscribe("channel", "topic", cb);
 
-messageBus.unsubscribe('channel', 'topic', cb);
+messageBus.unsubscribe("channel", "topic", cb);
 ```
 
 #### .peek(channel, topic)
@@ -117,9 +139,9 @@ This method takes the following arguments:
 Example:
 
 ```javascript
-const events = messageBus.log('channel', 'topic');
+const events = messageBus.log("channel", "topic");
 
-events.forEach(event => {
-    console.log(event.payload);
+events.forEach((event) => {
+  console.log(event.payload);
 });
-```
+```

docs/api/getting_started.md renamed to docs/api/http-framework-compatibility.mdx

@@ -1,22 +1,10 @@
 ---
-id: getting_started
-title: Getting Started
+title: HTTP Framework Compatibility
 ---
 
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
-Podium consists of two parts; podlets and layouts, each with its own matching module to be used for development.
-
-### Podlets
-
-When writing a server for serving page fragments (podlets), the [@podium/podlet module](api/podlet.md) should be used.
-
-### Layouts
-
-When writing a layout server in order to compose page fragments together, the [@podium/layout module](api/layout.md) should be used.
-
-## HTTP Framework Compabillity
 
 Podium is HTTP framework agnostic with first class support for [Express]. In
 practise this means that core Podium works with the standard [http.Server]