Browse Source

Fully working twitter/og card demos.

master
Zed A. Shaw 3 weeks ago
parent
commit
561643210c
  1. 51
      rendered/pages/test_large_card.svelte
  2. 2
      rendered/pages/test_og_card.svelte
  3. 64
      rendered/pages/test_video_card.svelte
  4. 17
      rendered/pages/video_container.svelte

51
rendered/pages/test_large_card.svelte

@ -0,0 +1,51 @@
<script>
import Layout from "$/rendered/Layout.svelte";
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 }/test_large_card.html`, // URL to article
"type": "website", // not mentioned on linked in but needed
}
let twitter = {
"card": "summary_large_image", // 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>
<style>
card {
width: 600px;
}
card top {
background-color: var(--yellow);
text-align: center;
}
</style>
<OGPreview og={ og } twitter={ twitter} />
<Layout centered={ true }>
<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>
</Layout>

2
rendered/pages/test_og_card.svelte

@ -7,7 +7,7 @@
"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
"url": `${ base_host }/test_og_card.html`, // URL to article
"type": "website", // not mentioned on linked in but needed
}

64
rendered/pages/test_video_card.svelte

@ -0,0 +1,64 @@
<script>
import Layout from "$/rendered/Layout.svelte";
import OGPreview from "$/client/components/OGPreview.svelte";
import { Hydrate } from '@jamcart/7ty/components';
import { base_host } from "$/client/config.js";
import Video from "$/client/components/Video.svelte";
let source = "/videos/sample.mp4";
let poster = "/images/zed.png";
let video_background = "rgba(0,0,0,0)";
let video_props = {
poster,
background_color: video_background,
source,
starts_on: new Date(Date.now() + 10000)
}
let og = {
"title": "LJSTHW OG/Twitter Video Test", // title of the article
"description": "A simple test of the OG/Twitter style of sharing cards with video.", // description for inside preview
"image": `${ base_host }/images/zed.png`, // image to display, 5mb/1200/627 max
"url": `${ base_host }/test_video_card.html`, // URL to article
"type": "website", // not mentioned on linked in but needed
}
let twitter = {
"card": "player", // 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,
"player": `${ base_host }/video_container.html`,
"player:width": "1280",
"player:height": "720"
}
</script>
<style>
card {
width: 600px;
}
card top {
background-color: var(--yellow);
text-align: center;
}
</style>
<OGPreview og={ og } twitter={ twitter} />
<Layout centered={ true }>
<card>
<top>
<Hydrate component={ Video } props={ video_props } />
</top>
<middle>
<h4>OG/Twitter Video</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 video and a description.
</p>
</middle>
</card>
</Layout>

17
rendered/pages/video_container.svelte

@ -0,0 +1,17 @@
<script>
import Video from "$/client/components/Video.svelte";
import { Hydrate } from '@jamcart/7ty/components';
let source = "/videos/sample.mp4";
let poster = "/images/zed.png";
let video_background = "rgba(0,0,0,0)";
let video_props = {
poster,
background_color: video_background,
source,
starts_on: new Date(Date.now() + 10000)
}
</script>
<Hydrate component={ Video } props={ video_props } />
Loading…
Cancel
Save