oakstudios/joinmastodon

The official Mastodon project homepage

joinmastodon's Issues

RTL hero images should be flipped

i thought i documented this somewhere but i can't find it

Increase line height / font size on testimonial cards

Could we increase the font size, or at least the line height of testimonials? They are very hard to read right now.

Above:

1. Current (b3)
2. Increasing b3's line height to 1.5 (matching b2)
3. Using b2 instead of b3

Update b&w logos on brand page

• Remove old b&w wordmark options:

• Replace with these options (drive):

• Add note to use m workmark in cases where only 1 color is possible (e.g. screenprinting, faxes, etc)

Mouse users seeing scroll bars in collapsed menu (Safari)

Getting these cute lil scroll bars in Safari:

To repro, plug in an non-Apple mouse or turn on this setting:

Server Card

Sponsor Cards

need to decide how this is handled between "gold", "silver", and "bronze" sponsors. we could have separate components for all three, but these two definitely share a lot visually:

my best guess is keeping them all together since their data is so similar:

• props
  • logo
  • name
  • url/link
  • tier for gold, silver, and bronze as they're laid out in figma, to switch between layouts

Add hover state to navbar dropdown menus

There are no hover states in navbar dropdown menus

Load list of servers from API

Card + Icon

Replace old press kit zip with /brand page

The press kit zip contains all old branding. Could we replace ideally with a nice page like:

https://62e7e3680f59ec486353555b.cloud-preview.siteleaf.com/brand/

it would be nice if this could show off the snazzy new brand work we've done 😎

Clicking link in mobile nav should close overlay

Currently, when you click a link, the page changes behind the overlay but the overlay remains open.

"Why Mastodon?" cards section

Testimonial bugs + carousel?

I can barely see rounded corners on testimonial avatars. It was also supposed to be a carousel originally, right?

We can increase the border radius to 4px (I think it's 2px right now). Also if we're going back to the carousel, could check out https://keen-slider.io/

Add filters

List of languages and server counts: https://api.joinmastodon.org/languages
List of categories: https://api.joinmastodon.org/categories

The server size count does not have an endpoint, but we could get it from https://api.joinmastodon.org/servers. maybe a new endpoint could be added for this, or we prepare this data on build so we don't have to do a big forEach client side? not too sure yet

Third-party Apps Card

Navigation bug when visiting `/servers`

for some reason, going back to the homepage after being on the servers page, updates the page address but not the actual page, it stays on servers
Actually, I can't seem to be able to open any page after being on the servers page

Dead space on Sponsors

There is a lot of dead space "above the fold" on the Sponsors page /cc @tyleemem

Is there a missing illustration?

Server feature cards

Use official App Store badges

Both Google and Apple have guidelines on App Store badge uses

Could we just use the official ones?

https://developer.apple.com/app-store/marketing/guidelines/
https://play.google.com/intl/en_us/badges/

Update sponsors

Reduce sponsors with to match design:

We could also treat them like the current site (https://joinmastodon.org) where they are 50% opacity until hover.

Features section

Tighten line height of h1/h2 text

For @tyleemem, can we reduce the line-height of large text? (Both h1 and h2)

Example: "Social networking" and "that's not for sale." seem to be pretty far apart.

Before (1.32):

After? (1.1 maybe?)

Homepage

Figma

copy TBD

sections:

• #20 (waiting on updated illo)
• #19
• #21
• #22
• #23

Reviews Card

• this should still use manrope. use closest matching style for now

Site Header

AFAICT this is always in dark mode, but:

• is this a sticky header on desktop? (yes)
• is this a sticky header on mobile? (yes)
• might have a background sometimes (via figma)

current site is no for both

RTL support

arabic in particular should have some RTL accommodations in the design to have parity with the existing site as we dev our components out

we have some opportunities to fix some RTL bugs, too:

there's rtl selectors in tailwind which might occasionally be helpful (conditional illustrations), but compared to using logical properties for the layout, this approach would make RTL feel like an afterthought

tailwindcss-logical seems better, giving us lower-level control of the properties used

compared to something like tailwindcss-vanilla-rtl which forces logical properties everywhere, having the ability to decide which design elements need to be re-aligned and where seems like a more appropriate and nuanced approach

opening this as an issue to keep this in mind and mark commits with it

margin adjustment on homepage illo not having the same effect in RTL

Increase button font size

Design:

Site:

(same goes for header CTA buttons)

Update homepage feature images

https://www.figma.com/file/Wk8L4YNZvgTBcrpthCYmBj?node-id=320:925#237087055

Servers hero

rel thread about the illo https://oak.slack.com/archives/C03EE7XPE79/p1658329463109419

Update 4 feature images

Via https://drive.google.com/drive/folders/1oehssGN-5J6Dm7ldC6NqG2kNiVJkpVCw?usp=sharing

highlight active nav links

think this works, though 800 weight in the header doesn't stand out as much as i thought it would with white text

+the active language should be highlighted for parity with the current site

Center text on TwoUpFeature

I think applying center on these components might look better

Homepage sponsors sections

Sponsor logos are currently in this folder https://github.com/oakstudios/joinmastodon/tree/main/z_archive/src/assets/sponsors
Home page sponsor data here:

joinmastodon/z_archive/src/Home.js

Lines 82 to 108 in e1a2f9b

	export const sponsors = [
	{ href: 'https://oak.is/', src: sponsorOak, alt: 'Oak Studios' },
	{ href: 'https://www.lunanode.com/', src: sponsorLunanode, alt: 'Lunanode' },
	{ href: 'https://www.ramotion.com/agency/ui-ux-design', src: sponsorTrueVendor, alt: 'UI/UX Designer' },
	{ href: 'https://airvpn.org/landing/mastodon', src: sponsorAirVPN, alt: 'AirVPN' },
	{ href: 'https://www.firesticktricks.com/', src: sponsorFireStickTricks, alt: 'Fire Stick Tricks' }, // OpenCollective
	{ href: 'https://papersowl.com/write-my-essay-please', src: sponsorPapersOwl, alt: 'Free plagiarism checker' },
	{ href: 'https://sextoycollective.com', src: avatarSexToyCollective, alt: 'SexToyCollective' },
	{ href: 'https://www.vpsserver.com/', src: sponsorVPSServer, alt: 'VPS Server' },
	{ href: 'https://www.betrugstest.com/', src: sponsorBetrugstest, alt: 'Betrugstest.com' }, // Custom/other
	{ href: 'https://mask.io/', src: sponsorSujitech, alt: 'Mask Network' }, // Custom/other
	{ href: 'https://www.bestcasinosites.net', src: sponsorBCS, alt: 'bestcasinosites.net' }, // Custom/other
	{ href: 'https://www.bestecasinosonline.at/', src: sponsorBCO, alt: 'Online Casino Österreich' }, // Custom
	{ href: 'https://www.sister-sites.co.uk/', src: sponsorSisterSites, alt: 'sister-sites.co.uk' }, // Custom
	{ href: 'https://schnellno.de/', src: sponsorSchnellNode, alt: 'Schnell Node' }, // Custom
	{ href: 'https://masto.host/', src: sponsorMastoHost, alt: 'Masto.host - Fully managed Mastodon hosting' }, // Custom
	{ href: 'https://assemblyfour.com/', src: sponsorAssemblyFour, alt: 'Assembly Four' }, // Custom
	{ href: 'https://www.auscasinos.com/new/', src: sponsorAusCasinos, alt: 'AusCasinos.com New Site Section' }, // Custom
	{ href: 'https://www.joylovedolls.com/', src: sponsorJLD, name: 'Joy Love Dolls' }, // Custom
	{ href: 'https://kasynohex.com/kasyna-online/', src: sponsorKasynoHex, alt: 'Casino online PL' }, // Custom
	{ href: 'https://www.globenewswire.com/news-release/2021/04/07/2206309/0/en/10-Best-Online-Casinos-in-Australia-List-of-Real-Money-Pokies-Sites-Rated-By-Users-and-Popularity.html', src: sponsorAltCasino, alt: 'Online Casinos Australia' }, // Custom
	{ href: 'https://www.nettikasinot.org/', src: sponsorNettikasinot, alt: 'Nettikasinot' },
	{ href: 'https://www.onlinecasinos.net/', src: sponsorOnlineCasinos, alt: 'OnlineCasinos.net' }, // Custom
	{ href: 'https://topaussiecasinos.com/', src: sponsorCasinoHexAU, alt: 'CasinoHEX Australia' }, // Custom
	{ href: 'https://wideangle.co', src: sponsorWideAngleAnalytics, alt: 'Wide Angle Analytics' }, // Custom
	{ href: 'https://goread.io/buy-instagram-followers', src: sponsorGoread, alt: 'Goread.io' },
	];

End of page app CTA heroes

i have a WIP of this on /apps, but it's used on /servers, too, so i'll try PRing a shared component for it. recommendations for naming are welcome—i'm not quite sure what to call it

Site Footer

Fairly static

• needs props (or maybe ideally just a renderprop to plop in a next <Image> tag) for the illustrated backgrounds, which can differ from page to page

Make homepage hero responsive

I'm noticing some issues on smaller screens like my 13" MacBook:

Most of the elephant is cut off.

Could we make this responsive instead of a static size?

Example:

responsive.mp4

Changes required for this:

min-width: 200%; /* because image is almost 4000px but we only care about the middle 2000px on small screens */
max-width: 200%;
object-fit: contain;
left: -50%;

Also would help if:

• We put a background fill on the container, so the text is not white on white (in that case hero should have no transparency)
• The hero image has extra bleed on the top

Still works on larger screens too:

meta titles, descriptions, and image

Most pages already have, but we also need to add meta titles and descriptions to the home page and the /sponsors page.

We also need to add an og:image, we can use their current one for now https://joinmastodon.org/preview.jpg

Copy update

Actively working to eliminate hate speech, Mastodon will only list servers [...]

I would amend this sentence to say (after the first part), "our organization will only point you to servers [...]" to avoid confusion with software capabilities

/servers filters can get stuck in a pending state

repro:

1. https://joinmastodon.vercel.app/servers
2. use the sitewide dropdown switch to another language

Servers page

figma link

• #34
• #35
• #36
• #37
• #38

Delay when navigating to `/server`

There seems to be a delay when clicking "Servers" in the navbar before the page address updates and the new page opens. Made me think the link was not hooked up to anything at first.

I believe this is being caused by the API calls in getServerSideProps. idk if there is an easy way to cache the results so the API calls would only have to be made once and every request uses the same data? We could move it to a client side request?

Button

Add carousels

related thread #17 (comment)

Pre-launch checklist

• double check that the github integration is working properly once we merge our fork. (#28 (comment))
• get translations before launching to production
  • get arabic translations (#31)
• remove typecheck build ignore from next.config.js

Basic pages need a little love

Contact, Privacy, etc are looking very rough. Font is very tiny and text is being cut off by footer:

https://joinmastodon.org/privacy-policy

Can we give these pages more love?

Home page hero

waiting on updated illustration, see related comment thread here: https://www.figma.com/file/Wk8L4YNZvgTBcrpthCYmBj?node-id=320:925#224269190

Add sort to server list

What are the sort options here? maybe "Recently added", "Largest server size", "Smallest server size" (idk about the wording lol)

Filter label styling + cursor changes

On the servers page, "Filters" looks like it could be a button, but it's just text. On the other hand, the languages dropdown looks like text - pointer cursor might help here
"Filter by language" has default cursor but is not a label that activates the dropdown

Text/illo placement on `/apps`

I have to admit I feel weird about this gap on the apps page. I have to scroll down to see the download buttons. Meanwhile, right of "Apps" is empty too.