gatsby-theme-matix-core

A Matix theme has a set of predefined features that all Matix websites & applications have.

1. Creates the graphQL MatixNode that can be extended
2. Registers matix plugins for MDX support & image extractions/synchronization to azure which creates MatixAzureImageNode
3. Defines a set of interfaces that all child UI theme must at a minimum respect. This will allow easy them switching when needed.
4. Defines the Netlify-CMS that works with a set of defined interfaces. For specific use cases, cms can be defined in the application itself.

With our own schema in place, we can easily query for all the data we need. Also, Matix nodes are children of Mdx node

query MyQuery {
  allMatixAzureImage {
    edges {
      node {
        blogImages {
          publicURL
        }
        parent {
          internal {
            type
          }
          id
        }
      }
    }
  }
  allMatix {
    edges {
      node {
        id
        frontmatter {
          eagerImages
          lazyImages
          blogImages
        }
      }
    }
  }
}
query MyQuery {
  allMatixAzureImage {
    edges {
      node {
        blogImages {
          publicURL
        }
        parent {
          internal {
            type
          }
          id
        }
      }
    }
  }
query allMatix {
    edges {
      node {
        id
        frontmatter {
          eagerImages
          lazyImages
          blogImages
        }
      }
    }
  }
}

You can then compose from your application with different theme. Typically a Matix application is configured this way:

// In gatsby-config.js
// Note, for internal projects, we resolve to the local path directly to facilite development and debugging but for external projetcts, we can use the npm published package since all of our themes and plugins are published
const tailwindConfig = require('./config.tailwind.config.js');
module.exports = {
    plugins:[

    {
      resolve: require.resolve(`./index.js`, {
        paths: ['../../../libs/gatsby/theme-matix-core'],
      }),
      options: {
        imageExtraction: {
          eagerImages: ['frontmatter.image.url', 'frontmatter.sections.slides.image.url'],
          lazyImages: ['frontmatter.sections.images.url'],
          blogImages: ['frontmatter.sections.bodyAst'],
        },
        parse: (value)=>[String] , // extensibility point
      },
    },
    {
     '@matixinc/theme-matix-tailwind', // for external projects or require.resolve for internal
      options: {
        config:JSON.parse(tailwindConfig)
      },
    },
    ]
}