mirrors/phanpy
1
0
Fork 0
mirror of https://github.com/cheeaun/phanpy.git synced 2024-11-21 16:55:25 +03:00
Code Issues Projects Releases Packages Wiki Activity
A minimalistic opinionated Mastodon web client
1194 commits 4 branches 62 tags 74 MiB
JavaScript 79.6%
CSS 20.2%
HTML 0.2%
Find a file
Lim Chee Aun 51fc60cf5d Fix column header not clickable when scrolled down
2023-04-19 00:19:43 +08:00
.github Need one more detail from bug reports 2023-02-02 10:30:50 +08:00
compose Don't need vite-plugin-html-env anymore 2023-03-18 21:51:27 +08:00
design New logo, banner and metacrap 2023-01-17 20:35:54 +08:00
public Use different build path for icons, cache them 2023-04-14 17:23:41 +08:00
scripts Alrighty, let's test this post translation out! 2023-03-07 22:38:06 +08:00
src Fix column header not clickable when scrolled down 2023-04-19 00:19:43 +08:00
.env Initial commit 2022-12-10 17:14:48 +08:00
.env.production Conditionally use error logging 2022-12-27 20:47:23 +08:00
.gitignore Initial commit 2022-12-10 17:14:48 +08:00
.prettierrc Make sure index.css is at top 2023-02-17 20:48:00 +08:00
index.html Don't need vite-plugin-html-env anymore 2023-03-18 21:51:27 +08:00
package-lock.json Upgrade dependencies 2023-04-02 15:19:09 +08:00
package.json Fixes for logical properties 2023-04-10 20:23:40 +08:00
PRIVACY.MD Add privacy.md 2023-01-30 23:11:41 +08:00
README.md Add 2 more web apps 2023-03-31 15:30:51 +08:00
rollbar.js Try vite-plugin-html-config for conditional embed of script 2022-12-28 13:47:11 +08:00
vite.config.js Use different build path for icons, cache them 2023-04-14 17:23:41 +08:00

README.md

Phanpy

Minimalistic opinionated Mastodon web client.


This is an alternative web client for Mastodon.

  • 🏢 Production: https://phanpy.social
    • production branch
    • break less often
    • slower fixes unless critical
  • 🏗️ Development: https://dev.phanpy.social
    • main branch
    • may see new cool stuff sooner
    • may break more often
    • may be fixed much faster too

🐘 Follow @phanpy on Mastodon for updates ✨

Everything is designed and engineered for my own use case, following my taste and vision. This is a personal side project for me to learn about Mastodon and experiment with new UI/UX ideas.

🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧

🐘 This is an early ALPHA project. Many features are missing, many bugs are present. Please report issues as detailed as possible. Thanks 🙏

🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧

Features

  • 👪 Multiple accounts
  • 🪟 Compose window pop-out/in
  • 🌗 Light/dark/auto theme
  • 🔔 Grouped notifications
  • 🪺 Nested replies view
  • 📬 Unsent draft recovery
  • 🎠 Boosts Carousel™️
  • ⚡ Shortcuts™️ with view modes like multi-column or tab bar
  • #️⃣ Multi-hashtag timeline

Design decisions

  • Status actions (reply, boost, favourite, bookmark, etc) are hidden by default.
    They only appear in individual status page. This is to reduce clutter and distraction. It may result in lower engagement, but we're not chasing numbers here.
  • Boost is represented with the rocket icon.
    The green double arrow icon (retweet for Twitter) doesn't look right for the term "boost". Green rocket looks weird, so I use purple.
  • Short usernames (@username) are displayed in timelines, instead of the full account username (@username@instance).
    Despite the guideline mentioned that "Decentralization must be transparent to the user", I don't think we should shove it to the face every single time. There are also some screen-reader-related accessibility concerns with the full username, though this web app is unfortunately not accessible yet.
  • No autoplay for video/GIF/whatever in timeline.
    The timeline is already a huge mess with lots of people, brands, news and media trying to grab your attention. Let's not make it worse. (Current exception now would be animated emojis.)
  • Hash-based URLs.
    This web app is not meant to be a full-fledged replacement to Mastodon's existing front-end. There's no SEO, database, serverless or any long-running servers. I could be wrong one day.

Development

Prerequisites: Node.js 18+

  • npm install - Install dependencies
  • npm run dev - Start development server
  • npm run build - Build for production
  • npm run preview - Preview the production build
  • npm run fetch-instances - Fetch instances list from instances.social, save it to src/data/instances.json
    • requires .env.dev file with INSTANCES_SOCIAL_SECRET_TOKEN variable set
  • npm run sourcemap - Run source-map-explorer on the production build

Tech stack

Some of these may change in the future. The front-end world is ever-changing.

Mascot

Phanpy is a Ground-type Pokémon.

Maintainers

Backstory

I am one of the earliest users of Twitter. Twitter was launched on 15 July 2006. I joined on December 2006 and my first tweet was posted on 18 December 2006.

I know how early Twitter looks like. It was fun.

Back then, I made a Twitter clone called "Twig" written in Python and Google App Engine. I almost made my own Twitter desktop client written in Appcelerator Titanium. I gave one of my best talks about the Twitter client in a mini-conference. I built this thing called "Twitter Columns", a web app that shows your list of followings, your followings' followings, your followers, your followers' followers and so on. In 2009, I wrote a blog post titled "How I got started with Twitter". I created two themes for DestroyTwitter (a desktop client made with Adobe Air by Jonnie Hallman) and one of them is called "Vimeo". In 2013, I wrote my own tweets backup site with a front-end to view my tweets and a CouchDB backend to store them.

It's been more than 15 years.

And here I am. Building a Mastodon web client.

Alternative web clients

License

MIT.