move pages from template into dedicated folder, start adding v5 conte…

…nt to a v5 folder

src/app/layout.tsx

@@ -9,8 +9,8 @@ import '@/styles/tailwind.css'
 
 export const metadata: Metadata = {
   title: {
-    template: '%s - Protocol API Reference',
-    default: 'Protocol API Reference',
+    template: '%s - Firebot Docs',
+    default: 'Firebot Docs',
   },
 }
 

src/app/page.mdx

@@ -15,7 +15,7 @@ export const sections = [
 
 <HeroPattern />
 
-# API Documentation
+# Documentation
 
 Use the Protocol API to access contacts, conversations, group messages, and more and seamlessly integrate your product into the workflows of dozens of devoted Protocol users. {{ className: 'lead' }}
 

src/app/v5/dev/environment-setup/page.mdx

@@ -0,0 +1,71 @@
+# Developers
+We welcome all community developers who would like to help with Firebot. If you'd like to participate we recommend starting with some "Entry Level" bugs or feature requests on the issues page. After a commit or two you'll be invited to the Firebot developer channel where we discuss everything.
+
+## IDE
+We highly recommend you use **Visual Studio Code**, but you are welcome to use whatever IDE you prefer.
+
+
+## Installation
+
+### 1. Prerequisites  
+* [Git](https://git-scm.com/downloads)
+* [Nodejs](https://nodejs.org/en/download/)
+* [Volta](https://docs.volta.sh/guide/getting-started) (Dynamically sets your node/npm version when working in Firebot)
+* [Python](https://www.python.org/downloads/release/python-391/) (3.7, 3.8, or 3.9)
+
+#### **Windows**
+* [Windows Build Tools](https://www.microsoft.com/en-us/download/details.aspx?id=48159)
+
+*OR*
+
+* Install Visual Studio Community with C++ package
+
+#### **Linux**
+You will need libx11-dev libxtst-dev libpng-dev installed  
+For Debian distros use:
+```
+apt install libx11-dev libxtst-dev libpng-dev
+````
+
+#### **macOS**
+* [Xcode](https://developer.apple.com/xcode/download/)
+  * You also need to install the `XCode Command Line Tools` by running `xcode-select --install`. Alternatively, if you already have the full Xcode installed, you can find them under the menu `Xcode -> Open Developer Tool -> More Developer Tools...`.
+
+### 2. Install Global Packages  
+Run from a console/terminal with admin privileges:
+```
+npm install --global --production node-gyp grunt-cli
+```
+
+
+### 3. Clone Repo
+Create a new directory/folder  
+Open the folder/directory in a console/terminal and run:
+```
+git clone https://github.com/crowbartools/Firebot.git .
+```
+
+
+
+### 4. Install Dependencies
+Open the folder/directory of Firebot's repo in a console/terminal with admin privileges and run:
+```
+npm run setup
+```
+
+### 5. Create secrets.json
+Before Firebot will start, a `secrets.json` file will need to be setup. 
+- At the root level of the project, you will find a `secrets.template.json` file. Duplicate it and rename the copy to `secrets.json`.
+- In this file are empty strings for OAuth client and secret keys for Twitch and various 3rd party integrations. The **only needed keys for development are the Twitch ones** (unless you plan to dev features for any of the integrations)
+- To create your own OAuth client for Twitch, you can register a Twitch "application" at: https://dev.twitch.tv/console/apps/create
+  - Name can be anything, ie `FirebotDev`
+  - Set the callback URL to `http://localhost:7472/api/v1/auth/callback`
+- Input your Client ID and Client Secret into the `secrets.json` file.
+
+
+
+### 6. Run Firebot from Dev Environment
+Open the folder/directory of Firebot's repo in a console/terminal and run:
+```
+npm start
+```

src/app/v5/dev/scripts/page.mdx

@@ -0,0 +1,209 @@
+# Overview
+Firebot allows you to fire off custom logic when an effect is triggered. Custom scripts can also define new effect types, event types, $variables, and much much more. This enables developers to extend Firebot's capabilities beyond the base app. Custom scripts must be written in JavaScript (or compiled to JS via TypeScipt) and are treated as a Node module, so at least a basic understanding of JavaScript will be required. We also have a template starter script written in TypeScript available. **We highly recommend using this**. 
+
+## Template Script
+Want to jump right into it? 
+
+We have a template starter repo built in Typescript [here](https://github.com/crowbartools/firebot-custom-script-starter).
+
+For reference, it uses types that are defined [here](https://github.com/crowbartools/firebot-custom-scripts-types)
+
+**We highly recommend using this for the best developer experience**
+
+## Simple script
+There are only two requirements for a valid bare-bones custom script:
+* a function that takes in **one** argument: 
+  * a *runRequest* object which will contain: buttonId, username, parameters, and modules
+* that function is exported under the name `run` so it's visible to Node (and therefore Firebot).
+
+### Example
+```javascript
+exports.run = (runRequest) => {
+    const logger = runRequest.modules.logger;
+
+    logger.info("Hello world!");
+}
+
+// this just prevents a popup saying the script might not work for v5 but this is not required
+exports.getScriptManifest = () => ({
+    firebotVersion: "5"
+});
+```
+
+#### runRequest
+Note that the `runRequest` argument will now contain all the properties you might need.
+Currently, `runRequest` will look like this:
+```typescript
+runRequest = {
+    parameters: object | null;   // this will contain any parameters the script has defined 
+    trigger: {
+      type: string; // how the script was triggered. Options: interactive, command, custom_script, api
+      metadata: {
+        username: string;
+        userCommand?: {
+          trigger: string;
+          args: string[];
+        }
+      }
+    },
+    modules: object        // Contains commonly used Node modules. Options: request, spawn, fs, path
+}
+```
+
+## Advanced Uses
+Custom Scripts can also define parameters that allow users to tweak behavior, or callback to tell Firebot to run any effect a button can.
+
+### Parameters
+Defining parameters allow you to write one script that can be dynamically changed by each button it's attached to. Input UI elements for parameters are automatically generated in the Edit Button modal (where you select what script a button should run). Parameters are then sent back to the scripts `run` function whenever the button is pressed.
+
+To define parameters, you must have a function that returns a `Promise` object that resolves with an object containing parameter objects. That function must be exported to node as `getDefaultParameters`.
+
+```javascript
+function getDefaultParameters() {
+    return new Promise((resolve, reject) => {
+        resolve({
+            "name": {
+                "type": "string",
+                "description": "What is your name?"
+            },
+            "shouldWhisper": {
+                "type": "boolean",
+                "description": "Whisper button presser",
+                "default": false
+            }
+        });
+    });
+}
+exports.getDefaultParameters = getDefaultParameters;
+```
+You can access the parameters in your `run` function via the *runRequest* argument.
+
+Assuming your parameters were defined using the example above, you could access them as such:
+```javascript
+function run(runRequest) {
+
+    const name = runRequest.parameters.name;
+    const shouldWhisper = runRequest.parameters.shouldWhisper;
+
+    // Do something
+}
+```
+
+#### Types
+Each parameter must define a *type*. The *type* is what is used to determine what input element to use when generating the UI controls. Here is the list of supported types and their corresponding UI element:
+- string : *text field*
+- password: *text field that hides input*
+- number : *text field limited to numbers only*
+- boolean : *checkbox*
+- enum : *dropdown select list*
+- filepath : *text field with 'choose' button that opens up a file picker*
+- effectlist: *the gui for adding effects just like on buttons or commands*
+
+#### Other things parameters can define
+- description : *This will be used as the text above the UI element. If no description is proved, the parameter name will be used instead.*
+- secondaryDescription: *This is put under the description in slightly muted text. Think of it as a sub title.*
+- default : *The default value to use*
+- showBottomHr : *This will add a horizontal rule below the parameter, giving some extra padding. Good for visually grouping parameters.*
+
+#### Special cases
+- The *enum* paramater type must also define an *options* property that is an array of strings that the user can pick from.
+- The *string* parameter type can optionally include `useTextArea: true` to use a multiline text area instead of a text field.
+- The *filepath* parameter type can optionally include a `fileOptions` object that can be used to modify the file picker. Example:
+```javascript
+fileOptions: {
+    directoryOnly: false, //set this to true if you want the user to only be able to select folders
+    filters: [{name: "Audio", extensions: ["mp3", "ogg", "wav", "flac"]}],
+    title: "Please Select A Sound",
+    buttonLabel: "Select Sound"
+}
+```
+
+### Effects 
+If you want to callback to Firebot to run effects, you must return a `Promise` object and resolve with a response object. This will allow you to run asynchronous code without stalling Firebot.
+
+#### Response Example
+```javascript
+function run(runRequest) {
+  // Return a Promise object
+  return new Promise((resolve, reject) => {
+
+    // Create a response 
+    const response = {
+      success: true,
+      errorMessage: "Failed to run the script!", // If 'success' is false, this message is shown in a Firebot popup.
+      effects: [ // An array of effect objects to run
+          {
+              type: "firebot:chat",
+              message: "Hello chat!",
+              chatter: "Streamer"
+          },
+          {
+              type: "firebot:playsound",
+              volume: 5,
+              file: "C:\some\file\path"
+          }
+      ] 
+    }
+
+    // Resolve Promise with the response object
+    resolve(response);
+  });
+}
+// Export 'run' function so it is visible to Node
+exports.run = run;
+```
+
+#### Building Effect Objects
+Each effect object requires a `type` that tells Firebot what kind of effect the object is. You can see the list of all effect types [here](https://github.com/crowbartools/Firebot/tree/master/backend/effects/builtin).
+
+The rest of the effect object depends on the type of effect. The best way to know what an effect object should look like for a particular effect is to create the effect manually on a command and then view the JSON file for your saved commands.
+
+You can view your board's JSON file by: 
+**Open Firebot** > **Settings** > **Open Root Folder** > **chat** > **commands.json**
+
+For example, if you were to create a "Show Image" effect, you would find this in your JSON: 
+![](https://i.imgur.com/2gELkgf.png)
+
+
+### All Response Object Options
+Here is a response object example using every available field.
+```javascript
+    const response = {
+      success: true,
+      errorMessage: "Failed to run the script!", // If 'success' is false, this message is shown in a Firebot popup.
+      effects: [], // An array of effect objects to run
+      callback: (type) => { } // call back function that gets called when effects or commands are finished running. type will = "effects" or "commands"
+    }
+```
+
+### Script Manifest
+As of v4.5, scripts can now define a manifest. Some of these fields get displayed in the UI.
+```javascript
+exports.getScriptManifest = function() {
+	return {
+		name: "Random Pictures",
+		description: "Selects a random picture from a folder of pictures.",
+		author: "ebiggz",
+		version: "1.4",
+		website: "https://twitter.com/ItsEbiggz",
+        startupOnly: false,
+        firebotVersion: "5"
+	}
+}
+```
+Would show up as:
+
+![](https://i.imgur.com/rlIWMst.png)
+
+## Logging to the Dev Tools Console
+If you need some sort of output in the Dev Tools console you can load the logger into your script like this:
+```javascript
+let logger = runRequest.modules.logger;
+```
+
+And then to output information to your console you can use these:
+```javascript
+logger.debug("Outputs a DEBUG tagged message for the dev tools console!");
+logger.info("Outputs an INFO tagged message for the dev tools console!");
+logger.error("Outputs an ERROR tagged message for the dev tools console!");
+```

src/app/v5/faq/page.mdx

@@ -0,0 +1,11 @@
+## Where do I find my backups?
+In Firebot all the way at the top, choose Tools -> Open Backups Folder. Alternatively in Windows, open an explorer window and paste `%AppData%/Firebot/v5/backups` in the address bar.
+
+## Where do I find the log files?
+In Firebot all the way at the top, choose Tools -> Open Logs Folder. Alternatively in Windows, open an explorer window and paste `%AppData%/Firebot/v5/logs` in the address bar.
+
+## Can my mods access my Firebot app?
+No. However, there are three alternatives that might suit your needs:
+1. In System Commands you will find commands with which commands, quotes and currency can be managed. 
+2. You can create advanced Custom Commands with Effects to allow them to alter data in your app.  
+3. You can have your mods run their own Firebot, and let them create a setup which you can then import into your Firebot.

src/components/Navigation.tsx

@@ -231,14 +231,14 @@ function NavigationGroup({
 
 export const navigation: Array<NavGroup> = [
   {
-    title: 'Getting Started',
+    title: 'Getting started',
     links: [
       { title: 'Introduction', href: '/' },
       { title: 'Quickstart', href: '/quickstart' },
     ],
   },
   {
-    title: 'Basics',
+    title: 'Core concepts',
     links: [
       { title: 'Effects', href: '/effects' },
       { title: 'Commands', href: '/commands' },
@@ -262,17 +262,17 @@ export const navigation: Array<NavGroup> = [
   {
     title: 'Troubleshooting',
     links: [
-      { title: 'FAQ', href: '/troubleshooting' },
+      { title: 'FAQ', href: '/v5/faq' },
     ],
   },
   {
-    title: 'Custom Scripts',
+    title: 'Custom scripts',
     links: [
-      { title: 'Quickstart', href: '/scripts/quickstart' },
+      { title: 'Quickstart', href: '/v5/dev/scripts' },
     ],
   },
   {
-    title: 'API Reference',
+    title: 'API reference',
     links: [
       { title: 'Contacts', href: '/contacts' },
       { title: 'Conversations', href: '/conversations' },
@@ -282,9 +282,9 @@ export const navigation: Array<NavGroup> = [
     ],
   },
   {
-    title: 'Contribute',
+    title: 'Contributing',
     links: [
-      { title: 'Dev Environment Setup', href: '/environment-setup' },
+      { title: 'Dev Environment Setup', href: '/v5/dev/environment-setup' },
     ],
   },
 ]