Social sharing of pub packages not as rich as sharing a github repo

[sethladd]

We noticed that there are some opportunities to improve the social sharing experience of a pub package hosted on pub.dev. Specifically: more auto-generated context and "splash image" of the pub package.

In comparison, here is what it looks like to share a github project (via X):

Note the large image with content around what the package is, contributors, stars, forks, etc (giving a more accurate impression about the status of the project).

Compare that with a social share from the same project's pub package:

Note the static stock image for "pub", with no package branding/identification/stats

To help people promote their awesome work as hosted on pub.dev, we should consider how to make a more rich "social share snippet image". We can use GitHub as the inspiration here.

Ideally, when sharing a package's pub.dev URL via social services like X, it would be good to:

• auto-generate a snippet image
• including the name of the package
• including any primary image from the package
• including a one-line description of the package
• including some basic stats like stars, pub score

Thanks for considering!

[sigurdm]

Seems like for twitter we need some meta tags: https://developer.x.com/en/docs/twitter-for-websites/cards/guides/getting-started

Google chat seems to use opengraph (hinted here https://webapps.stackexchange.com/questions/151458/is-it-possible-to-change-the-image-google-chat-shows-for-a-url-link): https://ogp.me/ (og:image, og:description)

[sigurdm]

Seems we are already creating these tags, but the content is not as precise as wanted.

https://github.com/dart-lang/pub-dev/blob/bf3d7029ebcdb5ec9ab7bb045f19ed0d6124f792/app/lib/frontend/templates/views/shared/layout.dart#L75

We could specialize the image if there is one in the readme or perhaps use one of the screenshots.

https://robolly.com/open-graph-preview/?url=https://pub.dev/packages/retry

[halildurmus]

I believe the best approach would be adding a new field to the pubspec.yaml, for example social_image, which would allow package authors to specify a preferred image for social previews. If omitted, an image from the screenshots or one embedded in the README could be used. In cases where no images are available, pub.dev could generate a preview image, similar to how GitHub does.

Alternatively, if the social_image field is omitted, the preview image generated by pub.dev would be used.

[isoos]

I think we shouldn't add yet another tag into pubspec.yaml for this, as if you have a screenshot, you already order them by importance, and the first one will be the one displayed on the package listing pages. We should just reuse it for social media sharing.

[sigurdm]

and the first one will be the one displayed on the package listing pages.

However, the intended semantics of screenshots is to be ... screenshots - not clear that that is the same as a display image.

[sigurdm]

But I agree, adding yet another pubspec property just for this also sucks

[halildurmus]

and the first one will be the one displayed on the package listing pages.

However, the intended semantics of screenshots is to be ... screenshots - not clear that that is the same as a display image.

+1 to this. Also, the documentation of the screenshots property states:

Don't include logos or other branding imagery in this section.

[FMorschel]

I prefer a specific and explicit place for us to place that if not on pubspec.yaml directly, maybe somewhere on the actual website (it feels weird since nothing else is done through it).

[dickermoshe]

Why not use a style similar to Github?

I would work on this myself, my only question is:

1. What package would be acceptable for creating images. There is a maintained package of opencv on pub. Although I doubt you would feel comfortable using it.
2. A separate API would need to be created to generating these image. /genimage?package=drift which would generate a new image if the package stats changed from the last request.
3. How would we go about caching this image
4. What information should we show? (duh)

[sethladd]

Yes, I was assuming that if this was done it would be similar to how Github does it:

For (4), see the original issue description above: https://github.com/dart-lang/pub-dev/issues/7886#issue-2423390180

The default social share image would be some auto-generated image of the package name, purpose, and other stats from pub. This can always be overridden if the package wants to provide a specified image to use instead.

[sigurdm]

Just for reference: in github this seems to be configured outside the repo: https://docs.github.com/en/repositories/managing-your-repositorys-settings-and-features/customizing-your-repository/customizing-your-repositorys-social-media-preview

[dickermoshe]

@isoos It seems that part of pub.dev infra is not included in this repo. The only reference to uploading images seems to be here:

https://github.com/dart-lang/pub-dev/blob/bd68aa0d6fc07efcdd9d45035bb943c47b30fa62/app/lib/package/screenshots/backend.dart#L37-L68

However I can only find a single reference to this upload function in a test file.

Does this repo contain the code which uploads screenshots?

This location seems to be the best place to upload the social images. I will DIY some opencv once I see a clear path for the infra

[sigurdm]

The screenshots are uploaded from the worker which is running pana. See perhaps: https://github.com/dart-lang/pana/blob/master/lib/src/screenshots.dart

[isoos]

Does this repo contain the code which uploads screenshots?

Screenshots are extracted via pana (see link above) and uploaded as part of the analysis blob. I think the screenshots/backend method you've linked to is now obsolete. (a question to @szakarias)

The related currently used code is in task/backend.dart and also in routes.dart under the .../gen-res/... handler.

[isoos]

I will DIY some opencv once I see a clear path for the infra

Please note that we would want to discuss the design (UI and backend) first, before accepting any PR. Providing good arguments and design is more helpful at this stage than any code.

[dickermoshe]

Splitting the Issue

I believe this issue can be divided into two distinct features:

1. Providing an appealing infographic when pub.dev links are shared on social media
2. Allowing package authors to customize these graphics

Reasons for splitting:

Based on my experience, very few package authors customize social media previews even when given the option. Looking at the top 10 starred repositories, none customize this feature. Therefore, I don't think customization should be a prerequisite for implementing the basic functionality.

Additionally, the customization component significantly increases complexity compared to the original issue:

• Modifying the pubspec format would create friction for minimal benefit
• Adding a UI to the website introduces complexity to what is currently a streamlined interface
• Most package customizations are already handled through the pubspec format; adding another interface specifically for social previews seems inconsistent with the platform's design philosophy

Since this feature would be used by relatively few authors but adds considerable complexity, I recommend implementing the basic infographic first, then evaluating whether customization options are truly needed based on user feedback.

[sethladd]

Just for reference: in github this seems to be configured outside the repo: https://docs.github.com/en/repositories/managing-your-repositorys-settings-and-features/customizing-your-repository/customizing-your-repositorys-social-media-preview

thanks! Yeah, that seems to be docs for how to replace the default social share card.

https://github.com/dart-lang/pub-dev/issues/7886#issuecomment-2833652378 has a screenshot of a default social share card from github, which seems to be auto generated to include stats like contributors, stars, forks, etc.

My wish or dream is that pub's default social share card is auto generated and contains info such as:

including the name of the package including any primary image from the package including a one-line description of the package including some basic stats like stars, pub score and including a one-liner for pub (like the bottom of the github social share card is a one-liner for github)

[sethladd]

• Providing an appealing infographic when pub.dev links are shared on social media
• Allowing package authors to customize these graphics

Agreed! Let's split into two requests.

[sethladd]

Here's an example of what I'm thinking, for the default social share card coming out of pub. Just an example:

obviously we'd use real text and values :)

edit: updated proposed UI

[dickermoshe]

@isoos I'm working on a design for how the backend would handle image generation.

It seems now that pub_worker only handles a single payload which instructs it to rebuild a package. This is a relatively expensive process and generating new images there would be unreasonable.

Generating new images will need to be done relatively frequently. Exactly how and when we decide that an image is stale would involve a couple of factors, but it would still be much more frequent than pub_worker can handle.

I will investigate how intensive opencv is, and if we can do it on the frontend server itself. Otherwise we would either need to create another background worker, or adapt pub_worker to handle different types of payloads

1. Is there a more general purpose background-task api that pub.dev already has?
2. Can shelf do work after a response is returned? Maybe in an isolate?

[dickermoshe]

@sethladd needs better contrast on the bottom

[sethladd]

@sethladd needs better contrast on the bottom

ack, good catch. once we figure out how to do this, we can tweak the design.