Gatsbyブログにブログカード・ブログタイトルを挿入する（2022/9/3追記あり）

iframe.ly/api/oembed?url=URL&api_key=API_KEY

$ npm install axios

import axios from "axios"
import React, { useEffect, useState } from "react"

const BlogCard = (props) => {
  
  const url = props.children
  const [post, setPost] = useState("")
  const apikey = "★払いだされたAPIキー★"

  const req = `https://iframe.ly/api/oembed?url=${url}&api_key=${apikey}`
  useEffect(() => {
    axios
      .get(req)
      .then((res) => {
        setPost(res.data)
      })
      .catch(() => console.log("err"))
  }, [])

  return (
    <>
        <p>{post.url}</p>
        <p>{post.title}</p>
        <p>{post.thumbnail_url}</p>
    </>
  )
}

export default BlogCard

---
title: "npm installでのパッケージインストールが上手くいかないときにやったことメモ"
・・・省略・・・
---

<BlogCard>https://www.seiburailway.jp/</BlogCard>

## はじめに
### 今回の記事の目的
・・・省略・・・

import {
  Box,
  Center,
  Flex,
  Image,
  Link,
  LinkBox,
  LinkOverlay,
  Text,
} from "@chakra-ui/react"
import axios from "axios"
import React, { useEffect, useState } from "react"

const BlogCard = (props) => {
  
  const url = props.children
  const [post, setPost] = useState("")
  const [err, setErr] = useState(false)
  const apikey = "★払いだされたAPI-key★"

  const req = `https://iframe.ly/api/oembed?url=${url}&api_key=${apikey}`
  useEffect(() => {
    axios
      .get(req)
      .then((res) => {
        setPost(res.data)
       
      })
      .catch(() => setErr(true))
  }, [])

  const ratio = post.thumbnail_width / post.thumbnail_height
//   横長かどうか
  const landscape = ratio > 1.5



  return (
    <>
      {err ? (
        <Link href={url}>{url}</Link>
      ) : (
        <LinkBox
          as="article"
          w="80%"
          borderWidth="1px"
          borderColor="#065666"
          rounded="lg"
          p={4}
          href={post.url}
          m={4}
          _hover={{ backgroundColor: "#f4f8f9" }}
        >
          {/* 横長だったらblock */}
          <Flex flexWrap="wrap" display={landscape ? "block" : "flex"}>
            {/* URLが無ければこのブロックを作らない */}
            {post.thumbnail_url ? (
              <Box flex="1" minW={0}>
                <Center>
                  <Image
                    src={post.thumbnail_url}
                    objectFit="cover"
                    maxH="150px"
                  />
                </Center>
              </Box>
            ) : (
              ""
            )}
            <Box mx={5} mt={2} flex="5" minW={0} className="nondeco-a">
              <Box overflowWrap="break-word">
                <LinkOverlay href={post.url}>
                  <Text fontSize="md" fontWeight="bold" mb={1}>
                    {post.title}
                  </Text>
                </LinkOverlay>
              </Box>
              <Box minW={0}>
                <Text fontSize="sm" mb={1} overflowWrap="break-word">
                  {post.description}
                </Text>
              </Box>
              <Box textAlign="right" minW={0}>
                <Link fontSize="xs">{post.url}</Link>
              </Box>
            </Box>
          </Flex>
        </LinkBox>
      )}
    </>
 )
}

export default BlogCard

import {
  Box,
  Link,
} from "@chakra-ui/react"
import axios from "axios"
import React, { useEffect, useState } from "react"

const BlogTitle = (props) => {
  const url = props.children
  const [post, setPost] = useState("")
  const [err, setErr] = useState(false)
  const apikey = "★払いだされたAPI-key★"

  const req = `https://iframe.ly/api/oembed?url=${url}&api_key=${apikey}`
  useEffect(() => {
    axios
      .get(req)
      .then((res) => {
        setPost(res.data)
      })
      .catch(() => setErr(true))
      
  }, [])

  return (
    <Box as="span">
      {err ? (
        <Link href={url}>{url}</Link>
      ) : (
        <Link href={post.url} >{post.title}</Link>
      )}
    </Box>
  )
}

export default BlogTitle

const shortcodes = { BlogCard , BlogTitle}

GATSBY_API_KEY=0000000000000000000000
※実際に払い出されたキーを設定する

# dotenv environment variable files
.env*