JoinMastodon Documentation

The project must be hosted using a Node.js server (self-hosting) rather than a static HTML export. This requirement is necessary to support the following features:

• Image Optimization: Automatic WebP conversion and compression.
• Internationalized Routing: Localized versions of pages hosted at dedicated URLs for better SEO and crawling.
• Redirects: Custom redirect logic configured in next.config.js.

Translations are managed via Crowdin and distributed using react-intl. The project follows a specific workflow for adding and syncing translations:

1. Declare Messages: Use the <FormattedMessage> component in your source files to declare translatable strings.
2. Extract Defaults: Run yarn extract to pull default messages into locales/en.json.
3. Sync with Crowdin: Sync the locales/en.json file with the Crowdin project. New messages from the source will appear in Crowdin for translators, and new translations will be downloaded back into corresponding locale files (e.g., locales/es.json).
4. Build: During the build process, each locale loads its messages via getStaticProps().

To develop the site locally, ensure you have Node.js version 20 installed. This project uses yarn for dependency management. If yarn is not available, you can install it using corepack enable and corepack prepare yarn@1.

Follow these steps to install dependencies and start the development server:

yarn
yarn run dev

The landing page uses getStaticProps to enable static site generation (SSG). It is exported using a wrapper function withDefaultStaticProps from the project's utilities.

export const getStaticProps = withDefaultStaticProps()

The Metrics component in the About page retrieves real-time statistics by fetching data from the https://api.joinmastodon.org/statistics endpoint. The returned data is an array of objects representing different time periods. To calculate growth or changes, the component compares the second-to-last entry (days.data[days.data.length - 2]) as the currentDay against the first entry (days.data[0]) as the compareDay.

// The underlying data fetch used by the Metrics component
fetch("https://api.joinmastodon.org/statistics").then((res) => res.json())

When building or extending a donation page using the DonatePage pattern, you can implement the OnDonateFn callback to redirect users to a checkout flow. The handler should construct a URL with the following parameters:

• url: The base donation URL.
• frequency: The donation frequency (e.g., one-time or recurring).
• amount: The amount as a string, formatted with zero decimal places (e.g., amount.toFixed(0)).
• currency: The selected currency.
• theme: The current UI theme.

Example implementation using next/navigation:

const handleDonate: OnDonateFn = useCallback(
  async (amount, frequency, currency) => {
    const params = new URLSearchParams({
      url: donation_url,
      frequency,
      amount: amount.toFixed(0),
      currency,
      theme,
    })
    router.push(`/donate/checkout?${params.toString()}`)
  },
  [donation_url, router, theme]
)

The DonatePage accepts several query parameters which are validated against a schema. These parameters allow for pre-configuring the donation widget:

Note: amount is coerced to an integer and must be positive and at least 100.

The Home component is the main landing page entrypoint for the application. It is a React component that renders the primary landing page layout, including the Hero section, Features, Why Mastodon, Testimonials, and Sponsors sections. It utilizes react-intl for internationalization and next/head for SEO metadata.

export default Home

When rendering the Board of Directors section, use the mapBoardPositionToLabel utility to transform raw position strings from the board data into human-readable labels for the UI.

// Usage within the board mapping loop
<span className="b2 block flex-grow !font-semibold text-gray-1">
  {mapBoardPositionToLabel(member.position)}
</span>