feat: 在线分享第一版-关于我页面

terwer · Jun 19, 2023 · 77d7aa6 · 77d7aa6
1 parent 30e1c26
commit 77d7aa6
Show file tree

Hide file tree

Showing 13 changed files with 415 additions and 170 deletions.
diff --git a/components/default/Detail.vue b/components/default/Detail.vue
@@ -0,0 +1,91 @@
+<!--
+  - 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.
+  -->
+
+<script setup lang="ts">
+import { usePost } from "~/composables/usePost"
+import { getFirstImageSrc, getSummery } from "~/utils/utils"
+import { createAppLogger } from "~/common/appLogger"
+
+const logger = createAppLogger("share-page")
+const { t } = useI18n()
+const { currentPost, setCurrentPost } = usePost()
+await setCurrentPost()
+
+// props
+const props = defineProps({
+  showTitleSign: Boolean,
+})
+
+// datas
+const titleSign = " - " + t("blog.share")
+const title = `${currentPost.post.title}${props.showTitleSign ? titleSign : ""}`
+const desc = getSummery(currentPost.post.description)
+const headImage = await getFirstImageSrc(currentPost.post.description)
+const seoMeta = {
+  title: title,
+  ogTitle: title,
+  description: desc,
+  ogDescription: desc,
+} as any
+if (headImage) {
+  logger.info("get a head image from doc=>", headImage)
+  seoMeta.ogImage = headImage
+}
+useSeoMeta(seoMeta)
+
+// https://stackoverflow.com/a/71781246/4037224
+const VNode = () =>
+  h("div", {
+    class: "",
+    innerHTML: currentPost.post.editorDom?.replaceAll('contenteditable="true"', 'contenteditable="false"') ?? "",
+  })
+</script>
+
+<template>
+  <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>
+  </div>
+</template>
diff --git a/locales/en_US.ts b/locales/en_US.ts
@@ -25,6 +25,8 @@
 
 export default {
   "syp.about": "About me",
+  "syp.about.desc":
+    "Hello, my name is Terwer, I have been in the back-end industry for many years, mainly focusing on the exploration of back-end technology stacks. Hope to meet more friends. Welcome to leave a message to communicate.",
   "theme.mode.choose": "Mode",
   "theme.mode.dark": "Dark mode",
   "theme.mode.light": "Light mode",
@@ -47,4 +49,6 @@ export default {
   "blog.index.no.home": "Oh, you haven't set up your homepage yet!",
   "blog.index.goto.set.home": "Go to set up my homepage now",
   "blog.share": "Share to web",
+  "blog.site.title": "Shallow sea shellfish",
+  "blog.site.slogan": "Find unknown technology puzzles",
 }
diff --git a/locales/zh_CN.ts b/locales/zh_CN.ts
@@ -25,6 +25,8 @@
 
 export default {
   "syp.about": "关于作者",
+  "syp.about.desc":
+    "你们好，我叫 terwer，已在后端行业多年，主要专注于后端技术栈的探索。希望能认识更多朋友。欢迎大家留言交流。",
   "theme.mode.choose": "切换模式",
   "theme.mode.dark": "暗黑模式",
   "theme.mode.light": "浅色模式",
@@ -47,4 +49,6 @@ export default {
   "blog.index.no.home": "啊哦，您还没设置自己的主页哟！",
   "blog.index.goto.set.home": "马上去设置我的主页",
   "blog.share": "在线分享",
+  "blog.site.title": "浅海拾贝",
+  "blog.site.slogan": "寻找未知的技术拼图",
 }
diff --git a/nuxt.config.ts b/nuxt.config.ts
@@ -24,7 +24,7 @@ export default defineNuxtConfig({
   },
 
   // build modules
-  modules: ["@vueuse/nuxt", "@nuxtjs/i18n", "@element-plus/nuxt", "@nuxtjs/color-mode", "@pinia/nuxt"],
+  modules: ["@vueuse/nuxt", "@nuxtjs/i18n", "@element-plus/nuxt", "@nuxtjs/color-mode", "@pinia/nuxt", "@nuxt/image"],
 
   // vueuse
   vueuse: {
@@ -41,6 +41,8 @@ export default defineNuxtConfig({
     classSuffix: "",
   },
 
+  image: {},
+
   vite: {
     define: {
       "process.env.DEV_MODE": `"${isDev}"`,

diff --git a/nuxt.node.config.ts b/nuxt.node.config.ts
@@ -24,7 +24,7 @@ export default defineNuxtConfig({
   },
 
   // build modules
-  modules: ["@vueuse/nuxt", "@nuxtjs/i18n", "@element-plus/nuxt", "@nuxtjs/color-mode", "@pinia/nuxt"],
+  modules: ["@vueuse/nuxt", "@nuxtjs/i18n", "@element-plus/nuxt", "@nuxtjs/color-mode", "@pinia/nuxt", "@nuxt/image"],
 
   // vueuse
   vueuse: {
@@ -41,6 +41,8 @@ export default defineNuxtConfig({
     classSuffix: "",
   },
 
+  image: {},
+
   vite: {
     define: {
       "process.env.DEV_MODE": `"${isDev}"`,

diff --git a/nuxt.siyuan.config.ts b/nuxt.siyuan.config.ts
@@ -24,7 +24,14 @@ export default defineNuxtConfig({
   },
 
   // build modules
-  modules: ["@vueuse/nuxt", "@nuxtjs/i18n-edge", "@element-plus/nuxt", "@nuxtjs/color-mode", "@pinia/nuxt"],
+  modules: [
+    "@vueuse/nuxt",
+    "@nuxtjs/i18n-edge",
+    "@element-plus/nuxt",
+    "@nuxtjs/color-mode",
+    "@pinia/nuxt",
+    "@nuxt/image",
+  ],
 
   // vueuse
   vueuse: {
@@ -41,6 +48,8 @@ export default defineNuxtConfig({
     classSuffix: "",
   },
 
+  image: {},
+
   vite: {
     define: {
       "process.env.DEV_MODE": `"${isDev}"`,

diff --git a/nuxt.vercel.config.ts b/nuxt.vercel.config.ts
@@ -24,7 +24,7 @@ export default defineNuxtConfig({
   },
 
   // build modules
-  modules: ["@vueuse/nuxt", "@nuxtjs/i18n", "@element-plus/nuxt", "@nuxtjs/color-mode", "@pinia/nuxt"],
+  modules: ["@vueuse/nuxt", "@nuxtjs/i18n", "@element-plus/nuxt", "@nuxtjs/color-mode", "@pinia/nuxt", "@nuxt/image"],
 
   // vueuse
   vueuse: {
@@ -41,6 +41,8 @@ export default defineNuxtConfig({
     classSuffix: "",
   },
 
+  image: {},
+
   vite: {
     define: {
       "process.env.DEV_MODE": `"${isDev}"`,

diff --git a/package.json b/package.json
@@ -20,6 +20,7 @@
   "devDependencies": {
     "@element-plus/nuxt": "^1.0.5",
     "@nuxt/devtools": "^0.6.1",
+    "@nuxt/image": "1.0.0-rc.1",
     "@nuxtjs/color-mode": "^3.2.0",
     "@nuxtjs/i18n": "8.0.0-beta.12",
     "@nuxtjs/i18n-edge": "8.0.0-beta.12-28113576.7bc33c3",

diff --git a/pages/about.vue b/pages/about.vue
@@ -1,10 +1,49 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+const { t } = useI18n()
+
+const seoMeta = {
+  title: `${t("syp.about")} - ${t("blog.site.title")}`,
+  ogTitle: t("syp.about"),
+  description: t("syp.about.desc"),
+  ogDescription: t("syp.about.desc"),
+} as any
+useSeoMeta(seoMeta)
+</script>
 
 <template>
-  <div>
-    <h1>大家好，我是 <a href="https://github.saobby.my.eu.org.terwer" target="_blank">terwer</a> ， 一个后端老菜鸟。</h1>
-    <p>联系我：youweics@163.com</p>
+  <div id="about">
+    <h1>👨🏻 关于我</h1>
+    <p>大家好，我是 <nuxt-link to="https://blog.terwer.space" target="_blank">terwer</nuxt-link> ， 一个后端老菜鸟。</p>
+    <div class="sep"></div>
+
+    <h1>🏹 技能</h1>
+    <p>熟悉Java、Spring、Spring Cloud、Vue、React、Python 的拼写</p>
+    <p>了解 Linux、windows、macOS 的开关机方式</p>
+    <p>精通 Git 的 pull 和 push，并注册了 GitHub 帐号刷了一些 star</p>
+    <p>微信公众号：架构设计漫谈</p>
+    <nuxt-img src="https://img1.terwer.space/mp-qrcode.png" />
+    <div class="sep"></div>
+
+    <h1>✉️ 联系</h1>
+    <p>WeChat or QQ: 1035136784</p>
+    <p>Email: youweics@163.com</p>
+    <p>GitHub: <nuxt-link to="https://github.com/terwer" target="_blank">https://github.com/terwer</nuxt-link></p>
   </div>
 </template>
 
-<style scoped></style>
+<style lang="stylus" scoped>
+#about
+  h1
+    font-size 32px
+  p
+    padding 8px 0
+    font-size 16px
+    a
+      color var(--el-color-primary)
+      cursor pointer
+  img
+    width 25%
+    height 25%
+  .sep
+    margin-top 20px
+</style>
diff --git a/pages/p/[id].vue b/pages/p/[id].vue
@@ -1,58 +1,7 @@
 <script setup lang="ts">
-import { usePost } from "~/composables/usePost"
-import { getFirstImageSrc, getSummery } from "~/utils/utils"
-import { createAppLogger } from "~/common/appLogger"
-
-const logger = createAppLogger("share-page")
-const { currentPost, setCurrentPost } = usePost()
-await setCurrentPost()
-
-const title = currentPost.post.title
-const desc = getSummery(currentPost.post.description)
-const headImage = await getFirstImageSrc(currentPost.post.description)
-const seoMeta = {
-  title: title,
-  ogTitle: title,
-  description: desc,
-  ogDescription: desc,
-} as any
-if (headImage) {
-  logger.info("get a head image from doc=>", headImage)
-  seoMeta.ogImage = headImage
-}
-useSeoMeta(seoMeta)
-
-// https://stackoverflow.com/a/71781246/4037224
-const VNode = () =>
-  h("div", {
-    class: "",
-    innerHTML: currentPost.post.editorDom?.replaceAll('contenteditable="true"', 'contenteditable="false"') ?? "",
-  })
+import Detail from "~/components/default/Detail.vue"
 </script>
 
 <template>
-  <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>
-  </div>
+  <detail :show-title-sign="false" />
 </template>
diff --git a/pages/post/[id].vue b/pages/post/[id].vue
@@ -1,58 +1,7 @@
 <script setup lang="ts">
-import { usePost } from "~/composables/usePost"
-import { getFirstImageSrc, getSummery } from "~/utils/utils"
-import { createAppLogger } from "~/common/appLogger"
-
-const logger = createAppLogger("share-page")
-const { currentPost, setCurrentPost } = usePost()
-await setCurrentPost()
-
-const title = currentPost.post.title
-const desc = getSummery(currentPost.post.description)
-const headImage = await getFirstImageSrc(currentPost.post.description)
-const seoMeta = {
-  title: title,
-  ogTitle: title,
-  description: desc,
-  ogDescription: desc,
-} as any
-if (headImage) {
-  logger.info("get a head image from doc=>", headImage)
-  seoMeta.ogImage = headImage
-}
-useSeoMeta(seoMeta)
-
-// https://stackoverflow.com/a/71781246/4037224
-const VNode = () =>
-  h("div", {
-    class: "",
-    innerHTML: currentPost.post.editorDom?.replaceAll('contenteditable="true"', 'contenteditable="false"') ?? "",
-  })
+import Detail from "~/components/default/Detail.vue"
 </script>
 
 <template>
-  <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>
-  </div>
-</template>
+  <detail :show-title-sign="false" />
+</template>