feat: add reading time (#509)

doocs · Jan 8, 2025 · de2cc52 · de2cc52
1 parent fc1712f
commit de2cc52
Show file tree

Hide file tree

Showing 8 changed files with 155 additions and 67 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -45,6 +45,7 @@
     "pinia": "^2.2.7",
     "qiniu-js": "^3.4.2",
     "radix-vue": "^1.9.10",
+    "reading-time": "^1.5.0",
     "tailwind-merge": "^2.5.5",
     "tailwindcss-animate": "^1.0.7",
     "tiny-oss": "^0.5.1",

diff --git a/src/components/CodemirrorEditor/EditorHeader/index.vue b/src/components/CodemirrorEditor/EditorHeader/index.vue
@@ -71,9 +71,9 @@ const formatItems = [
 const store = useStore()
 const displayStore = useDisplayStore()
 
-const { isDark, isCiteStatus, output, primaryColor } = storeToRefs(store)
+const { isDark, isCiteStatus, isCountStatus, output, primaryColor } = storeToRefs(store)
 
-const { toggleDark, editorRefresh, citeStatusChanged } = store
+const { toggleDark, editorRefresh, citeStatusChanged, countStatusChanged } = store
 
 const copyMode = useStorage(addPrefix(`copyMode`), `txt`)
 const source = ref(``)
@@ -173,6 +173,13 @@ const formatOptions = ref<Format[]>([`rgb`, `hex`, `hsl`, `hsv`])
           >
             微信外链转底部引用
           </MenubarCheckboxItem>
+          <MenubarSeparator />
+          <MenubarCheckboxItem
+            :checked="isCountStatus"
+            @click="countStatusChanged()"
+          >
+            统计字数和阅读时间
+          </MenubarCheckboxItem>
         </MenubarContent>
       </MenubarMenu>
       <EditDropdown />
@@ -384,6 +391,31 @@ const formatOptions = ref<Format[]>([`rgb`, `hex`, `hsl`, `hsv`])
               </Button>
             </div>
           </div>
+          <div class="space-y-2">
+            <h2>统计字数和阅读时间</h2>
+            <div class="grid grid-cols-5 justify-items-center gap-2">
+              <Button
+                class="w-full"
+                variant="outline"
+                :class="{
+                  'border-black dark:border-white': store.isCountStatus,
+                }"
+                @click="!store.isCountStatus && store.countStatusChanged()"
+              >
+                开启
+              </Button>
+              <Button
+                class="w-full"
+                variant="outline"
+                :class="{
+                  'border-black dark:border-white': !store.isCountStatus,
+                }"
+                @click="store.isCountStatus && store.countStatusChanged()"
+              >
+                关闭
+              </Button>
+            </div>
+          </div>
           <div class="space-y-2">
             <h2>段落首行缩进</h2>
             <div class="grid grid-cols-5 justify-items-center gap-2">

diff --git a/src/config/theme.ts b/src/config/theme.ts
@@ -84,6 +84,7 @@ const defaultTheme: Theme = {
       'border-radius': `6px`,
       'color': `rgba(0,0,0,0.5)`,
       'background': `var(--blockquote-background)`,
+      'margin-bottom': `1em`,
     },
 
     // 引用内容
@@ -334,6 +335,7 @@ const graceTheme = toMerged(defaultTheme, {
       'border-radius': `6px`,
       'color': `rgba(0,0,0,0.6)`,
       'box-shadow': `0 4px 6px rgba(0,0,0,0.05)`,
+      'margin-bottom': `1em`,
     },
 
     'blockquote_p': {

diff --git a/src/stores/index.ts b/src/stores/index.ts
@@ -1,9 +1,10 @@
+import type { ReadTimeResults } from 'reading-time'
 import DEFAULT_CONTENT from '@/assets/example/markdown.md?raw'
 import DEFAULT_CSS_CONTENT from '@/assets/example/theme-css.txt?raw'
 import { altKey, codeBlockThemeOptions, colorOptions, fontFamilyOptions, fontSizeOptions, legendOptions, shiftKey, themeMap, themeOptions } from '@/config'
 import { addPrefix, css2json, customCssWithTemplate, customizeTheme, downloadMD, exportHTML, formatDoc } from '@/utils'
-import { initRenderer } from '@/utils/renderer'
 
+import { initRenderer } from '@/utils/renderer'
 import CodeMirror from 'codemirror'
 import { marked } from 'marked'
 
@@ -24,6 +25,10 @@ export const useStore = defineStore(`store`, () => {
   const isCiteStatus = useStorage(`isCiteStatus`, false)
   const toggleCiteStatus = useToggle(isCiteStatus)
 
+  // 是否统计字数和阅读时间
+  const isCountStatus = useStorage(`isCountStatus`, false)
+  const toggleCountStatus = useToggle(isCountStatus)
+
   // 是否开启段落首行缩进
   const isUseIndent = useStorage(addPrefix(`use_indent`), false)
   const toggleUseIndent = useToggle(isUseIndent)
@@ -174,14 +179,23 @@ export const useStore = defineStore(`store`, () => {
     isUseIndent: isUseIndent.value,
   })
 
+  const readingTime = ref<ReadTimeResults | null>(null)
+
   // 更新编辑器
   const editorRefresh = () => {
     codeThemeChange()
-    renderer.reset({ citeStatus: isCiteStatus.value, legend: legend.value, isUseIndent: isUseIndent.value })
+    renderer.reset({ citeStatus: isCiteStatus.value, legend: legend.value, isUseIndent: isUseIndent.value, countStatus: isCountStatus.value })
 
-    const { markdownContent } = renderer.parseFrontMatterAndContent(editor.value!.getValue())
+    const { markdownContent, readingTime: readingTimeResult } = renderer.parseFrontMatterAndContent(editor.value!.getValue())
+    console.log(`Reading time result:`, readingTimeResult)
+    readingTime.value = readingTimeResult
     let outputTemp = marked.parse(markdownContent) as string
 
+    console.log(readingTime.value)
+
+    // 阅读时间及字数统计
+    outputTemp = renderer.buildReadingTime(readingTimeResult) + outputTemp
+
     // 去除第一行的 margin-top
     outputTemp = outputTemp.replace(/(style=".*?)"/, `$1;margin-top: 0"`)
     // 引用脚注
@@ -275,6 +289,7 @@ export const useStore = defineStore(`store`, () => {
   const resetStyle = () => {
     isCiteStatus.value = false
     isMacCodeBlock.value = true
+    isCountStatus.value = false
 
     theme.value = themeOptions[0].value
     fontFamily.value = fontFamilyOptions[0].value
@@ -366,6 +381,10 @@ export const useStore = defineStore(`store`, () => {
     toggleCiteStatus()
   })
 
+  const countStatusChanged = withAfterRefresh(() => {
+    toggleCountStatus()
+  })
+
   const useIndentChanged = withAfterRefresh(() => {
     toggleUseIndent()
   })
@@ -427,6 +446,9 @@ export const useStore = defineStore(`store`, () => {
     isUseIndent,
     useIndentChanged,
 
+    isCountStatus,
+    countStatusChanged,
+
     output,
     editor,
     cssEditor,
@@ -436,6 +458,7 @@ export const useStore = defineStore(`store`, () => {
     primaryColor,
     codeBlockTheme,
     legend,
+    readingTime,
 
     editorRefresh,
 

diff --git a/src/types/index.ts b/src/types/index.ts
@@ -26,6 +26,7 @@ export interface IOpts {
   isUseIndent: boolean
   legend?: string
   citeStatus?: boolean
+  countStatus?: boolean
 }
 
 export type ThemeStyles = Record<Block | Inline, ExtendedProperties>

diff --git a/src/utils/renderer.ts b/src/utils/renderer.ts
@@ -1,14 +1,18 @@
 import type { ExtendedProperties, IOpts, ThemeStyles } from '@/types'
 import type { PropertiesHyphen } from 'csstype'
 import type { Renderer, RendererObject, Tokens } from 'marked'
+import type { ReadTimeResults } from 'reading-time'
 import { cloneDeep, toMerged } from 'es-toolkit'
 import frontMatter from 'front-matter'
 
 import hljs from 'highlight.js'
 import { marked } from 'marked'
 import mermaid from 'mermaid'
+import readingTime from 'reading-time'
+
 import { getStyleString } from '.'
 import markedAlert from './MDAlert'
+
 import { MDKatex } from './MDKatex'
 
 marked.setOptions({
@@ -109,6 +113,36 @@ const macCodeSvg = `
   </svg>
 `.trim()
 
+interface ParseResult {
+  yamlData: Record<string, any>
+  markdownContent: string
+  readingTime: ReadTimeResults
+}
+
+function parseFrontMatterAndContent(markdownText: string): ParseResult {
+  try {
+    const parsed = frontMatter(markdownText)
+    const yamlData = parsed.attributes
+    const markdownContent = parsed.body
+
+    const readingTimeResult = readingTime(markdownContent)
+
+    return {
+      yamlData: yamlData as Record<string, any>,
+      markdownContent,
+      readingTime: readingTimeResult,
+    }
+  }
+  catch (error) {
+    console.error(`Error parsing front-matter:`, error)
+    return {
+      yamlData: {},
+      markdownContent: markdownText,
+      readingTime: readingTime(markdownText),
+    }
+  }
+}
+
 export function initRenderer(opts: IOpts) {
   const footnotes: [number, string, string][] = []
   let footnoteIndex: number = 0
@@ -121,19 +155,6 @@ export function initRenderer(opts: IOpts) {
     return getStyles(styleMapping, tag, addition)
   }
 
-  function parseFrontMatterAndContent(markdownText: string) {
-    try {
-      const parsed = frontMatter(markdownText)
-      const yamlData = parsed.attributes
-      const markdownContent = parsed.body
-      return { yamlData, markdownContent }
-    }
-    catch (error) {
-      console.error(`Error parsing front-matter:`, error)
-      return { yamlData: {}, markdownContent: markdownText }
-    }
-  }
-
   function styledContent(styleLabel: string, content: string, tagName?: string): string {
     const tag = tagName ?? styleLabel
     return `<${tag} ${styles(styleLabel)}>${content}</${tag}>`
@@ -156,6 +177,20 @@ export function initRenderer(opts: IOpts) {
     marked.use(markedAlert({ styles: styleMapping }))
   }
 
+  function buildReadingTime(readingTime: ReadTimeResults): string {
+    if (!opts.countStatus) {
+      return ``
+    }
+    if (!readingTime.words) {
+      return ``
+    }
+    return `
+      <blockquote ${styles(`blockquote`)}>
+        <p ${styles(`blockquote_p`)}>字数 ${readingTime?.words}，阅读大约需 ${Math.ceil(readingTime?.minutes)} 分钟</p>
+      </blockquote>
+    `
+  }
+
   const buildFootnotes = () => {
     if (!footnotes.length) {
       return ``
@@ -305,6 +340,7 @@ export function initRenderer(opts: IOpts) {
     setOptions,
     reset,
     parseFrontMatterAndContent,
+    buildReadingTime,
     createContainer(content: string) {
       return styledContent(`container`, content, `section`)
     },