diff --git a/gatsby-config.ts b/gatsby-config.ts index 9f7464f5..8dbe4f51 100644 --- a/gatsby-config.ts +++ b/gatsby-config.ts @@ -19,6 +19,8 @@ const config: GatsbyConfig = { "gatsby-plugin-mdx", "gatsby-plugin-postcss", "gatsby-plugin-readtime-nz", + "gatsby-plugin-mdx-source-name", + `gatsby-transformer-source-split`, { resolve: "gatsby-source-filesystem", options: { diff --git a/package.json b/package.json index c8336185..23be8876 100644 --- a/package.json +++ b/package.json @@ -26,6 +26,7 @@ "gatsby": "^5.10.0", "gatsby-plugin-image": "^3.10.0", "gatsby-plugin-mdx": "^5.10.0", + "gatsby-plugin-mdx-source-name": "^1.0.1", "gatsby-plugin-sharp": "^5.10.0", "gatsby-plugin-sitemap": "^6.10.0", "gatsby-remark-highlight-code": "^3.3.0", diff --git a/plugins/gatsby-transformer-source-split/gatsby-node.ts b/plugins/gatsby-transformer-source-split/gatsby-node.ts new file mode 100644 index 00000000..fe17b5f4 --- /dev/null +++ b/plugins/gatsby-transformer-source-split/gatsby-node.ts @@ -0,0 +1,119 @@ +import { GatsbyNode, NodeInput } from "gatsby"; +import { IMdxNode } from "gatsby-plugin-mdx/dist/types"; +import { FileSystemNode } from "gatsby-source-filesystem"; + +type SourceTypes = "blog" | "author"; + +interface BlogFrontmatter { + title: string; + slug: string; + date: Date; + tags: string[]; + hero_image_alt: string; + hero_image_link: string; + hero_image_credit_link: string; + hero_image_credit: string; + hero_image: FileSystemNode; +} + +interface MdxNodeWithSource extends IMdxNode { + fields: { source: SourceTypes; readingTime: unknown }; + frontmatter: T; +} + +export const createSchemaCustomization: GatsbyNode["createSchemaCustomization"] = + ({ actions, schema }) => { + const { createTypes } = actions; + + const typeDefs = ` + type HeroImageData { + alt: String! + link: String! + credit: String! + creditLink: String! + } + + type Blog implements Node { + title: String! + slug: String! + date: Date! + tags: [String!]! + heroImage: HeroImageData! + excerpt: String + } + `; + + createTypes(typeDefs); + }; + +export const shouldOnCreateNode: GatsbyNode< + MdxNodeWithSource +>["shouldOnCreateNode"] = ({ node }) => { + return node.internal.type === "Mdx" && !!node.parent; +}; + +export const onCreateNode: GatsbyNode["onCreateNode"] = async ({ + node, + actions, + createNodeId, + getNode, + cache, +}) => { + const createBlogNode = async ( + node: MdxNodeWithSource + ): Promise => { + return { + id: createNodeId(`${node.id} >>> blog`), + children: [], + parent: node.id, + internal: { + type: "Blog", + contentDigest: node.internal.contentDigest, + contentFilePath: node.internal.contentFilePath, + }, + title: node.frontmatter.title, + slug: node.frontmatter.slug, + date: node.frontmatter.date, + tags: node.frontmatter.tags, + // TODO: Excerpt seems to be generated lazily on query time, so we need to re-map a resolver later + excerpt: "", + readingTime: node.fields.readingTime, + heroImage: { + alt: node.frontmatter.hero_image_alt, + link: node.frontmatter.hero_image_link, + creditLink: node.frontmatter.hero_image_credit_link, + credit: node.frontmatter.hero_image_credit, + image: node.frontmatter.hero_image as FileSystemNode, + }, + }; + }; + + const nodeCreator: ( + sourceType: SourceTypes, + node: IMdxNode + ) => Promise = async (sourceType, node) => { + switch (sourceType) { + case "blog": + return createBlogNode(node as MdxNodeWithSource); + + default: + throw new Error(`Unknown source type ${sourceType}`); + } + }; + + if (!node.parent) { + throw new Error("Node has no parent"); + } + + const { createNode, createParentChildLink } = actions; + // eslint-disable-next-line @typescript-eslint/no-non-null-assertion + const { sourceInstanceName: source } = getNode( + node.parent + )! as FileSystemNode; + + const newNode = await nodeCreator(source as unknown as SourceTypes, node); + + createNode(newNode); + createParentChildLink({ parent: node, child: newNode }); + await cache.set(`mdxToSplit-${node.internal.contentFilePath}`, newNode); +}; diff --git a/plugins/gatsby-transformer-source-split/package.json b/plugins/gatsby-transformer-source-split/package.json new file mode 100644 index 00000000..2e0651b3 --- /dev/null +++ b/plugins/gatsby-transformer-source-split/package.json @@ -0,0 +1,5 @@ +{ + "name": "gatsby-transformer-source-split", + "version": "1.0.0", + "private": true +} diff --git a/src/components/articlepreview.tsx b/src/components/articlepreview.tsx index 1a689894..e5d09b10 100644 --- a/src/components/articlepreview.tsx +++ b/src/components/articlepreview.tsx @@ -11,9 +11,9 @@ interface PreviewProps { } export const Preview = ({ node }: PreviewProps) => { - const image = getImage(node.frontmatter.hero_image as ImageDataLike); + const image = getImage(node.heroImage.image as ImageDataLike); - const to = `/${node.frontmatter.date}-${node.frontmatter.slug}`; + const to = `/${node.date}-${node.slug}`; const teaser = image ? (
@@ -21,7 +21,7 @@ export const Preview = ({ node }: PreviewProps) => {
@@ -29,7 +29,7 @@ export const Preview = ({ node }: PreviewProps) => {
); - const tags = node.frontmatter.tags?.map((tag) => + const tags = node.tags.map((tag) => tag ? (
  • @@ -38,8 +38,8 @@ export const Preview = ({ node }: PreviewProps) => { ); const text = - node.fields && node.fields.readingTime && node.fields.readingTime.text - ? node.fields.readingTime.text + node.readingTime && node.readingTime.text + ? node.readingTime.text : undefined; const readingTime = text ? `; ${text}` : undefined; @@ -48,10 +48,10 @@ export const Preview = ({ node }: PreviewProps) => { {teaser}

    - {node.frontmatter.title} + {node.title}

    - Posted: {node.frontmatter.date} + Posted: {node.date} {readingTime}

    {node.excerpt}

    @@ -64,24 +64,22 @@ export const Preview = ({ node }: PreviewProps) => { }; export const query = graphql` - fragment PreviewData on Mdx { + fragment PreviewData on Blog { + date excerpt - fields { - readingTime { - text - } - } - frontmatter { - date - title - slug - tags - hero_image_alt - hero_image { + slug + tags + title + heroImage { + alt + image { childImageSharp { gatsbyImageData(width: 200) } } } + readingTime { + text + } } `; diff --git a/src/gatsby-types.d.ts b/src/gatsby-types.d.ts index feaf66fd..87bcc377 100644 --- a/src/gatsby-types.d.ts +++ b/src/gatsby-types.d.ts @@ -34,6 +34,185 @@ type AVIFOptions = { readonly speed: InputMaybe; }; +type Blog = Node & { + readonly children: ReadonlyArray; + readonly date: Scalars['Date']; + readonly excerpt: Maybe; + readonly gatsbyPath: Maybe; + readonly heroImage: HeroImageData; + readonly id: Scalars['ID']; + readonly internal: Internal; + readonly parent: Maybe; + readonly readingTime: Maybe; + readonly slug: Scalars['String']; + readonly tags: ReadonlyArray; + readonly title: Scalars['String']; +}; + + +type Blog_gatsbyPathArgs = { + filePath: InputMaybe; +}; + +type BlogConnection = { + readonly distinct: ReadonlyArray; + readonly edges: ReadonlyArray; + readonly group: ReadonlyArray; + readonly max: Maybe; + readonly min: Maybe; + readonly nodes: ReadonlyArray; + readonly pageInfo: PageInfo; + readonly sum: Maybe; + readonly totalCount: Scalars['Int']; +}; + + +type BlogConnection_distinctArgs = { + field: BlogFieldSelector; +}; + + +type BlogConnection_groupArgs = { + field: BlogFieldSelector; + limit: InputMaybe; + skip: InputMaybe; +}; + + +type BlogConnection_maxArgs = { + field: BlogFieldSelector; +}; + + +type BlogConnection_minArgs = { + field: BlogFieldSelector; +}; + + +type BlogConnection_sumArgs = { + field: BlogFieldSelector; +}; + +type BlogEdge = { + readonly next: Maybe; + readonly node: Blog; + readonly previous: Maybe; +}; + +type BlogFieldSelector = { + readonly children: InputMaybe; + readonly date: InputMaybe; + readonly excerpt: InputMaybe; + readonly gatsbyPath: InputMaybe; + readonly heroImage: InputMaybe; + readonly id: InputMaybe; + readonly internal: InputMaybe; + readonly parent: InputMaybe; + readonly readingTime: InputMaybe; + readonly slug: InputMaybe; + readonly tags: InputMaybe; + readonly title: InputMaybe; +}; + +type BlogFilterInput = { + readonly children: InputMaybe; + readonly date: InputMaybe; + readonly excerpt: InputMaybe; + readonly gatsbyPath: InputMaybe; + readonly heroImage: InputMaybe; + readonly id: InputMaybe; + readonly internal: InputMaybe; + readonly parent: InputMaybe; + readonly readingTime: InputMaybe; + readonly slug: InputMaybe; + readonly tags: InputMaybe; + readonly title: InputMaybe; +}; + +type BlogFilterListInput = { + readonly elemMatch: InputMaybe; +}; + +type BlogGroupConnection = { + readonly distinct: ReadonlyArray; + readonly edges: ReadonlyArray; + readonly field: Scalars['String']; + readonly fieldValue: Maybe; + readonly group: ReadonlyArray; + readonly max: Maybe; + readonly min: Maybe; + readonly nodes: ReadonlyArray; + readonly pageInfo: PageInfo; + readonly sum: Maybe; + readonly totalCount: Scalars['Int']; +}; + + +type BlogGroupConnection_distinctArgs = { + field: BlogFieldSelector; +}; + + +type BlogGroupConnection_groupArgs = { + field: BlogFieldSelector; + limit: InputMaybe; + skip: InputMaybe; +}; + + +type BlogGroupConnection_maxArgs = { + field: BlogFieldSelector; +}; + + +type BlogGroupConnection_minArgs = { + field: BlogFieldSelector; +}; + + +type BlogGroupConnection_sumArgs = { + field: BlogFieldSelector; +}; + +type BlogReadingTime = { + readonly minutes: Maybe; + readonly text: Maybe; + readonly words: Maybe; +}; + +type BlogReadingTimeFieldSelector = { + readonly minutes: InputMaybe; + readonly text: InputMaybe; + readonly words: InputMaybe; +}; + +type BlogReadingTimeFilterInput = { + readonly minutes: InputMaybe; + readonly text: InputMaybe; + readonly words: InputMaybe; +}; + +type BlogReadingTimeSortInput = { + readonly minutes: InputMaybe; + readonly text: InputMaybe; + readonly words: InputMaybe; +}; + +type BlogSortInput = { + readonly children: InputMaybe; + readonly date: InputMaybe; + readonly excerpt: InputMaybe; + readonly gatsbyPath: InputMaybe; + readonly heroImage: InputMaybe; + readonly id: InputMaybe; + readonly internal: InputMaybe; + readonly parent: InputMaybe; + readonly readingTime: InputMaybe; + readonly slug: InputMaybe; + readonly tags: InputMaybe; + readonly title: InputMaybe; +}; + type BlurredOptions = { /** Force the output format for the low-res preview. Default is to use the same format as the input. You should rarely need to change this */ readonly toFormat: InputMaybe; @@ -730,6 +909,38 @@ type GatsbyImagePlaceholder = | 'none' | 'tracedSVG'; +type HeroImageData = { + readonly alt: Scalars['String']; + readonly credit: Scalars['String']; + readonly creditLink: Scalars['String']; + readonly image: Maybe; + readonly link: Scalars['String']; +}; + +type HeroImageDataFieldSelector = { + readonly alt: InputMaybe; + readonly credit: InputMaybe; + readonly creditLink: InputMaybe; + readonly image: InputMaybe; + readonly link: InputMaybe; +}; + +type HeroImageDataFilterInput = { + readonly alt: InputMaybe; + readonly credit: InputMaybe; + readonly creditLink: InputMaybe; + readonly image: InputMaybe; + readonly link: InputMaybe; +}; + +type HeroImageDataSortInput = { + readonly alt: InputMaybe; + readonly credit: InputMaybe; + readonly creditLink: InputMaybe; + readonly image: InputMaybe; + readonly link: InputMaybe; +}; + type ImageCropFocus = | 17 | 0 @@ -1247,11 +1458,14 @@ type JSONQueryOperatorInput = { type Mdx = Node & { readonly body: Maybe; + /** Returns the first child node of type Blog or null if there are no children of given type on this node */ + readonly childBlog: Maybe; readonly children: ReadonlyArray; + /** Returns all children nodes filtered by type Blog */ + readonly childrenBlog: Maybe>>; readonly excerpt: Maybe; readonly fields: Maybe; readonly frontmatter: MdxFrontmatter; - readonly gatsbyPath: Maybe; readonly id: Scalars['ID']; readonly internal: Internal; readonly parent: Maybe; @@ -1264,11 +1478,6 @@ type Mdx_excerptArgs = { }; -type Mdx_gatsbyPathArgs = { - filePath: InputMaybe; -}; - - type Mdx_tableOfContentsArgs = { maxDepth: InputMaybe; }; @@ -1320,11 +1529,12 @@ type MdxEdge = { type MdxFieldSelector = { readonly body: InputMaybe; + readonly childBlog: InputMaybe; readonly children: InputMaybe; + readonly childrenBlog: InputMaybe; readonly excerpt: InputMaybe; readonly fields: InputMaybe; readonly frontmatter: InputMaybe; - readonly gatsbyPath: InputMaybe; readonly id: InputMaybe; readonly internal: InputMaybe; readonly parent: InputMaybe; @@ -1333,14 +1543,17 @@ type MdxFieldSelector = { type MdxFields = { readonly readingTime: Maybe; + readonly source: Maybe; }; type MdxFieldsFieldSelector = { readonly readingTime: InputMaybe; + readonly source: InputMaybe; }; type MdxFieldsFilterInput = { readonly readingTime: InputMaybe; + readonly source: InputMaybe; }; type MdxFieldsReadingTime = { @@ -1369,15 +1582,17 @@ type MdxFieldsReadingTimeSortInput = { type MdxFieldsSortInput = { readonly readingTime: InputMaybe; + readonly source: InputMaybe; }; type MdxFilterInput = { readonly body: InputMaybe; + readonly childBlog: InputMaybe; readonly children: InputMaybe; + readonly childrenBlog: InputMaybe; readonly excerpt: InputMaybe; readonly fields: InputMaybe; readonly frontmatter: InputMaybe; - readonly gatsbyPath: InputMaybe; readonly id: InputMaybe; readonly internal: InputMaybe; readonly parent: InputMaybe; @@ -1491,11 +1706,12 @@ type MdxGroupConnection_sumArgs = { type MdxSortInput = { readonly body: InputMaybe; + readonly childBlog: InputMaybe; readonly children: InputMaybe; + readonly childrenBlog: InputMaybe; readonly excerpt: InputMaybe; readonly fields: InputMaybe; readonly frontmatter: InputMaybe; - readonly gatsbyPath: InputMaybe; readonly id: InputMaybe; readonly internal: InputMaybe; readonly parent: InputMaybe; @@ -1571,6 +1787,7 @@ type PotraceTurnPolicy = | 'white'; type Query = { + readonly allBlog: BlogConnection; readonly allDirectory: DirectoryConnection; readonly allFile: FileConnection; readonly allImageSharp: ImageSharpConnection; @@ -1580,6 +1797,7 @@ type Query = { readonly allSiteFunction: SiteFunctionConnection; readonly allSitePage: SitePageConnection; readonly allSitePlugin: SitePluginConnection; + readonly blog: Maybe; readonly directory: Maybe; readonly file: Maybe; readonly imageSharp: Maybe; @@ -1592,6 +1810,14 @@ type Query = { }; +type Query_allBlogArgs = { + filter: InputMaybe; + limit: InputMaybe; + skip: InputMaybe; + sort: InputMaybe>>; +}; + + type Query_allDirectoryArgs = { filter: InputMaybe; limit: InputMaybe; @@ -1664,6 +1890,22 @@ type Query_allSitePluginArgs = { }; +type Query_blogArgs = { + children: InputMaybe; + date: InputMaybe; + excerpt: InputMaybe; + gatsbyPath: InputMaybe; + heroImage: InputMaybe; + id: InputMaybe; + internal: InputMaybe; + parent: InputMaybe; + readingTime: InputMaybe; + slug: InputMaybe; + tags: InputMaybe; + title: InputMaybe; +}; + + type Query_directoryArgs = { absolutePath: InputMaybe; accessTime: InputMaybe; @@ -1764,11 +2006,12 @@ type Query_imageSharpArgs = { type Query_mdxArgs = { body: InputMaybe; + childBlog: InputMaybe; children: InputMaybe; + childrenBlog: InputMaybe; excerpt: InputMaybe; fields: InputMaybe; frontmatter: InputMaybe; - gatsbyPath: InputMaybe; id: InputMaybe; internal: InputMaybe; parent: InputMaybe; @@ -2645,12 +2888,12 @@ type BlogPostByIdQueryVariables = Exact<{ }>; -type BlogPostByIdQuery = { readonly mdx: { readonly frontmatter: { readonly title: string, readonly date: string, readonly tags: ReadonlyArray, readonly hero_image_alt: string, readonly hero_image_credit_link: string | null, readonly hero_image_credit: string | null, readonly hero_image_link: string, readonly hero_image: { readonly childImageSharp: { readonly gatsbyImageData: import('gatsby-plugin-image').IGatsbyImageData } | null } | null } } | null }; +type BlogPostByIdQuery = { readonly blog: { readonly tags: ReadonlyArray, readonly date: string, readonly title: string, readonly heroImage: { readonly link: string, readonly credit: string, readonly alt: string, readonly image: { readonly childImageSharp: { readonly gatsbyImageData: import('gatsby-plugin-image').IGatsbyImageData } | null } | null } } | null }; type BlogPostsQueryVariables = Exact<{ [key: string]: never; }>; -type BlogPostsQuery = { readonly allMdx: { readonly nodes: ReadonlyArray<{ readonly id: string, readonly excerpt: string | null, readonly fields: { readonly readingTime: { readonly text: string | null } | null } | null, readonly frontmatter: { readonly date: string, readonly title: string, readonly slug: string, readonly tags: ReadonlyArray, readonly hero_image_alt: string, readonly hero_image: { readonly childImageSharp: { readonly gatsbyImageData: import('gatsby-plugin-image').IGatsbyImageData } | null } | null } }> } }; +type BlogPostsQuery = { readonly allBlog: { readonly nodes: ReadonlyArray<{ readonly id: string, readonly date: string, readonly excerpt: string | null, readonly slug: string, readonly tags: ReadonlyArray, readonly title: string, readonly heroImage: { readonly alt: string, readonly image: { readonly childImageSharp: { readonly gatsbyImageData: import('gatsby-plugin-image').IGatsbyImageData } | null } | null }, readonly readingTime: { readonly text: string | null } | null }> } }; type FetchTitleQueryVariables = Exact<{ [key: string]: never; }>; @@ -2683,7 +2926,7 @@ type GatsbyImageSharpFluid_withWebp_tracedSVGFragment = { readonly tracedSVG: st type GatsbyImageSharpFluidLimitPresentationSizeFragment = { readonly maxHeight: number, readonly maxWidth: number }; -type PreviewDataFragment = { readonly excerpt: string | null, readonly fields: { readonly readingTime: { readonly text: string | null } | null } | null, readonly frontmatter: { readonly date: string, readonly title: string, readonly slug: string, readonly tags: ReadonlyArray, readonly hero_image_alt: string, readonly hero_image: { readonly childImageSharp: { readonly gatsbyImageData: import('gatsby-plugin-image').IGatsbyImageData } | null } | null } }; +type PreviewDataFragment = { readonly date: string, readonly excerpt: string | null, readonly slug: string, readonly tags: ReadonlyArray, readonly title: string, readonly heroImage: { readonly alt: string, readonly image: { readonly childImageSharp: { readonly gatsbyImageData: import('gatsby-plugin-image').IGatsbyImageData } | null } | null }, readonly readingTime: { readonly text: string | null } | null }; type SiteTitleQueryVariables = Exact<{ [key: string]: never; }>; @@ -2700,7 +2943,7 @@ type TagInfoQueryVariables = Exact<{ }>; -type TagInfoQuery = { readonly allMdx: { readonly totalCount: number, readonly edges: ReadonlyArray<{ readonly node: { readonly id: string, readonly excerpt: string | null, readonly fields: { readonly readingTime: { readonly text: string | null } | null } | null, readonly frontmatter: { readonly date: string, readonly title: string, readonly slug: string, readonly tags: ReadonlyArray, readonly hero_image_alt: string, readonly hero_image: { readonly childImageSharp: { readonly gatsbyImageData: import('gatsby-plugin-image').IGatsbyImageData } | null } | null } } }> } }; +type TagInfoQuery = { readonly allBlog: { readonly totalCount: number, readonly edges: ReadonlyArray<{ readonly node: { readonly id: string, readonly date: string, readonly excerpt: string | null, readonly slug: string, readonly tags: ReadonlyArray, readonly title: string, readonly heroImage: { readonly alt: string, readonly image: { readonly childImageSharp: { readonly gatsbyImageData: import('gatsby-plugin-image').IGatsbyImageData } | null } | null }, readonly readingTime: { readonly text: string | null } | null } }> } }; type TagListQueryVariables = Exact<{ [key: string]: never; }>; diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 8e22c417..3f45581e 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -6,12 +6,12 @@ import { ArticlePreview, Layout, Seo } from "~components"; type BlogPageProps = PageProps; -type BlogPostNode = Queries.BlogPostsQuery["allMdx"]["nodes"][0]; +type BlogPostNode = Queries.BlogPostsQuery["allBlog"]["nodes"][0]; const BlogPage = ({ data }: BlogPageProps) => { return ( - {data.allMdx.nodes.map((node: BlogPostNode) => ( + {data.allBlog.nodes.map((node: BlogPostNode) => ( ))} @@ -20,7 +20,7 @@ const BlogPage = ({ data }: BlogPageProps) => { export const query = graphql` query BlogPosts { - allMdx(sort: { frontmatter: { date: DESC } }) { + allBlog(sort: { date: DESC }) { nodes { id ...PreviewData diff --git a/src/pages/{mdx.frontmatter__date}-{mdx.frontmatter__slug}/index.tsx b/src/pages/{blog.date}-{blog.slug}/index.tsx similarity index 79% rename from src/pages/{mdx.frontmatter__date}-{mdx.frontmatter__slug}/index.tsx rename to src/pages/{blog.date}-{blog.slug}/index.tsx index 0615cee1..aece4313 100644 --- a/src/pages/{mdx.frontmatter__date}-{mdx.frontmatter__slug}/index.tsx +++ b/src/pages/{blog.date}-{blog.slug}/index.tsx @@ -11,11 +11,11 @@ type BlogPostProps = React.PropsWithChildren< >; const BlogPost = ({ data, children }: BlogPostProps) => { - if (!data.mdx) { + if (!data.blog) { throw new Error("No MDX data"); } - const image = getImage(data.mdx.frontmatter.hero_image as ImageDataLike); + const image = getImage(data.blog.heroImage.image as ImageDataLike); // TODO: Make this a component const hero = image ? ( @@ -23,7 +23,7 @@ const BlogPost = ({ data, children }: BlogPostProps) => {

    { d="M19 3h-1V1h-2v2H8V1H6v2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h5v-2H5V8h14v1h2V5a2 2 0 0 0-2-2m2.7 10.35l-1 1l-2.05-2l1-1c.2-.21.54-.22.77 0l1.28 1.28c.19.2.19.52 0 .72M12 18.94l6.07-6.06l2.05 2L14.06 21H12v-2.06Z" /> - {data.mdx.frontmatter.date} + {data.blog.date}

    - + { d="M9 2L7.17 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2h-3.17L15 2H9zm3 15c-2.76 0-5-2.24-5-5s2.24-5 5-5s5 2.24 5 5s-2.24 5-5 5z" /> - {data.mdx.frontmatter.hero_image_credit} + {data.blog.heroImage.credit}

    ) : null; - const tags = data.mdx.frontmatter.tags.map((tag) => ( + const tags = data.blog.tags.map((tag: string) => ( )); return ( - + {hero}
    {tags} @@ -82,16 +82,15 @@ const BlogPost = ({ data, children }: BlogPostProps) => { export const query = graphql` query BlogPostById($id: String) { - mdx(id: { eq: $id }) { - frontmatter { - title - date - tags - hero_image_alt - hero_image_credit_link - hero_image_credit - hero_image_link - hero_image { + blog(id: { eq: $id }) { + tags + date + title + heroImage { + link + credit + alt + image { childImageSharp { gatsbyImageData(width: 800) } @@ -102,11 +101,11 @@ export const query = graphql` `; export const Head = ({ data }: BlogPostProps) => { - if (!data.mdx) { - throw new Error("No MDX data"); + if (!data.blog) { + throw new Error("No Blog data"); } - return ; + return ; }; export default BlogPost; diff --git a/src/templates/tags.tsx b/src/templates/tags.tsx index 0d7b1782..bdca8895 100644 --- a/src/templates/tags.tsx +++ b/src/templates/tags.tsx @@ -54,7 +54,7 @@ export const Tag: TagComponent = ({ name, ...props }) => { export const Tags = ({ pageContext, data }: TagsProps) => { const { tag } = pageContext; - const { edges, totalCount } = data.allMdx; + const { edges, totalCount } = data.allBlog; const isSingular = totalCount === 1; const isOrAre = isSingular ? "is" : "are"; @@ -81,11 +81,7 @@ export const Tags = ({ pageContext, data }: TagsProps) => { export const pageQuery = graphql` query TagInfo($tag: String) { - allMdx( - limit: 2000 - sort: { frontmatter: { date: DESC } } - filter: { frontmatter: { tags: { in: [$tag] } } } - ) { + allBlog(filter: { tags: { in: [$tag] } }, sort: { date: DESC }) { totalCount edges { node { diff --git a/tsconfig.json b/tsconfig.json index 6b5a72e0..288c83cc 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -15,7 +15,8 @@ "esModuleInterop": true, "forceConsistentCasingInFileNames": true, "strict": true, - "skipLibCheck": true + "skipLibCheck": true, + "sourceMap": true }, "include": [ "./src/**/*", diff --git a/yarn.lock b/yarn.lock index e1f860a8..e80cc39b 100644 --- a/yarn.lock +++ b/yarn.lock @@ -6397,6 +6397,11 @@ gatsby-plugin-image@^3.10.0: objectFitPolyfill "^2.3.5" prop-types "^15.8.1" +gatsby-plugin-mdx-source-name@^1.0.1: + version "1.0.1" + resolved "https://registry.yarnpkg.com/gatsby-plugin-mdx-source-name/-/gatsby-plugin-mdx-source-name-1.0.1.tgz#729615aac57a55bb61e5c5df46067f64ea185cb7" + integrity sha512-D8DAOI84ZoWmx3c6BFYuKEnQc+Y1IU+VMhTJZbIOcKbQaoROKx66TkvjLbdHSlrpQ6Skozmi+b6NNrwIyZunzw== + gatsby-plugin-mdx@^5.10.0: version "5.11.0" resolved "https://registry.yarnpkg.com/gatsby-plugin-mdx/-/gatsby-plugin-mdx-5.11.0.tgz#4cff5c28ab8facd1f6a89f2a79e754f6c81670b3"