@maiertech/gatsby-theme-pages-core

A Gatsby theme to add a Page type to Gatsby sites.

Options

Option	Default	Description
basePath	/	Basepath for deployments at locations other than root.
contentPath	content/pages	Location of MDX files with pages. If pages use images, pages can be placed in a sub-directory as index.mdx together with its assets.
fullRelativePath	false	Set to true to include full path relative to contentPath in path of generated pages.
mdxOtherwiseConfigured	false	Set this flag true if gatsby-plugin-mdx is already configured for your site.

Frontmatter

Key	Required	Description
title	✓	Post title, which will be slugified.
slug		Override slugified title.
description	✓	Description for SEO and previews.
images		Array of images with src (relative path to image), optional title and mandatory alt text. Images can be embedded into MDX.
canonical_url		Canonical URL for SEO.

Schema customization

Page interface

Field	Type	Description
id	ID!	Gatsby node GUID.
title	String!	From frontmatter.
description	String!	From frontmatter.
images	[PageImage!]	Images that can be embedded into a page.
body	String!	MDX body.
path	String!	Page path.
canonicalUrl	String	Canonical URL for SEO.

Type MdxPage implements Page. If you prefer to use a data source other than MDX files, you can write a child theme that uses the Page interface.

PageImage type

Field	Type	Description
src	File!	Relative path to image.
title	String	Image title.
alt	String!	Image alt text.

Images in pages

This theme assumes that you will use gatsby-plugin-image to render images in MDX files. Since StaticImage does not work inside MDX files, you have to declare images in the frontmatter with the images prop.

When you shadow page.js, you need to create an images array with gatsbyImageData objects and provide the images array as prop to MDXRenderer. You can then access and render these images with GatsbyImage inside MDX files. This is not ideal and it is intended as workaround until StaticImage can be used inside MDX files.

The downside of dynamic images is that fragment page-fragment.js contains a hard-wired query for dynamic images as constrained images. Therefore, you cannot modify image options and have to go with what the fragment gives you.