Merge pull request #40 from PysioHub/main

feat: 完成火神80HUB

Author: pysio2007

.gitmodules

@@ -0,0 +1,3 @@
+[submodule "Vue-blog-API"]
+	path = Vue-blog-API
+	url = git@github.com:pysio2007/Vue-blog-API.git

Vue-blog-API

@@ -5,6 +5,7 @@ import AsciinemaPlayer from './components/AsciinemaPlayer.vue';
 import Fastfetch from "./components/Fastfetch.vue";
 import OnlineOrDead from "./components/OnlineOrDead.vue";
 import SteamStatus from "./components/SteamStatus.vue";
+import HuoShen80Hub from "./components/HuoShen80Hub.vue";
 
 
 export default defineClientConfig({
@@ -15,5 +16,6 @@ export default defineClientConfig({
     app.component('Fastfetch',Fastfetch);
     app.component('OnlineOrDead',OnlineOrDead);
     app.component("SteamStatus", SteamStatus);
+    app.component("HuoShen80Hub", HuoShen80Hub);
   },
 });

src/.vuepress/client.ts

@@ -1 +1,76 @@
-<!-- 展示Github项目 https://github.com/pysio2007/HuoShen80Hub 中的图片 -->
+<!-- 展示Github项目 https://github.com/pysio2007/HuoShen80Hub 中的图片 -->
+
+<template>
+    <div class="image-gallery">
+      <div v-for="(url, index) in sortedUrls" :key="index">
+        <h3>{{ getFileName(url) }}</h3>
+        <div v-if="info[getFileName(url)]" class="hint-container info">
+          <p class="hint-container-title">相关信息</p>
+          <p>{{ info[getFileName(url)] }}</p>
+        </div>
+        <img :src="url" :alt="getFileName(url)">
+      </div>
+    </div>
+  </template>
+  
+  <script>
+  import { ref, onMounted, computed } from 'vue'
+  
+  export default {
+    name: 'HuoShen80Hub',
+    setup() {
+      const urls = ref([])
+      const info = ref({})
+  
+      const fetchUrls = async () => {
+        try {
+          const response = await fetch('https://cdn.akaere.online/raw.githubusercontent.com/pysio2007/HuoShen80Hub/refs/heads/master/url.csv')
+          const text = await response.text()
+          urls.value = text.split('\n').filter(url => url.trim() !== '')
+        } catch (error) {
+          console.error('Error fetching URLs:', error)
+        }
+      }
+  
+      const fetchInfo = async () => {
+        try {
+          const response = await fetch('https://cdn.akaere.online/raw.githubusercontent.com/pysio2007/HuoShen80Hub/refs/heads/master/info.json')
+          info.value = await response.json()
+        } catch (error) {
+          console.error('Error fetching info:', error)
+        }
+      }
+  
+      const getFileName = (url) => {
+        return url.split('/').pop()
+      }
+  
+      const sortedUrls = computed(() => {
+        return [...urls.value].sort((a, b) => {
+          const fileNameA = getFileName(a).toLowerCase()
+          const fileNameB = getFileName(b).toLowerCase()
+          return fileNameA.localeCompare(fileNameB)
+        })
+      })
+  
+      onMounted(() => {
+        fetchUrls()
+        fetchInfo()
+      })
+  
+      return {
+        sortedUrls,
+        info,
+        getFileName
+      }
+    }
+  }
+  </script>
+  
+  <style scoped>
+  .image-gallery img {
+    max-width: 100%;
+    height: auto;
+  }
+  
+  </style>

src/.vuepress/components/HuoShen80Hub.vue

@@ -0,0 +1,31 @@
+---
+title: 火神80群里的梗图
+date: 2024-10-11
+icon: fa-regular fa-image
+category: daily
+tag:
+  - 火神
+  - 日常
+---
+
+<!-- markdownlint-disable MD028 -->
+
+> [!info] 
+> 这里会随机展示一些火神80群里的梗图
+
+<!-- markdownlint-enable MD028 -->
+
+<!-- more -->
+
+## 图片展示
+
+<HuoShen80Hub />
+
+## 特别鸣谢
+<VPCard
+  title="huoshen80"
+  desc="梗图来源群的群主（x"
+  logo="https://cdn.akaere.online/https://avatars.githubusercontent.com/u/61808984"
+  link="https://github.com/huoshen80"
+  background="rgba(236, 244, 250)"
+/>