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

@@ -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;

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',
             },
           ],

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');

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;

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>

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 />;

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
     }
   ]
 }

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']}>

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;

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"
             }
           ]

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"
             }
           ]