feat(posts): archives page for all posts

.vitepress/config.utils.ts

@@ -12,5 +12,8 @@ export const giscus = {
 export const gMeasurementID = env.G_MEASUREMENT_ID || "";
 
 export function withBaseURL(urlPath: string) {
+  if (BASE_URL && urlPath.includes(BASE_URL)) {
+    return urlPath;
+  }
   return path.join(BASE_URL || "/", urlPath);
 }

.vitepress/theme/components/Container.vue

@@ -0,0 +1,32 @@
+<template>
+  <div :class="$style.container">
+    <slot />
+  </div>
+</template>
+
+<style module scoped>
+.container {
+  justify-content: center;
+  padding: 1rem 4rem 0;
+}
+
+@media (min-width: 768px) {
+  .container {
+    padding: 3rem 6rem 0;
+  }
+}
+
+@media (min-width: 960px) {
+  .container {
+    padding: 3rem 4rem 0;
+    display: flex;
+  }
+}
+
+@media (min-width: 1280px) {
+  .container {
+    padding: 4rem 8rem 0;
+    display: flex;
+  }
+}
+</style>

.vitepress/theme/components/PostElements.vue

@@ -1,5 +1,9 @@
 <template>
-  <div :class="$style.elementList">
+  <div
+    id="post-elements"
+    :class="$style.elementList"
+    hidden
+  >
     <span :class="$style.elementItem">
       {{ moment(post.datetime).format("LL") }}
     </span>
@@ -38,17 +42,29 @@ function getPostData() {
   return findPost(allPosts, page.value)?.frontmatter || frontmatter.value;
 }
 
+function adjustPosition() {
+  const elements = document.getElementById("post-elements");
+  const title = document.querySelector(".main h1");
+  const parent = title?.parentElement;
+  if (elements && title && parent) {
+    const newBlock = elements.cloneNode(true);
+    (<Element>newBlock).removeAttribute("hidden");
+    parent.insertBefore(newBlock, title.nextSibling);
+  }
+}
+
 onContentUpdated(() => {
   post.value = getPostData();
+  setTimeout(adjustPosition, 0);
 });
 </script>
 
 <style module scoped>
 .elementList {
   border-top: 1px dashed var(--vp-c-divider);
   padding-top: 0.5rem;
-  margin-top: 3rem;
-  margin-bottom: -5rem;
+  margin-top: 0.5rem;
+  margin-bottom: 2rem;
   font-size: 0.88rem;
 }
 

.vitepress/theme/components/PostList.vue

@@ -1,5 +1,8 @@
 <template>
   <div :class="$style.postList">
+    <span :class="[$style.date, $style.hack]">
+      {{ moment(new Date()).format(dateFormat) }}
+    </span>
     <div
       v-for="post in postList"
       :key="post.url"
@@ -64,4 +67,8 @@ defineProps({
   font-size: 0.85em;
   color: var(--vp-c-text-3);
 }
+
+.hack {
+  visibility: hidden;
+}
 </style>

.vitepress/theme/index.ts

@@ -1,15 +1,16 @@
 // https://vitepress.dev/guide/custom-theme
 import Theme from "vitepress/theme";
 import "./style.css";
-// import Archives from "./components/Archives.vue";
-// import Tags from "./components/Tags.vue";
 import Home from "./pages/Home.vue";
 import Layout from "./pages/Layout.vue";
+import Posts from "./pages/Posts.vue";
+// import Tags from "./components/Tags.vue";
 
 export default {
   extends: Theme,
   Layout,
   enhanceApp({ app }) {
     app.component("Home", Home);
+    app.component("Posts", Posts);
   },
 };

.vitepress/theme/pages/Home.vue

@@ -1,73 +1,49 @@
 <template>
-  <div :class="$style.column">
+  <Container>
     <div :class="$style.aside">
       <Profile />
     </div>
     <div :class="$style.homefeed">
       <HomeFeed />
     </div>
-  </div>
+  </Container>
 </template>
 
 <script lang="ts" setup>
+import Container from "../components/Container.vue";
 import Profile from "../components/Profile.vue";
 import HomeFeed from "../components/HomeFeed.vue";
 </script>
 
 <style scoped module>
-.column {
-  justify-content: center;
-}
-
 .aside {
-  padding: 2rem 3rem;
-}
-
-.homefeed {
-  padding: 0 4rem;
+  padding: 2rem;
+  padding-top: 0;
 }
 
 @media (min-width: 768px) {
   .aside {
-    padding: 3rem;
-  }
-
-  .homefeed {
-    padding: 0 6rem;
+    padding: 0 3rem 3rem;
   }
 }
 
 @media (min-width: 960px) {
-  .column {
-    padding: 0rem 4rem;
-    display: flex;
-  }
-
-  .aside {
-    padding: 3rem;
-  }
-
   .homefeed {
     max-width: 38rem;
     min-width: 38rem;
-    padding: 3rem 3rem 0;
+    padding: 0 3rem;
   }
 }
 
 @media (min-width: 1280px) {
-  .column {
-    padding: 0rem 8rem;
-    display: flex;
-  }
-
   .aside {
-    padding: 4rem;
+    padding: 0 4rem;
   }
 
   .homefeed {
     max-width: 48rem;
     min-width: 48rem;
-    padding: 4rem 4rem 0;
+    padding: 0 4rem;
   }
 }
 </style>

.vitepress/theme/pages/Posts.vue

@@ -0,0 +1,87 @@
+<template>
+  <Container :class="$style.container">
+    <div :class="$style.main">
+      <div :class="$style.amountBox">
+        <div :class="$style.amountBadge">
+          All Posts
+          <span :class="$style.number">{{ allPosts.length }}</span>
+        </div>
+      </div>
+      <div
+        v-for="year of years"
+        :key="year"
+      >
+        <h1 :class="$style.year">
+          <a
+            :id="year"
+            :href="`#${year}`"
+          >{{ year }}</a>
+        </h1>
+        <div :class="$style.yearPosts">
+          <PostList
+            date-format="MMM DD"
+            :post-list="postsByYear[year]"
+          />
+        </div>
+      </div>
+    </div>
+  </Container>
+</template>
+
+<script lang="ts" setup>
+import { data as allPosts } from "../posts.data";
+import Container from "../components/Container.vue";
+import PostList from "../components/PostList.vue";
+
+const postsByYear = {};
+allPosts.forEach((post) => {
+  const year = post.frontmatter.datetime.slice(0, 4);
+  postsByYear[year] = postsByYear[year] || [];
+  postsByYear[year].push(post);
+});
+const years = Object.keys(postsByYear).sort().reverse();
+</script>
+
+<style module scoped>
+.container {
+  display: block;
+}
+
+.main {
+  margin: 0 auto;
+  max-width: 42rem;
+  padding: 0 0 2rem;
+}
+
+.amountBox {
+  color: var(--vp-c-default-1);
+  text-align: right;
+}
+
+.amountBadge {
+  background-color: var(--vp-c-default-soft);
+  border-radius: 4px;
+  padding: 0 0 0 6px;
+  display: inline-block;
+}
+
+.number {
+  color: var(--vp-c-text-3);
+  background-color: var(--vp-c-default-soft);
+  padding: 2px 6px 2px 5px;
+  margin-left: 1px;
+  border-radius: 0 4px 4px 0;
+}
+
+.year {
+  color: var(--vp-c-neutral);
+  font-size: 1.4rem;
+  font-weight: 500;
+  font-style: italic;
+  padding-top: 1rem;
+}
+
+.yearPosts {
+  padding-left: 2rem;
+}
+</style>

.vitepress/theme/style.css

@@ -162,11 +162,6 @@ footer a {
 }
 
 /* CSS for a Post */
-/* PostElements Workaround */
-.main h1 {
-  margin-bottom: 5rem;
-}
-
 .main img {
   border-radius: 0.5rem;
   box-shadow: 0 0.5rem 0.8rem var(--ct-c-shadow);

pages/posts.md

@@ -4,4 +4,4 @@ description: All Posts
 layout: page
 ---
 
-👷 🚧
+<Posts />