[docs-infra] Use edge function for card generation #41188
Conversation
Netlify deploy previewhttps://deploy-preview-41188--material-ui.netlify.app/ Bundle size report |
alexfauquette
changed the title
There was a problem hiding this comment.
A quick review
I recall facebook/react#13838, but It doesn't seem to be a problem anymore.
netlify/edge-functions/og-image.tsx
Outdated
| /* eslint-disable no-console */ | ||
| import React from 'https://esm.sh/[email protected]'; | ||
| import { ImageResponse } from 'https://deno.land/x/og_edge/mod.ts'; | ||
| /** | ||
| * The matching from github user to their full name | ||
| */ | ||
| const fullName: Record<string, string> = { |
There was a problem hiding this comment.
Do we need an edge function? It seems that a regular function could do the job.
Is there a way to not duplicate this?
There was a problem hiding this comment.
Good question. It's on my "to explore" with the "should we use netlify CDN with it" 👍
There was a problem hiding this comment.
I searched a bit, but seems that functions are not able to support JSX which would make it much harder to define the image. Could be done with JSX object ({ type: 'div', props: { children: 'hello, world', style: { color: 'black' },},},) but not very good DX
The reason why I used edge function at first is because the package I'm using: https://github.com/ascorbic/og-edge is made to run on Netlify Edge Functions. Since the author works at Netlify I assumed he knows which kind of function is the best (not by best technical decision)
There was a problem hiding this comment.
For the non duplication aspect of the fullName object, I'm not sure.
It's a bit the issue with those functions: they are all independent. But we could expose it in a URL and fetch it like this
import { fullName } from 'https://mui.com/public/contributors.json'
There was a problem hiding this comment.
I searched a bit, but seems that functions are not able to support JSX which would make it much harder to define the image. Could be done with JSX object ({ type: 'div', props: { children: 'hello, world', style: { color: 'black' },},},) but not very good DX
Right, https://www.larocque.dev/projects/generative-open-graph-images/ says the same thing. We would need to add an intermediate step that converts JSX to JS. No preferences.
It's a bit the issue with those functions: they are all independent. But we could expose it in a URL and fetch it like this
This #41188 (comment) seems simple enough as a solution.
|
I've updated the description to match the current state of the PR |
netlify/edge-functions/og-image.tsx
Outdated
| <div | ||
| style={{ | ||
| display: 'flex', | ||
| flexDirection: 'row', | ||
| flexWrap: 'wrap', | ||
| position: 'absolute', | ||
| bottom: 100, | ||
| left: 100, | ||
| right: 100, | ||
| }} | ||
| > | ||
| {authors && | ||
| authors |
There was a problem hiding this comment.
Would it be possible to render this whole div conditionally depending on whether there are authors or not? Just so the page's title is centered in case it's not a blog post (and thus without authors).
| @@ -8,6 +8,7 @@ export type MuiProductId = | |||
| | 'system' | |||
| | 'docs-infra' | |||
| | 'docs' | |||
| | 'toolpad' | |||
There was a problem hiding this comment.
Doesn't exist anymore:
| | 'toolpad' | |
| | 'toolpad-core' | |
| | 'toolpad-studio' |
But I think should be in a different PR
| authors: ['alexfauquette'] | ||
| tags: ['Company'] | ||
| card: false | ||
| cardTitle: blog with\n*custom* card |
| date: 2022-07-28T00:00:00.000Z | ||
| authors: ['alexfauquette'] | ||
| tags: ['Company'] | ||
| card: false |
There was a problem hiding this comment.
Should we remove this? It would make sense for me to not throw is cardTitle is defined to take over.
| card: false |
I would also rename the other pages that use this so it's clear, something like this
| card: false | |
| manualCard: true |
Closes #32036
The
/edge-functions/og-image?3 search params:product: The text displayed next to the MUI logotitle, which can contain*to delimit the highlighted text sectionsdescriptiona paragraph added under the main titleauthorsthe GitHub username of the authors, divided by a coma.Result of adding caching
Generating the card without caching (when you pass search params for the first time) take around 2s
Rendering card from the cache (when you pass search params already seen) take around 100ms
Note
The branding pages (for exemple mui.com) don't get a custom card. For those, I would be in favor of creating hand made ones, because they might be the most shared
Test on linkedin
https://deploy-preview-41188--material-ui.netlify.app/joy-ui/getting-started/
https://deploy-preview-41188--material-ui.netlify.app/joy-ui/main-features/dark-mode-optimization/
https://deploy-preview-41188--material-ui.netlify.app/joy-ui/integrations/material-ui/
https://deploy-preview-41188--material-ui.netlify.app/experiments/blog/blog-custom-card/
