fix(microsite): Add New ribbon in top right corner of PluginCard

Signed-off-by: Carlos Esteban Lopez <lcarlosesteb@vmware.com>

microsite/src/pages/plugins/_pluginCard.tsx

@@ -1,5 +1,6 @@
 import Link from '@docusaurus/Link';
 import { SimpleCard } from '@site/src/components/simpleCard/simpleCard';
+import clsx from 'clsx';
 import React from 'react';
 
 export interface IPluginData {
@@ -10,6 +11,8 @@ export interface IPluginData {
   documentation: string;
   iconUrl: string;
   title: string;
+  addedDate: string;
+  isNew: boolean;
   order?: number;
 }
 
@@ -22,14 +25,17 @@ export const PluginCard = ({
   description,
   documentation,
   iconUrl,
+  isNew = false,
   title,
 }: IPluginData) => (
   <SimpleCard
     header={
       <>
+        {isNew && <div className="newRibbon">NEW</div>}
+
         <img src={iconUrl || defaultIconUrl} alt={title} />
 
-        <h3>{title}</h3>
+        <h3 className={clsx({ newRibbonPadding: isNew })}>{title}</h3>
 
         <p className="PluginCardAuthor">
           by <a href={authorUrl}>{author}</a>

microsite/src/pages/plugins/index.tsx

@@ -1,12 +1,14 @@
 import Link from '@docusaurus/Link';
+import PluginsFilter from '@site/src/components/pluginsFilter/pluginsFilter';
+import { calcIsNewPlugin } from '@site/src/util/calcIsNewPlugin';
+import { truncateDescription } from '@site/src/util/truncateDescription';
+import { ChipCategory } from '@site/src/util/types';
 import Layout from '@theme/Layout';
 import clsx from 'clsx';
 import React, { useState } from 'react';
+
 import { IPluginData, PluginCard } from './_pluginCard';
 import pluginsStyles from './plugins.module.scss';
-import { ChipCategory } from '@site/src/util/types';
-import { truncateDescription } from '@site/src/util/truncateDescription';
-import PluginsFilter from '@site/src/components/pluginsFilter/pluginsFilter';
 
 const pluginsContext = require.context(
   '../../../data/plugins',
@@ -16,7 +18,9 @@ const pluginsContext = require.context(
 
 const plugins = pluginsContext.keys().reduce(
   (acum, id) => {
-    const pluginData: IPluginData = pluginsContext(id).default;
+    let pluginData: IPluginData = pluginsContext(id).default;
+
+    pluginData = calcIsNewPlugin(pluginData);
 
     acum[
       pluginData.category === 'Core Feature' ? 'corePlugins' : 'otherPlugins'

microsite/src/pages/plugins/plugins.module.scss

@@ -11,6 +11,7 @@
   :global(.card .card__header) {
     display: grid;
     row-gap: 0.25rem;
+    position: relative;
     column-gap: 1rem;
     align-items: center;
     grid-template-columns: auto 1fr;
@@ -19,6 +20,28 @@
       margin: 0;
     }
 
+    :global(.newRibbon) {
+      --paddingX: 1.2lh;
+      --rotation: 45deg;
+      --translateX: 30%;
+      --translateY: -100%;
+
+      top: 0;
+      right: 0;
+      padding: 0 var(--paddingX);
+      position: absolute;
+      text-align: center;
+
+      transform: translateY(var(--translateY)) translateX(var(--translateX))
+        rotate(var(--rotation));
+      transform-origin: bottom left;
+      background-color: var(--ifm-color-primary);
+    }
+
+    :global(.newRibbonPadding) {
+      padding-right: 1.2lh;
+    }
+
     :global(img) {
       width: 80px;
       grid-row: 1/4;

microsite/src/util/calcIsNewPlugin.tsx

@@ -0,0 +1,18 @@
+import { DateTime } from 'luxon';
+
+export const newDaysLimit = 100;
+
+export const calcIsNewPlugin = <
+  T extends { addedDate: string; isNew: boolean },
+>(
+  itemData: T,
+) => {
+  const addedDate = DateTime.fromISO(itemData.addedDate);
+  const daysOld = Math.abs(addedDate.diffNow('days').days);
+  const isNew = !isNaN(daysOld) && daysOld < newDaysLimit;
+
+  return {
+    ...itemData,
+    isNew,
+  };
+};