I am creating a blog with Gatsbyjs.
The content is taken from contentful and the content type is markdown.
graphql is:
contentfulBlogPost(id: { eq: $id }) {
content {
childMdx {
body
}
}
}
The acquired body is passed to the following components.
const Markdown = ({ children }) => (
<div>
<MDXProvider>
<MDXRenderer>{children}</MDXRenderer>
</MDXProvider>
</div>
)
<Markdown>{data.contentfulBlogPost.content.childMdx.body}</Markdown>
gatsby-config is:
{
resolve: `gatsby-plugin-mdx`,
options: {
plugins: [
`gatsby-remark-images`,
`gatsby-remark-images-medium-zoom`
],
gatsbyRemarkPlugins: [
{
resolve: `gatsby-remark-images`,
options: {
maxWidth: 500,
linkImagesToOriginal: false,
},
},
{
resolve: `gatsby-remark-images-medium-zoom`,
options: {}
},
],
},
},
Medium-zoom does not work with this configuration.
Thank you in advance.
Related
Basically, every time that i create a TYPESCRIPT gatsby project, i get errors on the file gatsby-config.ts.
Errors are in bold font.
import type { GatsbyConfig } from "gatsby";
require('dotenv').config({
path: `.env.${process.env.NODE_ENV}`,
});
const strapiConfig = {
apiURL: process.env.STRAPI_API_URL,
accessToken: process.env.STRAPI_TOKEN,
collectionTypes: ['article', 'company', 'author'],
singleTypes: [],
};
const config: GatsbyConfig = {
siteMetadata: {
title: ``,
siteUrl: `https://www.yourdomain.tld`
},
plugins: ["gatsby-plugin-sass", {
resolve: 'gatsby-plugin-google-analytics',
options: {
"trackingId": "portfolio-vanny-1"
}
}, "gatsby-plugin-image", "gatsby-plugin-react-helmet", "gatsby-plugin-mdx", "gatsby-transformer-remark", "gatsby-plugin-sharp", "gatsby-transformer-sharp", {
resolve: 'gatsby-source-filesystem',
options: {
"name": "images",
"path": "./src/images/"
},
***__key: "images"***
}, {
resolve: 'gatsby-source-filesystem',
options: {
"name": "pages",
"path": "./src/pages/"
},
**__key: "pages"**
},
{
resolve: `gatsby-source-strapi`,
options: strapiConfig,
}]
};
export default config;
It seems that those errors doesnt affect anything on my project but its weird, i dont even touch the code and it throws me those errors.
I built this project from the basic default gatsby starter with the astronaut
I don't know what I'm doing wrong because this project is very similar in terms of it's gatsby-node and gatsby-config to another project of mine. This error repeatedly keeps looping in the console
TypeError: fmImagesToRelative is not a function
- gatsby-node.js:38 Object.exports.onCreateNode
/Users/Sam/Documents/Projects_and_Code/Web_Dexter_V2/gatsby-node.js:38:3
- api-runner-node.js:330 runAPI
[Web_Dexter_V2]/[gatsby]/src/utils/api-runner-node.js:330:22
- api-runner-node.js:440 Promise.catch.decorateEvent.pluginName
[Web_Dexter_V2]/[gatsby]/src/utils/api-runner-node.js:440:17
- From previous event:
- api-runner-node.js:440 Promise.catch.decorateEvent.pluginName
[Web_Dexter_V2]/[gatsby]/src/utils/api-runner-node.js:440:9
- From previous event:
- api-runner-node.js:439
[Web_Dexter_V2]/[gatsby]/src/utils/api-runner-node.js:439:14
- timers.js:456 processImmediate
internal/timers.js:456:21
- From previous event:
...
gatsby-node.js
const { createFilePath } = require(`gatsby-source-filesystem`)
const { fmImagesToRelative } = require('gatsby-remark-relative-images');
const path = require("path")
exports.createPages = async ({ actions: { createPage }, graphql }) => {
const postTemplate = path.resolve(`src/components/ArticlePage/index.tsx`)
const result = await graphql(`
{
allMarkdownRemark(
sort: { order: DESC, fields: [frontmatter___date] }
) {
edges {
node {
fields {
slug
}
}
}
}
}
`)
if (result.errors) {
return Promise.reject(result.errors)
}
result.data.allMarkdownRemark.edges.forEach(({ node }) => {
createPage({
path: `${node.fields.slug}`,
component: postTemplate,
})
})
}
exports.onCreateNode = ({ node, getNode, actions }) => {
fmImagesToRelative(node)
if (node.internal.type === `MarkdownRemark`)
actions.createNodeField({
node,
name: `slug`,
value: createFilePath({ node, getNode, basePath: `pages`, trailingSlash: true}),
})
}
gatsby-config.js
const path = require(`path`)
module.exports = {
siteMetadata: {
title: `Web Dexter | Saskatoon Website Design and Mobile App Design`,
description: `Web Dexter is a web design, and mobile app design company located in Saskatoon, SK. We also do logo design and graphic design. (306)-241-7019.`,
author: `Web Dexter Design`,
authorDescription: "Saskatoon Web and App Design Company",
themeColor: "#d2f5fb",
siteUrl: "https://webdexter.ca",
socialLinks: {
facebook: "/",
instagram: "/",
linkedin: "https://linkedin.com/company/web-dexter",
twitter: "/"
}
// image: "https://suddenlysask.com/static/54f3be73c004e26215a4a0cbf82c4524/ad85c/suddenly-saskatchewan-logo.webp"
},
plugins: [
{
resolve: `gatsby-source-filesystem`,
options: {
name: `images`,
path: `${__dirname}/src/assets/images`,
},
},
{
resolve: `gatsby-source-filesystem`,
options: {
path: `${__dirname}/content/markdown/`,
name: `markdown-pages`,
},
},
{
resolve: `gatsby-plugin-create-client-paths`,
options: { prefixes: [
`/contact/*`,
] },
},
{
resolve: `gatsby-plugin-manifest`,
options: {
name: `gatsby-starter-default`,
short_name: `starter`,
start_url: `/`,
background_color: `#663399`,
theme_color: `#663399`,
display: `minimal-ui`,
icon: `src/assets/images/gatsby-icon.png`, // This path is relative to the root of the site.
},
},
{
resolve: `gatsby-transformer-remark`,
options: {
plugins: [
'gatsby-remark-relative-images',
{
resolve: `gatsby-remark-images`,
options: {
backgroundColor: "transparent",
maxWidth: "800",
disableBgImageOnAlpha: true,
linkImagesToOriginal: false,
withWebp: true,
loading: "eager"
},
},
],
},
},
{
resolve: 'gatsby-plugin-root-import',
options: {
"components": path.join(__dirname, "src/components"),
"styles": path.join(__dirname, "src/assets/styles"),
"interfaces": path.join(__dirname, "src/interfaces"),
"data": path.join(__dirname, 'src/data'),
"pages": path.join(__dirname, 'src/pages'),
"svg": path.join(__dirname, "src/assets/images/svg"),
"hooks": path.join(__dirname, "src/hooks"),
"types": path.join(__dirname, "src/types")
}
},
`gatsby-transformer-sharp`,
`gatsby-plugin-sharp`,
`gatsby-plugin-typescript`,
`gatsby-plugin-react-helmet`,
`gatsby-plugin-sass`,
`gatsby-plugin-offline`,
`gatsby-plugin-sitemap`,
`gatsby-plugin-netlify`,
// `gatsby-plugin-preact`,
`gatsby-transformer-json`,
{
resolve: `gatsby-source-filesystem`,
options: {
name: `data`,
path: `${__dirname}/src/data`
}
},
{
resolve: 'gatsby-plugin-react-svg',
options: {
rule: {
include: /svg/
}
}
},
{
resolve: `gatsby-plugin-purgecss`,
options: {
// printRejected: true, // Print removed selectors and processed file names
purgeOnly: ['src/assets/styles', 'src/components','node_modules/'],
ignore: ['node_modules/'],
whitelist: [],
whitelistPatterns: []
}
},
],
}
It has something to do with gatsby-remark-relative-images: "^2.0.2", the problem stopped happening when using version ^0.3.0 instead of ^2.0.2 or when using "gatsby-remark-relative-images-v2": "^0.1.5", instead. This is noted on their github page
Has anyone used gatsby-remark-image-attributes? My image displays but the styling does not work.
"This plugin can handle already processed images (type: ‘html’), as long as the node object contains an attributes field and the value an tag." This is from the docs - not sure how to add an attributes field to the node which might be where I am messing up.
Here is my image inside a md file:
Here is my config (I am using it like in the example on it's page on the Gatsby site with gatsby-remark-images):
plugins: [
`gatsby-plugin-sharp`,
{
resolve: `gatsby-transformer-remark`,
options: {
plugins: [
{
resolve: `gatsby-remark-images`,
options: {
maxWidth: 1500,
quality: 100,
// wrapperStyle: 'margin-bottom:100px' **This also does not work for me
},
},
`remark-image-attributes`,
{
resolve: `gatsby-remark-image-attributes`,
options: {
styleAttributes: [`margin-bottom`],
},
}
],
},
},
`gatsby-transformer-sharp`,
Width gatsby-remark-image-attributes you also need to use remark-image-attributes plugin in your gatsby config for it to work
`gatsby-plugin-sharp`,
{
resolve: `gatsby-transformer-remark`,
options: {
plugins: [
{
resolve: `gatsby-remark-images`,
options: {
maxWidth: 1500,
quality: 100,
},
},
`remark-image-attributes`,
{
resolve: "gatsby-remark-image-attributes",
options: {
styleAttributes: [`margin-bottom`],
},
}
],
},
},
`gatsby-transformer-sharp`,
Once you do that, your image margin-bottom attribute will be used like
I'm developing very basic blog application that display blog posts from markdown files. When i click each post, it will open on the new route with dynamically create page with createPages functionality. The problem is When i pointing the templates/blogpost.js in the gatsby-node.js.
It is showing like this.
Your site's "gatsby-node.js" created a page with a component that doesn't exist.
Error :
The path to the missing component is "C:\Users\viper\Desktop\react\gatsby\portfolio\imlohith\src\templates\blog.js"
The page object passed to createPage:
{
"path": "/post-four",
"component": "C:\\Users\\viper\\Desktop\\react\\gatsby\\portfolio\\imlohith\\src\\templates\\blog.js"
}
const postTemplate = path.resolve(`src/templates/blog.js`)
return graphql(`
{
allMarkdownRemark {
edges {
node {
html
id
frontmatter {
path
title
date
author
}
}
}
}
}
`).then(res => {
if (res.errors) {
return Promise.reject(res.errors)
}
res.data.allMarkdownRemark.edges.forEach(({ node }) => {
createPage({
path: node.frontmatter.path,
component: postTemplate,
})
})
})
}
Gatsby-congig.js file
const config = require('./config');
module.exports = {
pathPrefix: config.pathPrefix,
siteMetadata: {
title: config.siteTitle,
description: "This is awesome site awesome awesome"
},
plugins: [
'gatsby-plugin-react-helmet',
'gatsby-plugin-catch-links',
{
resolve: 'gatsby-source-filesystem',
options: {
path: `${__dirname}/src/pages`,
name: 'pages',
},
},
'gatsby-transformer-remark',
`gatsby-plugin-sharp`,
`gatsby-transformer-sharp`,
{
resolve: `gatsby-plugin-manifest`,
options: {
name: config.manifestName,
short_name: config.manifestShortName,
start_url: config.pathPrefix || config.manifestStartUrl,
background_color: config.manifestBackgroundColor,
theme_color: config.manifestThemeColor,
display: config.manifestDisplay,
icon: config.manifestIcon, // This path is relative to the root of the site.
},
},
'gatsby-plugin-sass',
'gatsby-plugin-offline',
],
};
Background
I am trying to install gatsby-plugin-categories following the instructions at https://www.gatsbyjs.org/packages/gatsby-plugin-categories/ but they are either missing steps or I have something conflicting or missing in my code.
gatsby-config-js
module.exports = {
siteMetadata: {
title: `VLLG`,
description: `Village | California Campsites.`,
author: `Juan Gallardo`,
},
plugins: [
`gatsby-plugin-react-helmet`,
{
resolve: `gatsby-source-filesystem`,
options: {
name: `images`,
path: `${__dirname}/src/images`,
},
},
{
resolve: `gatsby-source-filesystem`,
options: {
name: `pages`,
path: `${__dirname}/src/pages/`,
},
},
{
resolve: "gatsby-plugin-categories",
options: {
templatePath: path.join(__dirname, "/src/templates/category.js")
}
},
{
resolve: `gatsby-transformer-remark`,
options: {
// CommonMark mode (default: true)
commonmark: true,
// Footnotes mode (default: true)
footnotes: true,
// Pedantic mode (default: true)
pedantic: true,
// GitHub Flavored Markdown mode (default: true)
gfm: true,
// Plugins configs
plugins: [],
},
},
`gatsby-transformer-sharp`,
`gatsby-plugin-sharp`,
{
resolve: `gatsby-plugin-manifest`,
options: {
name: `VLLG`,
short_name: `vllg`,
start_url: `/`,
background_color: `#663399`,
theme_color: `#663399`,
display: `minimal-ui`,
icon: `src/images/gatsby-icon.png`, // This path is relative to the root of the site.
},
},
],
}
src/templates/category.js
import React from "react";
import Helmet from "react-helmet";
import { graphql } from "gatsby";
import Layout from "../layout";
import PostListing from "../components/PostListing";
export default class CategoryTemplate extends React.Component {
render() {
const { pageContext, data } = this.props;
const { category } = pageContext;
return (
<Layout>
<div className="category-container">
<Helmet title={`Posts in category "${category}"`} />
<PostListing postEdges={data.allMarkdownRemark.edges} />
</div>
</Layout>
);
}
}
export const pageQuery = graphql`
query CategoryPage($category: String) {
allMarkdownRemark(
limit: 1000
filter: { fields: { category: { eq: $category } } }
) {
totalCount
edges {
node {
fields {
slug
category
}
excerpt
timeToRead
frontmatter {
title
tags
date
}
}
}
}
}
`;
they have one line that i find confusing, import PostListing from "../components/PostListing"; they never gave the sample code for that. And there is no starter that has what is in there
not sure if the solution would be there in that file or if i need to tweak something in my config.
can you try like your other paths
{
resolve: "gatsby-plugin-categories",
options: {
templatePath: `${__dirname}/src/templates/category.js`
}
}