API endpoint for repo social media preview?

[Andrew6rant]

Hello, I was wondering if it was possible to change a repository's social media preview image (https://docs.github.com/en/repositories/managing-your-repositorys-settings-and-features/customizing-your-repository/customizing-your-repositorys-social-media-preview) without going through the GitHub website.

I didn't see anything in the GraphQL API nor the REST API, but I may have missed it.

Thanks,

Andrew Grant

[karol-brejna-i]

Same here. I went through GraphQL an REST APIs documentation. No luck.
Is there a way to bring this to the GitHub dev team as a feature request?

[ShivamJoker]

@Andrew6rant I think this should be a feature request, may I know why you marked this as answered?

[Andrew6rant]

Averagebit emailed me asking if I could mark their response as answered. It looked like there is no API endpoint, so I figured, why not?

If there's a specific way for me to request this feature, I'm all ears

[ShivamJoker]

I was told to ask here for the feature request, it should only be marked answered once we have the API I believe.

[Andrew6rant]

Alright, I've un-marked the comment.

[SableRaf]

I built a node.js tool that creates customizable OG images in the style of GitHub's own social media previews. It replicates the technique described on the GitHub blog in A framework for building Open Graph images. I was hoping to automate updates via GitHub actions but it looks like this will not be possible 🥲 I hope this feature gets implemented in the API some day so I can revisit this project!

[metaory]

@SableRaf good work,

It can be much simpler..

Without pptr

Here is my naive JIT design,

TL;DR

---
config:
  layout: elk
  theme: base
  themeVariables:
    lineColor: '#EE5588'
    mainBkg: '#EE5588'
    textColor: '#FFF'
---
flowchart LR
    Req(Request) -- GET --> R(Route)
    R --> C{"R2"}
    C -- HIT --> F(Fetch)
    C -- MISS --> Col(Collect)
    F --> Res(Respond)
    Col --> Pop(Populate)
    Pop --> Ras(Rasterize)
    Ras --> S(Store)
    S --> Res

Loading

---

You can replace Cloudflare with AWS or other providers

Services

• CF Workerd dynamic route
• CF KV with some TTL
• CF R2+lifecycle

Cache Miss

1. Dynamic route hit
2. Cache Miss
3. Collect data (gql queries)
4. Populate SVG template
5. Rasterize SVG
6. Store PNG
7. Prepare response

---

Looking at the docs, SVG is not supported and base64 data urls are discouraged,
So cant go with KV and data url b64

Some ref points:

CF

• github.com/kvnang/workers-og
• developers.cloudflare.com/workers/tutorials/generate-dynamic-og-images-using-workers
• og-image-generator-cloudflare-worker

which all use @vercel/og and @vercel/satori
not for very good reason, it can be simpler in vanilla without supporting jsx

Vercel

• npmjs.com/package/@vercel/og
  • github.com/vercel/next.js/packages/next/src/server/og/image-response.ts
• @vercel/satori convert HTML and CSS to SVG

[SableRaf]

Thanks for the suggestion—it’s an interesting approach, especially for scenarios where real-time or dynamic OG image generation is needed.

My project is focused on generating a static OG image for a repo using a GitHub Action. Since repository metadata doesn’t change that often, it would be good enough and more efficient to run it on a cron job, say once a day.

The main limitation I’m working around is that GitHub doesn’t have an API for updating repo OG images automatically (the topic of the discussion above). The dynamic infrastructure you suggested is not really applicable here since GitHub repos do not allow JIT rendering of OG images (unless I missed something huge).

That said, I can see how your design would work well in other contexts like a social media platform, or blogs with frequently changing content. Thanks again for sharing your thoughts!

[metaory]

Oops my bad, my ADHD brain got tunnel visioned to what it found interesting and completely ignored all context..

I'm sorry..

@SableRaf

Reading the original post again I now see what the goal was..

This is sth I was trying to achieve recently as well, and gave up midway,

Yes there is no public API to update repository image preview.

So I started reverse engineering what GitHub client is doing, piecing together their client code from sourcemaps and reconstructing the request they make.

This is the endpoint; writing to S3
POST:https://github.com/upload/policies/repository-images

Reading these we can reconstruct the request,

• modules/github/settings/upload-repository-image.ts
• modules/github/upload/batch-upload.ts
• modules/github/upload/attachment-upload.ts

You can let devtool unwrap them to debug,

Here some tool and ref to explore sourcemaps with relevant github code;

• settings-source-map
• settings-source-map-visuals

Lots of funny stuff they doing,, I stopped here

---

Btw I don't understand why GitHub not moving all these metadata to git files,

Here is how they could've done and be a good Linux citizen

1. GitHub repository description
   .git/description

2. GitHub repository topics
   .git/info/topics

3. GitHub repository social banner
   .git/info/social.png

...

I'm daydreaming again 🙃

Have a great day 🦉

[metaory]

stubborn disregard for git internals like .git/description from gh with nih syndrome .. 🫥