-
-
Notifications
You must be signed in to change notification settings - Fork 32.3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[docs-infra] Use edge function for card generation #41188
Conversation
Netlify deploy previewhttps://deploy-preview-41188--material-ui.netlify.app/ Bundle size report |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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/react@18.2.0'; | ||
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Good question. It's on my "to explore" with the "should we use netlify CDN with it" 👍
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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).
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
It feels like we are close 👍
@@ -8,6 +8,7 @@ export type MuiProductId = | |||
| 'system' | |||
| 'docs-infra' | |||
| 'docs' | |||
| 'toolpad' |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Smart
date: 2022-07-28T00:00:00.000Z | ||
authors: ['alexfauquette'] | ||
tags: ['Company'] | ||
card: false |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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 sectionsdescription
a paragraph added under the main titleauthors
the 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/