feat: add plausible

.env

@@ -4,6 +4,9 @@
 # 若干秒去回报一次心跳状态
 VITE_HEARTBEAT_PERIOD=15
 
+# Plausible
+VITE_PLAUSIBLE_SRC=https://plausible.io/js/script.js
+
 # 联系我
 VITE_CONTACT_EMAIL=tsuiyenche@outlook.com
 VITE_CONTACT_FEISHU=https://www.feishu.cn/invitation/page/add_contact/?token=affgb85a-37d6-470f-8e50-42dc6de3f57c

.env.template

@@ -2,11 +2,15 @@
 # 请新建一个 .env.local 文件，配置以下参数
 
 VITE_API_URL=你的后端应用 https 协议地址
-VITE_WEBSOCKET_URL==你的后端应用 wss 协议地址
+VITE_WEBSOCKET_URL=你的后端应用 wss 协议地址
 
 # 若干秒去回报一次心跳状态（选填，若不填请整行移除）
 VITE_HEARTBEAT_PERIOD=15
 
+# Plausible
+VITE_PLAUSIBLE_DOMAIN=
+VITE_PLAUSIBLE_SRC=https://plausible.io/js/script.js
+
 # 联系我（选填，若不填请整行移除）
 VITE_CONTACT_EMAIL=你的邮箱
 VITE_CONTACT_FEISHU=你的飞书连接

package.json

@@ -1,6 +1,6 @@
 {
   "name": "podcast-together",
-  "version": "0.9.3",
+  "version": "0.9.4",
   "description": "一个基于 vite + vue + vue-router + ts + laf 的全栈项目，让你跟好友一起实时在线听播客！",
   "type": "module",
   "scripts": {

src/hooks/useApp.ts

@@ -1,9 +1,42 @@
 import VConsole from 'vconsole';
 import util from "../utils/util";
 
-export const useApp = () => {
+export function useApp() {
   const _env = util.getEnv()
   if(_env.DEV) {
     new VConsole()
   }
+
+  const plausibleSrc = _env.PLAUSIBLE_SRC
+  const plausibleDomain = _env.PLAUSIBLE_DOMAIN
+  if(plausibleSrc && plausibleDomain) {
+    loadScript(plausibleSrc, [{ key: "data-domain", val: plausibleDomain }])
+  }
+}
+
+
+interface AttrAtom {
+  key: string
+  val: string
+}
+
+function loadScript(
+  src: string,
+  attrs: AttrAtom[] = [],
+) {
+
+  const scriptEl = document.createElement('script')
+  scriptEl.type = "text/javascript"
+  scriptEl.src = src
+
+  for(let i=0; i<attrs.length; i++) {
+    const v = attrs[i]
+    scriptEl.setAttribute(v.key, v.val)
+  }
+  scriptEl.defer = true
+
+  const headEl = document.querySelector("head")
+  if(!headEl) return
+
+  headEl.appendChild(scriptEl)
 }

src/type/index.ts

@@ -67,4 +67,6 @@ export interface EnvType {
   THIRD_PARTY_SETTING_URL?: string
   CONTACT_EMAIL?: string
   CONTACT_FEISHU?: string
+  PLAUSIBLE_DOMAIN?: string
+  PLAUSIBLE_SRC?: string
 }

src/utils/util.ts

@@ -49,14 +49,19 @@ const getEnv = (): EnvType => {
   const THIRD_PARTY_SETTING_URL = import.meta.env.VITE_THIRD_PARTY_SETTING_URL
   const CONTACT_EMAIL = import.meta.env.VITE_CONTACT_EMAIL
   const CONTACT_FEISHU = import.meta.env.VITE_CONTACT_FEISHU
+  const PLAUSIBLE_SRC = import.meta.env.VITE_PLAUSIBLE_SRC
+  const PLAUSIBLE_DOMAIN = import.meta.env.VITE_PLAUSIBLE_DOMAIN
+
   return {
     DEV,
     WEBSOCKET_URL,
     API_URL,
     HEARTBEAT_PERIOD: Number(HEARTBEAT_PERIOD),
     THIRD_PARTY_SETTING_URL,
     CONTACT_EMAIL,
-    CONTACT_FEISHU
+    CONTACT_FEISHU,
+    PLAUSIBLE_SRC,
+    PLAUSIBLE_DOMAIN,
   }
 }