From 55d9820b13beff8793b0e14b828300e1d2f0f9b8 Mon Sep 17 00:00:00 2001
From: goodspeed <hi@gusibi.mobi>
Date: Sun, 13 Oct 2024 22:19:08 +0800
Subject: [PATCH] update site description, optimize seo

---
 layouts/default.vue |  10 +++-
 nuxt.config.ts      |   6 ++
 pages/about.vue     | 143 ++++++++++++++++++++++++++++++++++++++++++++
 3 files changed, 158 insertions(+), 1 deletion(-)
 create mode 100644 pages/about.vue

diff --git a/layouts/default.vue b/layouts/default.vue
index 4b35f00..2eeefb7 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -16,6 +16,10 @@
               <svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 5c7.18 0 13 5.82 13 13M6 11a7 7 0 017 7m-6 0a1 1 0 11-2 0 1 1 0 012 0z"></path>
               </svg> RSS </a>
+            <a href="/about" class="text-white hover:text-gray-200 hover:scale-110 flex items-center">
+              <svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
+              </svg> About </a>
             <div class="relative group">
               <button class="text-white hover:text-gray-200 hover:scale-110 flex items-center">
                 <svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
@@ -57,6 +61,10 @@
           <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9"></path>
           </svg> Explore </a>
+        <a href="/about" class="block text-white py-2 flex items-center">
+          <svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
+          </svg> About </a>
         <div class="py-2">
           <button class="text-white flex items-center" @click="toggleMobileFriendLinks">
             <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
@@ -197,7 +205,7 @@ useHead({
   },
   meta: [
     { name: 'viewport', content: 'width=device-width, initial-scale=1' },
-    { name: 'description', content: config.public.siteDescription },
+    // { name: 'description', content: config.public.siteDescription },
     { name: 'format-detection', content: 'telephone=no' },
     { property: 'og:site_name', content: config.public.siteTitle },
     { property: 'og:type', content: 'website' },
diff --git a/nuxt.config.ts b/nuxt.config.ts
index f965b7c..baf063f 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -13,10 +13,16 @@ export default defineNuxtConfig({
         { charset: 'utf-8' },
         { name: 'viewport', content: 'width=device-width, initial-scale=1' },
         { name: 'format-detection', content: 'telephone=no' },
+        {
+          name: 'description',
+          content: '古思乱讲 - 一个关于技术、生活和思考的博客 一个简洁、现代的博客系统，灵感来源于 Path 应用的用户界面。它使用 GitHub Issues 作为 CMS，通过 Cloudflare Workers 提供 API 服务，并使用 Cloudflare Pages 进行静态网站托管。特点包括时间线式博客展示、Markdown 渲染、标签分类、反应统计、夜间模式和响应式设计。'
+        },
         // Open Graph
+        { property: 'og:description', content: '古思乱讲 - 一个关于技术、生活和思考的博客 简洁现代的博客系统，使用 GitHub Issues 作为 CMS，提供时间线式展示、Markdown 渲染、标签分类等功能。灵感源自 Path 应用，通过 Cloudflare 技术实现高效托管。' },
         { property: 'og:type', content: 'website' },
         // Twitter Card
         { name: 'twitter:card', content: 'summary_large_image' },
+        { name: 'twitter:description', content: '古思乱讲 - 一个关于技术、生活和思考的博客 简洁现代的博客系统，使用 GitHub Issues 作为 CMS，提供时间线式展示、Markdown 渲染、标签分类等功能。灵感源自 Path 应用，通过 Cloudflare 技术实现高效托管。' },
       ],
       link: [
         { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
diff --git a/pages/about.vue b/pages/about.vue
new file mode 100644
index 0000000..aeebf10
--- /dev/null
+++ b/pages/about.vue
@@ -0,0 +1,143 @@
+<template>
+  <main class="container max-w-content mx-auto px-4 ">
+    <article v-if="post" class="bg-card-light dark:bg-card-dark rounded-lg shadow-xl overflow-hidden">
+      <div class="px-6 py-6">
+        <!-- <h1 class="text-3xl font-bold mb-4 text-gray-900 dark:text-white">{{ post.title }}</h1> -->
+        <div class="mb-4 flex justify-center items-center text-sm text-gray-600 dark:text-gray-400">
+          <PostLabels :labels="post.labels" :repo-url="post.repo_url" />
+        </div>
+        <div class="prose dark:prose-invert max-w-none" v-html="$md(post.body || '')" />
+        <!-- 底部信息栏 -->
+        <div class=" pt-3 flex justify-between items-center text-sm">
+          <!-- 左下角 GitHub 链接 -->
+          <div class="flex items-center space-x-4">
+            <a class="text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300" :href="post.github_url" target="_blank">🔗</a>
+            <PostReactions :reactions="post.reactions" />
+            <span class="text-gray-500 dark:text-gray-400">{{ formatDate(post.created_at, false) }}</span>
+          </div>
+          <div class="flex items-center space-x-4">
+            <CommentButton :post-number="post.number" :repo-url="post.repo_url" :comment-count="getCommentCount(post.comments)" />
+            <ShareButton :post="post" :card-selector="`[data-post-id='${post.number}']`" />
+          </div>
+        </div>
+      </div>
+    </article>
+    <div v-if="post" class="mt-8">
+      <div class="flex items-center justify-between mb-6">
+        <h3 class="text-2xl font-bold text-gray-900 dark:text-white">Comments</h3>
+        <NuxtLink v-if="post" :to="post.html_url" target="_blank" class="inline-flex items-center px-4 py-2 bg-blue-600 hover:bg-blue-700 focus:ring-4 focus:ring-blue-300 text-white font-medium rounded-lg text-sm transition duration-300 ease-in-out"> Comment on GitHub <svg class="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path>
+          </svg>
+        </NuxtLink>
+      </div>
+      <!-- 使用 CommentBox 组件 -->
+      <CommentBox @comment-submitted="handleCommentSubmission" />
+      <div v-if="post.comments && post.comments.length > 0">
+        <PostComment v-for="comment in post.comments" :key="comment.id" :comment="comment" />
+      </div>
+    </div>
+  </main>
+</template>
+<script setup lang="ts">
+import { useAsyncData } from '#app'
+import { useRoute } from 'vue-router'
+import { useSupabaseUser } from '#imports'
+import { useBannerContentInjection } from '~/composables/useBannerContent'
+const { setBannerContent, setBannerImage } = useBannerContentInjection()
+
+const user = useSupabaseUser()
+
+const route = useRoute()
+
+const { data: postData } = await useAsyncData('post', () =>
+  $fetch(`/api/repo/gusibi/path-meme-db/issues/30`)
+)
+const post = ref(postData.value)
+
+const truncatedBody = (post: string, length: number) => {
+  if (!post) {
+    return ""
+  }
+  let maxLength = 400;
+  if (length > 0) {
+    maxLength = length
+  }
+  if (post.length <= maxLength) {
+    return post;
+  }
+  return post.slice(0, maxLength).trim() + '...';
+}
+
+
+// console.log("post", post.value)
+// console.log("reactions", post.value.reactions)
+// console.log("comment: ", post.value.comments)
+// SEO优化
+useHead(() => ({
+  title: post.value?.title,
+  meta: [
+    { name: 'description', content: truncatedBody(post.value?.body, 160) },
+    { name: 'keywords', content: post.value?.labels.map(label => label.name).join(', ') },
+    // Open Graph
+    { property: 'og:title', content: post.value?.title },
+    { property: 'og:description', content: truncatedBody(post.value?.body, 160) },
+    { property: 'og:type', content: 'article' },
+    { property: 'og:url', content: `https://momo.gusibi.mobi/blog/${route.params.id}` },
+    // Twitter Card
+    { name: 'twitter:title', content: post.value?.title },
+    { name: 'twitter:description', content: truncatedBody(post.value?.body, 160) },
+  ],
+  link: [
+    { rel: 'canonical', href: `https://momo.gusibi.mobi/blog/${route.params.id}` }
+  ],
+}))
+
+
+const formatDate = (dateString: string, showYear = false) => {
+  const date = new Date(dateString)
+  const options: Intl.DateTimeFormatOptions = {
+    year: showYear ? 'numeric' : undefined,
+    month: 'short',
+    day: 'numeric',
+    hour: '2-digit',
+    minute: '2-digit'
+  }
+  return new Intl.DateTimeFormat('en-US', options).format(date)
+}
+
+const getCommentCount = (comments: Array<{
+  id: number
+  user: { login: string }
+  created_at: string
+  body: string
+}> | undefined): number => {
+  if (comments && comments.length > 0) {
+    return comments.length
+  }
+  return 0
+}
+const handleCommentSubmission = async (newComment: any) => {
+  if (post.value && post.value.comments) {
+    // 添加新评论到评论列表
+    post.value.comments.push(newComment)
+    // 更新评论计数
+    post.value.comments_count = (post.value.comments_count || 0) + 1
+  }
+}
+
+if (post.value) {
+  setBannerContent(`
+  <div class="text-center text-white">
+    <h1 class="text-3xl font-extrabold mb-4 ">${post.value.title}</h1>
+    <div class="flex items-center justify-center">
+      <img src="${post.value.avatar_url}" alt="${post.value.author}" class="w-10 h-10 rounded-full mr-3">
+      <div class="text-left">
+        <div class="font-medium">${post.value.author}</div>
+        <div class="text-sm opacity-75">${formatDate(post.value.created_at)}</div>
+      </div>
+    </div>
+  </div>
+`)
+  setBannerImage('/banner3.jpeg')
+}
+</script>