Deep Dive

“The fastest auto dealership site in the world” How relentless optimization 8xed conversions

ContactSign Up for Free
Community Plugin
View plugin on GitHub

Coverage Status NPM GitHub code size in bytes npm (scoped)

gatsby-transformer-for-microcms

Handle imgs in microCMS’s html field. Img tags become picture tag in your rich media content.

Install

with yarn

$ yarn add @mako-tos/gatsby-transformer-for-microcms

with npm

$ npm i @mako-tos/gatsby-transformer-for-microcms

How to use

gatsby-config.js

This npm is installed with gatsby-source-microcms

You need setting options in gatsby-config.js.

module.exports = {
  plugins: [
    {
      resolve: 'gatsby-source-microcms',
      options: {
        apiKey: process.env.MICRO_CMS_API_KEY,
        serviceId: process.env.MICRO_CMS_SERVICE_ID,
        endpoint: 'blog',
      },
    },
    {
      resolve: '@mako-tos/gatsby-transformer-for-microcms',
      options: {
        mediaType: 'MicrocmsBlog', // string
        field: 'body', // string
        useHljs: true, // boolean
      },
    },
  ],
};

gatsby-node.js

You can query like the following. @mako-tos/gatsby-transformer-for-microcms will append childConvertHtml to your table.

exports.createPages = async ({ graphql, actions }) => {
  const { createPage } = actions;

  const result = await graphql(
    `
      {
        allMicrocmsBlog(sort: { fields: [createdAt], order: DESC }) {
          edges {
            node {
              id
              createdAt
              body
              childConvertHtml {
                html
                plainText
                listOfContents
                convertedHtml
              }
            }
          }
        }
      }
    `
  );

  if (result.errors) {
    throw result.errors;
  }

  result.data.allMicrocmsBlog.edges.forEach((post, index) => {
    createPage({
      path: post.node.id,
      component: path.resolve('./src/templates/blog-post.js'),
      context: {
        slug: post.node.id,
        body: post.node.childConvertHtml.convertedHtml,
        digest: post.node.childConvertHtml.plainText,
      },
    });
  });
};

Options

module.exports = {
  plugins: [
    {
      resolve: '@mako-tos/gatsby-transformer-for-microcms',
      options: {
        /**
         * Target GraphQL Table Name (Required)
         *
         * Type: string.
         * default: undefined,
         **/
        mediaType: 'MicrocmsBlog',

        /**
         * Table's html field Name (Required)
         *
         * Type: string.
         * default: undefined,
         **/
        field: 'body',

        /**
         * If you want to use Highlight.js set true (Optional)
         *
         * Type: boolean.
         * default: false.
         **/
        useHljs: true,

        /**
         * If you want to update img tags set up (Optional)
         *
         * Type: object.
         **/
        image: {
          /**
           * If you want to set img tag's sizes set true (Optional)
           *
           * Type: string.
           * default: '(max-width: 800px) 80vw, 800px'.
           **/
          sizes: '80vw',

          /**
           * If you want to set img tag's loading set true (Optional)
           *
           * Type: string.
           * default: 'lazy'.
           **/
          loading: 'auto',
        },
      },
    },
  ],
};

Change History

1.1.0 append listOfContents which generate ol tag from h* tags

example

from

<div>
  <h1 id="h1id">title of article</h1>
  ...
  <h2 id="h2id">inner title</h2>
  ...
</div>

to

<ol class="listOfContents">
  <li class="listOfContents--level1">
    <a href="#h1id">title of article</a>
  </li>
  <li class="listOfContents--level2">
    <a href="#h2id">inner title</a>
  </li>
</ol>

I’m not good at design so I don’t prepare css sorry.

© 2022 Gatsby, Inc.