feat: add icon for external link
This commit is contained in:
parent
42220c3360
commit
a20d4b4835
3 changed files with 13 additions and 8 deletions
|
@ -1,21 +1,26 @@
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import siteConfig from '@/site-config'
|
import siteConfig from '@/site-config'
|
||||||
import { getLinkTarget } from '@/utils/link'
|
import { getLinkTarget, isExternalLink } from '@/utils/link'
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<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">
|
<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">
|
<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">
|
<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 }}
|
{{ link.text }}
|
||||||
|
<i v-if="isExternalLink(link.href)" text-sm ml-1 i-carbon-link />
|
||||||
</a>
|
</a>
|
||||||
<span v-if="index < siteConfig.footer.navLinks.length - 1"> / </span>
|
<span v-if="index < siteConfig.footer.navLinks.length - 1"> / </span>
|
||||||
</template>
|
</template>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex text-dark dark:text-white">
|
<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>
|
<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> © {{ new Date().getFullYear() }} {{ siteConfig.author }}.</span>
|
<span op-70> © {{ new Date().getFullYear() }} {{ siteConfig.author
|
||||||
|
}}.</span>
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
@ -98,11 +98,7 @@ export const siteConfig = {
|
||||||
href: '/md-style',
|
href: '/md-style',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
text: '404 Page',
|
text: 'Vitesse theme on Astro',
|
||||||
href: '/404',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
text: 'Astro Page',
|
|
||||||
href: 'https://astro.build/themes/details/vitesse-theme-for-astro/',
|
href: 'https://astro.build/themes/details/vitesse-theme-for-astro/',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|
|
@ -1,3 +1,7 @@
|
||||||
export function getLinkTarget(link: string) {
|
export function getLinkTarget(link: string) {
|
||||||
return link.includes('http') ? '_blank' : '_self'
|
return link.includes('http') ? '_blank' : '_self'
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export function isExternalLink(link: string) {
|
||||||
|
return link.includes('http')
|
||||||
|
}
|
||||||
|
|
Loading…
Reference in a new issue