Web Page Updates - Read first line of description before merging

src/lib/components/AppLayout.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { base } from '$app/paths';
+	import { asset, resolve } from '$app/paths';
 
 	let { card, image, category, title, subtitle, author, slideshow, source, filename, download_link, children } = $props();
 	import Carousel from '$lib/components/Carousel.svelte';
@@ -12,7 +12,7 @@
 		<!-- Placeholder Image -->
 		<div class="relative">
 			<div class="flex h-64 w-full items-center justify-center bg-gradient-to-br">
-				<img src="{base}/img/{image}" class="h-48" alt={image} />
+				<img src={asset(`/img/${image}`)} class="h-48" alt={image} />
 			</div>
 
 			<!-- Category Label -->
@@ -78,7 +78,7 @@
 				<!-- Action buttons -->
 				<div class="flex items-center space-x-4">
 					{#if !download_link.includes('http')}
-						<Btn href={base + download_link}>Download</Btn>
+						<Btn href={resolve(download_link)}>Download</Btn>
 					{:else}
 						<!-- Ignore base if link point to another website -->
 						<Btn href={download_link}>Download</Btn>
@@ -97,7 +97,25 @@
 		{@render children()}
 
 		{#if source != null && source != ''}
-			<a class="text-2xl font-bold" href={source}><p>Source code</p></a>
+			{#if source.startsWith('http')}
+				<button
+					type="button"
+					class="cursor-pointer text-2xl font-bold underline"
+					onclick={() => window.open(source, '_blank', 'noopener,noreferrer')}
+				>
+					<p>Source code</p>
+				</button>
+			{:else}
+				<button
+					type="button"
+					class="cursor-pointer text-2xl font-bold underline"
+					onclick={() => {
+						window.location.href = resolve('/') + source.replace(/^\//, '');
+					}}
+				>
+					<p>Source code</p>
+				</button>
+			{/if}
 		{/if}
 		<a class="text-2xl font-bold underline" target="_blank" href="https://github.com/BruceDevices/firmware/edit/WebPage{filename}">
 			<p>Improve this page</p>

src/lib/components/BoardCard.svelte

@@ -1,5 +1,5 @@
 <script>
-	import { base } from '$app/paths';
+	import { resolve } from '$app/paths';
 
 	let { images = [], title = '', description = '', className, children } = $props();
 
@@ -51,7 +51,7 @@
 		<div class="relative mx-auto max-w-2xl">
 			<div class="group relative">
 				<img
-					src={base + images[currentImageIndex]}
+					src={resolve('/') + String(images[currentImageIndex]).replace(/^\//, '')}
 					alt={title}
 					class="h-72 w-full rounded-lg object-cover max-sm:p-5"
 					onmouseenter={pauseInterval}

src/lib/components/Carousel.svelte

@@ -1,5 +1,5 @@
 <script>
-	import { base } from '$app/paths';
+	import { resolve } from '$app/paths';
 
 	let { items = [], autoPlay = false, interval = 3000, showDots = true, showArrows = true } = $props();
 
@@ -72,7 +72,7 @@
 	>
 		{#each items as item, index}
 			<div class="w-full">
-				<img src="{base}/img/{item}" alt={`Slide ${index + 1}`} class="h-auto w-96 object-cover" />
+				<img src={resolve('/') + `img/${item}`} alt={`Slide ${index + 1}`} class="h-auto w-96 object-cover" />
 			</div>
 		{/each}
 	</div>

src/lib/components/NavLink.svelte

@@ -9,8 +9,8 @@
 	{href}
 	{target}
 	class="{variant === 'install'
-		? 'inline-block rounded-lg border-2 border-[#9B51E0] bg-transparent px-6 py-3 font-semibold text-white transition-all duration-300 ease-in-out hover:scale-105 hover:bg-[#9B51E0]'
-		: 'rounded-lg px-4 py-2.5 text-white'} {selected ? 'border-b-2 border-purple-500 text-purple-500' : ''}"
+		? 'inline-block rounded-lg border-2 border-[#9B51E0] bg-transparent px-6 py-3 font-semibold text-white transition-all duration-300 ease-in-out hover:scale-105 hover:bg-[#9B51E0] hover:!text-white'
+		: 'rounded-lg px-2 py-2.5 xl:px-4 text-white border-b-2 border-transparent hover:!border-[#9B51E0] hover:!text-[#9B51E0] transition-colors duration-200'} {selected ? '!border-purple-500 text-purple-500' : ''} whitespace-nowrap"
 >
 	<slot />
 </a>

src/lib/components/SectionBackground.svelte

@@ -1,5 +1,5 @@
 <script>
-	import { base } from '$app/paths';
+	import { asset } from '$app/paths';
 </script>
 
-<img src="{base}/img/purple-aqua.gif" alt="Background GIF" class="absolute top-0 left-0 h-full w-full object-cover brightness-75" />
+<img src={asset('/img/purple-aqua.gif')} alt="Background GIF" class="absolute top-0 left-0 h-full w-full object-cover brightness-75" />

src/lib/store.ts

@@ -3,7 +3,8 @@ export enum Page {
 	Flasher,
 	Donate,
 	MyBruce,
-	AppStore
+	AppStore,
+	Boards
 }
 
 import { writable, get } from 'svelte/store';

src/routes/+layout.svelte

@@ -3,8 +3,7 @@
 	import { current_page, Page } from '$lib/store';
 	import NavLink from '$lib/components/NavLink.svelte';
 	let { children } = $props();
-	import { base } from '$app/paths';
-	import Dropdown from '$lib/components/Dropdown.svelte';
+	import { asset, resolve } from '$app/paths';
 	// Mobile nav
 	let navOpen = $state(false);
 </script>
@@ -41,42 +40,43 @@
 <header class="fixed top-0 left-0 z-[100] w-full bg-[#111] py-3.5">
 	<div class="mx-auto w-11/12 max-w-full">
 		<nav class="flex items-center justify-between">
-			<a href="/" class="flex items-center">
-				<img src="{base}/img/bruce.png" alt="Bruce Logo" class="h-[50px]" />
+			<a href={resolve('/')} class="flex flex-shrink-0 items-center">
+				<img src={asset('/img/bruce.png')} alt="Bruce Logo" class="h-[50px] w-auto" />
 			</a>
 			<button
 				class="inline-block text-white hover:text-purple-500 lg:hidden"
 				onclick={() => (navOpen = true)}
 				style="color:white;"
 				aria-label="Open navigation">☰</button
 			>
-			<div class="hidden items-center gap-5 lg:flex">
-				<NavLink href="/" selected={$current_page == Page.Home}>Home</NavLink>
-				<NavLink href="https://github.com/pr3y/Bruce" target="_blank">GitHub</NavLink>
-				<NavLink href="{base}/flasher" variant="install">Install</NavLink>
+			<div class="hidden items-center gap-2 xl:gap-5 lg:flex">
+				<NavLink href={resolve('/')} selected={$current_page == Page.Home}>Home</NavLink>
+				<NavLink href="https://github.com/BruceDevices/firmware" target="_blank">GitHub</NavLink>
+				<NavLink href={resolve('/flasher')} selected={$current_page == Page.Flasher} variant="install">Install</NavLink>
 				<NavLink href="https://wiki.bruce.computer" target="_blank">Docs</NavLink>
-				<NavLink href="{base}/appstore" selected={$current_page == Page.AppStore}>App Store</NavLink>
-				<NavLink href="{base}/build_theme.html">Theme Builder</NavLink>
-				<NavLink href="{base}/my_bruce" selected={$current_page == Page.MyBruce}>Bruce Lab</NavLink>
-				<NavLink href="{base}/boards">Boards</NavLink>
+
+				<NavLink href={resolve('/appstore')} selected={$current_page == Page.AppStore}>App Store</NavLink>
+				<NavLink href={asset('/build_theme.html')}>Theme Builder</NavLink>
+				<NavLink href={resolve('/my_bruce')} selected={$current_page == Page.MyBruce}>Bruce Lab</NavLink>
+				<NavLink href={resolve('/boards')} selected={$current_page == Page.Boards}>Boards</NavLink>
+				<NavLink href={resolve('/donate')} selected={$current_page == Page.Donate}>Donate</NavLink>
 				<!-- <Dropdown title="Bruce Lab" links={bruce_lab_links}></Dropdown> -->
 				<!-- <NavLink href="/boards">Boards</NavLink>
 				<NavLink href="/community">Community</NavLink> -->
-				<NavLink href="{base}/donate" selected={$current_page == Page.Donate}>Donate</NavLink>
 			</div>
 			{#if navOpen}
 				<div class="fixed top-0 z-[1000] flex h-full w-full flex-col items-center bg-[#111] pt-[60px] transition-[right] duration-300 ease-in-out">
 					<button class="close-btn" onclick={() => (navOpen = false)} aria-label="Close navigation">✖</button>
-					<NavLink href={base} selected={$current_page == Page.Home}>Home</NavLink>
-					<NavLink href="https://github.com/pr3y/Bruce" target="_blank">GitHub</NavLink>
-					<NavLink href="{base}/flasher" variant="install">Install</NavLink>
-					<NavLink href="https://wiki.bruce.computer/" target="_blank">Docs</NavLink>
-					<NavLink href="{base}/boards">Boards</NavLink>
+					<NavLink href={resolve('/')} selected={$current_page == Page.Home}>Home</NavLink>
+					<NavLink href="https://github.com/BruceDevices/firmware" target="_blank">GitHub</NavLink>
+					<NavLink href={resolve('/flasher')} selected={$current_page == Page.Flasher} variant="install">Install</NavLink>
+					<NavLink href="https://wiki.bruce.computer" target="_blank">Docs</NavLink>
+					<NavLink href={resolve('/appstore')} selected={$current_page == Page.AppStore}>App Store</NavLink>
+					<NavLink href={asset('/build_theme.html')}>Theme Builder</NavLink>
+					<NavLink href={resolve('/my_bruce')} selected={$current_page == Page.MyBruce}>Bruce Lab</NavLink>
+					<NavLink href={resolve('/boards')} selected={$current_page == Page.Boards}>Boards</NavLink>
+					<NavLink href={resolve('/donate')} selected={$current_page == Page.Donate}>Donate</NavLink>
 					<!-- <Dropdown title="Bruce Lab"></Dropdown> -->
-					<NavLink href="{base}/store" selected={$current_page == Page.AppStore}>App Store</NavLink>
-					<NavLink href="{base}/build_theme.html">Theme Builder</NavLink>
-					<NavLink href="{base}/my_bruce" selected={$current_page == Page.MyBruce}>Bruce Lab</NavLink>
-					<NavLink href="{base}/donate" selected={$current_page == Page.Donate}>Donate</NavLink>
 				</div>
 			{/if}
 		</nav>
@@ -90,22 +90,22 @@
 	<div class="mx-auto my-0 w-90 max-w-full">
 		<div class="mb-4 flex items-center justify-center gap-5">
 			<a href="https://discord.gg/WJ9XF9czVT" target="_blank" rel="noopener noreferrer" class="inline-block">
-				<img src="{base}/img/discord.svg" alt="Discord" class="h-10 w-10 transition-transform duration-200 ease-in-out hover:scale-110" />
+				<img src={asset('/img/discord.svg')} alt="Discord" class="h-10 w-10 transition-transform duration-200 ease-in-out hover:scale-110" />
 			</a>
 			<a href="https://youtube.com/@Bruce-fw" target="_blank" rel="noopener noreferrer" class="inline-block">
-				<img src="{base}/img/youtube.svg" alt="YouTube" class="h-10 w-10 transition-transform duration-200 ease-in-out hover:scale-110" />
+				<img src={asset('/img/youtube.svg')} alt="YouTube" class="h-10 w-10 transition-transform duration-200 ease-in-out hover:scale-110" />
 			</a>
 			<a href="https://reddit.com/r/brucefw" target="_blank" rel="noopener noreferrer" class="inline-block">
-				<img src="{base}/img/reddit.svg" alt="Reddit" class="h-10 w-10 transition-transform duration-200 ease-in-out hover:scale-110" />
+				<img src={asset('/img/reddit.svg')} alt="Reddit" class="h-10 w-10 transition-transform duration-200 ease-in-out hover:scale-110" />
 			</a>
 			<a href="https://www.instagram.com/bruce_firmware/" target="_blank" rel="noopener noreferrer" class="inline-block">
-				<img src="{base}/img/instagram.svg" alt="Instagram" class="h-10 w-10 transition-transform duration-200 ease-in-out hover:scale-110" />
+				<img src={asset('/img/instagram.svg')} alt="Instagram" class="h-10 w-10 transition-transform duration-200 ease-in-out hover:scale-110" />
 			</a>
 			<a href="mailto:contact@bruce.computer" class="inline-block">
-				<img src="{base}/img/email.svg" alt="Email" class="h-10 w-10 transition-transform duration-200 ease-in-out hover:scale-110" />
+				<img src={asset('/img/email.svg')} alt="Email" class="h-10 w-10 transition-transform duration-200 ease-in-out hover:scale-110" />
 			</a>
 			<a href="https://matrix.to/#/#general:matrix.bruce.computer" target="_blank" rel="noopener noreferrer" class="inline-block">
-				<img src="{base}/img/matrix.svg" alt="Matrix" class="h-10 w-10 transition-transform duration-200 ease-in-out hover:scale-110" />
+				<img src={asset('/img/matrix.svg')} alt="Matrix" class="h-10 w-10 transition-transform duration-200 ease-in-out hover:scale-110" />
 			</a>
 		</div>
 	</div>

src/routes/+page.svelte

@@ -7,21 +7,21 @@
 	import Btn from '$lib/components/Btn.svelte';
 	import CompatibilityTable from '$lib/components/CompatibilityTable.svelte';
 	import SectionBackground from '$lib/components/SectionBackground.svelte';
-	import { base } from '$app/paths';
+	import { asset, resolve } from '$app/paths';
 	import { current_page, Page } from '$lib/store';
 
 	$current_page = Page.Home;
 
 	let activeIndex = $state(0);
 	let slides = [
-		`${base}/img/bruce-pcb.png`,
-		`${base}/img/reaper-pcb2.png`,
-		`${base}/img/cardputer.png`,
-		`${base}/img/core2.png`,
-		`${base}/img/cyd.png`,
-		`${base}/img/lilygo.png`,
-		`${base}/img/t-embed.png`,
-		`${base}/img/m5stick.png`
+		asset('/img/bruce-pcb.png'),
+		asset('/img/reaper-pcb2.png'),
+		asset('/img/cardputer.png'),
+		asset('/img/core2.png'),
+		asset('/img/cyd.png'),
+		asset('/img/lilygo.png'),
+		asset('/img/t-embed.png'),
+		asset('/img/m5stick.png')
 	];
 
 	let interval: number;
@@ -47,15 +47,14 @@
 			<a
 				href="https://github.com/BruceDevices/Firmware"
 				target="_blank"
-				class="inline-blocktransition rounded-lg bg-[#9B51E0] px-6 py-2 text-center text-lg font-bold text-white"
+				class="inline-flex items-center justify-center rounded-lg bg-[#9B51E0] px-6 py-2 text-lg font-bold text-white transition hover:bg-[#7A2FA0]"
 				style="color: white;"
 			>
 				Explore GitHub
 			</a>
 			<a
-				href="/flasher"
-				target="_blank"
-				class="ml-4 inline-block rounded-lg border-2 border-[#9B51E0] px-6 py-2 text-center text-lg text-[#9B51E0] transition"
+				href={resolve('/flasher')}
+				class="ml-4 inline-flex items-center justify-center rounded-lg border-2 border-[#9B51E0] bg-black px-6 py-2 text-lg text-[#9B51E0] transition hover:border-[#7A2FA0] hover:bg-[#7A2FA0] hover:!text-white"
 			>
 				<b>Install Now</b>
 			</a>

src/routes/appstore/+page.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { base } from '$app/paths';
+	import { resolve } from '$app/paths';
 	import { capitalize } from '$lib/helper';
 	import {
 		current_page,
@@ -747,7 +747,7 @@
 	<div class="grid grid-cols-3">
 		{#each applications as element}
 			{@const CardApp = element[1].default}
-			<a href="{base}/appstore/{element[1].metadata.id}">
+			<a href={resolve(`/appstore/${element[1].metadata.id}`)}>
 				<CardApp card href="" />
 			</a>
 		{/each}

src/routes/boards/+page.svelte

@@ -1,10 +1,13 @@
 <script>
+	import { Page, current_page } from '$lib/store';
 	import SectionBackground from '$lib/components/SectionBackground.svelte';
 	import BoardCard from '$lib/components/BoardCard.svelte';
 	import Btn from '$lib/components/Btn.svelte';
 
 	const boardImages = ['/img/bruce-pcb.png', '/img/bruce-pcb2.png'];
 	const reaperImages = ['/img/reaper-pcb.png', '/img/reaper-pcb2.png'];
+
+	$current_page = Page.Boards;
 </script>
 
 <!-- Hero Section -->

src/routes/donate/+page.svelte

@@ -1,6 +1,6 @@
 <script>
 	import Btn from '$lib/components/Btn.svelte';
-	import { base } from '$app/paths';
+	import { asset } from '$app/paths';
 	import { current_page, Page } from '$lib/store';
 	$current_page = Page.Donate;
 </script>
@@ -30,13 +30,13 @@
 			<div class="crypto">
 				<h3 class="mt-8 text-2xl" data-i18n="btc">Bitcoin (BTC)</h3>
 				<a href="bitcoin:bc1ql5uvqda7ndxjkcf7c2kw9vv2rcpmqsjs5xzsq3">
-					<img class="m-2.5 h-38 w-38 rounded-lg bg-white p-2.5" src="{base}/img/btc.png" alt="BTC QR Code" />
+					<img class="m-2.5 h-38 w-38 rounded-lg bg-white p-2.5" src={asset('/img/btc.png')} alt="BTC QR Code" />
 				</a>
 			</div>
 			<div class="crypto">
 				<h3 class="mt-8 text-2xl" data-i18n="xmr">Monero (XMR)</h3>
 				<a href="monero:89GEo1iF4CB8ALkXJgwmUCDrRkYgHnQvZgK23Q2AKBPRdXBMXXzmYQ82sSTzFkKnmePcm85153XwZ7xbukmsG4RY5GyAN9r">
-					<img class="m-2.5 h-38 w-38 rounded-lg bg-white p-2.5" src="{base}/img/xmr.png" alt="XMR QR Code" />
+					<img class="m-2.5 h-38 w-38 rounded-lg bg-white p-2.5" src={asset('/img/xmr.png')} alt="XMR QR Code" />
 				</a>
 			</div>
 		</div>

src/routes/flasher/+page.svelte

@@ -76,7 +76,7 @@
 
 	function getBuildPath(releaseTag, selectedDevice) {
 		return (
-			'https://bruce.iceis.co.uk/service/github/' +
+			'https://dl.bruce.computer/' +
 			releaseTag +
 			'/Bruce-' +
 			encodeURIComponent(selectedDevice) +

src/routes/my_bruce/+page.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { base } from '$app/paths';
+	import { resolve } from '$app/paths';
 	import Btn from '$lib/components/Btn.svelte';
 	import InfoRow from '$lib/components/InfoRow.svelte';
 	import { current_page, Page } from '$lib/store';
@@ -706,14 +706,14 @@
 
 			<div class="flex w-1/2 flex-shrink-0 items-center justify-center">
 				<img
-					src="{base}/img/{img}"
+					src={resolve('/') + `img/${img}`}
 					alt="Bruce device"
 					class="h-auto w-auto max-h-full max-w-full object-contain"
 				/>
 			</div>
 		</div>
 		<div class="mt-10 mb-10">
-			<Btn href="{base}/flasher">Update</Btn>
+			<Btn href={resolve('/flasher')}>Update</Btn>
 			<Btn onclick={factory_reset}>Factory Reset</Btn>
 			<Btn onclick={reboot_bruce}>Reboot</Btn>
 			<Btn onclick={startNavigator}>Navigator</Btn>