feat: 在线分享第一版-优化分享页面

terwer · Jun 17, 2023 · 21f7982 · 21f7982
1 parent 02b0dc2
commit 21f7982
Show file tree

Hide file tree

Showing 29 changed files with 838 additions and 128 deletions.
diff --git a/app.config.ts b/app.config.ts
@@ -0,0 +1,31 @@
+/*
+ * Copyright (c) 2023, Terwer . All rights reserved.
+ * DO NOT ALTER OR REMOVE COPYRIGHT NOTICES OR THIS FILE HEADER.
+ *
+ * This code is free software; you can redistribute it and/or modify it
+ * under the terms of the GNU General Public License version 2 only, as
+ * published by the Free Software Foundation.  Terwer designates this
+ * particular file as subject to the "Classpath" exception as provided
+ * by Terwer in the LICENSE file that accompanied this code.
+ *
+ * This code is distributed in the hope that it will be useful, but WITHOUT
+ * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+ * FITNESS FOR A PARTICULAR PURPOSE.  See the GNU General Public License
+ * version 2 for more details (a copy is included in the LICENSE file that
+ * accompanied this code).
+ *
+ * You should have received a copy of the GNU General Public License version
+ * 2 along with this work; if not, write to the Free Software Foundation,
+ * Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301 USA.
+ *
+ * Please contact Terwer, Shenzhen, Guangdong, China, youweics@163.com
+ * or visit www.terwer.space if you need additional information or have any
+ * questions.
+ */
+export default defineAppConfig({
+  theme: {
+    mode: "dark",
+    lightTheme: "Zhihu",
+    darkTheme: "Zhihu",
+  },
+})
diff --git a/assets/scss/index.scss b/assets/scss/index.scss
diff --git a/assets/siyuan/index.styl b/assets/siyuan/index.styl
@@ -0,0 +1,15 @@
+// 整体布局
+html, body
+  margin 0
+  padding 0
+  overflow auto
+#app
+  margin 0
+  padding 0
+
+// 字体
+body
+  font-family "Open Sans", "LXGW WenKai", "JetBrains Mono", "-apple-system", "Microsoft YaHei", "Times New Roman",
+          "方正北魏楷书_GBK", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans",
+          "Droid Sans", "Helvetica Neue", sans-serif
+
diff --git a/composables/api/usePostApi.ts b/composables/api/usePostApi.ts
@@ -1,3 +1,28 @@
+/*
+ * Copyright (c) 2023, Terwer . All rights reserved.
+ * DO NOT ALTER OR REMOVE COPYRIGHT NOTICES OR THIS FILE HEADER.
+ *
+ * This code is free software; you can redistribute it and/or modify it
+ * under the terms of the GNU General Public License version 2 only, as
+ * published by the Free Software Foundation.  Terwer designates this
+ * particular file as subject to the "Classpath" exception as provided
+ * by Terwer in the LICENSE file that accompanied this code.
+ *
+ * This code is distributed in the hope that it will be useful, but WITHOUT
+ * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+ * FITNESS FOR A PARTICULAR PURPOSE.  See the GNU General Public License
+ * version 2 for more details (a copy is included in the LICENSE file that
+ * accompanied this code).
+ *
+ * You should have received a copy of the GNU General Public License version
+ * 2 along with this work; if not, write to the Free Software Foundation,
+ * Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301 USA.
+ *
+ * Please contact Terwer, Shenzhen, Guangdong, China, youweics@163.com
+ * or visit www.terwer.space if you need additional information or have any
+ * questions.
+ */
+
 import { createAppLogger } from "~/common/appLogger"
 import { SiYuanApiAdaptor, SiyuanConfig } from "zhi-siyuan-api"
 
@@ -11,10 +36,10 @@ export const usePostApi = () => {
   const getPost = async (id: string) => {
     logger.info("Loading post from remote api...")
 
-    logger.info("env=>", env)
-    logger.info("defaultType=>", env.public.defaultType)
-    logger.info("siyuanApiUrl=>", env.public.siyuanApiUrl)
-    logger.info("siyuanAuthToken=>", env.siyuanAuthToken)
+    // logger.info("env=>", env)
+    // logger.info("defaultType=>", env.public.defaultType)
+    // logger.info("siyuanApiUrl=>", env.public.siyuanApiUrl)
+    // logger.info("siyuanAuthToken=>", env.siyuanAuthToken)
 
     const siyuanConfig = new SiyuanConfig(env.public.siyuanApiUrl, env.siyuanAuthToken)
     const blogApi = new SiYuanApiAdaptor(siyuanConfig)

diff --git a/nuxt.config.ts b/nuxt.config.ts
@@ -9,7 +9,7 @@ const generateDynamicV = () => {
 }
 
 const isDev = process.env.NODE_ENV === "development"
-const appBase = "/"
+const appBase = "/plugins/siyuan-blog/"
 const staticV = generateDynamicV()
 
 // https://nuxt.com/docs/api/configuration/nuxt-config
@@ -24,7 +24,7 @@ export default defineNuxtConfig({
   },
 
   // build modules
-  modules: ["@vueuse/nuxt", "@nuxtjs/i18n", "@element-plus/nuxt", "@nuxtjs/color-mode"],
+  modules: ["@vueuse/nuxt", "@nuxtjs/i18n-edge", "@element-plus/nuxt", "@nuxtjs/color-mode"],
 
   // vueuse
   vueuse: {
@@ -59,7 +59,15 @@ export default defineNuxtConfig({
     themes: ["dark"],
   },
 
-  css: ["~/assets/siyuan/style.styl"],
+  // 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: {
     baseURL: appBase,
@@ -76,22 +84,22 @@ export default defineNuxtConfig({
         { rel: "stylesheet", href: appBase + "libs/fonts/webfont.css?v=" + staticV },
         {
           rel: "stylesheet",
-          href: "http://127.0.0.1:59541/stage/build/app/base.55870db539c2a1c02cb5.css?v=" + staticV,
+          href: appBase + "resources/stage/build/app/base.css?v=" + staticV,
         },
         {
           rel: "stylesheet",
           id: "themeDefaultStyle",
-          href: "http://127.0.0.1:59541/appearance/themes/midnight/theme.css?v=2.9.1",
+          href: appBase + "resources/appearance/themes/midnight/theme.css?v=2.9.1",
         },
         {
           rel: "stylesheet",
           id: "themeStyle",
-          href: "http://127.0.0.1:59541/appearance/themes/Zhihu/theme.css?v=0.0.6",
+          href: appBase + "resources/appearance/themes/Zhihu/theme.css?v=0.0.6",
         },
         {
           rel: "stylesheet",
           id: "protyleHljsStyle",
-          href: "http://127.0.0.1:59541/stage/protyle/js/highlight.js/styles/vs2015.min.css?v=11.5.0",
+          href: appBase + "resources/stage/protyle/js/highlight.js/styles/vs2015.min.css?v=11.5.0",
         },
       ],
       // https://nuxt.com/docs/api/configuration/nuxt-config#head

diff --git a/nuxt.node.config.ts b/nuxt.node.config.ts
@@ -43,14 +43,6 @@ export default defineNuxtConfig({
   vite: {
     define: { "process.env.DEV_MODE": `"${isDev}"` },
     plugins: [],
-
-    css: {
-      preprocessorOptions: {
-        scss: {
-          additionalData: `@use "@/assets/scss/element/index.scss" as element;`,
-        },
-      },
-    },
   },
   // https://github.com/element-plus/element-plus-nuxt-starter/blob/main/nuxt.config.ts
   elementPlus: {
@@ -59,7 +51,7 @@ export default defineNuxtConfig({
     themes: ["dark"],
   },
 
-  css: ["~/assets/siyuan/style.styl"],
+  css: ["~/assets/siyuan/style.styl", "~/assets/siyuan/index.styl"],
 
   app: {
     baseURL: appBase,
@@ -76,22 +68,22 @@ export default defineNuxtConfig({
         { rel: "stylesheet", href: appBase + "libs/fonts/webfont.css?v=" + staticV },
         {
           rel: "stylesheet",
-          href: "http://127.0.0.1:59541/stage/build/app/base.55870db539c2a1c02cb5.css?v=" + staticV,
+          href: appBase + "resources/stage/build/app/base.css?v=" + staticV,
         },
         {
           rel: "stylesheet",
           id: "themeDefaultStyle",
-          href: "http://127.0.0.1:59541/appearance/themes/midnight/theme.css?v=2.9.1",
+          href: appBase + "resources/appearance/themes/midnight/theme.css?v=2.9.1",
         },
         {
           rel: "stylesheet",
           id: "themeStyle",
-          href: "http://127.0.0.1:59541/appearance/themes/Zhihu/theme.css?v=0.0.6",
+          href: appBase + "resources/appearance/themes/Zhihu/theme.css?v=0.0.6",
         },
         {
           rel: "stylesheet",
           id: "protyleHljsStyle",
-          href: "http://127.0.0.1:59541/stage/protyle/js/highlight.js/styles/vs2015.min.css?v=11.5.0",
+          href: appBase + "resources/stage/protyle/js/highlight.js/styles/vs2015.min.css?v=11.5.0",
         },
       ],
       // https://nuxt.com/docs/api/configuration/nuxt-config#head

diff --git a/nuxt.siyuan.config.ts b/nuxt.siyuan.config.ts
@@ -61,14 +61,13 @@ export default defineNuxtConfig({
 
   // https://nuxt.com/docs/guide/going-further/custom-routing#hash-mode-spa
   ssr: false,
-  // https://nuxt.com/docs/guide/going-further/custom-routing#hash-mode-spa
   router: {
     options: {
       hashMode: true,
     },
   },
 
-  css: ["~/assets/siyuan/style.styl"],
+  css: ["~/assets/siyuan/style.styl", "~/assets/siyuan/index.styl"],
 
   app: {
     baseURL: appBase,
@@ -85,22 +84,22 @@ export default defineNuxtConfig({
         { rel: "stylesheet", href: appBase + "libs/fonts/webfont.css?v=" + staticV },
         {
           rel: "stylesheet",
-          href: "http://127.0.0.1:59541/stage/build/app/base.55870db539c2a1c02cb5.css?v=" + staticV,
+          href: appBase + "resources/stage/build/app/base.css?v=" + staticV,
         },
         {
           rel: "stylesheet",
           id: "themeDefaultStyle",
-          href: "http://127.0.0.1:59541/appearance/themes/midnight/theme.css?v=2.9.1",
+          href: appBase + "resources/appearance/themes/midnight/theme.css?v=2.9.1",
         },
         {
           rel: "stylesheet",
           id: "themeStyle",
-          href: "http://127.0.0.1:59541/appearance/themes/Zhihu/theme.css?v=0.0.6",
+          href: appBase + "resources/appearance/themes/Zhihu/theme.css?v=0.0.6",
         },
         {
           rel: "stylesheet",
           id: "protyleHljsStyle",
-          href: "http://127.0.0.1:59541/stage/protyle/js/highlight.js/styles/vs2015.min.css?v=11.5.0",
+          href: appBase + "resources/stage/protyle/js/highlight.js/styles/vs2015.min.css?v=11.5.0",
         },
       ],
       // https://nuxt.com/docs/api/configuration/nuxt-config#head

diff --git a/nuxt.vercel.config.ts b/nuxt.vercel.config.ts
@@ -43,14 +43,6 @@ export default defineNuxtConfig({
   vite: {
     define: { "process.env.DEV_MODE": `"${isDev}"` },
     plugins: [],
-
-    css: {
-      preprocessorOptions: {
-        scss: {
-          additionalData: `@use "@/assets/scss/element/index.scss" as element;`,
-        },
-      },
-    },
   },
   // https://github.com/element-plus/element-plus-nuxt-starter/blob/main/nuxt.config.ts
   elementPlus: {
@@ -59,7 +51,7 @@ export default defineNuxtConfig({
     themes: ["dark"],
   },
 
-  css: ["~/assets/siyuan/style.styl"],
+  css: ["~/assets/siyuan/style.styl", "~/assets/siyuan/index.styl"],
 
   app: {
     baseURL: appBase,
@@ -76,22 +68,22 @@ export default defineNuxtConfig({
         { rel: "stylesheet", href: appBase + "libs/fonts/webfont.css?v=" + staticV },
         {
           rel: "stylesheet",
-          href: "http://127.0.0.1:59541/stage/build/app/base.55870db539c2a1c02cb5.css?v=" + staticV,
+          href: appBase + "resources/stage/build/app/base.css?v=" + staticV,
         },
         {
           rel: "stylesheet",
           id: "themeDefaultStyle",
-          href: "http://127.0.0.1:59541/appearance/themes/midnight/theme.css?v=2.9.1",
+          href: appBase + "resources/appearance/themes/midnight/theme.css?v=2.9.1",
         },
         {
           rel: "stylesheet",
           id: "themeStyle",
-          href: "http://127.0.0.1:59541/appearance/themes/Zhihu/theme.css?v=0.0.6",
+          href: appBase + "resources/appearance/themes/Zhihu/theme.css?v=0.0.6",
         },
         {
           rel: "stylesheet",
           id: "protyleHljsStyle",
-          href: "http://127.0.0.1:59541/stage/protyle/js/highlight.js/styles/vs2015.min.css?v=11.5.0",
+          href: appBase + "resources/stage/protyle/js/highlight.js/styles/vs2015.min.css?v=11.5.0",
         },
       ],
       // https://nuxt.com/docs/api/configuration/nuxt-config#head

diff --git a/package.json b/package.json
@@ -39,7 +39,7 @@
   "dependencies": {
     "@element-plus/icons-vue": "^2.1.0",
     "element-plus": "^2.3.6",
-    "vue-dompurify-html": "^4.1.4",
+    "highlight.js": "^11.6.0",
     "zhi-siyuan-api": "^1.13.0"
   }
 }
diff --git a/pages/p/[id].vue b/pages/p/[id].vue
@@ -3,22 +3,36 @@ import { usePost } from "~/composables/usePost"
 
 const { currentPost } = usePost()
 // https://stackoverflow.com/a/71781246/4037224
-const VNode = () => h("div", { class: "b3-typography", innerHTML: currentPost.post.description })
+const VNode = () =>
+  h("div", {
+    class: "",
+    innerHTML: currentPost.post.editorDom?.replaceAll('contenteditable="true"', 'contenteditable="false"') ?? "",
+  })
 </script>
 
 <template>
-  <div class="protyle-preview">
-    <div class="protyle-preview__action post-title">
-      {{ currentPost.post.title }}
+  <div class="fn__flex-1 protyle" data-loading="finished">
+    <div class="protyle-content protyle-content--transition" data-fullwidth="true">
+      <div class="protyle-title protyle-wysiwyg--attr" style="margin: 16px 96px 0">
+        <div
+          style="margin: 20px 0"
+          contenteditable="false"
+          data-position="center"
+          spellcheck="false"
+          class="protyle-title__input"
+          data-render="true"
+        >
+          {{ currentPost.post.title }}
+        </div>
+      </div>
+      <div
+        class="protyle-wysiwyg protyle-wysiwyg--attr"
+        spellcheck="false"
+        contenteditable="false"
+        data-doc-type="NodeDocument"
+      >
+        <VNode v-highlight />
+      </div>
     </div>
-    <VNode />
   </div>
 </template>
-
-<style scoped>
-.post-title {
-  text-align: left;
-  font-size: 32px;
-  font-weight: 600;
-}
-</style>