OpenGraph / social preview defaults for Smoke Signal

Here’s a screenshot of how a Smoke Signal event has an embed preview here in Discourse:

  • It’s not clear this is an event (maybe actually call this Smoke Signal Events?)
  • Doesn’t show organizer
  • Doesn’t show times or location

Obviously a cover image would look great :wink:

I’m going to experiment with an HTML file to quickly iterate on what it might look like

1 Like

Yeah, current tags are OK at best.

<meta name="description" content="Back in September 2024, Nick gave a Tech Talk about Smoke Signal, which he had launched in July. 

Now Smoke Signal has been completely rewritten, relaunched, and open sourced!

What’s new, what has ...">
<meta property="og:title" content="ATProtocol Dev Talks: Smoke Signal Turns one">
<meta property="og:description" content="Back in September 2024, Nick gave a Tech Talk about Smoke Signal ....">
<meta property="og:site_name" content="Smoke Signal" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https:&#x2f;&#x2f;smokesignal.events&#x2f;did:plc:lehcqqkwzcwvjvw66uthu5oq&#x2f;3ltwkusl2wq2m" />
<script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "Event",
      "name": "ATProtocol Dev Talks: Smoke Signal Turns one",
      "description": "Back in September 2024, Nick gave a Tech Talk about Smoke Signal ...",
      "url": "https:&#x2f;&#x2f;smokesignal.events&#x2f;did:plc:lehcqqkwzcwvjvw66uthu5oq&#x2f;3ltwkusl2wq2m"
    }
</script>
<link rel="alternate" href="at://did:plc:lehcqqkwzcwvjvw66uthu5oq/community.lexicon.calendar.event/3ltwkusl2wq2m" />

I could do another generic image like the forum one but i fear that it would be more confusing for users.

Another path could be a template with the event infos pprogrammaticaly burned in afterwards but there’s all the caching/hosting images connundrum to establish.

1 Like

Yes I actually think the image with info overlaid would be a great experience.

But this is part of figuring out which parts of Smoke Signal are infrastructure and what the default product is.

(Nick and I have been DM’ing this morning)

The text only part is a quick fix. I’d prepend the info I mentioned to description.

Hmmm. Thinking about this some more, a Smoke Signal image with info on it ahead of custom images would be very good for SS usage. @kayrozen can you play with something that is less heavily SS branded, like campfire in one corner?

Title, start date, venue, and organizer handle is what I would suggest as the info.

BTW Slack pioneered custom unfurls that let you do basic formatting! Everything you ever wanted to know about unfurling but were afraid to ask /or/ How to make your site previews look amazing in Slack | by Matt Haughey | Slack Platform Blog | Medium

This is ALSO connected to Lexicon Embeds but I won’t open that can of worms!

I’ll scratch something on my lunch. Something like the Github OG image but SS branded.

light or dark themed ?

No idea! Give it a shot, let’s experiment, you did a great job on the last one.

Here a demo one :

template

A while ago I wrote svger, an SVG to PNG render proxy. I think it’s super reasonable to create a small service that renders SVG preview images from event data and have a proxy to serve those cached PNG renders.

Project: https://github.com/sslhound/svger

Blue badge kind of does something like that right now with rendering badge SVGs:

badge
The above image is made with the URL https://render.badge.blue/badge?uri=at://did:plc:cbkjy5n7bk3ax2wplmtjofq2/blue.badge.collection/3l2npthykb226

2 Likes

Nice!

I’d probably put the (optional) link where you have “Add your RSVP”, which if there is no link, then use the link to the event listing on SS (TODO: probably a URL shortener!)

A bunch of nuance here! And I think until we have some brand colour directions, probably white on black or black on white.

This is a great juicy thing that we might also have some template cards and get designers to submit a couple of options.

1 Like