feat: add icon for external link

This commit is contained in:
kaivanwong 2024-05-13 11:46:21 +08:00
parent 42220c3360
commit a20d4b4835
3 changed files with 13 additions and 8 deletions

View file

@ -1,21 +1,26 @@
<script lang="ts" setup>
import siteConfig from '@/site-config'
import { getLinkTarget } from '@/utils/link'
import { getLinkTarget, isExternalLink } from '@/utils/link'
</script>
<template>
<footer class="w-full mt-18 pt-6 pb-8 max-w-3xl text-sm flex flex-col gap-4 border-main border-t !border-op-50">
<div v-if="siteConfig.footer.navLinks && siteConfig.footer.navLinks.length > 0" class="flex flex-wrap gap-4">
<template v-for="(link, index) in siteConfig.footer.navLinks" :key="link.text">
<a :aria-label="`${link.text}`" :target="getLinkTarget(link.href)" class="nav-link" :href="link.href">
<a
:aria-label="`${link.text}`" :target="getLinkTarget(link.href)" class="nav-link flex items-center"
:href="link.href"
>
{{ link.text }}
<i v-if="isExternalLink(link.href)" text-sm ml-1 i-carbon-link />
</a>
<span v-if="index < siteConfig.footer.navLinks.length - 1"> / </span>
</template>
</div>
<div class="flex text-dark dark:text-white">
<a nav-link href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">CC BY-NC-SA 4.0</a>
<span op-70>&nbsp;&nbsp;&copy;&nbsp;&nbsp;{{ new Date().getFullYear() }}&nbsp;&nbsp;{{ siteConfig.author }}.</span>
<span op-70>&nbsp;&nbsp;&copy;&nbsp;&nbsp;{{ new Date().getFullYear() }}&nbsp;&nbsp;{{ siteConfig.author
}}.</span>
</div>
</footer>
</template>

View file

@ -98,11 +98,7 @@ export const siteConfig = {
href: '/md-style',
},
{
text: '404 Page',
href: '/404',
},
{
text: 'Astro Page',
text: 'Vitesse theme on Astro',
href: 'https://astro.build/themes/details/vitesse-theme-for-astro/',
},
{

View file

@ -1,3 +1,7 @@
export function getLinkTarget(link: string) {
return link.includes('http') ? '_blank' : '_self'
}
export function isExternalLink(link: string) {
return link.includes('http')
}