Integrate external docs with internal docs

Author: ceolson01

gatsby-config.js

@@ -61,6 +61,24 @@ module.exports = {
   siteMetadata: {
     siteUrl: `https://colony.io`,
     title: 'Colony: A platform for open organizations',
+    externalDocs: [
+      {
+        entryPoint: 'https://joincolony.github.io/colonyJS',
+        logo: '/img/logomark_colonyJS_color.svg',
+        logoSmall: '/img/logomark_colonyJS_red.svg',
+        name: 'colonyJS',
+        repoUrl: 'https://github.com/JoinColony/colonyJS',
+        type: 'core',
+      },
+      {
+        entryPoint: 'https://joincolony.github.io/purser',
+        logo: '/img/purser_color.svg',
+        logoSmall: '/img/logomark_purser_green.svg',
+        name: 'purser',
+        repoUrl: 'https://github.com/JoinColony/purser',
+        type: 'tool',
+      }
+    ]
   },
   plugins: [
     {

src/hooks/index.js

@@ -1,5 +1,6 @@
 /* @flow */
 
 export { default as useDiscordWebhook } from './useDiscordWebhook';
+export { default as useDocsLinks } from './useDocsLinks';
 export { default as useElementHeight } from './useElementHeight';
 export { default as useHubspotForm } from './useHubspotForm';

src/hooks/useDocsLinks.js

@@ -0,0 +1,61 @@
+/* @flow */
+
+import { useMemo } from 'react';
+import { graphql, useStaticQuery } from 'gatsby';
+import type { IntlShape } from 'react-intl';
+
+import type { Project } from '~types';
+
+import { transformProjectData } from '~utils/docs';
+
+const useDocsLinks = (intl: IntlShape) => {
+  const { locale } = intl;
+  const projectQueryData = useStaticQuery(graphql`
+    {
+      ...coreProjectsFragment
+      ...externalProjectsFragment
+      ...openSourceProjectsFragment
+    }
+  `);
+
+  const {
+    site: {
+      siteMetadata: { externalDocs },
+    },
+  } = projectQueryData;
+
+  const coreGitHubDocs: Array<Project> = useMemo(
+    () =>
+      projectQueryData.coreProjects.edges.map(edge =>
+        transformProjectData(edge, locale),
+      ) || [],
+    [locale, projectQueryData.coreProjects.edges],
+  );
+  const openSourceGitHubDocs: Array<Project> = useMemo(
+    () =>
+      projectQueryData.openSourceProjects.edges.map(edge =>
+        transformProjectData(edge, locale),
+      ) || [],
+    [locale, projectQueryData.openSourceProjects.edges],
+  );
+
+  const coreProjects = useMemo(
+    () => [
+      ...coreGitHubDocs,
+      ...externalDocs.filter(({ type }) => type === 'core'),
+    ],
+    [coreGitHubDocs, externalDocs],
+  );
+
+  const openSourceProjects = useMemo(
+    () => [
+      ...openSourceGitHubDocs,
+      ...externalDocs.filter(({ type }) => type === 'tool'),
+    ],
+    [externalDocs, openSourceGitHubDocs],
+  );
+
+  return { coreProjects, openSourceProjects };
+};
+
+export default useDocsLinks;

src/modules/layouts/components/DeveloperPortalLayout/DeveloperPortalLayout.jsx

@@ -3,12 +3,9 @@
 import type { Element } from 'react';
 import type { IntlShape } from 'react-intl';
 
-import React, { Component, useMemo } from 'react';
-import { graphql, useStaticQuery } from 'gatsby';
+import React, { Component } from 'react';
 
-import type { Project } from '~types';
-
-import { transformProjectData } from '~utils/docs';
+import { useDocsLinks } from '~hooks';
 
 import Header from './Header';
 import Footer from './Footer';
@@ -22,27 +19,8 @@ type Props = {|
 
 const displayName = 'layouts.DeveloperPortalLayout';
 
-const DeveloperPortalLayout = ({ children, intl: { locale } }: Props) => {
-  const projectQueryData = useStaticQuery(graphql`
-    {
-      ...coreProjectsFragment
-      ...openSourceProjectsFragment
-    }
-  `);
-  const coreProjects: Array<Project> = useMemo(
-    () =>
-      projectQueryData.coreProjects.edges.map(edge =>
-        transformProjectData(edge, locale),
-      ) || [],
-    [locale, projectQueryData.coreProjects.edges],
-  );
-  const openSourceProjects: Array<Project> = useMemo(
-    () =>
-      projectQueryData.openSourceProjects.edges.map(edge =>
-        transformProjectData(edge, locale),
-      ) || [],
-    [locale, projectQueryData.openSourceProjects.edges],
-  );
+const DeveloperPortalLayout = ({ children, intl }: Props) => {
+  const { coreProjects, openSourceProjects } = useDocsLinks(intl);
 
   return (
     <div>

src/queries/project.js

@@ -56,9 +56,7 @@ export const allProjectsFragment = graphql`
 
 export const coreProjectsFragment = graphql`
   fragment coreProjectsFragment on Query {
-    coreProjects: allProject(
-      filter: { name: { in: ["colonyJS", "colonyNetwork", "colonyStarter"] } }
-    ) {
+    coreProjects: allProject(filter: { name: { in: ["colonyNetwork"] } }) {
       edges {
         node {
           slug
@@ -94,19 +92,29 @@ export const coreProjectsFragment = graphql`
   }
 `;
 
+export const externalProjectsFragment = graphql`
+  fragment externalProjectsFragment on Query {
+    site {
+      siteMetadata {
+        externalDocs {
+          entryPoint
+          logo
+          logoSmall
+          name
+          repoUrl
+          type
+        }
+      }
+    }
+  }
+`;
+
 export const openSourceProjectsFragment = graphql`
   fragment openSourceProjectsFragment on Query {
     openSourceProjects: allProject(
       filter: {
         name: {
-          in: [
-            "budgetBox"
-            "tailor"
-            "pinion"
-            "trufflepig"
-            "purser"
-            "solcover"
-          ]
+          in: ["budgetBox", "tailor", "pinion", "trufflepig", "solcover"]
         }
       }
     ) {