diff --git a/README.md b/README.md index f235868..a898c84 100644 --- a/README.md +++ b/README.md @@ -23,13 +23,7 @@ This is an alternative web client for [Mastodon](https://joinmastodon.org/). 🐘 Follow [@phanpy on Mastodon](https://hachyderm.io/@phanpy) 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 πŸ™** - -🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧 +Everything is designed and engineered following my taste and vision. This is a personal side project for me to learn about Mastodon and experiment with new UI/UX ideas. ## Features @@ -37,7 +31,7 @@ Everything is designed and engineered for my own use case, following my taste an - πŸͺŸ Compose window pop-out/in - πŸŒ— Light/dark/auto theme - πŸ”” Grouped notifications -- πŸͺΊ Nested replies view +- πŸͺΊ Nested comments thread - πŸ“¬Β Unsent draft recovery - 🎠 Boosts Carouselℒ️ - ⚑ Shortcutsℒ️ with view modes like multi-column or tab bar @@ -51,6 +45,33 @@ Everything is designed and engineered for my own use case, following my taste an - **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. +## Subtle UI implementations + +### User name display + +![User name display](readme-assets/user-name-display.jpg) + +- On the timeline, the user name is displayed as `[NAME] @[username]`. +- For the `@[username]`, always exclude the instance domain name. +- If the `[NAME]` *looks the same* as the `@[username]`, then the `@[username]` is excluded as well. + +### Boosts Carousel + +![Boosts Carousel](readme-assets/boosts-carousel.jpg) + +- From the fetched posts (e.g. 20 posts per fetch), if number of boosts are more than quarter of total posts or more than 3 consecutive boosts, boosts carousel UI will be triggered. +- If number of boosts are more than 3 quarters of total posts, boosts carousel UI will be slotted at the end of total posts fetched (per "page"). +- Else, boosts carousel UI will be slotted in between the posts. + +### Thread number badge (e.g. Thread 1/X) + +![Thread number badge](readme-assets/thread-number-badge.jpg) + +- Check every post for `inReplyToId` from cache or additional API requests, until the root post is found. +- If root post is found, badge will show the index number of the post in the thread. +- Limit up to 3 API requests as the root post may be very old or the thread is super long. +- If index number couldn't be found, badge will fallback to showing `Thread` without the number. + ## Development Prerequisites: Node.js 18+ @@ -63,6 +84,12 @@ Prerequisites: Node.js 18+ - requires `.env.dev` file with `INSTANCES_SOCIAL_SECRET_TOKEN` variable set - `npm run sourcemap` - Run `source-map-explorer` on the production build +## Self-hosting + +This is a **pure static web app**. You can host it anywhere you want. Build it by running `npm run build` and serve the `dist` folder. + +Try search for "how to self-host static sites" as there are many ways to do it. + ## Tech stack - [Vite](https://vitejs.dev/) - Build tool diff --git a/readme-assets/boosts-carousel.jpg b/readme-assets/boosts-carousel.jpg new file mode 100644 index 0000000..610f23d Binary files /dev/null and b/readme-assets/boosts-carousel.jpg differ diff --git a/readme-assets/thread-number-badge.jpg b/readme-assets/thread-number-badge.jpg new file mode 100644 index 0000000..8519e06 Binary files /dev/null and b/readme-assets/thread-number-badge.jpg differ diff --git a/readme-assets/user-name-display.jpg b/readme-assets/user-name-display.jpg new file mode 100644 index 0000000..01802ec Binary files /dev/null and b/readme-assets/user-name-display.jpg differ