feat(post): set tooltips for post elements

Octobug · Dec 15, 2023 · c4c432a · c4c432a
1 parent 92abc96
commit c4c432a
Show file tree

Hide file tree

Showing 6 changed files with 53 additions and 7 deletions.
diff --git a/.vitepress/theme/components/PostElements.vue b/.vitepress/theme/components/PostElements.vue
@@ -4,7 +4,10 @@
     :class="$style.elementList"
     hidden
   >
-    <span :class="$style.elementItem">
+    <span
+      :class="$style.elementItem"
+      :tooltip="moment(post.datetime).format('dddd')"
+    >
       {{ moment(post.datetime).format("LL") }}
     </span>
     <Dot
@@ -14,14 +17,18 @@
     <span
       v-if="post.location"
       :class="$style.elementItem"
+      :tooltip="post.community"
     >
       {{ post.location }}
     </span>
     <Dot
       v-if="post.readingTime"
       :class="$style.dot"
     />
-    <span :class="$style.elementItem">
+    <span
+      :class="$style.elementItem"
+      :tooltip="`${post.words} words`"
+    >
       {{ post.readingTime }}
     </span>
   </div>
@@ -67,11 +74,12 @@ onContentUpdated(() => {
 .elementList {
   border-top: 1px dashed var(--vp-c-divider);
   padding-top: 0.5rem;
+  padding-bottom: 2rem;
   margin-top: 0.5rem;
-  margin-bottom: 2rem;
   font-size: 0.88rem;
   white-space: nowrap;
   overflow-x: scroll;
+  overflow-y: hidden;
 
   /* Internet Explorer 10+ */
   -ms-overflow-style: none;
@@ -88,6 +96,34 @@ onContentUpdated(() => {
   color: var(--vp-c-text-3);
 }
 
+span.elementItem {
+  position: relative;
+  display: inline-block;
+}
+
+span.elementItem[tooltip]:after {
+  content: attr(tooltip);
+  position: absolute;
+  bottom: -80%;
+  left: 50%;
+  transform: translateX(-50%);
+  font-size: 10px;
+  line-height: 16px;
+  color: var(--vp-c-text-3);
+  background-color: var(--vp-c-default-soft);
+  border: 1px solid var(--vp-c-default-3);
+  border-radius: 3px;
+  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.05);
+  padding: 0 4px;
+  opacity: 0;
+  transition: 0.25s all;
+}
+
+span.elementItem[tooltip]:hover:after {
+  opacity: 1;
+  transition-delay: 0.5s;
+}
+
 .dot {
   color: var(--vp-c-text-2);
   margin: 0.5rem;

diff --git a/.vitepress/theme/posts.data.ts b/.vitepress/theme/posts.data.ts
@@ -18,9 +18,11 @@ export default createContentLoader(extendedConfig.mdfilePatterns, {
   includeSrc: true,
   transform(rawData) {
     return rawData.map(p => {
+      const rt = readingTime(p.src || "");
       p.frontmatter.title = extractTile(p.src || "");
       p.frontmatter.datetime = new Date(p.frontmatter.date);
-      p.frontmatter.readingTime = readingTime(p.src || "").text;
+      p.frontmatter.readingTime = rt.text;
+      p.frontmatter.words = rt.words;
       p.url = withBaseURL(p.url.replace("/README", ""));
       return p;
     }).sort((a, b) => {

diff --git a/.vitepress/theme/style.css b/.vitepress/theme/style.css
@@ -196,6 +196,11 @@ a.VPSocialLink[aria-label="mastodon"]>svg {
   margin-bottom: 12px;
 }
 
+/* hack for post elements's margin-bottom */
+.main div[name="post-elements"] + * {
+  margin-top: 0;
+}
+
 .main img {
   border-radius: 0.5rem;
   box-shadow: 0 0.5rem 0.8rem var(--ct-c-shadow);
@@ -209,7 +214,7 @@ a.VPSocialLink[aria-label="mastodon"]>svg {
   box-shadow: none;
 }
 
-/* image alt as subtitle */
+/* image subtitle */
 .main figcaption {
   margin-top: -1.3rem;
   margin-bottom: 1.5rem;

diff --git a/posts/an-https-issue-on-adas/README.md b/posts/an-https-issue-on-adas/README.md
@@ -1,6 +1,7 @@
 ---
 date: 2019-12-18
 location: 深圳 创维半导体设计大厦西座
+community: 南山区粤海街道高新区社区
 sort: Computer Science
 tags:
   - Network

diff --git a/posts/non-original-content-copyright-issues/README.md b/posts/non-original-content-copyright-issues/README.md
@@ -1,6 +1,7 @@
 ---
 date: 2023-12-14
-location: 深圳 西乡街道财富港大厦
+location: 深圳 财富港大厦
+community: 宝安区西乡街道渔业社区
 sort: Law
 tags:
   - Copyright

diff --git a/posts/pilot/README.md b/posts/pilot/README.md
@@ -1,6 +1,7 @@
 ---
 date: 2019-06-02
-location: 深圳 西乡街道财富港大厦
+location: 深圳 财富港大厦
+community: 宝安区西乡街道渔业社区
 sort: Miscellaneous
 tags:
   - Small Talk