Merge pull request #103 from teaxyz/article-links

#101 external links should open the browser
This commit is contained in:
Neil 2022-12-21 13:20:28 +08:00 committed by GitHub
commit 74ffe61951
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 62 additions and 24 deletions

View file

@ -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 />

View file

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

View file

@ -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"
><i class="icon-twitter social-icon mr-3" />Twitter</a
<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"
><i class="icon-discord social-icon mr-3" />Discord</a
<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"
><i class="icon-github social-icon mr-3" />GitHub</a
<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"
><i class="icon-reddit social-icon mr-3" />Reddit</a
<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"
><i class="icon-telegram social-icon mr-3" />Telegram</a
<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/"
>Privacy Policy</a
<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/"
>Terms of Use</a
<a
class="nav-link footer-link small"
href="https://tea.xyz/terms-of-use/"
target="_blank"
rel="noreferrer">Terms of Use</a
>
</li>
</ul>

View file

@ -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">

View file

@ -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 />

View file

@ -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>

View file

@ -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>