feat: Add Server Info (fastfetch) (#30)

Author: pysio2007

package-lock.json

@@ -16,6 +16,7 @@
     "@vuepress/plugin-feed": "^2.0.0-rc.52",
     "@vuepress/plugin-prismjs": "^2.0.0-rc.52",
     "@vuepress/plugin-pwa": "^2.0.0-rc.52",
+    "ansi-to-html": "^0.7.2",
     "asciinema-player": "^3.8.1",
     "git-describe": "^4.1.1",
     "marked": "^14.1.2",

package.json

@@ -2,12 +2,14 @@ import { defineClientConfig } from "vuepress/client";
 import GithubIssues from "./components/GithubIssues.vue";
 import GitHubPRList from './components/GitHubPRList.vue';
 import AsciinemaPlayer from './components/AsciinemaPlayer.vue';
+import Fastfetch from "./components/Fastfetch.vue";
 
 
 export default defineClientConfig({
   enhance: ({ app, router, siteData }) => {
     app.component('GitHubPRList', GitHubPRList);
     app.component("GithubIssues", GithubIssues);
     app.component('AsciinemaPlayer', AsciinemaPlayer);
+    app.component('Fastfetch',Fastfetch);
   },
 });

src/.vuepress/client.ts

@@ -0,0 +1,56 @@
+<template>
+  <div class="fastfetch-output" v-html="markdownOutput"></div>
+</template>
+
+<script>
+import { ref, onMounted } from 'vue';
+import Convert from 'ansi-to-html';
+import { marked } from 'marked';
+
+export default {
+  name: 'Fastfetch',
+  setup() {
+    const output = ref('');
+    const markdownOutput = ref('');
+    const convert = new Convert();
+
+    const fetchData = async () => {
+      try {
+        const response = await fetch('https://blogapi.pysio.online/fastfetch');
+        const data = await response.json();
+        output.value = data.output;
+        formatOutput();
+      } catch (error) {
+        console.error('Error fetching ', error);
+      }
+    };
+
+    const formatOutput = () => {
+      // Convert ANSI to HTML
+      let html = convert.toHtml(output.value);
+      
+      // Wrap the HTML in a Markdown code block
+      const markdownCode = "```bash\n" + html + "\n```";
+      
+      // Use marked to convert Markdown to HTML
+      markdownOutput.value = marked(markdownCode);
+    };
+
+    onMounted(() => {
+      fetchData();
+    });
+
+    return {
+      markdownOutput
+    };
+  }
+}
+</script>
+
+<style scoped>
+.fastfetch-output {
+  font-family: monospace;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+}
+</style>

src/.vuepress/components/Fastfetch.vue

@@ -3,6 +3,10 @@ title: 关于本站
 icon: fa-regular fa-circle-info
 article: false
 ---
+## Server Info
+
+<Fastfetch />
+
 ## 仓库以及构建状态
 ![Vue-blog](https://socialify.git.ci/pysio2007/Vue-blog/image?description=1&descriptionEditable=Pysio%27s%20Home%20%E4%B8%80%E4%B8%AA%E6%B8%A9%E6%9A%96%E7%9A%84%E5%AE%B6&forks=1&language=1&name=1&owner=1&pattern=Circuit%20Board&pulls=1&stargazers=1&theme=Auto)
 [![Build Docker Image](https://github.com/pysio2007/Vue-blog/actions/workflows/bulid-docker.yml/badge.svg)](https://github.com/pysio2007/Vue-blog/actions/workflows/bulid-docker.yml)