From d7e5ee61575c0b57f56e46c5c8c42ecbc16c2bb4 Mon Sep 17 00:00:00 2001
From: "@andatoshiki" <hello@toshiki.dev>
Date: Sat, 16 Sep 2023 21:43:13 -0700
Subject: [PATCH] feat(pageinfo): introduce new `pageinfo` vue components for
 documentatiom details display as `div` blocks under each document title
 attribute in markdown formatting structure

---
 .../theme/components/layout/PageInfo.vue      | 52 +++++++++++++++++++
 1 file changed, 52 insertions(+)
 create mode 100644 docs/.vitepress/theme/components/layout/PageInfo.vue

diff --git a/docs/.vitepress/theme/components/layout/PageInfo.vue b/docs/.vitepress/theme/components/layout/PageInfo.vue
new file mode 100644
index 00000000..62c75efd
--- /dev/null
+++ b/docs/.vitepress/theme/components/layout/PageInfo.vue
@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { useData } from 'vitepress'
+import { getDate, getFromNow } from '../../utils'
+
+defineProps<{
+    readTime: string
+    words: string
+}>()
+const defaultAuthor = 'Anda Toshiki'
+const author = ref(defaultAuthor)
+const { frontmatter, page } = useData()
+
+const publishedTime = getDate(frontmatter.value?.date)
+
+if (frontmatter.value?.author) author.value = frontmatter.value?.author
+
+const lastUpdatedDate = computed(() => new Date(page.value.lastUpdated!))
+const isoDatetime = computed(() => lastUpdatedDate.value.toISOString())
+const timeFormNow = getFromNow(isoDatetime.value)
+</script>
+
+<template>
+    <div>
+        <section
+            class="border-b-1 border-[var(--vp-c-divider)] w-full border-b-solid mt-[24px] pb-[12px] flex gap-[12px] mb-[12px] flex-wrap max-w-[85%]"
+        >
+            <div class="flex gap-[4px] items-center">
+                <octicon:feed-person-16 />
+                Author:<span>
+                    {{ author }}
+                </span>
+            </div>
+            <div v-if="publishedTime" class="flex gap-[4px] items-center">
+                <eos-icons:modified-date />
+                Published on:<span>{{ publishedTime }}</span>
+            </div>
+            <div class="flex gap-[4px] items-center">
+                <radix-icons:update />
+                Last updated:<span>{{ timeFormNow }}</span>
+            </div>
+            <div class="flex gap-[4px] items-center">
+                <bi:file-earmark-word-fill />
+                Word count:<span>{{ words }}</span>
+            </div>
+            <div class="flex gap-[4px] items-center">
+                <ooui:clock />
+                Reading:<span>{{ readTime }} min</span>
+            </div>
+        </section>
+    </div>
+</template>