feat: dynamic OG images for docs #986 #1291

iAverages · 2023-03-22T22:59:52Z

Adds dynamic OG images for documentation.

Closes #986

✅ Checklist

I have followed every step in the contributing guide (updated 2022-10-06).
The PR title follows the convention we established conventional-commit
I performed a functional test on my final commit

Changelog

Setup Astro for server builds
Setup route for generating dynamic images using Satori

Screenshots

English:

Large title (Title font gets reduced to avoid overflow and word breaking)

Other LFR Languages:

RTL Languages:

💯

Need to tweak it to make it look nicer, doing this for testing quick

changeset-bot · 2023-03-22T22:59:55Z

⚠️ No Changeset found

Latest commit: 6988edb

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

vercel · 2023-03-22T22:59:56Z

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

Name	Status	Preview	Comments	Updated (UTC)
create-t3-app	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Apr 24, 2023 5:33am

github-actions · 2023-03-22T23:00:06Z

Hey t3-oss/translators!

This PR contains changes to your language. Please review the changes ❤️.

OG.TS:

github-actions · 2023-03-22T23:11:43Z

⚡️ Lighthouse report for the changes in this PR:

Category	Score
🟢 Performance	96
🟢 Accessibility	100
🟢 Best practices	100
🟢 SEO	100
🔴 PWA	30

Lighthouse ran on https://create-t3-app-git-fork-iaverages-next-t3-oss.vercel.app/

iAverages · 2023-03-22T23:47:00Z

OG generation is working. I need to change the design of the OG images themselves. I plan to make the title bold and play around with the sizing + logo color. If anyone has any ideas on what we can use please share!

The red boxes are apart of debug mode in satori

iAverages · 2023-03-24T19:22:22Z

Enabling SSR with Astro means, by default, every page will be server-side rendered. Currently, when SSR is enabled prerendering pages (static page generation) is set to false for every page, with an opt-in variable export const prerender = true. Using SSR also means the automatic sitemap generation does not work.

On Astro's roadmap, they have plans to change the default to allow for prerendering by default, with opt-in for SSR. withastro/roadmap#539

If you guys do not want SSR then it would be best to wait for the Astro team to release the opt-in SSR per page.

what actually changed I will never know.

c-ehrlich

The OG images look really good now!

Would be nice to have a lil playground to be able to preview / modify them in dev. But IMO ok to merge this without, and open an issue to add it.

www/src/config.ts

iAverages · 2023-04-06T18:29:54Z

The OG images look really good now!

Would be nice to have a lil playground to be able to preview / modify them in dev. But IMO ok to merge this without, and open an issue to add it.

Glad you like them :)

Did you see my previous comment about the issues around enabling SSR with Astro? Is the sitemap something that is important to you guys? The sitemap plugin cannot automatically generate the sitemap for SSR routes and due to how the server output mode works, all routes are SSR routes by default.

Just want to confirm since no one has responded about it

c-ehrlich

Sorry for the delay, somehow missed this in my notifications

re SSR/sitemaps: let's solve that when we get to it :)

* Prepare for OG image generation * Setup basic og image generation Need to tweak it to make it look nicer, doing this for testing quick * Dont optimize @resvg/resvg-js * Include protocol in URL for OG * Use OG route for OG images in docs * Use vercel URL for og images in meta * Cache OG responses * Changes to fetching fonts * Final OG image design * Make util for site url * Setup env for satori debug * -p doesnt include untracked files ._. * Delete unneeded assets * Make file name consistent * design 2 * Design 3 * Setup OG to use reading time + path route * Fix url on og image * Fix reading time * Use Astro site hostname * Add fonts for other languages (ar, zh-hans) * Fix linting issues * fix env debug mode * Add support for RTL languages in OG images * Remove unneeded not null assertion * Remove reading time After giving it some more thought, having a reading time doesn't make sense for docs, a blog sure but not docs. * Fix overflowing issue with long titles * Make title font smaller for larger text * Remove unused dep * Remove unused Frontmatter prop * Add reference to original place for og fonts code * Format astro config what actually changed I will never know. * Fix broken lock file * Actually fix lock file? * Remove unused reading time parameter * Use existing rtl language map --------- Co-authored-by: Christopher Ehrlich <[email protected]> Co-authored-by: Julius Marminge <[email protected]>

iAverages added 2 commits March 22, 2023 17:12

Prepare for OG image generation

350fe10

Setup basic og image generation

8aa5f78

Need to tweak it to make it look nicer, doing this for testing quick

github-actions bot added the 📚 documentation Improvements or additions to documentation label Mar 22, 2023

vercel bot had a problem deploying to Preview March 22, 2023 23:00 Failure

Dont optimize @resvg/resvg-js

cf4daa2

vercel bot deployed to Preview March 22, 2023 23:11 View deployment

Include protocol in URL for OG

63a8711

vercel bot deployed to Preview March 22, 2023 23:19 View deployment

Use OG route for OG images in docs

60b1b5f

vercel bot deployed to Preview March 22, 2023 23:29 View deployment

Use vercel URL for og images in meta

ef73ff2

vercel bot deployed to Preview March 22, 2023 23:41 View deployment

iAverages added 8 commits March 23, 2023 19:56

Cache OG responses

979986d

Changes to fetching fonts

6ba12ca

Final OG image design

8175057

Make util for site url

3a195ef

Setup env for satori debug

67d7fa0

-p doesnt include untracked files ._.

6e264b8

Delete unneeded assets

127c543

Make file name consistent

91fdace

vercel bot deployed to Preview March 24, 2023 18:44 View deployment

iAverages added 2 commits March 24, 2023 20:17

design 2

06e55f3

Design 3

9f2416b

vercel bot deployed to Preview March 24, 2023 20:18 View deployment

vercel bot deployed to Preview March 31, 2023 22:50 View deployment

iAverages added 2 commits March 31, 2023 23:51

Format astro config

77438c1

what actually changed I will never know.

Fix broken lock file

1d9af8c

vercel bot deployed to Preview March 31, 2023 22:55 View deployment

Actually fix lock file?

756db02

vercel bot deployed to Preview March 31, 2023 22:58 View deployment

Remove unused reading time parameter

0d6afb6

vercel bot deployed to Preview March 31, 2023 23:01 View deployment

iAverages requested a review from juliusmarminge March 31, 2023 23:02

c-ehrlich reviewed Apr 2, 2023

View reviewed changes

www/src/config.ts Outdated Show resolved Hide resolved

Use existing rtl language map

ca12ed2

vercel bot deployed to Preview April 6, 2023 18:18 View deployment

Resolve merge conflicts

c759a77

vercel bot deployed to Preview April 6, 2023 18:22 View deployment

juliusmarminge requested a review from c-ehrlich April 10, 2023 14:46

c-ehrlich approved these changes Apr 17, 2023

View reviewed changes

Merge branch 'next' into next

665c3ce

vercel bot deployed to Preview April 17, 2023 19:30 View deployment

c-ehrlich enabled auto-merge April 17, 2023 19:34

Merge branch 'next' into next

6988edb

juliusmarminge approved these changes Apr 24, 2023

View reviewed changes

juliusmarminge disabled auto-merge April 24, 2023 05:32

juliusmarminge enabled auto-merge April 24, 2023 05:32

vercel bot deployed to Preview April 24, 2023 05:33 View deployment

juliusmarminge added this pull request to the merge queue Apr 24, 2023

Merged via the queue into t3-oss:next with commit e5f2f73 Apr 24, 2023

iAverages mentioned this pull request Apr 26, 2023

fix: Error with older git version failing to initialize git repo #1385

Merged

3 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: dynamic OG images for docs #986 #1291

feat: dynamic OG images for docs #986 #1291

iAverages commented Mar 22, 2023 •

edited

Loading

changeset-bot bot commented Mar 22, 2023 •

edited

Loading

vercel bot commented Mar 22, 2023 •

edited

Loading

github-actions bot commented Mar 22, 2023 •

edited

Loading

github-actions bot commented Mar 22, 2023 •

edited

Loading

iAverages commented Mar 22, 2023

iAverages commented Mar 24, 2023

c-ehrlich left a comment

iAverages commented Apr 6, 2023 •

edited

Loading

c-ehrlich left a comment

feat: dynamic OG images for docs #986 #1291

feat: dynamic OG images for docs #986 #1291

Conversation

iAverages commented Mar 22, 2023 • edited Loading

✅ Checklist

Changelog

Screenshots

changeset-bot bot commented Mar 22, 2023 • edited Loading

⚠️ No Changeset found

vercel bot commented Mar 22, 2023 • edited Loading

github-actions bot commented Mar 22, 2023 • edited Loading

github-actions bot commented Mar 22, 2023 • edited Loading

iAverages commented Mar 22, 2023

iAverages commented Mar 24, 2023

c-ehrlich left a comment

Choose a reason for hiding this comment

iAverages commented Apr 6, 2023 • edited Loading

c-ehrlich left a comment

Choose a reason for hiding this comment

iAverages commented Mar 22, 2023 •

edited

Loading

changeset-bot bot commented Mar 22, 2023 •

edited

Loading

vercel bot commented Mar 22, 2023 •

edited

Loading

github-actions bot commented Mar 22, 2023 •

edited

Loading

github-actions bot commented Mar 22, 2023 •

edited

Loading

iAverages commented Apr 6, 2023 •

edited

Loading