From d4b3052d73981ddf042598fed73f8586dd475db5 Mon Sep 17 00:00:00 2001
From: Rachel Lambda Samuelsson <depsterr@protonmail.com>
Date: Wed, 17 Jul 2024 16:24:42 +0200
Subject: [PATCH] post excerpts and wrapping post components

---
 src/App.vue                  |  4 ++++
 src/components/TheHeader.vue | 29 +++++++++++++++++++++++++++++
 src/components/ThePost.vue   |  9 ++++-----
 src/components/ThePosts.vue  | 19 ++++++++++++++++++-
 src/main.scss                |  6 ++++++
 src/posts/index.ts           | 35 ++++++++++++++++++++++++++++++-----
 vite.config.ts               |  7 +++++++
 7 files changed, 98 insertions(+), 11 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index a48b546..3ca5aef 100644
--- a/src/App.vue
+++ b/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>
diff --git a/src/components/TheHeader.vue b/src/components/TheHeader.vue
index 3a6ac92..9c226b6 100644
--- a/src/components/TheHeader.vue
+++ b/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>
diff --git a/src/components/ThePost.vue b/src/components/ThePost.vue
index ab34974..093a76a 100644
--- a/src/components/ThePost.vue
+++ b/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>
 
diff --git a/src/components/ThePosts.vue b/src/components/ThePosts.vue
index a274727..b491c01 100644
--- a/src/components/ThePosts.vue
+++ b/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>
diff --git a/src/main.scss b/src/main.scss
index cb0b0ab..312320c 100644
--- a/src/main.scss
+++ b/src/main.scss
@@ -36,3 +36,9 @@ a:visited {
 a:hover {
 	color: #70c0b1;
 }
+
+hr {
+	color: #808080;
+	border: 0;
+	border-bottom: 1px dashed; 
+}
diff --git a/src/posts/index.ts b/src/posts/index.ts
index a4dbfe7..f7233e5 100644
--- a/src/posts/index.ts
+++ b/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: {} }
+    )
   }
 })
 
diff --git a/vite.config.ts b/vite.config.ts
index 24c3631..3c98986 100644
--- a/vite.config.ts
+++ b/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