From 040addb0d3fd12d2a7f4222bfacc42ad0f4d3ecb Mon Sep 17 00:00:00 2001
From: demogorgod <ssnajeeb2020@manchester.edu>
Date: Mon, 2 Oct 2023 11:41:58 -0400
Subject: [PATCH] Get changelog to work and update the page

---
 apps/landing/src/composables/router.ts        |   6 +
 apps/landing/src/index.css                    | 109 ++++++++++++
 .../landing/src/pages/changelog/Changelog.vue | 164 ++++++++++++++++++
 package-lock.json                             |   8 +
 package.json                                  |   3 +
 5 files changed, 290 insertions(+)
 create mode 100644 apps/landing/src/pages/changelog/Changelog.vue

diff --git a/apps/landing/src/composables/router.ts b/apps/landing/src/composables/router.ts
index 605ef99e9..68b96175c 100644
--- a/apps/landing/src/composables/router.ts
+++ b/apps/landing/src/composables/router.ts
@@ -1,6 +1,7 @@
 import { createWebHistory, createRouter } from 'vue-router'
 import Landing from '@/pages/landing/Landing.vue'
 import Blog from '@/pages/blog/Blog.vue'
+import Changelog from '@/pages/changelog/Changelog.vue'
 const routes = [
   {
     path: '/',
@@ -13,6 +14,11 @@ const routes = [
     component: Blog,
     // children: []
   },
+  {
+    path: '/changelog',
+    name: Changelog,
+    component: Changelog,
+  },
 ]
 
 const router = createRouter({
diff --git a/apps/landing/src/index.css b/apps/landing/src/index.css
index 4b8ac76d6..6d8bb4e9d 100644
--- a/apps/landing/src/index.css
+++ b/apps/landing/src/index.css
@@ -10,6 +10,115 @@
   -moz-osx-font-smoothing: grayscale;
   -webkit-text-size-adjust: 100%;
 }
+/* Import statements */
+/* Import statements for reset, variables, typography, button, nav, and footer go here */
+
+.changelog {
+  max-width: 960px;
+  margin: 60px auto;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 40px;
+}
+
+.changelog__header {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 15px;
+}
+
+.changelog__container {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: flex-start;
+  gap: 0;
+  background-color: rgba(251, 251, 253, 0.8);
+  border: 1px solid rgb(216, 222, 228);
+  border-radius: 8px;
+  box-shadow: 8px -15px 54px 32px rgba(0, 0, 0, 0.023);
+}
+
+.vupdate__container {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+}
+
+.vupdate {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: flex-start;
+  border-bottom: 1px solid rgba(231, 231, 231, 0.8);
+  gap: 5px;
+  padding: 35px 45px;
+}
+
+.vupdate:last-child {
+  border-bottom: none;
+  /* padding-bottom: 0; */
+}
+
+.vupdate__read {
+  font-size: 15px;
+  font-weight: 500;
+  letter-spacing: -0.2px;
+  margin: 0;
+  font-weight: 400;
+  padding-top: 20px;
+}
+
+.vupdate__tag {
+  display: inline-block;
+  width: auto;
+  font-weight: 500;
+  font-size: 13px;
+  padding: 1px 6px;
+  color: white;
+  background-color: #0d5fff;
+}
+
+.vupdate__body {
+  font-weight: 400;
+  font-size: 15px;
+  letter-spacing: -0.2px;
+  color: #080808;
+}
+
+.vupdate__body ul {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: flex-start;
+  gap: 10px;
+  padding: 0;
+  margin: 0;
+  margin-top: 20px;
+}
+
+.vupdate__body li {
+  list-style: none;
+  font-weight: 400;
+  font-size: 15px;
+  letter-spacing: -0.2px;
+  color: #080808;
+}
+
+.vupdate__body li::before {
+  content: "-";
+  color: #51555f;
+  font-weight: bold;
+  display: inline-block;
+  width: 1em;
+  margin-left: -1em;
+}
+
 .bento {
   display: flex;
   flex-direction: column;
diff --git a/apps/landing/src/pages/changelog/Changelog.vue b/apps/landing/src/pages/changelog/Changelog.vue
new file mode 100644
index 000000000..518094cdf
--- /dev/null
+++ b/apps/landing/src/pages/changelog/Changelog.vue
@@ -0,0 +1,164 @@
+<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, {
+        method: 'GET',
+    })
+
+    const json = await response.json()
+
+    if (!Array.isArray(json) || json.length === 0) {
+        return null
+    }
+
+    const releases = json.map((r) => {
+        return {
+            htmlURL: r.html_url,
+            tagName: r.tag_name,
+            publishedAt: r.published_at,
+            body: r.body,
+            author: {
+                name: r.author.login,
+                avatar: r.author.avatar_url,
+                htmlURL: r.author.html_url,
+            },
+        }
+    })
+
+    return releases
+}
+
+async function displayReleases(releases) {
+    releases.shift()
+    const changelogs = document.querySelector('.vupdate__container')
+    releases.forEach((r) => {
+        const vupdate = document.createElement('div')
+        const tag = document.createElement('h3')
+        const title = document.createElement('span')
+        const body = document.createElement('div')
+        const releaseURL = document.createElement('a')
+
+        const bodyHTML = snarkdown(r.body)
+
+        tag.innerText = r.tagName
+        // TODO: get this from the release body, sync wth shane on this
+        title.innerText = 'Improving user wallet onboarding experience'
+        body.innerHTML = bodyHTML
+        releaseURL.innerText = 'View release commit'
+        releaseURL.href = r.htmlURL
+
+        vupdate.classList.add('vupdate')
+        tag.classList.add('vupdate__tag')
+        title.classList.add('text-5')
+        title.classList.add('bold')
+
+        body.classList.add('vupdate__body')
+        releaseURL.classList.add('vupdate__read')
+
+        vupdate.appendChild(tag)
+        vupdate.appendChild(title)
+        vupdate.appendChild(body)
+        vupdate.appendChild(releaseURL)
+        changelogs.appendChild(vupdate)
+    })
+}
+
+document.addEventListener('DOMContentLoaded', async () => {
+    const releases = await getReleases()
+    console.log(releases)
+    displayReleases(releases)
+})
+
+</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
+              class="text-9"
+              href="https://github.com/consensusnetworks/casimir#casimir"
+            >
+              API Reference
+            </a>
+          </li>
+          <li><a href="/blog">Blog</a></li>
+          <li>
+            <a
+              class="active"
+              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 class="changelog">
+      <div class="changelog__header">
+        <h1>Changelog</h1>
+        <span class="text-7">Latest public releases and product update</span>
+      </div>
+      <div class="changelog__container">
+        <div class="vupdate__container" />
+      </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 scoped></style>
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 6d8d53fde..4a4b55dca 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,6 +16,9 @@
         "infrastructure/*",
         "services/*"
       ],
+      "dependencies": {
+        "snarkdown": "^2.0.0"
+      },
       "devDependencies": {
         "@aws-sdk/client-secrets-manager": "^3.204.0",
         "@aws-sdk/credential-providers": "^3.204.0",
@@ -22449,6 +22452,11 @@
         "npm": ">= 3.0.0"
       }
     },
+    "node_modules/snarkdown": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/snarkdown/-/snarkdown-2.0.0.tgz",
+      "integrity": "sha512-MgL/7k/AZdXCTJiNgrO7chgDqaB9FGM/1Tvlcenenb7div6obaDATzs16JhFyHHBGodHT3B7RzRc5qk8pFhg3A=="
+    },
     "node_modules/socks": {
       "version": "2.7.1",
       "resolved": "https://registry.npmjs.org/socks/-/socks-2.7.1.tgz",
diff --git a/package.json b/package.json
index 0f7b57921..f223059a1 100644
--- a/package.json
+++ b/package.json
@@ -80,5 +80,8 @@
     "hooks": {
       "after:bump": "npx auto-changelog -p"
     }
+  },
+  "dependencies": {
+    "snarkdown": "^2.0.0"
   }
 }