[docs-infra] Use edge function for card generation #41188

alexfauquette · 2024-02-19T16:18:05Z

Closes #32036

The /edge-functions/og-image? 3 search params:

product: The text displayed next to the MUI logo
title, which can contain * to delimit the highlighted text sections
description a paragraph added under the main title
authors 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/

mui-bot · 2024-02-19T16:20:57Z

Netlify deploy preview

https://deploy-preview-41188--material-ui.netlify.app/

Bundle size report

No bundle size changes (Toolpad)
No bundle size changes

Generated by 🚫 dangerJS against a570b9a

oliviertassinari

A quick review

I recall facebook/react#13838, but It doesn't seem to be a problem anymore.

docs/src/modules/components/AppLayoutDocs.js

netlify/edge-functions/docs-image.tsx

oliviertassinari · 2024-02-28T23:46:53Z

netlify/edge-functions/og-image.tsx

+/* 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> = {


Do we need an edge function? It seems that a regular function could do the job.

Is there a way to not duplicate this?

Good question. It's on my "to explore" with the "should we use netlify CDN with it" 👍

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)

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'

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.

netlify/edge-functions/og-image.tsx

…og-image

alexfauquette · 2024-03-11T11:21:38Z

I've updated the description to match the current state of the PR

danilo-leal · 2024-03-18T22:28:54Z

netlify/edge-functions/og-image.tsx

+        <div
+          style={{
+            display: 'flex',
+            flexDirection: 'row',
+            flexWrap: 'wrap',
+            position: 'absolute',
+            bottom: 100,
+            left: 100,
+            right: 100,
+          }}
+        >
+          {authors &&
+            authors


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).

oliviertassinari

It feels like we are close 👍

netlify/edge-functions/og-image.tsx

oliviertassinari · 2024-03-21T14:16:24Z

docs/src/modules/utils/getProductInfoFromUrl.ts

@@ -8,6 +8,7 @@ export type MuiProductId =
  | 'system'
  | 'docs-infra'
  | 'docs'
+  | 'toolpad'


Doesn't exist anymore:

Suggested change

| 'toolpad'

| 'toolpad-core'

| 'toolpad-studio'

But I think should be in a different PR

oliviertassinari · 2024-03-21T14:31:40Z

docs/pages/experiments/blog/blog-custom-card.md

+authors: ['alexfauquette']
+tags: ['Company']
+card: false
+cardTitle: blog with\n*custom* card


oliviertassinari · 2024-03-21T14:32:19Z

docs/pages/experiments/blog/blog-custom-card.md

+date: 2022-07-28T00:00:00.000Z
+authors: ['alexfauquette']
+tags: ['Company']
+card: false


Should we remove this? It would make sense for me to not throw is cardTitle is defined to take over.

Suggested change

card: false

I would also rename the other pages that use this so it's clear, something like this

Suggested change

card: false

manualCard: true

docs/pages/experiments/blog/blog-custom-card.md

docs/src/modules/components/TopLayoutBlog.js

netlify/edge-functions/og-image.tsx

danilo-leal · 2024-03-22T17:03:25Z

Last idea from me — how about we render the <p class="description" of the docs on the image, too? I saw this in the Stripe docs OG image and felt like it is such a nice detail to quickly give more context to visitors.

Signed-off-by: Olivier Tassinari <olivier.tassinari@gmail.com>

…og-image

danilo-leal

Thanks for including the description! 🙏

netlify/edge-functions/og-image.tsx

Co-authored-by: Danilo Leal <67129314+danilo-leal@users.noreply.github.com> Signed-off-by: Alexandre Fauquette <45398769+alexfauquette@users.noreply.github.com>

alexfauquette · 2024-03-29T15:15:27Z

I'm not fully convinced by the description. They have not been written with this usecase in mind, and it's clearly visible. Description are long sentence.

https://deploy-preview-41188--material-ui-apps.netlify.app/edge-functions/og-image?product=Material%20UI&title=Overview&description=Material%20UI%20is%20an%20open-source%20React%20component%20library%20that%20implements%20Google%27s%20Material%20Design.%20It%27s%20comprehensive%20and%20can%20be%20used%20in%20production%20out%20of%20the%20box.

https://deploy-preview-41188--material-ui-apps.netlify.app/edge-functions/og-image?product=Material%20UI&title=Frequently%20Asked%20Questions&description=Stuck%20on%20a%20particular%20problem?%20Check%20some%20of%20these%20common%20gotchas%20first%20in%20the%20FAQ.

https://deploy-preview-41188--material-ui-apps.netlify.app/edge-functions/og-image?product=Material%20UI&title=React%20Autocomplete%20component&description=The%20autocomplete%20is%20a%20normal%20text%20input%20enhanced%20by%20a%20panel%20of%20suggested%20options.

danilo-leal · 2024-04-01T11:13:26Z

They have not been written with this usecase in mind, and it's clearly visible. Description are long sentence.

They definitely haven't 😃 But it does seem to add value as a quick way to instruct readers what the page is about just from the OG image (particularly when tossed around Twitter). I think it's okay if we need to fine-tune some pages' descriptions given this newer "constraint".

But looking at the screenshot above, though, the whole thing seems to be using IBM Plex Sans now (the titles should still use General Sans). Also, I'd ask just to change the font-size/line-height a bit to 28px and 46px respectively; they ended up being too big, I think.

netlify/edge-functions/og-image.tsx

Signed-off-by: Alexandre Fauquette <45398769+alexfauquette@users.noreply.github.com>

alexfauquette · 2024-04-03T06:22:32Z

the whole thing seems to be using IBM Plex Sans now

Fixed in commit b20e681 I forgot to put the correct name for this font 🙈 fixed now

alexfauquette · 2024-04-03T07:43:30Z

I added

a docs pages: https://deploy-preview-41188--material-ui.netlify.app/experiments/docs/og-card/
option to have custom description: cardDescription

danilo-leal

Sweet! In these last commits, I tweaked a bit the image's design a bit and added a StackBlitz link on the docs page with a reproduction of the image so we can more easily preview the design and test any visual adjustments there :) Looking awesome, thank you for working on this! 🤙

Signed-off-by: Olivier Tassinari <olivier.tassinari@gmail.com> Signed-off-by: Alexandre Fauquette <45398769+alexfauquette@users.noreply.github.com> Co-authored-by: Danilo Leal <67129314+danilo-leal@users.noreply.github.com> Co-authored-by: Olivier Tassinari <olivier.tassinari@gmail.com>

oliviertassinari

Great 👍

oliviertassinari · 2024-04-11T22:38:59Z

docs/pages/experiments/docs/og-card.md

+
+## Card design preview
+
+Visit [this StackBlitz demo](https://stackblitz.com/edit/vitejs-vite-ukeejd?file=src%2FApp.tsx) to see how the card looks like without having to run a random page on an OG preview site.


I have used https://github.com/ascorbic/og-edge?tab=readme-ov-file#usage to debug this locally.

Make edge function work

e11d71a

alexfauquette added the scope: docs-infra Specific to the docs-infra product label Feb 19, 2024

alexfauquette added 5 commits February 23, 2024 16:53

blog template

7012f88

git api url

e2785b6

test

c437d42

fix

4f341fd

update

017c373

alexfauquette changed the title ~~[docs-infra] Test edge function for card generation~~ [docs-infra] Use edge function for card generation Feb 27, 2024

Merge remote-tracking branch 'upstream/master' into og-image

99d4b20

oliviertassinari reviewed Feb 28, 2024

View reviewed changes

danilo-leal added 2 commits March 5, 2024 17:08

add small design tweaks

658d968

tweak scope identifier text element

7901c63

danilo-leal reviewed Mar 5, 2024

View reviewed changes

netlify/edge-functions/og-image.tsx Outdated Show resolved Hide resolved

alexfauquette added 7 commits March 6, 2024 13:56

Merge remote-tracking branch 'upstream/master' into og-image

ae78278

Merge branch 'og-image' of github.com:alexfauquette/material-ui into …

b44ce6f

…og-image

feedbacks

91b25a1

fix

f5bdae3

lint fix

5f5e342

fix missing product

14c47c0

add cache

fcbcfa0

alexfauquette marked this pull request as ready for review March 11, 2024 11:22

alexfauquette requested review from oliviertassinari, danilo-leal and a team March 11, 2024 11:22

danilo-leal reviewed Mar 18, 2024

View reviewed changes

oliviertassinari reviewed Mar 21, 2024

View reviewed changes

oliviertassinari added the enhancement This is not a bug, nor a new feature label Mar 21, 2024

feedbacks

04ea208

alexfauquette added 2 commits March 22, 2024 17:45

Merge remote-tracking branch 'upstream/master' into og-image

b4e1a65

remove debug

fb84396

oliviertassinari mentioned this pull request Mar 26, 2024

[website] Improve job og image #41672

Merged

oliviertassinari and others added 5 commits March 26, 2024 21:57

Fix typo

8fcc08e

Signed-off-by: Olivier Tassinari <olivier.tassinari@gmail.com>

move headers to manual card

1629679

always use large card for blog post

ab4d35d

Add description

d0203cc

Merge branch 'og-image' of github.com:alexfauquette/material-ui into …

bdc0b9a

…og-image

danilo-leal reviewed Mar 29, 2024

View reviewed changes

netlify/edge-functions/og-image.tsx Outdated Show resolved Hide resolved

netlify/edge-functions/og-image.tsx Outdated Show resolved Hide resolved

add IBM font

4b2f937

Co-authored-by: Danilo Leal <67129314+danilo-leal@users.noreply.github.com> Signed-off-by: Alexandre Fauquette <45398769+alexfauquette@users.noreply.github.com>

Merge remote-tracking branch 'upstream/master' into og-image

269a340

alexfauquette commented Apr 2, 2024

View reviewed changes

netlify/edge-functions/og-image.tsx Outdated Show resolved Hide resolved

Update netlify/edge-functions/og-image.tsx

b20e681

Signed-off-by: Alexandre Fauquette <45398769+alexfauquette@users.noreply.github.com>

alexfauquette added 4 commits April 3, 2024 08:25

modify font-size

50f3802

refine the card generation docs

44b92b8

fix typos

c6c0c6e

add in the nav bar

32caa7f

danilo-leal added 2 commits April 3, 2024 19:46

tweak documentation

0e9d920

fine-tune the OG card design

a570b9a

danilo-leal approved these changes Apr 3, 2024

View reviewed changes

alexfauquette merged commit 61e3fc4 into mui:master Apr 10, 2024
22 checks passed

oliviertassinari mentioned this pull request Apr 11, 2024

[docs-infra] Improve Twitter OG:image #41860

Merged

oliviertassinari reviewed Apr 11, 2024

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[docs-infra] Use edge function for card generation #41188

[docs-infra] Use edge function for card generation #41188

alexfauquette commented Feb 19, 2024 •

edited

mui-bot commented Feb 19, 2024 •

edited

oliviertassinari left a comment

oliviertassinari Feb 28, 2024

alexfauquette Feb 29, 2024

alexfauquette Mar 4, 2024

alexfauquette Mar 6, 2024

oliviertassinari Mar 21, 2024

alexfauquette commented Mar 11, 2024 •

edited

danilo-leal Mar 18, 2024

oliviertassinari left a comment

oliviertassinari Mar 21, 2024 •

edited

oliviertassinari Mar 21, 2024

oliviertassinari Mar 21, 2024

danilo-leal commented Mar 22, 2024

danilo-leal left a comment

alexfauquette commented Mar 29, 2024 •

edited

danilo-leal commented Apr 1, 2024

alexfauquette commented Apr 3, 2024

alexfauquette commented Apr 3, 2024

danilo-leal left a comment •

edited

oliviertassinari left a comment

oliviertassinari Apr 11, 2024


		## Card design preview

		Visit [this StackBlitz demo](https://stackblitz.com/edit/vitejs-vite-ukeejd?file=src%2FApp.tsx) to see how the card looks like without having to run a random page on an OG preview site.

[docs-infra] Use edge function for card generation #41188

[docs-infra] Use edge function for card generation #41188

Conversation

alexfauquette commented Feb 19, 2024 • edited

Result of adding caching

Note

Test on linkedin

mui-bot commented Feb 19, 2024 • edited

Netlify deploy preview

Bundle size report

oliviertassinari left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

alexfauquette commented Mar 11, 2024 • edited

Choose a reason for hiding this comment

oliviertassinari left a comment

Choose a reason for hiding this comment

oliviertassinari Mar 21, 2024 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

danilo-leal commented Mar 22, 2024

danilo-leal left a comment

Choose a reason for hiding this comment

alexfauquette commented Mar 29, 2024 • edited

danilo-leal commented Apr 1, 2024

alexfauquette commented Apr 3, 2024

alexfauquette commented Apr 3, 2024

danilo-leal left a comment • edited

Choose a reason for hiding this comment

oliviertassinari left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

alexfauquette commented Feb 19, 2024 •

edited

mui-bot commented Feb 19, 2024 •

edited

alexfauquette commented Mar 11, 2024 •

edited

oliviertassinari Mar 21, 2024 •

edited

alexfauquette commented Mar 29, 2024 •

edited

danilo-leal left a comment •

edited