feat(clayui.com): source md/mdx files from package directories

clayui.com/gatsby-config.js

@@ -25,11 +25,18 @@ module.exports = {
 		},
 		{
 			options: {
-				name: 'packages',
+				name: 'content',
 				path: `${__dirname}/content`,
 			},
 			resolve: 'gatsby-source-filesystem',
 		},
+		{
+			options: {
+				name: 'packages',
+				path: path.join(__dirname, '../packages'),
+			},
+			resolve: 'gatsby-source-filesystem',
+		},
 		{
 			options: {
 				extensions: ['.mdx'],

clayui.com/gatsby/createPages.js

@@ -161,7 +161,10 @@ module.exports = async ({actions, graphql}) => {
 			return Promise.reject(errors);
 		}
 
-		const blacklist = data.allMdx.edges.filter(
+		const blacklist = [
+			...data.allMdx.edges,
+			...data.allMarkdownRemark.edges,
+		].filter(
 			({
 				node: {
 					fields: {sibling},

clayui.com/gatsby/onCreateNode.js

@@ -37,6 +37,7 @@ module.exports = exports.onCreateNode = ({actions, getNode, node}) => {
 			title,
 			version,
 		} = node.frontmatter;
+
 		const {relativePath, sourceInstanceName} = getNode(node.parent);
 
 		let slug = permalink;
@@ -63,6 +64,21 @@ module.exports = exports.onCreateNode = ({actions, getNode, node}) => {
 		}
 
 		if (!slug) {
+			if (sourceInstanceName === 'packages' && title) {
+				const fileName = path.basename(relativePath).split('.')[0];
+
+				if (relativePath.includes('README')) {
+					slug = `docs/components/${packageNpm.replace(
+						'@clayui/',
+						''
+					)}.html`;
+				} else {
+					slug = `docs/components/${fileName
+						.replace('_', '-')
+						.toLowerCase()}.html`;
+				}
+			}
+
 			if (relativePath.includes('docs')) {
 				if (relativePath.endsWith('.md')) {
 					slug = relativePath.replace('.md', '.html');
@@ -171,7 +187,7 @@ module.exports = exports.onCreateNode = ({actions, getNode, node}) => {
 		createNodeField({
 			name: 'slug',
 			node,
-			value: slug,
+			value: slug || '',
 		});
 
 		createNodeField({

clayui.com/src/templates/docs.js

@@ -110,7 +110,7 @@ export default props => {
 													)}
 												</div>
 												<div className="col-12">
-													{tab ? (
+													{tab && tab.html ? (
 														<ul
 															className="border-bottom nav nav-clay nav-underline"
 															role="tablist"
@@ -511,10 +511,10 @@ export const pageQuery = graphql`
 				}
 			}
 		}
-		mdTab: markdownRemark(fields: {slug: {eq: $sibling}}) {
+		mdTab: markdownRemark(fields: {slug: {ne: "", eq: $sibling}}) {
 			html
 		}
-		mdxTab: mdx(fields: {slug: {eq: $sibling}}) {
+		mdxTab: mdx(fields: {slug: {ne: "", eq: $sibling}}) {
 			code {
 				body
 			}