This is the code that runs https://bandolier.learnjsthehardway.com/ for you to review. It uses the https://git.learnjsthehardway.com/learn-javascript-the-hard-way/bandolier-template to create the documentation for the project.
https://bandolier.learnjsthehardway.com/
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
65 lines
2.0 KiB
65 lines
2.0 KiB
2 years ago
|
<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/sample.jpg";
|
||
|
|
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": poster, // 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>
|