Docs: Updated formatting

README.md

@@ -25,7 +25,7 @@ These libraries are different modules of ProzillaOS that can be installed separa
 
 - [`prozilla-os`][prozilla-os]: A bundle containing the core packages and all standard applications of ProzillaOS
 - [`@prozilla-os/core`][core]: Core functionality, React components and hooks
-- [`@prozilla-os/skins`](./shared/): Customizable skins for ProzillaOS
+- [`@prozilla-os/skins`][skins]: Customizable skins for ProzillaOS
 - [`@prozilla-os/shared`][shared]: Shared functions and utilities
 
 #### Standard applications
@@ -127,6 +127,7 @@ These resources can help you get started with ProzillaOS.
 [prozilla]: https://prozilla.dev/
 [prozilla-os]: ./packages/prozilla-os/
 [core]: ./packages/core/
+[skins]: ./packages/skins/
 [shared]: ./packages/shared/
 [file-explorer]: ./packages/apps/file-explorer/
 [terminal]: ./packages/apps/terminal/

packages/README.md

@@ -1,26 +1,13 @@
-<div align="center">
+# Packages
-	<br />
-	<p>
-		<a href="https://os.prozilla.dev/"><img src="https://os.prozilla.dev/assets/banner-logo-title-small.png" width="576" alt="ProzillaOS" /></a>
-	</p>
-	<p>
-		<a href="https://github.com/prozilla-os/ProzillaOS/blob/main/LICENSE.md"><img alt="License" src="https://img.shields.io/github/license/Prozilla/ProzillaOS?style=flat-square&color=FF4D5B&label=License"></a>
-		<a href="https://github.com/prozilla-os/ProzillaOS"><img alt="Stars" src="https://img.shields.io/github/stars/Prozilla/ProzillaOS?style=flat-square&color=FED24C&label=%E2%AD%90"></a>
-		<a href="https://github.com/prozilla-os/ProzillaOS"><img alt="Forks" src="https://img.shields.io/github/forks/Prozilla/ProzillaOS?style=flat-square&color=4D9CFF&label=Forks&logo=github"></a>
-		<a href="https://www.npmjs.com/package/prozilla-os"><img alt="NPM Version" src="https://img.shields.io/npm/v/prozilla-os?logo=npm&style=flat-square&label=prozilla-os&color=FF4D5B"></a>
-	</p>
-</div>
 
-## Packages
+## Libraries (public)
-
-### Libraries (public)
 
 - [`prozilla-os`](./prozilla-os/): A bundle containing the core packages and all standard applications of ProzillaOS
 - [`@prozilla-os/core`](./core/): Core functionality, React components and hooks
-- [`@prozilla-os/skins`](./shared/): Customizable skins for ProzillaOS
+- [`@prozilla-os/skins`](./skins/): Customizable skins for ProzillaOS
 - [`@prozilla-os/shared`](./shared/): Shared functions and utilities
 
-#### Standard applications
+### Standard applications
 
 - [`@prozilla-os/file-explorer`](./apps/file-explorer/): File explorer app
 - [`@prozilla-os/terminal`](./apps/terminal/): Terminal/shell app
@@ -30,11 +17,11 @@
 - [`@prozilla-os/browser`](./apps/browser/): Browser app
 - [`@prozilla-os/calculator`](./apps/calculator/): Calculator app
 
-#### Non-standard applications
+### Non-standard applications
 
 - [`@prozilla-os/logic-sim`](./apps/logic-sim/): Logic simulator app
 
-### Sites (internal)
+## Sites (internal)
 
 - [`@prozilla-os/demo`](./demo/): Demo site
 - [`@prozilla-os/docs`](./docs/): Documentation site

packages/docs/.vitepress/theme/PackageBadge.vue

@@ -0,0 +1,27 @@
+<template>
+	<div v-if="frontmatter.package">
+		<Badge class="package" type="info">
+			<a title="Package" target="_blank" :href="`https://www.npmjs.com/package/${frontmatter.package}`">{{ frontmatter.package }}</a>
+		</Badge>
+	</div>
+</template>
+
+<script setup>
+import { useData } from "vitepress";
+
+const { frontmatter } = useData();
+</script>
+
+<style scoped>
+.package {
+	font-size: 1rem;
+	margin-bottom: 32px;
+}
+
+.package > a {
+	color: inherit;
+	text-decoration: none;
+	vertical-align: super;
+	white-space: nowrap;
+}
+</style>

packages/docs/.vitepress/theme/index.ts

@@ -2,16 +2,14 @@
 import { h } from "vue";
 import type { Theme } from "vitepress";
 import DefaultTheme from "vitepress/theme";
+import PackageBadge from "./PackageBadge.vue";
 import "./style.css";
 
 export default {
 	extends: DefaultTheme,
-	Layout: () => {
+	Layout() {
 		return h(DefaultTheme.Layout, null, {
-			// https://vitepress.dev/guide/extending-default-theme#layout-slots
+		 	"doc-before": () => h(PackageBadge)
 		});
-	},
-	enhanceApp({ app, router, siteData }) {
-		// ...
 	}
 } satisfies Theme;

packages/docs/.vitepress/theme/style.css

@@ -275,6 +275,7 @@
 .custom-block {
 	border: none;
 	border-left: 5px solid;
+	padding: 12px 12px 6px;
 }
 
 .custom-block > .custom-block-title {
@@ -313,6 +314,14 @@
 	--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M256 32c14.2 0 27.3 7.5 34.5 19.8l216 368c7.3 12.4 7.3 27.7 .2 40.1S486.3 480 472 480H40c-14.3 0-27.6-7.7-34.7-20.1s-7-27.8 .2-40.1l216-368C228.7 39.5 241.8 32 256 32zm0 128c-13.3 0-24 10.7-24 24V296c0 13.3 10.7 24 24 24s24-10.7 24-24V184c0-13.3-10.7-24-24-24zm32 224a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z'/%3E%3C/svg%3E")
 }
 
+.custom-block ul {
+	margin: 8px 0;
+}
+
+.custom-block li + li {
+	margin-top: 4px;
+}
+
 .VPContent.is-home .vp-doc {
 	margin: 0;
 	padding: 0;

packages/docs/src/reference/classes/apps/app.md

@@ -1,11 +1,12 @@
 ---
 outline: deep
 description: "An application that can be run by ProzillaOS"
+package: "@prozilla-os/core"
 ---
 
 # Class [`App`](https://github.com/prozilla-os/ProzillaOS/blob/main/packages/core/src/features/system/configs/app.tsx)
 
-An application that can be run by ProzillaOS
+{{ $frontmatter.description }}
 
 Applications can be installed by adding them to the `apps` array in [`AppsConfig`](../system/apps-config#apps-app)
 
@@ -19,117 +20,192 @@ Applications can be installed by adding them to the `apps` array in [`AppsConfig
 
 ### Parameters
 
-- **name** : `string`
+<br>
 
-- **id** : `string`
+#### name
 
-- **windowContent** : `React.FC<AppProps>`
+- **Type:** `string`
 
-- **windowOptions** : `object` (optional)
+#### id
 
-	- windowOptions.size : [`Vector2`](/reference/classes/utils/vector2)
+- **Type:** `string`
+
+#### windowContent
+
+- **Type:** `React.FC<AppProps>`
+
+#### windowOptions
+
+- **Optional**
+- **Type:** `WindowOptions`
+
+```ts
+interface WindowOptions {
+	size?: Vector2;
+	[key: string]: unknown;
+}
+```
+
+> [!NOTE] References
+> - [Vector2](../utils/vector2)
 
 ## Properties
 
-### name : `string` {#name}
+### name
+
+- **Type:** `string`
+- **Default:** `"App"`
 
 The display name of this application
 
-> **@default**
+### id
-> ```ts
-> "App"
-> ```
 
-### id : `string` {#id}
+- **Type:** `string`
+- **Default:** `"app"`
 
 The unique ID of this application
 
-> **@default**
-> ```ts
-> "app"
-> ```
-
 > [!WARNING]
 > Every app must have a unique ID that only contains lower case letters (a-z), numbers (0-9) and dashes (-).
 
-### windowContent : `React.FC<AppProps>` {#window-content}
+### windowContent
+
+- **Type:** `React.FC<AppProps>`
 
 React component that renders this app inside a window when the app is running
 
-### windowOptions : `object` {#window-options}
+### windowOptions
+
+- **Type:** `WindowOptions`
 
 Default options that get passed to the `windowContent` component
 
-You can extend this object with any properties
+```ts
+interface WindowOptions {
+	size?: Vector2;
+	[key: string]: unknown;
+}
+```
 
-#### Properties
+> [!NOTE] References
+> - [Vector2](../utils/vector2)
 
-- windowOptions.size : [`Vector2`](/reference/classes/utils/vector2)
+### description
 
-### description : `string | null` {#description}
+- **Type:** `string | null`
 
 Description of this application
 
-### iconUrl : `string | null` {#icon-url}
+### iconUrl
+
+- **Type:** `string | null`
 
 URL of the icon of this application
 
-### role : `string | null` {#role}
+### role
+
+- **Type:** `string | null`
 
 Defines what parts of the OS this app is responsible for and how it can be used by other apps
 
-### associatedExtensions : `string[]` {#associated-extensions}
+### associatedExtensions
+
+- **Type:** `string | null`
 
 An array of file extensions that this application is used to open and read
 
-### pinnedByDefault : `boolean` {#pinned-by-default}
+### pinnedByDefault
+
+- **Type:** `boolean`
+- **Default:** `true`
 
 Determines whether the app is pinned by default
 
-> **@default**
+### launchAtStartup
-> ```ts
-> true
-> ```
 
-### launchAtStartup : `boolean` {#launch-at-startup}
+- **Type:** `boolean`
+- **Default:** `false`
 
 Determines whether the app is launched at startup
 
-> **@default**
-> ```ts
-> false
-> ```
-
 ## Methods
 
-### setName (name : `string`) => `this` {#set-name}
+### setName(name)
+
+- **Parameters**
+  - **name**
+	- **Type:** `string`
+- **Returns**
+  - **Type:** `this`
 
 Set the display name of this application
 
-### setDescription (description : `string | null`) => `this` {#set-description}
+### setDescription(description)
+
+- **Parameters**
+  - **description**
+	- **Type:** `string`
+- **Returns**
+  - **Type:** `this`
 
 Set the description of this application
 
-### setIconUrl (iconUrl : `string | null`) => `this` {#set-icon-url}
+### setIconUrl(iconUrl)
+
+- **Parameters**
+  - **iconUrl**
+	- **Type:** `string | null`
+- **Returns**
+  - **Type:** `this`
 
 Set the URL of the icon of this application
 
-### setRole (role : `string | null`) => `this` {#set-role}
+### setRole(role)
+
+- **Parameters**
+  - **role**
+	- **Type:** `string | null`
+- **Returns**
+  - **Type:** `this`
 
 Set the role of this application
 
-### setAssociatedExtensions (extensions : `string[] | null`) => `this` {#set-associated-extensions}
+### setAssociatedExtensions(extensions)
+
+- **Parameters**
+  - **extensions**
+	- **Type:** `string[] | null`
+- **Returns**
+  - **Type:** `this`
 
 Set the associated extensions of this application
 
-### setPinnedByDefault (pinnedByDefault : `boolean`) => `this` {#set-pinned-by-default}
+### setPinnedByDefault(pinnedByDefault)
+
+- **Parameters**
+  - **pinnedByDefault**
+	- **Type:** `boolean`
+- **Returns**
+  - **Type:** `this`
 
 Changes whether this application is pinned by default or not
 
-### setLaunchAtStartup (launchAtStartup : `boolean`) => `this` {#set-launch-at-startup}
+### setLaunchAtStartup(launchAtStartup)
+
+- **Parameters**
+  - **launchAtStartup**
+	- **Type:** `boolean`
+- **Returns**
+  - **Type:** `this`
 
 Changes whether this application is launched at startup or not
 
-### WindowContent (props : `AppProps`) => `React.ReactElement` {#Window-content}
+### WindowContent(props)
+
+- **Parameters**
+  - **props**
+	- **Type:** `AppProps`
+- **Returns**
+  - **Type:** `React.ReactElement`
 
 Renders the app as a React component

packages/docs/src/reference/classes/skins/skin.md

@@ -1,11 +1,12 @@
 ---
 outline: deep
 description: "Change the look and feel of ProzillaOS"
+package: "@prozilla-os/skins"
 ---
 
 # Class [`Skin`](https://github.com/prozilla-os/ProzillaOS/blob/main/packages/skins/src/core/skin.ts)
 
-Change the look and feel of ProzillaOS
+{{ $frontmatter.description }}
 
 ## Constructor
 
@@ -105,12 +106,13 @@ interface FolderIcons {
 ### loadStyleSheet
 
 - **Type:** `() => void`
-- **Example:** 
+
+Function that dynamically imports style sheet
+
+- **Example** 
 
 	```ts
 	function loadStyleSheet() {
 		import("../styles/skins/macOs.css");
 	}
 	```
-
-Function that dynamically imports style sheet

packages/docs/src/reference/classes/system/apps-config.md

@@ -1,5 +1,6 @@
 ---
 outline: deep
+package: "@prozilla-os/core"
 ---
 
 # Class [`AppsConfig`](https://github.com/prozilla-os/ProzillaOS/blob/main/packages/core/src/features/system/configs/appsConfig.ts)
@@ -14,7 +15,17 @@ outline: deep
 
 #### options
 
-- options.apps : [`App[]`](../apps/app)
+- **Optional**
+- **Type:** `AppsConfigOptions`
+
+```ts
+interface AppsConfigOptions {
+	apps?: App[];
+}
+```
+
+> [!NOTE] References
+> - [App](/reference/classes/apps/app)
 
 ## Properties
 

packages/docs/src/reference/classes/system/desktop-config.md

@@ -1,5 +1,6 @@
 ---
 outline: deep
+package: "@prozilla-os/core"
 ---
 
 # Class [`DesktopConfig`](https://github.com/prozilla-os/ProzillaOS/blob/main/packages/core/src/features/system/configs/desktopConfig.ts)
@@ -14,12 +15,22 @@ outline: deep
 
 #### options
 
-- options.defaultIconSize : `0 | 1 | 2`
+- **Optional**
-- options.defaultIconDirection : `0 | 1`
+- **Type:** `DesktopConfigOptions`
+
+```ts
+interface DesktopConfigOptions {
+	defaultIconSize?: 0 | 1 | 2;
+	defaultIconDirection?: 0 | 1;
+}
+```
 
 ## Properties
 
-### defaultIconSize : `0 | 1 | 2` {#default-icon-size}
+### defaultIconSize
+
+- **Type:** `0 | 1 | 2`
+- **Default:** `1` (Medium)
 
 The default size of the desktop icons
 
@@ -29,13 +40,10 @@ The default size of the desktop icons
 | 1 | Medium |
 | 2 | Large |
 
-> **@default**
+### defaultIconDirection
-> 
-> ```ts
-> 1 // Medium
-> ```
 
-### defaultIconDirection : `0 | 1` {#default-icon-direction}
+- **Type:** `0 | 1`
+- **Default:** `0` (Vertical)
 
 The default direction of the desktop icons
 
@@ -43,9 +51,3 @@ The default direction of the desktop icons
 | --- | --- |
 | 0 | Vertical |
 | 1 | Horizontal |
-
-> **@default**
-> 
-> ```ts
-> 0 // Vertical
-> ```

packages/docs/src/reference/classes/system/misc-config.md

@@ -1,5 +1,6 @@
 ---
 outline: deep
+package: "@prozilla-os/core"
 ---
 
 # Class [`MiscConfig`](https://github.com/prozilla-os/ProzillaOS/blob/main/packages/core/src/features/system/configs/miscConfig.ts)
@@ -14,19 +15,23 @@ outline: deep
 
 #### options
 
-- options.doubleClickDelay : `number`
+- **Optional**
+- **Type:** `MiscConfigOptions`
+
+```ts
+interface MiscConfigOptions {
+	doubleClickDelay?: number;
+}
+```
 
 ## Properties
 
-### doubleClickDelay : `number` {#double-click-delay}
+### doubleClickDelay
+
+- **Type:** `number`
+- **Default:** `250`
 
 The maximum time between two clicks for those clicks to register as a double click in milliseconds
 
-> **@default**
-> 
-> ```ts
-> 250
-> ```
-
 > [!NOTE] 
 > Also applies to touch devices.

packages/docs/src/reference/classes/system/modals-config.md

@@ -1,5 +1,6 @@
 ---
 outline: deep
+package: "@prozilla-os/core"
 ---
 
 # Class [`ModalsConfig`](https://github.com/prozilla-os/ProzillaOS/blob/main/packages/core/src/features/system/configs/modalsConfig.ts)
@@ -14,27 +15,31 @@ outline: deep
 
 #### options
 
-- options.defaultDialogSize : [`Vector2`](/reference/classes/utils/vector2)
+- **Optional**
-- options.defaultFileSelectorSize : [`Vector2`](/reference/classes/utils/vector2)
+- **Type:** `ModalsConfigOptions`
+
+```ts
+interface ModalsConfigOptions {
+	defaultDialogSize?: Vector2;
+	defaultFileSelectorSize?: Vector2;
+}
+```
+
+> [!NOTE] References
+> - [Vector2](/reference/classes/utils/vector2)
 
 ## Properties
 
-### defaultDialogSize : [`Vector2`](/reference/classes/utils/vector2) {#default-dialog-size}
+### defaultDialogSize
+
+- **Type:** [`Vector2`](/reference/classes/utils/vector2)
+- **Default:** `new Vector2(400, 200)`
 
 Default size of a dialog box
 
-> **@default**
+### defaultFileSelectorSize
->
-> ```ts
-> new Vector2(400, 200)
-> ```
 
-### defaultFileSelectorSize : [`Vector2`](/reference/classes/utils/vector2) {#default-file-selector-size}
+- **Type:** [`Vector2`](/reference/classes/utils/vector2)
+- **Default:** `new Vector2(700, 400)`
 
 Default size of a file selector
-
-> **@default**
->
-> ```ts
-> new Vector2(700, 400)
-> ```

packages/docs/src/reference/classes/system/taskbar-config.md

@@ -1,5 +1,6 @@
 ---
 outline: deep
+package: "@prozilla-os/core"
 ---
 
 # Class [`TaskbarConfig`](https://github.com/prozilla-os/ProzillaOS/blob/main/packages/core/src/features/system/configs/taskbarConfig.ts)
@@ -14,16 +15,21 @@ outline: deep
 
 #### options
 
-- options.height : `number`
+- **Optional**
+- **Type:** `TaskbarConfigOptions`
+
+```ts
+interface TaskbarConfigOptions {
+	height?: number;
+}
+```
 
 ## Properties
 
-### height : `number` {#height}
+### height
+
+- **Type:** `number`
+- **Default:** `48`
 
 Height of the taskbar in CSS pixels
 
-> **@default**
-> 
-> ```ts
-> 48
-> ```

packages/docs/src/reference/classes/system/tracking-config.md

@@ -1,5 +1,6 @@
 ---
 outline: deep
+package: "@prozilla-os/core"
 ---
 
 # Class [`TrackingConfig`](https://github.com/prozilla-os/ProzillaOS/blob/main/packages/core/src/features/system/configs/trackingConfig.ts)
@@ -14,22 +15,28 @@ outline: deep
 
 #### options
 
-- options.enabled : `boolean`
+- **Optional**
-- options.GAMeasurementId : `string`
+- **Type:** `TrackingConfigOptions`
+
+```ts
+interface TrackingConfigOptions {
+	enabled?: boolean;
+	GAMeasurementId?: string;
+}
+```
 
 ## Properties
 
-### enabled : `boolean` {#enabled}
+### enabled
+
+- **Type:** `boolean`
+- **Default:** `true`
 
 Determines whether tracking is enabled
 
-> **@default**
+### GAMeasurementId
->
-> ```ts
-> true
-> ```
 
-### GAMeasurementId : `string` {#ga-measurement-id}
+- **Type:** `string`
 
 Google Analytics measurement ID
 

packages/docs/src/reference/classes/system/windows-config.md

@@ -1,5 +1,6 @@
 ---
 outline: deep
+package: "@prozilla-os/core"
 ---
 
 # Class [`WindowsConfig`](https://github.com/prozilla-os/ProzillaOS/blob/main/packages/core/src/features/system/configs/windowsConfig.ts)
@@ -14,38 +15,42 @@ outline: deep
 
 #### options
 
-- options.screenMargin : `number`
+- **Optional**
-- options.titleSeparator : `string`
+- **Type:** `WindowsConfigOptions`
-- options.minScreenSize : [`Vector2`](/reference/classes/utils/vector2)
+
+```ts
+interface WindowsConfigOptions {
+	screenMargin?: number;
+	titleSeparator?: string;
+	minScreenSize?: Vector2;
+}
+```
+
+> [!NOTE] References
+> - [Vector2](/reference/classes/utils/vector2)
 
 ## Properties
 
-### screenMargin : `number` {#screen-margin}
+### screenMargin
 
-The margin that windows will keep between them and the edges of the screen on smaller devices
+- **Type:** `number`
+- **Default:** `32`
 
-> **@default**
+The margin in CSS pixels that windows will keep between them and the edges of the screen on smaller devices
-> ```ts
-> 32
-> ```
 
-### titleSeparator : `string` {#title-separator}
+### titleSeparator
+
+- **Type:** `string`
+- **Default:** `"-"`
 
 A string that is placed between different parts of a window title
 
-> **@default**
+### minScreenSize
-> ```ts
-> "-"
-> ```
 
-### minScreenSize : [`Vector2`](/reference/classes/utils/vector2) {#min-screen-size}
+- **Type:** [`Vector2`](/reference/classes/utils/vector2)
+- **Default:** `new Vector2(350, 350)`
 
 If the user's screen is smaller than these values, windows will always be maximized
 
-> **@default**
-> ```ts
-> new Vector2(350, 350)
-> ```
-
 > [!WARNING] 
 > Keep these values as low as possible, as this limits some functionality of the OS on devices with certain screen sizes.

packages/docs/src/reference/classes/utils/vector2.md

@@ -1,83 +1,193 @@
 ---
 outline: deep
+description: "A 2-dimensional vector, set of coordinates or dimensions"
+package: "@prozilla-os/core"
 ---
 
 # Class [`Vector2`](https://github.com/prozilla-os/ProzillaOS/blob/main/packages/core/src/features/math/vector2.ts)
 
+{{ $frontmatter.description }}
+
 ## Constructor
 
 > `new Vector2(x, y)`
 
 ### Parameters
 
-- **x** : `number`
+<br>
 
-- **y** : `number` (optional)
+#### x
 
-> [!TIP]
+- **Type:** `number`
-> If you leave out the parameter `y`, the properties `x` and `y` will be set to the same value, e.g.:
+
->
+#### y
-> ```ts
+
-> new Vector2(10) --> new Vector2(10, 10)
+- **Optional**
-> ```
+- **Type:** `number`
+
+### Examples
+
+```ts
+new Vector2(2, 4)
+// Result: Vector2(2, 4)
+
+new Vector2(3)
+// Result: Vector2(3, 3)
+```
 
 ## Properties
 
-### x : `number` {#x}
+### x
 
-### y : `number` {#y}
+- **Type:** `number`
 
-### ZERO : `Vector2` <Badge type="info" text="static"/> {#zero}
+### y
+
+- **Type:** `number`
+
+### ZERO
+
+- **Static**
+- **Type:** `Vector2`
 
 Returns a vector with each value set to zero
 
-> ```ts
+- **Example**
-> Vector2.ZERO --> new Vector2(0, 0)
-> ```
 
-### clone : `Vector2` {#clone}
+	```ts
+	Vector2.ZERO
+	// Result: Vector2(0, 0)
+	```
+
+### clone
+
+- **Type:** `Vector2`
 
 Returns a clone of this vector
 
 ## Methods
 
-### round () => `this` {#round}
+### round()
 
-Round the values of this vector to full numbers
+- **Returns**
+  - **Type:** `this`
 
-> ```ts
+Round the values of this vector to whole numbers
-> new Vector2(3.6, 1.3) --> new Vector2(4, 1)
-> ```
 
-### getDistance (x : `number`, y : `number`) => `number` {#get-distance}
+- **Example**
-### getDistance (vector2 : `Vector2`) => `number`
+
+	```ts
+	new Vector2(3.6, 1.3).round()
+	// Result: Vector2(4, 1)
+	```
+
+### getDistance(x, y)
+
+- **Parameters**
+  - **x**
+    - **Type:** `number`
+  - **y**
+    - **Type:** `number`
+- **Returns**
+  - **Type:** `number`
 
 Get the distance between this vector and another
 
-### add (vector2A : `Vector2`, vector2B: `Vector2`) => `Vector2` <Badge type="info" text="static"/> {#add}
+### getDistance(vector2)
+
+- **Parameters**
+  - **vector2**
+    - **Type:** `Vector2`
+- **Returns**
+  - **Type:** `number`
+
+Get the distance between this vector and another
+
+### add(vector2A, vector2B)
+
+- **Static**
+- **Parameters**
+  - **vector2A**
+    - **Type:** `Vector2`
+  - **vector2B**
+    - **Type:** `Vector2`
+- **Returns**
+  - **Type:** `Vector2`
 
 Add two vectors together
 
-### subtract (vector2A : `Vector2`, vector2B: `Vector2`) => `Vector2` <Badge type="info" text="static"/> {#subtract}
+### subtract(vector2A, vector2B)
+
+- **Static**
+- **Parameters**
+  - **vector2A**
+    - **Type:** `Vector2`
+  - **vector2B**
+    - **Type:** `Vector2`
+- **Returns**
+  - **Type:** `Vector2`
 
 Subtract two vectors
 
-### scale (vector2 : `Vector2`, scalar: `number`) => `Vector2` <Badge type="info" text="static"/> {#scale}
+### scale(vector2, scalar)
+
+- **Static**
+- **Parameters**
+  - **vector2**
+    - **Type:** `Vector2`
+  - **scalar**
+    - **Type:** `number`
+- **Returns**
+  - **Type:** `Vector2`
 
 Scale a vector
 
-### magnitude (vector2 : `Vector2`) => `number` <Badge type="info" text="static"/> {#magnitude}
+### magnitude(vector2)
+
+- **Static**
+- **Parameters**
+  - **vector2**
+    - **Type:** `Vector2`
+- **Returns**
+  - **Type:** `number`
 
 Get the magnitude of a vector
 
-### normalize (vector2 : `Vector2`) => `Vector2` <Badge type="info" text="static"/> {#normalize}
+### normalize(vector2)
 
-Get the magnitude of a vector
+- **Static**
+- **Parameters**
+  - **vector2**
+    - **Type:** `Vector2`
+- **Returns**
+  - **Type:** `Vector2`
 
-### sqrDistance (vector2A : `Vector2`, vector2B : `Vector2`) => `number` <Badge type="info" text="static"/> {#sqr-distance}
+Normalize a vector
 
-Get the square distance of two vectors
+### sqrDistance (vector2A, vector2B)
 
-### lerp (vector2A : `Vector2`, vector2B : `Vector2`, t : `number`) => `Vector2` <Badge type="info" text="static"/> {#lerp}
+- **Static**
+- **Parameters**
+  - **vector2A**
+    - **Type:** `Vector2`
+  - **vector2B**
+    - **Type:** `Vector2`
+- **Returns**
+  - **Type:** `number`
+
+Get the square distance between two vectors
+
+### lerp(vector2A, vector2B, t)
+
+- **Static**
+- **Parameters**
+  - **vector2A**
+    - **Type:** `Vector2`
+  - **vector2B**
+    - **Type:** `Vector2`
+  - **t**
+    - **Type:** `number`
+- **Returns**
+  - **Type:** `Vector2`
 
 Lerp between two vectors

packages/docs/src/reference/configuration.md

@@ -6,45 +6,51 @@ outline: deep
 
 To configure ProzillaOS, pass the following properties inside to the `config` prop on the `<ProzillaOS>` component.
 
-## `<ProzillaOS>` props {#prozillaos}
+## `<ProzillaOS>` props
 
-### systemName : `string` {#system-name}
+### systemName
 
-<br>
+- **Optional**
+- **Type:** `string`
+- **Default:** `"ProzillaOS"`
 
-> **@default**
+### tagLine
-> 
-> ```ts
-> "ProzillaOS"
-> ```
 
-### tagLine : `string` {#tag-line}
+- **Optional**
+- **Type:** `string`
+- **Default:** `"Web-based Operating System"`
 
-<br>
+### skin
 
-> **@default**
+- **Optional**
-> 
+- **Type:** [`Skin`](/reference/classes/skins/skin)
-> ```ts
+- **Default:** `new Skin()`
-> "Web-based Operating System"
-> ```
-
-### skin : [`Skin`](./classes/skins/skin) {#skin}
-
-<br>
 
 ### config
 
-<br>
+- **Optional**
+- **Type:** `ConfigOptions`
 
-#### Properties
+```ts
+interface ConfigOptions {
+	apps?: AppsConfig;
+	desktop?: DesktopConfig;
+	misc?: MiscConfig;
+	modals?: ModalsConfig;
+	taskbar?: TaskbarConfig;
+	tracking?: TrackingConfig;
+	windows?: WindowsConfig;
+}
+```
 
-- config.apps : [`AppsConfig`](classes/system/apps-config)
+> [!NOTE] References
-- config.desktop : [`DesktopConfig`](classes/system/desktop-config)
+> - [AppsConfig](/reference/classes/system/apps-config)
-- config.misc : [`MiscConfig`](classes/system/misc-config)
+> - [DesktopConfig](/reference/classes/system/desktop-config)
-- config.modals : [`ModalsConfig`](classes/system/modals-config)
+> - [MiscConfig](/reference/classes/system/misc-config)
-- config.taskbar : [`TaskbarConfig`](classes/system/taskbar-config)
+> - [ModalsConfig](/reference/classes/system/modals-config)
-- config.tracking : [`TrackingConfig`](classes/system/tracking-config)
+> - [TaskbarConfig](/reference/classes/system/taskbar-config)
-- config.windows : [`WindowsConfig`](classes/system/windows-config)
+> - [TrackingConfig](/reference/classes/system/tracking-config)
+> - [WindowsConfig](/reference/classes/system/windows-config)
 
 ## Example
 

packages/docs/tsconfig.json

@@ -2,7 +2,7 @@
 	"extends": "../../tsconfig.json",
 	"compilerOptions": {
 		"baseUrl": "../..",
-		"types": ["node"]
+		"types": ["node", "vitepress/client"]
 	},
 	"include": ["src", ".vitepress", "../core/src/**/*", "scripts"],
 	"exclude": ["node_modules"]