diff --git a/docs/.vitepress/theme/utils/date.ts b/docs/.vitepress/theme/utils/date.ts
new file mode 100644
index 00000000..f64b3d9c
--- /dev/null
+++ b/docs/.vitepress/theme/utils/date.ts
@@ -0,0 +1,26 @@
+// data format transofmation utility for both feed and pageinfo generation
+import dayjs from 'dayjs'
+import utc from 'dayjs/plugin/utc.js'
+import relativeTime from 'dayjs/plugin/relativeTime'
+import 'dayjs/locale/en'
+
+dayjs.extend(utc)
+dayjs.locale('en')
+dayjs.extend(relativeTime)
+
+export function getDate(date: string | Date | undefined): string | null {
+    if (date) {
+        const time = dayjs(date instanceof Date ? date : date.trim())
+        if (time.isValid()) {
+            const currentTime = dayjs(date).utc().local().format('YYYY-MM-DD')
+            return currentTime
+        }
+    }
+    return null
+}
+
+export function getFromNow(date: string | Date): string | null {
+    if (date) return dayjs(date).utc().local().fromNow()
+
+    return null
+}
diff --git a/docs/.vitepress/theme/utils/index.ts b/docs/.vitepress/theme/utils/index.ts
new file mode 100644
index 00000000..68fd9662
--- /dev/null
+++ b/docs/.vitepress/theme/utils/index.ts
@@ -0,0 +1,4 @@
+// exporting all three utilities as module for importing from other components
+export * from './date'
+export * from './pageInfo'
+export * from './md'
diff --git a/docs/.vitepress/theme/utils/md.ts b/docs/.vitepress/theme/utils/md.ts
new file mode 100644
index 00000000..e1ef3016
--- /dev/null
+++ b/docs/.vitepress/theme/utils/md.ts
@@ -0,0 +1,29 @@
+// markdown utility for replacing and swapping content detils
+export function renderMarkdown(markdownText = '') {
+    const htmlText = markdownText
+        .replace(/^### (.*$)/gim, '<h3>$1</h3>')
+        .replace(/^## (.*$)/gim, '<h2>$1</h2>')
+        .replace(/^# (.*$)/gim, '<h1>$1</h1>')
+        .replace(/^\> (.*$)/gim, '<blockquote>$1</blockquote>')
+        .replace(/\*\*(.*)\*\*/gim, '<b>$1</b>')
+        .replace(/\*(.*)\*/gim, '<i>$1</i>')
+        .replace(/!\[(.*?)\]\((.*?)\)/gim, "<img alt='$1' src='$2' />")
+        .replace(/\[(.*?)\]\((.*?)\)/gim, "<a href='$2'>$1</a>")
+        .replace(/`(.*?)`/gim, '<code>$1</code>')
+        .replace(/\n$/gim, '<br />')
+
+    return htmlText.trim()
+}
+
+export function renderCommitMessage(msg: string) {
+    return renderMarkdown(msg).replace(
+        /\#([0-9]+)/g,
+        "<a href='https://github.com/andatoshiki/toshiki-notebook/issues/$1'>#$1</a>"
+    )
+}
+export const EXTERNAL_URL_RE = /^[a-z]+:/i
+export const PATHNAME_PROTOCOL_RE = /^pathname:\/\//
+
+export function isExternal(path: string): boolean {
+    return EXTERNAL_URL_RE.test(path)
+}
diff --git a/docs/.vitepress/theme/utils/pageInfo.ts b/docs/.vitepress/theme/utils/pageInfo.ts
new file mode 100644
index 00000000..fdcd4f2e
--- /dev/null
+++ b/docs/.vitepress/theme/utils/pageInfo.ts
@@ -0,0 +1,43 @@
+// utility features of getting documentation page details for extrating page metadata for use of pageinfo component under doc title
+import type { PageInfo } from '../types'
+
+export function getWords(content: string): RegExpMatchArray | null {
+    return content.match(/[\w\d\s,.\u00C0-\u024F\u0400-\u04FF]+/giu)
+}
+
+export function getChinese(content: string): RegExpMatchArray | null {
+    return content.match(/[\u4E00-\u9FD5]/gu)
+}
+
+export function getEnWordCount(content: string): number {
+    return (
+        getWords(content)?.reduce<number>(
+            (accumulator, word) => accumulator + (word.trim() === '' ? 0 : word.trim().split(/\s+/u).length),
+            0
+        ) || 0
+    )
+}
+
+export function getCnWordCount(content: string): number {
+    return getChinese(content)?.length || 0
+}
+
+export function getWordNumber(content: string): number {
+    return getEnWordCount(content) + getCnWordCount(content)
+}
+
+export function getReadingTime(content: string, cnWordPerMinute = 350, enwordPerMinute = 160): PageInfo {
+    const count = getWordNumber(content || '')
+    const words = count >= 1000 ? `${Math.round(count / 100) / 10}k` : count
+
+    const enWord = getEnWordCount(content)
+    const cnWord = getCnWordCount(content)
+
+    const readingTime = cnWord / cnWordPerMinute + enWord / enwordPerMinute
+    const readTime = readingTime < 1 ? '1' : Number.parseInt(`${readingTime}`, 10)
+
+    return {
+        readTime,
+        words,
+    }
+}