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.
33 lines
2.0 KiB
33 lines
2.0 KiB
2 years ago
|
<callout class="warning">
|
||
|
|
<span>
|
||
|
|
This is mostly only a demo because Twitter doesn't actually render JavaScript client
|
||
|
|
side so it won't see these meta tags. If you want this to work, put it on a page in
|
||
|
|
<code>rendered/pages/</code> and don't Hydrate it.
|
||
|
|
</span>
|
||
|
|
</callout>
|
||
|
|
|
||
|
|
You can create a special page/link for Twitter, Facebook, and LinkedIn that will render a summary+image for the page. Uses its own preview-card feature [docs](https://developer.twitter.com/en/docs/twitter-for-websites/cards/guides/getting-started) while Facebook and LinkedIn use the [OpenGraph](https://ogp.me/) specification. OpenGraph is much simpler, really only supporting things like links, images, etc. Twitter's is more capable since it allows you to link to images, embed videos, live streams, and link to apps in Apple and Google stores.
|
||
|
|
|
||
|
|
The component starts with a base set of attributes for OG and Twitter cards, which you can augment by simply updating the object used. All the component does is walk through the `twiter` or `og` keys and create the necessary `<meta>` tag for the head.
|
||
|
|
|
||
|
|
Svelte:Head Sort-of-Bug
|
||
|
|
===
|
||
|
|
|
||
|
|
One thing to keep in mind is if you place these `<meta>` tags directly in a page then they'll get duplicated on each page visit. This is because Svelte is updating the DOM for the page, but seems to not consider the `<svelte:head>` as idempotent as other elements in the DOM. The fix is to move all uses of `<svelte:head>` into a component so Svelte properly updates them on page changes.
|
||
|
|
|
||
|
|
The code for `OGPreview.svelte` does this, which means you *do not* put it into a `<svelte:head>`. Instead you do this:
|
||
|
|
|
||
|
|
<pre><code data-language="javascript">
|
||
|
|
<OGPreview og={ og } twitter={ twitter} />
|
||
|
|
</code></pre>
|
||
|
|
|
||
|
|
Then `OGPreview` does everything for you. If you run into this bug in your own development use the `client/components/HeaderOnce.svelte` component like this:
|
||
|
|
|
||
|
|
```
|
||
|
|
<HeaderOnce>
|
||
|
|
<meta-tags-here>
|
||
|
|
</HeaderOnce>
|
||
|
|
```
|
||
|
|
|
||
|
|
Those tags will then technically be in a "component" so they'll update as you change pages rather than get duplicated for each page.
|