@eventcatalog/core 0.0.7 → 0.0.8

package/lib/__tests__/file-reader.spec.ts

@@ -21,9 +21,7 @@ describe('file-reader lib', () => {
         { encoding: 'utf-8' }
       );
 
-      const result = getSchemaFromDir(
-        path.join(process.env.PROJECT_DIR, 'events', 'EventWithSchemaAndExamples')
-      );
+      const result = getSchemaFromDir(path.join(process.env.PROJECT_DIR, 'events', 'EventWithSchemaAndExamples'));
 
       expect(result.snippet).toEqual(rawSchemaFile);
       expect(result.language).toEqual('json');
@@ -42,14 +40,10 @@ describe('file-reader lib', () => {
         path.join(process.env.PROJECT_DIR, 'events', 'EventWithSchemaAndExamples', 'schema.json')
       );
 
-      const stats = fs.statSync(
-        path.join(process.env.PROJECT_DIR, 'events', 'EventWithSchemaAndExamples', 'schema.json')
-      );
+      const stats = fs.statSync(path.join(process.env.PROJECT_DIR, 'events', 'EventWithSchemaAndExamples', 'schema.json'));
 
       const fileData = new Date(stats.mtime);
-      const expectedResult = `${fileData.getFullYear()}/${
-        fileData.getMonth() + 1
-      }/${fileData.getDate()}`;
+      const expectedResult = `${fileData.getFullYear()}/${fileData.getMonth() + 1}/${fileData.getDate()}`;
 
       expect(result).toEqual(expectedResult);
     });

package/lib/__tests__/services.spec.ts

@@ -18,10 +18,27 @@ describe('services', () => {
       const services = await getAllServices();
 
       expect(services).toEqual([
+        {
+          externalLinks: [
+            {
+              label: 'AsyncAPI Specification',
+              url: 'https://studio.asyncapi.com/#schema-lightMeasuredPayload',
+            },
+          ],
+          name: 'Basket Service',
+          owners: ['mSmith'],
+          publishes: [],
+          repository: {
+            language: 'JavaScript',
+            url: 'https://github.com/boyney123/pretend-basket-service',
+          },
+          subscribes: [],
+          summary: 'CRUD based API to handle Basket interactions for users of the shopping website.\n',
+          tags: [],
+        },
         {
           name: 'Email Platform',
-          summary:
-            'Internal Email system. Used to send emails to 1000s of customers. Hosted in AWS\n',
+          summary: 'Internal Email system. Used to send emails to 1000s of customers. Hosted in AWS\n',
           owners: ['dboyne'],
           repository: {
             url: 'https://github.com/boyney123/EmailPlatform',
@@ -43,11 +60,13 @@ describe('services', () => {
               summary: 'Tells us when an email has been sent\n',
               producers: ['Email Platform'],
               consumers: [],
+              externalLinks: [],
               historicVersions: [],
               owners: ['dboyne', 'mSmith'],
             },
           ],
           subscribes: [],
+          externalLinks: [],
         },
       ]);
     });
@@ -65,8 +84,7 @@ describe('services', () => {
       expect(services).toEqual([
         {
           name: 'Email Platform',
-          summary:
-            'Internal Email system. Used to send emails to 1000s of customers. Hosted in AWS\n',
+          summary: 'Internal Email system. Used to send emails to 1000s of customers. Hosted in AWS\n',
           owners: ['dboyne'],
           repository: {
             url: 'https://github.com/boyney123/EmailPlatform',
@@ -89,10 +107,12 @@ describe('services', () => {
               producers: ['Email Platform'],
               consumers: [],
               historicVersions: [],
+              externalLinks: [],
               owners: ['dboyne', 'mSmith'],
             },
           ],
           subscribes: [],
+          externalLinks: [],
         },
       ]);
     });
@@ -104,8 +124,7 @@ describe('services', () => {
 
       expect(service).toEqual({
         name: 'Email Platform',
-        summary:
-          'Internal Email system. Used to send emails to 1000s of customers. Hosted in AWS\n',
+        summary: 'Internal Email system. Used to send emails to 1000s of customers. Hosted in AWS\n',
         owners: ['dboyne'],
         repository: {
           url: 'https://github.com/boyney123/EmailPlatform',
@@ -128,10 +147,12 @@ describe('services', () => {
             producers: ['Email Platform'],
             consumers: [],
             historicVersions: [],
+            externalLinks: [],
             owners: ['dboyne', 'mSmith'],
           },
         ],
         subscribes: [],
+        externalLinks: [],
       });
 
       // @ts-ignore

package/lib/events.ts

@@ -11,8 +11,8 @@ import { extentionToLanguageMap } from './file-reader';
 import { getLastModifiedDateOfFile, getSchemaFromDir, readMarkdownFile } from '@/lib/file-reader';
 
 const parseEventFrontMatterIntoEvent = (eventFrontMatter: any): Event => {
-  const { name, version, summary, producers = [], consumers = [], owners = [] } = eventFrontMatter;
-  return { name, version, summary, producers, consumers, owners };
+  const { name, version, summary, producers = [], consumers = [], owners = [], externalLinks = [] } = eventFrontMatter;
+  return { name, version, summary, producers, consumers, owners, externalLinks };
 };
 
 const versionsForEvents = (pathToEvent) => {
@@ -36,9 +36,7 @@ export const getLogsForEvent = (eventName) => {
   }));
 
   // Get the latest version
-  const { data: { version: latestVersion } = {} } = readMarkdownFile(
-    path.join(eventsDir, eventName, 'index.md')
-  );
+  const { data: { version: latestVersion } = {} } = readMarkdownFile(path.join(eventsDir, eventName, 'index.md'));
 
   // Add the current version to the list
   allVersions.unshift({ version: latestVersion, pathToDir: path.join(eventsDir, eventName) });
@@ -143,10 +141,7 @@ export const getAllEvents = (): Event[] => {
   });
 };
 
-export const getEventByName = async (
-  eventName: string,
-  version?: string
-): Promise<{ event: Event; markdown: MarkdownFile }> => {
+export const getEventByName = async (eventName: string, version?: string): Promise<{ event: Event; markdown: MarkdownFile }> => {
   const eventsDir = path.join(process.env.PROJECT_DIR, 'events');
   const eventDirectory = path.join(eventsDir, eventName);
   let versionDirectory = null;

package/lib/file-reader.ts

@@ -46,7 +46,5 @@ export const getSchemaFromDir = (pathToSchemaDir: string): Schema => {
 export const getLastModifiedDateOfFile = (filePath) => {
   const stats = fs.statSync(filePath);
   const lastModifiedDate = new Date(stats.mtime);
-  return `${lastModifiedDate.getFullYear()}/${
-    lastModifiedDate.getMonth() + 1
-  }/${lastModifiedDate.getDate()}`;
+  return `${lastModifiedDate.getFullYear()}/${lastModifiedDate.getMonth() + 1}/${lastModifiedDate.getDate()}`;
 };

package/lib/graphs.ts

@@ -16,10 +16,8 @@ ${rNodes.map((node) => `${nodeValue}:::event-->${node}:::consumer\n`).join('')}
   `;
 };
 
-export const buildMermaidFlowChartForEvent = (
-  { name: eventName, producers, consumers }: Event,
-  rootNodeColor = '#2563eb'
-) => buildMermaid(eventName, producers, consumers, rootNodeColor);
+export const buildMermaidFlowChartForEvent = ({ name: eventName, producers, consumers }: Event, rootNodeColor = '#2563eb') =>
+  buildMermaid(eventName, producers, consumers, rootNodeColor);
 
 export const buildMermaidFlowChartForService = (
   { publishes, subscribes, name: serviceName }: Service,

package/lib/services.ts

@@ -8,17 +8,15 @@ import { MarkdownFile } from '../types/index';
 import { getAllEvents, getAllEventsThatHaveRelationshipWithService } from '@/lib/events';
 
 const buildService = (eventFrontMatter: any): Service => {
-  const { name, summary, owners = [], repository = {}, tags = [] } = eventFrontMatter;
-  return { name, summary, owners, repository, tags };
+  const { name, summary, owners = [], repository = {}, tags = [], externalLinks = [] } = eventFrontMatter;
+  return { name, summary, owners, repository, tags, externalLinks };
 };
 
 export const getAllServices = (): Service[] => {
   const servicesDir = path.join(process.env.PROJECT_DIR, 'services');
 
   const folders = fs.readdirSync(servicesDir);
-  const services = folders.map((folder) =>
-    readMarkdownFile(path.join(servicesDir, folder, 'index.md'))
-  );
+  const services = folders.map((folder) => readMarkdownFile(path.join(servicesDir, folder, 'index.md')));
   const events = getAllEvents();
 
   const parsedServices = services.map((frontMatter) => buildService(frontMatter.data));
@@ -32,17 +30,13 @@ export const getAllServices = (): Service[] => {
 
 export const getAllServicesByOwnerId = async (ownerId): Promise<Service[]> => {
   const services = await getAllServices();
-  const servicesOwnedByUser = services.filter((service) =>
-    service.owners.some((id) => id === ownerId)
-  );
+  const servicesOwnedByUser = services.filter((service) => service.owners.some((id) => id === ownerId));
   return servicesOwnedByUser.map((service) => ({
     ...service,
   }));
 };
 
-export const getServiceByName = async (
-  serviceName
-): Promise<{ service: Service; markdown: MarkdownFile }> => {
+export const getServiceByName = async (serviceName): Promise<{ service: Service; markdown: MarkdownFile }> => {
   try {
     const servicesDir = path.join(process.env.PROJECT_DIR, 'services');
     const serviceDirectory = path.join(servicesDir, serviceName);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eventcatalog/core",
-  "version": "0.0.7",
+  "version": "0.0.8",
   "publishConfig": {
     "access": "public"
   },
@@ -37,7 +37,7 @@
     "react-syntax-highlighter": "^15.4.5"
   },
   "devDependencies": {
-    "@eventcatalog/types": "0.0.2",
+    "@eventcatalog/types": "0.0.3",
     "@types/react": "^17.0.36",
     "autoprefixer": "^10.4.0",
     "commander": "^8.3.0",

package/pages/_app.tsx

@@ -18,29 +18,20 @@ export default ({ Component, pageProps }: AppProps) => (
       />
       <meta property="og:url" content="https://eventcatalog.dev/" />
       <meta property="og:type" content="website" />
-      <meta
-        property="og:title"
-        content="EventCatalog | Discover, Explore and Document your Event Driven Architectures."
-      />
+      <meta property="og:title" content="EventCatalog | Discover, Explore and Document your Event Driven Architectures." />
       <meta
         property="og:description"
         content="An open source tool powered by markdown to document your Event Driven Architecture."
       />
       <meta property="og:image" content="https://eventcatalog.dev/img/opengraph.png" />
-      <meta
-        property="og:image:alt"
-        content="EventCatalog | Discover, Explore and Document your Event Driven Architectures."
-      />
+      <meta property="og:image:alt" content="EventCatalog | Discover, Explore and Document your Event Driven Architectures." />
       <meta property="og:image:width" content="1200" />
       <meta property="og:image:height" content="600" />
       <meta property="og:locale" content="en-GB" />
       <meta name="author" content="David Boyne" />
 
       {/* Need to load this before any of the Html2Diff Code */}
-      <link
-        rel="stylesheet"
-        href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/atom-one-light.min.css"
-      />
+      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/atom-one-light.min.css" />
     </Head>
     <Header />
     <Component {...pageProps} />

package/pages/events/[name]/logs.tsx

@@ -67,9 +67,7 @@ function Logs({ changes, name: eventName, currentVersion }: LogsProps) {
                     </div>
                   </div>
 
-                  {changes.length === 0 && (
-                    <div className="text-gray-400 text-xl">No versions for Event found.</div>
-                  )}
+                  {changes.length === 0 && <div className="text-gray-400 text-xl">No versions for Event found.</div>}
 
                   <div className="flow-root mb-20">
                     <ul className="">
@@ -77,10 +75,7 @@ function Logs({ changes, name: eventName, currentVersion }: LogsProps) {
                         <li key={eventIdx} className="">
                           <div className="relative pb-8">
                             {eventIdx !== changes.length - 1 ? (
-                              <span
-                                className="absolute top-4 left-4 -ml-px h-full w-0.5 bg-gray-100"
-                                aria-hidden="true"
-                              />
+                              <span className="absolute top-4 left-4 -ml-px h-full w-0.5 bg-gray-100" aria-hidden="true" />
                             ) : null}
                             <div className="relative flex space-x-3">
                               <div>
@@ -99,9 +94,7 @@ function Logs({ changes, name: eventName, currentVersion }: LogsProps) {
                                     Schema version update
                                     {event.versions.map((version, index) => {
                                       const linkHref =
-                                        version === currentVersion
-                                          ? `/events/${eventName}`
-                                          : `/events/${eventName}/v/${version}`;
+                                        version === currentVersion ? `/events/${eventName}` : `/events/${eventName}/v/${version}`;
                                       return (
                                         <Link key={version} href={linkHref}>
                                           <a className="font-medium">
@@ -127,9 +120,7 @@ function Logs({ changes, name: eventName, currentVersion }: LogsProps) {
                                     </>
                                   )}
                                   {!event.changelog.source && (
-                                    <h2 className="text-base text-gray-300 font-bold mt-4">
-                                      No changelog file found.
-                                    </h2>
+                                    <h2 className="text-base text-gray-300 font-bold mt-4">No changelog file found.</h2>
                                   )}
                                 </div>
                                 <div className="text-right text-sm text-gray-500 py-4">

package/pages/events/[name].tsx

@@ -31,11 +31,7 @@ export const getComponents = ({ event, schema, examples }: any) => ({
   code: ({ className, ...props }) => {
     const match = /language-(\w+)/.exec(className || '');
 
-    return match ? (
-      <SyntaxHighlighter language={match[1]} {...props} />
-    ) : (
-      <code className={className} {...props} />
-    );
+    return match ? <SyntaxHighlighter language={match[1]} {...props} /> : <code className={className} {...props} />;
   },
   Schema: ({ title = 'Event Schema' }: { title: string }) => {
     if (!schema) return null;
@@ -45,11 +41,7 @@ export const getComponents = ({ event, schema, examples }: any) => ({
         <h2 id="activity-title" className="text-lg font-medium text-gray-900 underline">
           {title}
         </h2>
-        <SyntaxHighlighter
-          language={schema.language}
-          showLineNumbers={false}
-          name={`${event.name} Schema (${schema.language})`}
-        >
+        <SyntaxHighlighter language={schema.language} showLineNumbers={false} name={`${event.name} Schema (${schema.language})`}>
           {schema.snippet}
         </SyntaxHighlighter>
       </section>
@@ -75,7 +67,7 @@ export const getComponents = ({ event, schema, examples }: any) => ({
 
 export default function Events(props: EventsPageProps) {
   const { event, markdown, loadedVersion, notFound } = props;
-  const { getEditUrl } = useUrl();
+  const { getEditUrl, hasEditUrl } = useUrl();
 
   if (notFound) return <NotFound type="event" name={event.name} editUrl={editUrl} />;
 
@@ -97,9 +89,8 @@ export default function Events(props: EventsPageProps) {
         </title>
       </Head>
       <ContentView
-        // {...props}
         title={name}
-        editUrl={getEditUrl(`/events/${name}/index.md`)}
+        editUrl={hasEditUrl ? getEditUrl(`/events/${name}/index.md`) : ''}
         subtitle={summary}
         draft={draft}
         lastModifiedDate={lastModifiedDate}

package/pages/events.tsx

@@ -57,12 +57,8 @@ export default function Page({ events, services }: PageProps) {
     eventsToRender = eventsToRender.filter((event) => {
       const { services: serviceFilters } = selectedFilters;
 
-      const hasConsumersFromFilters = event.consumers.some(
-        (consumerId) => serviceFilters.indexOf(consumerId) > -1
-      );
-      const hasProducersFromFilters = event.producers.some(
-        (producerId) => serviceFilters.indexOf(producerId) > -1
-      );
+      const hasConsumersFromFilters = event.consumers.some((consumerId) => serviceFilters.indexOf(consumerId) > -1);
+      const hasProducersFromFilters = event.producers.some((producerId) => serviceFilters.indexOf(producerId) > -1);
 
       return hasConsumersFromFilters || hasProducersFromFilters;
     });
@@ -75,9 +71,7 @@ export default function Page({ events, services }: PageProps) {
       </Head>
       <main className="max-w-7xl mx-auto min-h-screen px-4 md:px-0">
         <div className="relative z-10 flex items-baseline justify-between pt-8 pb-6 border-b border-gray-200">
-          <h1 className="text-2xl font-extrabold tracking-tight text-gray-900">
-            Events ({events.length})
-          </h1>
+          <h1 className="text-2xl font-extrabold tracking-tight text-gray-900">Events ({events.length})</h1>
 
           <div className="flex items-center">
             <Menu as="div" className="hidden relative text-left">
@@ -160,10 +154,7 @@ export default function Page({ events, services }: PageProps) {
                             defaultChecked={option.checked}
                             className="h-4 w-4 border-gray-300 rounded text-gray-600 focus:ring-gray-500"
                           />
-                          <label
-                            htmlFor={`filter-${section.id}-${optionIdx}`}
-                            className="ml-3 text-sm text-gray-600"
-                          >
+                          <label htmlFor={`filter-${section.id}-${optionIdx}`} className="ml-3 text-sm text-gray-600">
                             {option.label}
                           </label>
                         </div>
@@ -200,9 +191,7 @@ export default function Page({ events, services }: PageProps) {
 
             <div className="col-span-4 lg:col-span-3">
               <div>
-                <h2 className="text-gray-500 text-xs font-medium uppercase tracking-wide">
-                  Events ({eventsToRender.length})
-                </h2>
+                <h2 className="text-gray-500 text-xs font-medium uppercase tracking-wide">Events ({eventsToRender.length})</h2>
                 <EventGrid events={eventsToRender} showMermaidDiagrams={showMermaidDiagrams} />
               </div>
             </div>

package/pages/index.tsx

@@ -11,15 +11,8 @@ export default function Example() {
   return (
     <main className="sm:bg-top md:min-h-screen bg-gradient-to-t from-blue-700  to-gray-800">
       <div className="max-w-7xl mx-auto px-4 py-16 text-center sm:px-6 sm:py-24 lg:px-8 lg:py-48">
-        <img
-          src={logoToLoad.src}
-          alt={logoToLoad.alt}
-          style={{ height: '85px' }}
-          className="mx-auto"
-        />
-        <h1 className="mt-2 text-4xl font-extrabold text-white tracking-tight sm:text-5xl">
-          {title}
-        </h1>
+        <img src={logoToLoad.src} alt={logoToLoad.alt} style={{ height: '85px' }} className="mx-auto" />
+        <h1 className="mt-2 text-4xl font-extrabold text-white tracking-tight sm:text-5xl">{title}</h1>
         {tagline && <p className="mt-2 text-lg font-medium text-white">{tagline}</p>}
         <div className="mt-5 max-w-md mx-auto sm:flex sm:justify-center md:mt-8">
           <div className="rounded-md shadow">

package/pages/overview.tsx

@@ -6,10 +6,7 @@ import dynamic from 'next/dynamic';
 
 import { getAllEvents, getUniqueServicesNamesFromEvents } from '@/lib/events';
 
-const ForceGraph3D = dynamic(
-  () => import('react-force-graph-3d').then((module) => module.default),
-  { ssr: false }
-);
+const ForceGraph3D = dynamic(() => import('react-force-graph-3d').then((module) => module.default), { ssr: false });
 
 function NodeElement({ node: { id } }: { node: { id: string } }) {
   return <div className={`text-sm text-center p-1 rounded-md `}>{id}</div>;

package/pages/services/[name].tsx

@@ -37,7 +37,7 @@ const getComponents = (service) => ({
 
 export default function Services(props: ServicesPageProps) {
   const { service, markdown, notFound } = props;
-  const { getEditUrl } = useUrl();
+  const { getEditUrl, hasEditUrl } = useUrl();
 
   if (notFound) return <NotFound type="service" name={service.name} editUrl={editUrl} />;
 
@@ -58,7 +58,7 @@ export default function Services(props: ServicesPageProps) {
       </Head>
       <ContentView
         title={name}
-        editUrl={getEditUrl(`/services/${name}/index.md`)}
+        editUrl={hasEditUrl ? getEditUrl(`/services/${name}/index.md`) : ''}
         subtitle={summary}
         draft={draft}
         lastModifiedDate={lastModifiedDate}

package/pages/services.tsx

@@ -31,9 +31,7 @@ export default function Page({ services }: PageProps) {
       </Head>
       <main className="max-w-7xl mx-auto md:min-h-screen px-4 md:px-0">
         <div className="relative z-10 flex items-baseline justify-between pt-8 pb-6 border-b border-gray-200">
-          <h1 className="text-2xl font-extrabold tracking-tight text-gray-900">
-            Services ({services.length})
-          </h1>
+          <h1 className="text-2xl font-extrabold tracking-tight text-gray-900">Services ({services.length})</h1>
 
           <div className="flex items-center">
             <Menu as="div" className="relative hidden text-left">
@@ -99,9 +97,7 @@ export default function Page({ services }: PageProps) {
 
             <div className="col-span-4 lg:col-span-3">
               <div>
-                <h2 className="text-gray-500 text-xs font-medium uppercase tracking-wide">
-                  Services
-                </h2>
+                <h2 className="text-gray-500 text-xs font-medium uppercase tracking-wide">Services</h2>
                 <ServiceGrid services={services} />
               </div>
             </div>

package/pages/users/[id].tsx

@@ -29,15 +29,11 @@ export default function UserPage({ events, services, userId }: UserPageProps) {
                 </div>
               </div>
               <div className=" border-b border-gray-100 pb-6">
-                <h1 className="text-lg font-bold text-gray-800 relative mt-4">
-                  Owner of Events ({events.length})
-                </h1>
+                <h1 className="text-lg font-bold text-gray-800 relative mt-4">Owner of Events ({events.length})</h1>
                 <EventGrid events={events} />
               </div>
               <div>
-                <h1 className="text-lg font-bold text-gray-800 relative mt-4">
-                  Owner of Services ({services.length})
-                </h1>
+                <h1 className="text-lg font-bold text-gray-800 relative mt-4">Owner of Services ({services.length})</h1>
                 <ServiceGrid services={services} />
               </div>
             </div>
@@ -46,10 +42,7 @@ export default function UserPage({ events, services, userId }: UserPageProps) {
                 <div className="flex-shrink-0">
                   <div className="relative">
                     <img className="h-16 w-16 rounded-full" src={user.avatarUrl} alt="" />
-                    <span
-                      className="absolute inset-0 shadow-inner rounded-full"
-                      aria-hidden="true"
-                    />
+                    <span className="absolute inset-0 shadow-inner rounded-full" aria-hidden="true" />
                   </div>
                 </div>
                 <div>
@@ -57,9 +50,7 @@ export default function UserPage({ events, services, userId }: UserPageProps) {
                   <p className="text-sm font-medium text-gray-500">{user.role}</p>
                 </div>
               </div>
-              <div className="mt-6 flow-root border-t border-gray-200 py-6 text-sm">
-                {user.summary}
-              </div>
+              <div className="mt-6 flow-root border-t border-gray-200 py-6 text-sm">{user.summary}</div>
             </div>
           </div>
         </div>

package/scripts/__tests__/assets/eventcatalog.config.js

@@ -26,8 +26,7 @@ module.exports = {
       name: 'Matthew Smith',
       avatarUrl: 'https://randomuser.me/api/portraits/lego/3.jpg',
       role: 'Developer',
-      summary:
-        'About Fugiat ipsum ipsum deserunt culpa aute sint do nostrud anim incididunt cillum culpa consequat.',
+      summary: 'About Fugiat ipsum ipsum deserunt culpa aute sint do nostrud anim incididunt cillum culpa consequat.',
     },
   ],
 };

package/scripts/__tests__/generate.spec.ts

@@ -31,9 +31,6 @@ describe('generate script', () => {
     await generate();
 
     expect(mockPlugin).toHaveBeenCalled();
-    expect(mockPlugin).toHaveBeenCalledWith(
-      { eventCatalogConfig: config },
-      { file: './asyncapi.yml' }
-    );
+    expect(mockPlugin).toHaveBeenCalledWith({ eventCatalogConfig: config }, { file: './asyncapi.yml' });
   });
 });

package/tailwind.config.js

@@ -8,9 +8,5 @@ module.exports = {
     extend: {},
   },
   purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
-  plugins: [
-    require('@tailwindcss/typography'),
-    require('@tailwindcss/forms'),
-    require('@tailwindcss/line-clamp'),
-  ],
+  plugins: [require('@tailwindcss/typography'), require('@tailwindcss/forms'), require('@tailwindcss/line-clamp')],
 };

package/tsconfig.json

@@ -27,12 +27,6 @@
     },
     "jsx": "preserve"
   },
-  "include": [
-    "next-env.d.ts",
-    "**/*.ts",
-    "**/*.tsx",
-    "hooks/EventCatalog.tsx",
-    "scripts/generate.js"
-  ],
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "hooks/EventCatalog.tsx", "scripts/generate.js"],
   "exclude": ["node_modules"]
 }