Updated docs
This commit is contained in:
Prozilla
parent
fef01fa88c
commit
56de63ae7a
15 changed files with 55 additions and 108 deletions
|
|
@ -7,9 +7,7 @@
|
|||
- [Features](features/README.md)
|
||||
- [Design](design/README.md)
|
||||
- [Roadmap](roadmap/README.md)
|
||||
- [Configurations](configurations/README.md)
|
||||
- [Contributing](contributing/README.md)
|
||||
- [React](react/README.md)
|
||||
|
||||
## Overview
|
||||
|
||||
|
|
@ -55,3 +53,24 @@ Once the initial setup is complete, you can simply run `npm run deploy` and your
|
|||
- [build](../build) directory
|
||||
|
||||
Contains the static build files after [building](#building--deploying) the application. This directory is not included in the GitHub repository.
|
||||
|
||||
### Coding style
|
||||
|
||||
Type | Case | Example
|
||||
--- | --- | ---
|
||||
Folders | kebab-case | `virtual-drive`
|
||||
`.js` files | camelCase | `virtualRoot.js`
|
||||
`.jsx` files | PascalCase | `Desktop.jsx`
|
||||
`.css` files & files in `public` dir | kebab-case | `global.css`
|
||||
Local `.module.css` files | PascalCase | `Desktop.module.css`
|
||||
Global `.module.css` files | kebab-case | `utils.module.css`
|
||||
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() { }```
|
||||
|
||||
### 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)
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
[← Back](../README.md)
|
||||
|
||||
# Configurations
|
||||
|
||||
All configs can be found in the [config](../../src/config) directory.
|
||||
|
||||
## Settings
|
||||
|
||||
- `wallpaper` - The url of the image used as the wallpaper.
|
||||
|
|
@ -6,7 +6,7 @@ ProzillaOS is designed in Figma by Prozilla. You can view the design file [here]
|
|||
|
||||
### Preview
|
||||
|
||||
<img src="../../public/media/screenshots/Screenshot1.png"/>
|
||||
<img src="../../public/media/screenshots/screenshot-1.png"/>
|
||||
|
||||
### Font
|
||||
|
||||
|
|
|
|||
|
|
@ -6,6 +6,8 @@ Most code for features can be found in the [features](../../src/features) direct
|
|||
|
||||
> Note: Inside this part of the docs you will often see mentions of directories like `features` or `components`. These paths are relative to the `src` directory. The respective paths relative to the root of this project are `src/features` and `src/components`.
|
||||
|
||||
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.
|
||||
|
||||
## Table of Contents
|
||||
|
||||
- [Applications](applications/README.md)
|
||||
|
|
@ -14,3 +16,4 @@ Most code for features can be found in the [features](../../src/features) direct
|
|||
- [Taskbar](taskbar/README.md)
|
||||
- [Settings](settings/README.md)
|
||||
- [Modals](modals/README.md)
|
||||
- [Storage](storage/README.md)
|
||||
|
|
@ -2,14 +2,18 @@
|
|||
|
||||
# Applications
|
||||
|
||||
> Related document: [Windows](../windows/README.md)
|
||||
|
||||
Applications (sometimes shortened to apps) are processes that open a window when ran. The window allows the user to view and interact with the app. Apps have a `title`, `id` and a `windowContent` property that refers to the React component of the application interface.
|
||||
|
||||
> Some applications have a different name in the UI, these names are written between brackets and quotation marks. The other name is the one used in code and file/folder names.
|
||||
|
||||
## Table of Contents
|
||||
|
||||
- [<img src="../../../public/media/applications/icons/terminal.svg" width=20 height=20 style="vertical-align: text-bottom; background: none;"/> Terminal](terminal/README.md)
|
||||
- [<img src="../../../public/media/applications/icons/file-explorer.svg" width=20 height=20 style="vertical-align: text-bottom; background: none;"/> File Explorer](file-explorer/README.md)
|
||||
- [<img src="../../../public/media/applications/icons/media-viewer.svg" width=20 height=20 style="vertical-align: text-bottom; background: none;"/> Media Viewer](media-viewer/README.md)
|
||||
- [<img src="../../../public/media/applications/icons/text-editor.svg" width=20 height=20 style="vertical-align: text-bottom; background: none;"/> Text Editor](text-editor/README.md)
|
||||
- [<img src="../../../public/media/applications/icons/terminal.svg" width=20 height=20 style="vertical-align: text-bottom; background: none;"/> Terminal ("Commands")](terminal/README.md)
|
||||
- [<img src="../../../public/media/applications/icons/file-explorer.svg" width=20 height=20 style="vertical-align: text-bottom; background: none;"/> File Explorer ("Files")](file-explorer/README.md)
|
||||
- [<img src="../../../public/media/applications/icons/media-viewer.svg" width=20 height=20 style="vertical-align: text-bottom; background: none;"/> Media Viewer ("Photos")](media-viewer/README.md)
|
||||
- [<img src="../../../public/media/applications/icons/text-editor.svg" width=20 height=20 style="vertical-align: text-bottom; background: none;"/> Text Editor ("Notes")](text-editor/README.md)
|
||||
- [<img src="../../../public/media/applications/icons/settings.svg" width=20 height=20 style="vertical-align: text-bottom; background: none;"/> Settings](settings/README.md)
|
||||
|
||||
## Common components
|
||||
|
|
@ -21,7 +25,7 @@ The header menu is a useful component that can be added to app windows for quick
|
|||
#### Example
|
||||
|
||||
```js
|
||||
// components/applications/example/Example.jsx
|
||||
// components/applications/.common/HeaderMenu.jsx
|
||||
|
||||
<HeaderMenu
|
||||
options={{
|
||||
|
|
@ -47,7 +51,7 @@ The header menu is a useful component that can be added to app windows for quick
|
|||
/>
|
||||
```
|
||||
|
||||
## Template components
|
||||
## App templates
|
||||
|
||||
### Webview
|
||||
|
||||
|
|
@ -70,7 +74,7 @@ export default class ApplicationsManager {
|
|||
}
|
||||
```
|
||||
|
||||
## Examples
|
||||
## App examples
|
||||
|
||||
### Adding a new application
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
[← Back](../README.md)
|
||||
|
||||
# <img src="../../../../public/media/applications/icons/file-explorer.svg" width=30 height=30 style="vertical-align: middle; background: none;"/> File Explorer
|
||||
# <img src="../../../../public/media/applications/icons/file-explorer.svg" width=30 height=30 style="vertical-align: middle; background: none;"/> File Explorer ("Files")
|
||||
|
||||
A tool for exploring and managing files with a user interface.
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
[← Back](../README.md)
|
||||
|
||||
# <img src="../../../../public/media/applications/icons/media-viewer.svg" width=30 height=30 style="vertical-align: middle; background: none;"/> Media Viewer
|
||||
# <img src="../../../../public/media/applications/icons/media-viewer.svg" width=30 height=30 style="vertical-align: middle; background: none;"/> Media Viewer ("Photos")
|
||||
|
||||
An application for viewing media like images and videos.
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
[← Back](../README.md)
|
||||
|
||||
# <img src="../../../../public/media/applications/icons/terminal.svg" width=30 height=30 style="vertical-align: middle; background: none;"/> Terminal
|
||||
# <img src="../../../../public/media/applications/icons/terminal.svg" width=30 height=30 style="vertical-align: middle; background: none;"/> Terminal ("Commands")
|
||||
|
||||
A command line tool.
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
[← Back](../README.md)
|
||||
|
||||
# <img src="../../../../public/media/applications/icons/text-editor.svg" width=30 height=30 style="vertical-align: middle; background: none;"/> Text Editor
|
||||
# <img src="../../../../public/media/applications/icons/text-editor.svg" width=30 height=30 style="vertical-align: middle; background: none;"/> Text Editor ("Notes")
|
||||
|
||||
An application for editing text documents.
|
||||
|
|
@ -9,11 +9,13 @@ Each group of settings is controlled by a separate xml file. The virtual directo
|
|||
```xml
|
||||
<!-- public/config/desktop.xml -->
|
||||
|
||||
<!-- This config file defines the default path to the desktop wallpaper.
|
||||
The virtual file can be found at "~/.config/desktop.xml". -->
|
||||
<!--
|
||||
This config file defines the default path to the desktop wallpaper.
|
||||
The virtual file can be found at "~/.config/desktop.xml".
|
||||
-->
|
||||
|
||||
<?xml version="1.0"?>
|
||||
<options>
|
||||
<wallpaper>/media/wallpapers/Wallpaper1.png</wallpaper>
|
||||
<wallpaper>/media/wallpapers/wallpaper-1.png</wallpaper>
|
||||
</options>
|
||||
```
|
||||
|
|
@ -2,6 +2,8 @@
|
|||
|
||||
# Storage
|
||||
|
||||
> Related document: [Virtual Drive](../virtual-drive/README.md)
|
||||
|
||||
ProzillaOS makes use of the local storage to store persistent data. The data is loaded by the virtual root during the initialization process. On the first run, the default data is loaded.
|
||||
|
||||
The data is converted from class instances to a JSON object and then to a string by the virtual root before it is stored in the local storage. To load data from the local storage, an inverse process is used.
|
||||
|
|
@ -2,6 +2,8 @@
|
|||
|
||||
# Virtual Drive
|
||||
|
||||
> Related document: [Storage](../storage/README.md)
|
||||
|
||||
The virtual drive is a virtual file and directory system. The root directory is a virtual folder and the access point for all interactions with the virtual drive.
|
||||
|
||||
## Table of Contents
|
||||
|
|
|
|||
|
|
@ -2,12 +2,6 @@
|
|||
|
||||
# Windows
|
||||
|
||||
The windows components are used to view and interact with running applications. Each application opens a window when ran.
|
||||
> Related document: [Applications](../applications/README.md)
|
||||
|
||||
## Features
|
||||
|
||||
- [x] Maximize (fullscreen)
|
||||
- [ ] Minimize
|
||||
- [x] Resize
|
||||
- [x] Multiple windows of the same app
|
||||
- [x] Draw order
|
||||
The windows components are used to view and interact with running applications. Each application opens a window when ran.
|
||||
|
|
@ -1,72 +0,0 @@
|
|||
[← Back](../README.md)
|
||||
|
||||
# Getting Started with Create React App
|
||||
|
||||
This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
|
||||
|
||||
## Available Scripts
|
||||
|
||||
In the project directory, you can run:
|
||||
|
||||
### `npm start`
|
||||
|
||||
Runs the app in the development mode.\
|
||||
Open [http://localhost:3000](http://localhost:3000) to view it in your browser.
|
||||
|
||||
The page will reload when you make changes.\
|
||||
You may also see any lint errors in the console.
|
||||
|
||||
### `npm test`
|
||||
|
||||
Launches the test runner in the interactive watch mode.\
|
||||
See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
|
||||
|
||||
### `npm run build`
|
||||
|
||||
Builds the app for production to the `build` folder.\
|
||||
It correctly bundles React in production mode and optimizes the build for the best performance.
|
||||
|
||||
The build is minified and the filenames include the hashes.\
|
||||
Your app is ready to be deployed!
|
||||
|
||||
See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
|
||||
|
||||
### `npm run eject`
|
||||
|
||||
**Note: this is a one-way operation. Once you `eject`, you can't go back!**
|
||||
|
||||
If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
|
||||
|
||||
Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own.
|
||||
|
||||
You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it.
|
||||
|
||||
## Learn More
|
||||
|
||||
You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
|
||||
|
||||
To learn React, check out the [React documentation](https://reactjs.org/).
|
||||
|
||||
### Code Splitting
|
||||
|
||||
This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting)
|
||||
|
||||
### Analyzing the Bundle Size
|
||||
|
||||
This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)
|
||||
|
||||
### Making a Progressive Web App
|
||||
|
||||
This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)
|
||||
|
||||
### Advanced Configuration
|
||||
|
||||
This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)
|
||||
|
||||
### Deployment
|
||||
|
||||
This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)
|
||||
|
||||
### `npm run build` fails to minify
|
||||
|
||||
This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)
|
||||
|
|
@ -4,6 +4,8 @@
|
|||
|
||||
This is a list of planned/in progress features.
|
||||
|
||||
For more detailed information, check the [task board](https://prozilla.notion.site/8325fabca1fb4f9885b6d6dfd5aa64c8?v=1a59f7ce50914f5ea711fe6460e52868&pvs=4) on Notion.
|
||||
|
||||
## Desktop
|
||||
|
||||
A customizable desktop with a wallpaper and shortcuts to applications, files or folders.
|
||||
|
|
@ -16,10 +18,10 @@ A fully functional VSC clone called Code Editor.
|
|||
|
||||
Modular windows, including alerts, confirmation dialogs and a file selector.
|
||||
|
||||
## Tabs
|
||||
|
||||
## Calculator App
|
||||
|
||||
Simple calculator that can do basic equations.
|
||||
|
||||
## App centre
|
||||
|
||||
Allows user to download additional apps
|
||||
Loading…
Reference in a new issue