feat: tweaks

shopware · Nov 21, 2023 · 7fb7b76 · 7fb7b76
1 parent 40342e8
commit 7fb7b76
Show file tree

Hide file tree

Showing 3 changed files with 105 additions and 53 deletions.
diff --git a/src/components/SwagChangelog.vue b/src/components/SwagChangelog.vue
@@ -1,15 +1,20 @@
 <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 releases">
-      <span class="SwagChangelog_version">{{ log.text }}</span>
-      <div>
+  <div class="SwagChangelog">
+    <a :href="release.link" class="SwagChangelog_item divide-y-1 divide-x-1 divide-gray-400"
+       v-for="release in releases">
+      <span class="SwagChangelog_version">{{ release.text }}</span>
+      <span>
         <span class="SwagChangelog_label"
-              :class="`--type-${log.type}`"
-              v-if="log.label">{{ log.label }}</span>
-        <span class="SwagChangelog_date">{{ log.date }}</span>
-      </div>
-    </div>
+              :class="`--type-${release.type}`"
+              v-if="release.label">{{ release.label }}</span>
+        <SwagLabel>{{ release.date }}</SwagLabel>
+      </span>
+    </a>
+    <a href="/release-notes/"
+       class="mt-3 as-link --with-icon SwagChangelog_older">
+      Older versions
+      <SwagIcon icon="long-arrow-right" type="solid"/>
+    </a>
   </div>
 </template>
 
@@ -19,44 +24,23 @@
   &_item {
     @apply flex justify-between items-center gap-2;
   }
+
   &_version {
     @apply font-normal text-lg text-black;
     .dark & {
       @apply text-white;
     }
   }
-  &_date {
-    @apply rounded-sm text-xs px-2 py-1;
-    background-color: var(--sw-c-gray-100);
-    color: var(--sw-c-gray-dark-100);
-    .dark & {
-      background-color: var(--sw-c-gray-dark-600);
-      color: var(--sw-c-gray-600);
-    }
-  }
-  &_label {
-    @apply text-xs px-2 py-1;
-    &.--type-rc {
-      background-color: var(--sw-c-blue-vivacious-100);
-      color: var(--sw-c-blue-vivacious-900);
-      .dark & {
-        background-color: var(--sw-c-blue-vivacious-900);
-        color: var(--sw-c-blue-vivacious-50);
-      }
-    }
-    &.--type-security {
-      background-color: var(--sw-c-pink-100);
-      color: var(--sw-c-pink-900);
-      .dark & {
-        background-color: var(--sw-c-pink-900);
-        color: var(--sw-c-pink-50);
-      }
-    }
+
+  &_older {
+    font-size: .875rem;
   }
 }
 </style>
 
 <script setup lang="ts">
+import SwagLabel from "./SwagLabel.vue";
+
 const props = defineProps({
   releases: {
     type: Array,

diff --git a/src/components/SwagChangelogWrapper.vue b/src/components/SwagChangelogWrapper.vue
@@ -5,30 +5,41 @@
 
     <div class="SwagChangelogWrapper_grid gap-10 items-start">
       <div class="c-flat-card p-6">
-        <h3 class="SwagChangelogWrapper_title">{{ latestData.__pageData.title }}</h3>
-        <p v-html="intro"></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 class="relative">
+          <h3 class="SwagChangelogWrapper_title">
+            {{ latestSource.__pageData.title }}
+            <SwagLabel>{{ latestRelease.date }}</SwagLabel>
+          </h3>
+          <p v-html="intro"></p>
+          <ul class="SwagChangelogWrapper_links">
+            <li v-for="link in links.slice(0, 5)">
+              <a :href="`${latestRelease.link}#${link.slug}`" class="as-link --with-icon">
+                {{ link.title }}
+                <SwagIcon icon="long-arrow-right" type="solid" />
+              </a>
+            </li>
+          </ul>
+          <a :href="latestRelease.link" class="SwagChangelogWrapper_details as-link">View details</a>
+        </div>
       </div>
       <div class="grid gap-5">
-        <h3 class="SwagChangelogWrapper_title">
+        <h4 class="SwagChangelogWrapper_title">
           Changelog
           <a href="https://github.com/shopware/platform/blob/trunk/CHANGELOG.md"
              target="_blank"
-             class="SwagChangelogWrapper_link">
+             class="SwagChangelogWrapper_link as-link">
             View on GitHub
             <SwagIcon icon="external-link-s"/>
           </a>
-        </h3>
+        </h4>
         <SwagChangelog :releases="releases"/>
       </div>
     </div>
   </div>
 </template>
 
 <script setup lang="ts" async>
+import SwagLabel from "./SwagLabel.vue";
 import {useData} from "vitepress";
 import {getSidebar, flattenSidebar} from '../../node_modules/vitepress-shopware-docs/src/shopware/support/sidebar'
 import SwagChangelog from "./SwagChangelog.vue";
@@ -44,21 +55,23 @@ const releases = flattenSidebar(getSidebar(theme.value.sidebar, '/release-notes/
         hour: '2-digit',
         minute: '2-digit'
       })}`;
+      release.date = date.toLocaleDateString();
+      release.text = release.text.startsWith('v') ? release.text.substring(1) : release.text;
       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 md = `..${latestRelease.link.replace('.html', '.md')}`;
+const latestSource = await import(/* @vite-ignore */md);
+
+//const sources = import.meta.glob(`../release-notes/*/*.*.*.*.md`);
+//const latestSource = sources[`..${latestRelease.link.replace('.html', '.md')}`];
+const headers = latestSource.__pageData.headers;
 const improvements = headers.find(({title}) => title === 'Improvements')?.children || [];
 const links = improvements.map(({title, slug}) => ({title, slug}));
 
-const md = `..${latestRelease.link.replace('.html', '.md')}`;
 
-const module = await import(/* @vite-ignore */md);
-const content = module.default.render().children[0].children;
+const content = latestSource.default.render().children[0].children;
 const intro = new DOMParser().parseFromString(content, "text/html").querySelector('p').innerText;
 </script>
 
@@ -94,5 +107,18 @@ const intro = new DOMParser().parseFromString(content, "text/html").querySelecto
       height: .625rem;
     }
   }
+
+  .SwagChangelogWrapper_links {
+    @apply m-0 p-0;
+    line-height: 150%;
+    list-style: none;
+    font-size: 0.875rem;
+  }
+
+  &_details {
+    @apply absolute right-0 bottom-0;
+    font-size: 0.875rem;
+    text-decoration: underline;
+  }
 }
 </style>
diff --git a/src/components/SwagLabel.vue b/src/components/SwagLabel.vue
@@ -0,0 +1,42 @@
+<template class="SwagLabel">
+  <span class="SwagLabel"><slot /></span>
+</template>
+
+<style lang="scss">
+.SwagLabel {
+  @apply rounded-sm text-xs p-2 px-3 inline-block;
+  background-color: var(--sw-c-gray-200);
+  background-color: #E2E8F0;
+  color: var(--sw-c-gray-dark-100);
+  color: #475569;
+  font-weight: 500;
+  .dark & {
+    background-color: var(--sw-c-gray-dark-600);
+    color: var(--sw-c-gray-600);
+  }
+  &.--danger {
+    background-color: #FBE5EA;
+    color: #C80F24;
+    /*.dark & {
+      background-color: var(--sw-c-gray-dark-600);
+      color: var(--sw-c-gray-600);
+    }*/
+  }
+  &.--type-rc {
+    background-color: var(--sw-c-blue-vivacious-100);
+    color: var(--sw-c-blue-vivacious-900);
+    .dark & {
+      background-color: var(--sw-c-blue-vivacious-900);
+      color: var(--sw-c-blue-vivacious-50);
+    }
+  }
+  &.--type-security {
+    background-color: var(--sw-c-pink-100);
+    color: var(--sw-c-pink-900);
+    .dark & {
+      background-color: var(--sw-c-pink-900);
+      color: var(--sw-c-pink-50);
+    }
+  }
+}
+</style>