466 enable *community* page

docs/fdc3-intro.md

@@ -31,7 +31,7 @@ From its inception, the standards have been informed by real-world [business use
 
 ## Who is using FDC3?
 
-The Financial Desktop Connectivity and Collaboration Consortium (FDC3) standards are created and used by [leading organizations across the financial industry](/users).
+The Financial Desktop Connectivity and Collaboration Consortium (FDC3) standards are created and used by [leading organizations across the financial industry](/users). For more detail on who's using FDC3, developer tools, training and examples, see the [community page](/community).
 
 ## How is FDC3 governed?
 

website/data/implementations.json → website/data/community.json

@@ -1,5 +1,5 @@
 [
-    {   "//": "Implementations page content - required fields: title, image, type, description",
+    {   "//": "community page content - required fields: title, image, type, badges, description",
         "//": "Image link may be external or images may be added to the /website/static/img/users directory for hosting on the FDC3 website",
         "//": "Please keep descriptions to (at most) 100 words.",
         "//": "Description content may be formatted in basic HTML (e.g. <p>, <i> and <a> tags)",
@@ -13,15 +13,37 @@
         "infoLink": "https://cosaic.io/chartiq/",
         "docsLink": "https://documentation.chartiq.com/",
         "type": "application-provider",
+        "badges": [{"text": "FDC3 1.2 Supported"} ],
         "description": "<p>ChartIQ is a powerful and flexible HTML5 charting library with millions of users worldwide. Written in JavaScript, it runs entirely within the browser. With state of the art integrations, including  third-party apps, educational components, analysis, and more, you can create efficient workflows and streamline the way to work.</p><p>ChartIQ works on any platform (mobile, web, desktop) and any framework (Angular, React).</p><p>Most companies have at least one financial charting library for each platform or app they target—web, C#, Java, Android, iOS, etc., so developers have multiple code bases to maintain. With ChartIQ, write your code once and use it everywhere.</p>"
     },
+    {
+    	"title": "Electron-FDC3",
+    	"publisher" : "FINOS",
+        "image": "/img/users/FINOS.png",
+        "infoLink": "https://github.com/finos/electron-fdc3",
+        "docsLink": "https://github.com/finos/electron-fdc3",
+        "type": "platform-provider",
+        "badges": [ {"text": "FDC3 1.2 Supported"}, {"text": "Open Source"} ],
+        "description": "<p>This project provides a fully open source implementation of the FDC3 interoperability standard. </p><p>Includes a fully featured and secure electron desktop agent featuring intent resolution, channel linking, directory search and a local file-based app directory implementation. </p>"
+    },
+    {
+    	"title": "FDC3 Desktop Agent Chrome Extension",
+    	"publisher" : "FINOS",
+        "image": "/img/users/FINOS.png",
+        "infoLink": "https://github.com/finos/fdc3-desktop-agent",
+        "docsLink": "https://github.com/finos/fdc3-desktop-agent",
+        "type": "platform-provider",
+        "badges": [ {"text": "FDC3 1.2 Supported"}, {"text": "Open Source"} ],
+        "description": "<p>The FDC3 Desktop Agent is an open source implementation of FDC3 as a Chrome Extension. </p><p> Its purpose is to provide a quick and easy way for app developers to get started with the FDC3 APIs. </p> "
+    },
     {
         "title": "Finsemble",
         "publisher": "Cosaic, Inc.",
         "image": "/img/users/Finsemble.png",
         "infoLink": "https://cosaic.io/finsemble/",
         "docsLink": "https://documentation.finsemble.com/",
         "type": "platform-provider",
+        "badges": [ {"text": "FDC3 1.2 Supported"} ],
         "description": "<p>Finsemble is a no code/low code smart desktop platform that helps you achieve both visual and logical integration of various types of apps that you already use (web, native, in-house, and third-party, including Citrix virtual apps).</p><p>Connect apps into automated workflows to improve user efficiency and reduce error rates. With <a href='https://documentation.finsemble.com/tutorial-ControllingInformationFlow.html' alt='Controlling information flow through FDC3 in Finsemble'>SelectConnect</a>, you are in full control over which apps communicate and which are excluded.</p><p>Build a fully customizable UI to work across multiple windows and monitors.</p><p>Use our <a href='https://documentation.finsemble.com/tutorial-SDD-01-Welcome.html' alt='The Smart Desktop Designer: fast-track to interoperability'>Smart Desktop Designer</a> to create and share fully functioning, highly customized, integrated desktops in a few hours, no coding knowledge needed.</p>"
     },
     {
@@ -31,6 +53,7 @@
         "infoLink": "http://fdc3.finos.org/toolbox/fdc3-workbench",
         "docsLink": "https://github.com/finos/FDC3/blob/master/toolbox/fdc3-workbench/README.md",
         "type": "examples-and-training",
+        "badges": [ ],
         "description": "<p>When developing an FDC3-compliant app or desktop agent, you need to test. Because FDC3 is about communicating, you need at least one other app to communicate with. You could grab an existing app, but there may not be one available that uses the messaging you need to test.</p><p>Many developers end up writing their own helper tool that they discard when their app is done. So many devs have created these throwaway apps that the Finsemble team @ Cosaic decided to build and contribute a workbench (for any FDC3-compliant platform) that helps develop and test your app without writing throwaway code.</p>"
     },
     {
@@ -40,6 +63,7 @@
         "infoLink": "https://fdc3.finos.org/toolbox/fdc3-explained",
         "docsLink": "https://github.com/finos/FDC3/blob/master/toolbox/fdc3-explained/README.md",
         "type": "examples-and-training",
+        "badges": [ ],
         "description": "FDC3 eXplained is a no-frills tool for learning more about FDC3 concepts without requiring any engineering or coding knowledge. Click the buttons and see the API response, type in context and broadcast it. No dependencies, libraries or frameworks - just a single html page per version that you can load in any environment. Similar to FDC3 Workbench it provides a reference implementation for you to test and verify the FDC3 functionality of other applications and desktop agents."
     },
     {
@@ -48,6 +72,27 @@
         "image": "https://linuxfoundation.org/wp-content/uploads/Linux-Foundation-OG-Image.png",
         "infoLink": "https://www.edx.org/course/fdc3-interoperability-for-the-financial-desktop",
         "type": "examples-and-training",
+        "badges": [ ],
         "description": "The FDC3 standard for application interoperability has become a key fintech enabler for transformation as financial organizations embrace micro-frontend-oriented workflows. Learn about the vision and key concepts of FDC3, the benefits it provides, and how workflow-driven design makes it easy to get started with FDC3."
+    },
+    {
+        "title": "Glue42 Enterprise",
+        "publisher": "Glue42",
+        "image": "/img/users/Glue42 Enterprise Positive.svg",
+        "infoLink": "https://glue42.com/enterprise/",
+        "docsLink": "https://docs.glue42.com/",
+        "type": "platform-provider",
+        "badges": [ {"text": "FDC3 1.2 Supported"} ],
+        "description": "<p>Glue42 enables organizations to build intelligent desktops that support configurable workflows between web and desktop applications. We’re working with some of the world’s biggest financial organizations to help them optimize complex processes and become more efficient.</p><p>Our flagship product, Glue42 Enterprise, is a desktop application integration platform that helps organizations create a simplified desktop experience by connecting the UI and data of any application, e.g., legacy, in-house or web. The platform supports open-source standards, including FINOS-FDC3, thus reducing delivery time and avoiding vendor lock-in.</p>"
+    },
+    {
+        "title": "OpenFin",
+        "publisher": "OpenFin Inc.",
+        "image": "/img/users/Openfin.png",
+        "infoLink": "https://openfin.co/",
+        "docsLink": "https://developers.openfin.co/of-docs",
+        "type": "platform-provider",
+        "badges": [ ],
+        "description": "<p>OpenFin founded the FDC3 standard in 2017 in collaboration with major banks and asset managers. Deployed at more than 2400 financial firms, OpenFin OS, allows applications from multiple providers to co-exist and interoperate on the desktop.</p><p>OpenFin OS consists of a secure, Chromium-based runtime called Container and a visual interface called <a href='https://www.openfin.co/workspace/' alt='OpenFin Workspace'>Workspace</a>. Workspace gets you running in no time, with themeable UI components for complex windowing, advanced search, actionable notifications and application discovery.</p><p>You can also build your own solutions using the <a href='https://www.openfin.co/container/' alt='OpenFin Container'>OpenFin Container</a>, native language <a href='https://www.openfin.co/container/adapters/' alt='OpenFin Native Adapters'>adapters</a> and APIs while remaining compatible with everything else built on OpenFin.</p>"
     }
 ]

website/pages/en/implementations.js → website/pages/en/community.js

@@ -10,7 +10,17 @@ const React = require('react');
 const { useState, useEffect } = React;
 const CompLibrary = require('../../core/CompLibrary.js');
 const Container = CompLibrary.Container;
-const implData = require(`${process.cwd()}/data/implementations.json`);
+const implData = require(`${process.cwd()}/data/community.json`);
+
+const badgeTitles = {
+	"Open Source": "Indicates that the project source code is available to download and modify, under an Apache 2.0 or similar license.",
+	"FDC3 1.2 Supported": "Indicates that this product advertises compatibility with the FDC3 1.2 Standard. ",
+	"FDC3 2.0 Supported ": "Indicates that this product advertises compatibility with the FDC3 2.0 Standard. ", 
+	"FDC3 1.2 Compliant": "This badge is applied to desktop agents that have passed the FINOS FDC3 1.2 Conformance testing process.",
+	"FDC3 2.0 Compliant": "This badge is applied to desktop agents that have passed the FINOS FDC3 2.0 Conformance testing process.",
+	"FDC3 2.0 Support Coming Soon": "This product is working towards attaining the FDC3 2.0 Standard.",
+}
+
 
 //remove comments
 implData.forEach(function (item, index, object) {
@@ -32,7 +42,7 @@ implData.sort((a, b) => {
 	}
 });
 
-function Implementation({ type, title, publisher, image, infoLink, docsLink, description }) {
+function Implementation({ type, title, publisher, image, infoLink, docsLink, badges, description }) {
 	return <div className={"implementation hide " + type}>
 		<div className="implementation-metadata">
 			<div className="title-and-publisher">
@@ -50,6 +60,9 @@ function Implementation({ type, title, publisher, image, infoLink, docsLink, des
 					{docsLink ? <a href={docsLink} key={docsLink} className="button">Documentation</a> : null}
 				</div>
 				<div className="prose" dangerouslySetInnerHTML={{ __html: description }}></div>
+				<div className="badges">
+					{ badges.map(b =><a href="#" key={b.text} title={badgeTitles[b.text]} className="button badge">{b.text}</a>)}
+				</div>
 			</div>
 		</div>
 	</div>
@@ -87,13 +100,13 @@ function Implementations(props) {
 	const editUrl = `${repoUrl}/edit/master/website/data/implementations.json`;
 
 	return <Container>
-		<h1>FDC3 Implementations</h1>
+		<h1>FDC3 Community</h1>
 		<div className="prose">
 			<p>
 				The Financial Desktop Connectivity and Collaboration Consortium (FDC3) standard is maintained and used by leading organizations across the financial industry through a variety of different implementations.
 			</p>
 			<p>
-				For more detail on who's implementing the Desktop Agent (a "Platform Provider"), using FDC3 to enable interop with their apps (an "Application Provider") or details on where to find tools, examples apps and training materials see below.
+				For more detail on who's implementing the Desktop Agent (a "Platform Provider"), using FDC3 to enable interop with their apps (an "App Provider") or details on where to find tools, examples apps and training materials see below.
 			</p>
 			<p>
 				<i>

website/pages/en/index.js

@@ -160,7 +160,7 @@ class Index extends React.Component {
       return (
         <div className="userShowcase productShowcaseSection paddingTop paddingBottom">
           <h2>Who is Using FDC3?</h2>
-          <p>The Financial Desktop Connectivity and Collaboration Consortium (FDC3) standards are created and used by <a href="/users">leading organizations across the financial industry</a>.</p>
+          <p>The Financial Desktop Connectivity and Collaboration Consortium (FDC3) standards are created and used by <a href="/users">leading organizations across the financial industry</a>. For more detail on who's using FDC3, developer tools, training and examples see the <a href="/community">community page</a>.</p>
           <Showcase users={pinnedUsers} />
           {/* exclude button to users page for now, all users shown on main page */}
           {/* <div className="more-users">

website/siteConfig.js

@@ -26,7 +26,7 @@ const siteConfig = {
     {doc: 'fdc3-intro', label: 'Getting Started'},   
     {page: 'fdc3-roadmap', label: 'Roadmap'},
     {doc: 'use-cases/overview', label: 'Use Cases'},
-    //{page: 'implementations', label: 'Implementations'},
+    {page: 'community', label: 'Community'},
     {doc: 'fdc3-standard', label: 'The Standard'},
     {page: 'get-involved', label: 'Get Involved'},
     {href: 'https://www.edx.org/course/fdc3-interoperability-for-the-financial-desktop', label: 'Training', external: true}

website/static/css/custom.css

@@ -287,6 +287,18 @@ article iframe {
   align-items: center;
   flex-basis: 100%;
 }
+.implementation-details  > .description > .badges {
+	padding-left: 10px;
+}
+.implementation-details  > .description > .badges > .badge {
+	background-color: rgb(239, 239, 239);
+	display: inline-block;
+	border: 0px;
+	margin-top: 5px;
+	margin-right: 10px;
+}
+
+
 @media screen and (max-width: 736px) {
   .implementation-details {
     padding: 6px 6px;