From cd698bfeae2b37f15a230d33bfa6eafa051a7192 Mon Sep 17 00:00:00 2001
From: Bradley Shellnut <bradleyshellnut@protonmail.com>
Date: Wed, 18 Dec 2024 13:51:05 -0800
Subject: [PATCH] Change out to use ExternalLink.

---
 src/lib/components/ExternalLink.svelte        |   7 +-
 src/routes/uses/+page.svelte                  |  15 --
 src/routes/uses/development.svelte            | 196 +++++++++++-------
 src/routes/uses/hardware-accessories.svelte   |  67 ++++--
 .../uses/privacy-hardware-software.svelte     |  11 +-
 5 files changed, 178 insertions(+), 118 deletions(-)

diff --git a/src/lib/components/ExternalLink.svelte b/src/lib/components/ExternalLink.svelte
index 60a2a52..dfbaa21 100644
--- a/src/lib/components/ExternalLink.svelte
+++ b/src/lib/components/ExternalLink.svelte
@@ -16,6 +16,8 @@
 		textLocationClass = "text-left";
 	} else if (textData?.location === "right") {
 		textLocationClass = "text-right";
+	} else {
+		textLocationClass = "text-left";
 	}
 
 	const linkDecoration =
@@ -36,13 +38,13 @@
 		target={linkData?.target ?? "_blank"}
 	>
 		{#if textData?.location === "top" || (textData?.location === "left" && textData?.text)}
-			<span class="link-text">{textData?.text}</span>
+			{textData?.text}
 		{/if}
 		{#if textData?.showIcon}
 			{@render linkIcon?.(iconData ?? {})}
 		{/if}
 		{#if textData?.location === "bottom" || (textData?.location === "right" && textData?.text)}
-			<span class="link-text">{textData?.text}</span>
+			{textData?.text}
 		{/if}
 	</a>
 {/snippet}
@@ -100,6 +102,7 @@
 
 	.text-decoration-underline {
 		text-decoration: underline;
+		text-decoration-color: var(--shellYellow);
 	}
 
 	.show-icon {
diff --git a/src/routes/uses/+page.svelte b/src/routes/uses/+page.svelte
index ad60f25..07933e9 100644
--- a/src/routes/uses/+page.svelte
+++ b/src/routes/uses/+page.svelte
@@ -58,19 +58,4 @@
 	p {
 		margin: 1rem;
 	}
-
-	/* :global(.uses-image) {
-		margin-left: auto;
-		margin-right: auto;
-		aspect-ratio: 4 / 3;
-		max-height: 480px;
-
-		@media (max-width: 800px) {
-			max-height: 350px;
-		}
-
-		@media (max-width: 500px) {
-			max-height: 300px;
-		}
-	} */
 </style>
diff --git a/src/routes/uses/development.svelte b/src/routes/uses/development.svelte
index 6b9cbf6..edecb64 100644
--- a/src/routes/uses/development.svelte
+++ b/src/routes/uses/development.svelte
@@ -7,14 +7,26 @@
 
 	<p>
 		My development setup has been documented here: <ExternalLink
-			linkData={{ href: "https://github.com/BradNut/computer-setup-info/blob/master/linux/Environment-Setup.md", ariaLabel: "Bradley Shellnut Computer Setup" }}
-			textData={{ text: "Computer Setup Info", showIcon: true, location: "left" }} />.
+			linkData={{
+				href: "https://github.com/BradNut/computer-setup-info/blob/master/linux/Environment-Setup.md",
+				ariaLabel: "Bradley Shellnut Computer Setup",
+			}}
+			textData={{
+				text: "Computer Setup Info",
+				showIcon: true,
+				location: "left",
+			}}
+		/>.
 	</p>
 
 	<p>
 		And documentation for my terminal and coding setup can be found here: <ExternalLink
-			linkData="https://github.com/BradNut/dotfiles"
-			textData="Dotfiles">Dotfiles</ExternalLink
+			linkData={{
+				href: "https://github.com/BradNut/dotfiles",
+				ariaLabel: "Dotfiles",
+			}}
+			textData={{ text: "Dotfiles", showIcon: true, location: "left" }}
+		/>
 		>.
 	</p>
 
@@ -22,39 +34,25 @@
 
 	<ul>
 		<li>
-			Linux default terminal running ZSH and <ExternalLink
+			Linux: <ExternalLink
+				linkData={{ href: "https://tabby.sh/", ariaLabel: "Tabby" }}
+				textData={{ text: "Tabby terminal", showIcon: true, location: "left" }}
+			/> running ZSH and <ExternalLink
 				linkData={{ href: "https://starship.rs/", ariaLabel: "Starship" }}
-				textData={{ text: "Starship", showIcon: true, location: "left" }} />
-			>.
+				textData={{ text: "Starship", showIcon: true, location: "left" }}
+			/> as my prompt >.
 		</li>
 		<li>
-			Mac: <ExternalLink linkData={{ href: "https://iterm2.com/", ariaLabel: "iTerm2" }} textData={{ text: "iTerm2", showIcon: true, location: "left" }} />
+			Mac: <ExternalLink
+				linkData={{ href: "https://iterm2.com/", ariaLabel: "iTerm2" }}
+				textData={{ text: "iTerm2", showIcon: true, location: "left" }}
+			/>
 		</li>
 		<li>
 			<ExternalLink
-				linkData="https://github.com/robbyrussell/oh-my-zsh"
-				textData="Oh My Zsh">Oh My Zsh</ExternalLink
-			>
-			<ul>
-				<li>
-					<ExternalLink linkData="https://github.com/agkozak/zsh-z" textData="Z"
-						>Z</ExternalLink
-					>
-				</li>
-				<li>
-					<ExternalLink
-						linkData="https://github.com/zsh-users/zsh-autosuggestions"
-						textData="zsh-autosuggestions">zsh-autosuggestions</ExternalLink
-					>
-				</li>
-				<li>
-					<ExternalLink
-						linkData="https://github.com/zsh-users/zsh-syntax-highlighting"
-						textData="zsh-syntax-highlighting"
-						>zsh-syntax-highlighting</ExternalLink
-					>
-				</li>
-			</ul>
+				linkData={{ href: "https://zimfw.sh/", ariaLabel: "ZimFW" }}
+				textData={{ text: "ZimFW", showIcon: true, location: "left" }}
+			/> as my Zsh framework.
 		</li>
 	</ul>
 
@@ -63,25 +61,33 @@
 	<ul>
 		<li>
 			<ExternalLink
-				linkData="https://docs.brew.sh/Homebrew-on-Linux"
-				textData="Linux Brew">Linux Brew</ExternalLink
-			>
-		</li>
-		<li>
-			<ExternalLink linkData="https://brew.sh/" textData="Homebrew"
-				>Homebrew</ExternalLink
-			>
-		</li>
-		<li>
-			<ExternalLink linkData="https://tldr.sh/" textData="TLDR Man Pages"
-				>TLDR Man Pages</ExternalLink
-			>
+				linkData={{
+					href: "https://docs.brew.sh/Homebrew-on-Linux",
+					ariaLabel: "Linux Brew",
+				}}
+				textData={{ text: "Linux Brew", showIcon: true, location: "left" }}
+			/>
 		</li>
 		<li>
 			<ExternalLink
-				linkData="https://www.npmjs.com/package/trash-cli"
-				textData="Trash-CLI">Trash-CLI</ExternalLink
-			>
+				linkData={{ href: "https://brew.sh/", ariaLabel: "Homebrew" }}
+				textData={{ text: "Homebrew", showIcon: true, location: "left" }}
+			/>
+		</li>
+		<li>
+			<ExternalLink
+				linkData={{ href: "https://tldr.sh/", ariaLabel: "TLDR Man Pages" }}
+				textData={{ text: "TLDR Man Pages", showIcon: true, location: "left" }}
+			/>
+		</li>
+		<li>
+			<ExternalLink
+				linkData={{
+					href: "https://www.npmjs.com/package/trash-cli",
+					ariaLabel: "Trash-CLI",
+				}}
+				textData={{ text: "Trash-CLI", showIcon: true, location: "left" }}
+			/>
 		</li>
 	</ul>
 
@@ -89,45 +95,71 @@
 
 	<ul>
 		<li>
-			<ExternalLink linkData="https://vscodium.com/" textData="VSCodium"
-				>VSCodium</ExternalLink
-			>
+			<ExternalLink
+				linkData={{ href: "https://vscodium.com/", ariaLabel: "VSCodium" }}
+				textData={{ text: "VSCodium", showIcon: true, location: "left" }}
+			/>
 			<ul>
 				<li>
 					My extensions list: <ExternalLink
-						linkData="https://github.com/BradNut/dotfiles/blob/master/vs-code-extensions-i-use.md"
-						textData="VSCode Extensions List"
-						>VSCode Extensions List</ExternalLink
-					>
+						linkData={{
+							href: "https://github.com/BradNut/dotfiles/blob/master/vs-code-extensions-i-use.md",
+							ariaLabel: "VSCode Extensions List",
+						}}
+						textData={{
+							text: "VSCode Extensions List",
+							showIcon: true,
+							location: "left",
+						}}
+					/>
 				</li>
 			</ul>
 		</li>
 		<li>
 			<ExternalLink
-				linkData="https://www.sublimetext.com/3"
-				textData="Sublime Text 3">Sublime Text 3</ExternalLink
-			>
+				linkData={{
+					href: "https://www.sublimetext.com/3",
+					ariaLabel: "Sublime Text 3",
+				}}
+				textData={{ text: "Sublime Text 3", showIcon: true, location: "left" }}
+			/>
 			<ul>
 				<li>
 					My Packages List: <ExternalLink
-						linkData="https://github.com/BradNut/dotfiles/blob/master/sublime-text-extensions-i-use.md"
-						textData="Sublime Text Packages List"
-						>Sublime Text Packages List</ExternalLink
-					>
+						linkData={{
+							href: "https://github.com/BradNut/dotfiles/blob/master/sublime-text-extensions-i-use.md",
+							ariaLabel: "Sublime Text Packages List",
+						}}
+						textData={{
+							text: "Sublime Text Packages List",
+							showIcon: true,
+							location: "left",
+						}}
+					/>
 				</li>
 			</ul>
 		</li>
 		<li>
 			<ExternalLink
-				linkData="https://jetbrains.com/idea/"
-				textData="IntelliJ Ultimate">IntelliJ Ultimate</ExternalLink
-			>
+				linkData={{
+					href: "https://jetbrains.com/idea/",
+					ariaLabel: "IntelliJ IDEA",
+				}}
+				textData={{ text: "IntelliJ IDEA", showIcon: true, location: "left" }}
+			/>
 			<ul>
 				<li>
 					My Plugins List: <ExternalLink
-						linkData="https://github.com/BradNut/dotfiles/blob/master/intellij-plugins.md"
-						textData="IntelliJ Plugins">IntelliJ Plugins</ExternalLink
-					>
+						linkData={{
+							href: "https://github.com/BradNut/dotfiles/blob/master/intellij-plugins.md",
+							ariaLabel: "IntelliJ Plugins",
+						}}
+						textData={{
+							text: "IntelliJ Plugins",
+							showIcon: true,
+							location: "left",
+						}}
+					/>
 				</li>
 			</ul>
 		</li>
@@ -137,9 +169,10 @@
 
 	<ul>
 		<li>
-			<ExternalLink linkData="https://postman.com/" textData="Postman"
-				>Postman</ExternalLink
-			>
+			<ExternalLink
+				linkData={{ href: "https://www.usebruno.com/", ariaLabel: "Bruno" }}
+				textData={{ text: "Bruno", showIcon: true, location: "left" }}
+			/>
 		</li>
 	</ul>
 
@@ -147,15 +180,26 @@
 
 	<ul>
 		<li>
-			<ExternalLink linkData="https://brave.com/" textData="Brave Browser"
-				>Brave Browser</ExternalLink
-			>
+			<ExternalLink
+				linkData={{ href: "https://brave.com/", ariaLabel: "Brave Browser" }}
+				textData={{ text: "Brave Browser", showIcon: true, location: "left" }}
+			/>
 		</li>
 		<li>
 			<ExternalLink
-				linkData="https://www.mozilla.org/en-US/firefox/new/"
-				textData="Firefox">Firefox</ExternalLink
-			>
+				linkData={{
+					href: "https://www.mozilla.org/en-US/firefox/new/",
+					ariaLabel: "Firefox",
+				}}
+				textData={{ text: "Firefox", showIcon: true, location: "left" }}
+			/>
 		</li>
 	</ul>
 </section>
+
+<style land="postcss">
+	ul {
+    list-style-type: square;
+    padding-inline-start: 4rem;
+  }
+</style>
\ No newline at end of file
diff --git a/src/routes/uses/hardware-accessories.svelte b/src/routes/uses/hardware-accessories.svelte
index 05b3d48..601eb15 100644
--- a/src/routes/uses/hardware-accessories.svelte
+++ b/src/routes/uses/hardware-accessories.svelte
@@ -7,40 +7,61 @@
 	<ul>
 		<li>MacBook Pro 15-inch for work.</li>
 		<li>
-			Personal desktop running <a
-				href="https://pop.system76.com/"
-				title="PopOS Linux Distro">PopOS</a
-			>.
+			Personal desktop running <ExternalLink
+				linkData={{
+					href: "https://pop.system76.com/",
+					ariaLabel: "PopOS Linux Distro",
+				}}
+				textData={{ text: "PopOS", showIcon: true, location: "left" }}
+			/>.
 		</li>
 		<li>Dell XPS 13 running PopOS.</li>
 		<li>
-			Phone 📱: Pixel 6 running <a href="https://grapheneos.org/">GrapheneOS</a
-			>.
+			Phone 📱: Pixel 6 running <ExternalLink
+				linkData={{
+					href: "https://grapheneos.org/",
+					ariaLabel: "GrapheneOS",
+				}}
+				textData={{ text: "GrapheneOS", showIcon: true, location: "left" }}
+			/>.
 		</li>
 		<li>
-			Keyboard ⌨️: <a
-				href="https://www.duckychannel.com.tw/en/Ducky-One2-RGB-TKL"
-				title="Ducky One 2 RGB TKL Keyboard">Ducky Keyboard</a
-			>
+			Keyboard ⌨️: <ExternalLink
+				linkData={{
+					href: "https://www.duckychannel.com.tw/en/Ducky-One2-RGB-TKL",
+					ariaLabel: "Ducky One 2 RGB TKL Keyboard"
+				}}
+				textData={{ text: "Ducky One 2 RGB TKL Keyboard", showIcon: true, location: "left" }}
+			/>
 		</li>
 		<li>
-			Mouse 🖱️: <a
-				href="https://www.amazon.com/Logitech-G502-Performance-Gaming-Mouse/dp/B07GBZ4Q68"
-				title="Logitech G502 Gaming Mouse">Logitech G502 Gaming Mouse</a
-			>
+			Mouse 🖱️: <ExternalLink
+				linkData={{
+					href: "https://www.amazon.com/Logitech-G502-Performance-Gaming-Mouse/dp/B07GBZ4Q68",
+					ariaLabel: "Logitech G502 Gaming Mouse"
+				}}
+				textData={{ text: "Logitech G502 Gaming Mouse", showIcon: true, location: "left" }}
+			/>
 		</li>
 		<li>
-			Chair 🪑: <a
-				href="https://secretlabus.myshopify.com/collections/omega-series#omega_2020-stealth"
-				title="Secretlab Omega 2020 Fabric">SecretLab Omega 2020 Fabric</a
-			>
+			Chair 🪑: <ExternalLink
+				linkData={{
+					href: "https://secretlabus.myshopify.com/collections/omega-series#omega_2020-stealth",
+					ariaLabel: "Secretlab Omega 2020 Fabric"
+				}}
+				textData={{ text: "Secretlab Omega 2020 Fabric", showIcon: true, location: "left" }}
+			/>
 		</li>
 		<li>
-			Monitor 🖥️: <a
-				href="https://www.samsung.com/us/computing/monitors/gaming/32--odyssey-g7-gaming-monitor-lc32g75tqsnxza/"
-				title="Samsung Odyssey G7 Gaming Monitor"
-				>Samsung Odyssey G7 Gaming Monitor</a
-			>
+			Monitor 🖥️: <ExternalLink
+				linkData={{ href: "https://www.samsung.com/us/computing/monitors/gaming/32--odyssey-g7-gaming-monitor-lc32g75tqsnxza/", ariaLabel: "Samsung Odyssey G7 Gaming Monitor" }} textData={{ text: "Samsung Odyssey G7 Gaming Monitor", showIcon: true, location: "left" }} />
 		</li>
 	</ul>
 </section>
+
+<style lang="postcss">
+  ul {
+    list-style-type: square;
+    padding-inline-start: 4rem;
+  }
+</style>
diff --git a/src/routes/uses/privacy-hardware-software.svelte b/src/routes/uses/privacy-hardware-software.svelte
index 3009f5d..1fef186 100644
--- a/src/routes/uses/privacy-hardware-software.svelte
+++ b/src/routes/uses/privacy-hardware-software.svelte
@@ -25,7 +25,7 @@
 					href: "https://www.yubico.com/product/yubikey-5c/",
 					ariaLabel: "YubiKey 5C",
 				}}
-				textData={{ text: "YubiKey 5C", showIcon: true }}
+				textData={{ text: "YubiKey 5C", showIcon: true, location: "left" }}
 			/>
 		</li>
 	</ul>
@@ -36,8 +36,15 @@
 		<li>
 			<ExternalLink
 				linkData={{ href: "https://synology.com/", ariaLabel: "Synology NAS" }}
-				textData={{ text: "Synology DS918+", showIcon: true }}
+				textData={{ text: "Synology DS918+", showIcon: true, location: "left" }}
 			/>
 		</li>
 	</ul>
 </section>
+
+<style lang="postcss">
+  ul {
+    list-style-type: square;
+    padding-inline-start: 4rem;
+  }
+</style>
\ No newline at end of file