@eventcatalog/core 1.2.7 → 2.0.0

package/bin/eventcatalog.js

@@ -1,141 +0,0 @@
-#!/usr/bin/env node
-
-const cli = require('commander');
-const path = require('path');
-const { execSync } = require('child_process');
-const fs = require('fs-extra');
-
-// this is the directory the users project is in
-const projectDIR = process.cwd();
-const coreDirectory = path.join(__dirname, '../');
-
-// this is the directory where the eventcatalog core code is
-const eventCatalogLibDir = path.join(projectDIR, '.eventcatalog-core');
-
-const copyCoreApplicationCodeIntoUsersProjectDir = () => {
-  const excludeFilesForCopy = ['.next', 'eventcatalog.config.js', 'eventcatalog.styles.css', 'bin', 'README.md'];
-  const exclusions = excludeFilesForCopy.map((file) => path.join(eventCatalogLibDir, file));
-
-  fs.ensureDirSync(eventCatalogLibDir);
-  fs.copySync(coreDirectory, eventCatalogLibDir);
-
-  // remove any files we don't care about
-  exclusions.map((path) => {
-    try {
-      fs.lstatSync(path).isDirectory() ? fs.rmSync(path, { recursive: true, force: true }) : fs.unlinkSync(path);
-    } catch (error) {}
-  });
-
-  fs.copyFileSync(path.join(projectDIR, 'eventcatalog.config.js'), path.join(eventCatalogLibDir, 'eventcatalog.config.js'));
-};
-
-cli
-  .command('start [siteDir]')
-  .description('Start the development server.')
-  .action(() => {
-    execSync(`cross-env PROJECT_DIR='${projectDIR}' npm run start`, {
-      cwd: eventCatalogLibDir,
-      stdio: 'inherit',
-    });
-  });
-
-cli
-  .command('build [siteDir]')
-  .description('Build eventcatalog project.')
-  .action(() => {
-    if (!fs.existsSync(eventCatalogLibDir)) {
-      copyCoreApplicationCodeIntoUsersProjectDir();
-    }
-
-    // copy any public assets over (from users to the lib itself)
-    fs.copySync(path.join(projectDIR, 'public'), path.join(eventCatalogLibDir, 'public'));
-
-    // Copy the eventcatalog file over
-    fs.copyFileSync(path.join(projectDIR, 'eventcatalog.config.js'), path.join(eventCatalogLibDir, 'eventcatalog.config.js'));
-
-    if (fs.pathExistsSync(path.join(projectDIR, 'eventcatalog.styles.css'))) {
-      fs.copyFileSync(path.join(projectDIR, 'eventcatalog.styles.css'), path.join(eventCatalogLibDir, 'eventcatalog.styles.css'));
-    }
-
-    // Move the schemas into public directory so we can download them from UI
-    execSync(`cross-env PROJECT_DIR='${projectDIR}' npm run scripts:move-schema-for-download`, {
-      cwd: eventCatalogLibDir,
-      stdio: 'inherit',
-    });
-
-    // build using nextjs
-    execSync(`cross-env PROJECT_DIR='${projectDIR}' npm run build`, {
-      cwd: eventCatalogLibDir,
-      stdio: 'inherit',
-    });
-
-    // everything is built make sure its back in the users project directory
-    fs.copySync(path.join(eventCatalogLibDir, '.next'), path.join(projectDIR, '.next'));
-    fs.copySync(path.join(eventCatalogLibDir, 'out'), path.join(projectDIR, 'out'));
-  });
-
-cli
-  .command('dev [siteDir]')
-  .description('Start the development server.')
-  .action(() => {
-    // Fix for https://github.com/boyney123/eventcatalog/issues/41, not the best but will do for now
-    fs.rmSync(eventCatalogLibDir, { recursive: true, force: true });
-
-    copyCoreApplicationCodeIntoUsersProjectDir();
-
-    // copy any public assets over (from users to the lib itself)
-    fs.copySync(path.join(projectDIR, 'public'), path.join(eventCatalogLibDir, 'public'));
-
-    fs.copyFileSync(path.join(projectDIR, 'eventcatalog.config.js'), path.join(eventCatalogLibDir, 'eventcatalog.config.js'));
-    if (fs.pathExistsSync(path.join(projectDIR, 'eventcatalog.styles.css'))) {
-      fs.copyFileSync(path.join(projectDIR, 'eventcatalog.styles.css'), path.join(eventCatalogLibDir, 'eventcatalog.styles.css'));
-    }
-
-    // Move the schemas into public directory so we can download them from UI
-    execSync(`cross-env PROJECT_DIR='${projectDIR}' npm run scripts:move-schema-for-download`, {
-      cwd: eventCatalogLibDir,
-      stdio: 'inherit',
-    });
-
-    execSync(`cross-env PROJECT_DIR='${projectDIR}' npm run dev`, {
-      cwd: eventCatalogLibDir,
-      stdio: 'inherit',
-    });
-  });
-
-cli
-
-  .command('generate [siteDir]')
-  .description('Start the generator scripts.')
-  .action(() => {
-    if (!fs.existsSync(eventCatalogLibDir)) {
-      // get the application ready
-      copyCoreApplicationCodeIntoUsersProjectDir();
-    }
-
-    fs.copyFileSync(path.join(projectDIR, 'eventcatalog.config.js'), path.join(eventCatalogLibDir, 'eventcatalog.config.js'));
-    if (fs.pathExistsSync(path.join(projectDIR, 'eventcatalog.styles.css'))) {
-      fs.copyFileSync(path.join(projectDIR, 'eventcatalog.styles.css'), path.join(eventCatalogLibDir, 'eventcatalog.styles.css'));
-    }
-
-    execSync(`cross-env PROJECT_DIR='${projectDIR}' npm run generate`, {
-      cwd: eventCatalogLibDir,
-      stdio: 'inherit',
-    });
-  });
-
-async function run() {
-  cli.parse(process.argv);
-
-  if (!process.argv.slice(2).length) {
-    cli.outputHelp();
-  }
-}
-
-run();
-
-process.on('unhandledRejection', (err) => {
-  console.error(err);
-  // console.error(chalk.red(err.stack));
-  process.exit(1);
-});

package/components/BreadCrumbs.tsx

@@ -1,50 +0,0 @@
-import React from 'react';
-import { HomeIcon } from '@heroicons/react/solid';
-import Link from 'next/link';
-
-interface BreadCrumbsProps {
-  pages: { name: string; href: string; current: boolean }[];
-  homePath?: string;
-}
-
-function BreadCrumbs({ pages, homePath = '/events' }: BreadCrumbsProps) {
-  return (
-    <nav className="flex" aria-label="Breadcrumb">
-      <ol className="flex items-center space-x-4">
-        <li>
-          <Link href={homePath}>
-            <a className="text-gray-400 hover:text-gray-500">
-              <HomeIcon className="flex-shrink-0 h-5 w-5" aria-hidden="true" />
-              <span className="sr-only">Home</span>
-            </a>
-          </Link>
-        </li>
-        {pages.map((page) => (
-          <li key={page.name}>
-            <div className="flex items-center">
-              <svg
-                className="flex-shrink-0 h-5 w-5 text-gray-300"
-                xmlns="http://www.w3.org/2000/svg"
-                fill="currentColor"
-                viewBox="0 0 20 20"
-                aria-hidden="true"
-              >
-                <path d="M5.555 17.776l8-16 .894.448-8 16-.894-.448z" />
-              </svg>
-              <Link href={page.href}>
-                <a
-                  className="ml-4 text-sm font-medium text-gray-500 hover:text-gray-700"
-                  aria-current={page.current ? 'page' : undefined}
-                >
-                  {page.name}
-                </a>
-              </Link>
-            </div>
-          </li>
-        ))}
-      </ol>
-    </nav>
-  );
-}
-
-export default BreadCrumbs;

package/components/ContentView.tsx

@@ -1,123 +0,0 @@
-import { PencilIcon } from '@heroicons/react/solid';
-import Link from 'next/link';
-import Admonition from '@/components/Mdx/Admonition';
-
-interface ContentViewProps {
-  title: string;
-  subtitle?: string;
-  tags?: { href?: string; label: string }[];
-  lastModifiedDate: string;
-  children: JSX.Element;
-  sidebar: JSX.Element;
-  breadCrumbs: JSX.Element;
-  editUrl?: string;
-  version?: string;
-  isOldVersion?: boolean;
-  latestVersionUrl?: string;
-  draft?: boolean;
-}
-
-export default function ContentView({
-  title,
-  subtitle,
-  tags = [],
-  lastModifiedDate,
-  children,
-  sidebar: SideBar,
-  breadCrumbs: BreadCrumbs,
-  editUrl,
-  isOldVersion,
-  latestVersionUrl,
-  version,
-  draft: isDraft = false,
-}: ContentViewProps) {
-  return (
-    <div className="flex relative">
-      <div className=" flex flex-col w-0 flex-1 ">
-        <main className="flex-1 ">
-          <div className="py-8 xl:py-10">
-            <div className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 xl:max-w-7xl xl:grid xl:grid-cols-4">
-              <div className="xl:col-span-3 xl:pr-8 xl:border-r xl:border-gray-200 flex-col justify-between flex">
-                <div>
-                  {BreadCrumbs && <div className="mb-5 border-b border-gray-100 pb-4">{BreadCrumbs}</div>}
-                  <div>
-                    <div>
-                      <div className="xl:border-b pb-4 flex justify-between ">
-                        <div className="space-y-2 w-full">
-                          <h1 className="text-3xl font-bold text-gray-900 relative">
-                            {title}
-                            <div className="-top-1 relative inline-block ml-2">
-                              {tags.map((tag, index) => (
-                                <span
-                                  key={`${tag}-${index}`}
-                                  className="ml-2 inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium -top-0.5 relative bg-yellow-100 text-yellow-800"
-                                >
-                                  {tag.label}
-                                </span>
-                              ))}
-                              {isDraft && (
-                                <span className="ml-2 inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium -top-0.5 relative bg-gray-500 text-gray-100">
-                                  Draft
-                                </span>
-                              )}
-                            </div>
-                          </h1>
-                          <div className="text-gray-600 mb-10 text py-2">{subtitle}</div>
-                          {isOldVersion && version && (
-                            <Admonition className="mt-0 pt-0 w-full" type="warning">
-                              <>
-                                You are currently viewing an old version of this event ({version}).
-                                <Link href={latestVersionUrl}>
-                                  <a className="block text-sm pl-7 mt-2 text-blue-500 underline">Read latest version &rarr;</a>
-                                </Link>
-                              </>
-                            </Admonition>
-                          )}
-                        </div>
-                        <div className="mt-4 flex space-x-3 md:mt-0">
-                          {editUrl && (
-                            <a
-                              href={editUrl}
-                              target="_blank"
-                              type="button"
-                              className="hidden md:inline-flex h-10 justify-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-900"
-                              rel="noreferrer"
-                            >
-                              <PencilIcon className="-ml-1 mr-2 h-5 w-5 text-gray-400" aria-hidden="true" />
-                              <span>Edit</span>
-                            </a>
-                          )}
-                        </div>
-                      </div>
-                      <div className="py-3 xl:pt-6 xl:pb-0">
-                        {isDraft && (
-                          <Admonition className="mt-0 pt-0" type="warning">
-                            <>
-                              This event is currently in <span className="underline">draft</span> mode.
-                            </>
-                          </Admonition>
-                        )}
-
-                        <div className="prose max-w-none">{children}</div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-                <div className={`flex mt-10 ${editUrl ? 'justify-between' : 'justify-end'}`}>
-                  {editUrl && (
-                    <a href={editUrl} target="_blank" className="flex text-gray-400" rel="noreferrer">
-                      <PencilIcon className="top-1 mr-2 relative h-4 w-4 text-gray-400" aria-hidden="true" />
-                      <span>Edit this page</span>
-                    </a>
-                  )}
-                  <span className="italic text-xs mt-2">Last updated on {lastModifiedDate}</span>
-                </div>
-              </div>
-              <div className="md:min-h-screen">{SideBar}</div>
-            </div>
-          </div>
-        </main>
-      </div>
-    </div>
-  );
-}

package/components/Footer.tsx

@@ -1,31 +0,0 @@
-import React from 'react';
-import { useConfig } from '@/hooks/EventCatalog';
-
-export default function Footer() {
-  const { organizationName, footerLinks: navigation = [] } = useConfig();
-  const year = new Date().getFullYear();
-
-  return (
-    <footer className="bg-gray-800">
-      <div className="max-w-7xl mx-auto py-12 px-4 overflow-hidden sm:px-6 lg:px-8">
-        {navigation && (
-          <nav className="-mx-5 -my-2 flex flex-wrap justify-center" aria-label="Footer">
-            {navigation.map((item) => (
-              <div key={item.label} className="px-5 py-2">
-                <a href={item.href} className="text-base text-gray-500 hover:text-gray-400">
-                  {item.label}
-                </a>
-              </div>
-            ))}
-          </nav>
-        )}
-        <p className="mt-8 text-center text-base text-gray-400">
-          Copyright © {year} {organizationName}. Built with{' '}
-          <a className="underline" href="https://eventcatalog.dev" target="_blank" rel="noreferrer">
-            EventCatalog.
-          </a>
-        </p>
-      </div>
-    </footer>
-  );
-}

package/components/Grids/DomainGrid.tsx

@@ -1,61 +0,0 @@
-import React from 'react';
-import Link from 'next/link';
-
-import { CubeIcon } from '@heroicons/react/outline';
-
-import { Domain } from '@eventcatalog/types';
-
-import getBackgroundColor from '@/utils/random-bg';
-
-interface DomainGridProps {
-  domains: Domain[];
-}
-
-function DomainGrid({ domains = [] }: DomainGridProps) {
-  return (
-    <ul className="mt-3 grid grid-cols-1 gap-5 md:grid-cols-2">
-      {domains.map((domain) => (
-        <li key={domain.name} className="flex">
-          <Link href={`/domains/${domain.name}`}>
-            <a className="flex shadow-sm w-full">
-              <div
-                style={{
-                  background: getBackgroundColor(domain.name),
-                }}
-                className="w-4 rounded-l-md"
-              />
-              <div className="w-full border-t border-r border-b border-gray-200 bg-white rounded-r-md ">
-                <div className="p-4 text-sm space-y-2 flex flex-col justify-between h-full">
-                  <div>
-                    <span className="text-gray-900 font-bold">{domain.name}</span>
-                    {domain.badges?.map((badge) => (
-                      <span
-                        key={`${domain.name}-${badge.content}`}
-                        className={`ml-2 inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-${badge.backgroundColor}-100 text-${badge.textColor}-800`}
-                      >
-                        {badge.content}
-                      </span>
-                    ))}
-                    <div className="text-gray-500 text-xs font-normal mt-2 line-clamp-3">{domain.summary}</div>
-                  </div>
-                  <div className="flex space-x-4 text-xs pt-2 relative bottom-0 left-0">
-                    <div className=" font-medium text-gray-500">
-                      <CubeIcon className="h-4 w-4 text-green-400 inline-block mr-2" aria-hidden="true" />
-                      Services ({domain.services.length})
-                    </div>
-                    <div className=" font-medium text-gray-500">
-                      <CubeIcon className="h-4 w-4 text-indigo-400 inline-block mr-2" aria-hidden="true" />
-                      Events ({domain.events.length})
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </a>
-          </Link>
-        </li>
-      ))}
-    </ul>
-  );
-}
-
-export default DomainGrid;

package/components/Grids/EventGrid.tsx

@@ -1,102 +0,0 @@
-import React from 'react';
-import Link from 'next/link';
-
-import { CubeIcon, CollectionIcon } from '@heroicons/react/outline';
-
-import { Event } from '@eventcatalog/types';
-import getBackgroundColor from '@/utils/random-bg';
-
-import Mermaid from '@/components/Mermaid';
-import NodeGraph from '@/components/Mdx/NodeGraph/NodeGraph';
-
-function classNames(...classes) {
-  return classes.filter(Boolean).join(' ');
-}
-
-interface EventGridProps {
-  events: Event[];
-  showMermaidDiagrams?: boolean;
-  showNodeGraphs?: boolean;
-}
-
-function EventGrid({ events = [], showMermaidDiagrams = false, showNodeGraphs = false }: EventGridProps) {
-  return (
-    <ul className="mt-3 grid grid-cols-1 gap-5 md:grid-cols-2">
-      {events.map((event) => {
-        const { draft: isDraft, domain } = event;
-        const eventURL = domain ? `/domains/${domain}/events/${event.name}` : `/events/${event.name}`;
-        const eventKey = domain ? `${domain}-${event.name}` : event.name;
-
-        return (
-          <li key={eventKey} className="flex">
-            <Link href={eventURL}>
-              <a className="flex shadow-sm rounded-md w-full">
-                <div
-                  style={{
-                    background: getBackgroundColor(event.name),
-                  }}
-                  className={classNames(
-                    'bg-red-500',
-                    'flex-shrink-0 flex items-center justify-center w-4 text-white text-sm font-medium rounded-l-md'
-                  )}
-                />
-                <div className="w-full border-t border-r border-b border-gray-200 bg-white rounded-r-md ">
-                  <div className="p-4 text-sm space-y-2 flex flex-col justify-between h-full">
-                    <div className="text-gray-900 font-bold hover:text-gray-600 break-all">
-                      {event.name}
-                      <span className="ml-2 inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800">
-                        v{event.version}
-                      </span>
-                      {event.badges?.map((badge) => (
-                        <span
-                          key={`${event.name}-${badge.content}`}
-                          className={`ml-2 inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-${badge.backgroundColor}-100 text-${badge.textColor}-800`}
-                        >
-                          {badge.content}
-                        </span>
-                      ))}
-                      {isDraft && (
-                        <span className="ml-2 inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-500 text-gray-100">
-                          Draft
-                        </span>
-                      )}
-                    </div>
-                    <div className="text-gray-500 text-xs font-normal mt-2 ">{event.summary}</div>
-                    {showMermaidDiagrams && (
-                      <div className="h-full items-center flex">
-                        <Mermaid source="event" data={event} rootNodeColor={getBackgroundColor(event.name)} />
-                      </div>
-                    )}
-                    {showNodeGraphs && (
-                      <div className="h-full items-center flex">
-                        <NodeGraph source="event" data={event} rootNodeColor={getBackgroundColor(event.name)} />
-                      </div>
-                    )}
-                    <div className="flex space-x-4 text-xs pt-2 relative bottom-0 left-0">
-                      <div className=" font-medium text-gray-500">
-                        <CubeIcon className="h-4 w-4 text-green-400 inline-block mr-2" aria-hidden="true" />
-                        Producers ({event.producerNames.length})
-                      </div>
-                      <div className=" font-medium text-gray-500">
-                        <CubeIcon className="h-4 w-4 text-indigo-400 inline-block mr-2" aria-hidden="true" />
-                        Subscribers ({event.consumerNames.length})
-                      </div>
-                      {event.domain && (
-                        <div className=" font-medium text-gray-500">
-                          <CollectionIcon className="h-4 w-4 text-yellow-400 inline-block mr-2" aria-hidden="true" />
-                          {event.domain}
-                        </div>
-                      )}
-                    </div>
-                  </div>
-                </div>
-              </a>
-            </Link>
-          </li>
-        );
-      })}
-    </ul>
-  );
-}
-
-export default EventGrid;

package/components/Grids/ServiceGrid.tsx

@@ -1,84 +0,0 @@
-import React from 'react';
-import Link from 'next/link';
-
-import { CubeIcon } from '@heroicons/react/outline';
-
-import { Service } from '@eventcatalog/types';
-import Mermaid from '@/components/Mermaid';
-
-import getBackgroundColor from '@/utils/random-bg';
-import NodeGraph from '@/components/Mdx/NodeGraph/NodeGraph';
-
-interface ServiceGridProps {
-  services: Service[];
-  showMermaidDiagrams?: boolean;
-  showNodeGraphs?: boolean;
-}
-
-function ServiceGrid({ services = [], showMermaidDiagrams = false, showNodeGraphs = false }: ServiceGridProps) {
-  return (
-    <ul className="mt-3 grid grid-cols-1 gap-5 md:grid-cols-2">
-      {services.map((service, index) => {
-        const { draft: isDraft, domain } = service;
-        const serviceUrl = domain ? `/domains/${domain}/services/${service.name}` : `/services/${service.name}`;
-        return (
-          <li key={`${service.name}-${index}`} className="flex">
-            <Link href={serviceUrl}>
-              <a className="flex shadow-sm w-full">
-                <div
-                  style={{
-                    background: getBackgroundColor(service.name),
-                  }}
-                  className="w-4 rounded-l-md"
-                />
-                <div className="w-full border-t border-r border-b border-gray-200 bg-white rounded-r-md ">
-                  <div className="p-4 text-sm space-y-2 flex flex-col justify-between h-full">
-                    <div>
-                      <span className="text-gray-900 font-bold">{service.name}</span>
-                      {service.badges?.map((badge) => (
-                        <span
-                          key={`${service.name}-${badge.content}`}
-                          className={`ml-2 inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-${badge.backgroundColor}-100 text-${badge.textColor}-800`}
-                        >
-                          {badge.content}
-                        </span>
-                      ))}
-                      {isDraft && (
-                        <span className="ml-2 inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-500 text-gray-100">
-                          Draft
-                        </span>
-                      )}
-                      <div className="text-gray-500 text-xs font-normal mt-2 line-clamp-3">{service.summary}</div>
-                    </div>
-                    {showMermaidDiagrams && (
-                      <div className="h-full items-center flex">
-                        <Mermaid source="service" data={service} rootNodeColor={getBackgroundColor(service.name)} />
-                      </div>
-                    )}
-                    {showNodeGraphs && (
-                      <div className="h-full items-center flex">
-                        <NodeGraph source="service" data={service} rootNodeColor={getBackgroundColor(service.name)} />
-                      </div>
-                    )}
-                    <div className="flex space-x-4 text-xs pt-2 relative bottom-0 left-0">
-                      <div className=" font-medium text-gray-500">
-                        <CubeIcon className="h-4 w-4 text-green-400 inline-block mr-2" aria-hidden="true" />
-                        Subscribe Events ({service.subscribes.length})
-                      </div>
-                      <div className=" font-medium text-gray-500">
-                        <CubeIcon className="h-4 w-4 text-indigo-400 inline-block mr-2" aria-hidden="true" />
-                        Publish Events ({service.publishes.length})
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </a>
-            </Link>
-          </li>
-        );
-      })}
-    </ul>
-  );
-}
-
-export default ServiceGrid;

package/components/Grids/UserGrid.tsx

@@ -1,55 +0,0 @@
-import React from 'react';
-import Link from 'next/link';
-
-import { User } from '@eventcatalog/types';
-
-import getBackgroundColor from '@/utils/random-bg';
-
-interface UserGridProps {
-  users: User[];
-}
-
-function UserGrid({ users = [] }: UserGridProps) {
-  return (
-    <ul className="mt-3 grid grid-cols-1 gap-5 md:grid-cols-2">
-      {users.map((user, index) => {
-        const UserUrl = `/users/${user.id}`;
-        return (
-          <li key={`${user.name}-${index}`} className="flex">
-            <Link href={UserUrl}>
-              <a className="flex shadow-sm w-full">
-                <div
-                  style={{
-                    background: getBackgroundColor(user.name),
-                  }}
-                  className="w-4 rounded-l-md"
-                />
-
-                <div className="w-full border-t border-r border-b border-gray-200 bg-white rounded-r-md ">
-                  <div className="p-4 text-sm space-y-2 space-x-4 flex flex-col justify-between h-full">
-                    <div className="flex space-x-4 text-xs pt-2 relative bottom-0 left-0">
-                      <div className="font-medium text-gray-500">
-                        <div className="flex-shrink-0">
-                          <div className="relative">
-                            <img className="h-16 w-16 rounded-full max-w-none" src={user.avatarUrl} alt="" />
-                            <span className="absolute inset-0 shadow-inner rounded-full" aria-hidden="true" />
-                          </div>
-                        </div>
-                      </div>
-                      <div className="font-medium text-gray-500">
-                        <span className="text-gray-900 font-bold">{user.name}</span>
-                        <div className="text-gray-500 text-xs font-normal mt-2 line-clamp-3">{user.summary}</div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </a>
-            </Link>
-          </li>
-        );
-      })}
-    </ul>
-  );
-}
-
-export default UserGrid;