@eventcatalog/core 1.2.7 → 2.0.0

package/src/components/MDX/NodeGraph/NodeGraph.tsx

@@ -0,0 +1,135 @@
+import { useEffect, useMemo, useState } from 'react';
+import { createPortal } from 'react-dom';
+import ReactFlow, { Background, ConnectionLineType, Controls, Panel, ReactFlowProvider, type Edge, type Node } from 'reactflow';
+import 'reactflow/dist/style.css';
+import ServiceNode from './Nodes/Service';
+import EventNode from './Nodes/Event';
+import CommandNode from './Nodes/Command';
+import type { CollectionEntry } from 'astro:content';
+import { navigate } from 'astro:transitions/client';
+import type { CollectionTypes } from '@types';
+import DownloadButton from './DownloadButton';
+
+interface Props {
+  nodes: any;
+  edges: any;
+  title?: string;
+  subtitle?: string;
+  includeBackground?: boolean;
+  includeControls?: boolean;
+  linkTo: 'docs' | 'visualiser';
+}
+
+const getDocUrlForCollection = (collectionItem: CollectionEntry<CollectionTypes>) => {
+  return `/docs/${collectionItem.collection}/${collectionItem.data.id}/${collectionItem.data.version}`;
+};
+const getVisualiserUrlForCollection = (collectionItem: CollectionEntry<CollectionTypes>) => {
+  return `/visualiser/${collectionItem.collection}/${collectionItem.data.id}/${collectionItem.data.version}`;
+};
+
+// const NodeGraphBuilder = ({ title, subtitle, includeBackground = true, includeControls = true }: Props) => {
+const NodeGraphBuilder = ({ nodes, edges, title, includeBackground = true, linkTo = 'docs' }: Props) => {
+  // const { fitView, viewportInitialized } = useReactFlow();
+
+  // const nodeTypes = useMemo(() => ({ service: ServiceNode, event: EventNode, command: CommandNode }), []);
+  const nodeTypes = useMemo(() => ({ services: ServiceNode, events: EventNode, commands: CommandNode }), []);
+  const nodeOrigin = [0.5, 0.5];
+
+  const handleNodeClick = (_: any, node: Node) => {
+    if (node.type === 'events' || node.type === 'commands') {
+      // return (window.location.href = linkTo === 'docs' ? getDocUrlForCollection(node.data.message) : getVisualiserUrlForCollection(node.data.message));
+      navigate(linkTo === 'docs' ? getDocUrlForCollection(node.data.message) : getVisualiserUrlForCollection(node.data.message));
+    }
+    if (node.type === 'services') {
+      navigate(linkTo === 'docs' ? getDocUrlForCollection(node.data.service) : getVisualiserUrlForCollection(node.data.service));
+      // return (window.location.href = linkTo === 'docs' ? getDocUrlForCollection(node.data.service) : getVisualiserUrlForCollection(node.data.service));
+    }
+  };
+
+  return (
+    // @ts-ignore
+    <ReactFlow
+      nodeTypes={nodeTypes}
+      nodes={nodes}
+      edges={edges}
+      fitView
+      nodesDraggable
+      connectionLineType={ConnectionLineType.SmoothStep}
+      // @ts-ignore
+      nodeOrigin={nodeOrigin}
+      onNodeClick={handleNodeClick}
+    >
+      {title && (
+        <Panel position="top-right">
+          <span className="block shadow-sm bg-white text-xl z-10 text-black px-4 py-2 border-gray-200 rounded-md border">
+            <strong>Visualiser</strong> | {title}
+          </span>
+        </Panel>
+      )}
+      <DownloadButton filename={title} addPadding={!!title} />
+      {includeBackground && <Background color="#bbb" gap={16} />}
+      {includeBackground && <Controls />}
+      <Panel position="bottom-right">
+        <div className=" bg-white font-light px-4 text-[14px] shadow-md py-1 rounded-md">
+          <span className="font-bold">Key</span>
+          <ul>
+            <li className="flex space-x-2 items-center text-[12px]">
+              <span className="w-2 h-2 bg-orange-500 block" />
+              <span className="block">Event</span>
+            </li>
+            <li className="flex space-x-2 items-center text-[12px]">
+              <span className="w-2 h-2 bg-pink-500 block" />
+              <span className="block">Service</span>
+            </li>
+            <li className="flex space-x-2 items-center text-[12px]">
+              <span className="w-2 h-2 bg-blue-500 block" />
+              <span className="block">Command</span>
+            </li>
+          </ul>
+        </div>
+      </Panel>
+    </ReactFlow>
+  );
+};
+
+interface NodeGraphProps {
+  id: string;
+  title?: string;
+  href?: string;
+  hrefLabel?: string;
+  nodes: Node[];
+  edges: Edge[];
+  linkTo: 'docs' | 'visualiser';
+}
+
+const NodeGraph = ({ id, nodes, edges, title, href, linkTo = 'docs', hrefLabel = 'Open in visualiser' }: NodeGraphProps) => {
+  const [elem, setElem] = useState(null);
+
+  useEffect(() => {
+    // @ts-ignore
+    setElem(document.getElementById(`${id}-portal`));
+  }, []);
+
+  if (!elem) return null;
+
+  return (
+    <div>
+      {createPortal(
+        <ReactFlowProvider>
+          <NodeGraphBuilder edges={edges} nodes={nodes} title={title} linkTo={linkTo} />
+
+          {href && (
+            <div className="py-2 w-full text-right">
+              <a className=" text-sm no-underline py-2 text-gray-800 hover:text-purple-500" href={href}>
+                {hrefLabel} &rarr;
+              </a>
+            </div>
+          )}
+        </ReactFlowProvider>,
+        elem
+      )}
+    </div>
+  );
+};
+
+export default NodeGraph;

package/src/components/MDX/NodeGraph/NodeGraphPortal.tsx

@@ -0,0 +1,15 @@
+const NodeGraphPortal = (props: any) => {
+  return (
+    <div
+      className="h-[30em] my-6 mb-12 w-full relative border border-gray-200 rounded-md"
+      id={`${props.id}-portal`}
+      style={{
+        maxHeight: props.maxHeight ? `${props.maxHeight}em` : `30em`,
+      }}
+    >
+      {/* <span className="absolute top-2 right-4 bg-white font-bold z-10">{props.title}</span> */}
+    </div>
+  );
+};
+
+export default NodeGraphPortal;

package/src/components/MDX/NodeGraph/Nodes/Command.tsx

@@ -0,0 +1,74 @@
+import { EnvelopeIcon } from '@heroicons/react/16/solid';
+import type { CollectionEntry } from 'astro:content';
+import { Handle } from 'reactflow';
+
+interface Data {
+  title: string;
+  label: string;
+  bgColor: string;
+  color: string;
+  mode: 'simple' | 'full';
+  message: CollectionEntry<'commands'>;
+  showTarget?: boolean;
+  showSource?: boolean;
+}
+
+function classNames(...classes: any) {
+  return classes.filter(Boolean).join(' ');
+}
+
+export default function CommandNode({ data, sourcePosition, targetPosition }: any) {
+  const { mode, message, showSource = true, showTarget = true } = data as Data;
+
+  const { name, version, summary, owners = [], producers = [], consumers = [] } = message.data;
+
+  const renderTarget = showTarget || (targetPosition && producers.length > 0);
+  const renderSource = showSource || (sourcePosition && consumers.length > 0);
+
+  return (
+    <div className={classNames('w-full rounded-md border flex justify-start  bg-white text-black border-blue-400')}>
+      <div
+        className={classNames(
+          'bg-gradient-to-b from-blue-500 to-blue-700 relative flex items-center w-5 justify-center rounded-l-sm text-blue-100-500',
+          `border-r-[1px] border-blue-500`
+        )}
+      >
+        <EnvelopeIcon className="w-4 h-4 opacity-90 text-white absolute top-1 " />
+        {mode === 'full' && (
+          <span className="rotate -rotate-90 w-1/2 text-center absolute bottom-1 text-[9px] text-white font-bold uppercase tracking-[3px] ">
+            Command
+          </span>
+        )}
+      </div>
+      <div className="p-1">
+        {renderTarget && <Handle type="target" position={targetPosition} />}
+        {renderSource && <Handle type="source" position={sourcePosition} />}
+        <div className={classNames(mode === 'full' ? `border-b border-gray-200` : '')}>
+          <span className="text-xs font-bold block pb-0.5">{name}</span>
+          <div className="flex justify-between">
+            <span className="text-[10px] font-light block pt-0.5 pb-0.5 ">v{version}</span>
+            {mode === 'simple' && <span className="text-[10px] text-gray-500 font-light block pt-0.5 pb-0.5 ">Command</span>}
+          </div>
+        </div>
+        {mode === 'full' && (
+          <div className="divide-y divide-gray-200 ">
+            <div className="leading-3 py-1">
+              <span className="text-[8px] font-light">{summary}</span>
+            </div>
+            <div className="grid grid-cols-2 gap-x-4 py-1">
+              <span className="text-xs" style={{ fontSize: '0.2em' }}>
+                Producers: {producers.length}
+              </span>
+              <span className="text-xs" style={{ fontSize: '0.2em' }}>
+                Consumers: {consumers.length}
+              </span>
+              <span className="text-xs" style={{ fontSize: '0.2em' }}>
+                Owners: {owners.length}
+              </span>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/components/MDX/NodeGraph/Nodes/Event.tsx

@@ -0,0 +1,74 @@
+import { EnvelopeIcon } from '@heroicons/react/16/solid';
+import type { CollectionEntry } from 'astro:content';
+import { Handle } from 'reactflow';
+
+interface Data {
+  title: string;
+  label: string;
+  bgColor: string;
+  color: string;
+  mode: 'simple' | 'full';
+  message: CollectionEntry<'events'>;
+  showTarget?: boolean;
+  showSource?: boolean;
+}
+
+function classNames(...classes: any) {
+  return classes.filter(Boolean).join(' ');
+}
+
+export default function EventNode({ data, sourcePosition, targetPosition }: any) {
+  const { mode, message, showTarget = true, showSource = true } = data as Data;
+
+  const { name, version, summary, owners = [], producers = [], consumers = [] } = message.data;
+
+  const renderTarget = showTarget || (targetPosition && producers.length > 0);
+  const renderSource = showSource || (sourcePosition && consumers.length > 0);
+
+  return (
+    <div className={classNames('w-full rounded-md border flex justify-start  bg-white text-black border-orange-400')}>
+      <div
+        className={classNames(
+          'bg-gradient-to-b from-orange-500 to-orange-700 relative flex items-center w-5 justify-center rounded-l-sm text-orange-100-500',
+          `border-r-[1px] border-orange-500`
+        )}
+      >
+        <EnvelopeIcon className="w-4 h-4 opacity-90 text-white absolute top-1 " />
+        {mode === 'full' && (
+          <span className="rotate -rotate-90 w-1/2 text-center absolute bottom-1 text-[9px] text-white font-bold uppercase tracking-[3px] ">
+            Event
+          </span>
+        )}
+      </div>
+      <div className="p-1">
+        {renderTarget && <Handle type="target" position={targetPosition} />}
+        {renderSource && <Handle type="source" position={sourcePosition} />}
+        <div className={classNames(mode === 'full' ? `border-b border-gray-200` : '')}>
+          <span className="text-xs font-bold block pb-0.5">{name}</span>
+          <div className="flex justify-between">
+            <span className="text-[10px] font-light block pt-0.5 pb-0.5 ">v{version}</span>
+            {mode === 'simple' && <span className="text-[10px] text-gray-500 font-light block pt-0.5 pb-0.5 ">Event</span>}
+          </div>
+        </div>
+        {mode === 'full' && (
+          <div className="divide-y divide-gray-200 ">
+            <div className="leading-3 py-1">
+              <span className="text-[8px] font-light">{summary}</span>
+            </div>
+            <div className="grid grid-cols-2 gap-x-4 py-1">
+              <span className="text-xs" style={{ fontSize: '0.2em' }}>
+                Producers: {producers.length}
+              </span>
+              <span className="text-xs" style={{ fontSize: '0.2em' }}>
+                Consumers: {consumers.length}
+              </span>
+              <span className="text-xs" style={{ fontSize: '0.2em' }}>
+                Owners: {owners.length}
+              </span>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/components/MDX/NodeGraph/Nodes/Service.tsx

@@ -0,0 +1,83 @@
+import { ServerIcon } from '@heroicons/react/16/solid';
+import type { CollectionEntry } from 'astro:content';
+import { Handle } from 'reactflow';
+
+interface Data {
+  label: string;
+  bgColor: string;
+  color: string;
+  mode: 'simple' | 'full';
+  service: CollectionEntry<'services'>;
+  showTarget?: boolean;
+  showSource?: boolean;
+}
+
+function classNames(...classes: any) {
+  return classes.filter(Boolean).join(' ');
+}
+
+export default function ServiceNode({ data, sourcePosition, targetPosition }: any) {
+  const { label, bgColor = 'bg-blue-500', mode, service, showTarget = true, showSource = true } = data as Data;
+
+  const { version, owners = [], sends = [], receives = [], name } = service.data;
+
+  const renderTarget = showTarget;
+  const renderSource = showSource;
+
+  return (
+    <div className={classNames('w-full rounded-md border flex justify-start  bg-white text-black border-pink-500')}>
+      <div
+        className={classNames(
+          'bg-gradient-to-b from-pink-500 to-pink-700 relative flex items-center w-5 justify-center rounded-l-sm text-red-100-500',
+          `border-r-[1px] border-pink-500`
+        )}
+      >
+        <ServerIcon className="w-4 h-4 opacity-90 text-white absolute top-1 " />
+        {mode === 'full' && (
+          <span className="rotate -rotate-90 w-1/2 text-center absolute bottom-1 text-[9px] text-white font-bold uppercase tracking-[3px] ">
+            Service
+          </span>
+        )}
+      </div>
+      <div className="p-1">
+        {showTarget && <Handle type="target" position={targetPosition} />}
+        {showSource && <Handle type="source" position={sourcePosition} />}
+        {/* {mode === 'full' && (
+        <div className="flex justify-end font-thin space-x-1 border-b border-orange-200  pb-0.5 " style={{ fontSize: '0.2em' }}>
+          <span>Service</span>
+          <ServerIcon className="w-2 h-2 opacity-90" />
+        </div>
+      )} */}
+        <div className={classNames(mode === 'full' ? `border-b border-gray-200` : '')}>
+          <span className="text-xs font-bold block pt-0.5 pb-0.5">{name}</span>
+          <div className="flex justify-between">
+            <span className="text-[10px] font-light block pt-0.5 pb-0.5 ">v{version}</span>
+            {mode === 'simple' && <span className="text-[10px] text-gray-500 font-light block pt-0.5 pb-0.5 ">Service</span>}
+          </div>
+          {/* <div className="flex justify-end">
+            <span className="text-[8px] text-gray-500 font-light block pt-0.5 pb-0.5 ">View service</span>
+          </div> */}
+        </div>
+        {mode === 'full' && (
+          <div className="divide-y divide-gray-200 ">
+            <div className="leading-3 py-1">
+              <span className="text-[8px] font-light">{service.data.summary}</span>
+            </div>
+
+            <div className="grid grid-cols-2 gap-x-4 py-1">
+              <span className="text-xs" style={{ fontSize: '0.2em' }}>
+                Receives messages: {receives.length}
+              </span>
+              <span className="text-xs" style={{ fontSize: '0.2em' }}>
+                Publishes messages: {sends.length}
+              </span>
+              <span className="text-xs" style={{ fontSize: '0.2em' }}>
+                Owners: {owners.length}
+              </span>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/components/MDX/OpenAPI/OpenAPI.tsx

@@ -0,0 +1,35 @@
+import type { CollectionTypes } from '@types';
+import type { CollectionEntry } from 'astro:content';
+import * as path from 'path';
+import { existsSync } from 'node:fs';
+
+const OpenAPI = (props: CollectionEntry<CollectionTypes>) => {
+  // @ts-ignore
+  const collectionPath = props?.catalog?.path;
+  // @ts-ignore
+  const publicPath = props?.catalog?.publicPath;
+  const fileName = 'openapi.yml';
+
+  const fileExists = existsSync(path.join(process.cwd(), 'public', publicPath, fileName));
+
+  return (
+    <div className="mb-4" id="openapi-component">
+      <span className="text-3xl font-bold">OpenAPI</span>
+      {!fileExists && (
+        <div className="text-sm text-red-500">
+          OpenAPI file not found. Put your OpenAPI file inside your {collectionPath} directory.
+        </div>
+      )}
+      {fileExists && (
+        <div>
+          This {props.collection.slice(0, -1)} has an OpenAPI file{' '}
+          <a className="text-purple-500" href={`/docs/${props.collection}/${props.data.id}/${props.data.version}/spec`}>
+            you can view here.
+          </a>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default OpenAPI;

package/src/components/MDX/Schema.tsx

@@ -0,0 +1,45 @@
+import fs from 'fs';
+import path from 'path';
+
+const Schema = ({ file = 'schema.json', catalog, title }: any) => {
+  try {
+    const exists = fs.existsSync(path.join(catalog.filePath, file));
+
+    if (exists) {
+      const text = fs.readFileSync(path.join(catalog.filePath, file), 'utf-8');
+      return (
+        <div className="not-prose max-w-4xl overflow-x-auto">
+          <pre className="expressive-code" data-language="json">
+            <figure className="frame has-title">
+              <figcaption className="header">
+                {title && <span className="title">{title}</span>}
+                {!title && <span className="title">{file}</span>}
+              </figcaption>
+              <pre data-language="js">
+                <code>
+                  <div className="ec-line">
+                    <div className="code">{text}</div>
+                  </div>
+                </code>
+              </pre>
+              <div className="copy">
+                <button title="Copy to clipboard" data-copied="Copied!" data-code={text}>
+                  <div></div>
+                </button>
+              </div>
+            </figure>
+          </pre>
+        </div>
+      );
+    } else {
+      return (
+        <div className="italic">Tried to load schema from {path.join(catalog.filePath, file)}, but no schema can be found</div>
+      );
+    }
+  } catch (error) {
+    console.log('Failed to load schema file', error);
+    return null;
+  }
+};
+
+export default Schema;

package/src/components/MDX/components.tsx

@@ -0,0 +1,24 @@
+// Astro components
+
+// React components
+import Schema from '@components/MDX/Schema';
+import File from '@components/MDX/File';
+import Accordion from '@components/MDX/Accordion/Accordion.astro';
+import AccordionGroup from '@components/MDX/Accordion/AccordionGroup.astro';
+import Admonition from '@components/MDX/Admonition';
+import NodeGraphPortal from '@components/MDX/NodeGraph/NodeGraphPortal';
+import OpenAPI from '@components/MDX/OpenAPI/OpenAPI';
+
+const components = (props: any) => {
+  return {
+    AccordionGroup,
+    Accordion,
+    OpenAPI: (mdxProp: any) => <OpenAPI {...mdxProp} {...props} />,
+    Admonition: (mdxProp: any) => <Admonition {...mdxProp} {...props} />,
+    File: (mdxProp: any) => File({ ...props, ...mdxProp }),
+    Schema: (mdxProp: any) => Schema({ ...props, ...mdxProp }),
+    NodeGraph: (mdxProp: any) => NodeGraphPortal({ ...props.data, ...mdxProp }),
+  };
+};
+
+export default components;

package/src/components/Search.astro

@@ -0,0 +1,108 @@
+---
+import PageFindSearch from 'astro-pagefind/components/Search';
+---
+
+<div>
+  <div class="relative mt-2 flex items-center">
+    <input
+      id="search-dummy-input"
+      type="text"
+      name="search"
+      id="search"
+      placeholder="Search EventCatalog"
+      class="block w-full rounded-md caret-transparent border-0 py-1.5 pr-14 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 sm:text-sm sm:leading-6 px-4"
+    />
+    <div class="absolute inset-y-0 right-0 flex py-1.5 pr-1.5">
+      <kbd class="inline-flex items-center rounded border border-gray-200 px-1 font-sans text-xs text-gray-400">⌘K</kbd>
+    </div>
+  </div>
+</div>
+
+<div id="search-dialog" class="hidden relative z-10" role="dialog" aria-modal="true">
+  <div class="fixed inset-0 bg-gray-500 bg-opacity-25 transition-opacity search-background backdrop-blur-sm bg-black/10"></div>
+  <div id="search-background" class="fixed inset-0 z-10 w-screen overflow-y-auto p-4 sm:p-6 md:p-20">
+    <div id="command-pal" class="mx-auto max-w-xl divide-y divide-gray-100 overflow-hidden rounded-xl bg-white shadow-2xl ring-1 ring-black ring-opacity-5 transition-all">
+      <div class="relative">
+        <svg class="pointer-events-none absolute left-4 top-3.5 h-5 w-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+          <path fill-rule="evenodd" d="M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z" clip-rule="evenodd"></path>
+        </svg>
+        <PageFindSearch id="search" className="pagefind-ui" uiOptions={{ showImages: false }} />
+      </div>
+    </div>
+  </div>
+</div>
+
+<script>
+  const dummyInput = document.getElementById('search-dummy-input');
+  const dialog = document.getElementById('search-dialog');
+
+  // Listen for the short cut keys
+  window.addEventListener('keydown', (event) => {
+    if ((event.metaKey || event.ctrlKey) && event.key === 'k') {
+      event.preventDefault();
+      dummyInput?.click();
+    }
+    if(event.key === 'Escape') {
+      if(dialog){
+        dialog.style.display = 'none';
+      }
+    }
+  });
+
+  // Fake input, to load the dialog
+  if (dummyInput) {
+    dummyInput.addEventListener('click', function (e) {
+      e.preventDefault();
+      this.blur();
+      const input = document.querySelector('.pagefind-ui__search-input');
+      setTimeout(() => {
+        // @ts-ignore
+        input && input.focus();
+      }, 10);
+      // @ts-ignore
+      dialog.style.display = 'block';
+    });
+  }
+
+  // Close it
+  dialog?.addEventListener('click', function (e) {
+    // @ts-ignore
+    if (e.target.id === 'search-background') {
+      dialog.style.display = 'none';
+    }
+  });
+
+  //   document.getElementById('search-dummy-input').addEventListener('click', function () {
+  // document.getElementById('search-dialog').style.display = 'block';
+  //   });
+</script>
+
+<style is:global>
+  .pagefind-ui__search-input,
+  #search-dummy-input {
+    outline: none;
+  }
+
+  .pagefind-ui__drawer {
+    padding: 0 1em !important;
+  }
+
+  .pagefind-ui__result {
+    padding: 0.5em 0 !important;
+  }
+
+  .pagefind-ui__results-area {
+    margin: 0 !important;
+  }
+</style>
+
+<!--
+        Command palette, show/hide based on modal state.
+  
+        Entering: "ease-out duration-300"
+          From: "opacity-0 scale-95"
+          To: "opacity-100 scale-100"
+        Leaving: "ease-in duration-200"
+          From: "opacity-100 scale-100"
+          To: "opacity-0 scale-95"
+      -->

package/src/components/Seo.astro

@@ -0,0 +1,79 @@
+---
+import { SEO } from 'astro-seo';
+import config from '@config';
+import defaultImageFile from '../../public/opengraph.png';
+
+const {
+	title = config.title,
+	description = config.tagline,
+	ogTitle = title,
+	ogType = 'website',
+} = Astro.props;
+
+const siteBaseURL = new URL(Astro.url);
+const defaultImage = new URL(defaultImageFile.src, siteBaseURL);
+
+let { image: _image } = Astro.props;
+_image = _image || defaultImage;
+
+let image = null;
+if (typeof _image === 'string') {
+    image = new URL(_image, siteBaseURL);
+} else if (_image && typeof _image['href'] !== 'undefined') {
+    image = new URL(_image['href'], siteBaseURL);
+} else {
+	image = defaultImage;
+}
+
+---
+
+<meta charset="UTF-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+<meta name="viewport" content="width=device-width" />
+<link rel="icon" type="image/svg+xml" href="/favicon.ico" />
+
+<SEO
+	title={title}
+	description={description}
+	openGraph={{
+		basic: {
+			url: config.homepageLink,
+			title: ogTitle,
+			type: ogType,
+			image: _image?.src ? _image.src : defaultImage.toString(),
+		},
+		image: {
+			url: image.toString(),
+			secureUrl: image.toString(),
+			alt: ogTitle,
+			height: _image?.height,
+			width: _image?.width,
+			type: _image?.format && `image/${_image.format}`,
+		},
+	}}
+	twitter={{
+		creator: '@liran_tal',
+		image: image ? image.toString() : undefined,
+		imageAlt: ogTitle,
+		title: ogTitle,
+		site: '@liran_tal',
+		description: description,
+		card: image ? 'summary_large_image' : 'summary',
+	}}
+	extend={{
+		meta: [
+			{
+				name: 'og:locale',
+				content: 'en_US',
+			},
+			{
+				name: 'og:description',
+				content: description,
+			},
+			{
+				name: 'og:site_name',
+				content: config.homepageLink,
+			}
+		]
+	}}
+/>