Merge pull request #1212 from matuzalemsteles/Nightly

Proposal for the Nightly Environment

clayui.com/.env.development

@@ -0,0 +1 @@
+GATSBY_CLAY_NIGHTLY=false

clayui.com/.env.production

@@ -0,0 +1 @@
+GATSBY_CLAY_NIGHTLY=false

clayui.com/gatsby-config.js

@@ -29,7 +29,7 @@ module.exports = {
 		{
 			resolve: 'gatsby-mdx',
 			options: {
-				extensions: ['.mdx', '.md'],
+				extensions: ['.mdx'],
 				gatsbyRemarkPlugins: [
 					{
 						resolve: path.resolve(__dirname, './plugins/gatsby-remark-foreach-icons'),
@@ -49,6 +49,31 @@ module.exports = {
 				],
 			},
 		},
+		{
+			resolve: 'gatsby-transformer-remark',
+			options: {
+				plugins: [
+					{
+						resolve: 'gatsby-remark-foreach-icons',
+					},
+					{
+						resolve: 'gatsby-remark-prismjs',
+						options: {
+							classPrefix: 'gatsby-code-',
+						},
+					},
+					{
+						resolve: 'gatsby-remark-use-clipboard',
+					},
+					{
+						resolve: 'gatsby-remark-api-table',
+					},
+					{
+						resolve: 'gatsby-remark-typography',
+					},
+				],
+			},
+		},
 		{
 			resolve: 'gatsby-plugin-google-analytics',
 			options: {

clayui.com/gatsby/createPages.js

@@ -1,40 +1,55 @@
 'use strict';
 
+require('dotenv').config({
+	path: `.env.${process.env.NODE_ENV}`,
+});
+
 const componentWithMDXScope = require('gatsby-mdx/component-with-mdx-scope');
 const path = require('path');
 
-const createDocs = (actions, edges) => {
+const {GATSBY_CLAY_NIGHTLY} = process.env;
+
+const createDocs = (actions, edges, mdx) => {
 	const {createPage, createRedirect} = actions;
+	const docsTemplate = path.resolve(__dirname, '../src/templates/docs.js');
 
-	edges.forEach(({node}) => {
-		const {slug, redirect, layout} = node.fields;
+	edges
+		.filter(({node: {fields: {nightly}}}) => GATSBY_CLAY_NIGHTLY === 'true' ? true : !nightly)
+		.forEach(({node}) => {
+			const {slug, redirect, layout} = node.fields;
 
-		if (redirect) {
-			const slugWithBar = slug.startsWith('/') ? slug : `/${slug}`;
-			const fromPath = slugWithBar.endsWith('index.html') ? slugWithBar.replace('index.html', '') : slugWithBar;
+			if (redirect) {
+				const slugWithBar = slug.startsWith('/') ? slug : `/${slug}`;
+				const fromPath = slugWithBar.endsWith('index.html') ? slugWithBar.replace('index.html', '') : slugWithBar;
 
-			createRedirect({
-				fromPath,
-				isPermanent: true,
-				redirectInBrowser: true,
-				toPath: redirect,
-			});
-		}
+				createRedirect({
+					fromPath,
+					isPermanent: true,
+					redirectInBrowser: true,
+					toPath: redirect,
+				});
+			}
 
-		if (slug.includes('docs/') && layout !== 'redirect') {
-			createPage({
-				path: slug,
-				component: componentWithMDXScope(
-					path.resolve(__dirname, '../src/templates/docs.js'),
-					node.code.scope,
-					__dirname,
-				),
-				context: {
-					slug,
-				},
-			});
-		}
-	});
+			const component =
+				mdx ?
+					componentWithMDXScope(
+						docsTemplate,
+						node.code.scope,
+						__dirname,
+					) :
+					docsTemplate;
+
+			if (slug.includes('docs/') && layout !== 'redirect') {
+				createPage({
+					path: slug,
+					component,
+					context: {
+						markdownJsx: mdx,
+						slug,
+					},
+				});
+			}
+		});
 };
 
 module.exports = async ({actions, graphql}) => {
@@ -51,25 +66,35 @@ module.exports = async ({actions, graphql}) => {
 					node {
 						fields {
 							layout
+							nightly
 							redirect
 							slug
-							title
-							weight
 						}
 						code {
 							scope
 						}
 					}
 				}
 			}
+			allMarkdownRemark {
+				edges {
+					node {
+						fields {
+							layout
+							nightly
+							redirect
+							slug
+						}
+					}
+				}
+			}
 		}
 	`).then(({data, errors}) => {
 		if (errors) {
 			return Promise.reject(errors);
 		}
 
-		const {edges} = data.allMdx;
-
-		createDocs(actions, edges);
+		createDocs(actions, data.allMdx.edges, true);
+		createDocs(actions, data.allMarkdownRemark.edges, false);
 	});
 };

clayui.com/gatsby/onCreateNode.js

@@ -1,9 +1,13 @@
 module.exports = exports.onCreateNode = ({node, actions, getNode}) => {
 	const {createNodeField} = actions;
 
-	if (node.internal.type === 'Mdx') {
+	if (
+		node.internal.type === 'Mdx' ||
+		node.internal.type === 'MarkdownRemark'
+	) {
 		const {
 			layout,
+			nightly,
 			path,
 			redirect,
 			title,
@@ -15,10 +19,20 @@ module.exports = exports.onCreateNode = ({node, actions, getNode}) => {
 
 		if (!slug) {
 			if (relativePath.includes('docs')) {
-				slug = relativePath.replace('.md', '.html');
+				if (relativePath.endsWith('.md')) {
+					slug = relativePath.replace('.md', '.html');
+				} else {
+					slug = relativePath.replace('.mdx', '.html');
+				}
 			}
 		}
 
+		createNodeField({
+			name: 'nightly',
+			node,
+			value: nightly ? true : false,
+		});
+
 		createNodeField({
 			name: 'title',
 			node,

clayui.com/package.json

@@ -23,6 +23,7 @@
     "clay-tooltip": "^2.2.0",
     "countries-list": "^2.3.2",
     "documentation": "^8.1.2",
+    "dotenv": "^6.0.0",
     "gatsby": "^2.0.8",
     "gatsby-mdx": "^0.1.4",
     "gatsby-plugin-google-analytics": "^2.0.6",

clayui.com/plugins/gatsby-remark-typography/index.js

@@ -0,0 +1,26 @@
+const visit = require('unist-util-visit');
+
+module.exports = ({markdownAST}) => {
+    visit(markdownAST, 'heading', node => {
+        if (
+            node.depth === 1 ||
+            node.depth === 2 ||
+            node.depth === 3 ||
+            node.depth === 4
+        ) {
+            node.data = {
+                hProperties: {
+                    class: 'clay-h' + node.depth
+                }
+            }
+        }
+    });
+
+    visit(markdownAST, 'paragraph', node => {
+        node.data = {
+            hProperties: {
+                class: 'clay-p'
+            }
+        }
+    });
+};

clayui.com/plugins/gatsby-remark-typography/package.json

@@ -0,0 +1,4 @@
+{
+  "name": "gatsby-remark-typography",
+  "version": "0.0.1"
+}

clayui.com/src/components/Sidebar/Navigation.js

@@ -1,80 +1,80 @@
-import React, { Component } from 'react';
+import React, {Component} from 'react';
 import classNames from 'classnames';
-import { Link } from "gatsby"
+import {Link} from 'gatsby';
 
 class Navigation extends Component {
-    _handleOnClick(index, depth, section, event) {
-        event.stopPropagation();
+	_handleOnClick(index, depth, section, event) {
+		event.stopPropagation();
 
-        const elementRef = this.refs[`navItem${index}${depth}`];
+		const elementRef = this.refs[`navItem${index}${depth}`];
 
-        if (!elementRef.classList.contains('active') || !!section.items) {
-            elementRef.classList.toggle('active');
-        }
-    }
+		if (!elementRef.classList.contains('active') || !!section.items) {
+			elementRef.classList.toggle('active');
+		}
+	}
 
-    _isActive(section) {
-        const { location } = this.props;
-        const match = location.pathname.split('/');
-        const id = match[match.length - 1].split('.');
+	_isActive(section) {
+		const {location} = this.props;
+		const match = location.pathname.split('/');
+		const id = match[match.length - 1].split('.');
 
-        if (section.items) {
-            return match.includes(section.id);
-        }
+		if (section.items) {
+			return match.includes(section.id);
+		}
 
-        return id[0] === section.id;
-    }
+		return id[0] === section.id;
+	}
 
-    renderNavigationItems() {
-        const { sectionList, location, depth = 0 } = this.props;
+	renderNavigationItems() {
+		const {sectionList, location, depth = 0} = this.props;
 
-        return sectionList.map((section, index) => {
-            let style = classNames({
-                'active': this._isActive(section) === true,
-                'nav-heading': section.items
+		return sectionList.map((section, index) => {
+			let style = classNames({
+				'active': this._isActive(section) === true,
+				'nav-heading': section.items,
             });
 
-            return(
-                <li key={index} ref={`navItem${index}${depth}`} className={style} onClick={this._handleOnClick.bind(this, index, depth, section)}>
-                    <Anchor page={section} />
-
-                    {section.items && (
-                        <Navigation sectionList={section.items} location={location} depth={depth + 1} />
-                    )}
-                </li>
-            );
-        });
-    }
+			return (
+				<li key={index} ref={`navItem${index}${depth}`} className={style} onClick={this._handleOnClick.bind(this, index, depth, section)}>
+					<Anchor page={section} />
 
-    render() {
-        return(
-            <ul className="nav nav-nested nav-pills nav-stacked">
-                {this.renderNavigationItems()}
-            </ul>
-        );
-    }
+					{section.items && (
+						<Navigation sectionList={section.items} location={location} depth={depth + 1} />
+					)}
+				</li>
+			);
+		});
+	}
+
+	render() {
+		return (
+			<ul className="nav nav-nested nav-pills nav-stacked">
+				{this.renderNavigationItems()}
+			</ul>
+		);
+	}
 }
 
 const Anchor = ({page}) => {
-    if (page.items) {
-        return(
-            <a className="align-middle" href="javascript:;">
-                <span>{page.title}</span>
-                <svg className="collapse-toggle clay-icon icon-monospaced">
-                    <use xlinkHref="/images/icons/icons.svg#caret-bottom" />
-                </svg>
-            </a>
-        );
-    }
+	if (page.items) {
+		return (
+			<a className="align-middle" href="javascript:;">
+				<span>{page.title}</span>
+				<svg className="collapse-toggle clay-icon icon-monospaced">
+					<use xlinkHref="/images/icons/icons.svg#caret-bottom" />
+				</svg>
+			</a>
+		);
+	}
 
-    return (
-        <Link
-            to={`${page.link}.html`}
-            className="align-middle"
-        >
-            <span>{page.title}</span>
-        </Link>
-    );
+	return (
+		<Link
+			to={`${page.link}.html`}
+			className="align-middle"
+		>
+			<span>{page.title}</span>
+		</Link>
+	);
 };
 
-export default Navigation;
+export default Navigation;