diff --git a/README.md b/README.md index 566e14e..3aa4f45 100644 --- a/README.md +++ b/README.md @@ -1,40 +1,57 @@ -License Stars Forks +
+
+

+ ProzillaOS +

+

+ License + Stars + Forks + NPM Version +

+
-# ProzillaOS +## About -Banner with the logo of ProzillaOS +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]. -ProzillaOS is a web-based operating system inspired by Ubuntu Linux and Windows made with React by Prozilla. +ProzillaOS is a web-based operating system inspired by Ubuntu Linux and Windows. It is made with React, Vite and TypeScript by [Prozilla][prozilla]. -**Live demo: [os.prozilla.dev](https://os.prozilla.dev/)** +> [!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]. -## Documentation +## Packages -See [docs](docs/README.md) for more info. +- `prozilla-os` ([source][prozilla-os]) - Contains all other packages +- `@prozilla-os/core` ([source][core]) - Core functionality, React components and hooks +- `@prozilla-os/file-explorer` ([source][file-explorer]) - File explorer app -### Quick Links +## Links -- [Features](docs/features/README.md) -- [Configuration](docs/configuration/README.md) -- [Design](docs/design/README.md) -- [FAQ](docs/faq/README.md) -- [Roadmap](docs/roadmap/README.md) -- [Contributing](docs/contributing/README.md) +- [Website/demo][website] +- [GitHub][github] +- [npm][npm] +- [Ko-fi][ko-fi] -## Design +## Resources -See [docs/design](docs/design/README.md) for more info. +These resources can help you get started with ProzillaOS. -ProzillaOS was designed in Figma by Prozilla. You can view the design file [here](https://www.figma.com/file/bEE5RyWgV0QILcXpZWEk2r/ProzillaOS?type=design&node-id=0%3A1&mode=design&t=7KR1tKCp9H5cK3hf-1). +- [prozilla-os/ProzillaOS-boilerplate][boilerplate] - Boilerplate code for a React Vite app implementing ProzillaOS -### Preview +
+
+ Screenshot of ProzillaOS +
+
-Screenshot of ProzillaOS - -## Support ProzillaOS - -You can support this project by donating to **[ko-fi.com/prozilla](https://ko-fi.com/prozilla)**. - -## License - -This project is licensed under the MIT license, Copyright (c) 2023 Sieben De Beule. For more information see [LICENSE.md](LICENSE.md). +[website]: https://os.prozilla.dev/ +[github]: https://github.com/prozilla-os/ProzillaOS +[npm]: https://www.npmjs.com/package/prozilla-os +[ko-fi]: https://ko-fi.com/prozilla +[issues]: https://github.com/prozilla-os/ProzillaOS/issues +[boilerplate]: https://github.com/prozilla-os/ProzillaOS-boilerplate +[prozilla]: https://prozilla.dev/ +[prozilla-os]: ./packages/prozilla-os/ +[core]: ./packages/core/ +[file-explorer]: ./packages/apps/file-explorer/ \ No newline at end of file diff --git a/docs/README.md b/docs/README.md deleted file mode 100644 index 27eb753..0000000 --- a/docs/README.md +++ /dev/null @@ -1,97 +0,0 @@ -[← Back](../README.md) - -# Documentation - -## Pages - -- [Features](features/README.md) -- [Configuration](configuration/README.md) -- [Design](design/README.md) -- [FAQ](faq/README.md) -- [Roadmap](roadmap/README.md) -- [Contributing](contributing/README.md) - -## Overview - -### Quickstart - -1. Clone this repository. -2. Run `npm install` to install dependencies. -3. Run `npm start` to start the web server and go to [localhost:3000](http://localhost:3000/). - -### How to run - -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). - -1. `npm 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. - -2. `npm 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. - -3. `npm run serve` - - Start web server with preview of build at [localhost:8080](http://localhost:8080/). Can be useful for testing build before deploying. - -4. `npm 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. `npm 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. - -> [!IMPORTANT] -> Make sure you update your [configuration](./configuration/README.md) before running the `stage` or `deploy` script, otherwise your deployment will probably fail or be partially broken. - -### Other scripts - -- `npm 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. - -### Configuration - -See [docs/configuration](configuration/README.md) for more information. - -### Project structure - -- [src](../src) directory - - Contains all code for the application, including HTML, CSS and TypeScript files. This directory makes use of a feature-based folder structure. Utility files are often separated into their own subdirectory, called `_utils`, inside of their respective directory. - -- [public](../public) directory - - Contains all static files like images, webfonts and vector graphics. Also includes the [config](../public/config) and [documents](../public/documents) folders from where certain files are loaded into the [virtual drive](features/virtual-drive/README.md). - -- [docs](.) directory - - You are here. This directory contains all documentation for this project. - -- [dist](../dist) directory - - Contains the bundled build after the build process. This directory is not included in the GitHub repository. - -- External files - - [Design file (Figma)](https://www.figma.com/file/bEE5RyWgV0QILcXpZWEk2r/ProzillaOS?type=design&node-id=0%3A1&mode=design&t=7KR1tKCp9H5cK3hf-1) - - [Task board (Notion)](https://prozilla.notion.site/8325fabca1fb4f9885b6d6dfd5aa64c8?v=1a59f7ce50914f5ea711fe6460e52868&pvs=4) - -### Code style - -Type | Case | Example | Based on ---- | --- | --- | --- -Folders | kebab-case | `virtual-drive` | -`.ts` files | camelCase | `virtualRoot.ts` | -`.tsx` files | PascalCase | `Desktop.tsx` | React component -`.css` files & static assets | kebab-case | `global.css` | -Local `.module.css` files | PascalCase | `Desktop.module.css` | React component -Global `.module.css` files | kebab-case | `utils.module.css` | -CSS class names | PascalCase | ```.WindowsView``` | React component -Variables | camelCase | ```const fooBar = true;``` | -Global constant variables | MACRO_CASE | ```export const NAME = "ProzillaOS";``` | -Classes | PascalCase | ```class WindowsManager { }``` | -React components | PascalCase | ```export function WindowsView({ }) { }``` | -Functions | camelCase | ```function focusWindow() { }``` | -Types | PascalCase | ```type FooBar = boolean;``` | \ No newline at end of file diff --git a/docs/configuration/README.md b/docs/configuration/README.md deleted file mode 100644 index 6faeb36..0000000 --- a/docs/configuration/README.md +++ /dev/null @@ -1,50 +0,0 @@ -[← Back](../README.md) - -# Configuration - -ProzillaOS can be configured in numerous ways. The most important one being via the application itself, by going to the Settings app or directly changing the config files in the virtual `~/.config` folder. - -For developers, these are the methods of configuring ProzillaOS: - -- `src/config` - - This directory contains the main configurations for ProzillaOS. - -- `styles` - - Everything related to styles can be configured in this directory. The stylesheets inside `styles/global` contain CSS variables, font declarations, etc. - -- `public/config` - - This directory has XML files that serve as the default data for config files used by the app in the virtual drive. These can be edited by the user once they're loaded during initialisation. - -## Deployment - -- [deploy.config.ts](../../src/config/deploy.config.ts) - -Before starting the deployment process, you will need to make sure these parts of your configuration are set up correctly. - -### Domain - -Set the `DOMAIN` variable to the domain you wish to deploy the website to. You may also want to adjust the `BASE_URL` in case your domain does not have an SSL certificate. If you are using GitHub Pages, go to your Pages settings on GitHub and make sure the domain option there matches this variable. - -> [!WARNING] -> This configuration is also required before starting the staging process. - -### Branch - -If you are deploying to GitHub Pages, go to your Pages settings on GitHub, navigate to "Build and deployment" and set the source to "Deploy from a branch". Then select the `gh-pages` branch and select the `/ (root)` folder. - -If you would like to use a different branch, also set the `REPO.branch` to that same branch. - -### Repository URL & commit message - -If you are deploying to GitHub Pages, set `REPO.owner` and `REPO.name` to your GitHub username and your repository's name respectively. You may also want to customize the `COMMIT_MESSAGE` variable, which will be used by the `deploy` script to commit the build to the `gh-pages` branch. - -## Branding - -- [branding.config.ts](../../src/config/branding.config.ts) - -### Name & tag line - -Set the `NAME` and `TAG_LINE` variables to the name and tag line or short description you wish to use for the website respectively. \ No newline at end of file diff --git a/docs/contributing/README.md b/docs/contributing/README.md deleted file mode 100644 index 4926189..0000000 --- a/docs/contributing/README.md +++ /dev/null @@ -1,6 +0,0 @@ -[← Back](../README.md) - -# Contributing - -You can contribute by reporting bugs, suggesting new features, etc. by [creating a new issue](/../../issues) or by [donating](https://ko-fi.com/prozilla) to support my work. - diff --git a/docs/design/README.md b/docs/design/README.md deleted file mode 100644 index 9827377..0000000 --- a/docs/design/README.md +++ /dev/null @@ -1,29 +0,0 @@ -[← Back](../README.md) - -# Design - -ProzillaOS is designed in Figma by Prozilla. You can view the design file [here](https://www.figma.com/file/bEE5RyWgV0QILcXpZWEk2r/ProzillaOS?type=design&node-id=0%3A1&mode=design&t=7KR1tKCp9H5cK3hf-1). - -### Preview - -Screenshot of ProzillaOS - -## Font - -The font used by ProzillaOS is [Outfit](https://fonts.google.com/specimen/Outfit) from Google Fonts, designed by Smartsheet Inc, Rodrigo Fuenzalida. - -## UI Icons - -ProzillaOS uses original and modified [Font Awesome](https://fontawesome.com/) icons in its user interface. - -## App Icons - -The applications use icons that are either modified versions of FontAwesome icons or custom icons, designed by Prozilla. - -## Color Palette - -The color palette is hand-made by Prozilla and is part of the design file. - -## Wallpapers - -The wallpapers are generated by Prozilla using a Figma extension called [Mesh Gradient](https://www.figma.com/community/plugin/958202093377483021/mesh-gradient). \ No newline at end of file diff --git a/docs/faq/README.md b/docs/faq/README.md deleted file mode 100644 index 7c4f2ea..0000000 --- a/docs/faq/README.md +++ /dev/null @@ -1,23 +0,0 @@ -[← Back](../README.md) - -# FAQ - -## Q: What's the purpose of ProzillaOS? - -A: Obviously ProzillaOS doesn't solve any issues or anything like that. It's just a fun project I started because I wanted to refine my web development and design skills, as well as my React.js proficiency. At the same time, I also wanted to create an interesting and innovative web application and share it with the community via open-source. - -## Q: What tools did you use to make ProzillaOS? - -A: I used Visual Studio Code for coding, Figma for designing, Notion for project management, GitHub for source control. I didn't use any libraries for the main parts of the OS. The libraries I used for specific purposes like certain applications or utilities, can be found in the `package.json` file. I got the icons from Font Awesome and the fonts from Google Fonts. - -## Q: Is ProzillaOS free? - -A: ProzillaOS is free and open-source. Check the [license](../../LICENSE.md) for more information about modifying and distributing ProzillaOS. - -## Q: Why can't I install a certain program on ProzillaOS? - -A: Because ProzillaOS is not a real operating system and does not use real applications. The available applications are custom React components, ProzillaOS can not interpret executable files or perform any task that it isn't programmed to do. However, there are plans for expanding ProzillaOS and enabling support for executable files and downloadable native extensions/applications. - -## Q: Will you merge my pull request? - -A: No, this is supposed to be a solo project. Despite the fact that I won't allow any contributions to this project, I encourage you to fork this project and create your own version. If you do so, don't hesitate to share it with me or with other people online! diff --git a/docs/features/README.md b/docs/features/README.md deleted file mode 100644 index 68995fe..0000000 --- a/docs/features/README.md +++ /dev/null @@ -1,70 +0,0 @@ -[← Back](../README.md) - -# Features - -Most code for features can be found in the [features](../../src/features) directory. This directory is a library that is mostly used by files in the [components](../../src/components) and [hooks](../../src/hooks) directory. - -> [!NOTE] -> Mentions of directories inside this part of the documentation, are relative to the `src` folder. -> ``` -> components -> src/components -> hooks -> src/hooks -> ``` - -> [!TIP] -> To see the status and to-do's of each feature, check the [task board](https://prozilla.notion.site/8325fabca1fb4f9885b6d6dfd5aa64c8?v=1a59f7ce50914f5ea711fe6460e52868&pvs=4) on Notion. - -## Pages - -- [Actions](actions/README.md) -- [Apps](apps/README.md) -- [Modals](modals/README.md) -- [Settings](settings/README.md) -- [Storage](storage/README.md) -- [Taskbar](taskbar/README.md) -- [Virtual Drive](virtual-drive//README.md) -- [Windows](windows/README.md) -- [Z-index](z-index/README.md) - -## Overview - -This is a simplified overview of ProzillaOS' features, check the pages inside this folder for more details about each individual feature. - -### System - -- Customizable **taskbar** with a home menu, search menu, pinned apps and utilities -- Customizable **desktop** with icons, accompanied by custom wallpapers -- **Virtual drive** that can handle files, folders, symbolic links, as well as read from external sources - - Storage system that stores and loads the virtual drive from local storage - -### Applications - -- Resizable and draggable **windows**, with dynamic titles, for displaying and interacting with apps, which adapts to the user's screen resolution -- Native and web-view **applications** - - **File explorer** that interacts with virtual drive and allows user to browse the source code on the website itself - - **Terminal** with custom linux-inspired commands - - **Settings** application for customizing appearance, managing apps and managing virtual drive - - **Text editor** app that can read and write files as well as render markdown files - - Other applications like a calculator, minigames, image viewer, browser, etc. -- **Standalone** system that allows each app to have its own dedicated page in an isolated view, which is also indexable by search engines -- **URL params** that trigger an app to open with optional arguments - -### Interactions - -- **Modals** that can be used as context menus, header menus, file selectors, dialog boxes, etc. -- Advanced **actions** system, for easily assembling different menus that can handle dropdowns, selections, toggles, shortcuts, etc. - -### Assets - -- Custom **wallpapers** made in Figma -- Custom **icons** made in Figma inspired by Font Awesome - -### Codebase - -- Free, open-source and self-hostable -- Uses **React**, **Vite** and **TypeScript** -- Extensive **documentation** -- **Configuration** files that allow you to configure almost everything inside the project -- **Eslint** for linting -- Custom **build and deployment tools** to automate tasks -- Separation of concerns and feature-based folder structure diff --git a/docs/features/actions/README.md b/docs/features/actions/README.md deleted file mode 100644 index 93387d8..0000000 --- a/docs/features/actions/README.md +++ /dev/null @@ -1,38 +0,0 @@ -[← Back](../README.md) - -# Actions - -A React component used to group and display actions together. This is used in the context menu for example, where each option is a separate action. It can take in a certain style and be passed to a modal, it also supports shortcuts and icons. - -## Example - -```tsx - - { - reloadViewport(); - }} - /> - { - closeViewport(); - }} - /> - -``` - -## Action types - -Name | HTML equivalent ---- | -- -Click action | \