initial blog implementation

docs/.vitepress/navbar.mjs

@@ -14,6 +14,7 @@ function getItems(version) {
 
   return [
     { text: 'Home', link: '/' },
+    { text: 'Blog', link: '/blog' },
     { text: 'Guide', link: '/guide/about' },
     {
       text: nver,

docs/.vitepress/theme/components/Post.vue

@@ -0,0 +1,111 @@
+<script setup>
+  import { computed } from 'vue'
+  import { withBase } from 'vitepress'
+  import Badge from 'vitepress/dist/client/theme-default/components/VPBadge.vue'
+
+  const props = defineProps({
+    image: {
+      type: String,
+      default: 'placeholder.jpg',
+    },
+    title: {
+      type: String,
+      required: true,
+    },
+    tag: {
+      type: String,
+      default: 'no-tag',
+    },
+    url: {
+      type: String,
+      required: true,
+    },
+  })
+
+  const normTitle = computed(() => {
+    if (props.title.length > 50) {
+      return props.title.slice(0, 50) + '...'
+    } else {
+      return props.title
+    }
+  })
+
+  const normImage = computed(() => {
+    if (props.image !== null) return withBase(props.image)
+    else {
+      return withBase('placeholder.jpg')
+    }
+  })
+
+  const normTag = computed(() => {
+    if (props.tag !== null) return props.tag.toUpperCase()
+    else {
+      return 'EMPTY-TAG'
+    }
+  })
+</script>
+
+<template>
+  <article class="card">
+    <div class="card-header">
+      <img :src="normImage" />
+    </div>
+    <div class="card-content">
+      <div class="badge-container">
+        <Badge :text="normTag" type="tip" />
+      </div>
+      <h3>{{ normTitle }}</h3>
+      <a :href="url">Read More</a>
+    </div>
+  </article>
+</template>
+
+<style scoped>
+  .card {
+    margin: 15px;
+    padding: 0px;
+    background-color: var(--vp-c-bg-soft);
+    border-color: var(--vp-c-brand-2);
+    border-style: solid;
+    border-width: 1px;
+    border-radius: 10px;
+    width: 325px;
+    /*height: 450px; */
+    overflow: hidden;
+    box-shadow: 0px 8px 16px var(--vp-c-brand-soft);
+    position: relative;
+    top: 0;
+  }
+
+  .card:hover {
+    border-color: var(--vp-c-brand-1);
+    filter: brightness(125%);
+    transition: 0.25s;
+    box-shadow: 0px 16px 32px var(--vp-c-brand-soft);
+    /*top: -10px;*/
+  }
+
+  .card-header {
+    width: 100%;
+    height: 200px;
+  }
+  .card-header img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  .card-content {
+    padding: 10px;
+    height: 200px;
+  }
+
+  .card-content h3 {
+    margin-top: 5px;
+    height: 90px;
+  }
+
+  .badge-container {
+    margin: 15px;
+  }
+</style>

docs/.vitepress/theme/components/Posts.vue

@@ -0,0 +1,25 @@
+<script setup>
+  import { data as posts } from './posts.data.js'
+  import Post from './Post.vue'
+</script>
+
+<template>
+  <section class="card-container">
+    <Post
+      :image="post.frontmatter.image"
+      :title="post.frontmatter.title"
+      :tag="post.frontmatter.tag"
+      :url="post.url"
+      v-for="post in posts"
+    />
+  </section>
+</template>
+
+<style scoped>
+  .card-container {
+    display: flex;
+    justify-content: center;
+    flex-wrap: wrap;
+    flex-direction: row;
+  }
+</style>

docs/.vitepress/theme/components/posts.data.js

@@ -0,0 +1,3 @@
+import { createContentLoader } from 'vitepress'
+
+export default createContentLoader('posts/**/*.md', /* options */)

docs/.vitepress/theme/index.js

@@ -3,6 +3,8 @@ import { h } from 'vue'
 import DefaultTheme from 'vitepress/theme'
 import './style.css'
 
+import Posts from './components/Posts.vue'
+
 /** @type {import('vitepress').Theme} */
 export default {
   extends: DefaultTheme,
@@ -12,6 +14,6 @@ export default {
     })
   },
   enhanceApp({ app, router, siteData }) {
-    // ...
-  }
+    app.component('Posts', Posts)
+  },
 }

docs/blog.md

@@ -0,0 +1,6 @@
+---
+layout: home
+---
+# Blog
+
+<Posts/>

docs/posts/2024/next-release.md

@@ -0,0 +1,14 @@
+---
+author: OCram85
+title: 'Working on Arkanum 2.0.0'
+tag: 'roadmap'
+image: 'screens/screen1.png'
+
+---
+
+# Working on Arkanum 2.0
+
+Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum dolorum ab optio, dolore saepe accusamus
+au
+---
+