Skip to content

Commit

Permalink
Add support for social media cards (#8441)
Browse files Browse the repository at this point in the history
* Initial Commit

* Fix Twitter description

* Improve image preview name

Thanks @simonbaird

* Add control panel UI for social media cards
  • Loading branch information
Jermolene committed Aug 8, 2024
1 parent 3707e10 commit 4da27f6
Show file tree
Hide file tree
Showing 3 changed files with 66 additions and 0 deletions.
6 changes: 6 additions & 0 deletions core/language/en-GB/ControlPanel.multids
Original file line number Diff line number Diff line change
Expand Up @@ -198,6 +198,12 @@ Settings/TitleLinks/Yes/Description: Display tiddler titles as links
Settings/MissingLinks/Caption: Wiki Links
Settings/MissingLinks/Hint: Choose whether to link to tiddlers that do not exist yet
Settings/MissingLinks/Description: Enable links to missing tiddlers
SocialCard/Caption: Social Media Card
SocialCard/Domain/Prompt: Domain name to display for the link (for example, ''tiddlywiki.com'')
SocialCard/Hint: This information is used by social and messaging services to display a preview card for links to this TiddlyWiki when hosted online
SocialCard/PreviewUrl/Prompt: Full URL to preview image for this TiddlyWiki
SocialCard/PreviewUrl/Preview: Preview image:
SocialCard/Url/Prompt: Full URL of this TiddlyWiki
StoryTiddler/Caption: Story Tiddler
StoryTiddler/Hint: This rule cascade is used to dynamically choose the template for displaying a tiddler in the story river.
StoryView/Caption: Story View
Expand Down
38 changes: 38 additions & 0 deletions core/templates/social-metadata.tid
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
title: $:/core/templates/social-metadata
tags: $:/tags/RawMarkupWikified

\procedure meta-plain(name,source,name-attribute:"name")
\whitespace trim
<%if [<source>has[text]] %>
&lt;meta <$text text=<<name-attribute>>/>="<$text text=<<name>>/>" content="<$text text={{{ [<source>get[text]encodehtml[]] }}}/>"&gt;
<$text text={{{ [charcode[10]] }}}/>
<%endif%>
\end meta-plain

\procedure meta-wikified(name,source,name-attribute:"name")
\whitespace trim
<%if [<source>has[text]] %>
<$wikify name="html" text={{{ [<source>get[text]] }}} output="text">
&lt;meta <$text text=<<name-attribute>>/>="<$text text=<<name>>/>" content="<$text text={{{ [<html>encodehtml[]] }}}/>"&gt;
<$text text={{{ [charcode[10]] }}}/>
</$wikify>
<%endif%>
\end meta-wikified

\rules only filteredtranscludeinline transcludeinline macrodef macrocallinline macrocallblock conditional commentinline commentblock
<<meta-wikified "description" "$:/SiteSubtitle">>

<!-- Facebook Meta Tags -->
<<meta-plain "og:url" "$:/SiteUrl" "property">>
<<meta-plain "og:type" "website" "property">>
<<meta-wikified "og:title" "$:/SiteTitle" "property">>
<<meta-wikified "og:description" "$:/SiteSubtitle" "property">>
<<meta-plain "og:image" "$:/SitePreviewImageUrl" "property">>

<!-- Twitter Meta Tags -->
<<meta-plain "twitter:card" "summary_large_image">>
<<meta-plain "twitter:domain" "$:/SiteDomain" "property">>
<<meta-plain "twitter:url" "$:/SiteUrl" "property">>
<<meta-wikified "twitter:title" "$:/SiteTitle">>
<<meta-wikified "twitter:description" "$:/SiteSubtitle">>
<<meta-plain "twitter:image" "$:/SitePreviewImageUrl">>
22 changes: 22 additions & 0 deletions core/ui/ControlPanel/SocialCard.tid
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
title: $:/core/ui/ControlPanel/SocialCard
tags: $:/tags/ControlPanel/Advanced
caption: {{$:/language/ControlPanel/SocialCard/Caption}}

\define lingo-base() $:/language/ControlPanel/

<<lingo SocialCard/Hint>>

|<$link to="$:/SiteTitle"><<lingo Basics/Title/Prompt>></$link> |<$edit-text tiddler="$:/SiteTitle" default="" tag="input"/> |
|<$link to="$:/SiteSubtitle"><<lingo Basics/Subtitle/Prompt>></$link> |<$edit-text tiddler="$:/SiteSubtitle" default="" tag="input"/> |
|<$link to="$:/SiteDomain"><<lingo SocialCard/Domain/Prompt>></$link> |<$edit-text tiddler="$:/SiteDomain" default="" tag="input"/> |
|<$link to="$:/SiteUrl"><<lingo SocialCard/Url/Prompt>></$link> |<$edit-text tiddler="$:/SiteUrl" default="" tag="input"/> |
|<$link to="$:/SitePreviewUrl"><<lingo SocialCard/PreviewUrl/Prompt>></$link> |<$edit-text tiddler="$:/SitePreviewUrl" default="" tag="input"/> |

<%if [[$:/SitePreviewUrl]get[text]else[]!is[blank]] %>
<div>
<div>
<<lingo SocialCard/PreviewUrl/Preview>>
</div>
<img src={{$:/SitePreviewUrl}}/>
</div>
<%endif%>

0 comments on commit 4da27f6

Please sign in to comment.