bandolier-website/admin/bando/demos/OGPreview.svelte

<script>
  import OGPreview from "$/client/components/OGPreview.svelte";
  import { base_host } from "$/client/config.js";

  let og = {
    "title": "LJSTHW OG Card Test", // title of the article
    "description": "A simple test of the OG style of sharing cards.", // description for inside preview
    "image": `${ base_host }/images/zed.png`, // image to display, 5mb/1200/627 max
    "url": `${ base_host }/client/#/bando/demos/OGPreview`, // URL to article
    "type": "website", // not mentioned on linked in but needed
  }

  let twitter = {
    "card": "summary", // must be summary, summary_large_image, app, player
    "creator": "@lzsthw", // @username of content creator
    "description": og.description, // max 200 chars
    "image": og.image,
    "image:alt": "A drawing of Zed by Zed.", // max 420 chars image alt
    "site": "@lzsthw", // @username of site
    "title": og.title,
  }
</script>

<OGPreview og={ og } twitter={ twitter} />

<style>
  card {
    max-width: 600px;
  }
</style>

<card>
    <top>
    <!-- this is how you assign a set of properties to a component using the {...} syntax -->
    <img src="/images/zed.png" />
    </top>
  <middle>
    <h4>OG Twitter Test</h4>
    <p>If you visit <a href="https://cards-dev.twitter.com/validator">the Twitter validator tool</a> and enter an internet accessible link to this demo it will show the above image and a description.
    </p>
  </middle>
</card>