docs: your first plugin, and restructure

docs/api/index.yml

@@ -1,3 +1,3 @@
 expanded: false
 label: 'API'
-order: -1001
+order: -1

docs/changelog.md

@@ -1,7 +1,3 @@
----
-order: -5
----
-
 # Changelog
 
 ## Version 19

docs/utilities/console-commands.md → docs/console-commands.md

@@ -1,4 +1,4 @@
-# Console Commands
+# Client Console Commands
 
 Console commands are commands that can be ran by opening your client-side `F8` console menu and typing a command.
 

docs/data/index.yml

@@ -1,3 +1,3 @@
 expanded: false
 label: 'Data'
-order: -1002
+order: -1

docs/index.md

@@ -1,30 +1,20 @@
----
-order: 100
----
-
 # What is Rebar?
 
 Rebar is a plug-and-play base framework for the alternative GTA:V multiplayer client alt:V. Rebar is meant to act as a light framework that provides utility, and a basic standard for building plugins that can be compatible with other plugins.
 
-It's a single resource game mode with the best features from the Athena Framework. It has a heavy focus on simplifying building game modes and lowering the friction of building a server.
+It has a heavy focus on simplifying building game modes and lowering the friction of building a server.
 
 ## Why Rebar?
 
 Rebar is the foundational piece necessary to construct large concrete structures. Think of this framework as achieving the same from a game-mode standpoint.
 
-## What about Athena?
-
-Athena I think has reached a point where I'm no longer interested in providing support for the project. It still works as a decent starting point, but I've added too many features to the point where it lost its way during production. I wanted Athena to be a plugin-based framework, but users kept pushing for more and more.
-
-With that being said, Rebar is an attempt to scavenge the good parts and leave behind the complexities.
-
-## Backward Compatible Plugins?
-
-No. Rebar will have a slightly different API that is similar to Vue Composables.
-
 ## Tech Stack
 
 -   Node.js
 -   TypeScript
 -   MongoDB
 -   Vue
+
+## How do I get started?
+
+Head on over to [Install & Upgrade](./install.md) to learn about the installation process.

docs/install.md

@@ -1,8 +1,8 @@
 ---
-order: 99
+order: 1
 ---
 
-# Installation
+# Install & Upgrade
 
 !!!
 Hey listen! When you run Rebar for the first time, you won't be able to spawn.
@@ -71,6 +71,12 @@ pnpm binaries
 pnpm start
 ```
 
+Alternatively, development mode can be started with
+
+```
+pnpm dev
+```
+
 ---
 
 ## 3b. Linux
@@ -80,7 +86,7 @@ Last installation was tested on Ubuntu 22.04+
 ### Install libatomic
 
 ```
-sudo apt-get update 
+sudo apt-get update
 sudo apt-get install libatomic1
 ```
 
@@ -102,10 +108,44 @@ pnpm binaries
 pnpm start:linux
 ```
 
+Alternatively, development mode can be started with
+
+```
+pnpm dev:linux
+```
+
 ---
 
 ## 3c. Docker
 
 Follow all of the instructions above.
 
-Build with `pnpm build:docker` and then run `./altv-server`.
+Build with `pnpm build:docker` and then run `./altv-server`.
+
+## Upgrading
+
+### Auto Upgrade
+
+If you already have Rebar installed simply run the following command:
+
+```
+pnpm rebar:upgrade
+```
+
+### Manual Upgrade
+
+Download the latest version `Rebar` into another folder.
+
+Copy the folders `src/main`, `webview`, and `docs` folder into the main folder of Rebar.
+
+Copy the file `package.json` to the main folder of Rebar.
+
+Run `pnpm upgrade` and `pnpm install`.
+
+[Click To Download Latest Source Code](https://github.com/Stuyk/rebar-altv/archive/refs/heads/main.zip)
+
+That's it.
+
+## Webview Development
+
+If you need to develop an interface out of game, you can use `pnpm:webview`

docs/plugins/index.yml

@@ -1,3 +1,3 @@
 expanded: false
 label: 'Plugins'
-order: -1000
+order: -1

docs/plugins/create.md → docs/plugins/structure.md

@@ -1,4 +1,4 @@
-# Create a Plugin
+# Plugin Structure
 
 If you wish to create plugins then you need to understand the basic structure of a plugin.
 
@@ -13,6 +13,8 @@ If you wish to create plugins then you need to understand the basic structure of
     7. `dependencies`
     8. `shared`
 
+[!embed](https://www.youtube.com/watch?v=_bnf-duy3mI)
+
 ## client
 
 This is where the client-side code belongs. You **cannot use NPM packages** in these files.
@@ -50,18 +52,18 @@ alt.log(t('example.hello-from-server'));
 ## shared
 
 This is where shared code (constants, events) belongs.<br/>
-Code below is just example. In `shared` folder you can store anything you want, that is used by both, clientside and serverside code. 
+Code below is just example. In `shared` folder you can store anything you want, that is used by both, clientside and serverside code.
 
 ```ts
 // shared/events.ts
 export const MyPluginEventNames = {
     ToServer: {
-        FirstToServerEvent: 'myplugin.serverEvent'
+        FirstToServerEvent: 'myplugin.serverEvent',
     },
     ToClient: {
-        FirstToClientEvent: 'myplugin.clientEvent'
-    }
-}
+        FirstToClientEvent: 'myplugin.clientEvent',
+    },
+};
 ```
 
 ## images

docs/tutorials/basic-programming.md

@@ -0,0 +1,72 @@
+---
+order: 99
+---
+
+# Basic Programming
+
+In this framework we use 2 programming languages, and 2 frameworks.
+
+1. TypeScript
+2. HTML
+3. Vue 3
+4. Tailwind CSS
+
+This entire stack is how the entire framework is built, and ran and you'll be using the same stack.
+
+## How to Learn
+
+!!!
+
+Programming is not easy, but starting is easier.
+
+!!!
+
+These are some general tips to learn faster.
+
+1. Learning requires persistent dedication throughout the week. Try to spend 1 or 2 hours learning a concept or building something
+
+2. Learning just before bed helps you retain the information better
+
+3. If you are having fun, keep pushing forward because motivation helps you learn faster
+
+4. If a concept is too hard to learn, step away for a bit and come back
+
+5. If you have headaches, take a day off and come back tomorrow
+
+6. If you are not physically writing code, you are not physically learning anything
+
+## TypeScript Basics
+
+This is an incredibly basic tutorial and should cover a good chunk of what you need.
+
+The only way to learn these programming languages is to mess around with them, try making plugins and doing basic things before building a giant roleplay gamemode. We all started off writing very small programs when we started.
+
+Here's a [direct link](https://learnxinyminutes.com/docs/typescript/) if you don't like embeds.
+
+[!embed height="600px"](https://learnxinyminutes.com/docs/typescript/)
+
+## Vue 3 Basics
+
+While Vue is harder to learn if you're not familiar with any HTML Frameworks, it's well worth the time to speed up development.
+
+Here's an incredibly thorough course that will teach you some stuff.
+
+!!!
+
+Start off at timestamp **1 Hour & 5 Minutes** if you want to learn how to do the vue stuff immediately.
+
+!!!
+
+[!embed](https://www.youtube.com/watch?v=I_xLMmNeLDY)
+
+## Tailwind CSS
+
+This video does a good job of covering how Tailwind Works.
+
+!!!
+
+Start the video at **2 Minutes** to start learning immediately
+
+!!!
+
+[!embed](https://www.youtube.com/watch?v=pB1oed_10IA)

docs/tutorials/index.yml

@@ -0,0 +1,3 @@
+expanded: false
+label: 'Tutorials'
+order: -1

docs/tutorials/your-first-plugin.md

@@ -0,0 +1,96 @@
+# Your First Plugin
+
+This tutorial is meant to show you how to get an incredibly basic plugin running.
+
+It will not show you how to use the API, or anything else. It's strictly to show you how to setup a plugin.
+
+## Preface
+
+If you are not familiar with programming, please make sure to check out [Basic Programming](./basic-programming.md) before starting.
+
+Even having just a small understanding of programming will help immensely.
+
+## Client Setup
+
+Before starting, make sure you have [alt:V Installed](https://altv.mp) and modify the `altv.toml` to turn `debug` to true.
+
+You can read more about that [here](https://docs.altv.mp/articles/configs/client.html).
+
+## Folder Setup
+
+Open the entire Rebar Folder in VSCode. You should see a file tree on the left with all of your files.
+
+![](../static/first-plugin/vscode.png)
+
+### Accessing Plugin Folder
+
+Navigate based on the following folders:
+
+```
+src/plugins
+```
+
+![](../static/first-plugin/vscode_plugin_folder.png)
+
+### Create a New folder
+
+Create a new folder by right-clicking the `plugins` folder and making one.
+
+Name the folder whatever you want, but it needs to be in English.
+
+For the sake of this tutorial, I named mine `a-cool-plugin`.
+
+### Create 2 New Folders
+
+Create 2 new folders inside of `a-cool-plugin` and name them `server` and `client`.
+
+![](../static/first-plugin/vscode_cool_plugin.png)
+
+### Create 2 New Files
+
+You are going to now create 2 files named `index.ts` inside both `server` and `client`.
+
+![](../static/first-plugin/vscode_ts_files.png)
+
+## Setup TypeScript Files
+
+Now that you have your files created, we need to add some content to both of them.
+
+Make sure to **save your files** after editing them!
+
+`CTRL + S` will save your file.
+
+### server/index.ts
+
+Inside of this file add the following contents.
+
+```ts src/plugins/your-plugin/server/index.ts
+import * as alt from 'alt-server';
+import { useRebar } from '@Server/index.js';
+
+const Rebar = useRebar();
+
+alt.log('Hello from Server!');
+```
+
+### client/index.ts
+
+Inside of this file add the following contents.
+
+```ts src/plugins/your-plugin/server/index.ts
+import * as alt from 'alt-client';
+
+alt.log('Hello from Client!');
+```
+
+## Testing the Plugin
+
+In VSCode at the top, click on `Terminal` and then click `New Terminal`.
+
+Simply run `pnpm dev` to start your server.
+
+You will then see that your plugin has loaded, and you'll have some logs in your server console.
+
+![](../static/first-plugin/vscode_dev.png)
+
+Additionally, you can see the result in your **client console in-game** which can be opened with `F8`.