Deploy storefront with dataviz page (#506)

* remove generated files from repo

* test for all spellings of drafts

* ignore mdx since they’re edited on Github

* add route and metatitle

* update path to docs, update images

.prettierignore

@@ -1,2 +1,2 @@
-#*.mdx
+*.mdx
 README.md

apps/figma-broker/actions/createFigmaImages.js

@@ -11,7 +11,7 @@ export async function createFigmaImages(ctx) {
   const exec = util.promisify(childProcess.exec)
   // find all figma urls defined in storefront content files
   const { stdout, stderr } = await exec(
-    `grep -rni "\\"https://www.figma" ./../storefront/src/content/* | awk -F"[\\"\\"]" '{print $2}' | sed "s/.*file//"`,
+    `grep -rni "\\"https://www.figma" ./../storefront/docs/* | awk -F"[\\"\\"]" '{print $2}' | sed "s/.*file//"`,
   )
 
   if (stderr) {

apps/storefront/docs/patterns/data-visualisation/data-visualisation.mdx

@@ -1,6 +1,8 @@
 ---
 title: Data visualisation
+metaTitle: Data visualisation
 mode: publish
+route: /patterns/data-visualisation/
 ---
 
 **Data visualisation is the graphical presentation of information in a way that makes it easier to understand and process. It is usually interactive and allows for the user to draw their own conclusions about the data. Some common data visualisation formats are tables, bar charts, line charts, scatterplots and maps.**  

apps/storefront/src/gatsby-theme-docz/components/Sidebar/index.js

@@ -125,7 +125,7 @@ export const Sidebar = ({ className, open, onClick }) => {
     doc.route.replace(/^\/|\/$/g, '').split('/').length < 3
 
   const handleDrafts = (doc) =>
-    !(process.env.GATSBY_STAGE === 'prod' && doc.mode === 'draft')
+    !(process.env.GATSBY_STAGE === 'prod' && doc.mode.toLowerCase() === 'draft')
 
   const subMenus = useMemo(
     () =>