Merge pull request #64 from RyanLua/cleanup-docs

Refresh documentation website

.markdownlint.json

@@ -2,5 +2,6 @@
     "MD013": false,
     "MD024": false,
     "MD033": false,
-    "MD041": false
+    "MD041": false,
+    "MD046": false
 }

.vscode/settings.json

@@ -0,0 +1,13 @@
+{
+    "yaml.schemas": {
+      "https://squidfunk.github.io/mkdocs-material/schema.json": "mkdocs.yml"
+    },
+    "yaml.customTags": [ 
+      "!ENV scalar",
+      "!ENV sequence",
+      "!relative scalar",
+      "tag:yaml.org,2002:python/name:material.extensions.emoji.to_svg",
+      "tag:yaml.org,2002:python/name:material.extensions.emoji.twemoji",
+      "tag:yaml.org,2002:python/name:pymdownx.superfences.fence_code_format"
+    ]
+  }

docs/alternatives.md

@@ -2,11 +2,6 @@
 title: Alternatives
 description: Alternatives to Satchel along with pros and cons.
 icon: material/card-multiple-outline
-comments: true
-tags:
-  - Others
-  - Comparison
-  - Third-party
 ---
 
 Satchel isn't the best backpack system out there or the only one but it does offer some advantages against others. Some free and open-souce alternaves of Satchel.

docs/api-reference.md

@@ -2,15 +2,56 @@
 title: API Reference
 description: Satchel is a reskin of the default BackpackGui. Satchel acts very similar to the default backpack and is based on a fork on the default backpack.
 icon: material/book-outline
-comments: true
-tags:
-  - API
-  - Summary
-  - Documentation
 ---
 
+<style>
+    .md-typeset__table {
+      width: 100%;
+    }
+
+    .md-typeset__table table:not([class]) {
+      display: table
+    }
+</style>
+
 Satchel is a reskin of the default BackpackGui located in [CoreGui](https://create.roblox.com/docs/reference/engine/classes/CoreGui). Satchel acts very similar to the default backpack and is based on a fork on the default backpack. Behaviors between the two should remain the same with both of them managing the [Backpack](https://create.roblox.com/docs/reference/engine/classes/Backpack).
 
+#### Code Samples
+
+This code sample makes a TextButton that toggles the inventory when clicked.
+
+```lua title="Toggle Satchel" linenums="1"
+local ReplicatedStorage = game:GetService("ReplicatedStorage")
+local Satchel = require(ReplicatedStorage:WaitForChild("Satchel"))
+
+local button = Instance.new("TextButton")
+button.AnchorPoint = Vector2.new(0.5, 0.5)
+button.Position = UDim2.new(0.5, 0, 0.5, 0)
+button.Text = "Toggle Inventory"
+button.MouseButton1Click:Connect(function()
+    if Satchel:GetBackpackEnabled() then
+        Satchel.SetBackpackEnabled(false)
+    else
+        Satchel.SetBackpackEnabled(true)
+    end
+end)
+```
+
+This code sample detects when the inventory is opened or closed.
+
+```lua title="Detect Inventory State" linenums="1"
+local ReplicatedStorage = game:GetService("ReplicatedStorage")
+local Satchel = require(ReplicatedStorage:WaitForChild("Satchel"))
+
+Satchel.GetStateChangedEvent():Connect(function(isOpened: boolean)
+    if isOpened then
+        print("Inventory opened")
+    else
+        print("Inventory closed")
+    end
+end)
+```
+
 ## Summary
 
 ### Attributes
@@ -52,26 +93,38 @@ Satchel is a reskin of the default BackpackGui located in [CoreGui](https://crea
 
 ### BackgroundColor3
 
+[`Color3`](https://create.roblox.com/docs/reference/engine/datatypes/Color3)
+
 Determines the background color of the default inventory window and slots. Changing this will update the background color for all elements excluding the search box background for visibility purposes.
 
 ### BackgroundTransparency
 
+[`number`](https://create.roblox.com/docs/luau/numbers)
+
 Determines the background transparency of the default inventory window and slots. This will change how the hot bar looks in its locked state and the inventory background.
 
 ### CornerRadius
 
+[`UDim`](https://create.roblox.com/docs/reference/engine/datatypes/UDim)
+
 Determines the radius, in pixels, of the default inventory window and slots. This will affect all elements with a visible rounded corner. The corner radius for the search bar is calculated automatically based on this value.
 
 ### EquipBorderColor3
 
+[`Color3`](https://create.roblox.com/docs/reference/engine/datatypes/Color3)
+
 Determines the color of the equip border when a slot is equipped. The drag outline color of the slot will not changed by this.
 
 ### EquipBorderSizePixel
 
+[`number`](https://create.roblox.com/docs/luau/numbers)
+
 Determines the pixel width of the equip border when a slot is equipped. This additionally controls the padding of tool icons.
 
 ### FontFace
 
+[`Enum.Font`](https://create.roblox.com/docs/reference/engine/enums/Font)
+
 Determines the font of the default inventory window and slots. This includes all text in the Satchel UI.
 
 !!! bug
@@ -80,26 +133,38 @@ Determines the font of the default inventory window and slots. This includes all
 
 ### InsetIconPadding
 
+[`bool`](https://create.roblox.com/docs/luau/booleans)
+
 Determines whether or not the tool icon is padded in the default inventory window and slots. Changing this will change how the tool icon is padded in the slot or not.
 
 ### OutlineEquipBorder
 
+[`bool`](https://create.roblox.com/docs/luau/booleans)
+
 Determines whether or not the equip border is outline or inset when a slot is equipped. Changing this will make the equip border either border will outline or inset the slot.
 
 ### TextColor3
 
+[`Color3`](https://create.roblox.com/docs/reference/engine/datatypes/Color3)
+
 Determines the color of the text in default inventory window and slots. This will change the color of all text.
 
 ### TextSize
 
+[`number`](https://create.roblox.com/docs/luau/numbers)
+
 Determines the size of the text in the default inventory window and slots. This will change the text size of the tool names and will not change other text like search text, hotkey number, and gamepad hints.
 
 ### TextStrokeColor3
 
+[`Color3`](https://create.roblox.com/docs/reference/engine/datatypes/Color3)
+
 Determines the color of the text stroke of text in default inventory window and slots. This will change the color of all text strokes which are visible.
 
 ### TextStrokeTransparency
 
+[`number`](https://create.roblox.com/docs/luau/numbers)
+
 Determines the transparency of the text stroke of text in default chat window and slots. This will change all text strokes in which text strokes are visible.
 
 ## Methods
@@ -108,34 +173,105 @@ Determines the transparency of the text stroke of text in default chat window an
 
 Returns whether the inventory is opened or not.
 
+#### Code Samples
+
+This code sample will return whether the inventory is opened or not.
+
+```lua title="Is Opened" linenums="1"
+local ReplicatedStorage = game:GetService("ReplicatedStorage")
+local Satchel = require(ReplicatedStorage:WaitForChild("Satchel"))
+
+local isOpened = Satchel.IsOpened()
+```
+
 #### Returns
 
-```boolean```
+<table>
+    <tr>
+        <td><a href="https://create.roblox.com/docs/luau/booleans">bool</a></td>
+    </tr>
+</table>
 
 ### SetBackpackEnabled
 
 Sets whether the backpack gui is enabled or disabled.
 
+#### Code Samples
+
+This code sample will disable the backpack gui.
+
+```lua title="Disable Backpack" linenums="1"
+local ReplicatedStorage = game:GetService("ReplicatedStorage")
+local Satchel = require(ReplicatedStorage:WaitForChild("Satchel"))
+
+Satchel.SetBackpackEnabled(false)
+```
+
 #### Parameters
 
-```enabled: boolean```
+<table>
+    <tr>
+        <td>enabled: <a href="https://create.roblox.com/docs/luau/booleans">bool</a></td>
+        <td>Whether to enable or disable the Backpack</td>
+    </tr>
+</table>
 
 #### Returns
 
-```void```
+<table>
+    <tr>
+        <td>void</td>
+    </tr>
+</table>
 
 ### GetBackpackEnabled
 
 Returns whether the backpack gui is enabled or disabled.
 
+#### Code Samples
+
+This code sample will return whether the backpack gui is enabled or disabled.
+
+```lua title="Get Backpack Enabled" linenums="1"
+local ReplicatedStorage = game:GetService("ReplicatedStorage")
+local Satchel = require(ReplicatedStorage:WaitForChild("Satchel"))
+
+local isEnabled = Satchel.GetBackpackEnabled()
+```
+
 #### Returns
 
-```boolean```
+<table>
+    <tr>
+        <td><a href="https://create.roblox.com/docs/luau/booleans">bool</a></td>
+    </tr>
+</table>
 
 ### GetStateChangedEvent
 
 Returns a signal that fires when the inventory is opened or closed.
 
+#### Code Samples
+
+This code sample detects when the inventory is opened or closed.
+
+```lua title="Detect Inventory State" linenums="1"
+local ReplicatedStorage = game:GetService("ReplicatedStorage")
+local Satchel = require(ReplicatedStorage:WaitForChild("Satchel"))
+
+Satchel.GetStateChangedEvent():Connect(function(isOpened: boolean)
+    if isOpened then
+        print("Inventory opened")
+    else
+        print("Inventory closed")
+    end
+end)
+```
+
 #### Returns
 
-```RBXScriptSignal```
+<table>
+    <tr>
+        <td><a href="https://create.roblox.com/docs/reference/engine/datatypes/RBXScriptSignal">RBXScriptSignal</a></td>
+    </tr>
+</table>

docs/app.webmanifest

@@ -0,0 +1,24 @@
+{
+  "name": "Satchel Documentation",
+  "short_name": "Satchel",
+  "icons": [
+    {
+      "src": "/icons/512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    },
+    {
+      "src": "/icons/512-maskable.png",
+      "type": "image/png",
+      "sizes": "512x512",
+      "purpose": "maskable"
+    }
+  ],
+  "start_url": "/",
+  "display": "standalone",
+  "theme_color": "#00a2ff",
+  "background_color": "#00a2ff",
+  "lang": "en",
+  "description": "Documentation for Satchel, a modern open-source alternative to Roblox's default backpack",
+  "categories": ["utilities", "reference", "developer"]
+}

docs/benchmarks.md

@@ -2,11 +2,6 @@
 title: Benchmarks
 description: Satchel benchmarks on performance and speed.
 icon: material/speedometer
-comments: true
-tags:
-  - Tests
-  - Speed
-  - Performance
 ---
 
 Built for speed, optimized scripting allows Satchel to be blazingly fast. As faster or even faster than the default speed.

docs/contributing.md

@@ -0,0 +1,35 @@
+---
+title: Contributing
+description: Learn how to contribute to our project.
+icon: material/heart-multiple-outline
+---
+
+Thank you for investing your time in contributing to our project!
+
+Please read our [Code of Conduct](https://github.com/RyanLua/Satchel#coc-ov-file) to keep our community approachable and respectable.
+
+When you contribute, you become a project contributor and both are shown on [our repository](https://github.com/RyanLua/Satchel), [contributors graph](https://github.com/RyanLua/Satchel/graphs/contributors), and [your contribution activity](https://docs.github.com/en/account-and-profile/setting-up-and-managing-your-github-profile/managing-contribution-settings-on-your-profile/viewing-contributions-on-your-profile#contribution-activity).
+
+## GitHub Codespaces
+
+We are fully integrated with [GitHub Codespaces](https://docs.github.com/en/codespaces). When you create a codespace on our repository, all required extensions and dependencies are automatically installed to make contributing easier. The following will be automatically available:
+
+* [Rojo](https://github.com/rojo-rbx/rojo) sync (If editing in Visual Studio Code from your local desktop client. Requires [Visual Studio Code](https://code.visualstudio.com/download/) with the [GitHub Codespaces](https://marketplace.visualstudio.com/items?itemName=GitHub.codespaces) extension)
+* [Rojo](https://github.com/rojo-rbx/rojo), [Selene](https://github.com/Kampfkarren/selene), and [StyLua](https://github.com/JohnnyMorganz/StyLua) Extensions
+* [Wally](https://github.com/UpliftGames/wally/) packages
+
+Additionally, our codespaces are preconfigured with [pre-builds](https://docs.github.com/en/codespaces/prebuilding-your-codespaces/about-github-codespaces-prebuilds) and [dev containers](https://docs.github.com/en/codespaces/setting-up-your-project-for-codespaces/adding-a-dev-container-configuration/introduction-to-dev-containers).
+
+## Coding Style
+
+If you plan to contribute, ensure that all code written in Lua follows the [Roblox Lua Style Guide](https://roblox.github.io/lua-style-guide/) when applicable.
+
+Also, make sure that your code is properly styled and linted using [Selene](https://github.com/Kampfkarren/selene) and [StyLua](https://github.com/JohnnyMorganz/StyLua).
+
+## Pull Requests
+
+We actively welcome your pull requests. When you submit a pull request, we will review your code and respond as soon as possible. We may suggest changes, improvements, or alternatives.
+
+## License
+
+By contributing, you agree that your contributions will be licensed under the [Mozilla Public License 2.0](http://mozilla.org/MPL/2.0/).