core: Added file schemes

Author: Prozilla

demo/public/assets/apps/file-explorer/icons/file-external.svg

@@ -8,7 +8,7 @@ ProzillaOS is a web-based operating system inspired by Ubuntu Linux and Windows
 
 ## Open-source
 
-This website was made using React, Vite and TypeScript. The source code is available both on [GitHub](https://github.com/prozilla-os/ProzillaOS) and [on the website itself](/). You can find the documentation for this project inside the [docs](/docs) folder.
+This website was made using React, Vite and TypeScript. The source code is available both on [GitHub](https://github.com/prozilla-os/ProzillaOS) and [on the website itself](/). You can find the documentation [here](https://os.prozilla.dev/docs/).
 
 ## Support ProzillaOS
 

demo/public/assets/apps/icons/text-editor.svg

@@ -31,7 +31,8 @@ export const appsConfig = new AppsConfig({
 			.setIconUrl("/assets/apps/icons/calculator.svg")
 			.setPinnedByDefault(true),
 		appCenter.setName("Apps")
-			.setDescription(`Browse and install ${NAME} apps.`),
+			.setDescription(`Browse and install ${NAME} apps.`)
+			.setPinnedByDefault(false),
 		wordle.setIconUrl("/assets/apps/icons/wordle.svg")
 			.setPinnedByDefault(false),
 		ballMaze.setIconUrl("/assets/apps/icons/ball-maze.svg")

demo/public/assets/icon-mask.svg

@@ -1,28 +1,24 @@
 import { Skin } from "@prozilla-os/skins";
+import { removeBaseUrl } from "prozilla-os";
 
-export const defaultSkin = new Skin({
-	wallpapers: [
-		"/assets/wallpapers/vibrant-wallpaper-blue-purple-red.png",
-		"/assets/wallpapers/abstract-mesh-gradient-orange-red-purple.png",
-		"/assets/wallpapers/vibrant-wallpaper-purple-yellow.png",
-		"/assets/wallpapers/abstract-wallpaper-mesh-gradient-cyan.png",
-		"/assets/wallpapers/colorful-abstract-wallpaper-blue-red-green.png",
-		"/assets/wallpapers/mesh-gradient-wallpaper-red-purple.png",
-		"/assets/wallpapers/colorful-mesh-gradient-red-green.png",
-		"/assets/wallpapers/flame-abstract-wallpaper-orange.png",
-		"/assets/wallpapers/wave-abstract-wallpaper-teal.png",
-	],
+const defaultSkin = new Skin({
 	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",
-	},
-});
+});
+
+function cleanUrls(skin: Skin) {
+	skin.systemIcon = removeBaseUrl(skin.systemIcon);
+	skin.wallpapers = skin.wallpapers.map((url) => removeBaseUrl(url));
+	skin.defaultWallpaper = removeBaseUrl(skin.defaultWallpaper);
+
+	for (const [key, value] of Object.entries(skin.fileIcons)) {
+		skin.fileIcons[key as keyof Skin["fileIcons"]] = removeBaseUrl(value);
+	}
+
+	for (const [key, value] of Object.entries(skin.folderIcons)) {
+		skin.folderIcons[key as keyof Skin["folderIcons"]] = removeBaseUrl(value);
+	}
+}
+
+cleanUrls(defaultSkin);
+
+export { defaultSkin };

demo/public/documents/info.md

@@ -86,7 +86,7 @@ export const Desktop = memo(() => {
 			/>
 			{settingsApp != null &&
 				<ClickAction label="Change appearance" icon={faPaintBrush} onTrigger={() => {
-					windowsManager?.open(settingsApp.id, { tab: 2 });
+					windowsManager?.open(settingsApp.id, { tab: 1 });
 				}}/>
 			}
 			<Divider/>

demo/src/config/apps.config.ts

@@ -17,4 +17,9 @@ export const IMAGE_EXTENSIONS = [
 	"gif",
 	"webp",
 	"ico",
-];
+];
+
+export const FILE_SCHEMES = {
+	external: "ext://",
+	app: "app://",
+};

demo/src/config/skin.config.ts

@@ -106,6 +106,10 @@ export function removeUrlProtocol(url: string) {
 	return url.replace(/^https?:\/\/|\/$/g, "");
 }
 
+export function removeBaseUrl(url: string) {
+	return url.replace(/^https?:\/\/[a-z]+(\.[0-9a-z-]+)+/g, "");
+}
+
 export function copyToClipboard(string: string, onSuccess?: (value: void) => void, onFail?: (value: void) => void) {
 	void navigator.clipboard.writeText(string).then(onSuccess, onFail);
 }

packages/core/src/components/desktop/Desktop.tsx

@@ -1,4 +1,4 @@
-import { IMAGE_EXTENSIONS } from "../../../constants/virtualDrive.const";
+import { FILE_SCHEMES, IMAGE_EXTENSIONS } from "../../../constants/virtualDrive.const";
 import { WindowsManager } from "../../windows/windowsManager";
 import { VirtualBase, VirtualBaseJson } from "../virtualBase";
 
@@ -118,12 +118,22 @@ export class VirtualFile extends VirtualBase {
 		if (this.iconUrl != null)
 			return this.iconUrl;
 
-		let iconUrl = null;
+		const { skin, appsConfig } = this.getRoot().systemManager;
+
+		if (this.source != null) {
+			if (this.extension != null && IMAGE_EXTENSIONS.includes(this.extension)) {
+				return this.source;
+			} else if (this.source.startsWith(FILE_SCHEMES.app)) {
+				const app = appsConfig.getAppById(VirtualFile.removeFileScheme(this.source));
 
-		if (this.source != null && this.extension != null && IMAGE_EXTENSIONS.includes(this.extension))
-			return this.source;
+				if (app?.iconUrl != null)
+					return app?.iconUrl;
+			} else if (this.source.startsWith(FILE_SCHEMES.external) && skin.fileIcons.external != null) {
+				return skin.fileIcons.external;
+			}
+		}
 
-		const { skin } = this.getRoot().systemManager;
+		let iconUrl = null;
 
 		switch (this.extension) {
 			case "txt":
@@ -194,4 +204,17 @@ export class VirtualFile extends VirtualBase {
 
 		return object;
 	}
+
+	static removeFileScheme(source: string) {
+		let done = false;
+		
+		Object.values(FILE_SCHEMES).forEach((scheme) => {
+			if (source.startsWith(scheme) && !done) {
+				source.replace(scheme, "");
+				done = true;
+			}
+		});
+
+		return source;
+	}
 }