From 20d22c327157d19a342bacca3047a8adb22c5a0d Mon Sep 17 00:00:00 2001
From: Hykilpikonna <me@hydev.org>
Date: Sun, 5 Dec 2021 00:36:56 -0500
Subject: [PATCH] [+] Blog posts

---
 src/constants.ts    |  1 +
 src/router/index.ts |  2 +-
 src/views/Blog.vue  | 68 +++++++++++++++++++++++++++++++++++++++++++++
 3 files changed, 70 insertions(+), 1 deletion(-)
 create mode 100644 src/constants.ts
 create mode 100644 src/views/Blog.vue

diff --git a/src/constants.ts b/src/constants.ts
new file mode 100644
index 0000000..e723745
--- /dev/null
+++ b/src/constants.ts
@@ -0,0 +1 @@
+export const backendUrl = 'http://localhost:5000'
diff --git a/src/router/index.ts b/src/router/index.ts
index a22ff22..299f3fe 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -18,7 +18,7 @@ const routes: Array<RouteRecordRaw> = [
     {
         path: '/blog',
         name: 'Blog',
-        component: () => import('../views/About.vue')
+        component: () => import('../views/Blog.vue')
     },
     {
         path: '/projects',
diff --git a/src/views/Blog.vue b/src/views/Blog.vue
new file mode 100644
index 0000000..b921d91
--- /dev/null
+++ b/src/views/Blog.vue
@@ -0,0 +1,68 @@
+<template>
+    <div id="Blog" v-if="posts.length !== 0">
+        <div class="post" v-for="p in posts" :key="p.id" :class="{'service': p.type === 'service'}">
+            <div class="id">{{p.id}}</div>
+            <div class="reply" v-if="p.reply">
+                <img class="thumb" v-if="p.reply.thumb" :src="p.reply.thumb" alt="">
+                <div class="mtext">{{p.reply.text}}</div>
+            </div>
+            <div class="images" v-if="p.images">
+                <div class="img" v-for="i in p.images" :key="i"
+                     :style="{'background-image': `url(${i.url})`}"></div>
+            </div>
+            <div class="text">{{p.text}}</div>
+            <div class="views" v-if="p.views">{{p.views}}</div>
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import {Options, Vue} from 'vue-class-component';
+import {backendUrl} from "@/constants";
+
+export interface Post {
+    id: string
+    date: string
+
+    text?: string
+
+    type?: string // If type doesn't exist, it's a regular message
+    views?: string // Service messages have no view count
+    reply?: {
+        url: string
+        text: string
+        thumb?: string
+    }
+    video?: {
+        thumb: string
+        duration: string
+        src: string
+    }
+    images?: {
+        href: string
+        url: string
+    }[]
+}
+
+@Options({components: {}})
+export default class Blog extends Vue
+{
+    posts: Post[] = []
+
+    created(): void
+    {
+        fetch(`${backendUrl}/posts.json`).then(it => it.json()).then(it => {
+            this.posts = it
+            console.log(it)
+        })
+    }
+}
+</script>
+
+<style lang="sass" scoped>
+#Blog
+    background: #fdf9f1
+    margin-top: 20px
+    border-radius: 50px 50px 0 0
+    padding: 20px
+</style>