From cfab2acdece6b146c5895ebb7e56546668e8d111 Mon Sep 17 00:00:00 2001
From: demogorgod <ssnajeeb2020@manchester.edu>
Date: Thu, 5 Oct 2023 11:12:51 -0400
Subject: [PATCH] Move blog logic to a composable

---
 apps/landing/src/App.vue                      |  11 +-
 apps/landing/src/composables/blogs.ts         |  67 ++++++
 apps/landing/src/composables/router.ts        |   6 +
 apps/landing/src/pages/blog/Blog.vue          | 222 ++++++------------
 .../src/pages/blog/components/SingleBlog.vue  | 117 +++++++++
 .../landing/src/pages/changelog/Changelog.vue |   3 -
 6 files changed, 267 insertions(+), 159 deletions(-)
 create mode 100644 apps/landing/src/composables/blogs.ts
 create mode 100644 apps/landing/src/pages/blog/components/SingleBlog.vue

diff --git a/apps/landing/src/App.vue b/apps/landing/src/App.vue
index 7732282cf..e632401dc 100644
--- a/apps/landing/src/App.vue
+++ b/apps/landing/src/App.vue
@@ -1,4 +1,13 @@
-<script lang="ts" setup></script>
+<script lang="ts" setup>
+// Initalize blogs here for least amount of fetch calls
+import useBlogs from '@/composables/blogs.ts'
+
+const {
+  activeBlog,
+  allBlogs,
+  loadingBlogs,
+} = useBlogs()
+</script>
 
 <template>
   <div>
diff --git a/apps/landing/src/composables/blogs.ts b/apps/landing/src/composables/blogs.ts
new file mode 100644
index 000000000..cd106b039
--- /dev/null
+++ b/apps/landing/src/composables/blogs.ts
@@ -0,0 +1,67 @@
+import { onMounted, onUnmounted, readonly, ref } from 'vue'
+import snarkdown from 'snarkdown'
+
+const initializeComposable = ref(false)
+
+type blog = {
+  title: string;
+  content: string;
+  timestamp: string;
+  type: string;
+  id: string;
+};
+
+const allBlogs = ref([] as blog[])
+const loadingBlogs = ref(true)
+
+export default function useBlogs() {
+  async function getContentOfBlog(itemId: string) {
+    const response = await fetch(`http://localhost:3003/api/hackmd/${itemId}`)
+    const json = await response.json()
+    const md = snarkdown(json.content)
+
+    return md
+  }
+
+  onMounted(async () => {
+    if (!initializeComposable.value) {
+      loadingBlogs.value = true
+      try {
+        const response = await fetch('http://localhost:3003/api/hackmd')
+        const jsonList = await response.json()
+        const blogList = []
+
+        for (let i = 0; i < jsonList.length; i++) {
+          const title = jsonList[i].title
+          const content = await getContentOfBlog(jsonList[i].id)
+          const timestamp = jsonList[i].publishedAt
+          const id = jsonList[i].id
+          blogList.push({
+            title: title,
+            content: content,
+            timestamp: timestamp,
+            type: 'Blog',
+            id: id,
+          })
+        }
+
+        allBlogs.value = blogList
+        loadingBlogs.value = false
+      } catch (error) {
+        console.error('Error trying to fetch:', error)
+        loadingBlogs.value = false
+      }
+
+      initializeComposable.value = true
+    }
+  })
+
+  onUnmounted(() => {
+    initializeComposable.value = false
+  })
+
+  return {
+    allBlogs: readonly(allBlogs),
+    loadingBlogs: readonly(loadingBlogs),
+  }
+}
diff --git a/apps/landing/src/composables/router.ts b/apps/landing/src/composables/router.ts
index 2cabf6528..1799efb76 100644
--- a/apps/landing/src/composables/router.ts
+++ b/apps/landing/src/composables/router.ts
@@ -2,6 +2,7 @@ import { createWebHistory, createRouter } from 'vue-router'
 import Landing from '@/pages/landing/Landing.vue'
 import Changelog from '@/pages/changelog/Changelog.vue'
 import Blog from '@/pages/blog/Blog.vue'
+import SingleBlog from '@/pages/blog/components/SingleBlog.vue'
 const routes = [
   {
     path: '/',
@@ -13,6 +14,11 @@ const routes = [
     name: Blog,
     component: Blog,
   },
+  {
+    path: '/blog/:id',
+    component: SingleBlog,
+    children: [{ path: '', name: SingleBlog, component: SingleBlog }],
+  },
   {
     path: '/changelog',
     name: Changelog,
diff --git a/apps/landing/src/pages/blog/Blog.vue b/apps/landing/src/pages/blog/Blog.vue
index 7e7d9333f..ec6ffe5ea 100644
--- a/apps/landing/src/pages/blog/Blog.vue
+++ b/apps/landing/src/pages/blog/Blog.vue
@@ -1,56 +1,13 @@
 <script setup>
 import { onMounted, ref, computed, watch } from 'vue'
-import snarkdown from 'snarkdown'
+import VueFeather from 'vue-feather'
+import useBlogs from '@/composables/blogs.ts'
 
-const loading = ref(true)
-
-const activeHTMLBlog = ref(null)
-const htmlBlogList = ref([])
-
-async function getContentOfBlog(itemId) {
-
-  const response = await fetch(`http://localhost:3003/api/hackmd/${itemId}`)
-  const json = await response.json()
-  const md = snarkdown(json.content)
-
-  return md
-}
-
-const activeHTMLBlogContent = ref('')
-
-watch(activeHTMLBlog, async () => {
-
-  if (!activeHTMLBlog.value) return ''
-  const content = await getContentOfBlog(activeHTMLBlog.value)
-  activeHTMLBlogContent.value = content
-})
-
-onMounted(async () => {
-  try {
-    const response = await fetch('http://localhost:3003/api/hackmd')
-
-    const jsonList = await response.json()
-    let blogList = []
-
-    for (let i = 0; i < jsonList.length; i++) {
-      let title = jsonList[i].title
-      let id = jsonList[i].id
-
-      blogList.push(
-        {
-          title: title,
-          id: id
-        }
-      )
-    }
-
-    htmlBlogList.value = blogList
-    activeHTMLBlog.value = blogList[0].id
-    loading.value = false
-  } catch (error) {
-    console.error('Error trying to fetch:', error)
-  }
-})
+const {
+  activeBlog,
+  allBlogs,
+  loadingBlogs,
+} = useBlogs()
 
 </script>
 
@@ -86,33 +43,50 @@ onMounted(async () => {
         </a>
       </div>
     </nav>
-    <section class="flex items-start justify-between max-w-[960px] mx-auto mt-[60px] h-[600px] relative overflow-auto">
+    <section class="max-w-[960px] mx-auto mt-[60px] min-h-[650px] relative overflow-auto">
       <div
-        v-if="loading"
+        v-if="loadingBlogs"
         class="absolute top-0 left-0 w-full h-full z-[2] rounded-[3px] overflow-hidden"
       >
         <div class="skeleton_box" />
       </div>
-      <div class=" pr-10 w-[200px] h-full border-r sticky top-0 left-0">
-        <h3>
-          Anncouncements
-        </h3>
-        <div class="flex flex-col items-start content-start gap-5 mt-20">
-          <button
-            v-for="blog in htmlBlogList"
-            :key="blog"
-            class="text-9 cursor-pointer text-left w-full"
-            :class="blog.id === activeHTMLBlog ? 'bg-blue-100' : ' bg-none'"
-            @click="activeHTMLBlog = blog.id"
-          >
-            {{ blog.title }}
-          </button>
+      <router-link
+        v-for="blog in allBlogs"
+        :key="blog"
+        :to="`/blog/${blog.id}`"
+        class="blog_card flex flex-col"
+      >
+        <div class="flex items-center gap-10 text-6 text-gray-400">
+          <span>
+            {{ blog.type }} •
+          </span>
+          <span>
+            {{ new Date(blog.timestamp).toDateString() }}
+          </span>
         </div>
-      </div>
-      <div
-        class="blog_content w-full h-full overflow-auto"
-        v-html="activeHTMLBlogContent"
-      />
+
+        <div class="text-1">
+          {{ blog.title }}
+        </div>
+
+
+        <div class="h-full  w-full overflow-hidden  pt-5">
+          <div
+            class="overview_blog_content"
+            v-html="blog.content"
+          />
+        </div>
+
+        <div class="h-[100px] flex items-end text-8 highlight ">
+          <div class="flex items-center">
+            Read More
+            <vue-feather
+              type="arrow-right"
+              class="h-[0.92rem]"
+            />
+          </div>
+        </div>
+      </router-link>
     </section>
 
     <section class="footer">
@@ -151,94 +125,32 @@ onMounted(async () => {
 
 
 <style lang="scss">
-.blog_content {
-  height: 100%;
-  max-width: 960px;
-  margin: auto;
-  padding-left: 10px;
-  display: flex;
-  flex-direction: column;
-  justify-content: start;
-  align-items: start;
-  gap: 10px;
-
-  ul {
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-start;
-    align-items: flex-start;
-    gap: 10px;
-    padding: 0;
-    margin: 0;
-    margin-top: 20px;
-    margin-left: 20px;
-  }
-
-  h1 {
-    font-size: 2.488rem;
-    font-weight: 400;
-    letter-spacing: -1.2px;
-    line-height: 1.38;
-    color: hsl(210, 12%, 12.5%);
-  }
-
-  h2 {
-    font-size: 1.728rem;
-    font-weight: 400;
-    letter-spacing: -0.41px;
-    line-height: 1.38;
-    color: hsl(210, 12%, 12.5%);
-  }
-
-  h3 {
-    font-size: 1.44rem;
-    font-weight: 400;
-    letter-spacing: -0.21px;
-    line-height: 1.38;
-    color: hsl(210, 12%, 12.5%);
-  }
-
-  h4 {
-    font-size: 1.2rem;
-    font-weight: 400;
-    line-height: 1.38;
-    color: hsl(210, 12%, 12.5%);
-  }
-
-  h5 {
-    font-size: 1rem;
-    font-weight: 400;
-    line-height: 1.38;
-    color: hsl(210, 12%, 12.5%);
-  }
+.blog_card {
+  background-color: rgb(242, 242, 245);
+  border: 1px solid hsl(236, 10.6%, 87.9%);
+  width: 100%;
+  height: 320px;
+  overflow: hidden;
+  cursor: pointer;
+  border-radius: 8px;
+  padding: 30px 30px 30px 30px;
+}
 
-  h6 {
-    font-size: 0.92rem;
-    font-weight: 400;
-    line-height: 1.38;
-    color: hsl(210, 12%, 12.5%);
-  }
+.blog_card:hover {
+  box-shadow: inset 0px 1px 0px rgba(0, 0, 0, 0.1),
+    inset 0px -1px 0px 1px rgba(0, 0, 0, 0.1);
+}
 
-  p {
-    font-size: 1rem;
-    font-weight: 400;
-    letter-spacing: -0.04px;
-    line-height: 1.38;
-    max-width: 520px;
-    word-wrap: break-word;
-  }
+.overview_blog_content {
 
-  span {
-    font-size: 1rem;
-    font-weight: 400;
+  h1,
+  ul,
+  il,
+  img {
+    display: none;
+    width: 0;
+    height: 0;
   }
-}
 
-.blog_nav {
-  margin: 60px auto;
-  display: flex;
-  flex-direction: column;
-  justify-content: start;
-  align-items: start;
 }
 </style>
\ No newline at end of file
diff --git a/apps/landing/src/pages/blog/components/SingleBlog.vue b/apps/landing/src/pages/blog/components/SingleBlog.vue
new file mode 100644
index 000000000..8cea14f39
--- /dev/null
+++ b/apps/landing/src/pages/blog/components/SingleBlog.vue
@@ -0,0 +1,117 @@
+<script setup>
+import { onMounted, ref, computed, watch } from 'vue'
+import VueFeather from 'vue-feather'
+import useBlogs from '@/composables/blogs.ts'
+
+const {
+    activeBlog,
+    allBlogs,
+    loadingBlogs,
+} = useBlogs()
+
+</script>
+
+<template>
+  <div>
+    <nav class="nav">
+      <div class="nav__container">
+        <a href="/">
+          <img
+            class="logo"
+            src="/logo.svg"
+          >
+        </a>
+        <ul class="nav__links">
+          <li>
+            <a href="https://github.com/consensusnetworks/casimir#casimir">API Reference</a>
+          </li>
+          <li>
+            <a href="/blog">Blog</a>
+          </li>
+          <li>
+            <a href="/changelog">Changelog</a>
+          </li>
+          <li>
+            <a href="https://consensusnetworks.com">Company</a>
+          </li>
+        </ul>
+        <a
+          href="https://app.dev.casimir.co"
+          class="btn-primary-sm"
+        >
+          Launch App
+        </a>
+      </div>
+    </nav>
+
+    <section>
+      <div>
+        single blog
+      </div>
+    </section>
+
+    <section class="footer">
+      <div class="footer__container">
+        <span class="c">© 2023 Casimir. All rights reserved.</span>
+        <ul>
+          <li>
+            <a
+              href="https://api.casimir.co"
+              target="_blank"
+            >API Reference</a>
+          </li>
+          <li>
+            <a
+              href="/"
+              target="_blank"
+            >Discord</a>
+          </li>
+          <li>
+            <a
+              href="https://github.com/consensusnetworks/casimir"
+              target="_blank"
+            >GitHub</a>
+          </li>
+          <li>
+            <a
+              href="/"
+              target="_blank"
+            >Contact Us</a>
+          </li>
+        </ul>
+      </div>
+    </section>
+  </div>
+</template>
+
+
+<style lang="scss">
+.blog_card {
+    background-color: rgb(242, 242, 245);
+    border: 1px solid hsl(236, 10.6%, 87.9%);
+    width: 100%;
+    height: 320px;
+    overflow: hidden;
+    cursor: pointer;
+    border-radius: 8px;
+    padding: 30px 30px 30px 30px;
+}
+
+.blog_card:hover {
+    box-shadow: inset 0px 1px 0px rgba(0, 0, 0, 0.1),
+        inset 0px -1px 0px 1px rgba(0, 0, 0, 0.1);
+}
+
+.overview_blog_content {
+
+    h1,
+    ul,
+    il,
+    img {
+        display: none;
+        width: 0;
+        height: 0;
+    }
+
+}
+</style>
\ No newline at end of file
diff --git a/apps/landing/src/pages/changelog/Changelog.vue b/apps/landing/src/pages/changelog/Changelog.vue
index ee370567f..3aa5d79cc 100644
--- a/apps/landing/src/pages/changelog/Changelog.vue
+++ b/apps/landing/src/pages/changelog/Changelog.vue
@@ -1,9 +1,6 @@
 <script lang="ts" setup>
 import snarkdown from 'snarkdown'
 
-
-
-
 async function getReleases() {
   const url = 'https://api.github.com/repos/consensusnetworks/casimir/releases'
   const response = await fetch(url, {