diff --git a/README.md b/README.md
index aba7db2..0a6470b 100644
--- a/README.md
+++ b/README.md
@@ -91,6 +91,7 @@ ProzillaOS uses the package manager [pnpm](https://pnpm.io/) to run 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)
+| pnpm run docs:generate | [`pnpm run generate`](./packages/docs/README.md#scripts)
## Links
diff --git a/packages/demo/package.json b/packages/demo/package.json
index 653af40..4442121 100644
--- a/packages/demo/package.json
+++ b/packages/demo/package.json
@@ -19,7 +19,8 @@
},
"repository": {
"type": "git",
- "url": "git+https://github.com/prozilla-os/ProzillaOS.git"
+ "url": "git+https://github.com/prozilla-os/ProzillaOS.git",
+ "directory": "packages/demo"
},
"dependencies": {
"@fortawesome/fontawesome-svg-core": "^6.5.2",
@@ -36,7 +37,6 @@
"vite-plugin-svgr": "^4.2.0"
},
"devDependencies": {
- "@changesets/cli": "^2.27.5",
"@eslint/js": "^9.5.0",
"@types/eslint": "^8.56.10",
"@types/gh-pages": "^6.1.0",
diff --git a/packages/docs/.gitignore b/packages/docs/.gitignore
new file mode 100644
index 0000000..249cda9
--- /dev/null
+++ b/packages/docs/.gitignore
@@ -0,0 +1 @@
+/data
\ No newline at end of file
diff --git a/packages/docs/.vitepress/config.ts b/packages/docs/.vitepress/config.ts
index c5bf297..afe39ea 100644
--- a/packages/docs/.vitepress/config.ts
+++ b/packages/docs/.vitepress/config.ts
@@ -3,7 +3,7 @@ import { defineConfig, HeadConfig } from "vitepress";
const TITLE = "ProzillaOS Docs";
const DESCRIPTION = "Documentation for ProzillaOS and its packages.";
const LOCALE = "en_US";
-const IMAGE = "https://os.prozilla.dev/assets/logo.png";
+const IMAGE = "https://os.prozilla.dev/docs/prozilla-os-title-banner.png";
// https://vitepress.dev/reference/site-config
export default defineConfig({
@@ -34,12 +34,22 @@ export default defineConfig({
nav: [
{ text: "Home", link: "/" },
{ text: "Demo", link: "https://os.prozilla.dev/", target: "_blank" },
- { text: "About", link: "/about", activeMatch: "/about/" },
+ { text: "About", link: "/about/introduction", activeMatch: "/about/" },
{ text: "Guides", link: "/guides/getting-started", activeMatch: "/guides/" },
{ text: "Reference", link: "/reference/configuration", activeMatch: "/reference/" }
],
sidebar: {
+ "/about/": {
+ base: "/about/",
+ items: [{
+ text: "About ProzillaOS",
+ items: [
+ { text: "Introduction", link: "/introduction" },
+ { text: "Features", link: "/features" },
+ ]
+ }]
+ },
"/guides/": {
base: "/guides/",
items: [{
@@ -57,6 +67,8 @@ export default defineConfig({
text: "Overview",
items: [
{ text: "Configuration", link: "/configuration" },
+ { text: "Packages", link: "/packages" },
+ { text: "Glossary", link: "/glossary" },
]
},
{
@@ -92,12 +104,6 @@ export default defineConfig({
}
]
},
- "/about/": {
- base: "/about/",
- items: [
- { text: "About", link: "/" }
- ]
- }
},
editLink: {
@@ -162,5 +168,6 @@ export default defineConfig({
// Other meta data
head.push(["meta", { name: "og:type", content: "website" }]);
+ head.push(["meta", { name: "twitter:card", content: "summary_large_image" }]);
},
});
diff --git a/packages/docs/.vitepress/theme/style.css b/packages/docs/.vitepress/theme/style.css
index b0cfaeb..4ec3254 100644
--- a/packages/docs/.vitepress/theme/style.css
+++ b/packages/docs/.vitepress/theme/style.css
@@ -313,11 +313,16 @@
--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M256 32c14.2 0 27.3 7.5 34.5 19.8l216 368c7.3 12.4 7.3 27.7 .2 40.1S486.3 480 472 480H40c-14.3 0-27.6-7.7-34.7-20.1s-7-27.8 .2-40.1l216-368C228.7 39.5 241.8 32 256 32zm0 128c-13.3 0-24 10.7-24 24V296c0 13.3 10.7 24 24 24s24-10.7 24-24V184c0-13.3-10.7-24-24-24zm32 224a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z'/%3E%3C/svg%3E")
}
-.VPTeamMembers.center {
+.vp-doc .VPTeamMembers.center {
display: flex;
justify-content: center;
}
-.VPTeamMembers.center .container {
+.vp-doc .VPTeamMembers.center .container {
flex: 1;
+ grid-template-columns: repeat(auto-fit, minmax(256px, 1fr)) !important;
+}
+
+.vp-doc .VPTeamMembers.medium.count-1.center .container {
+ max-width: 368px !important;
}
diff --git a/packages/docs/README.md b/packages/docs/README.md
index 203bd51..6fb3219 100644
--- a/packages/docs/README.md
+++ b/packages/docs/README.md
@@ -25,6 +25,7 @@
| 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.
+| pnpm run generate | Generate basic information files in JSON format to use as a base for writing the documentation and output to the `data` directory.
## Links
diff --git a/packages/docs/package.json b/packages/docs/package.json
index 6fd2b1c..cf482b9 100644
--- a/packages/docs/package.json
+++ b/packages/docs/package.json
@@ -12,13 +12,18 @@
"start": "vitepress --port 3000",
"build": "vitepress build",
"preview": "vitepress preview --port 8080",
- "stage": "vite-node scripts/stage"
+ "stage": "vite-node scripts/stage",
+ "generate": "rimraf data && vite-node scripts/generateData"
},
"repository": {
"type": "git",
- "url": "git+https://github.com/prozilla-os/ProzillaOS.git"
+ "url": "git+https://github.com/prozilla-os/ProzillaOS.git",
+ "directory": "packages/docs"
},
"devDependencies": {
+ "@types/node": "^20.14.6",
+ "react": "^18.3.1",
+ "rimraf": "^5.0.8",
"vite-node": "^1.6.0",
"vitepress": "^1.2.3",
"vue": "^3.4.31"
diff --git a/packages/docs/scripts/generateData.ts b/packages/docs/scripts/generateData.ts
new file mode 100644
index 0000000..3be2841
--- /dev/null
+++ b/packages/docs/scripts/generateData.ts
@@ -0,0 +1,140 @@
+import { ANSI } from "../../core/src/constants";
+import { name } from "../package.json";
+import { resolve } from "node:path";
+import fs from "node:fs";
+import { isValidElement } from "react";
+
+const items = await import("../../core/src/main");
+
+const OUTPUT_DIR = "data";
+
+const MACRO_CASE = /^[A-Z_]+$/;
+const SNAKE_CASE = /^[a-z]+([A-Z][a-z]*)+$/;
+const PASCAL_CASE = /^([A-Z][a-z]*)+$/;
+
+function getItemType(key: string, value: unknown): string | null {
+ if (MACRO_CASE.test(key))
+ return "Constant";
+
+ if (typeof value === "function") {
+ if (/^use([A-Z][a-z]*)+$/.test(key)) {
+ return "Hook";
+ } else if (SNAKE_CASE.test(key)) {
+ return "Function";
+ } else if (PASCAL_CASE.test(key)) {
+ if (isValidElement(value)) {
+ return "Component";
+ } else {
+ return "Class";
+ }
+ }
+ }
+
+ return null;
+}
+
+function getItemCategory(key: string, value: unknown, type: string): string | null {
+ if (type == "Function") {
+ if (key.includes("Viewport") || key.endsWith("Url") || key.endsWith("Clipboard")) {
+ return "Browser";
+ } else if (key.endsWith("Array")) {
+ return "Utils";
+ } else if (key.endsWith("Time")) {
+ return "Time";
+ }
+ }
+
+ return null;
+}
+
+function generateContent(key: string, value: unknown, type: string, category: string | null): string {
+ const content: { [key: string]: unknown } = {
+ name: key,
+ type,
+ value
+ };
+
+ if (category != null)
+ content.category = category;
+
+ return JSON.stringify(content, null, 4);
+}
+
+function generateFile(key: string, value: unknown) {
+ const fileName = `${key}.json`;
+
+ const type = getItemType(key, value);
+ if (type == null) {
+ console.log(`${ANSI.fg.yellow}Skipping item with unknown type:${ANSI.reset} ${key}`);
+ return;
+ }
+
+ let directory = "/";
+
+ switch (type) {
+ case "Constant":
+ directory += "constants/";
+ break;
+ case "Hook":
+ directory += "hooks/";
+ break;
+ case "Function":
+ directory += "functions/";
+ break;
+ case "Class":
+ directory += "classes/";
+ break;
+ case "Component":
+ directory += "components/";
+ break;
+ }
+
+ const category = getItemCategory(key, value, type);
+
+ switch (category) {
+ case "Browser":
+ directory += "browser/";
+ break;
+ case "Utils":
+ directory += "utils/";
+ break;
+ case "Time":
+ directory += "time/";
+ break;
+ }
+
+ try {
+ const path = resolve(__dirname, `../${OUTPUT_DIR + directory}`);
+ if (!fs.existsSync(path)){
+ fs.mkdirSync(path, { recursive: true });
+ }
+
+ const content = generateContent(key, value, type, category);
+
+ fs.writeFileSync(`${path}/${fileName}`, content, { flag: "w+" });
+ console.log(`- ${ANSI.fg.cyan}${OUTPUT_DIR + directory}${fileName}${ANSI.reset}`);
+ } catch (error) {
+ console.error(error);
+ console.log(`${ANSI.fg.red}⚠ Failed to generate: ${fileName}${ANSI.reset}`);
+ }
+}
+
+function generateData() {
+ try {
+ console.log(`Context: ${ANSI.decoration.bold}${name}${ANSI.reset}\n`);
+
+ console.log(`${ANSI.fg.yellow}Generating data...${ANSI.reset}`);
+
+ for (const [key, value] of Object.entries(items)) {
+ generateFile(key, value);
+ }
+
+ console.log(`\n${ANSI.fg.green}✓ Completed generating data${ANSI.reset}`);
+ } catch (error) {
+ console.error(error);
+ console.log(`${ANSI.fg.red}⚠ Data generation failed${ANSI.reset}`);
+ process.exit(1);
+ }
+}
+
+void generateData();
\ No newline at end of file
diff --git a/packages/docs/scripts/generateReferencePages.ts b/packages/docs/scripts/generateReferencePages.ts
deleted file mode 100644
index 891a00c..0000000
--- a/packages/docs/scripts/generateReferencePages.ts
+++ /dev/null
@@ -1,98 +0,0 @@
-import { ANSI } from "../../core/src/constants";
-import { name } from "../package.json";
-import { resolve } from "node:path";
-import fs from "node:fs";
-
-const OUTPUT_DIR = "cache";
-
-function getItemType(key: string, value: unknown): string | null {
- if (/^[A-Z_]+$/.test(key))
- return "Constant";
-
- if (typeof value === "function") {
- if (/^use([A-Z][a-z]*)+$/.test(key)) {
- return "Hook";
- } else if (/^[a-z]+([A-Z][a-z]*)+$/.test(key)) {
- return "Function";
- } else if (/^([A-Z][a-z]*)+$/.test(key)) {
- return "Class";
- }
- }
-
- return null;
-}
-
-function generateContent(key: string, value: unknown, type: string): string {
- const content = [
- "---",
- "outline: deep",
- "---"
- ];
-
- content.push(`\n# ${type}`);
-
- return content.join("\n");
-}
-
-function generateReferencePage(key: string, value: unknown) {
- const type = getItemType(key, value);
- if (type == null) return;
-
- let directory = "/";
-
- switch (type) {
- case "Constant":
- directory = "/constants";
- break;
- case "Hook":
- directory = "/hooks";
- break;
- case "Function":
- directory = "/functions";
- break;
- case "Class":
- directory = "/classes";
- break;
- }
-
- try {
- const path = resolve(__dirname, OUTPUT_DIR, directory);
- if (!fs.existsSync(path)){
- fs.mkdirSync(path, { recursive: true });
- }
-
- // fs.writeFileSync(path, generateContent(key, value, type), { flag: "w+" });
- console.log(`- ${ANSI.fg.cyan}${path}${ANSI.reset}`);
- } catch (error) {
- console.log(`${ANSI.fg.red}⚠ Failed to generate page: ${key}${ANSI.reset}`);
- }
-}
-
-async function generateReferencePages() {
- try {
- console.log(`Context: ${ANSI.decoration.bold}${name}${ANSI.reset}\n`);
-
- console.log(`${ANSI.fg.yellow}Generating reference pages...${ANSI.reset}`);
-
- const items = await import("packages/core/src/main");
-
- for (const key in module) {
- if (module.hasOwnProperty(key)) {
- const item = module[key];
- console.log(`Name: ${key}, Type: ${typeof item}, Source: ${modulePath}`);
- }
- }
-
- // for (const [key, value] of Object.entries(items)) {
- // generateReferencePage(key, value);
- // }
-
- console.log(`\n${ANSI.fg.green}✓ Completed generating reference pages${ANSI.reset}`);
- } catch (error) {
- console.error(error);
- console.log(`${ANSI.fg.red}⚠ Reference pages generation failed${ANSI.reset}`);
- process.exit(1);
- }
-}
-
-generateReferencePages();
\ No newline at end of file
diff --git a/packages/docs/scripts/stage.ts b/packages/docs/scripts/stage.ts
index edd91c4..d518017 100644
--- a/packages/docs/scripts/stage.ts
+++ b/packages/docs/scripts/stage.ts
@@ -1,7 +1,7 @@
-import fs from "node:fs";
-import path from "node:path";
import { ANSI } from "../../core/src/constants";
import { name } from "../package.json";
+import fs from "node:fs";
+import { resolve } from "node:path";
const BUILD_DIR = "dist";
@@ -10,7 +10,7 @@ function stage() {
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 });
+ fs.cpSync(BUILD_DIR, resolve(__dirname, `../../../${BUILD_DIR}/docs/`), { recursive: true });
console.log(`\n${ANSI.fg.green}✓ Staging complete${ANSI.reset}`);
} catch (error) {
console.error(error);
diff --git a/packages/docs/src/about/features.md b/packages/docs/src/about/features.md
new file mode 100644
index 0000000..0151f56
--- /dev/null
+++ b/packages/docs/src/about/features.md
@@ -0,0 +1,37 @@
+---
+outline: deep
+---
+
+# Features
+
+ProzillaOS comes with a ton of features that you can tailor to suit your specific needs. Here is a quick overview:
+
+## 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
+- Custom **color palette**
diff --git a/packages/docs/src/about/index.md b/packages/docs/src/about/introduction.md
similarity index 76%
rename from packages/docs/src/about/index.md
rename to packages/docs/src/about/introduction.md
index 4983898..791f9ae 100644
--- a/packages/docs/src/about/index.md
+++ b/packages/docs/src/about/introduction.md
@@ -1,9 +1,15 @@
-#
Developers
- 
+# Introduction
+
+
+
## Open-source
ProzillaOS was made using React, Vite and TypeScript. The source code is hosted on [GitHub](https://github.com/prozilla-os/ProzillaOS). You can contribute by finding bugs and suggesting features via [GitHub issues](https://github.com/prozilla-os/ProzillaOS/issues).
diff --git a/packages/docs/src/index.md b/packages/docs/src/index.md
index 8ffbe0f..9ac9edf 100644
--- a/packages/docs/src/index.md
+++ b/packages/docs/src/index.md
@@ -26,6 +26,8 @@ features:
- title: Modular
details: ProzillaOS can be installed as separate modules with extensive customization.
icon:
+ link: reference/packages
+ linkText: Explore packages
- title: Open-source
details: ProzillaOS is entirely free and open-source.
icon:
@@ -61,5 +63,5 @@ const developers = [