<script>
  export let og = {
    "title": "", // title of the article
    "description": "", // description for inside preview
    "image": "", // image to display, 5mb/1200/627 max
    "url": "", // URL to article
    "type": "website", // not mentioned on linked in but needed
  }

  // taken from https://developer.twitter.com/en/docs/twitter-for-websites/cards/overview/markup
  // also refer to https://developer.twitter.com/en/docs/twitter-for-websites/cards/overview/player-card
  export let twitter = {
    "card": "summary", // must be summary or player
    "creator": "", // @username of content creator
    "description": "", // max 200 chars
    "image": "", // max 5mb image url 1:1 ratio
    "image:alt": "", // max 420 chars image alt
    "site": "", // @username of site
    "title": "", // max 70 chars title
    "player": "", // https url of player iframe
    "player:width": "", // width iframe in pixels
    "player:height": "", // height iframe in pixels
    "player:stream": "", // URL to raw video/audio stream
  }
</script>

<svelte:head>
  <!--OG Spec for LinkedIn/Facebook/Others -->
  {#each Object.keys(og) as key}
    <meta property="og:{ key }" content="{ og[key] }" />
  {/each}

  <!--Twitter Spec for ... Twitter -->
  {#each Object.keys(twitter) as key}
    <meta name="twitter:{key}" content={ twitter[key] }/>
  {/each}
</svelte:head>
