feat: 授权码模式的分享支持图片

README.md

@@ -10,7 +10,9 @@ Based on the localization concept of siyuan-note , this plugin is natively share
 
 The core idea of this plugin is: `Everything is a Page` . You can set a page to be the home page.
 
-> Important: Version 1.8.0+ unifies the sharing logic in public sharing and authorization code mode, so you need to initialize the sharing type to avoid the old sharing link access exception, you only need to open the sharing pop-up window once, and it will be automatically initialized after opening.
+> Important:
+> 1. Version 1.8.0+ unifies the sharing logic in public sharing and authorization code mode, so you need to initialize the sharing type to avoid the old sharing link access exception, you only need to open the sharing pop-up window once, and it will be automatically initialized after opening.
+> 2. Sharing in 1.8.0+ authorization code mode can also support image display, go and try it 😄
 
 [docs](https://blog.terwer.space/s/20230621001422-xsimx5v)
 
@@ -34,6 +36,8 @@ The core idea of this plugin is: `Everything is a Page` . You can set a page to
 - [X] Support for custom domain names
 - [X] Support for internal and external links
 - [X] Support task list
+- [X] Support enabling sharing under authorization code (experimental)
+- [X] Unordered list style adaptation
 - [ ] Bulk management of shared pages
 - [ ] Support single page setting sharing password
 - [ ] Integrate popular topics that are currently available
@@ -49,8 +53,6 @@ The core idea of this plugin is: `Everything is a Page` . You can set a page to
 - [ ] plantuml chart support
 - [ ] echats chart support
 - [ ] Support svg with svOrigin, e.g. '<use xlink:href="#iconMore'>'</use>
-- [X] Support enabling sharing under authorization code (experimental)
-- [X] Unordered list style adaptation
 
 ## Changelog
 

README_zh_CN.md

@@ -10,7 +10,9 @@
 
 本插件的核心理念是：`一切皆页面` 。您可以设置某个页面为主页。
 
-> 重要提示：1.8.0+ 版本对公共分享和授权码模式下的分享逻辑进行了统一处理，因此需要初始化分享类型，避免旧的分享链接访问异常，您只需要打开一次分享弹窗即可，打开之后会自动初始化。
+> 重要提示：
+> 1. 1.8.0+ 版本对公共分享和授权码模式下的分享逻辑进行了统一处理，因此需要初始化分享类型，避免旧的分享链接访问异常，您只需要打开一次分享弹窗即可，打开之后会自动初始化。
+> 2. 1.8.0+ 授权码模式下的分享也能支持图片显示啦，快去试试吧😄
 
 [帮助文档](https://blog.terwer.space/s/20230621001422-xsimx5v)
 
@@ -26,14 +28,16 @@
   - [入门级]思源笔记插件：零配置，开箱即用，本地SPA应用，直接访问思源本体，因此速度极快，但是SEO不太友好
   - [高手级]docker自部署：需要自己购买服务器，SSR服务端渲染，SEO友好，速度快
   - [白嫖级]Vercel托管：需要自己购买域名，否则可能无法访问，成本低，速度适中
-- **分享模式（实验性）**：默认支持公共笔记分享，开启授权码之后可支持有限的分享功能。
+- **分享模式**：默认支持公共笔记分享，开启授权码之后可支持有限的分享功能。
 
 ## TODO
 
 - [X] 支持替换图片链接
 - [X] 支持自定义域名
 - [X] 支持内部链接和外部链接
 - [X] 支持任务列表
+- [X] 支持开启授权码下的分享
+- [X] 无序列表样式适配
 - [ ] 已分享页面的批量管理
 - [ ] 支持单页面设置分享密码
 - [ ] 集成目前已有的热门主题
@@ -49,8 +53,6 @@
 - [ ] plantuml 图表支持
 - [ ] echats 图表支持
 - [ ] 支持思源自带的svg，例如 `<use xlink:href="#iconMore"></use>`
-- [X] 支持开启授权码下的分享
-- [X] 无序列表样式适配
 
 ## 更新历史
 

components/default/Detail.vue

@@ -47,6 +47,7 @@ const props = defineProps({
 })
 
 const { t } = useI18n()
+const route = useRoute()
 const { getFirstImageSrc } = useServerAssets()
 const { currentPost, setCurrentPost } = usePost()
 await setCurrentPost(props.pageId)
@@ -57,6 +58,7 @@ const formData = reactive({
   isExpires: false,
 })
 
+const id = props.pageId ?? ((route.params.id ?? "") as string)
 const attrs = JsonUtil.safeParse<any>(currentPost.post?.attrs ?? "{}", {})
 formData.shareEnabled = attrs["custom-publish-status"] === "publish" || attrs["custom-publish-status"] === "preview"
 formData.isExpires = checkExpires(attrs)
@@ -107,12 +109,16 @@ const VNode = () =>
         </div>
       </div>
       <div
+        v-highlight
+        v-beauty
+        v-domparser
         class="protyle-wysiwyg protyle-wysiwyg--attr"
         spellcheck="false"
         contenteditable="false"
         data-doc-type="NodeDocument"
+        :data-page-id="id"
       >
-        <VNode v-highlight v-beauty v-domparser />
+        <VNode />
       </div>
     </div>
   </div>

components/static/Detail.vue

@@ -116,15 +116,19 @@ const VNode = () =>
         </div>
       </div>
       <div
+        v-highlight
+        v-sbeauty
+        v-sdomparser
         class="protyle-wysiwyg protyle-wysiwyg--attr"
         spellcheck="false"
         contenteditable="false"
         data-doc-type="NodeDocument"
+        :data-page-id="id"
       >
-        <VNode v-highlight v-sbeauty v-sdomparser />
+        <VNode />
       </div>
     </div>
   </div>
 </template>
 
-<style scoped></style>
+<style scoped></style>

composables/useStaticShare.ts

@@ -26,16 +26,23 @@
 import { useSiyuanApi } from "~/composables/api/useSiyuanApi"
 import { createAppLogger } from "~/common/appLogger"
 import { Post } from "zhi-blog-api"
+import { useStaticClientAssets } from "~/plugins/renderer/useStaticClientAssets"
 
 /**
  * 静态分析相关处理（开启授权码模式）
  */
 export const useStaticShare = () => {
   const logger = createAppLogger("use-static-share")
   const { blogApi, kernelApi } = useSiyuanApi()
+  const { downloadAssetsToPublic } = useStaticClientAssets()
 
   const updateSharePage = async (pageId: string, post: Post) => {
     const shareJsonFile = `/data/public/siyuan-blog/${pageId}.json`
+    const pubicAssetsFolder = `/data/public/siyuan-blog/${pageId}`
+
+    // 保存图片附件
+    await downloadAssetsToPublic(post.editorDom, pubicAssetsFolder)
+    logger.info("assets downloaded success")
 
     // 只暴露有限的属性
     const sPost = new Post()
@@ -44,8 +51,22 @@ export const useStaticShare = () => {
     sPost.editorDom = post.editorDom
     const sJson = JSON.stringify(sPost) ?? "{}"
     await kernelApi.saveTextData(shareJsonFile, sJson)
+    logger.info("static share success")
   }
 
+  const removeSharePage = async (pageId: string) => {
+    const shareJsonFile = `/data/public/siyuan-blog/${pageId}.json`
+    const pubicAssetsFolder = `/data/public/siyuan-blog/assets/${pageId}`
+
+    // 移除文档信息
+    await kernelApi.removeFile(shareJsonFile)
+
+    // 移除附件信息
+    await kernelApi.removeFile(pubicAssetsFolder)
+    logger.info("static share data removed success")
+  }
+  // ===========================================================================================
+
   /**
    * 打开静态分享
    *
@@ -72,8 +93,7 @@ export const useStaticShare = () => {
    * @param {string} pageId - 页面ID
    */
   const closeStaticShare = async (pageId: string) => {
-    const shareJsonFile = `/data/public/siyuan-blog/${pageId}.json`
-    await kernelApi.removeFile(shareJsonFile)
+    await removeSharePage(pageId)
   }
 
   return { openStaticShare, closeStaticShare, updateStaticShare }

nuxt.config.ts

@@ -9,7 +9,7 @@ const generateDynamicV = () => {
 }
 
 const isDev = process.env.NODE_ENV === "development"
-const appBase = "/plugins/siyuan-blog/"
+const appBase = "/"
 const staticV = generateDynamicV()
 
 // https://nuxt.com/docs/api/configuration/nuxt-config
@@ -28,14 +28,7 @@ export default defineNuxtConfig({
   },
 
   // build modules
-  modules: [
-    "@vueuse/nuxt",
-    "@nuxtjs/i18n-edge",
-    "@element-plus/nuxt",
-    "@nuxtjs/color-mode",
-    "@pinia/nuxt",
-    "@nuxt/image",
-  ],
+  modules: ["@vueuse/nuxt", "@nuxtjs/i18n", "@element-plus/nuxt", "@nuxtjs/color-mode", "@pinia/nuxt", "@nuxt/image"],
 
   // vueuse
   vueuse: {
@@ -58,7 +51,7 @@ export default defineNuxtConfig({
     define: {
       "process.env.DEV_MODE": `"${isDev}"`,
       "process.env.APP_BASE": `"${appBase}"`,
-      "process.env.SSR": `"false"`,
+      "process.env.SSR": `"true"`,
     },
     plugins: [],
   },
@@ -69,14 +62,6 @@ export default defineNuxtConfig({
     themes: ["dark"],
   },
 
-  // https://nuxt.com/docs/guide/going-further/custom-routing#hash-mode-spa
-  ssr: false,
-  router: {
-    options: {
-      hashMode: true,
-    },
-  },
-
   css: ["~/assets/siyuan/style.styl", "~/assets/siyuan/index.styl"],
 
   app: {
@@ -113,17 +98,12 @@ export default defineNuxtConfig({
 
   // 环境变量
   runtimeConfig: {
-    // siyuanAuthToken: process.env.NUXT_SIYUAN_AUTH_TOKEN,
-    siyuanAuthToken: "",
-    // siyuanCookie: process.env.NUXT_SIYUAN_COOKIE,
-    siyuanCookie: "",
+    siyuanAuthToken: process.env.NUXT_SIYUAN_AUTH_TOKEN,
+    siyuanCookie: process.env.NUXT_SIYUAN_COOKIE,
     public: {
-      // defaultType: process.env.NUXT_PUBLIC_DEFAULT_TYPE,
-      defaultType: "siyuan",
-      // siyuanApiUrl: process.env.NUXT_PUBLIC_SIYUAN_API_URL,
-      siyuanApiUrl: "",
-      // waitTime: process.env.NUXT_PUBLIC_WAIT_TIME,
-      waitTime: "0",
+      defaultType: process.env.NUXT_PUBLIC_DEFAULT_TYPE ?? "siyuan",
+      siyuanApiUrl: process.env.NUXT_PUBLIC_SIYUAN_API_URL ?? "http://127.0.0.1:6807",
+      waitTime: process.env.NUXT_PUBLIC_WAIT_TIME,
     },
   },
 })

plugins/05.renderer.static.client.ts

@@ -25,6 +25,7 @@
 
 import { createAppLogger } from "~/common/appLogger"
 import { useClientAssets } from "~/plugins/renderer/useClientAssets"
+import { useStaticClientAssets } from "~/plugins/renderer/useStaticClientAssets"
 
 /**
  * 页面渲染插件(图片、链接、公式等) - 客户端
@@ -36,14 +37,14 @@ import { useClientAssets } from "~/plugins/renderer/useClientAssets"
  * @since 0.0.1
  */
 export default defineNuxtPlugin(({ vueApp }) => {
-  const logger = createAppLogger("renderer-client-plugin")
-  const { addClientAssetsPrefix } = useClientAssets()
+  const logger = createAppLogger("renderer-static-client-plugin")
+  const { addClientAssetsPrefix } = useStaticClientAssets()
 
   vueApp.directive("sbeauty", (el: HTMLElement) => {
-    if (process.env.SSR === "true") {
-      logger.warn("SSR is enabled, render is handled with nitro, so the client conversion is ignored")
-      return
-    }
+    // if (process.env.SSR === "true") {
+    //   logger.warn("SSR is enabled, render is handled with nitro, so the client conversion is ignored")
+    //   return
+    // }
 
     // assets
     logger.info("Start handling images on client", el)

plugins/renderer/useClientAssets.ts

@@ -30,7 +30,7 @@ import { useBaseUrl } from "~/plugins/renderer/useClientBaseUrl"
  * 处理客户端资源文件地址
  */
 export const useClientAssets = () => {
-  const logger = createAppLogger("hljs-client-plugin")
+  const logger = createAppLogger("use-client-assets")
   const { getClientBaseUrl } = useBaseUrl()
 
   const addClientAssetsPrefix = (el: HTMLElement) => {

plugins/renderer/useServerAssets.ts

@@ -31,7 +31,7 @@ import { useBaseUrl } from "~/plugins/renderer/useClientBaseUrl"
  * DOM 相关操作钩子
  */
 export const useServerAssets = () => {
-  const logger = createAppLogger("use-dom")
+  const logger = createAppLogger("use-server-assets")
   const { getServerBaseUrl } = useBaseUrl()
 
   /**