Merge pull request #103 from teaxyz/article-links

#101 external links should open the browser

modules/gui/src/components/EssentialWorkshops/EssentialWorkshops.svelte

@@ -16,7 +16,7 @@
 
 <PanelHeader title="Essential Workshops" ctaLabel="View all" ctaLink="/" />
 {#if courses.length}
-	<Posts posts={courses} />
+	<Posts posts={courses} linkTarget="_blank" />
 {:else}
 	<section class="h-64 border border-gray bg-black p-4">
 		<Preloader />

modules/gui/src/components/FeaturedCourses/FeaturedCourses.svelte

@@ -23,4 +23,5 @@
 		imageUrl: course.banner_image_url,
 		link: course.link
 	}))}
+	linkTarget="_blank"
 />

modules/gui/src/components/FooterLinks/FooterLinks.svelte

@@ -12,35 +12,55 @@
 					here.
 				</p>
 				<div class="w-3/4">
-					<img src="/static/images/footer-grid-element.svg" />
+					<img src="/static/images/footer-grid-element.svg" alt="grid" />
 				</div>
 			</div>
 
 			<div class="card social-box h-full w-1/4 border-2 border-gray">
 				<ul class="list-group list-group-flush">
 					<div class="border-b border-gray p-3">
-						<a class="list-group-item" role="button" href="https://twitter.com/teaxyz"
+						<a
-							><i class="icon-twitter social-icon mr-3" />Twitter</a
+							class="list-group-item"
+							role="button"
+							href="https://twitter.com/teaxyz"
+							target="_blank"
+							rel="noreferrer"><i class="icon-twitter social-icon mr-3" />Twitter</a
 						>
 					</div>
 					<div class="border-b border-gray p-3">
-						<a class="list-group-item" role="button" href="https://discord.gg/KCZsXfJphn"
+						<a
-							><i class="icon-discord social-icon mr-3" />Discord</a
+							class="list-group-item"
+							role="button"
+							href="https://discord.gg/KCZsXfJphn"
+							target="_blank"
+							rel="noreferrer"><i class="icon-discord social-icon mr-3" />Discord</a
 						>
 					</div>
 					<div class="border-b border-gray p-3">
-						<a class="list-group-item" role="button" href="https://github.com/teaxyz"
+						<a
-							><i class="icon-github social-icon mr-3" />GitHub</a
+							class="list-group-item"
+							role="button"
+							href="https://github.com/teaxyz"
+							target="_blank"
+							rel="noreferrer"><i class="icon-github social-icon mr-3" />GitHub</a
 						>
 					</div>
 					<div class="border-b border-gray p-3">
-						<a class="list-group-item" role="button" href="https://reddit.com/r/teaxyz"
+						<a
-							><i class="icon-reddit social-icon mr-3" />Reddit</a
+							class="list-group-item"
+							role="button"
+							href="https://reddit.com/r/teaxyz"
+							target="_blank"
+							rel="noreferrer"><i class="icon-reddit social-icon mr-3" />Reddit</a
 						>
 					</div>
 					<div class="p-3">
-						<a class="list-group-item" role="button" href="https://t.me/tea_xyz"
+						<a
-							><i class="icon-telegram social-icon mr-3" />Telegram</a
+							class="list-group-item"
+							role="button"
+							href="https://t.me/tea_xyz"
+							target="_blank"
+							rel="noreferrer"><i class="icon-telegram social-icon mr-3" />Telegram</a
 						>
 					</div>
 				</ul>
@@ -52,19 +72,29 @@
 		<div class="flex">
 			<div class="w-1/2 pt-2">
 				<p class="text-xs">
-					©2022 tea inc. You can also share our <a href="https://linktr.ee/teaxyz">Linktree</a>.
+					©2022 tea inc. You can also share our <a
+						href="https://linktr.ee/teaxyz"
+						target="_blank"
+						rel="noreferrer">Linktree</a
+					>.
 				</p>
 			</div>
 			<div class="flex w-1/2 pt-2">
 				<ul class="nav ml-auto flex text-xs">
 					<li class="nav-item mr-3 ">
-						<a class="nav-link footer-link small" href="https://tea.xyz/privacy-policy/"
+						<a
-							>Privacy Policy</a
+							class="nav-link footer-link small"
+							href="https://tea.xyz/privacy-policy/"
+							target="_blank"
+							rel="noreferrer">Privacy Policy</a
 						>
 					</li>
 					<li class="nav-item">
-						<a class="nav-link footer-link small" href="https://tea.xyz/terms-of-use/"
+						<a
-							>Terms of Use</a
+							class="nav-link footer-link small"
+							href="https://tea.xyz/terms-of-use/"
+							target="_blank"
+							rel="noreferrer">Terms of Use</a
 						>
 					</li>
 				</ul>

modules/gui/src/components/NavBar/NavBar.svelte

@@ -41,6 +41,12 @@
 			path: '/packages',
 			active: false,
 			label: 'PACKAGES'
+		},
+		{
+			path: 'https://github.com/teaxyz',
+			active: false,
+			label: 'VIEW ON GITHUB',
+			target: '_blank'
 		}
 	];
 
@@ -83,14 +89,11 @@
 
 	{#each routes as route}
 		<li class={route.active ? 'nav_button active' : 'nav_button'}>
-			<a href={route.path}>
+			<a href={route.path} target={route.target || ''}>
 				<Button class="h-16 pl-4 text-left text-white" active={route.active}>{route.label}</Button>
 			</a>
 		</li>
 	{/each}
-	<li class="nav_button">
-		<Button class="h-16 pl-4 text-left text-white" onClick={openGithub}>VIEW ON GITHUB</Button>
-	</li>
 
 	<footer class="w-full border border-x-0 border-gray">
 		<a href="/profile">

modules/gui/src/components/News/News.svelte

@@ -16,7 +16,7 @@
 
 <PanelHeader title="Open-source News" ctaLabel="Read more articles >" ctaLink="/" />
 {#if news.length}
-	<Posts posts={news} />
+	<Posts posts={news} linkTarget="_blank" />
 {:else}
 	<section class="h-64 border border-gray bg-black p-4">
 		<Preloader />

modules/ui/src/Gallery/Gallery.svelte

@@ -6,6 +6,7 @@
 	import GalleryItem from './GalleryItem.svelte';
 
 	export let title = '';
+	export let linkTarget = '';
 
 	interface GalleryItemShape {
 		imageUrl: string;
@@ -77,7 +78,7 @@
 			<section class="absolute top-0 flex h-full" style={styleFeaturedPackages}>
 				{#each items as item}
 					<div class="h-full" style={`width:${width}px`}>
-						<a href={item.link}>
+						<a href={item.link} target={linkTarget} rel="noopener">
 							<GalleryItem {...item} {width} />
 						</a>
 					</div>

modules/ui/src/Posts/Posts.svelte

@@ -2,6 +2,7 @@
 	import '../app.css';
 	import type { AirtablePost } from '../types';
 
+	export let linkTarget = '';
 	export let posts: AirtablePost[] = [];
 </script>
 
@@ -15,7 +16,9 @@
 				<section class="w-2/3 p-4 font-sono">
 					<h1 class="text-xl text-primary">{article.title}</h1>
 					<p class="my-4 text-sm line-clamp-4">{article.short_description}</p>
-					<a href={article.link} class="text-sm text-primary underline">Read more ...</a>
+					<a href={article.link} target={linkTarget} class="text-sm text-primary underline"
+						>Read more ...</a
+					>
 				</section>
 			</article>
 		</li>