docs: Added reference pages
This commit is contained in:
Prozilla
parent
1525995dc9
commit
d40bcf6ed5
8 changed files with 482 additions and 30 deletions
|
|
@ -3,35 +3,87 @@ import { defineConfig } from "vitepress";
|
|||
// https://vitepress.dev/reference/site-config
|
||||
export default defineConfig({
|
||||
title: "ProzillaOS Docs",
|
||||
|
||||
description: "Documentation for ProzillaOS and its packages.",
|
||||
|
||||
srcDir: "src",
|
||||
|
||||
base: "/docs/",
|
||||
|
||||
head: [
|
||||
["link", { rel: "icon", href: "/docs/favicon.ico" }],
|
||||
["link", { rel: "preconnect", href: "https://fonts.googleapis.com" }],
|
||||
["link", { rel: "preconnect", href: "https://fonts.gstatic.com", crossorigin: "" }],
|
||||
["link", { href: "https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap", rel: "stylesheet" }]
|
||||
],
|
||||
|
||||
cleanUrls: true,
|
||||
|
||||
outDir: "./dist",
|
||||
|
||||
sitemap: {
|
||||
hostname: "https://os.prozilla.dev/docs/"
|
||||
},
|
||||
|
||||
themeConfig: {
|
||||
// https://vitepress.dev/reference/default-theme-config
|
||||
nav: [
|
||||
{ text: "Home", link: "/" },
|
||||
{ text: "Getting started", link: "/getting-started" }
|
||||
{ text: "Demo", link: "https://os.prozilla.dev/", target: "_blank" },
|
||||
{ text: "Guides", link: "/guides/getting-started", activeMatch: "/guides/" },
|
||||
{ text: "Reference", link: "/reference/configuration", activeMatch: "/reference/" }
|
||||
],
|
||||
|
||||
sidebar: [
|
||||
{
|
||||
text: "Docs",
|
||||
sidebar: {
|
||||
"/guides/": {
|
||||
base: "/guides/",
|
||||
items: [{
|
||||
text: "Guides",
|
||||
items: [
|
||||
{ text: "Getting started", link: "/getting-started" },
|
||||
{ text: "Custom app", link: "/custom-app" },
|
||||
]
|
||||
}]
|
||||
},
|
||||
"/reference/": {
|
||||
base: "/reference/",
|
||||
items: [
|
||||
{ text: "Getting started", link: "/getting-started" },
|
||||
{
|
||||
text: "Reference",
|
||||
collapsed: false,
|
||||
items: [
|
||||
{ text: "Configuration", link: "/configuration" },
|
||||
]
|
||||
},
|
||||
{
|
||||
text: "Classes",
|
||||
base: "/reference/classes/",
|
||||
collapsed: false,
|
||||
items: [
|
||||
{
|
||||
text: "System",
|
||||
base: "/reference/classes/system/",
|
||||
items: [
|
||||
{ text: "AppsConfig", link: "apps-config" },
|
||||
{ text: "DesktopConfig", link: "desktop-config" },
|
||||
{ text: "TaskbarConfig", link: "taskbar-config" }
|
||||
]
|
||||
},
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
},
|
||||
},
|
||||
|
||||
editLink: {
|
||||
pattern: "https://github.com/prozilla-os/ProzillaOS/edit/main/packages/docs/src/:path",
|
||||
text: "Edit this page on GitHub"
|
||||
},
|
||||
|
||||
socialLinks: [
|
||||
{ icon: "github", link: "https://github.com/prozilla-os/ProzillaOS" }
|
||||
{ icon: "github", link: "https://github.com/prozilla-os/ProzillaOS" },
|
||||
{ icon: "discord", link: "https://discord.gg/JwbyQP4tdz" },
|
||||
{ icon: "npm", link: "https://www.npmjs.com/package/prozilla-os" }
|
||||
],
|
||||
|
||||
logo: {
|
||||
|
|
@ -39,6 +91,11 @@ export default defineConfig({
|
|||
light: "/logo-dark.svg"
|
||||
},
|
||||
|
||||
siteTitle: "ProzillaOS"
|
||||
siteTitle: "ProzillaOS",
|
||||
|
||||
footer: {
|
||||
message: "Built by <strong><a href=\"https://prozilla.dev/\" target=\"_blank\">Prozilla</a></strong>",
|
||||
copyright: "Copyright © 2023-present Prozilla"
|
||||
},
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -54,40 +54,40 @@
|
|||
--vp-c-brand-3: #4D9CFF;
|
||||
--vp-c-brand-soft: #366DB2;
|
||||
|
||||
--vp-c-tip-1: #4DFF8B;
|
||||
--vp-c-tip-1: #1F6638;
|
||||
--vp-c-tip-2: #36B261;
|
||||
--vp-c-tip-3: #4DFF8B;
|
||||
--vp-c-tip-soft: #36B261;
|
||||
--vp-c-tip-soft: #1F6638;
|
||||
|
||||
--vp-c-note-1: #4D9CFF;
|
||||
--vp-c-note-1: #1F3E66;
|
||||
--vp-c-note-2: #366DB2;
|
||||
--vp-c-note-3: #4D9CFF;
|
||||
--vp-c-note-soft: #366DB2;
|
||||
--vp-c-note-soft: #1F3E66;
|
||||
|
||||
--vp-c-success-1: #4DFF8B;
|
||||
--vp-c-success-1: #1F6638;
|
||||
--vp-c-success-2: #36B261;
|
||||
--vp-c-success-3: #4DFF8B;
|
||||
--vp-c-success-soft: #36B261;
|
||||
--vp-c-success-soft: #1F6638;
|
||||
|
||||
--vp-c-important-1: #974DFF;
|
||||
--vp-c-important-1: #3C1F66;
|
||||
--vp-c-important-2: #6A36B2;
|
||||
--vp-c-important-3: #974DFF;
|
||||
--vp-c-important-soft: #6A36B2;
|
||||
--vp-c-important-soft: #3C1F66;
|
||||
|
||||
--vp-c-warning-1: #FF974D;
|
||||
--vp-c-warning-1: #663C1F;
|
||||
--vp-c-warning-2: #B26A36;
|
||||
--vp-c-warning-3: #FF974D;
|
||||
--vp-c-warning-soft: #B26A36;
|
||||
--vp-c-warning-soft: #663C1F;
|
||||
|
||||
--vp-c-danger-1: #FF4D5B;
|
||||
--vp-c-danger-1: #661F25;
|
||||
--vp-c-danger-2: #B23640;
|
||||
--vp-c-danger-3: #FF4D5B;
|
||||
--vp-c-danger-soft: #B23640;
|
||||
--vp-c-danger-soft: #661F25;
|
||||
|
||||
--vp-c-caution-1: #FF4D5B;
|
||||
--vp-c-caution-1: #661F25;
|
||||
--vp-c-caution-2: #B23640;
|
||||
--vp-c-caution-3: #FF4D5B;
|
||||
--vp-c-caution-soft: #B23640;
|
||||
--vp-c-caution-soft: #661F25;
|
||||
}
|
||||
|
||||
.dark {
|
||||
|
|
@ -209,15 +209,50 @@
|
|||
* -------------------------------------------------------------------------- */
|
||||
|
||||
:root {
|
||||
--vp-custom-block-tip-border: transparent;
|
||||
--vp-custom-block-tip-text: var(--vp-c-text-1);
|
||||
--vp-custom-block-tip-border: var(--vp-c-tip-3);
|
||||
--vp-custom-block-tip-text: var(--vp-c-tip-3);
|
||||
--vp-custom-block-tip-bg: var(--vp-c-tip-soft);
|
||||
--vp-custom-block-tip-code-bg: var(--vp-c-tip-soft);
|
||||
--vp-custom-block-tip-code-bg: var(--vp-c-tip-3);
|
||||
|
||||
--vp-custom-block-info-border: transparent;
|
||||
--vp-custom-block-info-text: var(--vp-c-text-1);
|
||||
--vp-custom-block-note-border: var(--vp-c-note-3);
|
||||
--vp-custom-block-note-text: var(--vp-c-note-3);
|
||||
--vp-custom-block-note-bg: var(--vp-c-note-soft);
|
||||
--vp-custom-block-note-code-bg: var(--vp-c-note-3);
|
||||
|
||||
--vp-custom-block-success-border: var(--vp-c-success-3);
|
||||
--vp-custom-block-success-text: var(--vp-c-success-3);
|
||||
--vp-custom-block-success-bg: var(--vp-c-success-soft);
|
||||
--vp-custom-block-success-code-bg: var(--vp-c-success-3);
|
||||
|
||||
--vp-custom-block-important-border: var(--vp-c-important-3);
|
||||
--vp-custom-block-important-text: var(--vp-c-important-3);
|
||||
--vp-custom-block-important-bg: var(--vp-c-important-soft);
|
||||
--vp-custom-block-important-code-bg: var(--vp-c-important-3);
|
||||
|
||||
--vp-custom-block-warning-border: var(--vp-c-warning-3);
|
||||
--vp-custom-block-warning-text: var(--vp-c-warning-3);
|
||||
--vp-custom-block-warning-bg: var(--vp-c-warning-soft);
|
||||
--vp-custom-block-warning-code-bg: var(--vp-c-warning-3);
|
||||
|
||||
--vp-custom-block-warning-border: var(--vp-c-warning-3);
|
||||
--vp-custom-block-warning-text: var(--vp-c-warning-3);
|
||||
--vp-custom-block-warning-bg: var(--vp-c-warning-soft);
|
||||
--vp-custom-block-warning-code-bg: var(--vp-c-warning-3);
|
||||
|
||||
--vp-custom-block-danger-border: var(--vp-c-danger-3);
|
||||
--vp-custom-block-danger-text: var(--vp-c-danger-3);
|
||||
--vp-custom-block-danger-bg: var(--vp-c-danger-soft);
|
||||
--vp-custom-block-danger-code-bg: var(--vp-c-danger-3);
|
||||
|
||||
--vp-custom-block-caution-border: var(--vp-c-caution-3);
|
||||
--vp-custom-block-caution-text: var(--vp-c-caution-3);
|
||||
--vp-custom-block-caution-bg: var(--vp-c-caution-soft);
|
||||
--vp-custom-block-caution-code-bg: var(--vp-c-caution-3);
|
||||
|
||||
--vp-custom-block-info-border: var(--vp-c-note-3);
|
||||
--vp-custom-block-info-text: var(--vp-c-note-3);
|
||||
--vp-custom-block-info-bg: var(--vp-c-note-soft);
|
||||
--vp-custom-block-info-code-bg: var(--vp-c-note-soft);
|
||||
--vp-custom-block-info-code-bg: var(--vp-c-note-3);
|
||||
|
||||
--vp-custom-block-details-border: transparent;
|
||||
--vp-custom-block-details-text: var(--vp-c-text-1);
|
||||
|
|
@ -233,3 +268,35 @@
|
|||
--docsearch-primary-color: var(--vp-c-brand-1) !important;
|
||||
}
|
||||
|
||||
/**
|
||||
* Custom styles
|
||||
* -------------------------------------------------------------------------- */
|
||||
|
||||
|
||||
.custom-block > .custom-block-title {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.custom-block > .custom-block-title::before {
|
||||
content: "";
|
||||
display: block;
|
||||
-webkit-mask: var(--icon) no-repeat;
|
||||
mask: var(--icon) no-repeat;
|
||||
-webkit-mask-size: 100% 100%;
|
||||
mask-size: 100% 100;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
background-color: currentColor;
|
||||
color: inherit;
|
||||
fill: currentColor;
|
||||
}
|
||||
|
||||
.custom-block.caution {
|
||||
--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 512zm0-384c13.3 0 24 10.7 24 24V264c0 13.3-10.7 24-24 24s-24-10.7-24-24V152c0-13.3 10.7-24 24-24zM224 352a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z'/%3E%3C/svg%3E")
|
||||
}
|
||||
|
||||
.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")
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,6 +2,6 @@
|
|||
outline: deep
|
||||
---
|
||||
|
||||
# Getting started
|
||||
# Making a custom app
|
||||
|
||||
Coming soon!
|
||||
174
packages/docs/src/guides/getting-started.md
Normal file
174
packages/docs/src/guides/getting-started.md
Normal file
|
|
@ -0,0 +1,174 @@
|
|||
---
|
||||
outline: deep
|
||||
---
|
||||
|
||||
# Getting started
|
||||
|
||||
## Prerequisites
|
||||
|
||||
This guide assumes you have already set up a basic React project with TypeScript. To learn more about how to set up a React project, check out the official [React documentation](https://react.dev/learn/start-a-new-react-project). The React documentation also has a guide on [how to start using TypeScript in your React project](https://react.dev/learn/typescript).
|
||||
|
||||
## Installation
|
||||
|
||||
There are multiple ways to install ProzillaOS. The simplest way is to install the bundle package `prozilla-os`, which contains the core functionality as well as all standard applications.
|
||||
|
||||
::: code-group
|
||||
|
||||
```bash [NPM]
|
||||
$ npm install prozilla-os
|
||||
```
|
||||
|
||||
```bash [Yarn]
|
||||
$ yarn add prozilla-os
|
||||
```
|
||||
|
||||
```bash [PNPM]
|
||||
$ pnpm add prozilla-os
|
||||
```
|
||||
|
||||
```bash [Bun]
|
||||
$ bun add prozilla-os
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
Alternatively, you can install the `@prozilla-os/core` package, which only contains the core functionality, and install the apps manually or create custom apps.
|
||||
|
||||
::: code-group
|
||||
|
||||
```bash [NPM]
|
||||
$ npm install @prozilla-os/core
|
||||
```
|
||||
|
||||
```bash [Yarn]
|
||||
$ yarn add @prozilla-os/core
|
||||
```
|
||||
|
||||
```bash [PNPM]
|
||||
$ pnpm add @prozilla-os/core
|
||||
```
|
||||
|
||||
```bash [Bun]
|
||||
$ bun add @prozilla-os/core
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
### Installing apps
|
||||
|
||||
Install apps by running the command below. Replace `[app]` with the id of the app you want to install.
|
||||
|
||||
::: code-group
|
||||
|
||||
```bash [NPM]
|
||||
$ npm install @prozilla-os/[app]
|
||||
```
|
||||
|
||||
```bash [Yarn]
|
||||
$ yarn add @prozilla-os/[app]
|
||||
```
|
||||
|
||||
```bash [PNPM]
|
||||
$ pnpm add @prozilla-os/[app]
|
||||
```
|
||||
|
||||
```bash [Bun]
|
||||
$ bun add @prozilla-os/[app]
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
## Usage
|
||||
|
||||
Your entry file should look something like this:
|
||||
|
||||
```tsx
|
||||
// index.tsx
|
||||
|
||||
import React from "react";
|
||||
import ReactDOM from "react-dom/client";
|
||||
import { App } from "./App.tsx";
|
||||
|
||||
const root = ReactDOM.createRoot(document.getElementById("root") as HTMLElement);
|
||||
root.render(<React.StrictMode><App/></React.StrictMode>);
|
||||
```
|
||||
|
||||
Change your `<App>` component to:
|
||||
|
||||
```tsx
|
||||
// App.tsx
|
||||
|
||||
import { Desktop, ModalsView, ProzillaOS, Taskbar, WindowsView } from "prozilla-os";
|
||||
|
||||
export function App(): ReactElement {
|
||||
return <ProzillaOS
|
||||
systemName={"Example"}
|
||||
tagLine={"Powered by ProzillaOS"}
|
||||
config={{
|
||||
// Configuration
|
||||
}}
|
||||
>
|
||||
<Taskbar/>
|
||||
<WindowsView/>
|
||||
<ModalsView/>
|
||||
<Desktop/>
|
||||
</ProzillaOS>;
|
||||
}
|
||||
```
|
||||
|
||||
Replace `"Example"` with a system name of your choosing and `"Power by ProzillaOS"` by your tag line/short description.
|
||||
|
||||
If you don't want a taskbar/desktop/modal in your project, you can leave those components out. Unless you don't want to be able to open applications in your project, you will need to keep the `<WindowsView>` component.
|
||||
|
||||
> [!CAUTION]
|
||||
> Depending on how you installed ProzillaOS, your import statement will look slightly different. Make sure you are importing from the correct package that you installed previously.
|
||||
|
||||
### Using apps
|
||||
|
||||
To start using applications in your project, use the `appsConfig` class to add a list of apps to your configuration.
|
||||
|
||||
```tsx
|
||||
<ProzillaOS
|
||||
{/* Other props */}
|
||||
config={{
|
||||
apps: new appsConfig({
|
||||
apps: [
|
||||
// Applications go here
|
||||
]
|
||||
})
|
||||
}}
|
||||
>
|
||||
```
|
||||
|
||||
#### Example
|
||||
|
||||
Here is an example that shows you how to add the fileExplorer app:
|
||||
|
||||
```tsx
|
||||
import { fileExplorer } from "prozilla-os"
|
||||
|
||||
```
|
||||
|
||||
```tsx
|
||||
<ProzillaOS
|
||||
{/* Other props */}
|
||||
config={{
|
||||
apps: new appsConfig({
|
||||
apps: [
|
||||
fileExplorer.setName("Files")
|
||||
.setDescription("Browse and manage your virtual files on ProzillaOS.")
|
||||
.setIconUrl("/assets/apps/icons/file-explorer.svg")
|
||||
]
|
||||
})
|
||||
}}
|
||||
>
|
||||
```
|
||||
|
||||
> [!TIP]
|
||||
> Move your configurations to separate files to make them more readable and keep a better overview of your different configurations. You can then import these configurations into your `App.tsx` file and use them as values for the `config` prop of the `<ProzillaOS>` component.
|
||||
|
||||
Once that's done, go ahead and start your project and open it in your browser to check it out. Congratulations, you've made your own operating system inside the browser!
|
||||
|
||||
## Community
|
||||
|
||||
If you have questions or need help, reach out to the community on [Discord](https://discord.gg/JwbyQP4tdz).
|
||||
11
packages/docs/src/reference/classes/system/apps-config.md
Normal file
11
packages/docs/src/reference/classes/system/apps-config.md
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
---
|
||||
outline: deep
|
||||
---
|
||||
|
||||
# Class [`AppsConfig`]((https://github.com/prozilla-os/ProzillaOS/blob/main/packages/core/src/features/system/configs/appsConfig.ts))
|
||||
|
||||
## Properties
|
||||
|
||||
### apps : `App[]`
|
||||
|
||||
An array of applications
|
||||
57
packages/docs/src/reference/classes/system/desktop-config.md
Normal file
57
packages/docs/src/reference/classes/system/desktop-config.md
Normal file
|
|
@ -0,0 +1,57 @@
|
|||
---
|
||||
outline: deep
|
||||
---
|
||||
|
||||
# Class [`DesktopConfig`](https://github.com/prozilla-os/ProzillaOS/blob/main/packages/core/src/features/system/configs/desktopConfig.ts)
|
||||
|
||||
## Properties
|
||||
|
||||
### wallpapers : `string[]`
|
||||
|
||||
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`
|
||||
|
||||
<br>
|
||||
|
||||
#### @default
|
||||
|
||||
```ts
|
||||
1
|
||||
```
|
||||
|
||||
### defaultIconDirection : `0 | 1`
|
||||
|
||||
0: vertical, 1: horizontal
|
||||
|
||||
#### @default
|
||||
|
||||
```ts
|
||||
0
|
||||
```
|
||||
17
packages/docs/src/reference/classes/system/taskbar-config.md
Normal file
17
packages/docs/src/reference/classes/system/taskbar-config.md
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
---
|
||||
outline: deep
|
||||
---
|
||||
|
||||
# Class [`TaskbarConfig`](https://github.com/prozilla-os/ProzillaOS/blob/main/packages/core/src/features/system/configs/taskbarConfig.ts)
|
||||
|
||||
## Properties
|
||||
|
||||
### height : `number`
|
||||
|
||||
Height of the taskbar in CSS pixels
|
||||
|
||||
#### @default
|
||||
|
||||
```ts
|
||||
48
|
||||
```
|
||||
69
packages/docs/src/reference/configuration.md
Normal file
69
packages/docs/src/reference/configuration.md
Normal file
|
|
@ -0,0 +1,69 @@
|
|||
---
|
||||
outline: deep
|
||||
---
|
||||
|
||||
# Configuration
|
||||
|
||||
To configure ProzillaOS, pass the following properties inside to the `config` prop on the `<ProzillaOS>` component.
|
||||
|
||||
## `<ProzillaOS>` props
|
||||
|
||||
### systemName : `string`
|
||||
|
||||
<br>
|
||||
|
||||
#### @default
|
||||
|
||||
```ts
|
||||
"ProzillaOS"
|
||||
```
|
||||
|
||||
### tagLine : `string`
|
||||
|
||||
<br>
|
||||
|
||||
#### @default
|
||||
|
||||
```ts
|
||||
"Web-based Operating System"
|
||||
```
|
||||
|
||||
### config : {}
|
||||
|
||||
<br>
|
||||
|
||||
#### Properties
|
||||
|
||||
- apps : [`AppsConfig`](classes/system/apps-config)
|
||||
- desktop : [`DesktopConfig`](classes/system/desktop-config)
|
||||
- taskbar : [`TaskbarConfig`](classes/system/taskbar-config)
|
||||
|
||||
## Example
|
||||
|
||||
```tsx
|
||||
<ProzillaOS
|
||||
systemName={"ProzillaOS"}
|
||||
tagLine={"Web-based Operating System"}
|
||||
config={{
|
||||
apps: new AppsConfig({
|
||||
apps: [
|
||||
fileExplorer.setName("Files")
|
||||
.setDescription("Browse and manage your virtual files on ProzillaOS.")
|
||||
.setIconUrl("/assets/apps/icons/file-explorer.svg"),
|
||||
terminal.setName("Commands")
|
||||
.setDescription("A command line tool inspired by the Unix shell that runs entirely in your browser using ProzillaOS. Allows you to interact and manipulate the virtual drive and run silly commands.")
|
||||
.setIconUrl("/assets/apps/icons/terminal.svg"),
|
||||
settings.setName("Settings")
|
||||
.setDescription(`Configure ProzillaOS's settings and customize your experience.`)
|
||||
.setIconUrl("/assets/apps/icons/settings.svg"),
|
||||
],
|
||||
}),
|
||||
desktop: new DesktopConfig({
|
||||
defaultWallpaper: "/assets/wallpapers/abstract-mesh-gradient-orange-red-purple.png"
|
||||
}),
|
||||
taskbar: new TaskbarConfig({
|
||||
height: 48
|
||||
}),
|
||||
}}
|
||||
>
|
||||
```
|
||||
Loading…
Reference in a new issue