docs: Completed /reference/classes/system/ pages

This commit is contained in:
Prozilla 2024-07-08 20:42:55 +02:00
parent c51d85c5a3
commit 522612148c
No known key found for this signature in database
GPG key ID: 5858DFE71CAF31EE
16 changed files with 549 additions and 65 deletions

View file

@ -13,7 +13,7 @@
## About
This monorepo contains the source code of [os.prozilla.dev][website] as well as multiple packages. You can find the main package at [`prozilla-os`][prozilla-os].
This monorepo contains the source code of [os.prozilla.dev][demo] as well as multiple packages. You can find the main package at [`prozilla-os`][prozilla-os].
ProzillaOS is a web-based operating system inspired by Ubuntu Linux and Windows. It is made with React, Vite and TypeScript by [Prozilla][prozilla].

View file

@ -25,6 +25,7 @@
"docs:build": "pnpm --filter prozilla-os-docs run build",
"docs:stage": "pnpm --filter prozilla-os-docs run stage",
"docs:preview": "pnpm --filter prozilla-os-docs run preview",
"docs:generate": "pnpm --filter prozilla-os-docs run generate",
"packages:build": "pnpm -r --sequential --filter @prozilla-os/* --filter prozilla-os build",
"packages:update": "npx changeset && pnpm changeset version",
"packages:release": "pnpm changeset publish"

View file

@ -59,7 +59,7 @@ export class App<AppProps extends WindowProps = WindowProps> {
pinnedByDefault = true;
/**
* Determiens whether the app is launched at startup
* Determines whether the app is launched at startup
* @default false
*/
launchAtStartup = false;

View file

@ -65,9 +65,15 @@ export default defineConfig({
text: "System",
base: "/reference/classes/system/",
items: [
{ text: "App", link: "app" },
{ text: "AppsConfig", link: "apps-config" },
{ text: "DesktopConfig", link: "desktop-config" },
{ text: "TaskbarConfig", link: "taskbar-config" }
{ text: "MiscConfig", link: "misc-config" },
{ text: "ModalsConfig", link: "modals-config" },
{ text: "TaskbarConfig", link: "taskbar-config" },
{ text: "TrackingConfig", link: "tracking-config" },
{ text: "VirtualDriveConfig", link: "virtual-drive-config" },
{ text: "WindowsConfig", link: "windows-config" },
]
},
]

View file

@ -300,3 +300,11 @@
.custom-block.tip {
--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath d='M272 384c9.6-31.9 29.5-59.1 49.2-86.2l0 0c5.2-7.1 10.4-14.2 15.4-21.4c19.8-28.5 31.4-63 31.4-100.3C368 78.8 289.2 0 192 0S16 78.8 16 176c0 37.3 11.6 71.9 31.4 100.3c5 7.2 10.2 14.3 15.4 21.4l0 0c19.8 27.1 39.7 54.4 49.2 86.2H272zM192 512c44.2 0 80-35.8 80-80V416H112v16c0 44.2 35.8 80 80 80zM112 176c0 8.8-7.2 16-16 16s-16-7.2-16-16c0-61.9 50.1-112 112-112c8.8 0 16 7.2 16 16s-7.2 16-16 16c-44.2 0-80 35.8-80 80z'/%3E%3C/svg%3E")
}
.custom-block.note {
--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336h24V272H216c-13.3 0-24-10.7-24-24s10.7-24 24-24h48c13.3 0 24 10.7 24 24v88h8c13.3 0 24 10.7 24 24s-10.7 24-24 24H216c-13.3 0-24-10.7-24-24s10.7-24 24-24zm40-208a32 32 0 1 1 0 64 32 32 0 1 1 0-64z'/%3E%3C/svg%3E")
}
.custom-block.warning {
--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")
}

View file

@ -0,0 +1,134 @@
---
outline: deep
---
# 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
Applications can be installed by adding them to the `apps` array in [`AppsConfig`](apps-config#apps-app)
## Type parameters
> `<AppProps extends WindowProps = WindowProps>`
## Constructor
> `new App(name, id, windowContent, windowOptions)`
### Parameters
- **name** : `string`
- **id** : `string`
- **windowContent** : `React.FC<AppProps>`
- **windowOptions** : `object`
- windowOptions.size : `Vector2`
## Properties
### name : `string` {#name}
The display name of this application
> **@default**
> ```ts
> "App"
> ```
### id : `string` {#id}
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}
React component that renders this app inside a window when the app is running
### windowOptions : `object` {#window-options}
Default options that get passed to the `windowContent` component
You can extend this object with any properties
#### Properties
- windowOptions.size : `Vector2`
### description : `string | null` {#description}
Description of this application
### iconUrl : `string | null` {#icon-url}
URL of the icon of this application
### role : `string | null` {#role}
Defines what parts of the OS this app is responsible for and how it can be used by other apps
### associatedExtensions : `string[]` {#associated-extensions}
An array of file extensions that this application is used to open and read
### pinnedByDefault : `boolean` {#pinned-by-default}
Determines whether the app is pinned by default
> **@default**
> ```ts
> true
> ```
### launchAtStartup : `boolean` {#launch-at-startup}
Determines whether the app is launched at startup
> **@default**
> ```ts
> false
> ```
## Methods
### setName (name : `string`) => `this` {#set-name}
Set the display name of this application
### setDescription (description : `string | null`) => `this` {#set-description}
Set the description of this application
### setIconUrl (iconUrl : `string | null`) => `this` {#set-icon-url}
Set the URL of the icon of this application
### setRole (role : `string | null`) => `this` {#set-role}
Set the role of this application
### setAssociatedExtensions (extensions : `string[] | null`) => `this` {#set-associated-extensions}
Set the associated extensions of this application
### setPinnedByDefault (pinnedByDefault : `boolean`) => `this` {#set-pinned-by-default}
Changes whether this application is pinned by default or not
### setLaunchAtStartup (launchAtStartup : `boolean`) => `this` {#set-launch-at-startup}
Changes whether this application is launched at startup or not
### WindowContent (props : `AppProps`) => `React.ReactElement` {#Window-content}
Renders the app as a React component

View file

@ -4,8 +4,20 @@ outline: deep
# Class [`AppsConfig`](https://github.com/prozilla-os/ProzillaOS/blob/main/packages/core/src/features/system/configs/appsConfig.ts)
## Constructor
> `new AppsConfig(options)`
### Parameters
<br>
#### options
- options.apps : [`App[]`](app)
## Properties
### apps : `App[]`
### apps : [`App[]`](app) {#apps}
An array of applications

View file

@ -4,54 +4,81 @@ outline: deep
# Class [`DesktopConfig`](https://github.com/prozilla-os/ProzillaOS/blob/main/packages/core/src/features/system/configs/desktopConfig.ts)
## Properties
## Constructor
### wallpapers : `string[]`
> `new DesktopConfig(options)`
Array of URLs of wallpaper images
#### @default
```ts
[
"https://os.prozilla.dev/assets/wallpapers/vibrant-wallpaper-blue-purple-red.png",
"https://os.prozilla.dev/assets/wallpapers/abstract-mesh-gradient-orange-red-purple.png",
"https://os.prozilla.dev/assets/wallpapers/vibrant-wallpaper-purple-yellow.png",
"https://os.prozilla.dev/assets/wallpapers/abstract-wallpaper-mesh-gradient-cyan.png",
"https://os.prozilla.dev/assets/wallpapers/colorful-abstract-wallpaper-blue-red-green.png",
"https://os.prozilla.dev/assets/wallpapers/mesh-gradient-wallpaper-red-purple.png",
"https://os.prozilla.dev/assets/wallpapers/colorful-mesh-gradient-red-green.png",
"https://os.prozilla.dev/assets/wallpapers/flame-abstract-wallpaper-orange.png",
"https://os.prozilla.dev/assets/wallpapers/wave-abstract-wallpaper-teal.png",
]
```
### defaultWallpaper : `string`
URL of default wallpaper image
#### @default
```ts
"https://os.prozilla.dev/assets/wallpapers/vibrant-wallpaper-blue-purple-red.png"
```
### defaultIconSize : `0 | 1 | 2`
### Parameters
<br>
#### @default
#### options
```ts
1
```
- options.wallpapers : `string[]`
- options.defaultWallpaper : `string`
- options.defaultIconSize : `0 | 1 | 2`
- options.defaultIconDirection : `0 | 1`
### defaultIconDirection : `0 | 1`
## Properties
0: vertical, 1: horizontal
### wallpapers : `string[]` {#wallpapers}
#### @default
Array of URLs of wallpaper images
```ts
0
```
> **@default**
>
> ```ts
> [
> "https://os.prozilla.dev/assets/wallpapers/vibrant-wallpaper-blue-purple-red.png",
> "https://os.prozilla.dev/assets/wallpapers/abstract-mesh-gradient-orange-red-purple.png",
> "https://os.prozilla.dev/assets/wallpapers/vibrant-wallpaper-purple-yellow.png",
> "https://os.prozilla.dev/assets/wallpapers/abstract-wallpaper-mesh-gradient-cyan.png",
> "https://os.prozilla.dev/assets/wallpapers/colorful-abstract-wallpaper-blue-red-green.png",
> "https://os.prozilla.dev/assets/wallpapers/mesh-gradient-wallpaper-red-purple.png",
> "https://os.prozilla.dev/assets/wallpapers/colorful-mesh-gradient-red-green.png",
> "https://os.prozilla.dev/assets/wallpapers/flame-abstract-wallpaper-orange.png",
> "https://os.prozilla.dev/assets/wallpapers/wave-abstract-wallpaper-teal.png",
> ]
> ```
### defaultWallpaper : `string` {#default-wallpaper}
URL of default wallpaper image
> **@default**
>
> ```ts
> "https://os.prozilla.dev/assets/wallpapers/vibrant-wallpaper-blue-purple-red.png"
> ```
> ![Preview](https://os.prozilla.dev/assets/wallpapers/vibrant-wallpaper-blue-purple-red.png)
### defaultIconSize : `0 | 1 | 2` {#default-icon-size}
The default size of the desktop icons
| Value | Description |
| --- | --- |
| 0 | Small |
| 1 | Medium |
| 2 | Large |
> **@default**
>
> ```ts
> 1 // Medium
> ```
### defaultIconDirection : `0 | 1` {#default-icon-direction}
The default direction of the desktop icons
| Value | Description |
| --- | --- |
| 0 | Vertical |
| 1 | Horizontal |
> **@default**
>
> ```ts
> 0 // Vertical
> ```

View file

@ -0,0 +1,32 @@
---
outline: deep
---
# Class [`MiscConfig`](https://github.com/prozilla-os/ProzillaOS/blob/main/packages/core/src/features/system/configs/miscConfig.ts)
## Constructor
> `new MiscConfig(options)`
### Parameters
<br>
#### options
- options.doubleClickDelay : `number`
## Properties
### doubleClickDelay : `number` {#double-click-delay}
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.

View file

@ -0,0 +1,40 @@
---
outline: deep
---
# Class [`ModalsConfig`](https://github.com/prozilla-os/ProzillaOS/blob/main/packages/core/src/features/system/configs/modalsConfig.ts)
## Constructor
> `new ModalsConfig(options)`
### Parameters
<br>
#### options
- options.defaultDialogSize : `Vector2`
- options.defaultFileSelectorSize : `Vector2`
## Properties
### defaultDialogSize : `Vector2` {#default-dialog-size}
Default size of a dialog box
> **@default**
>
> ```ts
> new Vector2(400, 200)
> ```
### defaultFileSelectorSize : `Vector2` {#default-file-selector-size}
Default size of a file selector
> **@default**
>
> ```ts
> new Vector2(700, 400)
> ```

View file

@ -4,14 +4,26 @@ outline: deep
# Class [`TaskbarConfig`](https://github.com/prozilla-os/ProzillaOS/blob/main/packages/core/src/features/system/configs/taskbarConfig.ts)
## Constructor
> `new TaskbarConfig(options)`
### Parameters
<br>
#### options
- options.height : `number`
## Properties
### height : `number`
### height : `number` {#height}
Height of the taskbar in CSS pixels
#### @default
```ts
48
```
> **@default**
>
> ```ts
> 48
> ```

View file

@ -0,0 +1,37 @@
---
outline: deep
---
# Class [`TrackingConfig`](https://github.com/prozilla-os/ProzillaOS/blob/main/packages/core/src/features/system/configs/trackingConfig.ts)
## Constructor
> `new TrackingConfig(options)`
### Parameters
<br>
#### options
- options.enabled : `boolean`
- options.GAMeasurementId : `string`
## Properties
### enabled : `boolean` {#enabled}
Determines whether tracking is enabled
> **@default**
>
> ```ts
> true
> ```
### GAMeasurementId : `string` {#ga-measurement-id}
Google Analytics measurement ID
> [!WARNING]
> This option is required if you want to enable tracking. The tracking feature currently only supports tracking via Google Analytics.

View file

@ -0,0 +1,114 @@
---
outline: deep
---
# Class [`VirtualDriveConfig`](https://github.com/prozilla-os/ProzillaOS/blob/main/packages/core/src/features/system/configs/virtualDriveConfig.ts)
## Constructor
> `new VirtualDriveConfig(options)`
### Parameters
<br>
#### options
- options.fileIcon : `string`
- options.infoFileIcon : `string`
- options.textFileIcon : `string`
- options.codeFileIcon : `string`
- options.folderIcon : `string`
- options.imagesFolderIcon : `string`
- options.textFolderIcon : `string`
- options.folderLinkIcon : `string`
## Properties
### fileIcon : `string` {#file-icon}
URL of an icon for regular files
> **@default**
>
> ```ts
> "https://os.prozilla.dev/assets/apps/file-explorer/icons/file.svg"
> ```
> ![Preview](https://os.prozilla.dev/assets/apps/file-explorer/icons/file.svg)
### infoFileIcon : `string` {#info-file-icon}
URL of an icon for information files
> **@default**
>
> ```ts
> "https://os.prozilla.dev/assets/apps/file-explorer/icons/file-info.svg"
> ```
> ![Preview](https://os.prozilla.dev/assets/apps/file-explorer/icons/file-info.svg)
### textFileIcon : `string` {#text-file-icon}
URL of an icon for text files
> **@default**
>
> ```ts
> "https://os.prozilla.dev/assets/apps/file-explorer/icons/file-text.svg"
> ```
> ![Preview](https://os.prozilla.dev/assets/apps/file-explorer/icons/file-text.svg)
### codeFileIcon : `string` {#code-file-icon}
URL of an icon for code files
> **@default**
>
> ```ts
> "https://os.prozilla.dev/assets/apps/file-explorer/icons/file-code.svg"
> ```
> ![Preview](https://os.prozilla.dev/assets/apps/file-explorer/icons/file-code.svg)
### folderIcon : `string` {#folder-icon}
URL of an icon for regular folders
> **@default**
>
> ```ts
> "https://os.prozilla.dev/assets/apps/file-explorer/icons/folder.svg"
> ```
> ![Preview](https://os.prozilla.dev/assets/apps/file-explorer/icons/folder.svg)
### imagesFolderIcon : `string` {#images-folder-icon}
URL of an icon for image folders
> **@default**
>
> ```ts
> "https://os.prozilla.dev/assets/apps/file-explorer/icons/folder-images.svg"
> ```
> ![Preview](https://os.prozilla.dev/assets/apps/file-explorer/icons/folder-images.svg)
### textFolderIcon : `string` {#text-folder-icon}
URL of an icon for text folders
> **@default**
>
> ```ts
> "https://os.prozilla.dev/assets/apps/file-explorer/icons/folder-text.svg"
> ```
> ![Preview](https://os.prozilla.dev/assets/apps/file-explorer/icons/folder-text.svg)
### folderLinkIcon : `string` {#folder-link-icon}
URL of an icon for folder links
> **@default**
>
> ```ts
> "https://os.prozilla.dev/assets/apps/file-explorer/icons/folder-link.svg"
> ```
> ![Preview](https://os.prozilla.dev/assets/apps/file-explorer/icons/folder-link.svg)

View file

@ -0,0 +1,51 @@
---
outline: deep
---
# Class [`WindowsConfig`](https://github.com/prozilla-os/ProzillaOS/blob/main/packages/core/src/features/system/configs/windowsConfig.ts)
## Constructor
> `new WindowsConfig(options)`
### Parameters
<br>
#### options
- options.screenMargin : `number`
- options.titleSeparator : `string`
- options.minScreenSize : `Vector2`
## Properties
### screenMargin : `number` {#screen-margin}
The margin that windows will keep between them and the edges of the screen on smaller devices
> **@default**
> ```ts
> 32
> ```
### titleSeparator : `string` {#title-separator}
A string that is placed between different parts of a window title
> **@default**
> ```ts
> "-"
> ```
### minScreenSize : `Vector2` {#min-screen-size}
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.

View file

@ -12,31 +12,36 @@ To configure ProzillaOS, pass the following properties inside to the `config` pr
<br>
#### @default
```ts
"ProzillaOS"
```
> **@default**
>
> ```ts
> "ProzillaOS"
> ```
### tagLine : `string`
<br>
#### @default
> **@default**
>
> ```ts
> "Web-based Operating System"
> ```
```ts
"Web-based Operating System"
```
### config : {}
### config
<br>
#### Properties
- apps : [`AppsConfig`](classes/system/apps-config)
- desktop : [`DesktopConfig`](classes/system/desktop-config)
- taskbar : [`TaskbarConfig`](classes/system/taskbar-config)
- config.apps : [`AppsConfig`](classes/system/apps-config)
- config.desktop : [`DesktopConfig`](classes/system/desktop-config)
- config.misc : [`MiscConfig`](classes/system/misc-config)
- config.modals : [`ModalsConfig`](classes/system/modals-config)
- config.taskbar : [`TaskbarConfig`](classes/system/taskbar-config)
- config.tracking : [`TrackingConfig`](classes/system/tracking-config)
- config.virtualDrive : [`VirtualDriveConfig`](classes/system/virtual-drive-config)
- config.windows : [`WindowsConfig`](classes/system/windows-config)
## Example

View file

@ -0,0 +1,5 @@
{
"entryPoints": ["../core/src/main.ts"],
"out": "cache",
"plugin": ["typedoc-plugin-markdown"],
}