fix: remove markdown for summary, close #373 (#380)

Co-authored-by: Innei <tukon479@gmail.com>

package.json

@@ -124,6 +124,7 @@
     "remark-parse": "10.0.1",
     "remark-rehype": "10.1.0",
     "remark-stringify": "10.0.2",
+    "remove-markdown": "0.5.0",
     "sharp": "0.32.0",
     "sortablejs": "1.15.0",
     "tailwind-merge": "^1.12.0",
@@ -154,6 +155,7 @@
     "@types/react-dom": "18.0.11",
     "@types/react-infinite-scroller": "1.2.3",
     "@types/react-scroll": "1.8.6",
+    "@types/remove-markdown": "0.3.1",
     "@types/sortablejs": "1.15.1",
     "@types/ua-parser-js": "0.7.36",
     "@types/uuid": "9.0.1",

pnpm-lock.yaml

@@ -286,6 +286,9 @@ dependencies:
   remark-stringify:
     specifier: 10.0.2
     version: 10.0.2
+  remove-markdown:
+    specifier: 0.5.0
+    version: 0.5.0
   sharp:
     specifier: 0.32.0
     version: 0.32.0
@@ -372,6 +375,9 @@ devDependencies:
   '@types/react-scroll':
     specifier: 1.8.6
     version: 1.8.6
+  '@types/remove-markdown':
+    specifier: 0.3.1
+    version: 0.3.1
   '@types/sortablejs':
     specifier: 1.15.1
     version: 1.15.1
@@ -4638,6 +4644,10 @@ packages:
       '@types/scheduler': 0.16.3
       csstype: 3.1.2
 
+  /@types/remove-markdown@0.3.1:
+    resolution: {integrity: sha512-JpJNEJEsmmltyL2LdE8KRjJ0L2ad5vgLibqNj85clohT9AyTrfN6jvHxStPshDkmtcL/ShFu0p2tbY7DBS1mqQ==}
+    dev: true
+
   /@types/resolve@1.17.1:
     resolution: {integrity: sha512-yy7HuzQhj0dhGpD8RLXSZWEkLsV9ibvxvi6EiJ3bkqLAO1RGo0WbkWQiwpRlSFymTJRz0d3k5LM3kkx8ArDbLw==}
     dependencies:
@@ -12536,6 +12546,10 @@ packages:
     resolution: {integrity: sha512-7pXIJqJOq5tFgG1A2Zxti3Ht8jJF337m4sowbuHsW30ZnkQFnDzy9qBNhgzX8ZLW4+UBcXiiR7SwR6pokHsxiA==}
     dev: false
 
+  /remove-markdown@0.5.0:
+    resolution: {integrity: sha512-x917M80K97K5IN1L8lUvFehsfhR8cYjGQ/yAMRI9E7JIKivtl5Emo5iD13DhMr+VojzMCiYk8V2byNPwT/oapg==}
+    dev: false
+
   /repeat-string@1.6.1:
     resolution: {integrity: sha512-PV0dzCYDNfRi1jCDbJzpW7jNNDRuCOG/jI5ctQcGKt/clZD+YcPS3yIlWuTJMmESC8aevCFmWJy5wjAFgNqN6w==}
     engines: {node: '>=0.10'}

src/pages/api/summary.test.ts

@@ -0,0 +1,68 @@
+import { describe, expect, test } from "vitest"
+import removeMarkdown from "remove-markdown"
+
+describe("remove markdown", () => {
+  test("remove image url but keep alt", () => {
+    expect(
+      removeMarkdown("![alt text](https://i.imgur.com/1ZQ3Q2l.jpg)", {
+        useImgAltText: true,
+        gfm: true,
+      }),
+    ).toBe("alt text")
+  })
+
+  test("test markdown", () => {
+    expect(
+      removeMarkdown(
+        `# Heading 1
+用 CSS 变量的颜色值。而 xLog 真巧使用了 Tailwind，基本上所有的颜色应用场景都用了 Tailwind 自带的色值，但由于 Tailwind 本身自带的色值都是一个 [固定的值](https://tailwindcss.com/docs/customizing-colors)，并不支持根据 Dark Mode 切换色值。
+
+于是我萌生了一个想法，让自带的颜色能根据是否是暗黑模式去切换就行了。
+
+首先第一是，要重新配置 Tailwind，覆写原来内置的所有的颜色，把固定的值全部改写成 CSS 变量。变量的前缀可以自定义，不要冲突就行了，这边就暂定为 \`tw-colors-i\`。比如我们需要类似这样的色值配置：
+
+\`\`\`js
+// tailwind.config.ts
+module.exports = {
+  theme: {
+    colors: {
+      slate: {
+        50: 'rgb(var(--tw-colors-i-slate-50))',
+        100: 'rgb(var(--tw-colors-i-slate-100))',
+        // ...
+      },
+    },
+  },
+}
+
+\`\`\``,
+        {
+          useImgAltText: true,
+          gfm: true,
+        },
+      ),
+    ).toMatchInlineSnapshot(`
+      "Heading 1
+      用 CSS 变量的颜色值。而 xLog 真巧使用了 Tailwind，基本上所有的颜色应用场景都用了 Tailwind 自带的色值，但由于 Tailwind 本身自带的色值都是一个 固定的值，并不支持根据 Dark Mode 切换色值。
+
+      于是我萌生了一个想法，让自带的颜色能根据是否是暗黑模式去切换就行了。
+
+      首先第一是，要重新配置 Tailwind，覆写原来内置的所有的颜色，把固定的值全部改写成 CSS 变量。变量的前缀可以自定义，不要冲突就行了，这边就暂定为 tw-colors-i。比如我们需要类似这样的色值配置：
+
+      // tailwind.config.ts
+      module.exports = {
+        theme: {
+          colors: {
+            slate: {
+              50: 'rgb(var(--tw-colors-i-slate-50))',
+              100: 'rgb(var(--tw-colors-i-slate-100))',
+              // ...
+            },
+          },
+        },
+      }
+
+      \`"
+    `)
+  })
+})

src/pages/api/summary.ts

@@ -8,6 +8,7 @@ import { Metadata } from "@prisma/client"
 import { toGateway } from "~/lib/ipfs-parser"
 import prisma from "~/lib/prisma.server"
 import { cacheGet } from "~/lib/redis.server"
+import removeMarkdown from "remove-markdown"
 
 const model = new OpenAI({
   openAIApiKey: process.env.OPENAI_API_KEY,
@@ -53,7 +54,10 @@ const getOriginalSummary = async (cid: string, lang: string) => {
       }
 
       const res = await chain.call({
-        input_document: content,
+        input_document: removeMarkdown(content, {
+          useImgAltText: true,
+          gfm: true,
+        }),
       })
 
       console.timeEnd(`fetching summary ${cid}, ${lang}`)