swap nav cta to live dashboard

Author: atharvas

src/components/layout/Navbar.svelte

@@ -48,10 +48,13 @@
 		{ name: "Overview", href: "/" },
 		{ name: "Leaderboard", href: "/leaderboard/" },
 		{ name: "Documentation", href: "/docs/" },
-		{ name: "Blog", href: "/blog/" }
 	];
 
-	const ctaLink = { name: "Browse Workloads", href: "/explorer/" };
+	const ctaLink = {
+		name: "Live Dashboard",
+		href: "https://data.formulacode.org/",
+		external: true,
+	};
 </script>
 
 <svelte:window bind:innerWidth />
@@ -82,7 +85,10 @@
 			<a
 				href={ctaLink.href}
 				class="nav-cta"
-				class:active={$page.url.pathname.startsWith(ctaLink.href)}
+				class:active={!ctaLink.external &&
+					$page.url.pathname.startsWith(ctaLink.href)}
+				target={ctaLink.external ? "_blank" : undefined}
+				rel={ctaLink.external ? "noopener noreferrer" : undefined}
 			>
 				{ctaLink.name}
 			</a>
@@ -116,6 +122,8 @@
 			<a
 				href={ctaLink.href}
 				class="cta"
+				target={ctaLink.external ? "_blank" : undefined}
+				rel={ctaLink.external ? "noopener noreferrer" : undefined}
 				on:click={toggleMenu}
 			>
 				{ctaLink.name}

src/components/layout/OverviewHeader.svelte

@@ -210,13 +210,9 @@
 		</div>
 
 		<div class="hero-ctas hero-ctas-wide">
-			<a class="btn btn-primary btn-wide" href="/explorer/">
-				<span class="cta-mark">→</span>
-				Browse Workloads
-			</a>
 			{#if dashboardAvailable}
 				<a
-					class="btn btn-primary-blue-dotted btn-wide"
+					class="btn btn-primary btn-wide"
 					href={liveDashboard.href}
 					target="_blank"
 					rel="noopener noreferrer"
@@ -233,7 +229,7 @@
 				</a>
 			{:else}
 				<span
-					class="btn btn-primary-blue-dotted btn-wide is-disabled"
+					class="btn btn-primary btn-wide is-disabled"
 					aria-disabled="true"
 					title="Dashboard is unreachable from your network"
 				>
@@ -247,6 +243,10 @@
 					{liveDashboard.label} (offline)
 				</span>
 			{/if}
+			<a class="btn btn-primary-blue-dotted btn-wide" href="/explorer/">
+				<span class="cta-mark">→</span>
+				Browse Workloads
+			</a>
 		</div>
 
 		<div class="hero-ctas">