gatsby-plugin-twitterを入れてtwitterを表示
これの操作はツイッターのページを開いてから右上の「埋め込みポスト」からコードをコピーして貼り付ける必要がある。script部分はいらないようだ。
Install npm install gatsby-plugin-twitter Configure // In your gatsby-config.js plugins: [
gatsby-plugin-twitter]
gatsby-remark-twitter
gatsby-remark-twitterの場合はnode-fetchを使っているのでいったんツイッターのサイトにアクセスしているようだ。その代わりツイッターのリンクを張るだけでいい。gatsby-remarkとあることからもわかるようにmarkdown内でのツイッターのリンクを埋め込める。
並列実行
gatsbyで並列実行すると、毎秒何回と決まっているリクエスト処理が同時に実行されるのでエラーが出て止まる。 「an error occurred during parallel query running」というのが起こる。
99nyorituryo.hatenablog.com gatsby-remark-amazon-linkでasinをpaapiを使ってアフィリエイトリンクにしてくれるのだが、MDファイルが複数あると並列実行されてpaapiが「Too Many Requests」のエラーが出る。
PARALLEL_QUERY_RUNNING: falseをすれば並列処理が行われなくなるはずが、されちゃうので結局エラーになった。gatsbyのバグで放置されているようだ。
module.exports = {
flags: {
PARALLEL_QUERY_RUNNING: false
}
プラグインの自作
あらかじめにデータを取得していて突き合わせて表示するように変えようと思う。そのためには自作プラグインが必要。 takumon.com
ヘッドレス CMS の Contentful のマークダウンテキストに unist を使ってショートコード的な機能を実装してみる dev.classmethod.jp
【JavaScript】配列から、複数の検索キーのいずれかに該当する要素を抜き出す。 saktt-sw.com
試しにpaapiのjsonを整形したやつを読み込んでasinで絞り込んで表示するのを書いてみた。
// src/pages/page.js import React from "react" import { Link } from "gatsby" import "../styles/default.css" import { graphql, useStaticQuery } from "gatsby"
export default function Page() { const data = useStaticQuery(graphql
query MyQuery { allJson { edges { node { Asin Booktype Category Contributor ImageURL Points Price Publisher Title URL } } } }) const book = data.allJson.edges const asin=["B08XWXXS7W","B08HSVRZ8P"]var file = book.filter(word => asin.includes(word.node.Asin)); console.log(book) return (
{file.map(e => ())}そのほか気になったプラグイン eclair.blog
