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
|
// https://vitepress.dev/reference/site-config
|
||||||
export default defineConfig({
|
export default defineConfig({
|
||||||
title: "ProzillaOS Docs",
|
title: "ProzillaOS Docs",
|
||||||
|
|
||||||
description: "Documentation for ProzillaOS and its packages.",
|
description: "Documentation for ProzillaOS and its packages.",
|
||||||
|
|
||||||
srcDir: "src",
|
srcDir: "src",
|
||||||
|
|
||||||
base: "/docs/",
|
base: "/docs/",
|
||||||
|
|
||||||
head: [
|
head: [
|
||||||
["link", { rel: "icon", href: "/docs/favicon.ico" }],
|
["link", { rel: "icon", href: "/docs/favicon.ico" }],
|
||||||
["link", { rel: "preconnect", href: "https://fonts.googleapis.com" }],
|
["link", { rel: "preconnect", href: "https://fonts.googleapis.com" }],
|
||||||
["link", { rel: "preconnect", href: "https://fonts.gstatic.com", crossorigin: "" }],
|
["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" }]
|
["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,
|
cleanUrls: true,
|
||||||
|
|
||||||
outDir: "./dist",
|
outDir: "./dist",
|
||||||
|
|
||||||
|
sitemap: {
|
||||||
|
hostname: "https://os.prozilla.dev/docs/"
|
||||||
|
},
|
||||||
|
|
||||||
themeConfig: {
|
themeConfig: {
|
||||||
// https://vitepress.dev/reference/default-theme-config
|
// https://vitepress.dev/reference/default-theme-config
|
||||||
nav: [
|
nav: [
|
||||||
{ text: "Home", link: "/" },
|
{ 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: [
|
sidebar: {
|
||||||
{
|
"/guides/": {
|
||||||
text: "Docs",
|
base: "/guides/",
|
||||||
|
items: [{
|
||||||
|
text: "Guides",
|
||||||
|
items: [
|
||||||
|
{ text: "Getting started", link: "/getting-started" },
|
||||||
|
{ text: "Custom app", link: "/custom-app" },
|
||||||
|
]
|
||||||
|
}]
|
||||||
|
},
|
||||||
|
"/reference/": {
|
||||||
|
base: "/reference/",
|
||||||
items: [
|
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: [
|
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: {
|
logo: {
|
||||||
|
|
@ -39,6 +91,11 @@ export default defineConfig({
|
||||||
light: "/logo-dark.svg"
|
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-3: #4D9CFF;
|
||||||
--vp-c-brand-soft: #366DB2;
|
--vp-c-brand-soft: #366DB2;
|
||||||
|
|
||||||
--vp-c-tip-1: #4DFF8B;
|
--vp-c-tip-1: #1F6638;
|
||||||
--vp-c-tip-2: #36B261;
|
--vp-c-tip-2: #36B261;
|
||||||
--vp-c-tip-3: #4DFF8B;
|
--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-2: #366DB2;
|
||||||
--vp-c-note-3: #4D9CFF;
|
--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-2: #36B261;
|
||||||
--vp-c-success-3: #4DFF8B;
|
--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-2: #6A36B2;
|
||||||
--vp-c-important-3: #974DFF;
|
--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-2: #B26A36;
|
||||||
--vp-c-warning-3: #FF974D;
|
--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-2: #B23640;
|
||||||
--vp-c-danger-3: #FF4D5B;
|
--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-2: #B23640;
|
||||||
--vp-c-caution-3: #FF4D5B;
|
--vp-c-caution-3: #FF4D5B;
|
||||||
--vp-c-caution-soft: #B23640;
|
--vp-c-caution-soft: #661F25;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dark {
|
.dark {
|
||||||
|
|
@ -209,15 +209,50 @@
|
||||||
* -------------------------------------------------------------------------- */
|
* -------------------------------------------------------------------------- */
|
||||||
|
|
||||||
:root {
|
:root {
|
||||||
--vp-custom-block-tip-border: transparent;
|
--vp-custom-block-tip-border: var(--vp-c-tip-3);
|
||||||
--vp-custom-block-tip-text: var(--vp-c-text-1);
|
--vp-custom-block-tip-text: var(--vp-c-tip-3);
|
||||||
--vp-custom-block-tip-bg: var(--vp-c-tip-soft);
|
--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-note-border: var(--vp-c-note-3);
|
||||||
--vp-custom-block-info-text: var(--vp-c-text-1);
|
--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-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-border: transparent;
|
||||||
--vp-custom-block-details-text: var(--vp-c-text-1);
|
--vp-custom-block-details-text: var(--vp-c-text-1);
|
||||||
|
|
@ -233,3 +268,35 @@
|
||||||
--docsearch-primary-color: var(--vp-c-brand-1) !important;
|
--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
|
outline: deep
|
||||||
---
|
---
|
||||||
|
|
||||||
# Getting started
|
# Making a custom app
|
||||||
|
|
||||||
Coming soon!
|
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