refactor: extract banners (#74)

Author: xiaowangxiaowang256256

src/components/banner.vue

@@ -1,48 +1,18 @@
 <script setup lang="ts">
 import { Menu } from 'floating-vue'
+import { banners } from '../utils/banner'
 import 'floating-vue/dist/style.css'
 </script>
 
 <template>
   <div flex="~ row gap-2 wrap" justify-center p2>
-    <a target="_blank" href="https://github.com/opensource-f2f">
-      <img
-        alt="GitHub Org's stars"
-        src="https://img.shields.io/github/stars/opensource-f2f?style=social"
-      />
-    </a>
-    <a target="_blank" href="https://twitter.com/osf2f">
-      <img
-        alt="Twitter followers"
-        src="https://img.shields.io/twitter/follow/osf2f?style=social"
-      />
-    </a>
-    <a
-      target="_blank"
-      href="https://www.youtube.com/channel/UCV7Ibg1k_aMSEcDFgJvuvdg"
-    >
-      <img
-        alt="YouTube subscribers"
-        src="https://img.shields.io/youtube/channel/subscribers/UCV7Ibg1k_aMSEcDFgJvuvdg?style=social"
-      />
-    </a>
-    <a target="_blank" href="https://feeds.osf2f.net/osf2f.xml">
-      <img
-        alt="RSS address"
-        src="https://img.shields.io/badge/rss-F88900?style=flat&logo=rss&logoColor=white"
-      />
-    </a>
     <a
+      v-for="(item, key) in banners"
+      :key="key"
       target="_blank"
-      href="https://open.spotify.com/show/48Yeu1L5pTluk1AVc3ShU6"
+      :href="item.href"
     >
-      <img
-        alt="Listen on Spotify"
-        src="https://img.shields.io/badge/spotify-1DB954?style=flat&logo=spotify&logoColor=white"
-      />
-    </a>
-    <a target="_blank" href="https://music.163.com/#/djradio?id=1001312291">
-      <img h-20px alt="NetEase Music" src="/static/netease-music.svg" />
+      <img :alt="item.alt" :src="item.src" h-20px />
     </a>
 
     <Menu>

src/utils/banner.ts

@@ -0,0 +1,38 @@
+export interface BannerItem {
+  alt: string
+  href: string
+  src: string
+}
+
+export const banners: BannerItem[] = [
+  {
+    alt: "GitHub Org's stars",
+    href: 'https://github.com/opensource-f2f',
+    src: 'https://img.shields.io/github/stars/opensource-f2f?style=social',
+  },
+  {
+    alt: 'Twitter followers',
+    href: 'https://twitter.com/osf2f',
+    src: 'https://img.shields.io/twitter/follow/osf2f?style=social',
+  },
+  {
+    alt: 'YouTube subscribers',
+    href: 'https://www.youtube.com/channel/UCV7Ibg1k_aMSEcDFgJvuvdg',
+    src: 'https://img.shields.io/youtube/channel/subscribers/UCV7Ibg1k_aMSEcDFgJvuvdg?style=social',
+  },
+  {
+    alt: 'RSS address',
+    href: 'https://feeds.osf2f.net/osf2f.xml',
+    src: 'https://img.shields.io/badge/rss-F88900?style=flat&logo=rss&logoColor=white',
+  },
+  {
+    alt: 'Listen on Spotify',
+    href: 'https://open.spotify.com/show/48Yeu1L5pTluk1AVc3ShU6',
+    src: 'https://img.shields.io/badge/spotify-1DB954?style=flat&logo=spotify&logoColor=white',
+  },
+  {
+    alt: 'NetEase Music',
+    href: 'https://music.163.com/#/djradio?id=1001312291',
+    src: '/static/netease-music.svg',
+  },
+]