Browse Source

Implement the OG/Twitter preview/card standard as a component.

master
Zed A. Shaw 1 week ago
parent
commit
a03c0f5d74
  1. 26
      client/Layout.svelte
  2. 28
      client/components/OGPreview.svelte
  3. 16
      rendered/Layout.svelte
  4. 2
      rendered/pages/index.svelte
  5. 42
      rendered/pages/test_og_card.svelte
  6. 24
      static/global.css

26
client/Layout.svelte

@ -12,32 +12,6 @@
export let fullscreen = false;
</script>
<style>
main {
display: flex;
flex-direction: column;
padding-top: 1rem;
}
main.centered {
display: flex;
flex-direction: column;
align-items: center;
padding-top: 3rem;
}
main.fullscreen {
display: flex;
flex-direction: row !important;
padding: 0px !important;
margin: 0px !important;
height: 100vh !important;
max-height: 100vh !important;
min-height: 100vh !important;
}
</style>
{#if authenticated}
{#if header}
<Header />

28
client/components/OGPreview.svelte

@ -0,0 +1,28 @@
<script>
export let title="";
export let description="";
export let large_image="";
export let small_image="";
export let url="";
// does not add the @ so you have to do that
export let twitter_user="";
</script>
<svelte:head>
<!--OG Spec for LinkedIn/Facebook/Others -->
<meta prefix="og: http://ogp.me/ns#" property="og:type" content="website" />
<meta prefix="og: http://ogp.me/ns#" property="og:title" content={ title } />
<meta prefix="og: http://ogp.me/ns#" property="og:description" content={ description }/>
<meta prefix="og: http://ogp.me/ns#" property="og:image" content={ large_image } />
<meta prefix="og: http://ogp.me/ns#" property="og:url" content={ url } />
<!--Twitter Spec for ... Twitter -->
<meta name="twitter:card" content={ large_image }/>
<meta name="twitter:site" content={ twitter_user } />
<meta name="twitter:domain" content={ url }/>
<meta name="twitter:title" content={ title }/>
<meta name="twitter:description" content={ description }/>
<meta name="twitter:image" content={ small_image }/>
</svelte:head>

16
rendered/Layout.svelte

@ -5,15 +5,23 @@
</style>
<script>
import { Hydrate } from '@jamcart/7ty/components';
import Darkmode from '$/client/components/Darkmode.svelte';
import Icon from '$/client/components/Icon.svelte';
import Footer from '$/client/Footer.svelte';
import Header from './Header.svelte';
export let fullscreen = false;
export let centered = false;
export let testid;
export let bare = false;
</script>
<Header />
<slot></slot>
{#if !bare}
<main class:fullscreen={fullscreen} class:centered={ centered } data-testid={ testid }>
<slot></slot>
</main>
{:else}
<slot></slot>
{/if}
<Footer />

2
rendered/pages/index.svelte

@ -62,7 +62,7 @@ section {
</style>
<Layout>
<Layout bare={ true }>
<hero class="main">
<figure>
<img src="/images/header.svg" />

42
rendered/pages/test_og_card.svelte

@ -0,0 +1,42 @@
<script>
import OGPreview from "$/client/components/OGPreview.svelte";
import Layout from "$/rendered/Layout.svelte";
</script>
<style>
card {
width: 600px;
}
card top {
background-color: var(--yellow);
text-align: center;
}
</style>
<OGPreview title="Test Twitter/LinkedIn Preview"
description="A simple test of a Svelte component for the preview cards on Twitter and LinkedIn."
large_image="https://xor.academy/images/zed.png"
small_image="https://xor.academy/images/zed.png"
twitter_user="@lzsthw"
/>
<Layout centered={ true }>
<card>
<top>
<h1>Twitter/Linked in Card Test</h1>
</top>
<middle>
<p>If you've clicked on the link to this card then you're just viewing a test of a component to show twitter cards. Feel free to check out the <a href="/">course if you are interested in learning to draw and paint.</a></p>
<img src="/images/zed.png" />
<br>
</middle>
<bottom>
<button-group>
<button><a href="/">Return Home</a></button>
</button-group>
</card>
</Layout>

24
static/global.css

@ -1273,3 +1273,27 @@ breadcrumb {
left: 0;
height: 100%;
}
/* Specific to the client/Layout.svelte and rendered/Layout.svelte */
main {
display: flex;
flex-direction: column;
padding-top: 1rem;
}
main.centered {
display: flex;
flex-direction: column;
align-items: center;
padding-top: 3rem;
}
main.fullscreen {
display: flex;
flex-direction: row !important;
padding: 0px !important;
margin: 0px !important;
height: 100vh !important;
max-height: 100vh !important;
min-height: 100vh !important;
}

Loading…
Cancel
Save