feat(themes/shiro): process reporter feature (#17)

Author: wibus-wee

pages/themes/shiro/_meta.json

@@ -0,0 +1,4 @@
+{
+  "index": "部署主题",
+  "extra": "额外功能"
+}

pages/themes/shiro/extra.mdx

@@ -0,0 +1,133 @@
+# 额外功能
+
+## 我的动态
+
+Shiro 主题中，有一个可以在顶部显示博主当前正在做的事情的功能，这个功能是通过云函数和 ProcessReporterMac 软件实现的。
+
+import { ToGitHub } from '@components/ToGitHub';
+
+<ToGitHub repo="mx-space/ProcessReporterMac" />
+
+import { Callout, Steps } from 'nextra/components'
+
+<Callout type="info">
+目前软件仅有 Mac 版本，如果你有兴趣，可以参照此项目来开发 Windows 版本
+</Callout>
+
+<Steps>
+### 配置云函数
+
+进入后台，点击左侧菜单栏的「其他 -> 配置与云函数」，然后点击新建按钮，在选项卡中填入以下信息：
+
+- 名称：`update`
+- 引用：`ps`
+- 数据类型：`Function`
+- 请求方式：`POST`
+
+这个地方还需要设置一个密钥，在 Secret 中填入 `key`，在 Value 中填入你自己的密钥。
+
+<Callout type="warning">
+这个密钥将用于验证你的软件是否有权限更新博主的动态，所以请务必设置一个复杂的密钥。
+
+**密钥在后面的步骤中还需要用到，所以请务必记住。**
+</Callout>
+
+上方没有提到的选项都不需要填写，然后在右侧的代码编辑器中填入以下代码：
+
+```js
+export default async function handler(ctx: Context) {
+  const { timestamp, process, key, media } = ctx.req.body || {}
+
+  const [processName, mediaInfo] = await Promise.all([
+    ctx.storage.cache.get('ps'),
+    ctx.storage.cache.get('media').then((JSONString) => {
+      if (JSONString) {
+        try {
+          return JSON.parse(JSONString)
+        } catch {
+          return undefined
+        }
+      }
+    }),
+  ])
+
+  if (!key) {
+    return {
+      processName,
+      mediaInfo,
+    }
+  }
+
+  const validKey = (await ctx.secret.key) || 'testing'
+  if (key != validKey)
+    ctx.throws(401, "You haven't permission to update process info")
+  await ctx.storage.cache.set('ps', process, 60)
+  const ts = +new Date()
+
+  if (process !== processName)
+    ctx.broadcast('ps-update', {
+      process,
+      ts,
+    })
+  if (media) {
+    await ctx.storage.cache.set('media', JSON.stringify(media), 10)
+
+    if (mediaInfo.title !== media.title) ctx.broadcast('media-update', media)
+  }
+  return {
+    ok: 1,
+    process,
+    timestamp: +new Date(),
+  }
+}
+```
+
+点击保存按钮，云函数就配置完成了。
+
+### 配置主题配置
+
+继续在「配置与云函数」页面，找到「theme -> shiro」配置，点击编辑，进入编辑页面，在代码中找到 `module`，加入 activity 配置，如下：（高亮部分）
+
+```json {14,15,16,17}
+{
+  "module": {
+      "donate": {
+        "enable": false,
+        "link": " https://afdian.net/@Innei ",
+        "qrcode": [
+          " https://cdn.jsdelivr.net/gh/Innei/img-bed@master/20191211132347.png ",
+          " https://cdn.innei.ren/bed/2023/0424213144.png "
+        ]
+      },
+      "bilibili": {
+        "liveId": 1434499
+      },
+      "activity": {
+        "enable": true,
+        "endpoint": "/fn/ps/update"
+      }
+  }
+}
+```
+
+### 配置软件
+
+前往 GitHub 仓库，下载最新的 [Release](https://github.com/mx-space/ProcessReporterMac/releases) 版本，下载后打开 ProcessReporter.dmg 文件，将软件拖入「应用程序」文件夹中，然后打开软件。
+
+<ToGitHub repo="mx-space/ProcessReporterMac" />
+
+接下来啊你会发现你的系统菜单栏中多了一个图标，点击图标，然后点击「设置」，在弹出的窗口中填入你的信息：
+
+- Endpoint：`{你的API地址}/ps/update` （请将 `{你的API地址}` 替换为你的 API 地址，如：`https://api.example.com/api/v2`）
+- API Key：填入你刚刚在云函数中设置的密钥
+
+如果你希望软件在开机时自动启动，可以勾选「Launch at login」选项。
+
+接着关闭窗口，再次点击菜单栏中的图标，点击「Enable」即可。如果一切正常，刷新一下你的博客你就可以在博客顶部看到你的动态了。
+</Steps>
+
+<style global jsx>{`
+ .nextra-content pre {
+     max-height: 55vh;
+  }
+`}</style>