03. Gatsby.js＆MDXのサイトにリンクカードの実装

<RichLink slug="books/strength-finder" title="test" />

<RichLink href="https://investment.abbamboo.com/" />

<RichLink
  href="https://investment.abbamboo.com/"
  title="test"
  description="test"
  domain="test"
/>

"axios": "^0.21.1",
"cheerio": "^1.0.0-rc.6",
"gatsby": "^3.2.1",
"gatsby-plugin-image": "^1.3.0",
"react": "^17.0.2",
"tailwindcss": "^2.1.1"

const fs = require("fs")
const url = require("url")
const yaml = require("js-yaml")
const axios = require('axios');
const cheerio = require('cheerio');
const { createRemoteFileNode } = require(`gatsby-source-filesystem`);

// sourceNodesにて外部画像のファイルノードを作成する
exports.sourceNodes = async ({ actions, createNodeId, cache }) => {
  // WEBサイトURLからHTMLを取得してOGPを抽出
  let yamlLinks = yaml.load( fs.readFileSync( './src/data/links.yaml', 'utf-8' ) )
  let writeTrigger = false
  let counter = {}
  for ( let i = 0; i < yamlLinks.length; i++ ) {
    if(
      !yamlLinks[i].isFetched &&
      'url' in yamlLinks[i]
    ) {
      const res = await axios.get( yamlLinks[i].url )
      const $ = cheerio.load( res.data )
      yamlLinks[i].title =
        $("meta[property='og:title']").attr('content') ||
        $('title').text()
      yamlLinks[i].description =
        $("meta[property='og:description']").attr('content') ||
        $("meta[name='description']").attr('content')
      yamlLinks[i].image_url =
        $("meta[property='og:image']").attr('content') ||
        $("meta[name='image']").attr('content')
      yamlLinks[i].domain = url.parse( yamlLinks[i].url ).hostname
      yamlLinks[i].isFetched = true
      writeTrigger = true
    }
    // 重複を確認
    let elm = yamlLinks[i].image_url
    counter[elm] = ( counter[elm] || 0 ) + 1;
    if ( counter[elm] > 1 ) {
      yamlLinks[i].counter = counter[elm]
      writeTrigger = true
    }
  }
  if ( writeTrigger ) {
    try {
      fs.writeFileSync( './src/data/links.yaml', yaml.dump(yamlLinks), 'utf8' )
    } catch (e) {
      console.error( e.message )
    }
  }

  // 取得したOGP画像URLをもとにファイルノードを生成
  await Promise.all( yamlLinks.map( async yamlLink => {
    const fileNode = await createRemoteFileNode({
      url: `${yamlLink.image_url}?${yamlLink.counter}`,
      cache,
      createNode: actions.createNode,
      createNodeId: createNodeId,
    });
    await actions.createNodeField({ node: fileNode, name: 'ogpImage', value: true, })
    await actions.createNodeField({ node: fileNode, name: 'url', value: yamlLink.url, })
    await actions.createNodeField({ node: fileNode, name: 'title', value: yamlLink.title, })
    await actions.createNodeField({ node: fileNode, name: 'description', value: yamlLink.description, })
    await actions.createNodeField({ node: fileNode, name: 'imageUrl', value: yamlLink.image_url, })
    await actions.createNodeField({ node: fileNode, name: 'domain', value: yamlLink.domain, })
  }));
}

import React from "react"
import { useStaticQuery, graphql, Link } from "gatsby"
import { GatsbyImage, getImage } from "gatsby-plugin-image"



const WrapCard = ({ isLink, linkTo, className, children }) => (<>{
  isLink ?
    <Link className={className} to={linkTo}>{children}</Link> :
    <a href={linkTo} className={className} target="_brank">{children}</a>
}</>)

const RichLinkCard = ({ isLink, linkTo, className, title, description, domain, imageSharp }) => (
  <WrapCard isLink={isLink} className={`flex justify-center items-center overflow-hidden my-4 mx-0 p-0 border rounded ${className}`} linkTo={linkTo}>
    <div className="flex-auto p-4">
      <p className="mb-2 font-semibold max-2-lines">{title}</p>
      <p className="mb-1 text-xs max-2-lines">{description}</p>
      <p className="text-xs max-1-lines">{domain}</p>
    </div>
    {
      imageSharp &&
      <GatsbyImage className="flex-none border-l" image={ getImage( imageSharp ) } alt={title} />
    }
  </WrapCard>
)

const RichLink = ({ className, slug, href, title, description, domain, }) => {
  const { posts, yamlLinks } = useStaticQuery(graphql`
    query {
      posts: allMdx(filter: {frontmatter: {draft: {eq: false}}}) {
        edges {
          node {
            slug
            frontmatter {
              title
              description
              eyecatch {
                childImageSharp {
                  gatsbyImageData(
                    placeholder: DOMINANT_COLOR
                    aspectRatio: 1
                    height: 144
                  )
                }
              }
            }
          }
        }
      }
      yamlLinks: allFile(filter: {fields: {ogpImage: {eq: true}}}) {
        edges {
          node {
            fields {
              title
              description
              domain
              url
            }
            childImageSharp {
              gatsbyImageData(
                placeholder: DOMINANT_COLOR
                width: 144
                height: 144
              )
            }
          }
        }
      }
    }
  `)

  const isLink = slug ? true : false
  const linkTo = isLink ? `/${slug}/` : href
  const targetEdge = isLink ?
    posts.edges.find(edge => edge.node.slug === slug ) :
    yamlLinks.edges.find(edge => edge.node.fields.url === href )

  if ( targetEdge ) {
    const title_ = isLink ?
      targetEdge.node.frontmatter.title :
      targetEdge.node.fields.title
    const description_ = isLink ?
      targetEdge.node.frontmatter.description :
      targetEdge.node.fields.description
    const domain_ = isLink ? slug : targetEdge.node.fields.domain
    const imageSharp = isLink ?
      targetEdge.node.frontmatter.eyecatch.childImageSharp :
      targetEdge.node.childImageSharp

    return <RichLinkCard
      isLink={isLink}
      linkTo={linkTo}
      className={ className || '' }
      title={ title || title_ }
      description={ description || description_ }
      domain={ domain || domain_ }
      imageSharp={imageSharp}
    />

  } else {
    return <a href={linkTo} className={className} target="_brank">{linkTo}</a>
  }
}

export default RichLink