feat: basic blog

add blog interface #11

.vitepress/config.mts

@@ -22,12 +22,16 @@ export default defineConfig({
     i18nRouting: true,
     // https://vitepress.dev/reference/default-theme-config
     nav: [
-      { text: 'Home', link: './' },
-      { text: 'About', link: './about' },
-      { text: 'Contact', link: './contact' },
-      { text: 'Bees', link: './bees' },
-      { text: 'Privacy', link: './privacy' },
+      { text: 'Home', link: '/en/' },
+      { text: 'About', link: '/en/about', activeMatch: '\/.*\/about.*' },
+      { text: 'Blog', link: '/en/blog', activeMatch: '\/.*\/(blog|posts).*' },
+      { text: 'Contact', link: '/en/contact' },
+      { text: 'Bees', link: '/en/bees' },
+      { text: 'Privacy', link: '/en/privacy' },
     ],
+    search: {
+      provider: 'local'
+    },
 
     // sidebar: [
     //   {

.vitepress/theme/CodeHiveLayout.vue

@@ -1,8 +1,14 @@
 <!--.vitepress/theme/CodeHiveLayout.vue-->
 <script setup lang="ts">
 import DefaultTheme from 'vitepress/theme'
+import { useData } from 'vitepress'
+import { data as posts } from '../../src/blog.data';
+import formatDate from '../../src/formatDate';
 
 const { Layout } = DefaultTheme
+const { frontmatter } = useData()
+
+
 </script>
 
 <template>
@@ -17,10 +23,43 @@ const { Layout } = DefaultTheme
         href="https://github.com/codehivetx">GitHub</a>
       </div>
     </template>
+    <template #doc-before v-if="frontmatter.date">
+      <h1 class="blogtitle">{{ frontmatter.title }}</h1>
+      <p class="blogdate">
+        <b>Date:</b> {{ formatDate(frontmatter.date)[1] }}
+      </p>
+    </template>
+    <template #doc-after v-if="frontmatter.index">
+      <ul>
+        <li class="bloglink" v-for="post of posts">
+          <a :href="post.url"><h1><b>{{ post.date[1] }}</b>:  {{ post.title }}</h1></a>
+        </li>
+      </ul>
+    </template>
   </Layout>
 </template>
 
 <style scoped>
+
+li.bloglink {
+  list-style-type: circle;
+  margin-left: 3em;
+}
+
+li.bloglink h1 {
+  font-size: x-large;
+}
+
+li.bloglink a:hover {
+  color: goldenrod;
+}
+
+h1.blogtitle {
+  font-size: xx-large;
+  font-family: Georgia, 'Times New Roman', Times, serif;
+  margin-bottom: 1em;
+}
+
 .logo {
   height: 6em;
   padding: 1.5em;
@@ -45,7 +84,7 @@ export default {
   computed: {
     thisyear() {
       return new Date().getFullYear();
-    }
+    },
   }
 }
 </script>

en/blog.md

@@ -0,0 +1,12 @@
+---
+# title: The Code Hive Blog
+subtext: Updates from the Hive
+index: true
+# sidebar: true
+---
+
+# The Code Hive Blog
+
+Periodic musings from the ’hive.
+
+_Latest Posts:_

en/posts/2023-in-review.md

@@ -0,0 +1,7 @@
+---
+title: 2023 in review
+date: 2023-12-31
+---
+
+This is a post.
+

src/blog.data.ts

@@ -0,0 +1,28 @@
+// from https://github.com/vuejs/blog
+import { createContentLoader } from 'vitepress'
+import formatDate from './formatDate';
+
+interface Post {
+  title: string
+  url: string,
+  excerpt?: string,
+  date: string[],
+};
+
+declare const data: Post[];
+
+export { data };
+
+export default createContentLoader('en/posts/*.md', {
+  excerpt: true,
+  transform(raw): Post[] {
+    return raw
+      .map(({ url, frontmatter, excerpt }) => ({
+        title: frontmatter.title,
+        url,
+        excerpt,
+        date: formatDate(frontmatter.date)
+      }))
+      .sort((a, b) => a.date[0].localeCompare(b.date[0], []));
+  }
+});

src/formatDate.ts

@@ -0,0 +1,9 @@
+
+const fmt = new Intl.DateTimeFormat(['en-US'], {day: 'numeric', month: 'short', year: 'numeric'});
+
+/** iso, fmt */
+export default function formatDate(raw: string): string[] {
+    const d = new Date(raw);
+    d.setUTCHours(12); // keep away from boundaries
+    return [d.toISOString(), fmt.format(d)];
+}