Use Awesome font for sidebar symbols

package-lock.json

@@ -8,6 +8,7 @@
 			"name": "webvm",
 			"version": "0.0.1",
 			"devDependencies": {
+				"@fortawesome/fontawesome-free": "^6.6.0",
 				"@oddbird/popover-polyfill": "^0.4.4",
 				"@rollup/plugin-commonjs": "^24.0.0",
 				"@rollup/plugin-node-resolve": "^15.0.0",
@@ -17,6 +18,7 @@
 				"autoprefixer": "^10.4.20",
 				"labs": "git@github.com:leaningtech/labs.git",
 				"postcss": "^8.4.47",
+				"rollup-plugin-copy": "^3.5.0",
 				"rollup-plugin-css-only": "^4.3.0",
 				"rollup-plugin-postcss": "^4.0.2",
 				"rollup-plugin-svelte": "^7.1.2",
@@ -440,6 +442,15 @@
 				"node": ">=12"
 			}
 		},
+		"node_modules/@fortawesome/fontawesome-free": {
+			"version": "6.6.0",
+			"resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-6.6.0.tgz",
+			"integrity": "sha512-60G28ke/sXdtS9KZCpZSHHkCbdsOGEhIUGlwq6yhY74UpTiToIh8np7A8yphhM4BWsvNFtIvLpi4co+h9Mr9Ow==",
+			"dev": true,
+			"engines": {
+				"node": ">=6"
+			}
+		},
 		"node_modules/@isaacs/cliui": {
 			"version": "8.0.2",
 			"resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz",
@@ -1069,6 +1080,40 @@
 			"integrity": "sha512-AYnb1nQyY49te+VRAVgmzfcgjYS91mY5P0TKUDCLEM+gNnA+3T6rWITXRLYCpahpqSQbN5cE+gHpnPyXjHWxcw==",
 			"dev": true
 		},
+		"node_modules/@types/fs-extra": {
+			"version": "8.1.5",
+			"resolved": "https://registry.npmjs.org/@types/fs-extra/-/fs-extra-8.1.5.tgz",
+			"integrity": "sha512-0dzKcwO+S8s2kuF5Z9oUWatQJj5Uq/iqphEtE3GQJVRRYm/tD1LglU2UnXi2A8jLq5umkGouOXOR9y0n613ZwQ==",
+			"dev": true,
+			"dependencies": {
+				"@types/node": "*"
+			}
+		},
+		"node_modules/@types/glob": {
+			"version": "7.2.0",
+			"resolved": "https://registry.npmjs.org/@types/glob/-/glob-7.2.0.tgz",
+			"integrity": "sha512-ZUxbzKl0IfJILTS6t7ip5fQQM/J3TJYubDm3nMbgubNNYS62eXeUpoLUC8/7fJNiFYHTrGPQn7hspDUzIHX3UA==",
+			"dev": true,
+			"dependencies": {
+				"@types/minimatch": "*",
+				"@types/node": "*"
+			}
+		},
+		"node_modules/@types/minimatch": {
+			"version": "5.1.2",
+			"resolved": "https://registry.npmjs.org/@types/minimatch/-/minimatch-5.1.2.tgz",
+			"integrity": "sha512-K0VQKziLUWkVKiRVrx4a40iPaxTUefQmjtkQofBkYRcoaaL/8rhwDWww9qWbrgicNOgnpIsMxyNIUM4+n6dUIA==",
+			"dev": true
+		},
+		"node_modules/@types/node": {
+			"version": "22.7.4",
+			"resolved": "https://registry.npmjs.org/@types/node/-/node-22.7.4.tgz",
+			"integrity": "sha512-y+NPi1rFzDs1NdQHHToqeiX2TIS79SWEAw9GYhkkx8bD0ChpfqC+n2j5OXOCpzfojBEBt6DnEnnG9MY0zk1XLg==",
+			"dev": true,
+			"dependencies": {
+				"undici-types": "~6.19.2"
+			}
+		},
 		"node_modules/@types/resolve": {
 			"version": "1.20.2",
 			"resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.20.2.tgz",
@@ -1148,6 +1193,15 @@
 				"node": ">= 0.4"
 			}
 		},
+		"node_modules/array-union": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz",
+			"integrity": "sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==",
+			"dev": true,
+			"engines": {
+				"node": ">=8"
+			}
+		},
 		"node_modules/autoprefixer": {
 			"version": "10.4.20",
 			"resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.20.tgz",
@@ -1407,6 +1461,12 @@
 			"integrity": "sha512-jeC1axXpnb0/2nn/Y1LPuLdgXBLH7aDcHu4KEKfqw3CUhX7ZpfBSlPKyqXE6btIgEzfWtrX3/tyBCaCvXvMkOw==",
 			"dev": true
 		},
+		"node_modules/colorette": {
+			"version": "1.4.0",
+			"resolved": "https://registry.npmjs.org/colorette/-/colorette-1.4.0.tgz",
+			"integrity": "sha512-Y2oEozpomLn7Q3HFP7dpww7AtMJplbM9lGZP6RDfHqmbeRjiwRg4n6VM6j4KLmRke85uWEI7JqF17f3pqdRA0g==",
+			"dev": true
+		},
 		"node_modules/commander": {
 			"version": "2.20.3",
 			"resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
@@ -1419,6 +1479,12 @@
 			"integrity": "sha512-W9pAhw0ja1Edb5GVdIF1mjZw/ASI0AlShXM83UUGe2DVr5TdAPEA1OA8m/g8zWp9x6On7gqufY+FatDbC3MDQg==",
 			"dev": true
 		},
+		"node_modules/concat-map": {
+			"version": "0.0.1",
+			"resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
+			"integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
+			"dev": true
+		},
 		"node_modules/concat-with-sourcemaps": {
 			"version": "1.1.0",
 			"resolved": "https://registry.npmjs.org/concat-with-sourcemaps/-/concat-with-sourcemaps-1.1.0.tgz",
@@ -1662,6 +1728,18 @@
 			"integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==",
 			"dev": true
 		},
+		"node_modules/dir-glob": {
+			"version": "3.0.1",
+			"resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz",
+			"integrity": "sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==",
+			"dev": true,
+			"dependencies": {
+				"path-type": "^4.0.0"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
 		"node_modules/dlv": {
 			"version": "1.1.3",
 			"resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
@@ -1897,6 +1975,20 @@
 				"url": "https://github.com/sponsors/rawify"
 			}
 		},
+		"node_modules/fs-extra": {
+			"version": "8.1.0",
+			"resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-8.1.0.tgz",
+			"integrity": "sha512-yhlQgA6mnOJUKOsRUFsgJdQCvkKhcz8tlZG5HBQfReYZy46OwLcY+Zia0mtdHsOo9y/hP+CxMN0TU9QxoOtG4g==",
+			"dev": true,
+			"dependencies": {
+				"graceful-fs": "^4.2.0",
+				"jsonfile": "^4.0.0",
+				"universalify": "^0.1.0"
+			},
+			"engines": {
+				"node": ">=6 <7 || >=8"
+			}
+		},
 		"node_modules/fs.realpath": {
 			"version": "1.0.0",
 			"resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
@@ -1973,12 +2065,80 @@
 			"integrity": "sha512-40oNTM9UfG6aBmuKxk/giHn5nQ8RVz/SS4Ir6zgzOv9/qC3kKZ9v4etGTcJbEl/NyVQH7FGU7d+X1egr57Md2Q==",
 			"dev": true
 		},
+		"node_modules/globby": {
+			"version": "10.0.1",
+			"resolved": "https://registry.npmjs.org/globby/-/globby-10.0.1.tgz",
+			"integrity": "sha512-sSs4inE1FB2YQiymcmTv6NWENryABjUNPeWhOvmn4SjtKybglsyPZxFB3U1/+L1bYi0rNZDqCLlHyLYDl1Pq5A==",
+			"dev": true,
+			"dependencies": {
+				"@types/glob": "^7.1.1",
+				"array-union": "^2.1.0",
+				"dir-glob": "^3.0.1",
+				"fast-glob": "^3.0.3",
+				"glob": "^7.1.3",
+				"ignore": "^5.1.1",
+				"merge2": "^1.2.3",
+				"slash": "^3.0.0"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/globby/node_modules/brace-expansion": {
+			"version": "1.1.11",
+			"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
+			"integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+			"dev": true,
+			"dependencies": {
+				"balanced-match": "^1.0.0",
+				"concat-map": "0.0.1"
+			}
+		},
+		"node_modules/globby/node_modules/glob": {
+			"version": "7.2.3",
+			"resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
+			"integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
+			"deprecated": "Glob versions prior to v9 are no longer supported",
+			"dev": true,
+			"dependencies": {
+				"fs.realpath": "^1.0.0",
+				"inflight": "^1.0.4",
+				"inherits": "2",
+				"minimatch": "^3.1.1",
+				"once": "^1.3.0",
+				"path-is-absolute": "^1.0.0"
+			},
+			"engines": {
+				"node": "*"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/isaacs"
+			}
+		},
+		"node_modules/globby/node_modules/minimatch": {
+			"version": "3.1.2",
+			"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
+			"integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+			"dev": true,
+			"dependencies": {
+				"brace-expansion": "^1.1.7"
+			},
+			"engines": {
+				"node": "*"
+			}
+		},
 		"node_modules/globrex": {
 			"version": "0.1.2",
 			"resolved": "https://registry.npmjs.org/globrex/-/globrex-0.1.2.tgz",
 			"integrity": "sha512-uHJgbwAMwNFf5mLst7IWLNg14x1CkeqglJb/K3doi4dw6q2IvAAmM/Y81kevy83wP+Sst+nutFTYOGg3d1lsxg==",
 			"dev": true
 		},
+		"node_modules/graceful-fs": {
+			"version": "4.2.11",
+			"resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
+			"integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
+			"dev": true
+		},
 		"node_modules/has-flag": {
 			"version": "4.0.0",
 			"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
@@ -2018,6 +2178,15 @@
 				"postcss": "^8.1.0"
 			}
 		},
+		"node_modules/ignore": {
+			"version": "5.3.2",
+			"resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
+			"integrity": "sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==",
+			"dev": true,
+			"engines": {
+				"node": ">= 4"
+			}
+		},
 		"node_modules/import-cwd": {
 			"version": "3.0.0",
 			"resolved": "https://registry.npmjs.org/import-cwd/-/import-cwd-3.0.0.tgz",
@@ -2141,6 +2310,15 @@
 				"node": ">=0.12.0"
 			}
 		},
+		"node_modules/is-plain-object": {
+			"version": "3.0.1",
+			"resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-3.0.1.tgz",
+			"integrity": "sha512-Xnpx182SBMrr/aBik8y+GuR4U1L9FqMSojwDQwPMmxyC6bvEqly9UBCxhauBF5vNh2gwWJNX6oDV7O+OM4z34g==",
+			"dev": true,
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
 		"node_modules/is-reference": {
 			"version": "3.0.2",
 			"resolved": "https://registry.npmjs.org/is-reference/-/is-reference-3.0.2.tgz",
@@ -2180,6 +2358,15 @@
 				"jiti": "bin/jiti.js"
 			}
 		},
+		"node_modules/jsonfile": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz",
+			"integrity": "sha512-m6F1R3z8jjlf2imQHS2Qez5sjKWQzbuuhuJ/FKYFRZvPE3PuHcSMVZzfsLhGVOkfd20obL5SWEBew5ShlquNxg==",
+			"dev": true,
+			"optionalDependencies": {
+				"graceful-fs": "^4.1.6"
+			}
+		},
 		"node_modules/kleur": {
 			"version": "4.1.5",
 			"resolved": "https://registry.npmjs.org/kleur/-/kleur-4.1.5.tgz",
@@ -2477,6 +2664,15 @@
 			"integrity": "sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw==",
 			"dev": true
 		},
+		"node_modules/path-is-absolute": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
+			"integrity": "sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==",
+			"dev": true,
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
 		"node_modules/path-key": {
 			"version": "3.1.1",
 			"resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
@@ -2508,6 +2704,15 @@
 				"url": "https://github.com/sponsors/isaacs"
 			}
 		},
+		"node_modules/path-type": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
+			"integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==",
+			"dev": true,
+			"engines": {
+				"node": ">=8"
+			}
+		},
 		"node_modules/periscopic": {
 			"version": "3.1.0",
 			"resolved": "https://registry.npmjs.org/periscopic/-/periscopic-3.1.0.tgz",
@@ -3308,6 +3513,22 @@
 				"fsevents": "~2.3.2"
 			}
 		},
+		"node_modules/rollup-plugin-copy": {
+			"version": "3.5.0",
+			"resolved": "https://registry.npmjs.org/rollup-plugin-copy/-/rollup-plugin-copy-3.5.0.tgz",
+			"integrity": "sha512-wI8D5dvYovRMx/YYKtUNt3Yxaw4ORC9xo6Gt9t22kveWz1enG9QrhVlagzwrxSC455xD1dHMKhIJkbsQ7d48BA==",
+			"dev": true,
+			"dependencies": {
+				"@types/fs-extra": "^8.0.1",
+				"colorette": "^1.1.0",
+				"fs-extra": "^8.1.0",
+				"globby": "10.0.1",
+				"is-plain-object": "^3.0.0"
+			},
+			"engines": {
+				"node": ">=8.3"
+			}
+		},
 		"node_modules/rollup-plugin-css-only": {
 			"version": "4.5.2",
 			"resolved": "https://registry.npmjs.org/rollup-plugin-css-only/-/rollup-plugin-css-only-4.5.2.tgz",
@@ -3533,6 +3754,15 @@
 				"node": ">= 10"
 			}
 		},
+		"node_modules/slash": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
+			"integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==",
+			"dev": true,
+			"engines": {
+				"node": ">=8"
+			}
+		},
 		"node_modules/smob": {
 			"version": "1.5.0",
 			"resolved": "https://registry.npmjs.org/smob/-/smob-1.5.0.tgz",
@@ -4047,6 +4277,21 @@
 			"integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==",
 			"dev": true
 		},
+		"node_modules/undici-types": {
+			"version": "6.19.8",
+			"resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.19.8.tgz",
+			"integrity": "sha512-ve2KP6f/JnbPBFyobGHuerC9g1FYGn/F8n1LWTwNxCEzd6IfqTwUQcNXgEtmmQ6DlRrC1hrSrBnCZPokRrDHjw==",
+			"dev": true
+		},
+		"node_modules/universalify": {
+			"version": "0.1.2",
+			"resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz",
+			"integrity": "sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==",
+			"dev": true,
+			"engines": {
+				"node": ">= 4.0.0"
+			}
+		},
 		"node_modules/update-browserslist-db": {
 			"version": "1.1.1",
 			"resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.1.1.tgz",

package.json

@@ -7,6 +7,7 @@
 		"build": "rollup -c -w"
 	},
 	"devDependencies": {
+		"@fortawesome/fontawesome-free": "^6.6.0",
 		"@oddbird/popover-polyfill": "^0.4.4",
 		"@rollup/plugin-commonjs": "^24.0.0",
 		"@rollup/plugin-node-resolve": "^15.0.0",
@@ -16,6 +17,7 @@
 		"autoprefixer": "^10.4.20",
 		"labs": "git@github.com:leaningtech/labs.git",
 		"postcss": "^8.4.47",
+		"rollup-plugin-copy": "^3.5.0",
 		"rollup-plugin-css-only": "^4.3.0",
 		"rollup-plugin-postcss": "^4.0.2",
 		"rollup-plugin-svelte": "^7.1.2",

rollup.config.js

@@ -1,4 +1,4 @@
-import { spawn } from 'child_process';
+import copy from 'rollup-plugin-copy';
 import svelte from 'rollup-plugin-svelte';
 import postcss from 'rollup-plugin-postcss';
 import commonjs from '@rollup/plugin-commonjs';
@@ -35,6 +35,16 @@ export default {
 			],
 		}),
 
+		// Copy required font files
+		copy({
+			targets: [
+				{
+					src: 'node_modules/@fortawesome/fontawesome-free/webfonts',
+					dest: '.'
+				}
+			]
+		}),
+
 		// If you have external dependencies installed from
 		// npm, you'll most likely need these plugins. In
 		// some cases you'll need additional configuration -

src/Icon.svelte

@@ -15,9 +15,9 @@
 </script>
 
 <div 
-	class="p-2 cursor-pointer text-center text-3xl"
+	class="p-3 cursor-pointer text-center"
 	on:mouseenter={handleMouseover}
 	on:mouseleave={handleMouseout}
->
+	>
-	{icon}
+		<i class='{icon} fa-xl'></i>
 </div>

src/SideBar.svelte

@@ -2,7 +2,10 @@
 	import Icon from './Icon.svelte';
 
 	const icons = [
-		{ icon: '\u{1F6C8}', info: 'Information' }
+		{ icon: 'fas fa-info-circle', info: 'Information' },
+		{ icon: 'fas fa-wifi', info: 'Networking' },
+		{ icon: 'fas fa-microchip', info: 'CPU' },
+		{ icon: 'fas fa-compact-disc', info: 'Disk' }
 	];
 
 	let activeInfo = null;
@@ -26,6 +29,9 @@
 				on:mouseout={hideInfo}
 			/>
 		{/each}
+		<div class="grow"></div>
+		<Icon icon='fab fa-discord' info='Discord' on:mouseover={(e) => showInfo(e.detail)} on:mouseout={hideInfo}/>
+		<Icon icon='fab fa-github' info='GitHub' on:mouseover={(e) => showInfo(e.detail)} on:mouseout={hideInfo}/>
 	</div>
 	<div class="flex flex-col shrink-0 w-52 h-full z-10 p-2 bg-neutral-600 text-gray-100" class:hidden={!activeInfo}>
 		<p>{activeInfo}</p>

src/main.js

@@ -1,4 +1,5 @@
 import './global.css'
+import '@fortawesome/fontawesome-free/css/all.min.css'
 import App from './App.svelte';
 
 const app = new App({