Open graph for Snack and example wrapper

[raedle]

Summary: Adding open graph meta elements to the Snack and example wrapper pages to render the Snack/example title/name on thumbnail generation

Differential Revision: D38482624

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
playtorch	✅ Ready (Inspect)	Visit Preview	Aug 6, 2022 at 4:56AM (UTC)

[facebook-github-bot]

This pull request was exported from Phabricator. Differential Revision: D38482624

[facebook-github-bot]

This pull request was exported from Phabricator. Differential Revision: D38482624

[slorber]

This can't work at build time.
match.params is probably an empty object there because Docusaurus does not know all the paths it has to build at build time, and it builds a single static HTML file.

view-source:https://playtorch-git-fork-raedle-export-d38482624-fbopensource.vercel.app/snack/@raedle/image-classification/index.html

Note: I don't understand why you don't get something like undefined | PlayTorch Snack 😅 that's worth opening the static HTML file locally and see what it contains.

---

But this works at runtime, and Docusaurus is able to "fix" your wrong metadata after React is loaded and hydrated: https://playtorch-git-fork-raedle-export-d38482624-fbopensource.vercel.app/snack/@raedle/image-classification/

---

Unfortunately, I believe social previews require correct metadata to be set correctly at build time. They probably try to optimize their crawlers and only load the HTML file, not executing any JS.

So you really need to produce one HTML file per stack if you want social previews to work.

You can just do something like:

staticSnackList.forEach(snack => addRoute({
  path: "/snack/" + snack.path,
  exact: true,
}})

I don't think social previews are compatible with dynamic routes, this would require server-side rendering. Note I'm not sure it's particularly interesting to render those snacks inside Docusaurus? You could as well use a Vercel lambda to server-side rendering a similar HTML template with the Snack embed => there you could server-render the metadata you want so that the first HTML content received by the user contains the appropriate metadata

[raedle]

Thanks @slorber for taking the time looking into this!

The Snacks aren't static and not known in advance, which is why the following won't work in our case unfortunately :/

staticSnackList.forEach(snack => addRoute({
  path: "/snack/" + snack.path,
  exact: true,
}});

The dynamic snack route is a landing page for PlayTorch users to share their Snacks with others in the community. For example, if user A creates a Snack (e.g., @userA/foobar), the dynamic route is https://playtorch.dev/snack/@userA/foobar (foobar is the Snack named by the user). However, we won't know all the Snacks and Snack names that will be created by PlayTorch users.

As you mentioned and looking at the docs Understanding SSR, it seems like we need to break out of Docusaurus and implement a custom service that returns SSR pages with the correct Open Graph metadata.

Thanks again for your response!

[slorber]

Yes unfortunately it looks like you can't use static site generator for this use-case.

Note that Vercel and others (Cloudflare, Netlify) have edge runtimes now, which means you can also write some code to "customize" the static HTML being served to the user. Even if the file has generic metadata, technically you could use request info to update the response and serve a different response per request.

I don't know if Vercel has that already (@leerob probably knows) but I've definitively seen this used on Cloudflare Workers: https://developers.cloudflare.com/workers/examples/modify-response/