diff --git a/packages/docs/.vitepress/config.ts b/packages/docs/.vitepress/config.ts index 245f1af..e4a9ae4 100644 --- a/packages/docs/.vitepress/config.ts +++ b/packages/docs/.vitepress/config.ts @@ -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 Prozilla", + copyright: "Copyright © 2023-present Prozilla" + }, } }); diff --git a/packages/docs/.vitepress/theme/style.css b/packages/docs/.vitepress/theme/style.css index b782306..2fedc2c 100644 --- a/packages/docs/.vitepress/theme/style.css +++ b/packages/docs/.vitepress/theme/style.css @@ -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") +} diff --git a/packages/docs/src/getting-started.md b/packages/docs/src/guides/custom-app.md similarity index 62% rename from packages/docs/src/getting-started.md rename to packages/docs/src/guides/custom-app.md index defdf18..b9cc437 100644 --- a/packages/docs/src/getting-started.md +++ b/packages/docs/src/guides/custom-app.md @@ -2,6 +2,6 @@ outline: deep --- -# Getting started +# Making a custom app Coming soon! \ No newline at end of file diff --git a/packages/docs/src/guides/getting-started.md b/packages/docs/src/guides/getting-started.md new file mode 100644 index 0000000..90b99eb --- /dev/null +++ b/packages/docs/src/guides/getting-started.md @@ -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(); +``` + +Change your `` component to: + +```tsx +// App.tsx + +import { Desktop, ModalsView, ProzillaOS, Taskbar, WindowsView } from "prozilla-os"; + +export function App(): ReactElement { + return + + + + + ; +} +``` + +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 `` 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 + +``` + +#### Example + +Here is an example that shows you how to add the fileExplorer app: + +```tsx +import { fileExplorer } from "prozilla-os" + +``` + +```tsx + +``` + +> [!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 `` 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). diff --git a/packages/docs/src/reference/classes/system/apps-config.md b/packages/docs/src/reference/classes/system/apps-config.md new file mode 100644 index 0000000..5c30142 --- /dev/null +++ b/packages/docs/src/reference/classes/system/apps-config.md @@ -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 diff --git a/packages/docs/src/reference/classes/system/desktop-config.md b/packages/docs/src/reference/classes/system/desktop-config.md new file mode 100644 index 0000000..a36142b --- /dev/null +++ b/packages/docs/src/reference/classes/system/desktop-config.md @@ -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` + +
+ +#### @default + +```ts +1 +``` + +### defaultIconDirection : `0 | 1` + +0: vertical, 1: horizontal + +#### @default + +```ts +0 +``` \ No newline at end of file diff --git a/packages/docs/src/reference/classes/system/taskbar-config.md b/packages/docs/src/reference/classes/system/taskbar-config.md new file mode 100644 index 0000000..3a9f62d --- /dev/null +++ b/packages/docs/src/reference/classes/system/taskbar-config.md @@ -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 +``` diff --git a/packages/docs/src/reference/configuration.md b/packages/docs/src/reference/configuration.md new file mode 100644 index 0000000..1091230 --- /dev/null +++ b/packages/docs/src/reference/configuration.md @@ -0,0 +1,69 @@ +--- +outline: deep +--- + +# Configuration + +To configure ProzillaOS, pass the following properties inside to the `config` prop on the `` component. + +## `` props + +### systemName : `string` + +
+ +#### @default + +```ts +"ProzillaOS" +``` + +### tagLine : `string` + +
+ +#### @default + +```ts +"Web-based Operating System" +``` + +### config : {} + +
+ +#### Properties + +- apps : [`AppsConfig`](classes/system/apps-config) +- desktop : [`DesktopConfig`](classes/system/desktop-config) +- taskbar : [`TaskbarConfig`](classes/system/taskbar-config) + +## Example + +```tsx + +``` \ No newline at end of file