Merge pull request #3299 from threefoldtech/development_new_apps

Add new key word for new apps

packages/playground/src/App.vue

@@ -57,6 +57,12 @@
                           <span v-bind="props">
                             {{ item.title }}
                           </span>
+                          <v-badge
+                            dot
+                            inline
+                            color="primary"
+                            v-if="item.releaseDate && isReleasedOverMon(item.releaseDate, new Date())"
+                          ></v-badge>
                         </template>
                       </v-tooltip>
                     </v-list-item-title>
@@ -88,6 +94,12 @@
                         <span v-bind="props">
                           {{ item.title }}
                         </span>
+                        <v-badge
+                          dot
+                          inline
+                          color="primary"
+                          v-if="item.releaseDate && isReleasedOverMon(item.releaseDate, new Date())"
+                        ></v-badge>
                       </template>
                     </v-tooltip>
                   </v-list-item-title>
@@ -251,6 +263,7 @@ import { useRoute, useRouter } from "vue-router";
 import { useTheme } from "vuetify";
 
 import TfLogger from "@/components/logger.vue";
+import { isReleasedOverMon } from "@/utils/date";
 import { LocalStorageSettingsKey } from "@/utils/settings";
 
 import { useProfileManager } from "./stores/profile_manager";
@@ -561,7 +574,6 @@ import TfRouterView from "./components/TfRouterView.vue";
 import TfSwapPrice from "./components/TfSwapPrice.vue";
 import { useGrid } from "./stores";
 import ProfileManager from "./weblets/profile_manager.vue";
-
 interface AppRoute {
   title: string;
   items: AppRouteItem[];
@@ -575,6 +587,7 @@ interface AppRouteItem {
   url?: string;
   icon?: string;
   tooltip?: string;
+  releaseDate?: Date;
 }
 
 export default {

packages/playground/src/components/applications/ApplicationCards.vue

@@ -1,10 +1,18 @@
 <template>
   <v-row>
-    <v-col v-for="card in cards" :key="card.title" cols="12" sm="12" md="12" lg="6" :xl="cards.length > 3 ? 4 : 6">
+    <v-col v-for="card in cards" :key="card.title" cols="12" sm="12" lg="6" :xl="cards.length > 3 ? 4 : 6">
       <router-link :to="card.route">
         <v-hover>
           <template v-slot:default="{ isHovering, props }">
-            <v-card :height="200" class="pa-3 pt-6" v-bind="props" :class="isHovering ? 'card-opacity' : undefined">
+            <v-card
+              :height="200"
+              class="pa-3 pt-6"
+              v-bind="props"
+              :class="[
+                isHovering ? 'card-opacity' : undefined,
+                card.releaseDate && isReleasedOverMon(card.releaseDate, new Date()) ? 'ribben' : '',
+              ]"
+            >
               <v-img
                 class="d-inline-block ml-3 mb-2"
                 width="35"
@@ -21,7 +29,9 @@
                   {{ tag }}
                 </v-chip>
               </v-card-title>
-              <v-card-text class="mt-2" v-bind="props"> {{ card.excerpt }} </v-card-text>
+              <v-card-text class="mt-2" v-bind="props">
+                {{ card.excerpt }}
+              </v-card-text>
             </v-card>
           </template></v-hover
         >
@@ -33,8 +43,8 @@
 <script lang="ts">
 import { defineComponent, type PropType } from "vue";
 
+import { isReleasedOverMon } from "@/utils/date";
 import type { ApplicationCard } from "@/utils/types";
-
 export default defineComponent({
   name: "ApplicationCards",
   props: {
@@ -45,19 +55,73 @@ export default defineComponent({
   },
   setup() {
     const baseURL = import.meta.env.BASE_URL;
+
     return {
       baseURL,
+      isReleasedOverMon,
     };
   },
 });
 </script>
 
 <style scoped>
+.ribben {
+  overflow: hidden;
+  position: relative;
+  display: inline-block;
+}
+
+.ribben:before {
+  content: "NEW";
+  animation-name: new;
+  animation-duration: 1s;
+  animation-iteration-count: infinite;
+  animation-timing-function: ease;
+  position: absolute;
+  top: -11px;
+  right: -37px;
+  width: 110px;
+  text-align: center;
+  transform: rotate(45deg);
+  background: #1aa18f;
+  padding-top: 28px;
+  color: white;
+  font-size: 12px;
+  font-weight: 600;
+  padding-bottom: 9px;
+  letter-spacing: 2px;
+}
+
+@keyframes new {
+  0% {
+    background: #1aa18f;
+  }
+  50% {
+    background: rgb(22, 129, 114);
+  }
+  100% {
+    background: #1aa18f;
+  }
+}
+
 a {
   text-decoration: none !important;
 }
 
 .card-opacity {
   background-color: rgba(125, 227, 200, 0.12);
 }
+
+.scale_beat {
+  animation: crescendo 0.5s alternate infinite ease-in;
+}
+
+@keyframes crescendo {
+  0% {
+    transform: scale(1);
+  }
+  100% {
+    transform: scale(1.2);
+  }
+}
 </style>

packages/playground/src/utils/date.ts

@@ -3,3 +3,17 @@ import moment from "moment";
 export default function toHumanDate(timeInSeconds: number): string {
   return moment(timeInSeconds * 1000).format("DD MMM YYYY, hh:mm A");
 }
+
+/**
+ * Checks if a release date is within the last 30 days from the current date.
+ *
+ * @param {Date} releaseDate - The date of release
+ * @param {Date} currentDate - The current date
+ * @returns {boolean} True if the release date is within the last 30 days, false otherwise
+ */
+
+export function isReleasedOverMon(releaseDate: Date, currentDate: Date): boolean {
+  const millisecondsInADay = 24 * 60 * 60 * 1000;
+  const diff = Math.abs((currentDate.getTime() - releaseDate.getTime()) / millisecondsInADay);
+  return diff <= 30;
+}

packages/playground/src/utils/types.ts

@@ -15,10 +15,23 @@ export interface IPublicConfig {
   domain?: string;
 }
 
+/**
+ * Represents an application card with metadata and optional release date.
+ *
+ * @interface ApplicationCard
+ * @property {string} title - The title of the application.
+ * @property {string} excerpt - A brief description of the application.
+ * @property {string} icon - The icon associated with the application.
+ * @property {string} route - The route or URL of the application.
+ * @property {string[]} [tags] - Optional list of tags or keywords for the application.
+ * @property {Date} [releaseDate] - Optional release date of the application.
+ */
+
 export interface ApplicationCard {
   title: string;
   excerpt: string;
   icon: string;
   route: string;
   tags?: string[];
+  releaseDate?: Date;
 }

packages/playground/tests/utils/isReleasedOverMon.test.ts

@@ -0,0 +1,23 @@
+import { describe, expect, it } from "vitest";
+
+import { isReleasedOverMon } from "../../src/utils/date";
+
+describe("isReleasedOverMon", () => {
+  it("return true if the releaseDate is within 30 days", () => {
+    const releaseDate = new Date("2024-09-1");
+    const currentDate = new Date("2024-09-19");
+    expect(isReleasedOverMon(releaseDate, currentDate)).toBe(true);
+  });
+
+  it("return false if the releaseDate was from more than 30 days", () => {
+    const releaseDate = new Date("2024-09-1");
+    const currentDate = new Date("2024-11-19");
+    expect(isReleasedOverMon(releaseDate, currentDate)).toBe(false);
+  });
+
+  it("return true if releaseDate is today", () => {
+    const releaseDate = new Date("2024-09-19");
+    const currentDate = new Date("2024-09-19");
+    expect(isReleasedOverMon(releaseDate, currentDate)).toBe(true);
+  });
+});