feat: x-linkedin extension support

library/package.json

@@ -53,7 +53,7 @@
     "build:standalone": "cross-env BUILD_MODE=standalone webpack",
     "build:types": "tsc -p tsconfig.types.json",
     "build:styles": "npm run build:styles:dev && npm run build:styles:prod",
-    "build:styles:dev": "cross-env NODE_ENV=production postcss src/styles/default.css -o styles/default.css --verbose",
+    "build:styles:dev": "cross-env NODE_ENV=development postcss src/styles/default.css -o styles/default.css --verbose & cross-env NODE_ENV=development postcss src/styles/default.css -o styles/default.min.css --verbose",
     "build:styles:prod": "cross-env NODE_ENV=production MINIFY_STYLES=true postcss src/styles/default.css -o styles/default.min.css --verbose",
     "test": "npm run test:unit && npm run test:e2e",
     "test:unit": "jest --detectOpenHandles",
@@ -117,4 +117,4 @@
   "publishConfig": {
     "access": "public"
   }
-}
+}

library/src/components/Extensions.tsx

@@ -57,23 +57,35 @@ export const Extensions: React.FunctionComponent<Props> = ({
       <div
         className={`rounded p-4 py-2 border bg-gray-100 ${expanded ? 'block' : 'hidden'}`}
       >
+        {/* map supported extensions */}
+        <div className="flex flex-col gap-2">
+          {Object.keys(extensions)
+            .sort((extension1, extension2) =>
+              extension1.localeCompare(extension2),
+            )
+            .map((extensionKey) => {
+              if (config.extensions?.[extensionKey]) {
+                const CustomExtensionComponent =
+                  config.extensions[extensionKey];
+                return (
+                  <CustomExtensionComponent
+                    key={extensionKey}
+                    propertyName={extensionKey}
+                    propertyValue={extensions[extensionKey]}
+                    document={document}
+                    parent={item}
+                  />
+                );
+              } else return null;
+            })}
+        </div>
+        {/* map other extensions */}
         {Object.keys(extensions)
           .sort((extension1, extension2) =>
             extension1.localeCompare(extension2),
           )
           .map((extensionKey) => {
-            if (config.extensions?.[extensionKey]) {
-              const CustomExtensionComponent = config.extensions[extensionKey];
-              return (
-                <CustomExtensionComponent
-                  key={extensionKey}
-                  propertyName={extensionKey}
-                  propertyValue={extensions[extensionKey]}
-                  document={document}
-                  parent={item}
-                />
-              );
-            } else {
+            if (!config.extensions?.[extensionKey]) {
               const extensionSchema = SchemaHelpers.jsonToSchema(
                 extensions[extensionKey],
               );
@@ -82,7 +94,7 @@ export const Extensions: React.FunctionComponent<Props> = ({
                   <Schema schemaName={extensionKey} schema={extensionSchema} />
                 </div>
               );
-            }
+            } else return null;
           })}
       </div>
     </div>

library/src/components/supportedExtensions/LinkedinExtension.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+
+import { ExtensionComponentProps } from '../../types';
+
+/**
+ * See <https://github.com/asyncapi/extensions-catalog/blob/master/extensions/linkedin.md>.
+ */
+export default function LinkedinExtension({
+  propertyValue,
+}: ExtensionComponentProps<string>) {
+  return (
+    <a
+      title={propertyValue}
+      style={{ display: 'inline-block' }}
+      href={propertyValue}
+      rel="noopener noreferrer"
+      target="_blank"
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        xmlSpace="preserve"
+        id="Layer_1"
+        width="16px"
+        height="16px"
+        version="1.1"
+        viewBox="0 0 382 382"
+      >
+        <path
+          fill="#0077B7"
+          d="M347.445 0H34.555C15.471 0 0 15.471 0 34.555v312.889C0 366.529 15.471 382 34.555 382h312.889C366.529 382 382 366.529 382 347.444V34.555C382 15.471 366.529 0 347.445 0M118.207 329.844c0 5.554-4.502 10.056-10.056 10.056H65.345c-5.554 0-10.056-4.502-10.056-10.056V150.403c0-5.554 4.502-10.056 10.056-10.056h42.806c5.554 0 10.056 4.502 10.056 10.056zM86.748 123.432c-22.459 0-40.666-18.207-40.666-40.666S64.289 42.1 86.748 42.1s40.666 18.207 40.666 40.666-18.206 40.666-40.666 40.666M341.91 330.654a9.247 9.247 0 0 1-9.246 9.246H286.73a9.247 9.247 0 0 1-9.246-9.246v-84.168c0-12.556 3.683-55.021-32.813-55.021-28.309 0-34.051 29.066-35.204 42.11v97.079a9.246 9.246 0 0 1-9.246 9.246h-44.426a9.247 9.247 0 0 1-9.246-9.246V149.593a9.247 9.247 0 0 1 9.246-9.246h44.426a9.247 9.247 0 0 1 9.246 9.246v15.655c10.497-15.753 26.097-27.912 59.312-27.912 73.552 0 73.131 68.716 73.131 106.472z"
+        ></path>
+      </svg>
+    </a>
+  );
+}

library/src/components/supportedExtensions/XExtension.tsx

@@ -17,7 +17,6 @@ export default function XExtension({
       target="_blank"
     >
       <svg
-        // onClick={onClickHandler}
         style={{ cursor: 'pointer' }}
         width="15px"
         height="15px"

library/src/config/default.ts

@@ -8,6 +8,7 @@ import {
   SUBSCRIBE_LABEL_DEFAULT_TEXT,
 } from '../constants';
 import XExtension from '../components/supportedExtensions/XExtension';
+import LinkedinExtension from '../components/supportedExtensions/LinkedinExtension';
 
 export const defaultConfig: ConfigInterface = {
   schemaID: '',
@@ -36,5 +37,6 @@ export const defaultConfig: ConfigInterface = {
   replyLabel: REPLIER_LABEL_DEFAULT_TEXT,
   extensions: {
     'x-x': XExtension,
+    'x-linkedin': LinkedinExtension,
   },
 };

playground/specs/streetlights.ts

@@ -2,6 +2,9 @@ export const streetlights = `asyncapi: '2.6.0'
 id: 'urn:com:smartylighting:streetlights:server'
 info:
   x-x: AsyncAPISpec
+  x-linkedin: https://www.linkedin.com/company/asyncapi
+  x-random-2: random-2
+  x-random-1: random-1
   title: Streetlights API
   version: '1.0.0'
   description: |