making a gallery!

1. forage the web for cool assets
2. collect the coolest
3. create a gallery

ingredients for foraging & collecting :
* airtable base (for collecting)
* airtable webclipper app (for saving to our collection)
* chrome (for the app extension and web foraging)

ingredients for creatinga gallery:
* atom

I follwed most of the airtable to gatsby hackmd guide

I am also doing:

npm install 
gatsby-plugin-mdx 
@mdx-js/mdx 
@mdx-js/react 
gatsby-plugin-sharp 
gatsby-remark-images 
gatsby-transformer-remark 
gatsby-source-filesystem
theme-ui

added those into config.js

and also added a view in Airtable base "Published" and added that into config.js

and here is the template page: (mine is called gallery.js)

const path = require(`path`)
exports.createPages = ({ graphql, actions }) => {
  // createPage is a built in action,
  // available to all gatsby-node exports
  const { createPage } = actions
  return new Promise(async resolve => {
    // we need the table name (e.g. "Sections")
    // as well as the unique path for each Page/Section.
    const result = await graphql(`
      {
        allAirtable {
          edges {
            node {
              table
              data {
                Path
              }
            }
          }
        }
      }
    `)
    // For each path, create page and choose a template.
    // values in context Object are available in that page's query
    result.data.allAirtable.edges.forEach(({ node }) => {
      const isPage = node.table === 'Pages'
      createPage({
        path: node.data.Path,
        component: isPage
          ? path.resolve(`./src/templates/page-template.js`)
          : path.resolve(`./src/templates/section-template.js`),
        context: {
          Path: node.data.Path,
        },
      })
    })
    resolve()
  })
}