Improve documentation

ImAvafe · Aug 19, 2024 · 5c3cc35 · 5c3cc35
1 parent 8fc9fdd
commit 5c3cc35
Show file tree

Hide file tree

Showing 7 changed files with 30 additions and 8 deletions.
diff --git a/.moonwave/static/climbOfChaos.png b/.moonwave/static/climbOfChaos.png
diff --git a/.moonwave/static/lonekaMenu.png b/.moonwave/static/lonekaMenu.png
diff --git a/.moonwave/static/scribel.png b/.moonwave/static/scribel.png
diff --git a/docs/in-production.md b/docs/in-production.md
@@ -2,14 +2,21 @@
 sidebar_position: 6
 ---
 
-# Use In Production
+import scribel from '/scribel.png';
+import climbOfChaos from '/climbOfChaos.png';
+import lonekaMenu from '/lonekaMenu.png';
+
+# Production Usage
 
 These projects use OnyxUI to power their user experience:
 
-- [Scribel](https://www.roblox.com/games/18609236852)
-- [Climb of Chaos](https://www.roblox.com/games/16882394262)
-- [Kitty Dash](https://www.roblox.com/games/14958801951)
+* ## [Loneka](https://www.roblox.com/groups/15494708)
+  * * <img src={lonekaMenu} width="500px"/>
+* ## [Scribel](https://www.roblox.com/games/18609236852)
+  * <img src={scribel} width="500px"/>
+* ## [Climb of Chaos](https://www.roblox.com/games/16882394262)
+  * <img src={climbOfChaos} width="500px"/>
 
 :::tip List your project
-If you'd like your game or resource featured here, open an issue or pull request!
+If you'd like your game or resource featured here, open an issue or pull request! If it's pretty, I want it listed!
 :::
diff --git a/docs/intro.md b/docs/intro.md
@@ -19,7 +19,7 @@ sidebar_position: 1
 
 ## Project structure
 
-OnyxUI is structured as a collection of modules, separated by folders. This is unconventional, but necessary for exposing types so you can properly build off of OnyxUI. Here's a basic usage sample below:
+OnyxUI is structured as a collection of modules. This is unconventional, but necessary for exposing types so you can properly build off of OnyxUI. Here's a basic usage sample below:
 
 ```lua
 local OnyxUI = require(path.to.OnyxUI)

diff --git a/docs/styling-props.md b/docs/styling-props.md
@@ -10,4 +10,4 @@ For a full list of supported styling props, see the [`Base`](/api/Base) componen
 
 ## Use in custom components
 
-To support styling props in your own components, make use of the [`CombineProps`](/api/CombineProps) utility to pass props through automatically.
+To support styling props in your own components, make use of the [`CombineProps`](/api/Util#CombineProps) utility to pass props through automatically.
diff --git a/docs/utils.md → docs/util.md b/docs/utils.md → docs/util.md
@@ -11,15 +11,20 @@ Important utilities for UI development. These are also used by OnyxUI itself!
 Want to ensure your component props are Fusion `Value`s? This makes it a one-line operation.
 
 ```lua
+local Util = require(OnyxUI.Util)
+
 return function(Props)
   local MyProp = Util.EnsureValue(Props.MyProp, "string", "Default")
+end
 ```
 
 ## [CombineProps](/api/Util#CombineProps)
 
 Let's say you have a "CustomButton" component, and you want it to support `Size`, `Position`, and other arbitrary properties. Manually implementing all that boilerplate in the component itself is tedious. So let's have `CombineProps` do the passthrough for us:
 
 ```lua
+local Util = require(OnyxUI.Util)
+
 return function(Props)
   return BaseButton(Util.CombineProps(Props, {
     BackgroundTransparency = 0,
@@ -34,4 +39,14 @@ end
 
 ## [Colors](/api/Util#Colors)
 
-Color shorthands imported from [TailwindCSS's color palette](https://tailwindcss.com/docs/customizing-colors#default-color-palette). So you don't have to worry about color picking anymore.
+Color shorthands imported from [TailwindCSS's color palette](https://tailwindcss.com/docs/customizing-colors#default-color-palette). So you don't have to worry about color picking anymore.
+
+```lua
+local Util = require(OnyxUI.Util)
+
+return function(Props)
+  return Button {
+    Color = Util.Colors.Red["500"], -- Shade "500" of Colors.Red
+  }
+end
+```
Original file line number	Diff line number	Diff line change
Expand Up		@@ -10,4 +10,4 @@ For a full list of supported styling props, see the [`Base`](/api/Base) componen

		## Use in custom components

		To support styling props in your own components, make use of the [`CombineProps`](/api/CombineProps) utility to pass props through automatically.
		To support styling props in your own components, make use of the [`CombineProps`](/api/Util#CombineProps) utility to pass props through automatically.