From 8df61267f8ec2eeb5c24e265ad9fd16a8b3a028c Mon Sep 17 00:00:00 2001
From: DarkPhoenix2704 <anbarasun123@gmail.com>
Date: Wed, 2 Oct 2024 05:54:21 +0000
Subject: [PATCH] feat: github release feed

---
 .../nc-gui/components/feed/Changelog/Item.vue | 68 ++++++++++++++++---
 .../components/feed/Changelog/index.vue       | 41 ++++++-----
 2 files changed, 80 insertions(+), 29 deletions(-)

diff --git a/packages/nc-gui/components/feed/Changelog/Item.vue b/packages/nc-gui/components/feed/Changelog/Item.vue
index f17473e857..60dce45a9c 100644
--- a/packages/nc-gui/components/feed/Changelog/Item.vue
+++ b/packages/nc-gui/components/feed/Changelog/Item.vue
@@ -1,24 +1,68 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import rehypeSanitize from 'rehype-sanitize'
+import rehypeStringify from 'rehype-stringify'
+import remarkParse from 'remark-parse'
+import remarkRehype from 'remark-rehype'
+import { unified } from 'unified'
+import dayjs from 'dayjs'
+
+const props = defineProps<{
+  body: string
+  date: string
+}>()
+
+const renderMarkdown = async (markdown: string) => {
+  return await unified().use(remarkParse).use(remarkRehype).use(rehypeSanitize).use(rehypeStringify).process(markdown)
+}
+
+const markdown = `# Introducing New Field Type : Button  🎉
+
+Introducing the new field type Button, designed to enhance interactivity and automation by utilising data from the current row. This Button field type allows you to wire up the execution to predefined action such as triggering a webhook/API or opening a custom URL or launching a pre-filled NocoDB form. With this, you can dynamically pass record data, enabling highly tailored and context-aware interactions.
+
+[![DemoVideo](https://github.com/user-attachments/assets/0c8539d7-71f1-4b2f-931b-d924eeedde8e)](https://youtu.be/V20tQDkbkvU)
+
+
+### Added
+
+- Automate workflows by configuring buttons to trigger custom webhooks.
+- Configure buttons to open custom URLs
+- Easily set up buttons to open pre-filled NocoDB forms
+- Tailor the button’s text, colour, and icon to fit your specific needs
+- Leverage NocoDB's formula editor to create dynamic URLs and payloads
+
+
+
+### 📢 Important notice
+This release includes a migration to generate a file reference table, which will be used in future updates to clean up unreferenced attachments. The migration process will run in the background. Please **note that this release doesn’t initiate any clean up of unreferenced files**.
+
+Additionally, we are introducing the [NC_ATTACHMENT_RETENTION_DAYS](https://docs.nocodb.com/getting-started/self-hosted/environment-variables/#storage) configuration for future releases. If this value is set to 0, it will prevent the cleanup of any stale / unreferenced attachments. Otherwise, unreferenced attachments will be removed from the disk after the specified number of days.
+
+
+**Team NocoDB**
+`
+
+const renderedText = computedAsync(async () => {
+  return await renderMarkdown(props.body)
+})
+</script>
 
 <template>
-  <div class="block relative">
+  <div class="block max-w-260 px-12 relative">
     <div class="relative pb-12">
       <div class="aside">
         <div class="aside-divider">
           <div class="aside-divider-dot"></div>
         </div>
         <div class="aside-inner">
-          <div class="text-sm text-gray-700 leading-5">August 16th 2024</div>
+          <div class="text-sm text-gray-700 leading-5">
+            {{ dayjs(date).format('MMMM D, YYYY') }}
+          </div>
         </div>
       </div>
 
       <div class="content">
         <div class="flex flex-col py-6 gap-8">
-          <h1>Connect Kit</h1>
-          <p>
-            This update includes improvements to the CoinbaseWalletSDK connect popup and MockConnector . Fixed CoinbaseWalletSDK
-            connect popup now works on first interaction. MockConnector now working as intended.
-          </p>
+          <div class="prose max-w-none" v-html="renderedText"></div>
         </div>
       </div>
     </div>
@@ -30,6 +74,14 @@
   @apply !pl-50;
 }
 
+.prose {
+  .prose ul > li {
+    &:before {
+      @apply !bg-brand-500;
+    }
+  }
+}
+
 .aside {
   @apply absolute left-0 top-2 bottom-2 w-44;
 
diff --git a/packages/nc-gui/components/feed/Changelog/index.vue b/packages/nc-gui/components/feed/Changelog/index.vue
index e09483e27e..cb6b67978e 100644
--- a/packages/nc-gui/components/feed/Changelog/index.vue
+++ b/packages/nc-gui/components/feed/Changelog/index.vue
@@ -1,26 +1,25 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+const releases = ref<
+  {
+    body: string
+    id: string
+    published_at: string
+  }[]
+>([])
+
+const fetchReleaseNotes = async () => {
+  const response = await fetch('https://api.github.com/repos/nocodb/nocodb/releases')
+  const data = await response.json()
+  return data
+}
+
+onMounted(async () => {
+  releases.value = await fetchReleaseNotes()
+})
+</script>
 
 <template>
-  <FeedChangelogItem />
-  <FeedChangelogItem />
-  <FeedChangelogItem />
-  <FeedChangelogItem />
-  <FeedChangelogItem />
-  <FeedChangelogItem />
-  <FeedChangelogItem />
-  <FeedChangelogItem />
-  <FeedChangelogItem />
-  <FeedChangelogItem />
-  <FeedChangelogItem />
-  <FeedChangelogItem />
-  <FeedChangelogItem />
-  <FeedChangelogItem />
-  <FeedChangelogItem />
-  <FeedChangelogItem />
-  <FeedChangelogItem />
-  <FeedChangelogItem />
-  <FeedChangelogItem />
-  <FeedChangelogItem />
+  <FeedChangelogItem v-for="feed in releases" :key="feed.id" :date="feed.published_at" :body="feed?.body" />
 </template>
 
 <style scoped lang="scss"></style>