mastodon / joinmastodon

The official Mastodon project homepage

joinmastodon.org

This repository contains the source for joinmastodon.org, the informational site and landing portal for the Mastodon project.

You can submit translations via Crowdin (note: you will need to be logged-in to Crowdin for the link to work correctly). Read more below.

Development

To build and run the site locally, you'll need to have Node.js version 20 installed, which you can download from the Node.js website or install via tools like fnm or nvm. For dependency management, yarn is used, it should be automatically be installed when you install Node.js, if it's not available you can use corepack enable and corepack prepare yarn@1 to install it.

Installation

yarn
yarn run dev

See package.json for more scripts.

Contributing

See CONTRIBUTING for more information. All interactions with this and other repositories that are part of the Mastodon project are subject to the Mastodon Code of Conduct.

Built with

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

Translations

Translations are managed via Crowdin and distributed with react-intl. Submit translations at Crowdin. Note that you will need to be logged-in to an account on the Crowdin website for the link to the project to work correctly. The project will not accept translations submitted via other means, as they would fall outside of the workflow described below.

The basic translation workflow is:

1. Translatable messages are declared in the source files 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). The reasons that this has been chosen over a static HTML export are:

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

joinmastodon's Issues

Replace the press kit by an Identihub page

Identihub is a new FLOSS project to create a simple assets-downloads/visual-guidelines page for a project, with logos, colours and images ready to download. The page can be hosted on https://identihub.co or self-hosted (https://github.com/uracreative/identihub).

Could Mastodon benefit from it? So that journalists, instance admins, users and other projects can find the image they need. The ZIP file that is currently the press kit becoming a web page.

It would have:
– All the logo variations,
– The four colours,
– All the elephant illustrations,
– And something that is afaik missing, nice screenshots of the Mastodon UI.

Color scheme on landing page adding extra visual weight

What is the reason to have this information on the main page?
Seems to me like putting this somewhere less prominent would reduce the weight of the page.
It isn't relevant for that many people that want to join mastodon.

Not working

joinmastodon.org is not offering a list of instances, says "no results. . . for now"
Seems that instances.social is down. Have left a report there as well. Seems like a bad time for this to go down, since many people are looking for alternatives to Facebook...

Instance listing window isn't correctly framed

On my computer, when I scroll to the bottom of the instance list frame, the scroll (grey thing on the right) go below the frame bottom border and the last instance doesn't appear correctly in the frame but is mostly out of it.

Here's a screenshot of the result, you can see that the last instance insn't shown in the frame :
https://framapic.org/dHV1WZds5NfG/z4cRAvXeRVnM.png

With Firefox 60.0.1 (64bits) on a debian.

“Download press kit” link does not work

It just points to the top of page (“#”).

enhancement: Instance suggestion page

A page that asks a few questions from users and suggests an instance pulled from an opt-in database.

Mockup is available here:

https://latrani.github.io/joinmastodon/

This will need a backend and a way for instance admins to add themselves (providing the language info, description blurb, etc)

Some design doc stuff is here: https://public.etherpad-mozilla.org/p/Z3rHK08QsZ

CSS: sponsors aren't appropriately sized at <800px widths

Add "Getting started" button to "How it works" section

Supposed I want to learn more before joining.
This section...

...would send me to this section...

Now that I know about how Mastodon works, my desire to actually join is there - but there is no button to let me go on.

My suggestion:

Add a "Get started" - button:

to the "How it works" section.

enhancement: "Get Involved" page

There are lots of ways for folks to contribute to Mastodon as a project aside from forking it on Github; a 'get involved' link referencing community outreach, adminning, translation, etc etc, would be great to have alongside or possibly replacing the fork link.

See https://docs.google.com/document/d/1u-VoYemLXplvzEqnKOzMGikyIwTj9hLLYCO4fH44T9I/edit

Add social metatags

Add metatags to support enhanced links in social media and communicators.
https://dev.twitter.com/cards/types/summary-large-image
http://ogp.me

Remove national flags in the language selector

I suppose that the national flags in the language selector should be removed, because

• The national flag of the United Kingdom is representing for English language.
• The national flag of United Arab Emirates is representing for Arabic language.

But many other countries speaks these languages.

Top contributors

As there is list of sponsors, there should also be list of top contributors of Mastodon source code, and list of translators for each language. I think that because they are making Mastodon better directly (not through donations), they deserve place for them even more.

'Help me choose' button looks bad on mobile devices

On Moto X Play, 1080x1920, latest Chrome Beta

Enhancement: make sure people know they can pick any server and join with "get started" button

A compliant I have seen about joinmastodon.org is that clicking "get started" simply sends you to the "sign up" section without even explaining stuff like "joining any of these servers puts you in the Fedverse". A one-line summary for "how it works" should be added to the "get started" anchor so people know what they are doing with the "here is where I can sign up:" thing.

There is some "how it works" info on the join home page, it's just people are not guaranteed to read it. A video is nice, but not everyone has the time to watch it; the text description is at the bottom, so people may as well get confused and close the page without looking at it.

Use standard fork link

Maybe we can use the standard icons to feature the GitHub repository? Would be more recognizable

Client 'Fedi' missing in the apps section

https://www.fediapp.com/

Open source the "What is Mastodon" video

Pinging @Gargron

While not a joinmastodon issue per se, I couldn't find another way to request this, so: please release the What is Mastodon video under YouTube's CC BY license, so that it can be reuploaded into Wikipedia or the Internet Archive.

https://www.youtube.com/watch?v=IPSbNdBmWKE

Favicon is React logo

The favicon is the react logo! 🙂

enhancement: "Notable users" info

As a way to show Mastodon's reach, possibly as part of the feature list (#4), there could be a list of orgs using Mastodon, e.g. Pixiv, Numerama, etc.

Sponsor on Liberapay

9 months ago Mastodon joined Liberapay to accept donations. This is a open source and non-profit donation platform for libre creators and project like Mastodon. Could the link to Liberapay also be added beside the Patreon option?

"Become a sponsor" on the homepage and the sponsor page now links only to Patreon. This could be changed to "Sponsor on Patreon" and second button "Sponsor on Liberapay".

Mastodon's profile on Liberapay.

License?

I can't find any info how is joinmastodon licensed…

key part of the website can't be translated?

It seems the main part of the website is not in the translation strings?

As you can see the top bar is translated (to Polish in this case), but the page 'body' is in English, and not in strings in the repo.

Create a link that opens in given locale

It would be nice to have a link that already opens with a given locale. Something in the query string would already be enough, a subdomain would be perfect :)

How to register on source.joinmastodon.org

It's good to see mastodon on https://source.joinmastodon.org/mastodon/joinmastodon eventually may able to move https://github.com/tootsuite/mastodon to it. @Gargron
May i know how to register on https://source.joinmastodon.org/users/sign_in ? and mastodon.online credentials doesn't work for it

The wizard component doesn't get re-rendered when the locale is being changed

Small GIF of what's happening

Anchor links only work on second click

On Firefox clicking on buttons that are linking to #anchors seem to only work on a second click. Maybe there is some javascript thing going on?!

Add support for browsers without Javascript

Hi,

When using a browser without Javascript enabled, joinmastodon.org only shows a black page.
Given that this is a static page, would it be possible to send browsers the static HTML page directly?

JSON context URL http://joinmastodon.org/ns wrongly outputs HTML homepage

Causes friendica/friendica#10740

The URL http://joinmastodon.org/ns is used as a JSON @context URL with an expected JSON output . This output is used for JSON-LD compacting and expanding.

However today it outputs the HTML homepage of the website, even with the HTTP header Accept: application/ld+json. This makes any JSON-LD compacting or expanding operation on a JSON-LD document including http://joinmastodon.org/ns in their @context list fail with no possible recovery.

Please restore the former JSON content of the https://joinmastodon.org/ns URL which is used by several ActivityPub projects including https://github.com/superseriousbusiness/gotosocial and Friendica.

Poor indication of awesome huge instance list

The only indication of mastodon runnign on many servers is hidden in the few pixels of the custom styled scroll bar in the top right:

My suggestion would be to either make a prominent statement about the actual number of servers running, – or – have a more prominent scroll bar style. Key is to not be shy about the length of that list.

How to get our instance listed here?

thanks!

Bug: Instance finder looks very weird on mobile

"I speak all languages" is cut off on the right, icons are squeezed, ...

Chrome 65 on Android

Instance not listed

Since some days I've reopened registrations on my instance mastodonten.de. The instance is listed on instances.org but doesn't appear on joinmastodon. Since some days there are always the same instances shown (but there are so much more on instances.social?)

I would like to have listed mastodonten.de on joinmastodon.org.

Update press articles

New York Times: https://www.nytimes.com/2018/03/28/technology/social-media-privacy.html

TechCrunch Japan: https://jp.techcrunch.com/2017/04/20/mastodon/

PCmag: http://uk.pcmag.com/social-networking/88927/opinion/avoid-the-nutballs-and-conflict-on-mastodon

NPR: https://www.npr.org/sections/thetwo-way/2018/05/01/607361849/as-facebook-shows-its-flaws-what-might-a-better-social-network-look-like

Instance picker section blocked by uBlock Origin

uBlock Origin (v.1.13.4) in Firefox 54 is blocking the list in the Instance picker section.

Compress Images?

Hey there! What are your thoughts on compressing images to save bandwidth and improve page speed? Here's a summary of results I got from non-lossy compression:

And here's what it looks like with lossy compression:

Personally I think the lossiness look identical enough for the savings, and we could review the before/after in a PR. Just let me know which one you want and I'll send a PR.

Sign up wizard categories are redundant

For the part where you choose "I am a ...", some of the choices return exactly the same results. For example, "a developer" and "a sysadmin" is exactly the same set of instances.

Perhaps either collapse this into a more generalistic "techie" category, or rethink the usage of categories? Invariably, there will be some overlap between use-cases and some niches might be much closer than others.

Translations

Since this is becoming Mastodon’s official website, it should be multilingual! It’s currently not really possible to send the link to anyone not reading English since they won’t get anything, ever though Mastodon itself is well localised and the community covers a wide range of languages.

Some widgets are invisible at mobile phones

The language selector and search box in the Get started: Choose an instance section are invisible at mobile phones.

Add a "Mobile application" section

It would be great for new user to easily know that there is already several mobile application existing and avoiding them the trouble of looking for one or missing one that might suit their need better.

Chinese/Japanese font-family are not able to be "font-weight: 500"

Thanks for merge Japanese translation 👍

Btw its SCSS seems to specified font-weight as 500 for <strong> elements. I think it's nice design,
But sadly Chinese/Japanese characters usually doesn't have deference between font-weight: 400 and 500.

Screenshot:

Because we're using over 2000 characters and some are not supported such as 500, 700 etc. (If a designer designed 2000 letters in nine ways from 100 to 900, they must die.)

Anyway, could you change the strong element's style for font-weight: 600 / or apply a language-specific class such as .ja to parent elements such as body and apply styles appropriate for each languages?

How can a "instance picker" support a healty federated grouth

Idea.

Choses an (informed) arbitrary number for a healthy base of users for an instances. Say 20-200 users then base the ordering on user GROWTH in this range.

Then new instances are responsible to push there install into view and they should then organically grow with referrals based on visibility before dropping back to self grouth after they reach a sustainable size.

Healthy "federated" grouth rather than a few huge instances.

Just one idea.

Performance - Reflow issues

I noticed some performance issues lately on joinmastodon.org, appearing a few seconds after what looks like the initial load.

A quick profiling seems to point to the react-custom-scrollbars triggering a massive reflow for a couple of seconds, but I'll investigate more in-depth.

Screenshot of the profiling + JSON profile are attached

joinmastodon-reflow-profile.json.zip

Make the <title> translatable

As of now, the <title> is static. Since there's a catch phrase there, it might be a good idea to translate it to different languages.

The lang attribute doesn't change with the selected language

https://joinmastodon.org/ has a lang attribute in its<html> tag, which is a good thing when it comes to accessibility.
However, when changing the language of the page using the language picker in the top right part of the screen, the value of the attribute doesn't change. Whatever the selected language is, the attribute value will always be en.

The 'lang' parameter does not work correctly

When navigating to https://joinmastodon.org/ and selecting "Nederlands (nl)" from the list, the page is nicely translated (awesome! 👍 )

When navigating to https://joinmastodon.org/?lang=nl-NL the menu bar is translated, but the rest of the page remains in English. This appears to be a bug?

Elephant go on top of navbar

Hi 👋
A very small graphic issue.
When I choose Deutsch the elephant on top of the website go on top of the navbar.
Screenshot below.

Weblate

Title is self-explanatory, joinmastodon.org should be translatable on Weblate.

Cloudflare email protection

Hi,

When Javascript is not enabled, the “How it works” contains:

Each user account has a globally unique name (e.g. @[email protected])”.

This is probably caused by Cloudflare's email obfuscation.
As it does not seem to be needed on joinmastodon, could you disable it?

Finding sites by Tag/catogory

It's not a good step to take the hierarchy root (category) rather than the horizontal root (tags) and folksonamy/ tag cloud.

The step to use top defined category is a judgment. Me feels a misstep can understand it easer to have a fixed list but doing it right is not usually the easiest thing to do.

Can we look at this agen.

enhancement: Main-page feature overview

Per Gargron in Discord:

"It kinda needs something between https://discordapp.com/features and https://www.discourse.org/ below the fold"