Init

src/pages/posts/[slug].vue

@@ -0,0 +1,48 @@
+<route>
+{
+  meta:{
+    layout: 'posts'
+  }
+}
+</route>
+
+<template>
+  <div v-if="post && Object.keys(post.currentPost).length !== 0">
+    <Motion
+      :initial="{ opacity: 0 }"
+      :animate="{ opacity: 1}"
+      :transition="{ duration: 0.5, easing: 'ease-in-out' }"
+    >
+      <div class="text-3xl my-2">
+        <span class="font-bold text-fly-600 dark:text-fly-500">|</span>
+        <span class="align-middle mx-2">{{ post.currentPost.title }}</span>
+      </div>
+      <div v-html="post.currentPost.body" />
+    </Motion>
+  </div>
+  <router-link class="no-underline dark:hover:text-fly-500" :to="`/posts/`">
+    Back to Posts
+  </router-link>
+</template>
+
+<script setup lang="ts">
+import { Motion } from 'motion/vue'
+import { usePostStore } from '~/stores/post'
+
+const post = usePostStore()
+
+const props = defineProps<{ slug: string }>()
+post.getCurrentPostBySlug(props.slug)
+
+useHead({
+  title: computed(() => `${post.currentPost.title} – Flycro`),
+  meta: [
+    { name: 'description', content: 'Posts about thoughts, projects and what inspires me.' },
+  ],
+})
+
+</script>
+
+<style scoped>
+
+</style>

src/pages/posts/index.vue

@@ -0,0 +1,78 @@
+<route>
+{
+  meta:{
+    layout: 'posts'
+  }
+}
+</route>
+
+<template>
+  <div>
+    <h1>Blog</h1>
+    <div>
+      <ul v-if="post.postList && post.loading === false" key="test" class="list-none">
+        <Motion
+          :initial="{ opacity: 0 }"
+          :animate="{ opacity: 1}"
+          :transition="{ duration: 0.5, easing: 'ease-in-out' }"
+        >
+          <router-link v-for="p in post.postList" :key="p.slug" class="no-underline dark:hover:text-fly-500" :to="`/posts/${p.slug}`">
+            <li>
+              <div class="text-xl">
+                {{ p.title }}
+              </div>
+              <div class="flex justify-start flex-row">
+                <div class="text-xs">
+                  {{ convertDate(p.date_created) }}
+                </div>
+              </div>
+            </li>
+          </router-link>
+        </Motion>
+      </ul>
+
+      <Motion
+        :initial="{ opacity: 0 }"
+        :animate="{ opacity: 1}"
+        :transition="{ duration: 0.5, easing: 'ease-in-out' }"
+      >
+        <div v-if="post.loading === false && post.postList.length === 0" class="text-xl">
+          No Posts found
+        </div>
+      </Motion>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { Motion } from 'motion/vue'
+import type { Ref } from 'vue'
+import dayjs from 'dayjs'
+import { usePostStore } from '~/stores/post'
+
+useHead({
+  title: 'Blog – Flycro',
+  meta: [
+    { name: 'description', content: 'Posts about thoughts, projects and what inspires me.' },
+  ],
+})
+
+const post = usePostStore()
+const show = ref(false)
+
+function convertDate(date: string): string {
+  return dayjs(date).format('DD. MMMM YYYY')
+}
+
+onMounted(() => {
+  post.fetchPosts()
+})
+
+</script>
+
+<style scoped>
+article.prose.m-auto div div ul.list-none a.no-underline
+{
+    @apply no-underline
+}
+</style>