Merge pull request #33 from PysioHub/main

feat: 添加睡了没检测 后端(pysio2007/Vue-blog-API@19929a5)

package.json

@@ -23,6 +23,7 @@
     "marked": "^14.1.2",
     "moment": "^2.30.1",
     "nodejieba": "^3.4.3",
+    "sanitize-html": "^2.13.1",
     "sass-embedded": "^1.79.4",
     "vue": "^3.5.10",
     "vuepress": "2.0.0-rc.17",

src/.vuepress/client.ts

@@ -3,6 +3,7 @@ import GithubIssues from "./components/GithubIssues.vue";
 import GitHubPRList from './components/GitHubPRList.vue';
 import AsciinemaPlayer from './components/AsciinemaPlayer.vue';
 import Fastfetch from "./components/Fastfetch.vue";
+import OnlineOrDead from "./components/OnlineOrDead.vue";
 
 
 export default defineClientConfig({
@@ -11,5 +12,6 @@ export default defineClientConfig({
     app.component("GithubIssues", GithubIssues);
     app.component('AsciinemaPlayer', AsciinemaPlayer);
     app.component('Fastfetch',Fastfetch);
+    app.component('OnlineOrDead',OnlineOrDead);
   },
 });

src/.vuepress/components/OnlineOrDead.vue

@@ -0,0 +1,83 @@
+<template>
+    <div v-html="sanitizeHtml(htmlContent)"></div>
+  </template>
+
+  <script>
+  import sanitizeHtml from 'sanitize-html'; 
+  
+  export default {
+    data() {
+      return {
+        data: null,
+        htmlContent: '',
+      }
+    },
+    mounted() {
+      this.fetchData();
+    },
+    methods: {
+      fetchData() {
+        fetch('https://blogapi.pysio.online/check')
+          .then(response => {
+            if (!response.ok) {
+              throw new Error('Network response was not ok');
+            }
+            return response.json();
+          })
+          .then(data => {
+            this.data = data;
+            this.renderContent();
+          })
+          .catch(error => {
+            this.renderErrorContent(error.message);
+          });
+      },
+      renderContent() {
+        const containerClass = this.data.alive ? 'tip' : 'warning';
+        const title = this.data.alive ? '好耶!' : 'Oops';
+        const content = this.data.alive 
+          ? '熊猫活着,快去骚扰他w!' 
+          : `这只熊猫睡死了QWQ,死于${this.formatDate(this.data.last_heartbeat)}`;
+  
+        this.htmlContent = this.createHintContainer(containerClass, title, content);
+      },
+      renderErrorContent(errorMessage) {
+        const containerClass = 'caution';
+        const title = 'Error';
+        const content = `获取数据时出错: ${errorMessage}`;
+  
+        this.htmlContent = this.createHintContainer(containerClass, title, content);
+      },
+      createHintContainer(className, title, content) {
+        return `
+          <div class="hint-container ${className}">
+            <p class="hint-container-title">${title}</p>
+            <p>${content}</p>
+          </div>
+        `;
+      },
+      formatDate(timestamp) {
+        const date = new Date(timestamp * 1000);
+        return date.toLocaleString('zh-CN', { 
+          timeZone: 'Asia/Shanghai',
+          year: 'numeric',
+          month: '2-digit',
+          day: '2-digit',
+          hour: '2-digit',
+          minute: '2-digit',
+          second: '2-digit',
+          hour12: false
+        });
+      },
+      sanitizeHtml(html) {
+        return sanitizeHtml(html, {
+          allowedTags: ['div', 'p'],
+          allowedAttributes: {
+            'div': ['class'],
+            'p': ['class']
+          }
+        });
+      }
+    }
+  }
+  </script>

src/intro.md

@@ -3,6 +3,10 @@ title: 关于本站
 icon: fa-regular fa-circle-info
 article: false
 ---
+## 关于这只熊猫活着没
+
+<OnlineOrDead />
+
 ## Server Info
 
 <Fastfetch />

src/posts/daily/PWA.md

@@ -5,3 +5,10 @@ icon: fa-kit fa-pwa fa-xs
 tag:
   - PWA
 ---
+
+<!-- markdownlint-disable MD028 -->
+
+> [!info] 
+> 渐进式网络应用程序（英语：Progressive Web Apps，简称：PWA）是一种普通网页或网站架构起来的网络应用程序，但它可以以传统应用程序或原生移动应用程序形式展示给用户。这种应用程序形态视图将目前最为现代化的浏览器提供的功能与移动设备的体验优势相结合。
+
+<!-- markdownlint-enable MD028 -->

src/posts/develop/OpenMCIM.md

@@ -95,11 +95,11 @@ docker run -d \
 -e CLUSTER_SECRET=${CLUSTER_SECRET} \
 -e CLUSTER_PUBLIC_PORT=${CLUSTER_PORT} \
 -e TZ=Asia/Shanghai \
--v /data/openmcim:/opt/openmcim/cache \
--p ${CLUSTER_PORT}:4000 \
---restart always \
---name openmcim \
-pysio/openmcim
+-v /data/mcim:/opt/mcim \
+-p ${CLUSTER_PORT}:${CLUSTER_PORT} \
+--restart unless-stop \
+--name mcim \
+zerowolf233/mcim
 ```
 
 ### 从源码安装
@@ -128,7 +128,7 @@ node dist/index.js
 
 3. 如果你看到了 `CLUSTER_ID is not set` 的报错, 说明一切正常, 该设置参数了
 
-### 设置参数
+#### 设置参数
 
 在项目根目录创建一个文件, 名为 `.env`