Skip to content
This repository has been archived by the owner on Oct 23, 2023. It is now read-only.

Open graph for Snack and example wrapper #103

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Open graph for Snack and example wrapper #103

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 15 additions & 1 deletion website/src/components/ExpoSnackLandingPage.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,14 +17,28 @@ import RedirectStarterSnack from './RedirectStarterSnack';

export default function ExpoSnackLandingPage({match}) {
const {expoSnackPath} = match.params;
const title = React.useMemo(
Copy link

@slorber slorber Aug 10, 2022 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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/

CleanShot 2022-08-10 at 11 41 20@2x

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

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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!

Copy link

@slorber slorber Aug 10, 2022 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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/

() => `${expoSnackPath} | PlayTorch Snack`,
[expoSnackPath],
);

if (expoSnackPath == null || expoSnackPath.length === 0) {
return <RedirectStarterSnack />;
}

return (
<div>
<Head title={`${expoSnackPath} | PlayTorch Snack`} />
<Head title={title}>
<meta property="og:title" content={title} />
<meta name="description" content={title} />
<meta property="og:description" content={title} />
<link
rel="search"
type="application/opensearchdescription+xml"
title={title}
href="/opensearch.xml"
/>
</Head>
<LandingPageHeader
heroTitle={expoSnackPath}
nameOfSharedItem="snack"
Expand Down