feat(post): show title, date, location

.vitepress/theme/components/Dot.vue

@@ -0,0 +1,12 @@
+<template>
+  <span :class="$style.dot">•</span>
+</template>
+
+<style scoped module>
+.dot {
+  color: var(--vp-c-text-3);
+  font-size: 0.45rem;
+  margin: 0 0.3rem;
+  vertical-align: bottom;
+}
+</style>

.vitepress/theme/components/PostHeader.vue

@@ -0,0 +1,48 @@
+<template>
+  <div :class="$style.postHeader">
+    <h1 :class="$style.title">
+      {{ frontmatter.title }}
+    </h1>
+    <div :class="$style.elementList">
+      <Dot />
+      <span :class="$style.elementItem">
+        {{ moment(frontmatter.date).format("LL") }}
+      </span>
+      <Dot v-if="frontmatter.location" />
+      <span :class="$style.elementItem">
+        {{ frontmatter.location }}
+      </span>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import moment from "moment-timezone";
+import { useData } from "vitepress";
+import Dot from "./Dot.vue";
+
+const { frontmatter } = useData();
+</script>
+
+<style module scoped>
+.postHeader {
+  padding-bottom: 2rem;
+}
+
+.title {
+  padding-bottom: 1rem;
+  margin-bottom: 0.3em;
+  font-size: 1.8em;
+  font-weight: 600;
+  border-bottom: 1px dashed var(--vp-c-divider);
+}
+
+.elementList {
+  color: var(--vp-c-text-3);
+  font-size: 0.9rem;
+}
+
+.elementItem {
+  margin-right: 1rem;
+}
+</style>

.vitepress/theme/components/Profile.vue

@@ -5,7 +5,7 @@
       {{ nickname }}
     </h1>
     <p :class="$style.bio">
-      <span :class="$style.dot">•</span>
+      <Dot />
       <span>{{ bio }}</span>
     </p>
     <ClientOnly>
@@ -19,6 +19,7 @@ import { useData } from "vitepress";
 const { theme } = useData();
 const { nickname, bio } = theme.value;
 import Avatar from "./Avatar.vue";
+import Dot from "./Dot.vue";
 import ProfileExtra from "./ProfileExtra.vue";
 </script>
 
@@ -34,23 +35,17 @@ import ProfileExtra from "./ProfileExtra.vue";
 .nickname {
   display: flex;
   align-items: center;
-  font-size: 2em;
+  font-size: 2rem;
   font-weight: 500;
 }
 
 .bio {
   margin: 1em 0;
+  margin-left: -0.5rem;
   color: var(--vp-c-neutral);
   white-space: nowrap;
 }
 
-.dot {
-  color: var(--vp-c-text-3);
-  font-size: x-small;
-  margin: 0 6px;
-  vertical-align: bottom;
-}
-
 @media (max-width: 768px) {
   .nickname {
     font-size: 1.7em;

.vitepress/theme/components/ProfileExtra.vue

@@ -35,7 +35,7 @@ const now = {
 
 <style scoped module>
 .extra {
-  padding-left: 20px;
+  padding-left: 1.2rem;
   text-align: left;
   color: var(--vp-c-text-2);
 }

.vitepress/theme/pages/Layout.vue

@@ -1,7 +1,7 @@
 <template>
   <Layout>
     <template #doc-before>
-      <!-- <Category /> -->
+      <PostHeader />
     </template>
     <template #doc-after>
       <!-- <Comments /> -->
@@ -11,6 +11,8 @@
 
 <script lang="ts" setup>
 import DefaultTheme from "vitepress/theme";
+import PostHeader from "../components/PostHeader.vue";
+
 const { Layout } = DefaultTheme;
 </script>
 

posts/pilot.md

@@ -1,7 +1,7 @@
 ---
 title: Pilot
 date: 2019-06-02
-location: 西乡街道，深圳
+location: 深圳，西乡街道
 sort: Miscellaneous
 tags:
   - Small Talk