Add support for social media cards

[Jermolene]

As discussed in #8433, this PR adds a new raw markup template that conditionally creates Facebook/Twitter social card meta tags. The tiddlers used (alongside the existing $:/SiteTitle and $:/SiteSubtitle) are:

• $:/SiteDomain - plain domain of the site
• $:/SitePreviewUrl - full URL of thumbnail (relative URLs do not work)
• $:/SiteUrl - full URL of the site

[github-actions]

Confirmed: Jermolene has already signed the Contributor License Agreement (see contributing.md)

[simonbaird]

Tangentially related question: To inject tiddlers I'm inserting something like this into the dom:

<script class="tiddlywiki-tiddler-store" type="application/json">[{"text":"hello","title":"MyTiddler"}]</script>

Is there a way to do something like and create a shadowTiddler? In the past it was possible to add a tiddler div to the #shadowArea to create a shadow tiddler, but not sure how to do it now.

[Jermolene]

Is there a way to do something like and create a shadowTiddler? In the past it was possible to add a tiddler div to the #shadowArea to create a shadow tiddler, but not sure how to do it now.

In TiddlyWiki Classic shadow tiddlers were stored in a single hashmap. In TiddlyWiki 5 shadows are automatically created at startup from the tiddlers within the loaded plugins.

So, the approach for TW5 would be to pack your tiddlers into a plugin, and then inject that. You'd be injecting a single tiddler with the usual plugin fields, with its content being a JSON hashmap of the constituent tiddlers.

The info mechanism in the core works similarly by dynamically creating a plugin at startup on the browser side. It uses the title $:/temp/info-plugin for the plugin. It may make sense for you to use $:/temp/tiddlyhost if you wanted to avoid the plugin being saved back to the server.

[simonbaird]

Thanks for the info re shadow tiddlers.

[simonbaird]

Lgtm.

[Jermolene]

Great, thank you @simonbaird – I'll add the new system tiddlers to the control panel and then this can be merged.

[Jermolene]

In 213a786 I've added a control panel user interface for setting the social media card information.

[simonbaird]

I noticed a mismatch in one of the names:

$:/SitePreviewImageUrl versus $:/SitePreviewUrl.

Create the #8496 PR to fix it, assuming the shorter name is preferred.

[simonbaird]

I think there's a problem with a space being eaten in the meta tag. I'm seeing this:

<metaname="description" content="a non-linear personal web notebook">
<metaproperty="og:url" content="https://foo.com/">
<metaproperty="og:title" content="My TiddlyWiki">
<metaproperty="og:description" content="a non-linear personal web notebook">
<metaproperty="twitter:domain" content="foo.com">
<metaproperty="twitter:url" content="https://foo.com/">
<metaname="twitter:title" content="My TiddlyWiki">
<metaname="twitter:description" content="a non-linear personal web notebook">

(which gets even more garbled when parsed and rendered by Tiddlyhost.)

[simonbaird]

Perhaps \whitespace trim trims too hard..?