docs: language select and outdated docs banner

[juliusmarminge]

Closes #770

✅ 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

[Short description of what has changed]

---

Screenshots

[Screenshots]

💯

[vercel[bot]]

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

Name	Status	Preview	Updated
create-t3-app	✅ Ready (Inspect)	Visit Preview	Nov 23, 2022 at 8:53PM (UTC)

[changeset-bot[bot]]

⚠️ No Changeset found

Latest commit: 436e57576458a0ba8990775ff669b8d4fc3ca629

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

[github-actions[bot]]

⚡️ Lighthouse report for the changes in this PR:

Category	Score
🟢 Performance	100
🟢 Accessibility	100
🟢 Best practices	93
🟠 SEO	86
🟠 PWA	54

Lighthouse ran on https://create-t3-app-git-i18n-prep-t3-oss.vercel.app/

[juliusmarminge]

needs some more styling and transitions

[juliusmarminge]

@c-ehrlich I'm not sure how we're supposed to show how many revisions behind the English version the page is? Right now just fetching a single commit and comparing their dates.

What would be considered a revision?

[juliusmarminge]

This is how it looks:

[juliusmarminge]

Left todo:

• Animate opening?
• Close when clicking outside

[c-ehrlich]

The header is currently overflowing on mobile

The Vue docs (imo one of the best internationalizations) just uses the language icon without showing which language you're currently on. I think that's ok, the active language is somewhat self evident information (it's either the one you want to read the docs in, or it isn't)

Banner looks good from screenshots. Will take a look at the code tonight.

[nexxeln]

The Vue docs (imo one of the best internationalizations) just uses the language icon without showing which language you're currently on. I think that's ok, the active language is somewhat self evident information (it's either the one you want to read the docs in, or it isn't)

Yep I agree. It is taking too much space too. Also I don't think we need to generalize the languages with country flags. Just the language name is fine

[hodeinavarro]

Astro also includes a note block when a page is not translated at all, could this be added too?

Note This page is not available on your language yet, meanwhile you will see the english version. Help us translate! More information about how to contribute.

[juliusmarminge]

Yep I agree. It is taking too much space too. Also I don't think we need to generalize the languages with country flags. Just the language name is fine

I like flags :( Fair point about the generalization but I still think it adds something

[juliusmarminge]

We should probably have some fallback behavior if the files doesn't exist yet for a specific langauge right?

https://user-images.githubusercontent.com/51714798/202825138-10f76736-6c8f-4a08-a0e3-18bcf45fe1fe.mp4

Example: Astro renders the english version in the sidebar if it doesn't exist for the native language: