diff --git a/package.json b/package.json index cfb98ab8..f141f18e 100644 --- a/package.json +++ b/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", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 5ad54fed..76ed1ab5 100644 --- a/pnpm-lock.yaml +++ b/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'} diff --git a/src/pages/api/summary.test.ts b/src/pages/api/summary.test.ts new file mode 100644 index 00000000..b62faf34 --- /dev/null +++ b/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))', + // ... + }, + }, + }, + } + + \`" + `) + }) +}) diff --git a/src/pages/api/summary.ts b/src/pages/api/summary.ts index 54a43e41..8c7bf66b 100644 --- a/src/pages/api/summary.ts +++ b/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}`)