From 88a91bdfc7611a58d94714cae6bae8648ccc6766 Mon Sep 17 00:00:00 2001
From: Marc Bernard <59966492+mbtools@users.noreply.github.com>
Date: Wed, 20 Dec 2023 15:32:58 -0500
Subject: [PATCH] chore(website): enhance plugin search ui (#4294)

* chore(website): enhance plugin search ui

* Delete .changeset/popular-nails-behave.md

* Update addons.json
---
 scripts/addon-update.ts                       |  4 +++
 website/sidebars.js                           |  2 +-
 .../components/EcosystemSearch/AddonCard.tsx  | 14 ++++++++-
 .../components/EcosystemSearch/CardLogo.tsx   | 13 ++++++++
 .../EcosystemSearch/FilterControl.tsx         |  2 +-
 .../src/components/EcosystemSearch/Icon.tsx   | 12 +++----
 .../components/EcosystemSearch/addons.json    | 31 -------------------
 website/src/components/Header.tsx             |  7 ++---
 website/src/components/Logo.tsx               | 17 ++++++++++
 .../version-5.x-sidebars.json                 |  2 +-
 .../version-6.x-sidebars.json                 |  2 +-
 11 files changed, 59 insertions(+), 47 deletions(-)
 create mode 100644 website/src/components/EcosystemSearch/CardLogo.tsx
 create mode 100644 website/src/components/Logo.tsx

diff --git a/scripts/addon-update.ts b/scripts/addon-update.ts
index 76c3ebf9d..e901b672b 100644
--- a/scripts/addon-update.ts
+++ b/scripts/addon-update.ts
@@ -12,6 +12,10 @@ import path from 'path';
       ).json();
       // @ts-ignore
       item.description = d.description;
+      // remove html tags from description (e.g. <h1...>)
+      item.description = item.description.replace(/<[^>]*>?/gm, '');
+      // remove markdown links from description (e.g. [link](url))
+      item.description = item.description.replace(/\[(.*?)\]\(.*?\)/gm, '$1');
       item.url = `https://www.npmjs.org/${item.name}`;
       item.registry = `https://registry.npmjs.org/${item.name}`;
       item.bundled = typeof item.bundled === 'boolean' ? item.bundled : false;
diff --git a/website/sidebars.js b/website/sidebars.js
index 0f3e92b9a..72136194a 100644
--- a/website/sidebars.js
+++ b/website/sidebars.js
@@ -70,7 +70,7 @@ module.exports = {
             'plugin-filter',
             {
               type: 'link',
-              label: 'Search Plugins',
+              label: 'Search for Plugins & Tools',
               href: '/dev/plugins-search',
             },
           ],
diff --git a/website/src/components/EcosystemSearch/AddonCard.tsx b/website/src/components/EcosystemSearch/AddonCard.tsx
index 2163d7a7e..19e7d74dd 100644
--- a/website/src/components/EcosystemSearch/AddonCard.tsx
+++ b/website/src/components/EcosystemSearch/AddonCard.tsx
@@ -17,6 +17,7 @@ import { useTheme } from '@mui/styles';
 import * as React from 'react';
 import { FC } from 'react';
 
+import CardLogo from './CardLogo';
 import Icon from './Icon';
 import { Addon } from './types';
 
@@ -54,6 +55,15 @@ const AddonCard: FC<Addon> = ({
               <Icon category={category} />
             </Avatar>
           }
+          action={
+            <Avatar
+              alt="Verdaccio"
+              title="Verdaccio Core"
+              sx={{ width: 40, height: 40, bgcolor: 'transparent' }}
+            >
+              <CardLogo origin={origin} />
+            </Avatar>
+          }
         />
         <CardContent>
           <Grid container>
@@ -75,6 +85,7 @@ const AddonCard: FC<Addon> = ({
           >
             <Grid>
               <Chip
+                title="Monthly downloads"
                 label={new Intl.NumberFormat().format(downloads)}
                 avatar={
                   <Avatar sizes="small">
@@ -85,10 +96,11 @@ const AddonCard: FC<Addon> = ({
               />
             </Grid>
             <Grid>
-              <Chip label={`v${latest}`} variant="outlined" />
+              <Chip title="Latest version" label={`v${latest}`} variant="outlined" />
             </Grid>
             <Grid>
               <Button
+                title="Show package on npmjs.com"
                 variant="text"
                 onClick={() => {
                   window.open(url, '_blank');
diff --git a/website/src/components/EcosystemSearch/CardLogo.tsx b/website/src/components/EcosystemSearch/CardLogo.tsx
new file mode 100644
index 000000000..111fe2a89
--- /dev/null
+++ b/website/src/components/EcosystemSearch/CardLogo.tsx
@@ -0,0 +1,13 @@
+import useBaseUrl from '@docusaurus/useBaseUrl';
+import * as React from 'react';
+import { FC } from 'react';
+
+import Logo from '../Logo';
+import styles from './Header.module.scss';
+
+const CardLogo: FC<{ origin: string }> = ({ origin }): React.ReactElement => {
+  // Show Verdaccio logo for core plugins
+  return origin === 'core' ? <Logo /> : <></>;
+};
+
+export default CardLogo;
diff --git a/website/src/components/EcosystemSearch/FilterControl.tsx b/website/src/components/EcosystemSearch/FilterControl.tsx
index 36fec3dcf..a7280ddeb 100644
--- a/website/src/components/EcosystemSearch/FilterControl.tsx
+++ b/website/src/components/EcosystemSearch/FilterControl.tsx
@@ -60,7 +60,7 @@ const FilterControl: FC<Props> = ({ categories, origins, onChange }): ReactEleme
         fontWeight="lg"
         sx={{ marginBottom: theme.spacing(1) }}
       >
-        <Translate>Search Plugins / Tools</Translate>
+        <Translate>Search for Plugins and Tools</Translate>
       </Typography>
       <Alert severity="info" sx={{ marginBottom: theme.spacing(1) }}>
         <Translate>Items qualified as core are maintained actively by the verdaccio team</Translate>
diff --git a/website/src/components/EcosystemSearch/Icon.tsx b/website/src/components/EcosystemSearch/Icon.tsx
index 61db87aa2..d9d9f3818 100644
--- a/website/src/components/EcosystemSearch/Icon.tsx
+++ b/website/src/components/EcosystemSearch/Icon.tsx
@@ -10,17 +10,17 @@ import { FC } from 'react';
 
 const Icon: FC<{ category: string }> = ({ category }): React.ReactElement => {
   if (category === 'middleware') {
-    return <AltRouteIcon />;
+    return <AltRouteIcon titleAccess={'Middleware Plugin'} />;
   } else if (category === 'storage') {
-    return <StorageIcon />;
+    return <StorageIcon titleAccess={'Storage Plugin'} />;
   } else if (category === 'tool') {
-    return <HandymanIcon />;
+    return <HandymanIcon titleAccess={'Tool'} />;
   } else if (category === 'filter') {
-    return <FilterAltIcon />;
+    return <FilterAltIcon titleAccess={'Filter Plugin'} />;
   } else if (category === 'authentication') {
-    return <SecurityIcon />;
+    return <SecurityIcon titleAccess={'Authentication Plugin'} />;
   } else if (category === 'ui') {
-    return <ColorLensIcon />;
+    return <ColorLensIcon titleAccess={'UI Theme'} />;
   }
 
   return <HubIcon />;
diff --git a/website/src/components/EcosystemSearch/addons.json b/website/src/components/EcosystemSearch/addons.json
index 9a3d884f5..82e479ae0 100644
--- a/website/src/components/EcosystemSearch/addons.json
+++ b/website/src/components/EcosystemSearch/addons.json
@@ -805,17 +805,6 @@
       "latest": "1.0.2",
       "downloads": 4
     },
-    {
-      "name": "verdaccio-sqlite",
-      "bundled": false,
-      "origin": "community",
-      "category": "authentication",
-      "description": "Verdaccio SQLite authentication plugin",
-      "url": "https://www.npmjs.org/verdaccio-sqlite",
-      "registry": "https://registry.npmjs.org/verdaccio-sqlite",
-      "latest": "1.0.2",
-      "downloads": 4
-    },
     {
       "name": "verdaccio-simplegroup",
       "bundled": false,
@@ -1166,26 +1155,6 @@
       "registry": "https://registry.npmjs.org/tgz-checker",
       "latest": "0.1.9",
       "downloads": 13
-    },
-    {
-      "name": "npm-offline-packer",
-      "bundled": false,
-      "origin": "community",
-      "category": "tool",
-      "url": "https://www.npmjs.org/npm-offline-packer",
-      "registry": "https://registry.npmjs.org/npm-offline-packer",
-      "latest": "1.0.1",
-      "downloads": 10
-    },
-    {
-      "name": "npm-offline-packer",
-      "bundled": false,
-      "origin": "community",
-      "category": "tool",
-      "url": "https://www.npmjs.org/npm-offline-packer",
-      "registry": "https://registry.npmjs.org/npm-offline-packer",
-      "latest": "1.0.1",
-      "downloads": 10
     }
   ]
 }
diff --git a/website/src/components/Header.tsx b/website/src/components/Header.tsx
index 5842f265e..3be9da6d6 100644
--- a/website/src/components/Header.tsx
+++ b/website/src/components/Header.tsx
@@ -6,16 +6,13 @@ import React from 'react';
 
 import Command from './Command';
 import styles from './Header.module.scss';
+import Logo from './Logo';
 
 const Header = (): React.ReactElement => {
   return (
     <div className={styles.header}>
       <div className={styles['header--wrap']}>
-        <img
-          className={styles['header--imageLogo']}
-          src={useBaseUrl('/img/logo/uk/verdaccio-tiny-uk-no-bg.svg')}
-          alt="Verdaccio Logo"
-        />
+        <Logo />
         <div className={styles['header--mt-2']}>
           <h1 className={styles['header--title']}>Verdaccio</h1>
           <p className={styles['header--subtitle']}>
diff --git a/website/src/components/Logo.tsx b/website/src/components/Logo.tsx
new file mode 100644
index 000000000..7897bbcd1
--- /dev/null
+++ b/website/src/components/Logo.tsx
@@ -0,0 +1,17 @@
+import useBaseUrl from '@docusaurus/useBaseUrl';
+import * as React from 'react';
+import { FC } from 'react';
+
+import styles from './Header.module.scss';
+
+const Logo: FC = (): React.ReactElement => {
+  return (
+    <img
+      className={styles['header--imageLogo']}
+      src={useBaseUrl('/img/logo/uk/verdaccio-tiny-uk-no-bg.svg')}
+      alt="Verdaccio Logo"
+    />
+  );
+};
+
+export default Logo;
diff --git a/website/versioned_sidebars/version-5.x-sidebars.json b/website/versioned_sidebars/version-5.x-sidebars.json
index 0c23261af..dc3358534 100644
--- a/website/versioned_sidebars/version-5.x-sidebars.json
+++ b/website/versioned_sidebars/version-5.x-sidebars.json
@@ -57,7 +57,7 @@
             "plugin-filter",
             {
               "type": "link",
-              "label": "Search Plugins",
+              "label": "Search for Plugins & Tools",
               "href": "/dev/plugins-search"
             }
           ]
diff --git a/website/versioned_sidebars/version-6.x-sidebars.json b/website/versioned_sidebars/version-6.x-sidebars.json
index 69e87143a..5b07f23eb 100644
--- a/website/versioned_sidebars/version-6.x-sidebars.json
+++ b/website/versioned_sidebars/version-6.x-sidebars.json
@@ -68,7 +68,7 @@
             "plugin-filter",
             {
               "type": "link",
-              "label": "Search Plugins",
+              "label": "Search for Plugins & Tools",
               "href": "/dev/plugins-search"
             }
           ]