post excerpts and wrapping post components

src/App.vue

@@ -30,4 +30,8 @@ import TheFooter from './components/TheFooter.vue'
   border-width: 0 5px;
   border-color: #d54e53;
 }
+
+main {
+  padding-top: 1em;
+}
 </style>

src/components/TheHeader.vue

@@ -1,3 +1,12 @@
+<script setup lang="ts">
+import Link from '../components/Link.vue'
+
+const blog  = { title: "blog", path: "/", url: "/" }
+const pics  = { title: "pics", path: "/pics", url: "/pics.html" }
+const about = { title: "about", path: "/about", url: "/about.html" }
+const cv    = { title: "cv", path: "/cv", url: "/cv.html" }
+</script>
+
 <template>
   <div class="sitetitle">
     <div class="titlecontainer">
@@ -6,6 +15,14 @@
       </span>
     </div>
   </div>
+  <hr>
+  <nav><ul>
+    <li><Link :to="blog"/></li>
+    <li><Link :to="pics"/></li>
+    <li><Link :to="about"/></li>
+    <li><Link :to="cv"/></li>
+  </ul></nav>
+  <hr>
 </template>
 
 <style scoped>
@@ -38,4 +55,16 @@
 .titlecontainer span {
   font-size: 2em;
 }
+
+nav ul {
+	list-style: none;
+	padding: 0;
+	margin: 0;
+	text-align: center;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  gap: 1em;
+}
 </style>

src/components/ThePost.vue

@@ -7,14 +7,13 @@ const props = defineProps<{
 
 <template>
   <article>
-    <slot>
-      post content goes here
-    </slot>
+    <h1>{{ title }}</h1>
+    <slot></slot>
   </article>
   <hr>
   <ul>
-    <li>Originally authored: {{ props.date.toLocaleDateString("en-US") }}</li>
-  <ul>
+    <li>Originally authored: {{ props.date.toLocaleDateString("sv-SE") }}</li>
+  </ul>
   <hr>
 </template>
 

src/components/ThePosts.vue

@@ -1,15 +1,32 @@
 <script setup lang="ts">
 import posts from '../posts'
 import Link from '../components/Link.vue'
+import type { MarkdownItEnv } from '@mdit-vue/types';
 </script>
 
 <template>
   <ul>
     <li v-for="post in posts">
-      <Link :to="post"/>
+      <div class="posthead">
+        <Link :to="post"/>
+        <span>{{ post.date.toLocaleDateString("sv-SE") }}</span>
+      </div>
+      <hr>
+      <div v-html="post.excerpt"></div>
     </li>
   </ul>
 </template>
 
 <style scoped>
+ul {
+  list-style-type: none;
+  padding: 0;
+  margin: 0;
+}
+
+.posthead {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}
 </style>

src/main.scss

@@ -36,3 +36,9 @@ a:visited {
 a:hover {
 	color: #70c0b1;
 }
+
+hr {
+	color: #808080;
+	border: 0;
+	border-bottom: 1px dashed; 
+}

src/posts/index.ts

@@ -1,5 +1,6 @@
-// @ts-nocheck
 import type { ComponentOptions } from 'vue'
+import { h, defineComponent } from 'vue'
+import ThePost from '../components/ThePost.vue'
 
 export type Post = { 
   title : string, 
@@ -7,6 +8,7 @@ export type Post = {
   slug : string,
   path : string,
   url : string,
+  excerpt : string,
   component : ComponentOptions,
 }
 
@@ -14,15 +16,38 @@ const imports = await Promise.all(
   Object.values(import.meta.glob('./*.md')).map((m) => m())
 )
 
+// @ts-ignore
 const posts : Post[] = imports.map((post) => {
+  // @ts-ignore
   const slug = post.default.__name
   const path = "/posts/" + slug
   const url = path + ".html"
+  // @ts-ignore
+  const date = new Date(post.date)
+  // @ts-ignore
+  const title = post.title
   return {
-    title: post.title,
-    date: new Date(post.date),
-    slug, path, url,
-    component: post.default
+    // @ts-ignore
+    excerpt: post.excerpt,
+    title, date, slug, path, url,
+    component: defineComponent(
+      (props) => {
+        return () => {
+          return h(
+            ThePost,
+            {
+              date: date,
+              title: title
+            },
+            {
+              // @ts-ignore
+              default: post.default.render
+            }
+          )
+        }
+      },
+      { props: {} }
+    )
   }
 })
 

vite.config.ts

@@ -12,6 +12,13 @@ export default {
     }),
     Pages(),
     Markdown({
+      excerpt: true,
+      frontmatterOptions: {
+        grayMatterOptions: {
+          excerpt: true,
+          excerpt_separator: '<!--more-->',
+        },
+      },
       headEnabled: true,
       markdownItSetup(md) {
         // @ts-ignore