feat: integrate bilibili-bangumi-component (#352)

demo/yun/valaxy.config.ts

@@ -77,7 +77,9 @@ export default defineValaxyConfig<ThemeConfig>({
       indexName: 'valaxy',
     }),
     addonBangumi({
-      uid: 378106,
+      api: 'https://yi_xiao_jiu-bangumi.web.val.run',
+      bilibiliUid: '1579790',
+      bgmEnabled: false,
     }),
     addonComponents(),
     addonWaline({

packages/valaxy-addon-bangumi/README.md

@@ -1,7 +1,51 @@
 # valaxy-addon-bangumi
 
-- [[功能建议] 追番列表](https://github.com/YunYouJun/valaxy/issues/296)
+关联 issue [[功能建议] 追番列表](https://github.com/YunYouJun/valaxy/issues/296)
 
-## Ref
+依赖 [bilibili-bangumi-component](https://github.com/yixiaojiu/bilibili-bangumi-component)，需要部署后端服务，可参考 [bilibili-bangumi 使用](https://github.com/yixiaojiu/bilibili-bangumi-component?tab=readme-ov-file#%E4%BD%BF%E7%94%A8)进行搭建
 
-- [hexo-bilibili-bangumi](https://github.com/HCLonely/hexo-bilibili-bangumi)
+## 如何集成
+
+```bash
+npm i valaxy-addon-bangumi
+```
+
+`valaxy-addon-bangumi` 暴露了 `ValaxyBangumi` 组件
+
+使用示例：
+
+```ts
+// valaxy.config.ts
+import { defineConfig } from 'valaxy'
+import { addonBangumi } from 'valaxy-addon-bangumi'
+
+export default defineConfig({
+  addons: [
+    addonBangumi({
+      api: 'https://yi_xiao_jiu-bangumi.web.val.run',
+      bilibiliUid: '1579790',
+      bgmEnabled: false,
+    }),
+  ]
+})
+```
+
+```md
+---
+title: Bangumi 追番列表
+keywords: Bangumi
+description: Bangumi 追番列表
+---
+
+<ValaxyBangumi />
+```
+
+## API
+
+| 字段           | 描述                                     | 默认值 |
+|:--------------:|:----------------------------------------:|:------:|
+| api                | 后端 api 地址                                     | - |
+| bilibili-uid       | Bilibili 的 uid，在后端中引入 uid 的 env 后可以不设置 | - |
+| bgm-uid            | Bangumi 的 uid，在后端中引入 uid 的 env 后可以不设置  | - |
+| bilibili-enabled   | 是否展示 Bilibili 平台                             | true |
+| bgm-enabled        | 是否展示 Bangumi 平台                              | true|

packages/valaxy-addon-bangumi/client/index.ts

@@ -0,0 +1,24 @@
+import { computed } from 'vue'
+import type { ValaxyAddon } from 'valaxy'
+import { useRuntimeConfig } from 'valaxy'
+import type { BangumiOptions } from '../types'
+
+/**
+ * get addon config
+ */
+export function useAddonBangumi() {
+  const runtimeConfig = useRuntimeConfig()
+  return computed<BangumiOptions>(() => {
+    const options = (runtimeConfig.value.addons['valaxy-addon-bangumi'] as ValaxyAddon<BangumiOptions>).options
+    if (!options) {
+      console.warn('`valaxy-addon-bangumi` options not found')
+      return { api: '' }
+    }
+
+    return {
+      ...options,
+      bilibiliEnabled: options.bilibiliEnabled ?? true,
+      bgmEnabled: options.bgmEnabled ?? true,
+    }
+  })
+}

packages/valaxy-addon-bangumi/components/ValaxyBangumi.vue

@@ -1,5 +1,28 @@
+<script setup lang="ts">
+/**
+ * The ESM module will be mistakenly identified as CJS. Importing like this:
+ * import { defineCustomElements } from "bilibili-bangumi-component/loader";
+ *
+ * reference https://github.com/YunYouJun/valaxy/pull/346
+ */
+// eslint-disable-next-line ts/ban-ts-comment
+// @ts-expect-error
+import { defineCustomElements } from 'bilibili-bangumi-component/dist/cjs/loader.cjs'
+import { useAddonBangumi } from '../client'
+
+defineCustomElements()
+
+const bangumiOptions = useAddonBangumi()
+
+const { api, bgmEnabled, bgmUid, bilibiliEnabled, bilibiliUid } = bangumiOptions.value
+</script>
+
 <template>
-  <div>
-    Bangumi
-  </div>
+  <bilibili-bangumi
+    :api="api"
+    :bgm-enabled="bgmEnabled"
+    :bgm-uid="bgmUid"
+    :bilibili-enabled="bilibiliEnabled"
+    :bilibili-uid="bilibiliUid"
+  />
 </template>

packages/valaxy-addon-bangumi/node/index.ts

@@ -1,17 +1,9 @@
 import { defineValaxyAddon } from 'valaxy'
-import consola from 'consola'
 import pkg from '../package.json'
-
 import type { BangumiOptions } from '../types'
 
 export const addonBangumi = defineValaxyAddon<BangumiOptions>(options => ({
   name: pkg.name,
   enable: true,
   options,
-
-  setup(valaxy) {
-    valaxy.hook('build:before', () => {
-      consola.info('[valaxy-addon-bangumi] build:before')
-    })
-  },
 }))

packages/valaxy-addon-bangumi/package.json

@@ -15,6 +15,6 @@
     "valaxy": "latest"
   },
   "dependencies": {
-    "bangumi-api": "^0.0.1"
+    "bilibili-bangumi-component": "^0.1.2"
   }
 }

packages/valaxy-addon-bangumi/types/index.ts

@@ -0,0 +1,28 @@
+export interface BangumiOptions {
+  /**
+   * 后端 api 地址
+   */
+  api: string
+
+  /**
+   * Bilibili 的 uid，在后端中引入 uid 的 env 后可以不设置
+   */
+  bilibiliUid?: string
+
+  /**
+   * Bangumi 的 uid，在后端中引入 uid 的 env 后可以不设置
+   */
+  bgmUid?: string
+
+  /**
+   * 是否展示 Bilibili 平台
+   * @default true
+   */
+  bilibiliEnabled?: boolean
+
+  /**
+   * 是否展示 Bangumi 平台
+   * @default true
+   */
+  bgmEnabled?: boolean
+}

packages/valaxy-addon-bangumi/valaxy.config.ts

@@ -0,0 +1,11 @@
+import { defineValaxyConfig } from 'valaxy'
+
+export default defineValaxyConfig({
+  vue: {
+    isCustomElement: [
+      (tag) => {
+        return tag === 'bilibili-bangumi'
+      },
+    ],
+  },
+})