diff --git a/README.md b/README.md index ba7381e..d887a2b 100644 --- a/README.md +++ b/README.md @@ -17,91 +17,82 @@ This monorepo contains the source code of [os.prozilla.dev][website] as well as ProzillaOS is a web-based operating system inspired by Ubuntu Linux and Windows. It is made with React, Vite and TypeScript by [Prozilla][prozilla]. -> [!WARNING] -> This repository is currently being transformed into a monorepo. Some things may be temporarily missing/broken. If you have any questions in the meantime, feel free to [open an issue][issues]. - ## Packages -Each package follows a similar structure and has a `src/main.ts` entry file. +### Libraries -- [`prozilla-os`][prozilla-os] - A bundle containing all essential packages and standard applications of ProzillaOS +These libraries are different modules of ProzillaOS that can be installed separately or via the bundle package `prozilla-os`. Each library has a `src/main.ts` entry file and is published to the npm registry. -### Essentials +- [`prozilla-os`][prozilla-os]: A bundle containing the core packages and all standard applications of ProzillaOS +- [`@prozilla-os/core`][core]: Core functionality, React components and hooks +- [`@prozilla-os/shared`][shared]: Shared functions and utilities -- [`@prozilla-os/core`][core] - Core functionality, React components and hooks -- [`@prozilla-os/shared`][shared] - Shared functions and utilities +#### Standard applications -### Standard applications +- [`@prozilla-os/file-explorer`][file-explorer]: File explorer app +- [`@prozilla-os/terminal`][terminal]: Terminal/shell app +- [`@prozilla-os/text-editor`][text-editor]: Text editor app +- [`@prozilla-os/settings`][settings]: Settings app +- [`@prozilla-os/media-viewer`][media-viewer]: Media viewer app +- [`@prozilla-os/browser`][browser]: Browser app +- [`@prozilla-os/calculator`][calculator]: Calculator app -- [`@prozilla-os/file-explorer`][file-explorer] - File explorer app -- [`@prozilla-os/terminal`][terminal] - Terminal/shell app -- [`@prozilla-os/text-editor`][text-editor] - Text editor app -- [`@prozilla-os/settings`][settings] - Settings app -- [`@prozilla-os/media-viewer`][media-viewer] - Media viewer app -- [`@prozilla-os/browser`][browser] - Browser app -- [`@prozilla-os/calculator`][calculator] - Calculator app +#### Non-standard applications -### Non-standard applications +- [`@prozilla-os/logic-sim`][logic-sim]: Logic simulator app -- [`@prozilla-os/logic-sim`][logic-sim] - Logic simulator app +### Sites + +These packages contains the source code of parts of the ProzillaOS website. They are published to GitHub pages. + +- [`prozilla-os-demo`](./packages/demo/): Demo site +- [`prozilla-os-docs`](./packages/docs/): Documentation site ## Scripts -These are the scripts in logical order, that will be available when you have installed the dependencies. Note that certain scripts can be omitted by running another script. For more information about scripts #1, #2 and #3, check the [officiel Vite documentation](https://vitejs.dev/guide/cli.html). ProzillaOS uses [pnpm](https://pnpm.io/) as its package manager. +ProzillaOS uses the package manager [pnpm](https://pnpm.io/) to run scripts. -### Main scripts +### Shorthands -These scripts are related to the website and its lifecycle. +| Script | Description | +| --- | --- | +| `pnpm run start` | Run [`pnpm run site:start`](#package-prozilla-os-demo). VSCode is configured to run this script whenever the project is opened. +| `pnpm run build` | Build every package in sequential order. +| `pnpm run deploy` | Clear the `dist` directory, build and stage each package that comprises the website, then deploy to GitHub pages. This should then trigger a GitHub Action that deploys the build to production. -1. `pnpm start` +### Libraries - Start Vite dev server at [localhost:3000](http://localhost:3000/). Changes to module will dynamically be hot-reloaded, so normally there is no need for hard-refreshes. VSCode is configured to run this script whenever the project is opened. +| Script | Description | +| --- | --- | +| `pnpm --filter build` | Build a sepecific subset of packages or a single package and output to respective `dist` directory/directories. For more information about selecting specific packages, read [pnpm's documentation on filtering](https://pnpm.io/filtering). +| `pnpm run packages:build` | Build all packages using Vite in sequential order and output to respective `dist` directories. +| `pnpm run packages:update` | Create a new changeset for packages and update their version accordingly. +| `pnpm run packages:release` | Publish the latest versions of each package to the npm registry. -2. `pnpm run build` +### Package: `prozilla-os-demo` - Compile project using TypeScript and bundle all files into the `dist` directory, or the directory specified in config file. This directory can be uploaded to a web server. +| Script | Linked package script | +| --- | --- | +| `pnpm run site:start` | [`pnpm run start`](./packages/demo/README.md#scripts) +| `pnpm run site:build` | [`pnpm run build`](./packages/demo/README.md#scripts) +| `pnpm run site:preview` | [`pnpm run preview`](./packages/demo/README.md#scripts) +| `pnpm run site:stage` | [`pnpm run stage`](./packages/demo/README.md#scripts) +| `pnpm run site:deploy` | [`pnpm run deploy`](./packages/demo/README.md#scripts) +| `pnpm run site:fetch` | [`pnpm run fetch`](./packages/demo/README.md#scripts) -3. `pnpm run preview` +### Package: `prozilla-os-docs` - Start web server with preview of build at [localhost:8080](http://localhost:8080/). Can be useful for testing build before deploying. - -4. `pnpm run stage` - - Execute [stage.ts](../scripts/stage.ts), which stages the build and prepares it for deployment. Script will generate a sitemap, robots.txt and all other necessary files. - -5. `pnpm run deploy` - - Run scripts #2 and #4, then execute [deploy.ts](../scripts/deploy.ts), which uploads the staged build to GitHub Pages on branch called `gh-pages`. This should then trigger a GitHub Action that deploys the build to production. - -### Extra scripts - -- `pnpm run fetch` - - Fetch the repository tree using GitHub's API and store it as a JSON file that will be used to populate the virtual drive. More information can be found on the [virtual drive](./features/virtual-drive/README.md) page. - -### Scripts/commands for packages - -These scripts are related to the packages in this project and their lifecycles. - -- `pnpm --filter build` - - Build a sepecific subset of packages or a single package and output to respective `dist` directory/directories. For more information about selecting specific packages, read [pnpm's documentation on filtering](https://pnpm.io/filtering). - -- `pnpm run packages:build` - - Build all packages using Vite in sequential order and output to respective `dist` directories. - -- `pnpm run packages:update` - - Create a new changeset for packages and update their version accordingly. - -- `pnpm run packages:release` - - Publish the latest versions of each package to the npm registry. +| Script | Linked package script | +| --- | --- | +| `pnpm run docs:start` | [`pnpm run start`](./packages/docs/README.md#scripts) +| `pnpm run docs:build` | [`pnpm run build`](./packages/docs/README.md#scripts) +| `pnpm run docs:preview` | [`pnpm run preview`](./packages/docs/README.md#scripts) +| `pnpm run docs:stage` | [`pnpm run stage`](./packages/docs/README.md#scripts) ## Links -- [Website/demo][website] +- [Demo][demo] +- [Docs][docs] - [GitHub][github] - [npm][npm] - [Discord][discord] @@ -111,7 +102,7 @@ These scripts are related to the packages in this project and their lifecycles. These resources can help you get started with ProzillaOS. -- [prozilla-os/ProzillaOS-boilerplate][boilerplate] - Boilerplate code for a React Vite app implementing ProzillaOS +- [prozilla-os/ProzillaOS-boilerplate][boilerplate]: Boilerplate code for a React Vite app implementing ProzillaOS

@@ -119,7 +110,8 @@ These resources can help you get started with ProzillaOS.
-[website]: https://os.prozilla.dev/ +[demo]: https://os.prozilla.dev/ +[docs]: https://os.prozilla.dev/docs [github]: https://github.com/prozilla-os/ProzillaOS [npm]: https://www.npmjs.com/package/prozilla-os [discord]: https://discord.gg/JwbyQP4tdz diff --git a/packages/core/src/constants/utils.const.ts b/packages/core/src/constants/utils.const.ts index c3c955c..7811dc5 100644 --- a/packages/core/src/constants/utils.const.ts +++ b/packages/core/src/constants/utils.const.ts @@ -14,6 +14,7 @@ export const ANSI = { }, decoration: { dim: "\u001b[2m", + bold: "\u001b[1m" }, reset: "\u001b[0m", }; \ No newline at end of file diff --git a/packages/demo/README.md b/packages/demo/README.md new file mode 100644 index 0000000..2570e11 --- /dev/null +++ b/packages/demo/README.md @@ -0,0 +1,41 @@ +
+
+

+ ProzillaOS +

+

+ License + Stars + Forks + NPM Version +

+
+ +## About + +**🔗 [os.prozilla.dev](https://os.prozilla.dev/)** + +`prozilla-os-demo` is a React Vite website that demonstrates the features of ProzillaOS. + +## Scripts + +| Script | Description | +| --- | --- | +| `pnpm run start` | Start Vite dev server at [localhost:3000](http://localhost:3000/). Changes to module will dynamically be hot-reloaded, so normally there is no need for hard-refreshes. VSCode is configured to run this script whenever the project is opened. +| `pnpm run build` | Compile project using TypeScript and bundle all files into the `dist` directory, or the directory specified in config file. This directory can be uploaded to a web server. +| `pnpm run preview` | Start web server with preview of build at [localhost:8080](http://localhost:8080/). Can be useful for validating build before deploying. +| `pnpm run stage` | Execute [stage.ts](./scripts/stage.ts), which stages the build and prepares it for deployment. Script will generate a sitemap, robots.txt and all other necessary files. +| `pnpm run deploy` | Run `pnpm run build && pnpm run stage`, then execute [deploy.ts](../scripts/deploy.ts), which uploads the staged build to GitHub Pages on branch called `gh-pages`. This should then trigger a GitHub Action that deploys the build to production. +| `pnpm run fetch` | Fetch the repository tree using GitHub's API and store it as a JSON file that will be used to populate the virtual drive. More information can be found on the [virtual drive](./features/virtual-drive/README.md) page. + +## Links + +- [Website][website] +- [GitHub][github] +- [Discord][discord] +- [Ko-fi][ko-fi] + +[website]: https://os.prozilla.dev/ +[github]: https://github.com/prozilla-os/ProzillaOS/tree/main/packages/demo +[discord]: https://discord.gg/JwbyQP4tdz +[ko-fi]: https://ko-fi.com/prozilla \ No newline at end of file diff --git a/packages/demo/scripts/fetchRepository.ts b/packages/demo/scripts/fetchRepository.ts index 711afa5..9d084c2 100644 --- a/packages/demo/scripts/fetchRepository.ts +++ b/packages/demo/scripts/fetchRepository.ts @@ -1,6 +1,7 @@ import fs from "node:fs"; import { REPO } from "../src/config/deploy.config"; import { ANSI } from "../../core/src/constants"; +import { name } from "../package.json"; const API_URL = "https://api.github.com/"; const TREE_DIRECTORY = "public/config"; @@ -52,6 +53,8 @@ function fetchRepositoryTree(callback: (tree: string) => void) { } try { + console.log(`Context: ${ANSI.decoration.bold}${name}${ANSI.reset}\n`); + fetchRepositoryTree((tree) => { fs.mkdirSync(TREE_DIRECTORY, { recursive: true }); fs.writeFileSync(TREE_PATH, tree, { flag: "w+" }); diff --git a/packages/demo/scripts/stage.ts b/packages/demo/scripts/stage.ts index ce98cc6..b325d6b 100644 --- a/packages/demo/scripts/stage.ts +++ b/packages/demo/scripts/stage.ts @@ -5,6 +5,7 @@ import { NAME, TAG_LINE } from "../src/config/branding.config"; import { BASE_URL, BUILD_DIR, DOMAIN } from "../src/config/deploy.config"; import { desktopConfig } from "../src/config/desktop.config"; import path from "node:path"; +import { name } from "../package.json"; const PATHS = { sitemapXml: BUILD_DIR + "/sitemap.xml", @@ -122,6 +123,7 @@ function generateAppPages(template: string) { function stage() { try { + console.log(`Context: ${ANSI.decoration.bold}${name}${ANSI.reset}\n`); console.log(`${ANSI.fg.yellow}Staging build...${ANSI.reset}`); const files: [string, () => string][] = [ diff --git a/packages/docs/README.md b/packages/docs/README.md new file mode 100644 index 0000000..180d5cf --- /dev/null +++ b/packages/docs/README.md @@ -0,0 +1,39 @@ +
+
+

+ ProzillaOS +

+

+ License + Stars + Forks + NPM Version +

+
+ +## About + +**🔗 [os.prozilla.dev/docs](https://os.prozilla.dev/docs)** + +`prozilla-os-docs` is a VitePress website that contains the documentation for ProzillaOS. + +## Scripts + +| Script | Description | +| --- | --- | +| `pnpm run start` | Start VitePress dev server at [localhost:3000](http://localhost:3000/). Changes to module will dynamically be hot-reloaded, so normally there is no need for hard-refreshes. +| `pnpm run build` | Compile project using VitePress and output to the `dist` directory. +| `pnpm run preview` | Start web server with preview of build at [localhost:8080](http://localhost:8080/). Can be useful for validating build before deploying. +| `pnpm run stage` | Execute [stage.ts](./scripts/stage.ts), which copies the `./dist` directory of this package into the `/dist/docs` directory at the root, within the build of the demo site. + +## Links + +- [Website][website] +- [GitHub][github] +- [Discord][discord] +- [Ko-fi][ko-fi] + +[website]: https://os.prozilla.dev/docs +[github]: https://github.com/prozilla-os/ProzillaOS/tree/main/packages/demo +[discord]: https://discord.gg/JwbyQP4tdz +[ko-fi]: https://ko-fi.com/prozilla \ No newline at end of file diff --git a/packages/docs/scripts/stage.ts b/packages/docs/scripts/stage.ts index 8e8d65c..edd91c4 100644 --- a/packages/docs/scripts/stage.ts +++ b/packages/docs/scripts/stage.ts @@ -1,12 +1,17 @@ import fs from "node:fs"; import path from "node:path"; import { ANSI } from "../../core/src/constants"; +import { name } from "../package.json"; const BUILD_DIR = "dist"; function stage() { try { + console.log(`Context: ${ANSI.decoration.bold}${name}${ANSI.reset}\n`); + + console.log(`${ANSI.fg.yellow}Staging build...${ANSI.reset}`); fs.cpSync(BUILD_DIR, path.resolve(__dirname, `../../../${BUILD_DIR}/docs/`), { recursive: true }); + console.log(`\n${ANSI.fg.green}✓ Staging complete${ANSI.reset}`); } catch (error) { console.error(error); console.log(`${ANSI.fg.red}⚠ Staging failed${ANSI.reset}`);