import { OEmbed } from "@/components/ui"

## Open Graph Protocol を利用したリンクカード

https://github.com/r4ai/r4ai.dev

https://qiita.com/blue_islands/items/33ee08bc73652893c413

https://zenn.dev/yusukebe/articles/7c9f96f8c52b8a

https://zenn.dev/attakei/scraps/039949eaac1619

https://developer.mozilla.org/ja/docs/Web/API/Performance_API

https://docs.astro.build/ja/concepts/islands/

https://dev.to/derlin/get-favicons-from-any-website-using-a-hidden-google-api-3p1e

https://letus.ed.tus.ac.jp/

- https://zenn.dev/yusukebe/articles/7c9f96f8c52b8a
- https://stackoverflow.com/questions/28451601/can-you-predetermine-the-colour-of-a-soundcloud-oembed-player-in-wordpress

### インラインなリンクはカード化しない

According to [the spec](https://html.spec.whatwg.org/multipage/iframe-embed-object.html#the-iframe-element), ...

https://zenn.dev/yusukebe/articles/7c9f96f8c52b8a is a

https://zenn.dev/yusukebe/articles/7c9f96f8c52b8a
https://zenn.dev/yusukebe/articles/7c9f96f8c52b8a

## 埋め込み機能

### Twitter

https://twitter.com/sama/status/1732925866836210151

{/* Twitter Publish */}
<blockquote class="twitter-tweet"><p lang="en" dir="ltr">Sunsets don&#39;t get much better than this one over <a href="https://twitter.com/GrandTetonNPS?ref_src=twsrc%5Etfw">@GrandTetonNPS</a>. <a href="https://twitter.com/hashtag/nature?src=hash&amp;ref_src=twsrc%5Etfw">#nature</a> <a href="https://twitter.com/hashtag/sunset?src=hash&amp;ref_src=twsrc%5Etfw">#sunset</a> <a href="http://t.co/YuKy2rcjyU">pic.twitter.com/YuKy2rcjyU</a></p>&mdash; US Department of the Interior (@Interior) <a href="https://twitter.com/Interior/status/463440424141459456?ref_src=twsrc%5Etfw">May 5, 2014</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

ツイートが存在しない場合：

https://twitter.com/sama/status/17329258668362101

### Gist

https://gist.github.com/r4ai/f943d1d8bde94e5fd5e1e87e57f98281?file=extension.ts

https://gist.github.com/r4ai/aab7fb4f90c82992a8a1575cc10025a8

### CodePen, JSFiddle, StackBlitz, CodeSandbox

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="LYmLKBw" data-pen-title="Animated Tab Bar" data-user="ndaidong" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/ndaidong/pen/LYmLKBw">
  Animated Tab Bar</a> by Dong Nguyen (<a href="https://codepen.io/ndaidong">@ndaidong</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

<script async src="//jsfiddle.net/r4aijp/1e08bp7y/embed/js,html,css,result/dark/"></script>

<iframe
  src="https://stackblitz.com/edit/github-yvt2en-ffatno?embed=1&file=README.md"
  style="width:100%; height: 800px; border:0; border-radius: 4px; overflow:hidden;"
/>

<iframe
  src="https://codesandbox.io/embed/sjpj2s?view=preview&module=%2Fpublic%2Findex.html"
  style="width:100%; height: 800px; border:0; border-radius: 4px; overflow:hidden;"
  title="modest-rain (forked)"
  allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
></iframe>

### その他 (oEmbed) #WIP

<OEmbed url="https://www.youtube.com/watch?v=Gy5vAs_jQSo" />

<OEmbed url="https://www.reddit.com/r/Showerthoughts/comments/2safxv/comment/cno7zic/" />

<OEmbed url="https://www.slideshare.net/ClarkBoyd/chatgpt-and-the-future-of-work-clark-boyd" />

<OEmbed url="https://speakerdeck.com/oracle4engineer/get-started-github-actions" />

<OEmbed url="https://open.spotify.com/track/1poGez6IaTb1gtJxkXdlb8?si=d3beb2ef78b7470b" />