SEO-friendly communities page

[SheepTester]

Description

Fixes #308 and based on #312, which seemed stalled by mobile support (#311).

Someone said that the current communities page, which requires you to click on each logo to see its description, makes it hard to read through the communities. Also, I want the Cyber website to get good pagerank, but currently Google cannot find the link because it is hidden behind a user interaction.

Putting information behind tabs makes sense for an app, but less so a web page that you can just scroll down in. So this PR just shows all communities at once, and the logos become links .

I also tried to combine the mobile and desktop designs. Someone said that the community names look weird trying to fit into the logo thing at the top, so I removed it (it's in the description anyways).

2025-01-25.22-36-03.mp4

I also added scroll snapping as soft pagination, but it might be too janky, so we can turn it off if desired.

Type of change

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• Logistical Change (something about code process / a readme change / documentation update)
• CI Change (relating to deployment / continuous integration)
• Something Else

How Has This Been Tested?

• Tested on Localhost (Desktop)
• Tested on Localhost (Mobile) - use https://ngrok.io to get a copy on a mobile device
• Tested on Deployed Preview (Desktop)
• Tested on Deployed Preview (Mobile)

Checklist:

• My code follows the style guidelines of this project
• I have performed a self-review of my own code
• I have commented my code as needed, particularly in hard-to-understand areas
• My changes generate no new warnings (if they do, please explain why)

[vercel]

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

Name	Status	Preview	Comments	Updated (UTC)
main-website	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jan 29, 2025 7:06am

[alexzhang1618]

nits that aren't part of this pr but I think should be addressed either in this pr or in a separate one

• make the bit-byte logo a solid color it's very hard to read with the image bg
• the projects font is bigger than the other logos and it's making me angry

[SheepTester]

• make the bit-byte logo a solid color it's very hard to read with the image bg

I think it's because bit-byte doesn't have an actual logo (that image bg is direct from the Figma design, which used cats or something as a placeholder)

I'll see if I can create better temp logos for them before merging, and also increase the size of the SPACE logo maybe so it doesn't feel unusually small