add Noticeable config

config/includedScripts.ts

@@ -17,6 +17,11 @@ const scripts: ScriptItem[] = [
     async: true,
     nonce: "SIGNALWIRE_DOCS_CSP_NONCE",
   },
+  {
+    src: "/scripts/noticeable.js",
+    async: true,
+    nonce: "SIGNALWIRE_DOCS_CSP_NONCE",
+  },
   {
     src: "/scripts/koala.js",
     async: true,

config/navbar.ts

@@ -170,6 +170,7 @@ const navbar: NavbarItem[] = [
     ],
   },
 
+  { to: "/changelog", label: "Changelog", position: "right" },
   {
     href: "https://signalwire.com/signin",
     label: "Dashboard",

config/sidebarsConfig/home-sidebar.ts

@@ -67,6 +67,11 @@ const homeSidebar: SidebarsConfig = {
           label: "Guides",
           href: "/guides",
         },
+        {
+          type: "link",
+          label: "Changelog",
+          href: "/changelog",
+        },
         {
           type: "link",
           label: "Community",

docs/home/changelog/index.mdx

@@ -0,0 +1,17 @@
+---
+slug: /changelog
+displayed_sidebar: homeSidebar
+---
+
+# Changelog
+
+import NoticeableWidget from "@site/src/components/NoticeableWidget";
+
+<NoticeableWidget />
+
+{/*
+<style>{`.container{max-width:100%} `}</style>
+*/}
+
+<style>{`.theme-doc-footer-edit-meta-row{display:none}`}</style>
+<style>{`.container{max-width:var(--ifm-container-width)} `}</style>

docs/home/platform/dashboard/_ui-admonition.mdx

@@ -0,0 +1,35 @@
+import Admonition from '@theme/Admonition';
+import Frame from "@site/src/components/Extras/Frame/Frame";
+import { FaRegWindowMaximize } from "react-icons/fa";
+
+<Accordion 
+  title="The new SignalWire Space Dashboard"
+  description="Identify whether your Space is on the New or Legacy UI"
+  defaultOpen={true}
+  onChange={(isOpen) => console.log('Accordion state:', isOpen)}
+>
+
+{/*<Admonition type="info" icon="✨" title="New Dashboard">*/}
+    A new UI is coming to the SignalWire Space Dashboard.
+    <Tabs>
+        <TabItem value="newui" label="New Dashboard">
+            <div class="row">
+                <div class="col col--4">
+                <Frame caption="The redesigned main menu.">
+                    ![The main sidebar menu of the new SignalWire Space Dashboard UI.](/images/dashboard/sidebar/new-sidebar.webp)
+                </Frame>
+                </div>
+                <div class="col col--8">
+                    The new SignalWire Dashboard features a streamlined sidebar menu. 
+                    Many items are now located in the unified Resource menu.
+                    <Frame>
+                        ![The selection menu when a new Resource is created.](/images/dashboard/resources/add-new-resource.webp)
+                    </Frame>    
+                </div>
+            </div>
+        </TabItem>
+        <TabItem value="legacyui" label="Legacy Dashboard">Legacy Dashboard</TabItem>
+    </Tabs>
+{/*</Admonition>*/}
+
+</Accordion>

docs/home/platform/dashboard/getting-started/navigating-your-space/index.mdx

@@ -1,21 +1,25 @@
 ---
 slug: /platform/dashboard/getting-started/navigating-your-space
-description: A detailed guide on how to Navigate your SignalWire Space.
+description: Explore your SignalWire Space.
 x-custom:
   ported_from_readme: true
   tags:
     - product:signalwire_space
 ---
 
+import NewLegacy from '/docs/home/platform/dashboard/_ui-admonition.mdx'
 
-# Navigating your SignalWire Space
+# Navigate your SignalWire Space
+
+<NewLegacy />
 
 Congratulations, now you have a SignalWire Space!
+
 If not, [create one here](https://signalwire.com/signups/new).
 You can then _log in_ at [here](https://signalwire.com/signin). 
 Here's a quick walkthrough to make sure you can find everything you need.
 
-## Toolbar
+## Toolbar {#test}
 
 In the upper-right corner, you'll notice your toolbar has several items of importance.
 

docs/home/platform/dashboard/getting-started/signing-up-for-a-space/index.mdx

@@ -1,22 +1,18 @@
 ---
-description: The first step on your SignalWire journey is to create a Space and your first project.
+description: Open a new Space, or user account, on the SignalWire platform.
 slug: /platform/dashboard/getting-started/signing-up-for-a-space
+sidebar_position: 0
 x-custom:
   author: rsowald
   tags:
     - product:signalwire_space
 ---
 
-# Creating a SignalWire Space
+# Create a SignalWire Space
 
 To use our services and products, you need a new SignalWire account. 
 From the [website home page](https://signalwire.com/), click on Sign Up in the top right.
 
-<figure>
-  <img className="img-600" src={require("./SW-homepage.webP").default} alt="A screenshot of the SignalWire.com homepage." />
-  <figcaption>Signalwire.com homepage</figcaption>
-</figure>
-
 ## Signing up with a social account
 
 You have two options for sign up. 

docs/home/products/video/getting-started/creating-a-video-room/index.mdx

@@ -19,18 +19,10 @@ If, instead of a widget, you are interested in advanced use cases (such as a
 custom UI, or a custom authentication mechanism), take a look at [First steps with Video](../video-first-steps/index.mdx). It will show you how to write a custom
 video application from scratch using our lower level APIs.
 
-<figure>
-  <img
-    className="img-800"
-    style={{ maxWidth: 700 }}
-    src={require("./ad5760e-video-conference.webP").default}
-    alt="A screenshot of a working video room with two participants. Menu buttons at the bottom enable muting and unmuting audio and video. A red button in the bottom right is labeled 'Leave'."
-  />
-  <figcaption>
-    You can embed the Video Conference widget in any kind of webpage just by
-    pasting a code snippet.
-  </figcaption>
-</figure>
+
+<Frame caption="You can embed the Video Conference widget in any kind of webpage just by pasting a code snippet.">
+  ![A screenshot of a working video room with two participants. Menu buttons at the bottom enable muting and unmuting audio and video. A red button in the bottom right is labeled 'Leave'.](@image/video/conference.webp)
+</Frame>
 
 ## What do you need to get started?
 
@@ -54,15 +46,9 @@ create a new room (with UI included). Finally, click on the dropdown menu next t
 **Moderator Embed Code** and click on **Guest Embed Code** to copy the code. A
 screen like the following will open:
 
-<figure>
-  <img
-    className="img-800"
-    style={{ maxWidth: 600 }}
-    src={require("./13d7faf-GuestCode.webP").default}
-    alt="A screenshot of the Guest Embed Code dialog. Users can copy the provided embed code."
-  />
-  <figcaption>Guest Embed Code Snippet</figcaption>
-</figure>
+<Frame caption="Guest Embed Code Snippet">
+  ![A screenshot of the Guest Embed Code dialog. Users can copy the provided embed code.](@image/video/guest-embed-code.webp)
+</Frame>
 
 You can copy either the code for guests, or the code for accessing the room with moderator permissions. How do they differ?
 
@@ -86,10 +72,9 @@ Since your room's Moderator code snippet gives website visitors permissions over
 
 You can change the look of your Video Conferences in the **Appearance** tab. There are two color schemes available: light and dark, and you can change them accordingly so they fit the look of your web page depending on the time of day.
 
-<figure>
-  <img className="img-800" src={require("./9bce06f-Appearance.webP").default} alt="A screenshot of the Appearance tab of a Video Conference. Users can edit the Background, Foreground, Primary, Success, and Negative colors for both Light and Dark color schemes with a live preview." />
-  <figcaption>Video Conference Appearance Tab</figcaption>
-</figure>
+<Frame caption="Video Conference Appearance Tab">
+  ![A screenshot of the Appearance tab of a Video Conference. Users can edit the Background, Foreground, Primary, Success, and Negative colors for both Light and Dark color schemes with a live preview.](@image/video/conference-appearance.webp)
+</Frame>
 
 ## Using the code
 
@@ -111,43 +96,33 @@ To learn more about the ways you can make more advanced changes to your code sni
 
 Integrating video meetings in WordPress to meet with your team or your customers has never been easier than with Video Conferences! You can add your Video Conference guest code to any page or post, using the **Custom HTML** block. Paste the code snippet in the HTML block, and you are ready to go.
 
-<figure>
-  <img
-    className="img-800"
-    src={require("./a0ad121-CustomHTMLBlock.gif").default}
-    alt="An animated Gif showing a user adding a Custom HTML block with the Video Conference guest code to a WordPress page."
-  />
-  <figcaption>How to add a Custom HTML Block to a page or post.</figcaption>
-</figure>
+<Frame caption="How to add a Custom HTML Block to a page or post.">
+  ![An animated Gif showing a user adding a Custom HTML block with the Video Conference guest code to a WordPress page.](@image/video/wp-custom-html.gif)
+</Frame>
 
 #### Restricting access to your moderator page
 
 Since we do not want everyone to have Moderator permissions, we can create an extra page, for internal use only, by making it Private and only visible to Administrators and Editors.
 
-<figure>
-  <img className="img-800" src={require("./137585f-Private.gif").default} alt="An animated Gif showing a private WordPress page with the Moderator Video Conference code in an HTML block." />
-  <figcaption>How to make a page private.</figcaption>
-</figure>
+<Frame caption="How to make a page private.">
+  ![An animated Gif showing a private WordPress page with the Moderator Video Conference code in an HTML block.](@image/video/wp-private-page.gif)
+</Frame>
 
 #### Restricting access to your guest page
 
 You can password-protect your guest page to only allow certain people to join in. This has the benefit of having a consistent meeting link, but with the added benefit of changing the page password as needed.
 
-<figure>
-  <img className="img-800" src={require("./7e0a6d2-Password.gif").default} alt="An animated Gif showing a password-protected WordPress page with the Guest Video Conference code in an HTML block." />
-  <figcaption>How to password-protect a page.</figcaption>
-</figure>
+<Frame caption="How to password-protect a page.">
+  ![An animated Gif showing a password-protected WordPress page with the Guest Video Conference code in an HTML block.](@image/video/wp-password-protected.gif)
+</Frame>
 
 ### Ghost
 
 Conferencing with readers in Ghost is very simple. To turn any post into a meeting/conference page all you need to do is add the guest code to an **HTML card**.
 
-<figure>
-  <img className="img-800" src={require("./625a72a-GhostHTML.gif").default} alt="An animated GIF showing a user adding an HTML block to a post in the Ghost CMS. The user pastes the Video Conference Guest code into this HTML block." />
-  <figcaption>
-    How to add the code snippet to a post using the HTML card.
-  </figcaption>
-</figure>
+<Frame caption="How to add the code snippet to a post using the HTML card.">
+  ![An animated Gif showing a user adding an HTML block to a post in the Ghost CMS. The user pastes the Video Conference Guest code into this HTML block.](@image/video/ghost-html.gif)
+</Frame>
 
 ## Wrap Up
 

docs/home/products/video/getting-started/getting-started-with-the-signalwire-video-api-1/index.mdx

@@ -26,15 +26,10 @@ This is what we will cover:
 
 When the site is finished, it will look something like this:
 
-<figure>
-  <img
-    className="img-600"
-    style={{ marginBottom: -10 }}
-    src={require("./6212c25-video_room.webP").default}
-    alt="A screenshot of a video call with two participants and a button labeled 'Hang up' beneath the video."
-  />
-  <figcaption>The end result.</figcaption>
-</figure>
+<Frame caption="The end result of this tutorial.">
+![A screenshot of a video call with two participants and a button labeled 'Hang up' beneath the video.](./video-room.webp)
+</Frame>
+
 
 Before we begin, try using the [demo app](https://codesandbox.io/s/simple-video-demo-1ntfr2?file=/src/frontend/index.js).
 This is what we will build, step by step. Feel free to explore the codebase.
@@ -48,26 +43,13 @@ If you already have a SignalWire account, can [sign in to the SignalWire website
 If you're not already registered, you can [**sign up**](https://signalwire.com/signups/new) in trial mode, which comes with a $5 credit.
 This will be plenty to follow along with this guide.
 
-Once you've signed up and verified your email, create a new project.
-Chose any name you like. For this example, we will use "hello world".
+Once you've signed up and verified your email, create a new project. Next, [navigate to the API page](/platform/dashboard/getting-started/navigating-your-space) from the sidebar.
 
-<figure>
-  <img
-    className="img-600"
-    src={require("./356e5f3-new_project.webP").default}
-    alt="A screenshot of an input field. The section is labeled 'Create a New Project'. The input field is labeled 'NAME', with an asterisk marking this input as mandatory. Beneath this input field, there is a blue Save button."
-  />
-</figure>
+<Frame>
 
-After the project has been created, you'll be taken to that project's page.
+![The API page shows the active Project ID and Space URL, and a list of API tokens organized by Name, Token, and Last Used.](@image/dashboard/credentials/api-credentials.webP)
 
-<figure>
-  <img
-    className="img-800"
-    src={require("./2d8a6d6-project_id_sample.webP").default}
-    alt="A screenshot of the project page. The project is titled 'hello world'. Beneath the project title are two tabs, 'Resources' and 'Settings'. 'Resources' is currently selected, and includes the Project ID and Space URL."
-  />
-</figure>
+</Frame>
 
 Two important pieces of information about our project are displayed there:
 
@@ -77,32 +59,8 @@ Two important pieces of information about our project are displayed there:
 
 There is one more piece of information that we need from our new project. We need to generate an **API token** to access SignalWire's APIs from our own code.
 
-We can do that by navigating to the "API" page from the sidebar.
-Once you have navigated to the API page, click on **"Create Token"**.
-Give it an easily idenitifable name, and make sure that the **"Video" scope** is enabled. Then hit **"Save"**.
-
-<figure>
-  <img
-    className="img-800"
-    style={{ maxWidth: 300 }}
-    src={require("./833e1ce-cropped_project_side_menu.webP").default}
-    alt="A screenshot of the sidebar in the SignalWire Space. The options shown are Dashboard, Video, Integrations, API, and Usage."
-  />
-  <figcaption>
-    Sidebar in the SignalWire Space. Click on "API" to create a token.
-  </figcaption>
-</figure>
-
-After the token is created, you will see it listed in the table.
-
-<figure>
-  <img
-    className="img-800"
-    src={require("./8cc8986-api_tokens.webP").default}
-    alt="A table with columns labeled Name, Token, and Last Used."
-  />
-  <figcaption>The API token.</figcaption>
-</figure>
+To generate an API token, click on the New Token button.
+Give it an easily identifiable  name, and make sure that the **"Video" scope** is enabled. Then hit **"Save"**.
 
 :::caution API Tokens are confidential
 
@@ -130,11 +88,29 @@ Your server can directly access the SignalWire servers (for example, to get a li
 However, for a client to interact with SignalWire servers, it must first ask _your server_ to provide a limited-scope token (we call this the _Video Room Token_).
 
 <figure>
-  <img
-    className="img-800"
-    src="/img/getting-started-with-video/f826d87-API_network_interaction.svg"
-    alt="A diagram depicting interactions between SignalWire servers, your server, and the client."
-  />
+
+```mermaid
+sequenceDiagram
+    participant SW as SignalWire Servers
+    participant YS as Your Server
+    participant C as Client (Browser, App, ...)
+
+    YS->>SW: GET list of rooms
+    SW-->>YS: [Room A, Room B, Room C]
+
+    C->>YS: GET Video Room Token for Room A
+    YS->>SW: GET Video Room Token
+    SW-->>YS: { Token }
+    YS-->>C: { Token }
+
+    C->>SW: Join Room A via RELAY Browser SDK
+    SW-->>C: WebRTC Stream (Video & Events)
+
+    C->>SW: Change Room Layout
+    C->>SW: Mute Audio
+    C->>SW: Leave Room
+```
+
   <figcaption>
     A diagram showing the relationship between SignalWire Servers, Your Server, and the
     Client, such as a browser or app. The SignalWire Servers communicate a list of rooms
@@ -374,12 +350,11 @@ to see complete code or fork the repository.
 
 Here is the final result of our development with a preview of some added features:
 
-<img
-  className="img-600"
-  src={require("./50b0037-Screenshot_2021-09-27_at_12.33.07.webP").default}
-  style={{ padding: "20px" }}
-  alt="This screenshot shows a SignalWire video call with three participants. The buttons beneath the video allow the user to do the following actions: Leave the call, Share Screen, change video grid, Mute or Unmute Audio and Video, and change the camera and microphone."
-/>
+<Frame>
+
+![A screenshot of a SignalWire video call with three participants. The buttons beneath the video allow the user to do the following actions: Leave the call, Share Screen, change video grid, Mute or Unmute Audio and Video, and change the camera and microphone.](./video-room-final.webp)
+</Frame>
+
 
 The most noteworthy thing about SignalWire Video technology is that it only streams a single video stream no matter how many participants there are.
 The video is composited on powerful SignalWire servers by stitching all of the individual video streams together.