Add Tutorials Section

gatsby-config.js

@@ -72,6 +72,13 @@ const sourcePlugins = {
         path: path.resolve(__dirname, '..', 'tailor', 'docs'),
       },
     },
+    {
+      resolve: 'gatsby-source-filesystem',
+      options: {
+        name: 'colonyTutorials',
+        path: path.resolve(__dirname, '..', 'colonyTutorials', 'tutorials'),
+      }
+    },
     // {
     //   resolve: 'gatsby-source-filesystem',
     //   options: {
@@ -173,6 +180,17 @@ module.exports = {
         }
       }
     },
+    {
+      resolve: 'gatsby-transform-md-tutorials',
+      options: {
+        slugPrefix: 'tutorials',
+        langConfig: {
+          langs: CONFIGURED_LOCALES,
+          defaultLangKey,
+          prefixDefaultLangKey,
+        }
+      }
+    },
     {
       resolve: 'gatsby-transformer-remark',
       options: {

plugins/gatsby-transform-md-docs/gatsby-node.js

@@ -41,13 +41,12 @@ exports.onCreateNode = ({ node, actions, getNode }, nodeOptions) => {
     createNodeField,
     createParentChildLink,
   } = actions
-
-  const { langConfig: { defaultLangKey, prefixDefaultLangKey } } = nodeOptions;
+  const { langConfig: { defaultLangKey, prefixDefaultLangKey }, projects: configuredProjects } = nodeOptions;
 
   let projectNode
   let sectionNode
 
-  if (node.base === 'doc.config.json') {
+  if (node.base === 'doc.config.json' && configuredProjects.includes(node.sourceInstanceName)) {
     const { projectName, projectId } = getProjectInfo(node)
     projectNode = getNode(projectId)
     if (!projectNode) {
@@ -75,7 +74,7 @@ exports.onCreateNode = ({ node, actions, getNode }, nodeOptions) => {
     projectNode.description = config.description
     projectNode.descriptionTranslations = getProjectDescriptionTranslations(config);
     projectNode.repoUrl = `https://github.com/JoinColony/${projectNode.name}`;
-  } else if (node.internal.type === 'MarkdownRemark') {
+  } else if (node.internal.type === 'MarkdownRemark' && configuredProjects.includes(getNode(node.parent).sourceInstanceName)) {
     const sectionName = node.frontmatter.section
 
     // If section does not exist in frontmatter we just return

plugins/gatsby-transform-md-tutorials/gatsby-node.js

@@ -0,0 +1,104 @@
+const path = require('path');
+const slugify = require('slugify');
+
+const { TutorialNode } = require('./nodes');
+
+const nodeQuery = `
+  {
+    tutorials: allTutorial {
+      edges {
+        node {
+          id
+          name
+          slug
+          fields {
+            markdownNodeId
+          }
+        }
+      }
+    }
+  }
+`;
+
+const onCreateNode = async ({ actions: { createNode, createNodeField }, getNode, node }, nodeOptions) => {
+  const { projects: configuredProjects } = nodeOptions;
+  if (node.internal.type === 'MarkdownRemark' && configuredProjects.includes(getNode(node.parent).sourceInstanceName)) {
+    const { langConfig: { defaultLangKey, prefixDefaultLangKey } } = nodeOptions;
+
+    let tutorialNode;
+    const { tutorialName, tutorialId } = getTutorialInfo(node);
+    tutorialNode = getNode(tutorialId);
+    if (!tutorialNode) {
+      tutorialNode = createTutorialNode(tutorialName, createNode, nodeOptions);
+    }
+    createNodeField({ node: tutorialNode, name: 'markdownNodeId', value: node.id });
+
+    const editUrl = getNodeEditUrl(getNode(node.parent))
+    createNodeField({
+      node: tutorialNode,
+      name: 'editUrl',
+      value: editUrl,
+    })
+    node.editUrl = editUrl;
+
+    if (!node.frontmatter.locale) {
+      node.frontmatter.locale = defaultLangKey;
+    }
+    const nodeLocale = node.frontmatter.locale;
+    const localeSlugPrefix = nodeLocale === defaultLangKey && !prefixDefaultLangKey ? '' : `${nodeLocale}/`;
+    // Add a slug as the TOC creation requires that (for linking)
+    node.slug = slugify(node.frontmatter.title, { lower: true })
+    // Slug for the actual page
+    createNodeField({
+      node: tutorialNode,
+      name: 'slug',
+      value: `/${localeSlugPrefix}${tutorialNode.slug}`,
+    })
+  }
+};
+
+const createPages = ({ graphql, actions: { createPage } }, nodeOptions) => {
+  return graphql(nodeQuery).then(({ data: { tutorials: { edges }} }) => {
+    edges.forEach(({ node: tutorial }) => {
+      createTutorialPage(tutorial, createPage, nodeOptions);
+    });
+  });
+};
+
+const createTutorialNode = (name, createNode, { slugPrefix }) => {
+  const tutorialNode = TutorialNode({
+    name,
+    slug: `${slugify(slugPrefix, { lower: true })}/${slugify(name, { lower: true })}`,
+  });
+  createNode(tutorialNode);
+  return tutorialNode;
+};
+
+const createTutorialPage = ({ slug, fields: { markdownNodeId } }, createPage, nodeOptions) => {
+  createPage({
+    path: slug,
+    component: path.resolve(__dirname, '..', '..', 'src', 'modules', 'pages', 'components', 'TutorialPage', 'TutorialPage.jsx'),
+    context: {
+      tutorialId: markdownNodeId,
+    },
+  });
+};
+
+const getNodeEditUrl = parent => {
+  // github sourced
+  if(parent && parent.githubEditPath) {
+    return `https://github.com/${parent.githubEditPath}`;
+  }
+  // filesystem sourced - assume master branch
+  const projectName = parent.sourceInstanceName;
+  return `https://github.com/JoinColony/${projectName}/edit/master/tutorials/${parent.relativePath}`;
+};
+
+const getTutorialInfo = node => {
+  const tutorialName = node.frontmatter.title;
+  const tutorialId = TutorialNode({ name: tutorialName }).id;
+  return { tutorialName, tutorialId };
+};
+
+exports.createPages = createPages;
+exports.onCreateNode = onCreateNode;

plugins/gatsby-transform-md-tutorials/nodes/index.js

@@ -0,0 +1 @@
+exports.TutorialNode = require('./tutorial');

plugins/gatsby-transform-md-tutorials/nodes/tutorial.js

@@ -0,0 +1,17 @@
+const createNodeHelpers = require('gatsby-node-helpers').default;
+
+const { createNodeFactory, generateNodeId } = createNodeHelpers({
+  typePrefix: 'Tutorials',
+});
+
+const TUTORIAL_TYPE = 'Tutorial';
+
+const TutorialNode = createNodeFactory(TUTORIAL_TYPE, node => {
+  node.id = generateNodeId(TUTORIAL_TYPE, node.name);
+  node.internal = {
+    type: TUTORIAL_TYPE,
+  };
+  return node;
+});
+
+module.exports = TutorialNode;

plugins/gatsby-transform-md-tutorials/package.json

@@ -0,0 +1,13 @@
+{
+  "name": "gatsby-transform-md-tutorials",
+  "version": "1.0.0",
+  "description": "",
+  "main": "gatsby-node.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "contributors": [
+    "Curtis Olson <[email protected]>"
+  ],
+  "license": "ISC"
+}

src/modules/core/components/Button/Button.jsx

@@ -11,7 +11,7 @@ import { getMainClasses } from '~utils/css';
 import styles from './Button.module.css';
 
 type Appearance = {
-  theme?: 'primary' | 'reset',
+  theme?: 'primary' | 'primaryHollow' | 'reset',
 };
 
 type Props = {

src/modules/core/components/Button/Button.module.css

@@ -3,29 +3,40 @@
   align-items: center;
   border-radius: 4px;
   display: inline-flex;
-  height: 45px;
-  font-size: 15px;
+  font-size: 16px;
   justify-content: center;
-  font-family: 'Avenir Next Demi';
+  font-family: 'Avenir Next Light';
   text-align: center;
   transition: 0.2s;
 }
 
-.themePrimary {
+.primaryBase {
   composes: main;
-  background-color: rgb(105, 220, 210);
-  border: 2px solid rgb(105, 220, 210);
-  color: rgb(0, 40, 75);
+  border: 1px solid #289BDC;
   min-width: 130px;
-  padding: 11px 15px;
+  padding: 3px 31px;
+}
+
+.themePrimary {
+  composes: primaryBase;
+  background-color: #289BDC;
+  color: #ffffff;
 }
 
 .themePrimary:hover {
-  background-color: transparent !important;
-  border: 2px solid rgb(105, 220, 210) !important;
-  box-shadow: none !important;
-  cursor: pointer !important;
-  text-decoration: none !important;
+  background-color: transparent;
+  color: #00284B;
+}
+
+.themePrimaryHollow {
+  composes: primaryBase;
+  background-color: transparent;
+  color: #00284B;
+}
+
+.themePrimaryHollow:hover {
+  background-color: #289BDC;
+  color: #ffffff;
 }
 
 .themeReset {

src/modules/layouts/components/DeveloperPortalLayout/DocsDropdownContent/DocsDropdownContent.module.css

@@ -10,6 +10,11 @@
   text-align: left;
 }
 
+.heroLink {
+  display: block;
+  height: 82px;
+}
+
 .hero {
   align-items: stretch;
   border-radius: borderRadius;
@@ -21,7 +26,8 @@
   border-radius: borderRadius;
   box-shadow: boxShadow;
   display: flex;
-  align-items: center
+  align-items: center;
+  justify-content: center;
 }
 
 .logo {

src/modules/pages/components/Developers/Developers.jsx

@@ -6,11 +6,11 @@ import { defineMessages } from 'react-intl';
 import { Helmet } from 'react-helmet';
 
 import SEO from '~parts/SEO';
+import SupportCta from '~parts/SupportCta';
 
 import CoreProducts from './CoreProducts';
 import Hero from './Hero';
 import OpenSource from './OpenSource';
-import SupportCta from './SupportCta';
 
 import styles from './Developers.module.css';
 
@@ -47,7 +47,7 @@ const Developers = ({ intl: { formatMessage } }: Props) => {
         <Hero />
         <CoreProducts />
         <OpenSource />
-        <SupportCta />
+        <SupportCta withBackground />
       </main>
     </>
   );