Change out to use ExternalLink.

This commit is contained in:
Bradley Shellnut 2024-12-18 13:51:05 -08:00
parent d6815c3401
commit cd698bfeae
5 changed files with 178 additions and 118 deletions

View file

@ -16,6 +16,8 @@
textLocationClass = "text-left"; textLocationClass = "text-left";
} else if (textData?.location === "right") { } else if (textData?.location === "right") {
textLocationClass = "text-right"; textLocationClass = "text-right";
} else {
textLocationClass = "text-left";
} }
const linkDecoration = const linkDecoration =
@ -36,13 +38,13 @@
target={linkData?.target ?? "_blank"} target={linkData?.target ?? "_blank"}
> >
{#if textData?.location === "top" || (textData?.location === "left" && textData?.text)} {#if textData?.location === "top" || (textData?.location === "left" && textData?.text)}
<span class="link-text">{textData?.text}</span> {textData?.text}
{/if} {/if}
{#if textData?.showIcon} {#if textData?.showIcon}
{@render linkIcon?.(iconData ?? {})} {@render linkIcon?.(iconData ?? {})}
{/if} {/if}
{#if textData?.location === "bottom" || (textData?.location === "right" && textData?.text)} {#if textData?.location === "bottom" || (textData?.location === "right" && textData?.text)}
<span class="link-text">{textData?.text}</span> {textData?.text}
{/if} {/if}
</a> </a>
{/snippet} {/snippet}
@ -100,6 +102,7 @@
.text-decoration-underline { .text-decoration-underline {
text-decoration: underline; text-decoration: underline;
text-decoration-color: var(--shellYellow);
} }
.show-icon { .show-icon {

View file

@ -58,19 +58,4 @@
p { p {
margin: 1rem; 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> </style>

View file

@ -7,14 +7,26 @@
<p> <p>
My development setup has been documented here: <ExternalLink 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" }} linkData={{
textData={{ text: "Computer Setup Info", showIcon: true, location: "left" }} />. 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>
<p> <p>
And documentation for my terminal and coding setup can be found here: <ExternalLink And documentation for my terminal and coding setup can be found here: <ExternalLink
linkData="https://github.com/BradNut/dotfiles" linkData={{
textData="Dotfiles">Dotfiles</ExternalLink href: "https://github.com/BradNut/dotfiles",
ariaLabel: "Dotfiles",
}}
textData={{ text: "Dotfiles", showIcon: true, location: "left" }}
/>
>. >.
</p> </p>
@ -22,39 +34,25 @@
<ul> <ul>
<li> <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" }} 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>
<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>
<li> <li>
<ExternalLink <ExternalLink
linkData="https://github.com/robbyrussell/oh-my-zsh" linkData={{ href: "https://zimfw.sh/", ariaLabel: "ZimFW" }}
textData="Oh My Zsh">Oh My Zsh</ExternalLink textData={{ text: "ZimFW", showIcon: true, location: "left" }}
> /> as my Zsh framework.
<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>
</li> </li>
</ul> </ul>
@ -63,25 +61,33 @@
<ul> <ul>
<li> <li>
<ExternalLink <ExternalLink
linkData="https://docs.brew.sh/Homebrew-on-Linux" linkData={{
textData="Linux Brew">Linux Brew</ExternalLink href: "https://docs.brew.sh/Homebrew-on-Linux",
> ariaLabel: "Linux Brew",
</li> }}
<li> textData={{ text: "Linux Brew", showIcon: true, location: "left" }}
<ExternalLink linkData="https://brew.sh/" textData="Homebrew" />
>Homebrew</ExternalLink
>
</li>
<li>
<ExternalLink linkData="https://tldr.sh/" textData="TLDR Man Pages"
>TLDR Man Pages</ExternalLink
>
</li> </li>
<li> <li>
<ExternalLink <ExternalLink
linkData="https://www.npmjs.com/package/trash-cli" linkData={{ href: "https://brew.sh/", ariaLabel: "Homebrew" }}
textData="Trash-CLI">Trash-CLI</ExternalLink 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> </li>
</ul> </ul>
@ -89,45 +95,71 @@
<ul> <ul>
<li> <li>
<ExternalLink linkData="https://vscodium.com/" textData="VSCodium" <ExternalLink
>VSCodium</ExternalLink linkData={{ href: "https://vscodium.com/", ariaLabel: "VSCodium" }}
> textData={{ text: "VSCodium", showIcon: true, location: "left" }}
/>
<ul> <ul>
<li> <li>
My extensions list: <ExternalLink My extensions list: <ExternalLink
linkData="https://github.com/BradNut/dotfiles/blob/master/vs-code-extensions-i-use.md" linkData={{
textData="VSCode Extensions List" href: "https://github.com/BradNut/dotfiles/blob/master/vs-code-extensions-i-use.md",
>VSCode Extensions List</ExternalLink ariaLabel: "VSCode Extensions List",
> }}
textData={{
text: "VSCode Extensions List",
showIcon: true,
location: "left",
}}
/>
</li> </li>
</ul> </ul>
</li> </li>
<li> <li>
<ExternalLink <ExternalLink
linkData="https://www.sublimetext.com/3" linkData={{
textData="Sublime Text 3">Sublime Text 3</ExternalLink href: "https://www.sublimetext.com/3",
> ariaLabel: "Sublime Text 3",
}}
textData={{ text: "Sublime Text 3", showIcon: true, location: "left" }}
/>
<ul> <ul>
<li> <li>
My Packages List: <ExternalLink My Packages List: <ExternalLink
linkData="https://github.com/BradNut/dotfiles/blob/master/sublime-text-extensions-i-use.md" linkData={{
textData="Sublime Text Packages List" href: "https://github.com/BradNut/dotfiles/blob/master/sublime-text-extensions-i-use.md",
>Sublime Text Packages List</ExternalLink ariaLabel: "Sublime Text Packages List",
> }}
textData={{
text: "Sublime Text Packages List",
showIcon: true,
location: "left",
}}
/>
</li> </li>
</ul> </ul>
</li> </li>
<li> <li>
<ExternalLink <ExternalLink
linkData="https://jetbrains.com/idea/" linkData={{
textData="IntelliJ Ultimate">IntelliJ Ultimate</ExternalLink href: "https://jetbrains.com/idea/",
> ariaLabel: "IntelliJ IDEA",
}}
textData={{ text: "IntelliJ IDEA", showIcon: true, location: "left" }}
/>
<ul> <ul>
<li> <li>
My Plugins List: <ExternalLink My Plugins List: <ExternalLink
linkData="https://github.com/BradNut/dotfiles/blob/master/intellij-plugins.md" linkData={{
textData="IntelliJ Plugins">IntelliJ Plugins</ExternalLink href: "https://github.com/BradNut/dotfiles/blob/master/intellij-plugins.md",
> ariaLabel: "IntelliJ Plugins",
}}
textData={{
text: "IntelliJ Plugins",
showIcon: true,
location: "left",
}}
/>
</li> </li>
</ul> </ul>
</li> </li>
@ -137,9 +169,10 @@
<ul> <ul>
<li> <li>
<ExternalLink linkData="https://postman.com/" textData="Postman" <ExternalLink
>Postman</ExternalLink linkData={{ href: "https://www.usebruno.com/", ariaLabel: "Bruno" }}
> textData={{ text: "Bruno", showIcon: true, location: "left" }}
/>
</li> </li>
</ul> </ul>
@ -147,15 +180,26 @@
<ul> <ul>
<li> <li>
<ExternalLink linkData="https://brave.com/" textData="Brave Browser" <ExternalLink
>Brave Browser</ExternalLink linkData={{ href: "https://brave.com/", ariaLabel: "Brave Browser" }}
> textData={{ text: "Brave Browser", showIcon: true, location: "left" }}
/>
</li> </li>
<li> <li>
<ExternalLink <ExternalLink
linkData="https://www.mozilla.org/en-US/firefox/new/" linkData={{
textData="Firefox">Firefox</ExternalLink href: "https://www.mozilla.org/en-US/firefox/new/",
> ariaLabel: "Firefox",
}}
textData={{ text: "Firefox", showIcon: true, location: "left" }}
/>
</li> </li>
</ul> </ul>
</section> </section>
<style land="postcss">
ul {
list-style-type: square;
padding-inline-start: 4rem;
}
</style>

View file

@ -7,40 +7,61 @@
<ul> <ul>
<li>MacBook Pro 15-inch for work.</li> <li>MacBook Pro 15-inch for work.</li>
<li> <li>
Personal desktop running <a Personal desktop running <ExternalLink
href="https://pop.system76.com/" linkData={{
title="PopOS Linux Distro">PopOS</a href: "https://pop.system76.com/",
>. ariaLabel: "PopOS Linux Distro",
}}
textData={{ text: "PopOS", showIcon: true, location: "left" }}
/>.
</li> </li>
<li>Dell XPS 13 running PopOS.</li> <li>Dell XPS 13 running PopOS.</li>
<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>
<li> <li>
Keyboard ⌨️: <a Keyboard ⌨️: <ExternalLink
href="https://www.duckychannel.com.tw/en/Ducky-One2-RGB-TKL" linkData={{
title="Ducky One 2 RGB TKL Keyboard">Ducky Keyboard</a 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>
<li> <li>
Mouse 🖱️: <a Mouse 🖱️: <ExternalLink
href="https://www.amazon.com/Logitech-G502-Performance-Gaming-Mouse/dp/B07GBZ4Q68" linkData={{
title="Logitech G502 Gaming Mouse">Logitech G502 Gaming Mouse</a 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>
<li> <li>
Chair 🪑: <a Chair 🪑: <ExternalLink
href="https://secretlabus.myshopify.com/collections/omega-series#omega_2020-stealth" linkData={{
title="Secretlab Omega 2020 Fabric">SecretLab Omega 2020 Fabric</a 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>
<li> <li>
Monitor 🖥️: <a Monitor 🖥️: <ExternalLink
href="https://www.samsung.com/us/computing/monitors/gaming/32--odyssey-g7-gaming-monitor-lc32g75tqsnxza/" 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" }} />
title="Samsung Odyssey G7 Gaming Monitor"
>Samsung Odyssey G7 Gaming Monitor</a
>
</li> </li>
</ul> </ul>
</section> </section>
<style lang="postcss">
ul {
list-style-type: square;
padding-inline-start: 4rem;
}
</style>

View file

@ -25,7 +25,7 @@
href: "https://www.yubico.com/product/yubikey-5c/", href: "https://www.yubico.com/product/yubikey-5c/",
ariaLabel: "YubiKey 5C", ariaLabel: "YubiKey 5C",
}} }}
textData={{ text: "YubiKey 5C", showIcon: true }} textData={{ text: "YubiKey 5C", showIcon: true, location: "left" }}
/> />
</li> </li>
</ul> </ul>
@ -36,8 +36,15 @@
<li> <li>
<ExternalLink <ExternalLink
linkData={{ href: "https://synology.com/", ariaLabel: "Synology NAS" }} linkData={{ href: "https://synology.com/", ariaLabel: "Synology NAS" }}
textData={{ text: "Synology DS918+", showIcon: true }} textData={{ text: "Synology DS918+", showIcon: true, location: "left" }}
/> />
</li> </li>
</ul> </ul>
</section> </section>
<style lang="postcss">
ul {
list-style-type: square;
padding-inline-start: 4rem;
}
</style>