feat: add reading time (#509)

package-lock.json

@@ -33,6 +33,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",
@@ -12496,9 +12497,10 @@
     },
     "node_modules/mdast-util-to-string": {
       "version": "4.0.0",
-      "resolved": "https://registry.npmmirror.com/mdast-util-to-string/-/mdast-util-to-string-4.0.0.tgz",
+      "resolved": "https://registry.npmjs.org/mdast-util-to-string/-/mdast-util-to-string-4.0.0.tgz",
       "integrity": "sha512-0H44vDimn51F0YwvxSJSm0eCDOJTRlmN0R1yBh4HLj9wiV1Dn0QoXGbvFAWj2hSItVTlCmBF1hqKlIyUBVFLPg==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@types/mdast": "^4.0.0"
       },
@@ -15945,6 +15947,12 @@
         "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
+    "node_modules/reading-time": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/reading-time/-/reading-time-1.5.0.tgz",
+      "integrity": "sha512-onYyVhBNr4CmAxFsKS7bz+uTLRakypIe4R+5A824vBSkQy/hB3fZepoVEf8OVAxzLvK+H/jm9TzpI3ETSm64Kg==",
+      "license": "MIT"
+    },
     "node_modules/rechoir": {
       "version": "0.6.2",
       "resolved": "https://registry.npmmirror.com/rechoir/-/rechoir-0.6.2.tgz",

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",

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">

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': {

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,
 

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>

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`)
     },

src/views/CodemirrorEditor.vue

@@ -12,7 +12,7 @@ import CodeMirror from 'codemirror'
 
 const store = useStore()
 const displayStore = useDisplayStore()
-const { isDark, output, editor } = storeToRefs(store)
+const { isDark, output, editor, readingTime } = storeToRefs(store)
 const { isShowCssEditor } = storeToRefs(displayStore)
 
 const {
@@ -363,29 +363,18 @@ onMounted(() => {
 
 <template>
   <div ref="container" class="container flex flex-col">
-    <EditorHeader
+    <EditorHeader @add-format="addFormat" @format-content="formatContent" @start-copy="startCopy" @end-copy="endCopy" />
-      @add-format="addFormat"
-      @format-content="formatContent"
-      @start-copy="startCopy"
-      @end-copy="endCopy"
-    />
     <main class="container-main flex-1">
       <div class="container-main-section h-full flex border-1">
         <PostSlider />
         <div
-          ref="codeMirrorWrapper"
+          ref="codeMirrorWrapper" class="codeMirror-wrapper flex-1 border-r-1" :class="{
-          class="codeMirror-wrapper flex-1 border-r-1"
-          :class="{
             'order-1': !store.isEditOnLeft,
           }"
         >
           <ContextMenu>
             <ContextMenuTrigger>
-              <textarea
+              <textarea id="editor" type="textarea" placeholder="Your markdown text here." />
-                id="editor"
-                type="textarea"
-                placeholder="Your markdown text here."
-              />
             </ContextMenuTrigger>
             <ContextMenuContent class="w-64">
               <ContextMenuItem inset @click="toggleShowUploadImgDialog()">
@@ -414,12 +403,7 @@ onMounted(() => {
             </ContextMenuContent>
           </ContextMenu>
         </div>
-        <div
+        <div id="preview" ref="preview" :span="isShowCssEditor ? 8 : 12" class="preview-wrapper flex-1 p-5">
-          id="preview"
-          ref="preview"
-          :span="isShowCssEditor ? 8 : 12"
-          class="preview-wrapper flex-1 p-5"
-        >
           <div id="output-wrapper" :class="{ output_night: !backLight }">
             <div class="preview border shadow-xl">
               <section id="output" v-html="output" />
@@ -434,11 +418,11 @@ onMounted(() => {
         </div>
         <CssEditor class="flex-1" />
       </div>
-    </main>
+      <footer class="flex flex-1 justify-end pr-5 text-[12px]">
+        字数 {{ readingTime?.words }}， 阅读大约需 {{ Math.ceil(readingTime?.minutes ?? 0) }} 分钟
+      </footer>
 
-    <UploadImgDialog
+      <UploadImgDialog @upload-image="uploadImage" />
-      @upload-image="uploadImage"
-    />
 
       <InsertFormDialog />
 
@@ -460,6 +444,7 @@ onMounted(() => {
           </AlertDialogFooter>
         </AlertDialogContent>
       </AlertDialog>
+    </main>
   </div>
 </template>