From 3ed369f4da7f40568d6e2c018a820e2c2d7244fa Mon Sep 17 00:00:00 2001
From: Bojan Rajh <b.rajh@shopware.com>
Date: Tue, 21 Nov 2023 11:40:51 +0100
Subject: [PATCH] feat: suspense homepage

---
 src/components/SwagChangelog.vue        | 82 ++-----------------------
 src/components/SwagChangelogWrapper.vue | 64 +++++++++++++------
 src/index.md                            |  5 +-
 3 files changed, 56 insertions(+), 95 deletions(-)

diff --git a/src/components/SwagChangelog.vue b/src/components/SwagChangelog.vue
index 232261ac..b636a0b9 100644
--- a/src/components/SwagChangelog.vue
+++ b/src/components/SwagChangelog.vue
@@ -1,8 +1,8 @@
 <template>
   <div class="SwagChangelog divide-y-1 divide-x-1 divide-gray-400">
     <div class="SwagChangelog_item divide-y-1 divide-x-1 divide-gray-400"
-         v-for="log in changelog">
-      <span class="SwagChangelog_version">v{{ log.version }}</span>
+         v-for="log in releases">
+      <span class="SwagChangelog_version">{{ log.text }}</span>
       <div>
         <span class="SwagChangelog_label"
               :class="`--type-${log.type}`"
@@ -57,79 +57,9 @@
 </style>
 
 <script setup lang="ts">
-import { computed, onMounted, ref } from 'vue';
-
-const isMounted = ref(false);
-onMounted(() => {
-  isMounted.value = true;
-});
-
-const changelog = computed(() => [
-  {
-    version: '6.5.3.3',
-    date: '2023-07-16 13:26',
-  },
-  {
-    version: '6.5.3.2',
-    date: '2023-07-13 09:22',
-  },
-  {
-    version: '6.5.3.1',
-    date: '2023-06-06 13:58',
-  },
-  {
-    version: '6.5.3.0',
-    date: '2023-06-12 14:37',
-  },
-  {
-    version: '6.5.2.1',
-    date: '2023-06-12 14:37',
-  },
-  {
-    version: '6.5.2.0',
-    date: '2023-06-12 09:43',
-  },
-  {
-    version: '6.5.1.1',
-    date: '2023-05-31 09:53',
-  },
-  {
-    version: '6.5.1.0',
-    date: '2023-05-24 15:51',
-  },
-  {
-    version: '6.4.20.2',
-    date: '2023-05-05 07:55',
-    label: 'Security update',
-    type: 'security',
-  },
-  {
-    version: '6.5.0.0',
-    date: '2023-05-03 10:28',
-  },
-  {
-    version: '6.4.20.1',
-    date: '2023-04-17 19:20',
-    label: 'Security update',
-    type: 'security',
-  },
-  {
-    version: '6.5.0.0-rc4',
-    date: '2023-04-11 15:13',
-    label: 'Release candidate',
-    type: 'rc',
-  }
-].slice(0, 5).map(log => {
-  // Dates should be formatted only on client side as locale time is most likely different
-  if(!isMounted.value) {
-    return log;
+const props = defineProps({
+  releases: {
+    type: Array,
   }
-  const date = new Date(log.date);
-  log.date = `${date.toLocaleDateString()} ${date.toLocaleTimeString(undefined, {
-    hour: '2-digit',
-    minute:'2-digit'
-  })}`;
-  return log;
-}));
-// const changelog = await (await fetch('https://www.shopware.com/en/changelog/?rss=1', {mode: 'no-cors'})).json();
+})
 </script>
\ No newline at end of file
diff --git a/src/components/SwagChangelogWrapper.vue b/src/components/SwagChangelogWrapper.vue
index b517e8b4..6fc7eadc 100644
--- a/src/components/SwagChangelogWrapper.vue
+++ b/src/components/SwagChangelogWrapper.vue
@@ -4,31 +4,57 @@
     <h2 class="h-homepage">Stay in sync with Shopware</h2>
 
     <div class="SwagChangelogWrapper_grid gap-10 items-start">
-      <div class="c-border-gradient rounded-md">
-        <div class="grid gap-4 rounded-md p-5 --apply-bg">
-          <h3 class="SwagChangelogWrapper_title">
-            Changelog
-            <a href="https://github.com/shopware/platform/blob/trunk/CHANGELOG.md"
-               target="_blank"
-               class="SwagChangelogWrapper_link">
-              View on GitHub
-              <SwagIcon icon="external-link-s" />
-            </a>
-          </h3>
-          <SwagChangelog />
-        </div>
+      <div class="c-flat-card p-6">
+        <h3 class="SwagChangelogWrapper_title">Shopware version 6.5.1.1</h3>
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis quis sem dui. Etiam suscipit, eros sit amet
+          elementum accumsan, lorem nulla tincidunt sem, in ullamcorper libero nibh non sapien....</p>
+        <ul>
+          <li v-for="link in links"><a :href="`${latestRelease.link}#${link.slug}`">{{ link.title }}</a></li>
+        </ul>
+        <a :href="latestRelease.link">View details</a>
       </div>
       <div class="grid gap-5">
-        <PageRef page="/docs/" target="_blank" title="Developer docs" sub="Know the technology behind Shopware, its features and how it can be extended." />
-        <PageRef page="https://docs.shopware.com/" target="_blank" title="User docs" sub="Know how to setup and configure your shop." />
-        <PageRef page="https://brand.shopware.com/" target="_blank" title="Design docs" sub="Know the design principles of Shopware and get access to icons, components, tokens." />
+        <h3 class="SwagChangelogWrapper_title">
+          Changelog
+          <a href="https://github.com/shopware/platform/blob/trunk/CHANGELOG.md"
+             target="_blank"
+             class="SwagChangelogWrapper_link">
+            View on GitHub
+            <SwagIcon icon="external-link-s"/>
+          </a>
+        </h3>
+        <SwagChangelog :releases="releases"/>
       </div>
     </div>
   </div>
 </template>
 
-<script setup lang="ts">
+<script setup lang="ts" async>
+import {useData} from "vitepress";
+import {getSidebar, flattenSidebar} from '../../node_modules/vitepress-shopware-docs/src/shopware/support/sidebar'
 import SwagChangelog from "./SwagChangelog.vue";
+
+const {theme} = useData()
+const releases = flattenSidebar(getSidebar(theme.value.sidebar, '/release-notes/'))
+    .filter(item => item.link?.match(/^\/release-notes\/(\d).(\d)\/(\d).(\d).(\d).(\d).html/g))
+    .map(({text, link, meta}) => ({text, link, ...meta}))
+    .sort((a, b) => new Date(b.date) - new Date(a.date))
+    .map(release => {
+      const date = new Date(release.date);
+      release.date = `${date.toLocaleDateString()} ${date.toLocaleTimeString(undefined, {
+        hour: '2-digit',
+        minute: '2-digit'
+      })}`;
+      return release;
+    });
+
+const latestRelease = releases[0];
+const sources = import.meta.glob(`../release-notes/*/*.*.*.*.md`);
+const latestSource = sources[`..${latestRelease.link.replace('.html', '.md')}`];
+const latestData = await latestSource();
+const headers = latestData.__pageData.headers;
+const improvements = headers.find(({title}) => title === 'Improvements')?.children || [];
+const links = improvements.map(({title, slug}) => ({title, slug}));
 </script>
 
 <style lang="scss">
@@ -37,9 +63,10 @@ import SwagChangelog from "./SwagChangelog.vue";
   &_grid {
     @apply grid;
     @media (min-width: 768px) {
-      grid-template-columns: 2fr 3fr;
+      grid-template-columns: 2fr 1fr;
     }
   }
+
   &_title {
     @apply flex justify-between items-center;
     font-size: 1rem;
@@ -48,6 +75,7 @@ import SwagChangelog from "./SwagChangelog.vue";
     line-height: 1.5rem;
     letter-spacing: 0.005rem;
   }
+
   &_link {
     @apply flex items-center;
     font-size: 0.875rem;
diff --git a/src/index.md b/src/index.md
index dd1c7cab..35874cc2 100644
--- a/src/index.md
+++ b/src/index.md
@@ -54,7 +54,10 @@ import SwagNewsletter from "./components/SwagNewsletter.vue";
 <SwagContribute class="my-20" />
 
 <!-- CHANGELOG --->
-<!--<SwagChangelogWrapper id="Changelog" class="my-20" />-->
+
+<Suspense>
+    <SwagChangelogWrapper id="Changelog" class="my-20" />
+</Suspense>
 
 <!-- NEWSLETTER -->
 <SwagNewsletter />
\ No newline at end of file