skins: Added system icon property

Author: Prozilla

.gitignore

@@ -1,15 +1,13 @@
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
-# dependencies
 node_modules
 dist
 cache
-
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 *.ini
-
 /tmp
 demo/public/config/tree.json
-vite.config.ts.timestamp-*.mjs
+vite.config.ts.timestamp-*.mjs
+.temp

demo/vite.config.ts

@@ -6,6 +6,7 @@ import { resolve } from "path";
 import { stageSitePlugin } from "@prozilla-os/dev-tools";
 import { appsConfig } from "./src/config/apps.config";
 import { NAME, TAG_LINE } from "./src/config/branding.config";
+import { defaultSkin } from "./src/config/skin.config";
 
 /**
  * Loads packages from their local path instead of node_modules 
@@ -79,6 +80,7 @@ export default defineConfig(({ command }) => {
 				plugins: [
 					stageSitePlugin({
 						appsConfig,
+						favicon: defaultSkin.systemIcon,
 						siteName: NAME,
 						siteTagLine: TAG_LINE,
 						domain: DOMAIN,

docs/.vitepress/config.ts

@@ -16,15 +16,15 @@ export default defineConfig({
 		["link", { rel: "icon", href: "/docs/favicon.ico" }],
 		["link", { rel: "preconnect", href: "https://fonts.googleapis.com" }],
 		["link", { rel: "preconnect", href: "https://fonts.gstatic.com", crossorigin: "" }],
-		["link", { href: "https://fonts.googleapis.com/css2?family=Outfit:[email protected]&family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap", rel: "stylesheet" }]
+		["link", { href: "https://fonts.googleapis.com/css2?family=Outfit:[email protected]&family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap", rel: "stylesheet" }],
 	],
 
 	cleanUrls: true,
 
 	outDir: "./dist",
 
 	sitemap: {
-		hostname: "https://os.prozilla.dev/docs/"
+		hostname: "https://os.prozilla.dev/docs/",
 	},
 
 	themeConfig: {
@@ -36,9 +36,9 @@ export default defineConfig({
 				base,
 				items: items.map(({ text, link }) => ({
 					text,
-					link: base ? base + link : link
-				}))
-			}) as DefaultTheme.NavItem)
+					link: base ? base + link : link,
+				})),
+			}) as DefaultTheme.NavItem),
 		],
 
 		sidebar: Object.assign(
@@ -51,32 +51,32 @@ export default defineConfig({
 
 		editLink: {
 			pattern: "https://github.com/prozilla-os/ProzillaOS/edit/main/docs/src/:path",
-			text: "Suggest changes to this page"
+			text: "Suggest changes to this page",
 		},
 
 		socialLinks: [
 			{ icon: "github", link: "https://github.com/prozilla-os/ProzillaOS" },
 			{ icon: "discord", link: "https://discord.gg/JwbyQP4tdz" },
-			{ icon: "npm", link: "https://www.npmjs.com/package/prozilla-os" }
+			{ icon: "npm", link: "https://www.npmjs.com/package/prozilla-os" },
 		],
 
 		logo: {
 			dark: "/logo-light.svg",
-			light: "/logo-dark.svg"
+			light: "/logo-dark.svg",
 		},
 
 		siteTitle: "ProzillaOS",
 
 		footer: {
 			message: "Built by <strong><a href=\"https://prozilla.dev/\" target=\"_blank\">Prozilla</a></strong>",
-			copyright: "Copyright &copy; 2023-present Prozilla"
+			copyright: "Copyright &copy; 2023-present Prozilla",
 		},
 
 		search: {
 			provider: "local",
 			options: {
-				detailedView: true
-			}
+				detailedView: true,
+			},
 		},
 	},
 
@@ -114,13 +114,13 @@ export default defineConfig({
 	},
 
 	ignoreDeadLinks: [
-		/^https?:\/\/localhost/
+		/^https?:\/\/localhost/,
 	],
 
 	markdown: {
 		theme: {
 			dark: "material-theme",
-			light: "material-theme-lighter"
+			light: "material-theme-lighter",
 		},
 	},
 });

docs/.vitepress/nav.config.ts

@@ -9,7 +9,7 @@ export const NAVIGATION: (DefaultTheme.NavItemChildren & DefaultTheme.SidebarIte
 		items: [
 			{ text: "Introduction", link: "/introduction" },
 			{ text: "Features", link: "/features" },
-		]
+		],
 	},
 	{
 		text: "Guides",
@@ -19,7 +19,7 @@ export const NAVIGATION: (DefaultTheme.NavItemChildren & DefaultTheme.SidebarIte
 			{ text: "Getting started", link: "/getting-started" },
 			{ text: "Custom app", link: "/custom-app" },
 			{ text: "Self-hosting", link: "/self-hosting" },
-		]
+		],
 	},
 	{
 		text: "Reference",
@@ -30,8 +30,8 @@ export const NAVIGATION: (DefaultTheme.NavItemChildren & DefaultTheme.SidebarIte
 			{ text: "Glossary", link: "/glossary" },
 			{ text: "Packages", link: "/packages" },
 			{
-				items: packageReferenceItems(PACKAGES) as DefaultTheme.SidebarItem[]
-			}
+				items: packageReferenceItems(PACKAGES),
+			},
 		] as (DefaultTheme.NavItemWithLink & DefaultTheme.SidebarItem)[],
-	}
+	},
 ];

docs/.vitepress/packages.config.ts

@@ -11,7 +11,7 @@ export const PACKAGES: PackageData[] = [
 	{
 		text: "prozilla-os",
 		link: "prozilla-os",
-		category: "Bundle"
+		category: "Bundle",
 	},
 	{
 		text: "@prozilla-os/core",
@@ -29,7 +29,7 @@ export const PACKAGES: PackageData[] = [
 						collapsed: true,
 						items: [
 							{ text: "App", link: "/app" },
-						]
+						],
 					},
 					{
 						text: "System",
@@ -42,8 +42,9 @@ export const PACKAGES: PackageData[] = [
 							{ 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" },
-						]
+						],
 					},
 					{
 						text: "Utils",
@@ -52,9 +53,9 @@ export const PACKAGES: PackageData[] = [
 						items: [
 							{ text: "TimeManager", link: "/time-manager" },
 							{ text: "Vector2", link: "/vector2" },
-						]
+						],
 					},
-				]
+				],
 			},
 			{
 				text: "Functions",
@@ -64,13 +65,13 @@ export const PACKAGES: PackageData[] = [
 					{ text: "Browser", link: "/browser" },
 					{ text: "Keyboard", link: "/keyboard" },
 
-				]
+				],
 			},
 			{
 				text: "Constants",
-				link: "/constants"
+				link: "/constants",
 			},
-		]
+		],
 	},
 	{
 		text: "@prozilla-os/skins",
@@ -82,10 +83,10 @@ export const PACKAGES: PackageData[] = [
 				base: "/reference/skins/classes",
 				collapsed: false,
 				items: [
-					{ text: "Skin", link: "/skin" }
-				]
-			}
-		]
+					{ text: "Skin", link: "/skin" },
+				],
+			},
+		],
 	},
 	{
 		text: "@prozilla-os/shared",
@@ -98,15 +99,15 @@ export const PACKAGES: PackageData[] = [
 				collapsed: false,
 				items: [
 					{ text: "EventEmitter", link: "/event-emitter" },
-				]
+				],
 			},
 			{
 				text: "Constants",
 				base: "/reference/shared/constants",
 				collapsed: false,
 				items: [
 					{ text: "ANSI", link: "/ansi" },
-				]
+				],
 			},
 			{
 				text: "Functions",
@@ -117,9 +118,9 @@ export const PACKAGES: PackageData[] = [
 					{ text: "Date", link: "/date" },
 					{ text: "Math", link: "/math" },
 					{ text: "Number", link: "/number" },
-				]
-			}
-		]
+				],
+			},
+		],
 	},
 	{
 		text: "@prozilla-os/dev-tools",
@@ -133,9 +134,9 @@ export const PACKAGES: PackageData[] = [
 				items: [
 					{ text: "Console", link: "/console" },
 					{ text: "Vite", link: "/vite" },
-				]
-			}
-		]
+				],
+			},
+		],
 	},
 	{
 		text: "@prozilla-os/calculator",
@@ -171,7 +172,7 @@ export const PACKAGES: PackageData[] = [
 		text: "@prozilla-os/logic-sim",
 		link: "apps/logic-sim",
 		category: "Apps",
-	}
+	},
 ];
 
 export const packageSidebars = (packages: PackageData[]): DefaultTheme.Sidebar => {
@@ -186,10 +187,10 @@ export const packageSidebars = (packages: PackageData[]): DefaultTheme.Sidebar =
 					text,
 					items: [
 						{ text: "Info", link: "/" },
-						...items
-					]
-				}
-			]
+						...items,
+					],
+				},
+			],
 		};
 	});
 
@@ -204,13 +205,13 @@ export const packageReferenceItems = (packages: PackageData[]): DefaultTheme.Sid
 			categories[category] = {
 				text: category,
 				collapsed: true,
-				items: []
+				items: [],
 			};
 		}
 
 		categories[category].items?.push({
 			text,
-			link: "/" + link
+			link: "/" + link,
 		});
 	});
 

docs/.vitepress/theme/index.ts

@@ -9,7 +9,7 @@ export default {
 	extends: DefaultTheme,
 	Layout() {
 		return h(DefaultTheme.Layout, null, {
-		 	"doc-before": () => h(PackageBadge)
+		 	"doc-before": () => h(PackageBadge),
 		});
-	}
+	},
 } satisfies Theme;

docs/.vitepress/theme/style.css

@@ -447,4 +447,13 @@ li > p {
 
 .VPSwitch .check .icon [class^="vpi-"] {
 	color: var(--vp-c-text-2);
+}
+
+.custom-block.note a, .custom-block.note code {
+	color: var(--vp-c-note-3);
+}
+
+.custom-block.note a:hover,
+.custom-block.note a:hover > code {
+	color: var(--vp-c-note-2);
 }

docs/src/public/screenshots/skins/mac.png

@@ -1,5 +1,5 @@
 ---
-outline: 3
+outline: [1, 3]
 description: "A utility class for keeping track of time"
 package: "@prozilla-os/core"
 ---