I am using the Gatsby theme @lekoarts/gatsby-theme-minimal-blog for my own blog. The theme also has a parent core theme @lekoarts/gatsby-theme-minimal-blog-core which is making use of the gatsby-plugin-mdx plugin.
In my own blog I'd like to change the plugin gatsby-plugin-mdx's options such as setting
options: {
maxWidth: 960,
quality: 90,
linkImagesToOriginal: true, // set to true from false
}
I tried importing gatsby-plugin-mdx in my own blog's gatsby-config.js but it didn't work I'm getting errors parsing existing .mdx files.
Also trying to shadow the gatsby-config.js file of the core theme by creating src/@lekoarts/gatsby-theme-minimal-blog-core/gatsby-config.js with the same content but linkImagesToOriginal: true has no effects.
How can I change a parent theme's plugin's options?
The gatsby-config.js file of the core theme is as follows:
const withDefaults = require(`./utils/default-options`)
module.exports = (themeOptions) => {
const options = withDefaults(themeOptions)
const { mdx = true } = themeOptions
return {
plugins: [
{
resolve: `gatsby-source-filesystem`,
options: {
name: options.postsPath,
path: options.postsPath,
},
},
{
resolve: `gatsby-source-filesystem`,
options: {
name: options.pagesPath,
path: options.pagesPath,
},
},
mdx && {
resolve: `gatsby-plugin-mdx`,
options: {
extensions: [`.mdx`, `.md`],
gatsbyRemarkPlugins: [
{
resolve: `gatsby-remark-images`,
options: {
maxWidth: 960,
quality: 90,
linkImagesToOriginal: false, // want to set this to true
},
},
],
plugins: [
{
resolve: `gatsby-remark-images`,
options: {
maxWidth: 960,
quality: 90,
linkImagesToOriginal: false,
},
},
],
},
},
`gatsby-transformer-sharp`,
`gatsby-plugin-sharp`,
`gatsby-plugin-typescript`,
].filter(Boolean),
}
}
gatsby-config.js of my blog
require(`dotenv`).config({
path: `.env`,
})
const newsletterFeed = require(`./src/@lekoarts/gatsby-theme-minimal-blog/utils/newsletterFeed`)
const shouldAnalyseBundle = process.env.ANALYSE_BUNDLE
module.exports = {
siteMetadata: {
siteTitle: 'Kaan Uzdoğan',
siteTitleAlt: `Kaan Uzdoğan - Personal Site`,
siteHeadline: 'Kaan Uzdoğan - Personal Site',
siteUrl: `https://kaanuzdogan.com`,
author: `@kaanuzdogan`,
siteLanguage: 'en',
siteImage: '/banner.jpg',
siteDescription: 'Personal Blog and Website of Kaan Uzdogan',
},
plugins: [
{
resolve: `@lekoarts/gatsby-theme-minimal-blog`,
// See the theme's README for all available options
options: {
feedTitle: 'Kaan Uzdoğan\'s Personal Site',
navigation: [
{
title: `Blog`,
slug: `/blog`,
},
{
title: `About`,
slug: `/about`,
},
],
externalLinks: [
{
name: `Twitter`,
url: `https://twitter.com/kaanuzdogan`,
},
{
name: `Instagram`,
url: `https://www.instagram.com/kuzdogan`,
},
{
name: `Github`,
url: `https://github.com/kuzdogan`
}
],
formatString: 'DD MMMM YYYY'
},
},
{
resolve: `gatsby-plugin-feed`,
options: newsletterFeed('Kaan Uzdoğan\'s Personal Site'),
},
{
resolve: `gatsby-plugin-disqus`,
options: {
shortname: `kaanuzdogan`
}
},
{
resolve: `gatsby-plugin-google-gtag`,
options: {
trackingIds: [
process.env.GOOGLE_MEASUREMENT_ID, // Google Analytics / GA
],
},
},
`gatsby-plugin-sitemap`,
{
resolve: `gatsby-plugin-manifest`,
options: {
name: `minimal-blog - @lekoarts/gatsby-theme-minimal-blog`,
short_name: `minimal-blog`,
description: `Typography driven, feature-rich blogging theme with minimal aesthetics. Includes tags/categories support and extensive features for code blocks such as live preview, line numbers, and code highlighting.`,
start_url: `/`,
background_color: `#fff`,
theme_color: `#6B46C1`,
display: `standalone`,
icons: [
{
src: `/android-chrome-192x192.png`,
sizes: `192x192`,
type: `image/png`,
},
{
src: `/android-chrome-512x512.png`,
sizes: `512x512`,
type: `image/png`,
},
],
},
},
`gatsby-plugin-offline`,
`gatsby-plugin-netlify`,
shouldAnalyseBundle && {
resolve: `gatsby-plugin-webpack-bundle-analyser-v2`,
options: {
analyzerMode: `static`,
reportFilename: `_bundle.html`,
openAnalyzer: false,
},
},
{
resolve: 'gatsby-plugin-mailchimp',
options: {
endpoint: '<hiding the endpoint url>',
timeout: 3500,
},
},
].filter(Boolean),
}
Try:
According to this guide from the great Jason Lengstorf the
gatsby-config.jsneeds to be turned into a function.I don't know what the
.filter(Boolean)is doing in this case, you can try removing it since I can't see where is defined.