oEmbed expansion in Gatsby

<p>Created a new blog with using <a href="https://www.gatsbyjs.org/">GatsbyJS</a> and <a href="https://github.com/gatsbyjs/gatsby-starter-blog">gatsby-starter-blog</a>.<br>
The end of the fiscal year is a good time to build something new.</p>
<p>1 year ago, I renewed my portfolio as well using Gatsby.</p>
<div class="remark-oembed-inline remark-oembed-hatena-blog" data-oembed=""><template data-oembed-template=""><iframe src="https://hatenablog-parts.com/embed?url=https%3A%2F%2Fpetitviolet.hatenablog.com%2Fentry%2F20190303%2F1551621093" title="ポートフォリオサイトをGatsbyで作り直した - petitviolet_blog" class="embed-card embed-blogcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 190px; max-width: 500px; margin: 10px 0px;"></iframe></template></div>
<p>So far, I used <a href="https://petitviolet.hatenablog.com">petitviolet.hatenablog.com</a> to publish blog posts and have no idea how to differentiate :)</p>
<script async defer>
    const isDocumentReady = () => {
      if (document.readyState !== 'complete') {
        document.addEventListener('readystatechange', isDocumentReady);
        return false;
      }

      requestAnimationFrame(() => {
        
    document.querySelectorAll('div[data-oembed]').forEach((el) => {
      const template = el.querySelector('[data-oembed-template]').content.cloneNode(true);
      el.innerHTML = '';
      el.attachShadow({ mode: 'closed' }).appendChild(template);
    });

    document.querySelectorAll('img[data-oembed][data-src]').forEach((img) => {
      img.setAttribute('src', img.getAttribute('data-src'));
      img.removeAttribute('data-src');
    });

    document.querySelectorAll('[data-oembed]').forEach((el) => {
      el.removeAttribute('data-oembed');
    });
  ;
      });

      return true;
    };

    if (!isDocumentReady()) {
      document.addEventListener('readystatechange', isDocumentReady);
    }
  </script>

Hello World

これはなに？本記事ではKubernetesにおけるPodという形でアプリケーショ