Remark Transformer Plugin、独自コンポーネントを作る - KDP(電子出版)のメモ　急急如律令

Remark Transformer Pluginを作ってみる日本語ではあまり書かれているのがないが、英語でも翻訳にかけたらわかりやすかったのでそのままやってみる。 www.gatsbyjs.com

マークダウンのAST木についての理解マークダウン→AST→HTMLという風に変換するのを途中の処理に割り込んで機能を付加する方法を見ていく。

99nyorituryo.hatenablog.com

実際の作業

pluginsというフォルダーを作る
フォルダー内でnpm initしてpackage.jsonを作る

npm initすると色々聞かれるが、わからなかったらauthorやpackage名ぐらいの入力であとはエンターでいいと思う。gatsby-remark-amazon-jsonというのを作ってみて、gatsby-transformer-remarkのプラグインとして追加する。gatsby-starter-blogを使っているので初期からgatsby-remark-images、gatsby-remark-responsive-iframe、gatsby-remark-prismjsが入っているので追加する形になる。プラグインの記述される順序が処理の順番になるので重要。

{
  resolve: `gatsby-transformer-remark`,
  options: {
    plugins: [`gatsby-remark-amazon-json`],
  },
},

マークダウンのプラグインを作るのにunist-util-visitを使うのが一般的らしい。ただ最新のバージョンだとgatsbyで動かないとか。

注意：新しいメジャーバージョンはESMであり、ギャツビーはまだ完全にサポートしていないため、unist-util-visitのv2をインストールしています。

npm install unist-util-visit

npm install unist-util-visit@^2

ver.5を入れると書きエラーが出た

import {visit} from 'unist-util-visit' ^^^^^^ SyntaxError: Cannot use import statement outside a module

astexplorer.net

markdownのプラグインを作るほうで考えていたが、独自コンポーネントでいいような気がした。いっそのことmdじゃなくてmdxにすればもっと簡単かも。コンポーネントをpropsで渡すと配列でも行ける。受け取ったasinをgraphqlで検索して描画する。

// src/pages/page3.js import React from "react"

import Amazon from "../components/Amazon"

export default function Page3() {

const books=["B086L8S2CV","B0B683NKKV"] return (

) }

import * as React from "react" import { useStaticQuery, graphql } from "gatsby"

const Amazon = ({ asin }) => { const data = useStaticQuery(graphqlquery MyQuery { allJson { edges { node { Asin Booktype Category Contributor ImageURL Points Price Publisher Title URL } } } })

const book = data.allJson.edges //const asin=["B08DTXKTFV","B0B683NKKV"]

var file = book.filter(word => asin.includes(word.node.Asin)); console.log(book) return (
{file.map(e => (

{e.node.Title}

{e.node.Contributor}、出版社：{e.node.Publisher}
  ))}
</div>
)
}

export default Amazon