danvics/ProzillaOS
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Docs: Added content + updated formatting

Browse source
This commit is contained in:
Prozilla 2024-07-17 17:34:43 +02:00
parent 6b0886bfed
commit ed989110ad
No known key found for this signature in database
GPG key ID: 5858DFE71CAF31EE
20 changed files with 591 additions and 105 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
packages/docs/.vitepress/config.ts
View file

@ -115,7 +115,22 @@ export default defineConfig({
]
},
]
}
},
{
text: "Functions",
base: "/reference/functions/",
collapsed: false,
items: [
{ text: "Array", link: "/array" },
{ text: "Browser", link: "/browser" },
{ text: "Date", link: "/date" },
{ text: "Math", link: "/math" },
]
},
{
text: "Constants",
link: "constants"
},
]
},
},

51
packages/docs/.vitepress/theme/style.css
View file

@ -104,6 +104,7 @@
:root {
--vp-font-family-base: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
--vp-font-family-mono: "Roboto Mono", source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;
--vp-custom-block-font-size: 16px;
}
/**
@ -256,8 +257,8 @@
--vp-custom-block-details-border: transparent;
--vp-custom-block-details-text: var(--vp-c-text-1);
--vp-custom-block-details-bg: var(--vp-c-default-1);
--vp-custom-block-details-code-bg: var(--vp-c-default-1);
--vp-custom-block-details-bg: var(--vp-c-bg-alt);
--vp-custom-block-details-code-bg: var(--vp-c-bg);
}
/**
@ -273,6 +274,8 @@
* -------------------------------------------------------------------------- */
.custom-block {
--vp-code-block-bg: var(--vp-c-bg);
border: none;
border-left: 5px solid;
padding: 12px 12px 6px;
@ -314,12 +317,45 @@
--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.details {
padding: 0;
}
.custom-block.details > summary {
padding: 12px;
margin: 0;
color: var(--vp-c-text-2);
font-weight: 400;
}
.custom-block.details > summary ~ * {
margin-left: 12px !important;
margin-right: 12px !important;
}
.custom-block.details > *:nth-child(2) {
margin-top: 0;
}
.custom-block.details > *:last-child {
margin-bottom: 0;
}
.custom-block.details[open] {
padding-bottom: 16px;
}
.custom-block ul ul {
margin: 0 !important;
}
.custom-block li + li {
margin-top: 4px;
margin-top: 4px !important;
}
li > p {
margin: 0 !important;
line-height: 24px !important;
}
.VPContent.is-home .vp-doc {
@ -347,4 +383,9 @@
.vp-doc .VPTeamMembers.medium.count-1.center .container {
max-width: 368px !important;
}
.vp-doc img {
border-radius: 8px;
margin: 16px 0;
}

BIN
packages/docs/src/public/assets/file-icons.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 21 KiB

BIN
packages/docs/src/public/assets/folder-icons.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 22 KiB

72
packages/docs/src/reference/classes/apps/app.md
View file

@ -53,33 +53,33 @@ interface WindowOptions {
### name
The display name of this application
- **Type:** `string`
- **Default:** `"App"`
The display name of this application
### id
The unique ID of this application
- **Type:** `string`
- **Default:** `"app"`
The unique ID of this application
> [!WARNING]
> Every app must have a unique ID that only contains lower case letters (a-z), numbers (0-9) and dashes (-).
### windowContent
- **Type:** `React.FC<AppProps>`
React component that renders this app inside a window when the app is running
- **Type:** `React.FC<AppProps>`
### windowOptions
- **Type:** `WindowOptions`
Default options that get passed to the `windowContent` component
- **Type:** `WindowOptions`
```ts
interface WindowOptions {
size?: Vector2;
@ -92,120 +92,120 @@ interface WindowOptions {
### description
- **Type:** `string | null`
Description of this application
- **Type:** `string | null`
### iconUrl
- **Type:** `string | null`
URL of the icon of this application
- **Type:** `string | null`
### role
- **Type:** `string | null`
Defines what parts of the OS this app is responsible for and how it can be used by other apps
- **Type:** `string | null`
### associatedExtensions
- **Type:** `string | null`
An array of file extensions that this application is used to open and read
- **Type:** `string | null`
### pinnedByDefault
Determines whether the app is pinned by default
- **Type:** `boolean`
- **Default:** `true`
Determines whether the app is pinned by default
### launchAtStartup
Determines whether the app is launched at startup
- **Type:** `boolean`
- **Default:** `false`
Determines whether the app is launched at startup
## Methods
### setName(name)
Set the display name of this application
- **Parameters**
- **name**
- **Type:** `string`
- **Returns**
- **Type:** `this`
Set the display name of this application
### setDescription(description)
Set the description of this application
- **Parameters**
- **description**
- **Type:** `string`
- **Returns**
- **Type:** `this`
Set the description of this application
### setIconUrl(iconUrl)
Set the URL of the icon of this application
- **Parameters**
- **iconUrl**
- **Type:** `string | null`
- **Returns**
- **Type:** `this`
Set the URL of the icon of this application
### setRole(role)
Set the role of this application
- **Parameters**
- **role**
- **Type:** `string | null`
- **Returns**
- **Type:** `this`
Set the role of this application
### setAssociatedExtensions(extensions)
Set the associated extensions of this application
- **Parameters**
- **extensions**
- **Type:** `string[] | null`
- **Returns**
- **Type:** `this`
Set the associated extensions of this application
### setPinnedByDefault(pinnedByDefault)
Changes whether this application is pinned by default or not
- **Parameters**
- **pinnedByDefault**
- **Type:** `boolean`
- **Returns**
- **Type:** `this`
Changes whether this application is pinned by default or not
### setLaunchAtStartup(launchAtStartup)
Changes whether this application is launched at startup or not
- **Parameters**
- **launchAtStartup**
- **Type:** `boolean`
- **Returns**
- **Type:** `this`
Changes whether this application is launched at startup or not
### WindowContent(props)
Renders the app as a React component
- **Parameters**
- **props**
- **Type:** `AppProps`
- **Returns**
- **Type:** `React.ReactElement`
Renders the app as a React component

53
packages/docs/src/reference/classes/skins/skin.md
View file

@ -23,8 +23,8 @@ package: "@prozilla-os/skins"
```ts
interface SkinOptions {
appIcons?: { [key: string]: string };
appNames?: { [key: string]: string };
appIcons?: Record<number, string>;
appNames?: Record<number, string>;
wallpapers: string[];
defaultWallpaper: string;
fileIcons: {
@ -47,38 +47,36 @@ interface SkinOptions {
### appIcons
- **Type:** `{ [key: string]: string }`
Replacements for app icons based on app id
- **Type:** `{ [key: string]: string }`
### appNames
- **Type:** `{ [key: string]: string }`
Replacements for app names based on app id
- **Type:** `{ [key: string]: string }`
### wallpapers
- **Type:** `string[]`
Array of URLs of wallpaper images
- **Type:** `string[]`
### defaultWallpaper
URL of default wallpaper image
- **Type:** `string`
- **Default:** `"https://os.prozilla.dev/assets/wallpapers/vibrant-wallpaper-blue-purple-red.png"`
- Preview:
![Default wallpaper](https://os.prozilla.dev/assets/wallpapers/vibrant-wallpaper-blue-purple-red.png)
URL of default wallpaper image
![Default wallpaper](https://os.prozilla.dev/assets/wallpapers/vibrant-wallpaper-blue-purple-red.png)
### fileIcons
- **Type:** `FileIcons`
URLs of icons for types of files
- **Type:** `FileIcons`
```ts
interface FileIcons {
generic: string;
@ -88,12 +86,16 @@ interface FileIcons {
}
```
#### Default
![Default file icons](/assets/file-icons.png)
### folderIcons
- **Type:** `FolderIcons`
URLs of icons for types of folders
- **Type:** `FolderIcons`
```ts
interface FolderIcons {
generic: string;
@ -103,12 +105,15 @@ interface FolderIcons {
}
```
### loadStyleSheet
#### Default
- **Type:** `() => void`
![Default folder icons](/assets/folder-icons.png)
### loadStyleSheet
Function that dynamically imports style sheet
- **Type:** `() => void`
- **Example**
```ts
@ -116,3 +121,13 @@ Function that dynamically imports style sheet
import("../styles/skins/macOs.css");
}
```
## Instances
### macOsSkin
A skin inspired by the macOS interface
### minimalSkin
A minimalistic skin with monochrome icons

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

@ -31,6 +31,6 @@ interface AppsConfigOptions {
### apps
- **Type:** [`App[]`](../apps/app)
An array of applications
- **Type:** [`App[]`](../apps/app)

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

@ -29,9 +29,6 @@ interface DesktopConfigOptions {
### defaultIconSize
- **Type:** `0 | 1 | 2`
- **Default:** `1` (Medium)
The default size of the desktop icons
| Value | Description |
@ -40,14 +37,17 @@ The default size of the desktop icons
| 1 | Medium |
| 2 | Large |
### defaultIconDirection
- **Type:** `0 | 1 | 2`
- **Default:** `1` (Medium)
- **Type:** `0 | 1`
- **Default:** `0` (Vertical)
### defaultIconDirection
The default direction of the desktop icons
| Value | Description |
| --- | --- |
| 0 | Vertical |
| 1 | Horizontal |
| 1 | Horizontal |
- **Type:** `0 | 1`
- **Default:** `0` (Vertical)

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

@ -28,10 +28,10 @@ interface MiscConfigOptions {
### doubleClickDelay
The maximum time between two clicks for those clicks to register as a double click in milliseconds
- **Type:** `number`
- **Default:** `250`
The maximum time between two clicks for those clicks to register as a double click in milliseconds
> [!NOTE]
> Also applies to touch devices.

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

@ -32,14 +32,14 @@ interface ModalsConfigOptions {
### defaultDialogSize
Default size of a dialog box
- **Type:** [`Vector2`](/reference/classes/utils/vector2)
- **Default:** `new Vector2(400, 200)`
Default size of a dialog box
### defaultFileSelectorSize
Default size of a file selector
- **Type:** [`Vector2`](/reference/classes/utils/vector2)
- **Default:** `new Vector2(700, 400)`
Default size of a file selector

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

@ -28,8 +28,8 @@ interface TaskbarConfigOptions {
### height
Height of the taskbar in CSS pixels
- **Type:** `number`
- **Default:** `48`
Height of the taskbar in CSS pixels

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

@ -29,16 +29,16 @@ interface TrackingConfigOptions {
### enabled
Determines whether tracking is enabled
- **Type:** `boolean`
- **Default:** `true`
Determines whether tracking is enabled
### GAMeasurementId
- **Type:** `string`
Google Analytics measurement ID
- **Type:** `string`
> [!WARNING]
> This option is required if you want to enable tracking. The tracking feature currently only supports tracking via Google Analytics.

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

@ -33,24 +33,24 @@ interface WindowsConfigOptions {
### screenMargin
The margin in CSS pixels that windows will keep between them and the edges of the screen on smaller devices
- **Type:** `number`
- **Default:** `32`
The margin in CSS pixels that windows will keep between them and the edges of the screen on smaller devices
### titleSeparator
A string that is placed between different parts of a window title
- **Type:** `string`
- **Default:** `"-"`
A string that is placed between different parts of a window title
### minScreenSize
If the user's screen is smaller than these values, windows will always be maximized
- **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
> [!WARNING]
> Keep these values as low as possible, as this limits some functionality of the OS on devices with certain screen sizes.

72
packages/docs/src/reference/classes/utils/vector2.md
View file

@ -47,11 +47,10 @@ new Vector2(3)
### ZERO
- **Static**
- **Type:** `Vector2`
Returns a vector with each value set to zero
- **Static**
- **Type:** `Vector2`
- **Example**
```ts
@ -61,19 +60,20 @@ Returns a vector with each value set to zero
### clone
- **Type:** `Vector2`
Returns a clone of this vector
- **Type:** `Vector2`
## Methods
### round()
- **Returns**
- **Type:** `this`
Round the values of this vector to whole numbers
::: details
- **Returns**
- **Type:** `this`
- **Example**
```ts
@ -81,8 +81,14 @@ Round the values of this vector to whole numbers
// Result: Vector2(4, 1)
```
:::
### getDistance(x, y)
Get the distance between this vector and another
::: details
- **Parameters**
- **x**
- **Type:** `number`
@ -91,20 +97,28 @@ Round the values of this vector to whole numbers
- **Returns**
- **Type:** `number`
Get the distance between this vector and another
:::
### getDistance(vector2)
Get the distance between this vector and another
::: details
- **Parameters**
- **vector2**
- **Type:** `Vector2`
- **Returns**
- **Type:** `number`
Get the distance between this vector and another
:::
### add(vector2A, vector2B)
Add two vectors together
::: details
- **Static**
- **Parameters**
- **vector2A**
@ -114,10 +128,14 @@ Get the distance between this vector and another
- **Returns**
- **Type:** `Vector2`
Add two vectors together
:::
### subtract(vector2A, vector2B)
Subtract two vectors
::: details
- **Static**
- **Parameters**
- **vector2A**
@ -127,10 +145,14 @@ Add two vectors together
- **Returns**
- **Type:** `Vector2`
Subtract two vectors
:::
### scale(vector2, scalar)
Scale a vector
::: details
- **Static**
- **Parameters**
- **vector2**
@ -140,10 +162,14 @@ Subtract two vectors
- **Returns**
- **Type:** `Vector2`
Scale a vector
:::
### magnitude(vector2)
Get the magnitude of a vector
::: details
- **Static**
- **Parameters**
- **vector2**
@ -151,10 +177,14 @@ Scale a vector
- **Returns**
- **Type:** `number`
Get the magnitude of a vector
:::
### normalize(vector2)
Normalize a vector
::: details
- **Static**
- **Parameters**
- **vector2**
@ -162,10 +192,14 @@ Get the magnitude of a vector
- **Returns**
- **Type:** `Vector2`
Normalize a vector
:::
### sqrDistance (vector2A, vector2B)
Get the square distance between two vectors
::: details
- **Static**
- **Parameters**
- **vector2A**
@ -175,10 +209,14 @@ Normalize a vector
- **Returns**
- **Type:** `number`
Get the square distance between two vectors
:::
### lerp(vector2A, vector2B, t)
Lerp between two vectors
::: details
- **Static**
- **Parameters**
- **vector2A**
@ -190,4 +228,4 @@ Get the square distance between two vectors
- **Returns**
- **Type:** `Vector2`
Lerp between two vectors
:::

8
packages/docs/src/reference/configuration.md
View file

@ -10,24 +10,32 @@ To configure ProzillaOS, pass the following properties inside to the `config` pr
### systemName
Name of the system
- **Optional**
- **Type:** `string`
- **Default:** `"ProzillaOS"`
### tagLine
Tag line or short description of the system
- **Optional**
- **Type:** `string`
- **Default:** `"Web-based Operating System"`
### skin
Configurations for assets, stylesheets and other visual elements
- **Optional**
- **Type:** [`Skin`](/reference/classes/skins/skin)
- **Default:** `new Skin()`
### config
Configurations for functional elements and features
- **Optional**
- **Type:** `ConfigOptions`

54
packages/docs/src/reference/constants/index.md Normal file
View file

@ -0,0 +1,54 @@
---
outline: deep
description: "Constants for ProzillaOS"
package: "@prozilla-os/core"
---
# Constants
{{ $frontmatter.description }}
## Utility
- **Source:** [`utils.const.ts`](https://github.com/prozilla-os/ProzillaOS/blob/main/packages/core/src/constants/utils.const.ts)
### ANSI
Ansi codes for coloring and decorating ansi text
- **Type:** `Ansi`
```ts
interface Ansi {
fg: Record<number, string>; // Foreground colors
bg: Record<number, string>; // Background colors
decoration: Record<number, string>;
reset: string;
};
```
## Virtual drive
- **Source:** [`virtualDrive.const.ts`](https://github.com/prozilla-os/ProzillaOS/blob/main/packages/core/src/constants/virtualDrive.const.ts)
### CODE_EXTENSIONS
An array of file extensions for code-related files
- **Type:** `string[]`
### IMAGE_EXTENSIONS
An array of file extensions for image files
- **Type:** `string[]`
## Themes
- **Source:** [`themes.const.ts`](https://github.com/prozilla-os/ProzillaOS/blob/main/packages/core/src/constants/themes.const.ts)
### THEMES
A map that transforms theme ids into theme names
- **Type:** `Record<number, string | null>`

57
packages/docs/src/reference/functions/array.md Normal file
View file

@ -0,0 +1,57 @@
---
outline: deep
description: "Functions related to arrays"
package: "@prozilla-os/core"
---
# Array functions
{{ $frontmatter.description }}
- **Source:** [`array.utils.ts`](https://github.com/prozilla-os/ProzillaOS/blob/main/packages/core/src/features/_utils/array.utils.ts)
## removeFromArray(item, array)
Remove an item from an array
::: details
- **Type parameters:** `<ItemType>`
- **Parameters**
- **item** - Item to remove from the array
- **Type:** `ItemType`
- **array**
- **Type:** `ItemType[]`
:::
## randomFromArray(array)
Get a random item from an array
::: details
- **Type parameters:** `<ItemType>`
- **Parameters**
- **array**
- **Type:** `ItemType[]`
- **Returns**
- **Type:** `ItemType`
:::
## removeDuplicatesFromArray(array)
Removes all duplicate items from an array and returns the array
::: details
- **Type parameters:** `<ItemType>`
- **Parameters**
- **array**
- **Type:** `ItemType[]`
- **Returns**
- **Type:** `ItemType[]`
:::

146
packages/docs/src/reference/functions/browser.md Normal file
View file

@ -0,0 +1,146 @@
---
outline: deep
description: "Functions related to the browser"
package: "@prozilla-os/core"
---
# Browser functions
{{ $frontmatter.description }}
- **Source:** [`browser.utils.ts`](https://github.com/prozilla-os/ProzillaOS/blob/main/packages/core/src/features/_utils/browser.utils.ts)
## closeViewport(requireConfirmation, name)
Simulate closing the viewport by opening a blank page
::: details
- **Parameters**
- **requireConfirmation** - Whether to ask the user for confirmation before closing
- **Type:** `boolean | undefined`
- **Default:** `false`
- **name** - Name of the system
- **Type:** `string`
:::
## reloadViewport()
Reload the viewport
## isValidUrl(string)
Validate a URL string
::: details
- **Parameters**
- **string** - Input string
- **Type:** `string`
- **Returns**
- **Type:** `boolean`
:::
## setViewportTitle(title)
Change the viewport title by changing meta tags and document title
::: details
- **Parameters**
- **title** - Viewport title
- **Type:** `string`
:::
## setViewportIcon(url)
Change the viewport icon by changing meta tags
::: details
- **Parameters**
- **url** - URL of the viewport icon
- **Type:** `string`
:::
## getViewportParams()
Get the current viewport parameters/search queries
::: details
- **Returns**
- **Type:** `Record<string, string>`
:::
## generateUrl(options)
Generate a system URL based on some options
::: details
- **Parameters**
- **options**
- **Type:** `GenerateUrlOptions`
- **Returns** - The generated URL
- **Type:** `string`
```ts
interface GenerateUrlOptions {
appId?: string;
fullscreen?: boolean;
standalone?: boolean;
}
```
:::
## openUrl(url, target)
Open a URL in an optional target or the current window
::: details
- **Parameters**
- **url**
- **Type:** `string`
- **target**
- **Optional**
- **Type:** `React.HTMLAttributeAnchorTarget`
:::
## removeUrlProtocol(url)
Remove the protocol from a URL string
::: details
- **Parameters**
- **url**
- **Type:** `string`
- **Returns** - URL without protocol
- **Type:** `string`
:::
## copyToClipboard(string, onSuccess, onFail)
Copy text to the user's clipboard
::: details
- **Parameters**
- **string**
- **Type:** `string`
- **onSuccess**
- **Type:** `Function`
- **onFail**
- **Type:** `Function`
:::

50
packages/docs/src/reference/functions/date.md Normal file
View file

@ -0,0 +1,50 @@
---
outline: deep
description: "Functions related to dates and time"
package: "@prozilla-os/core"
---
# Date functions
{{ $frontmatter.description }}
- **Source:** [`date.utils.ts`](https://github.com/prozilla-os/ProzillaOS/blob/main/packages/core/src/features/_utils/date.utils.ts)
## formatTime(time, maxLength, allowAffixes)
Format a time
::: details
- **Parameters**
- **time** - Time in milliseconds (negative number represents time in the past)
- **Type:** `number`
- **maxLength** - The maximum amount of units, e.g.: 3 => years, months, days
- **Type:** `number | undefined`
- **Default:** `3`
- **allowAffixes** - Allow "... ago" or "in ..."
- **Type:** `boolean`
- **Returns**
- **Type:** `string`
:::
## formatRelativeTime(date, maxLength, allowAffixes)
Format a time relative to now
::: details
- **Parameters**
- **date**
- **Type:** `Date`
- **maxLength** - The maximum amount of units, e.g.: 3 => years, months, days
- **Type:** `number | undefined`
- **Default:** `3`
- **allowAffixes** - Allow "... ago" or "in ..."
- **Type:** `boolean`
- **Returns**
- **Type:** `string`
:::

62
packages/docs/src/reference/functions/math.md Normal file
View file

@ -0,0 +1,62 @@
---
outline: deep
description: "Functions related to math"
package: "@prozilla-os/core"
---
# Math functions
{{ $frontmatter.description }}
- **Source:** [`math.utils.ts`](https://github.com/prozilla-os/ProzillaOS/blob/main/packages/core/src/features/_utils/math.utils.ts)
## clamp(value, min, max)
Clamp a value between a min and a max value
::: details
- **Parameters**
- **value**
- **Type:** `number`
- **min**
- **Type:** `number`
- **max**
- **Type:** `number`
- **Returns**
- **Type:** `number`
:::
## randomRange(min, max)
Get a random number in a range between a min and a max value
::: details
- **Parameters**
- **min**
- **Type:** `number`
- **max**
- **Type:** `number`
- **Returns**
- **Type:** `number`
:::
## round(value, precision)
Round a number off to a certain amount of digits after the comma
::: details
- **Parameters**
- **value** - Initial value
- **Type:** `number`
- **precision** - Maximum amount of digits allowed after the comma
- **Type:** `number`
- **Returns** - Rounded value
- **Type:** `number`
:::