Added virtual drive config + updated portfolio example

Prozilla · Prozilla · commit 905a5b6f6eab · 2024-10-24T18:20:16.000+02:00
diff --git a/demo/public/documents/prozilla.md b/demo/public/documents/prozilla.md
@@ -1,4 +1,4 @@
-# Prozilla <img height="150" width="150" align="right" alt="Prozilla's logo" src="https://prozilla.dev/public/media/Prozilla.svg"> 
+# Prozilla <img height="150" width="150" align="right" alt="Prozilla's logo" src="https://prozilla.dev/public/media/Prozilla.svg">
 
 Hi, I'm Sieben De Beule, but you can call me Prozilla. I'm a passionate software developer and 3D artist. Experienced in application (especially games) and web development as well as web design.
 
@@ -8,8 +8,8 @@ I made ProzillaOS and a few other projects, including a VR game called [Crumblin
 
 My portfolio is available at [prozilla.dev](https://prozilla.dev/) and you can contact me [business@prozilla.dev](mailto:business@prozilla.dev). If you would like to support my work, feel free to donate on my [Ko-fi page](https://ko-fi.com/prozilla). If you have any suggestions, bug reports on ProzillaOS or if you've made your own version of ProzillaOS, don't hesitate to contact me!
 
-
 ## Connect with me
+
 <a href="https://twitter.com/prozilladev" target="blank"><img align="center" src="https://raw.githubusercontent.com/rahuldkjain/github-profile-readme-generator/master/src/images/icons/Social/twitter.svg" alt="prozilladev" height="30" width="40" /></a>
 <a href="https://linkedin.com/in/sieben-de-beule" target="blank"><img align="center" src="https://raw.githubusercontent.com/rahuldkjain/github-profile-readme-generator/master/src/images/icons/Social/linked-in-alt.svg" alt="sieben de beule" height="30" width="40" /></a>
 <a href="https://instagram.com/prozilladev" target="blank"><img align="center" src="https://raw.githubusercontent.com/rahuldkjain/github-profile-readme-generator/master/src/images/icons/Social/instagram.svg" alt="prozilladev" height="30" width="40" /></a>
diff --git a/docs/src/reference/core/classes/system/virtual-drive-config.md b/docs/src/reference/core/classes/system/virtual-drive-config.md
@@ -0,0 +1,73 @@
+---
+outline: deep
+package: "@prozilla-os/core"
+---
+
+# Class [`VirtualDriveConfig`](https://github.com/prozilla-os/ProzillaOS/blob/main/packages/core/src/features/system/configs/virtualDriveConfig.ts)
+
+## Constructor
+
+> `new VirtualDriveConfig(options)`
+
+### Parameters
+
+- **options**
+  - **Type:** `VirtualDriveConfigOptions | undefined`
+
+```ts
+interface VirtualDriveConfigOptions {
+	saveData?: boolean;
+	defaultData?: {
+		includePicturesFolder?: boolean;
+		includeDocumentsFolder?: boolean;
+		includeDesktopFolder?: boolean;
+		includeSourceTree?: boolean;
+		loadData?: (virtualRoot: VirtualRoot) => void;
+	};
+}
+```
+
+## Properties
+
+### saveData
+
+Enables persistent storage of the virtual drive
+
+- **Type:** `boolean`
+- **Default:** `true`
+
+### defaultData
+
+Configure the data that is loaded initially when ProzillaOS is opened
+
+- **Type:** `DefaultData`
+
+```ts
+interface DefaultData {
+	/**
+	 * Include pictures folder in default data
+	 * @default true
+	 */
+	includePicturesFolder?: boolean;
+
+	/**
+	 * Include documents folder in default data
+	 * @default true
+	 */
+	includeDocumentsFolder?: boolean;
+
+	/**
+	 * Include desktop folder in default data
+	 * @default true
+	 */
+	includeDesktopFolder?: boolean;
+
+	/**
+	 * Include source tree folder in default data
+	 * @default true
+	 */
+	includeSourceTree?: boolean;
+
+	loadData?: (virtualRoot: VirtualRoot) => void;
+}
+```
diff --git a/examples/portfolio/package.json b/examples/portfolio/package.json
@@ -19,8 +19,8 @@
 		"directory": "examples/portfolio"
 	},
 	"dependencies": {
-		"@prozilla-os/skins": "^1.1.2",
-		"prozilla-os": "^1.3.2",
+		"@prozilla-os/skins": "workspace:*",
+		"prozilla-os": "workspace:*",
 		"react": "^18.3.1",
 		"react-dom": "^18.2.0",
 		"react-svg": "^16.1.34"
diff --git a/examples/portfolio/public/documents/about-me.md b/examples/portfolio/public/documents/about-me.md
@@ -0,0 +1,19 @@
+# About Me <img height="150" width="150" align="right" alt="Prozilla's logo" src="https://prozilla.dev/public/media/Prozilla.svg">
+
+Hi, I'm Sieben De beule, aka Prozilla. I'm a Passionate software developer and 3D artist. Experienced in application (especially games) and web development as well as web design.
+
+> [!NOTE]  
+> This is just a showcase project for ProzillaOS. If you want to see my real portfolio, visit [prozilla.dev](https://prozilla.dev)!
+
+## Skills
+
+- A skill
+- Another skill
+- And one more skill
+
+## Get in touch
+
+<a href="https://twitter.com/prozilladev" target="blank"><img align="center" src="https://raw.githubusercontent.com/rahuldkjain/github-profile-readme-generator/master/src/images/icons/Social/twitter.svg" alt="prozilladev" height="30" width="40" /></a>
+<a href="https://linkedin.com/in/sieben-de-beule" target="blank"><img align="center" src="https://raw.githubusercontent.com/rahuldkjain/github-profile-readme-generator/master/src/images/icons/Social/linked-in-alt.svg" alt="sieben de beule" height="30" width="40" /></a>
+<a href="https://instagram.com/prozilladev" target="blank"><img align="center" src="https://raw.githubusercontent.com/rahuldkjain/github-profile-readme-generator/master/src/images/icons/Social/instagram.svg" alt="prozilladev" height="30" width="40" /></a>
+<a href="https://www.youtube.com/c/prozilla" target="blank"><img align="center" src="https://raw.githubusercontent.com/rahuldkjain/github-profile-readme-generator/master/src/images/icons/Social/youtube.svg" alt="prozilla" height="30" width="40" /></a>
diff --git a/examples/portfolio/public/documents/blog/post-1.md b/examples/portfolio/public/documents/blog/post-1.md
@@ -0,0 +1,5 @@
+# Post #1
+
+> Jan 1, 1970
+
+Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
diff --git a/examples/portfolio/public/documents/blog/post-2.md b/examples/portfolio/public/documents/blog/post-2.md
@@ -0,0 +1,5 @@
+# Post #2
+
+> Jan 2, 1970
+
+Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
diff --git a/examples/portfolio/public/documents/projects/project-1.md b/examples/portfolio/public/documents/projects/project-1.md
@@ -0,0 +1,7 @@
+# Project #1
+
+| From | Until | Role | Skills |
+| ---: | :--- | :--- | :--- |
+| Jan 1970 | Now | Frontend Developer | HTML, CSS, JavaScript |
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
diff --git a/examples/portfolio/public/documents/projects/project-2.md b/examples/portfolio/public/documents/projects/project-2.md
@@ -0,0 +1,7 @@
+# Project #2
+
+| From | Until | Role | Skills |
+| ---: | :--- | :--- | :--- |
+| Feb 2000 | Mar 2000 | Backend Developer | Express.js |
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
diff --git a/examples/portfolio/public/documents/projects/project-3.md b/examples/portfolio/public/documents/projects/project-3.md
@@ -0,0 +1,7 @@
+# Project #3
+
+| From | Until | Role | Skills |
+| ---: | :--- | :--- | :--- |
+| Jan 1990 | Dec 2020 | Web Designer | Figma |
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
diff --git a/examples/portfolio/src/components/App.tsx b/examples/portfolio/src/components/App.tsx
@@ -1,15 +1,17 @@
 import { Desktop, ModalsView, ProzillaOS, Taskbar, WindowsView } from "prozilla-os";
-import { appsConfig } from "../config/appsConfig";
 import { defaultSkin } from "../config/skin.config";
+import { appsConfig } from "../config/apps.config";
+import { virtualDriveConfig } from "../config/virtualDrive.config";
 
 export function App() {
 	return (
 		<ProzillaOS
 			systemName="Portfolio"
-			tagLine="Portfolio | ProzillaOS examples"
+			tagLine="ProzillaOS examples"
 			skin={defaultSkin}
 			config={{
 				apps: appsConfig,
+				virtualDrive: virtualDriveConfig,
 			}}
 		>
 			<Taskbar/>
diff --git a/examples/portfolio/src/config/apps.config.ts b/examples/portfolio/src/config/apps.config.ts
@@ -1,10 +1,10 @@
-import { AppsConfig, fileExplorer, terminal, textEditor } from "prozilla-os";
+import { AppsConfig, fileExplorer, textEditor } from "prozilla-os";
 
 export const appsConfig = new AppsConfig({
 	apps: [
 		fileExplorer.setName("File Explorer")
 			.setDescription("Application for browsing files."),
-		terminal.setName("Terminal"),
-		textEditor.setName("Text Editor"),
-	]
+		textEditor.setName("Text Editor")
+			.setPinnedByDefault(false),
+	],
 });
diff --git a/examples/portfolio/src/config/virtualDrive.config.ts b/examples/portfolio/src/config/virtualDrive.config.ts
@@ -0,0 +1,49 @@
+import { VirtualDriveConfig, VirtualFolder, VirtualRoot } from "prozilla-os";
+import { PROJECTS } from "../constants/projects";
+import { BLOG } from "../constants/blog";
+
+function loadData(virtualRoot: VirtualRoot) {
+	const userFolder = virtualRoot.navigate("~");
+
+	if (!userFolder || !(userFolder instanceof VirtualFolder))
+		return;
+
+	userFolder.createFolder("Desktop", (desktopFolder) => {
+		desktopFolder.createFolder("Projects", (projectsFolder) => {
+			PROJECTS.forEach((project) => {
+				projectsFolder.createFolder(project.title, (projectFolder) => {
+					projectFolder.createFile("About", "md", (file) => {
+						file.setSource(project.document);
+					}).createFile(project.url, undefined, (file) => {
+						file.setSource(project.url);
+					});
+				});
+			});
+		});
+
+		desktopFolder.createFolder("Blog", (blogFolder) => {
+			BLOG.forEach((post) => {
+				blogFolder.createFile(post.title, "md", (file) => {
+					file.setSource(post.document);
+				});
+			});
+		});
+
+		desktopFolder.createFolder("Links");
+
+		desktopFolder.createFile("AboutMe", "md", (file) => {
+			file.setSource("/documents/about-me.md");
+		});
+	});
+}
+
+export const virtualDriveConfig = new VirtualDriveConfig({
+	saveData: false,
+	defaultData: {
+		includeDesktopFolder: false,
+		includeDocumentsFolder: false,
+		includePicturesFolder: false,
+		includeSourceTree: false,
+		loadData,
+	},
+});
diff --git a/examples/portfolio/src/constants/blog.ts b/examples/portfolio/src/constants/blog.ts
@@ -0,0 +1,10 @@
+export const BLOG = [
+	{
+		title: "Post #1",
+		document: "/documents/blog/post-1.md",
+	},
+	{
+		title: "Post #2",
+		document: "/documents/blog/post-2.md",
+	},
+];
diff --git a/examples/portfolio/src/constants/projects.ts b/examples/portfolio/src/constants/projects.ts
@@ -0,0 +1,17 @@
+export const PROJECTS = [
+	{
+		title: "Project #1",
+		url: "https://os.prozilla.dev/",
+		document: "/documents/projects/project-1.md",
+	},
+	{
+		title: "Project #2",
+		url: "https://os.prozilla.dev/",
+		document: "/documents/projects/project-2.md",
+	},
+	{
+		title: "Project #3",
+		url: "https://os.prozilla.dev/",
+		document: "/documents/projects/project-3.md",
+	},
+];
diff --git a/examples/portfolio/tsconfig.json b/examples/portfolio/tsconfig.json
@@ -14,6 +14,9 @@
 		"esModuleInterop": true,
 		"forceConsistentCasingInFileNames": true,
 		"strict": true,
+		"paths": {
+			"prozilla-os": ["./node_modules/prozilla-os/src/main"],
+		}
 	},
 	"include": [
 		"src/**/*",
diff --git a/packages/core/src/components/_utils/directory-list/DirectoryList.tsx b/packages/core/src/components/_utils/directory-list/DirectoryList.tsx
@@ -43,6 +43,11 @@ export function DirectoryList({ directory, showHidden = false, folderClassName,
 	useEffect(() => {
 		onSelectionChange?.({ files: selectedFiles, folders: selectedFolders, directory });
 	}, [directory, onSelectionChange, selectedFiles, selectedFolders]);
+
+	const clearSelection = () => {
+		setSelectedFolders([]);
+		setSelectedFiles([]);
+	};
 	
 	useEffect(() => {
 		clearSelection();
@@ -80,10 +85,6 @@ export function DirectoryList({ directory, showHidden = false, folderClassName,
 	if (!directory)
 		return null;
 
-	const clearSelection = () => {
-		setSelectedFolders([]);
-		setSelectedFiles([]);
-	};
 	const selectFolder = (folder: VirtualFolder, exclusive = false) => {
 		if (!allowMultiSelect)
 			exclusive = true;
diff --git a/packages/core/src/features/system/configs/virtualDriveConfig.ts b/packages/core/src/features/system/configs/virtualDriveConfig.ts
@@ -1,11 +1,60 @@
 import { OptionalInterface } from "../../../types/utils";
+import { VirtualRoot } from "../../virtual-drive";
 
 export interface VirtualDriveConfigOptions {
-	[key: string]: unknown;
+	/**
+	 * Enables persistent storage of the virtual drive
+	 * @default true
+	 */
+	saveData: boolean;
+
+	/**
+	 * Configure the data that is loaded initially when ProzillaOS is opened
+	 */
+	defaultData: {
+		/**
+		 * Include pictures folder in default data
+		 * @default true
+		 */
+		includePicturesFolder?: boolean;
+
+		/**
+		 * Include documents folder in default data
+		 * @default true
+		 */
+		includeDocumentsFolder?: boolean;
+
+		/**
+		 * Include desktop folder in default data
+		 * @default true
+		 */
+		includeDesktopFolder?: boolean;
+
+		/**
+		 * Include source tree folder in default data
+		 * @default true
+		 */
+		includeSourceTree?: boolean;
+
+		loadData?: (virtualRoot: VirtualRoot) => void;
+	};
 }
 
 export class VirtualDriveConfig {
-	constructor(_options: OptionalInterface<VirtualDriveConfigOptions> = {}) {
-		// const { } = options as VirtualDriveConfigOptions;
+	saveData: VirtualDriveConfigOptions["saveData"];
+	defaultData: VirtualDriveConfigOptions["defaultData"];
+
+	constructor(options: OptionalInterface<VirtualDriveConfigOptions> = {}) {
+		const { saveData, defaultData } = options as VirtualDriveConfigOptions;
+
+		this.saveData = saveData ?? true;
+
+		this.defaultData = {
+			includePicturesFolder: true,
+			includeDocumentsFolder: true,
+			includeDesktopFolder: true,
+			includeSourceTree: true,
+			...defaultData,
+		};
 	}
 }
diff --git a/packages/core/src/features/virtual-drive/root/defaultData.ts b/packages/core/src/features/virtual-drive/root/defaultData.ts
diff --git a/packages/core/src/features/virtual-drive/root/virtualRoot.ts b/packages/core/src/features/virtual-drive/root/virtualRoot.ts
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
