feat: add icons to the footer

ether-lnk · Apr 29, 2024 · 4d543db · 4d543db
1 parent e906a36
commit 4d543db
Show file tree

Hide file tree

Showing 7 changed files with 34 additions and 26 deletions.
diff --git a/public/fonts/iconfont.ttf b/public/fonts/iconfont.ttf
diff --git a/public/fonts/iconfont.woff b/public/fonts/iconfont.woff
diff --git a/public/fonts/iconfont.woff2 b/public/fonts/iconfont.woff2
diff --git a/src/components/footer/Footer.astro b/src/components/footer/Footer.astro
@@ -3,7 +3,7 @@ import { ThemeSwitch } from './ThemeSwitch'
 import { siteConfig } from '@/config'
 import { getAllPostsWordCount } from '@/utils/content'
 import { RunningDays } from './RunningDays'
-import { Link } from './Link'
+import Link from './Link.astro'
 
 const sinceYear = new Date(siteConfig.startTime).getFullYear()
 const thisYear = new Date().getFullYear()
@@ -24,15 +24,16 @@ const wordCountStr = (wordCount / 1000).toFixed(1) + 'k'
       & Designed by
       <Link href="https://github.com/lxchapu/astro-gyoza">Gyoza</Link>
     </div>
-    <div>
-      <span>
-        &copy;{copyDate}
-        <Link href="/">{siteConfig.author}</Link>.
-      </span>
-      <span class="select-none opacity-50">|</span>
-      <Link href="/rss.xml">RSS</Link>
-      <span class="select-none opacity-50">|</span>
-      <Link href="/sitemap-index.xml">站点地图</Link>
+    <div class="space-x-1">
+      <span>&copy;{copyDate} <Link href="/">{siteConfig.author}</Link>.</span>
+      <Link href="/rss.xml">
+        <i class="iconfont icon-rss"></i>
+        <span>RSS</span>
+      </Link>
+      <Link href="/sitemap-index.xml">
+        <i class="iconfont icon-map"></i>
+        <span>站点地图</span>
+      </Link>
     </div>
     <div>
       <RunningDays client:only="react" />

diff --git a/src/components/footer/Link.astro b/src/components/footer/Link.astro
@@ -0,0 +1,16 @@
+---
+interface Props {
+  href: string
+}
+
+const { href } = Astro.props
+
+const isExternal = href.startsWith('http')
+---
+
+<a
+  class="hover:text-accent/80"
+  href={href}
+  target={isExternal ? '_blank' : undefined}
+  rel={isExternal ? 'noopener noreferrer' : undefined}><slot /></a
+>
diff --git a/src/components/footer/Link.tsx b/src/components/footer/Link.tsx
diff --git a/src/styles/iconfont.css b/src/styles/iconfont.css
@@ -1,9 +1,9 @@
 @font-face {
   font-family: 'iconfont'; /* Project id 4528205 */
   src:
-    url('/fonts/iconfont.woff2?t=1714303009639') format('woff2'),
-    url('/fonts/iconfont.woff?t=1714303009639') format('woff'),
-    url('/fonts/iconfont.ttf?t=1714303009639') format('truetype');
+    url('/fonts/iconfont.woff2?t=1714373993383') format('woff2'),
+    url('/fonts/iconfont.woff?t=1714373993383') format('woff'),
+    url('/fonts/iconfont.ttf?t=1714373993383') format('truetype');
 }
 
 .iconfont {
@@ -13,6 +13,10 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-map:before {
+  content: '\e7fa';
+}
+
 .icon-more:before {
   content: '\e877';
 }