joinmastodon.org

Informational site for the Mastodon project

Submit translations here: https://crowdin.com/project/joinmastodon

Development

Installation

yarn
yarn run dev

See /package.json for more scripts.

Built with

• Next.js
• Tailwind.css
• React Query
• React Intl

Translations

Submit translations at Crowdin.

Translations are managed via Crowdin and distributed with react-intl. The basic translation workflow is:

1. Messages are declared using the <FormattedMessage> component
2. Default messages are extracted to locales/en.json by running yarn extract
3. The locale files are synced with the Crowdin project. Any new messages in the source file(locales/en.json) are made available for translation for other languages. Any new translated messages are downloaded back to the repo into corresponding locale files (e.g. locales/es.json).
4. On build, each locale loads its corresponding messages from getStaticProps() (example).

Internationalized Routing

Localized versions of each page are hosted at dedicated URLs, making it easier for web crawling in users' preferred language. (docs)

Image optimization

Raster images should be added at the maximum resolution they'll be displayed at. If art direction is not required, mobile images will be generated automatically. (docs)

Deployment

Next.js should be hosted using a Node.js server. (see instructions). While it absolutely can exported to static HTML,

• image optimization (for automatic webp conversion and compression)
• internationalized routing (code reference)
• and redirects (code reference)

are the primary benefits of a Node.js server for this project.

For now, Node 16 LTS is recommended for building the site until support for Node 18 is provided by Squoosh.