add map page (#13)

Author: tatinacher

gatsby-theme-woly/src/components/layout.js

@@ -5,6 +5,7 @@ import styled from 'styled-components';
 
 import { ComponentsMenu } from './components-menu';
 import { paths } from '../paths';
+import { mapComponentName } from '../lib/constants';
 
 export const Layout = ({ children }) => {
   const data = useStaticQuery(graphql`
@@ -52,12 +53,14 @@ function createMapping(data) {
     }
     const prefix = data.pathPrefix || '';
 
-    packages[component.meta.package].push({
-      ...component.meta,
-      path: prefix + paths.componentUsage(component.meta),
-      id: component.id,
-      title: camelCase(component.meta.name),
-    });
+    if (component.meta.category !== mapComponentName) {
+      packages[component.meta.package].push({
+        ...component.meta,
+        path: prefix + paths.componentUsage(component.meta),
+        id: component.id,
+        title: camelCase(component.meta.name),
+      });
+    }
   }
 
   return Object.keys(packages).reduce((list, name) => {

gatsby-theme-woly/src/lib/constants.js

@@ -0,0 +1 @@
+export const mapComponentName = 'map';

gatsby-theme-woly/src/templates/usage.js

@@ -3,6 +3,7 @@ import { graphql } from 'gatsby';
 import { MDXRenderer } from 'gatsby-plugin-mdx';
 import { pascalCase } from 'change-case';
 import { Layout } from '../components/layout';
+import { mapComponentName } from '../lib/constants';
 
 const installation = ({ package: p }) =>
   `npm install ${p}
@@ -11,6 +12,9 @@ yarn add ${p}`;
 
 const ComponentPage = ({ data, pageContext }) => {
   const { frontmatter, body } = data.usage;
+  if (frontmatter.category === mapComponentName) {
+    return <MDXRenderer>{body}</MDXRenderer>;
+  }
   return (
     <Layout>
       <div>

package.json

@@ -13,7 +13,7 @@
     "build": "yarn workspace example build",
     "deploy": "yarn workspace gatsby-theme-woly publish",
     "theme": "yarn workspace gatsby-theme-woly",
-    "example": "yarn workspace example",
+    "example": "yarn workspace example start",
     "clean": "yarn example gatsby clean && yarn theme gatsby clean"
   },
   "workspaces": [