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>

<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.