: 
diff --git a/packages/core/src/components/desktop/Desktop.tsx b/packages/core/src/components/desktop/Desktop.tsx
index 173c556..d77640b 100644
--- a/packages/core/src/components/desktop/Desktop.tsx
+++ b/packages/core/src/components/desktop/Desktop.tsx
@@ -19,7 +19,7 @@ import { FileEventHandler, FolderEventHandler } from "../_utils/directory-list/D
import { useClassNames } from "../../hooks";
export const Desktop = memo(() => {
- const { desktopConfig, appsConfig } = useSystemManager();
+ const { desktopConfig, skin, appsConfig } = useSystemManager();
const settingsManager = useSettingsManager();
const windowsManager = useWindowsManager();
const virtualRoot = useVirtualRoot();
@@ -167,7 +167,7 @@ export const Desktop = memo(() => {
const onError = () => {
const settings = settingsManager?.getSettings(SettingsManager.VIRTUAL_PATHS.desktop);
- void settings?.set("wallpaper", desktopConfig.defaultWallpaper);
+ void settings?.set("wallpaper", skin.defaultWallpaper);
};
const iconScale = 1 + ((isValidInteger(iconSize) ? iconSize : desktopConfig.defaultIconSize) - 1) / 5;
diff --git a/packages/core/src/components/taskbar/indicators/Calendar.module.css b/packages/core/src/components/taskbar/indicators/Calendar.module.css
index b73d039..1c6cc43 100644
--- a/packages/core/src/components/taskbar/indicators/Calendar.module.css
+++ b/packages/core/src/components/taskbar/indicators/Calendar.module.css
@@ -1,8 +1,14 @@
.Button {
+ display: flex;
+ flex-direction: column;
white-space: nowrap;
user-select: none;
}
+.Button > p {
+ margin: 0;
+}
+
.Menu > div {
display: flex;
gap: 0.5rem;
@@ -20,5 +26,5 @@
}
.Date {
- color: var(--foreground-color-1);
+ opacity: 0.5;
}
\ No newline at end of file
diff --git a/packages/core/src/components/taskbar/indicators/Calendar.tsx b/packages/core/src/components/taskbar/indicators/Calendar.tsx
index a53a819..b3cb984 100644
--- a/packages/core/src/components/taskbar/indicators/Calendar.tsx
+++ b/packages/core/src/components/taskbar/indicators/Calendar.tsx
@@ -44,7 +44,6 @@ export function Calendar({ hideUtilMenus, showUtilMenu }: CalendarProps) {
hour12: false,
})}
-
{date.toLocaleDateString("en-GB", {
day: "numeric",
diff --git a/packages/core/src/features/system/configs/desktopConfig.ts b/packages/core/src/features/system/configs/desktopConfig.ts
index 662196a..f33ca6e 100644
--- a/packages/core/src/features/system/configs/desktopConfig.ts
+++ b/packages/core/src/features/system/configs/desktopConfig.ts
@@ -1,12 +1,6 @@
import { OptionalInterface } from "../../../types/utils";
export interface DesktopConfigOptions {
- /** Array of URLs of wallpaper images */
- wallpapers: string[];
-
- /** URL of default wallpaper image */
- defaultWallpaper: string;
-
/**
* @default 1
*/
@@ -20,26 +14,12 @@ export interface DesktopConfigOptions {
}
export class DesktopConfig {
- wallpapers: DesktopConfigOptions["wallpapers"];
- defaultWallpaper: DesktopConfigOptions["defaultWallpaper"];
defaultIconSize: DesktopConfigOptions["defaultIconSize"];
defaultIconDirection: DesktopConfigOptions["defaultIconDirection"];
constructor(options: OptionalInterface = {}) {
- const { wallpapers, defaultWallpaper, defaultIconSize, defaultIconDirection } = options as DesktopConfigOptions;
+ const { defaultIconSize, defaultIconDirection } = options as DesktopConfigOptions;
- this.wallpapers = wallpapers ?? [
- "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",
- ];
- this.defaultWallpaper = defaultWallpaper ?? "https://os.prozilla.dev/assets/wallpapers/vibrant-wallpaper-blue-purple-red.png";
this.defaultIconSize = defaultIconSize ?? 1;
this.defaultIconDirection = defaultIconDirection ?? 0;
}
diff --git a/packages/core/src/features/system/configs/virtualDriveConfig.ts b/packages/core/src/features/system/configs/virtualDriveConfig.ts
index 972a03a..44d0aac 100644
--- a/packages/core/src/features/system/configs/virtualDriveConfig.ts
+++ b/packages/core/src/features/system/configs/virtualDriveConfig.ts
@@ -1,39 +1,11 @@
import { OptionalInterface } from "../../../types/utils";
export interface VirtualDriveConfigOptions {
- fileIcon: string;
- infoFileIcon: string;
- textFileIcon: string;
- codeFileIcon: string;
- folderIcon: string;
- imagesFolderIcon: string;
- textFolderIcon: string;
- folderLinkIcon: string;
}
export class VirtualDriveConfig {
- fileIcon: VirtualDriveConfigOptions["fileIcon"];
- infoFileIcon: VirtualDriveConfigOptions["infoFileIcon"];
- textFileIcon: VirtualDriveConfigOptions["textFileIcon"];
- codeFileIcon: VirtualDriveConfigOptions["codeFileIcon"];
-
- folderIcon: VirtualDriveConfigOptions["folderIcon"];
- imagesFolderIcon: VirtualDriveConfigOptions["imagesFolderIcon"];
- textFolderIcon: VirtualDriveConfigOptions["textFolderIcon"];
- folderLinkIcon: VirtualDriveConfigOptions["folderLinkIcon"];
-
constructor(options: OptionalInterface = {}) {
- const { fileIcon, infoFileIcon, textFileIcon, codeFileIcon, folderIcon, imagesFolderIcon, textFolderIcon, folderLinkIcon } = options as VirtualDriveConfigOptions;
-
- this.fileIcon = fileIcon ?? "https://os.prozilla.dev/assets/apps/file-explorer/icons/file.svg";
- this.infoFileIcon = infoFileIcon ?? "https://os.prozilla.dev/assets/apps/file-explorer/icons/file-info.svg";
- this.textFileIcon = textFileIcon ?? "https://os.prozilla.dev/assets/apps/file-explorer/icons/file-text.svg";
- this.codeFileIcon = codeFileIcon ?? "https://os.prozilla.dev/assets/apps/file-explorer/icons/file-code.svg";
-
- this.folderIcon = folderIcon ?? "https://os.prozilla.dev/assets/apps/file-explorer/icons/folder.svg";
- this.imagesFolderIcon = imagesFolderIcon ?? "https://os.prozilla.dev/assets/apps/file-explorer/icons/folder-images.svg";
- this.textFolderIcon = textFolderIcon ?? "https://os.prozilla.dev/assets/apps/file-explorer/icons/folder-text.svg";
- this.folderLinkIcon = folderLinkIcon ?? "https://os.prozilla.dev/assets/apps/file-explorer/icons/folder-link.svg";
+ // const { } = options as VirtualDriveConfigOptions;
}
}
\ No newline at end of file
diff --git a/packages/core/src/features/system/systemManager.ts b/packages/core/src/features/system/systemManager.ts
index eb1dcf0..d2e55bb 100644
--- a/packages/core/src/features/system/systemManager.ts
+++ b/packages/core/src/features/system/systemManager.ts
@@ -26,20 +26,20 @@ export interface SystemManagerParams {
};
export class SystemManager {
- systemName: string;
- tagLine: string;
+ readonly systemName: string;
+ readonly tagLine: string;
#startDate: Date;
- skin?: Skin;
+ readonly skin: Skin;
- appsConfig: AppsConfig;
- desktopConfig: DesktopConfig;
- miscConfig: MiscConfig;
- modalsConfig: ModalsConfig;
- taskbarConfig: TaskbarConfig;
- trackingConfig: TrackingConfig;
- windowsConfig: WindowsConfig;
- virtualDriveConfig: VirtualDriveConfig;
+ readonly appsConfig: AppsConfig;
+ readonly desktopConfig: DesktopConfig;
+ readonly miscConfig: MiscConfig;
+ readonly modalsConfig: ModalsConfig;
+ readonly taskbarConfig: TaskbarConfig;
+ readonly trackingConfig: TrackingConfig;
+ readonly windowsConfig: WindowsConfig;
+ readonly virtualDriveConfig: VirtualDriveConfig;
constructor({
systemName,
@@ -57,7 +57,7 @@ export class SystemManager {
this.systemName = systemName ?? "ProzillaOS";
this.tagLine = tagLine ?? "Web-based Operating System";
- this.skin = skin;
+ this.skin = skin ?? new Skin();
this.desktopConfig = desktopConfig;
this.appsConfig = appsConfig;
@@ -68,45 +68,30 @@ export class SystemManager {
this.windowsConfig = windowsConfig;
this.virtualDriveConfig = virtualDriveConfig;
- if (this.skin != null) {
- const skin = this.skin;
-
- if (skin.appIcons != null) {
- const appIcons = skin.appIcons as { [key: string]: string };
-
- this.appsConfig.apps.forEach((app) => {
- if (Object.keys(appIcons).includes(app.id))
- app.setIconUrl(appIcons[app.id]);
- });
- }
-
- if (skin.wallpapers != null)
- this.desktopConfig.wallpapers = this.desktopConfig.wallpapers.concat(skin.wallpapers);
-
- if (skin.defaultWallpaper != null)
- this.desktopConfig.defaultWallpaper = skin.defaultWallpaper;
-
- if (skin.fileIcons != null) {
- this.virtualDriveConfig.fileIcon = skin.fileIcons.generic;
- this.virtualDriveConfig.infoFileIcon = skin.fileIcons.info ?? skin.fileIcons.generic;
- this.virtualDriveConfig.textFileIcon = skin.fileIcons.text ?? skin.fileIcons.generic;
- this.virtualDriveConfig.codeFileIcon = skin.fileIcons.code ?? skin.fileIcons.generic;
- }
-
- if (skin.folderIcons != null) {
- this.virtualDriveConfig.folderIcon = skin.folderIcons.generic;
- this.virtualDriveConfig.textFolderIcon = skin.folderIcons.text ?? skin.folderIcons.generic;
- this.virtualDriveConfig.imagesFolderIcon = skin.folderIcons.images ?? skin.folderIcons.generic;
- this.virtualDriveConfig.folderLinkIcon = skin.folderIcons.link ?? skin.folderIcons.generic;
- }
-
- if (skin.loadStyleSheet != null)
- skin.loadStyleSheet();
- }
+ this.loadSkin();
this.#startDate = new Date();
}
+ private loadSkin() {
+ const skin = this.skin;
+
+ if (skin.appIcons != null) {
+ const appIcons = skin.appIcons as { [key: string]: string };
+ const appNames = skin.appNames as { [key: string]: string };
+
+ this.appsConfig.apps.forEach((app) => {
+ if (Object.keys(appIcons).includes(app.id))
+ app.setIconUrl(appIcons[app.id]);
+ if (Object.keys(appNames).includes(app.id))
+ app.setIconUrl(appNames[app.id]);
+ });
+ }
+
+ if (skin.loadStyleSheet != null)
+ skin.loadStyleSheet();
+ }
+
getUptime(precision = 2) {
return formatRelativeTime(this.#startDate, precision, false);
}
diff --git a/packages/core/src/features/virtual-drive/file/virtualFile.ts b/packages/core/src/features/virtual-drive/file/virtualFile.ts
index aa6c48d..232c2e3 100644
--- a/packages/core/src/features/virtual-drive/file/virtualFile.ts
+++ b/packages/core/src/features/virtual-drive/file/virtualFile.ts
@@ -123,12 +123,12 @@ export class VirtualFile extends VirtualBase {
if (this.source != null && this.extension != null && IMAGE_EXTENSIONS.includes(this.extension))
return this.source;
- const { virtualDriveConfig } = this.getRoot().systemManager;
+ const { skin } = this.getRoot().systemManager;
switch (this.extension) {
case "txt":
case "md":
- iconUrl = virtualDriveConfig.textFileIcon;
+ iconUrl = skin.fileIcons.text ?? skin.fileIcons.generic;
break;
case "xml":
case "js":
@@ -139,10 +139,10 @@ export class VirtualFile extends VirtualBase {
case "css":
case "html":
case "yml":
- iconUrl = virtualDriveConfig.codeFileIcon;
+ iconUrl = skin.fileIcons.code ?? skin.fileIcons.generic;
break;
default:
- iconUrl = virtualDriveConfig.fileIcon;
+ iconUrl = skin.fileIcons.generic;
break;
}
diff --git a/packages/core/src/features/virtual-drive/file/virtualFileLink.ts b/packages/core/src/features/virtual-drive/file/virtualFileLink.ts
index 7726c27..a340d1a 100644
--- a/packages/core/src/features/virtual-drive/file/virtualFileLink.ts
+++ b/packages/core/src/features/virtual-drive/file/virtualFileLink.ts
@@ -99,8 +99,8 @@ export class VirtualFileLink extends VirtualFile {
}
getIconUrl(...args: Parameters): ReturnType {
- const { virtualDriveConfig } = this.getRoot().systemManager;
- const defaultIconUrl = virtualDriveConfig.fileIcon;
+ const { skin } = this.getRoot().systemManager;
+ const defaultIconUrl = skin.fileIcons.generic;
if (this.isValid()) {
return this.iconUrl ?? this.linkedFile?.getIconUrl(...args) ?? defaultIconUrl;
diff --git a/packages/core/src/features/virtual-drive/folder/virtualFolder.ts b/packages/core/src/features/virtual-drive/folder/virtualFolder.ts
index 19e3122..a6b550c 100644
--- a/packages/core/src/features/virtual-drive/folder/virtualFolder.ts
+++ b/packages/core/src/features/virtual-drive/folder/virtualFolder.ts
@@ -355,8 +355,8 @@ export class VirtualFolder extends VirtualBase {
if (this.iconUrl != null)
return this.iconUrl;
- const { virtualDriveConfig } = this.getRoot().systemManager;
- return virtualDriveConfig.folderIcon;
+ const { skin } = this.getRoot().systemManager;
+ return skin.folderIcons.generic;
}
toJSON(): VirtualFolderJson | null {
diff --git a/packages/core/src/features/virtual-drive/folder/virtualFolderLink.ts b/packages/core/src/features/virtual-drive/folder/virtualFolderLink.ts
index b08ff5e..e1b8ed3 100644
--- a/packages/core/src/features/virtual-drive/folder/virtualFolderLink.ts
+++ b/packages/core/src/features/virtual-drive/folder/virtualFolderLink.ts
@@ -58,8 +58,8 @@ export class VirtualFolderLink extends VirtualFolder {
if (this.isValid() && this.linkedFolder?.iconUrl)
return this.linkedFolder.iconUrl;
- const { virtualDriveConfig } = this.getRoot().systemManager;
- return virtualDriveConfig.folderLinkIcon;
+ const { skin } = this.getRoot().systemManager;
+ return skin.folderIcons.link ?? skin.folderIcons.generic;
}
toJSON(): VirtualFolderLinkJson | null {
@@ -137,7 +137,7 @@ export class VirtualFolderLink extends VirtualFolder {
}
open(...args: Parameters): ReturnType {
- if (this.isValid()) return this.linkedFolder?.open(...args) as ReturnType;
+ if (this.isValid()) return this.linkedFolder?.open(...args);
return null;
}
diff --git a/packages/core/src/features/virtual-drive/root/defaultData.ts b/packages/core/src/features/virtual-drive/root/defaultData.ts
index f99326b..c903af4 100644
--- a/packages/core/src/features/virtual-drive/root/defaultData.ts
+++ b/packages/core/src/features/virtual-drive/root/defaultData.ts
@@ -7,7 +7,7 @@ import { VirtualRoot } from "./virtualRoot";
* Loads default data on the virtual root
*/
export function loadDefaultData(systemManager: SystemManager, virtualRoot: VirtualRoot) {
- const { desktopConfig, virtualDriveConfig, appsConfig } = systemManager;
+ const { skin, appsConfig } = systemManager;
const linkedPaths: Record = {};
virtualRoot.createFolder("home", (folder) => {
@@ -17,7 +17,7 @@ export function loadDefaultData(systemManager: SystemManager, virtualRoot: Virtu
folder.createFile("desktop", "xml", (file) => {
file.setContent([
"",
- ` ${desktopConfig.defaultWallpaper}`,
+ ` ${skin.defaultWallpaper}`,
" true",
"",
]);
@@ -38,11 +38,11 @@ export function loadDefaultData(systemManager: SystemManager, virtualRoot: Virtu
});
})
.createFolder("Pictures", (folder) => {
- folder.setIconUrl(virtualDriveConfig.imagesFolderIcon);
+ folder.setIconUrl(skin.folderIcons.images ?? skin.folderIcons.generic);
folder.createFolder("Wallpapers", (folder) => {
folder.setProtected(true);
- for (let i = 0; i < desktopConfig.wallpapers.length; i++) {
- const source = desktopConfig.wallpapers[i];
+ for (let i = 0; i < skin.wallpapers.length; i++) {
+ const source = skin.wallpapers[i];
folder.createFile(`Wallpaper${i + 1}`, "png", (file) => {
file.setSource(source);
});
@@ -63,13 +63,13 @@ export function loadDefaultData(systemManager: SystemManager, virtualRoot: Virtu
linkedPaths.images = folder.path;
})
.createFolder("Documents", (folder) => {
- folder.setIconUrl(virtualDriveConfig.textFolderIcon);
+ folder.setIconUrl(skin.folderIcons.text ?? skin.folderIcons.generic);
folder.createFile("text", "txt", (file) => {
file.setContent("Hello world!");
}).createFile("Info", "md", (file) => {
file.setProtected(true)
.setSource("/documents/info.md")
- .setIconUrl(virtualDriveConfig.infoFileIcon);
+ .setIconUrl(skin.fileIcons.info ?? skin.fileIcons.generic);
linkedPaths.info = file.path;
}).createFile("Prozilla", "md", (file) => {
file.setProtected(true)
diff --git a/packages/core/src/features/virtual-drive/virtualBase.ts b/packages/core/src/features/virtual-drive/virtualBase.ts
index eb00371..64c8381 100644
--- a/packages/core/src/features/virtual-drive/virtualBase.ts
+++ b/packages/core/src/features/virtual-drive/virtualBase.ts
@@ -83,8 +83,8 @@ export class VirtualBase extends EventEmitter {
if (this.linkedFile?.iconUrl != null) return this.linkedFile.iconUrl;
if (this.linkedFolder?.iconUrl != null) return this.linkedFolder.iconUrl;
- const { virtualDriveConfig } = this.getRoot().systemManager;
- return virtualDriveConfig.fileIcon;
+ const { skin } = this.getRoot().systemManager;
+ return skin.fileIcons.generic;
}
getType(): string {
diff --git a/packages/core/tsconfig.build.json b/packages/core/tsconfig.build.json
new file mode 100644
index 0000000..28c6a56
--- /dev/null
+++ b/packages/core/tsconfig.build.json
@@ -0,0 +1,8 @@
+{
+ "extends": "./tsconfig.json",
+ "compilerOptions": {
+ "paths": {
+ "@prozilla-os/*": ["packages/*/dist/main"],
+ },
+ },
+}
\ No newline at end of file
diff --git a/packages/core/tsconfig.json b/packages/core/tsconfig.json
index dc6269e..50bc202 100644
--- a/packages/core/tsconfig.json
+++ b/packages/core/tsconfig.json
@@ -3,11 +3,15 @@
"compilerOptions": {
"baseUrl": "../..",
"composite": true,
- "outDir": "dist",
+ "outDir": "./dist",
"declaration": true,
"emitDeclarationOnly": true,
- "noEmit": false
+ "noEmit": false,
+ "rootDir": "../",
+ "paths": {
+ "@prozilla-os/*": ["packages/*/src/main"],
+ },
},
- "include": ["src", "vite.config.ts"],
+ "include": ["src", "vite.config.ts", "../skins/src/**/*",],
"exclude": ["node_modules"]
}
\ No newline at end of file
diff --git a/packages/core/vite.config.ts b/packages/core/vite.config.ts
index 6faa96d..88d2250 100644
--- a/packages/core/vite.config.ts
+++ b/packages/core/vite.config.ts
@@ -15,7 +15,8 @@ export default defineConfig({
rollupTypes: true,
strictOutput: true,
pathsToAliases: false,
- bundledPackages: ["@prozilla-os/*"]
+ bundledPackages: ["@prozilla-os/*"],
+ tsconfigPath: "tsconfig.build.json"
})
],
build: {
diff --git a/packages/demo/package.json b/packages/demo/package.json
index 0c31df0..73853e2 100644
--- a/packages/demo/package.json
+++ b/packages/demo/package.json
@@ -10,7 +10,7 @@
"type": "module",
"scripts": {
"start": "vite",
- "build": "tsc --project tsconfig-build.json && vite build",
+ "build": "tsc --project tsconfig.build.json && vite build",
"preview": "vite preview --port 8080",
"stage": "vite-node scripts/stage",
"predeploy": "pnpm run build && pnpm run stage",
diff --git a/packages/demo/scripts/stage.ts b/packages/demo/scripts/stage.ts
index b325d6b..d827b82 100644
--- a/packages/demo/scripts/stage.ts
+++ b/packages/demo/scripts/stage.ts
@@ -3,7 +3,7 @@ import { appsConfig } from "../src/config/apps.config";
import { ANSI } from "../../core/src/constants";
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 { skin } from "../src/config/skin.config";
import path from "node:path";
import { name } from "../package.json";
@@ -18,7 +18,7 @@ function generateSitemapXml() {
const date = new Date();
const lastModified = `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
- const images = desktopConfig.wallpapers.map((path) => `
+ const images = skin.wallpapers.map((path) => `
${BASE_URL.slice(0, -1) + path}
`
diff --git a/packages/demo/src/Main.tsx b/packages/demo/src/Main.tsx
index b7c4e7a..b8bafc6 100644
--- a/packages/demo/src/Main.tsx
+++ b/packages/demo/src/Main.tsx
@@ -1,21 +1,17 @@
import { ReactElement } from "react";
import { Router } from "./router/Router";
-import { desktopConfig } from "./config/desktop.config";
+import { skin } from "./config/skin.config";
import { NAME, TAG_LINE } from "./config/branding.config";
import { appsConfig } from "./config/apps.config";
-import { virtualDriveConfig } from "./config/virtualDrive.config";
import { ProzillaOS } from "prozilla-os";
-import { macOsSkin } from "@prozilla-os/skins";
export function Main(): ReactElement {
return
diff --git a/packages/demo/src/config/desktop.config.ts b/packages/demo/src/config/skin.config.ts
similarity index 52%
rename from packages/demo/src/config/desktop.config.ts
rename to packages/demo/src/config/skin.config.ts
index a64695d..3f544b2 100644
--- a/packages/demo/src/config/desktop.config.ts
+++ b/packages/demo/src/config/skin.config.ts
@@ -1,6 +1,6 @@
-import { DesktopConfig } from "prozilla-os";
+import { Skin } from "@prozilla-os/skins";
-export const desktopConfig = new DesktopConfig({
+export const skin = new Skin({
wallpapers: [
"/assets/wallpapers/vibrant-wallpaper-blue-purple-red.png",
"/assets/wallpapers/abstract-mesh-gradient-orange-red-purple.png",
@@ -12,5 +12,17 @@ export const desktopConfig = new DesktopConfig({
"/assets/wallpapers/flame-abstract-wallpaper-orange.png",
"/assets/wallpapers/wave-abstract-wallpaper-teal.png",
],
- defaultWallpaper: "/assets/wallpapers/abstract-mesh-gradient-orange-red-purple.png"
+ defaultWallpaper: "/assets/wallpapers/abstract-mesh-gradient-orange-red-purple.png",
+ fileIcons: {
+ generic: "/assets/apps/file-explorer/icons/file.svg",
+ info: "/assets/apps/file-explorer/icons/file-info.svg",
+ text: "/assets/apps/file-explorer/icons/file-text.svg",
+ code: "/assets/apps/file-explorer/icons/file-code.svg",
+ },
+ folderIcons: {
+ generic: "/assets/apps/file-explorer/icons/folder.svg",
+ images: "/assets/apps/file-explorer/icons/folder-images.svg",
+ text: "/assets/apps/file-explorer/icons/folder-text.svg",
+ link: "/assets/apps/file-explorer/icons/folder-link.svg",
+ }
});
\ No newline at end of file
diff --git a/packages/demo/src/config/virtualDrive.config.ts b/packages/demo/src/config/virtualDrive.config.ts
deleted file mode 100644
index ee7ab44..0000000
--- a/packages/demo/src/config/virtualDrive.config.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { VirtualDriveConfig } from "prozilla-os";
-
-export const virtualDriveConfig = new VirtualDriveConfig({
- fileIcon: "/assets/apps/file-explorer/icons/file.svg",
- infoFileIcon: "/assets/apps/file-explorer/icons/file-info.svg",
- textFileIcon: "/assets/apps/file-explorer/icons/file-text.svg",
- codeFileIcon: "/assets/apps/file-explorer/icons/file-code.svg",
- folderIcon: "/assets/apps/file-explorer/icons/folder.svg",
- imagesFolderIcon: "/assets/apps/file-explorer/icons/folder-images.svg",
- textFolderIcon: "/assets/apps/file-explorer/icons/folder-text.svg",
- folderLinkIcon: "/assets/apps/file-explorer/icons/folder-link.svg",
-});
\ No newline at end of file
diff --git a/packages/demo/tsconfig-build.json b/packages/demo/tsconfig.build.json
similarity index 100%
rename from packages/demo/tsconfig-build.json
rename to packages/demo/tsconfig.build.json
diff --git a/packages/docs/.vitepress/config.ts b/packages/docs/.vitepress/config.ts
index afe39ea..94a6121 100644
--- a/packages/docs/.vitepress/config.ts
+++ b/packages/docs/.vitepress/config.ts
@@ -76,19 +76,33 @@ export default defineConfig({
base: "/reference/classes/",
collapsed: false,
items: [
+ {
+ text: "Apps",
+ base: "/reference/classes/apps/",
+ collapsed: true,
+ items: [
+ { text: "App", link: "app" },
+ ]
+ },
+ {
+ text: "Skins",
+ base: "/reference/classes/skins/",
+ collapsed: true,
+ items: [
+ { text: "Skin", link: "skin" },
+ ]
+ },
{
text: "System",
base: "/reference/classes/system/",
collapsed: true,
items: [
- { text: "App", link: "app" },
{ text: "AppsConfig", link: "apps-config" },
{ text: "DesktopConfig", link: "desktop-config" },
{ text: "MiscConfig", link: "misc-config" },
{ text: "ModalsConfig", link: "modals-config" },
{ text: "TaskbarConfig", link: "taskbar-config" },
{ text: "TrackingConfig", link: "tracking-config" },
- { text: "VirtualDriveConfig", link: "virtual-drive-config" },
{ text: "WindowsConfig", link: "windows-config" },
]
},
diff --git a/packages/docs/src/reference/classes/system/app.md b/packages/docs/src/reference/classes/apps/app.md
similarity index 98%
rename from packages/docs/src/reference/classes/system/app.md
rename to packages/docs/src/reference/classes/apps/app.md
index 413bff4..fce2832 100644
--- a/packages/docs/src/reference/classes/system/app.md
+++ b/packages/docs/src/reference/classes/apps/app.md
@@ -7,7 +7,7 @@ description: "An application that can be run by ProzillaOS"
An application that can be run by ProzillaOS
-Applications can be installed by adding them to the `apps` array in [`AppsConfig`](apps-config#apps-app)
+Applications can be installed by adding them to the `apps` array in [`AppsConfig`](../system/apps-config#apps-app)
## Type parameters
diff --git a/packages/docs/src/reference/classes/skins/skin.md b/packages/docs/src/reference/classes/skins/skin.md
new file mode 100644
index 0000000..d327c0e
--- /dev/null
+++ b/packages/docs/src/reference/classes/skins/skin.md
@@ -0,0 +1,116 @@
+---
+outline: deep
+description: "Change the look and feel of ProzillaOS"
+---
+
+# Class [`Skin`](https://github.com/prozilla-os/ProzillaOS/blob/main/packages/skins/src/core/skin.ts)
+
+Change the look and feel of ProzillaOS
+
+## Constructor
+
+> `new Skin(options)`
+
+### Parameters
+
+
+
+#### options
+
+- **Optional**
+- **Type:** `SkinOptions`
+
+```ts
+interface SkinOptions {
+ appIcons?: { [key: string]: string };
+ appNames?: { [key: string]: string };
+ wallpapers: string[];
+ defaultWallpaper: string;
+ fileIcons: {
+ generic: string;
+ info?: string;
+ text?: string;
+ code?: string;
+ };
+ folderIcons: {
+ generic: string;
+ images?: string;
+ text?: string;
+ link?: string;
+ };
+ loadStyleSheet?: () => void;
+}
+```
+
+## Properties
+
+### appIcons
+
+- **Type:** `{ [key: string]: string }`
+
+Replacements for app icons based on app id
+
+### appNames
+
+- **Type:** `{ [key: string]: string }`
+
+Replacements for app names based on app id
+
+### wallpapers
+
+- **Type:** `string[]`
+
+Array of URLs of wallpaper images
+
+### defaultWallpaper
+
+- **Type:** `string`
+- **Default:** `"https://os.prozilla.dev/assets/wallpapers/vibrant-wallpaper-blue-purple-red.png"`
+ - Preview:
+
+ 
+
+URL of default wallpaper image
+
+### fileIcons
+
+- **Type:** `FileIcons`
+
+URLs of icons for types of files
+
+```ts
+interface FileIcons {
+ generic: string;
+ info?: string;
+ text?: string;
+ code?: string;
+}
+```
+
+### folderIcons
+
+- **Type:** `FolderIcons`
+
+URLs of icons for types of folders
+
+```ts
+interface FolderIcons {
+ generic: string;
+ images?: string;
+ text?: string;
+ link?: string;
+}
+```
+
+### loadStyleSheet
+
+- **Type:** `() => void`
+- **Example:**
+
+ ```ts
+ function loadStyleSheet() {
+ import("../styles/skins/macOs.css");
+ }
+ ```
+
+Function that dynamically imports style sheet
diff --git a/packages/docs/src/reference/classes/system/apps-config.md b/packages/docs/src/reference/classes/system/apps-config.md
index 75b2c05..0e4669f 100644
--- a/packages/docs/src/reference/classes/system/apps-config.md
+++ b/packages/docs/src/reference/classes/system/apps-config.md
@@ -14,10 +14,12 @@ outline: deep
#### options
-- options.apps : [`App[]`](app)
+- options.apps : [`App[]`](../apps/app)
## Properties
-### apps : [`App[]`](app) {#apps}
+### apps
+
+- **Type:** [`App[]`](../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
index 536c858..835c0c5 100644
--- a/packages/docs/src/reference/classes/system/desktop-config.md
+++ b/packages/docs/src/reference/classes/system/desktop-config.md
@@ -14,44 +14,11 @@ outline: deep
#### options
-- options.wallpapers : `string[]`
-- options.defaultWallpaper : `string`
- options.defaultIconSize : `0 | 1 | 2`
- options.defaultIconDirection : `0 | 1`
## Properties
-### wallpapers : `string[]` {#wallpapers}
-
-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` {#default-wallpaper}
-
-URL of default wallpaper image
-
-> **@default**
->
-> ```ts
-> "https://os.prozilla.dev/assets/wallpapers/vibrant-wallpaper-blue-purple-red.png"
-> ```
-> 
-
### defaultIconSize : `0 | 1 | 2` {#default-icon-size}
The default size of the desktop icons
diff --git a/packages/docs/src/reference/classes/system/virtual-drive-config.md b/packages/docs/src/reference/classes/system/virtual-drive-config.md
deleted file mode 100644
index cd58a05..0000000
--- a/packages/docs/src/reference/classes/system/virtual-drive-config.md
+++ /dev/null
@@ -1,114 +0,0 @@
----
-outline: deep
----
-
-# Class [`VirtualDriveConfig`](https://github.com/prozilla-os/ProzillaOS/blob/main/packages/core/src/features/system/configs/virtualDriveConfig.ts)
-
-## Constructor
-
-> `new VirtualDriveConfig(options)`
-
-### Parameters
-
-
-
-#### options
-
-- options.fileIcon : `string`
-- options.infoFileIcon : `string`
-- options.textFileIcon : `string`
-- options.codeFileIcon : `string`
-- options.folderIcon : `string`
-- options.imagesFolderIcon : `string`
-- options.textFolderIcon : `string`
-- options.folderLinkIcon : `string`
-
-## Properties
-
-### fileIcon : `string` {#file-icon}
-
-URL of an icon for regular files
-
-> **@default**
->
-> ```ts
-> "https://os.prozilla.dev/assets/apps/file-explorer/icons/file.svg"
-> ```
-> 
-
-### infoFileIcon : `string` {#info-file-icon}
-
-URL of an icon for information files
-
-> **@default**
->
-> ```ts
-> "https://os.prozilla.dev/assets/apps/file-explorer/icons/file-info.svg"
-> ```
-> 
-
-### textFileIcon : `string` {#text-file-icon}
-
-URL of an icon for text files
-
-> **@default**
->
-> ```ts
-> "https://os.prozilla.dev/assets/apps/file-explorer/icons/file-text.svg"
-> ```
-> 
-
-### codeFileIcon : `string` {#code-file-icon}
-
-URL of an icon for code files
-
-> **@default**
->
-> ```ts
-> "https://os.prozilla.dev/assets/apps/file-explorer/icons/file-code.svg"
-> ```
-> 
-
-### folderIcon : `string` {#folder-icon}
-
-URL of an icon for regular folders
-
-> **@default**
->
-> ```ts
-> "https://os.prozilla.dev/assets/apps/file-explorer/icons/folder.svg"
-> ```
-> 
-
-### imagesFolderIcon : `string` {#images-folder-icon}
-
-URL of an icon for image folders
-
-> **@default**
->
-> ```ts
-> "https://os.prozilla.dev/assets/apps/file-explorer/icons/folder-images.svg"
-> ```
-> 
-
-### textFolderIcon : `string` {#text-folder-icon}
-
-URL of an icon for text folders
-
-> **@default**
->
-> ```ts
-> "https://os.prozilla.dev/assets/apps/file-explorer/icons/folder-text.svg"
-> ```
-> 
-
-### folderLinkIcon : `string` {#folder-link-icon}
-
-URL of an icon for folder links
-
-> **@default**
->
-> ```ts
-> "https://os.prozilla.dev/assets/apps/file-explorer/icons/folder-link.svg"
-> ```
-> 
diff --git a/packages/docs/src/reference/configuration.md b/packages/docs/src/reference/configuration.md
index ec2093b..4521ccd 100644
--- a/packages/docs/src/reference/configuration.md
+++ b/packages/docs/src/reference/configuration.md
@@ -28,6 +28,10 @@ To configure ProzillaOS, pass the following properties inside to the `config` pr
> "Web-based Operating System"
> ```
+### skin : [`Skin`](./classes/skins/skin) {#skin}
+
+
+
### config
@@ -40,7 +44,6 @@ To configure ProzillaOS, pass the following properties inside to the `config` pr
- config.modals : [`ModalsConfig`](classes/system/modals-config)
- config.taskbar : [`TaskbarConfig`](classes/system/taskbar-config)
- config.tracking : [`TrackingConfig`](classes/system/tracking-config)
-- config.virtualDrive : [`VirtualDriveConfig`](classes/system/virtual-drive-config)
- config.windows : [`WindowsConfig`](classes/system/windows-config)
## Example
@@ -49,6 +52,9 @@ To configure ProzillaOS, pass the following properties inside to the `config` pr
void;
}
export class Skin {
appIcons: SkinOptions["appIcons"];
+ appNames: SkinOptions["appNames"];
wallpapers: SkinOptions["wallpapers"];
defaultWallpaper: SkinOptions["defaultWallpaper"];
fileIcons: SkinOptions["fileIcons"];
folderIcons: SkinOptions["folderIcons"];
loadStyleSheet: SkinOptions["loadStyleSheet"];
- constructor(options: SkinOptions) {
+ constructor(options: OptionalInterface = {}) {
this.appIcons = options.appIcons;
- this.wallpapers = options.wallpapers;
- this.defaultWallpaper = options.defaultWallpaper;
- this.fileIcons = options.fileIcons;
- this.folderIcons = options.folderIcons;
+ this.appNames = options.appNames;
+
+ this.wallpapers = options.wallpapers ?? [
+ "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",
+ ];
+ this.defaultWallpaper = options.defaultWallpaper ?? "https://os.prozilla.dev/assets/wallpapers/vibrant-wallpaper-blue-purple-red.png";
+
+ this.fileIcons = options.fileIcons ?? {
+ generic: "https://os.prozilla.dev/assets/apps/file-explorer/icons/file.svg",
+ text: "https://os.prozilla.dev/assets/apps/file-explorer/icons/file-text.svg",
+ info: "https://os.prozilla.dev/assets/apps/file-explorer/icons/file-info.svg",
+ code: "https://os.prozilla.dev/assets/apps/file-explorer/icons/file-code.svg"
+ };
+ this.folderIcons = options.folderIcons ?? {
+ generic: "https://os.prozilla.dev/assets/apps/file-explorer/icons/folder.svg",
+ images: "https://os.prozilla.dev/assets/apps/file-explorer/icons/folder-images.svg",
+ text: "https://os.prozilla.dev/assets/apps/file-explorer/icons/folder-text.svg",
+ link: "https://os.prozilla.dev/assets/apps/file-explorer/icons/folder-link.svg"
+ };
+
this.loadStyleSheet = options.loadStyleSheet;
}
}
\ No newline at end of file
diff --git a/packages/skins/src/styles/skins/minimal.css b/packages/skins/src/styles/skins/minimal.css
index e69de29..b022425 100644
--- a/packages/skins/src/styles/skins/minimal.css
+++ b/packages/skins/src/styles/skins/minimal.css
@@ -0,0 +1 @@
+/* TO DO */
\ No newline at end of file
diff --git a/packages/skins/src/types/utils.ts b/packages/skins/src/types/utils.ts
new file mode 100644
index 0000000..3623c08
--- /dev/null
+++ b/packages/skins/src/types/utils.ts
@@ -0,0 +1,3 @@
+export type OptionalInterface = {
+ [Property in keyof Interface]?: Interface[Property];
+};
\ No newline at end of file
+ 
