this repo has no description
Update README with intricate words and sentences
+35
-8
+35
-8
README.md
+35
-8
README.md
···
23
23
24
24
🐘 Follow [@phanpy on Mastodon](https://hachyderm.io/@phanpy) for updates ✨
25
25
26
-
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.
27
-
28
-
🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧
29
-
30
-
**🐘 This is an early ALPHA project. Many features are missing, many bugs are present. Please report issues as detailed as possible. Thanks 🙏**
31
-
32
-
🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧
26
+
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.
33
27
34
28
## Features
35
29
···
37
31
- 🪟 Compose window pop-out/in
38
32
- 🌗 Light/dark/auto theme
39
33
- 🔔 Grouped notifications
40
-
- 🪺 Nested replies view
34
+
- 🪺 Nested comments thread
41
35
- 📬 Unsent draft recovery
42
36
- 🎠 Boosts Carousel™️
43
37
- ⚡ Shortcuts™️ with view modes like multi-column or tab bar
···
51
45
- **No autoplay for video/GIF/whatever in timeline**.<br>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.)
52
46
- **Hash-based URLs**.<br>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.
53
47
48
+
## Subtle UI implementations
49
+
50
+
### User name display
51
+
52
+
53
+
54
+
- On the timeline, the user name is displayed as `[NAME] @[username]`.
55
+
- For the `@[username]`, always exclude the instance domain name.
56
+
- If the `[NAME]` *looks the same* as the `@[username]`, then the `@[username]` is excluded as well.
57
+
58
+
### Boosts Carousel
59
+
60
+
61
+
62
+
- 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.
63
+
- 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").
64
+
- Else, boosts carousel UI will be slotted in between the posts.
65
+
66
+
### Thread number badge (e.g. Thread 1/X)
67
+
68
+
69
+
70
+
- Check every post for `inReplyToId` from cache or additional API requests, until the root post is found.
71
+
- If root post is found, badge will show the index number of the post in the thread.
72
+
- Limit up to 3 API requests as the root post may be very old or the thread is super long.
73
+
- If index number couldn't be found, badge will fallback to showing `Thread` without the number.
74
+
54
75
## Development
55
76
56
77
Prerequisites: Node.js 18+
···
62
83
- `npm run fetch-instances` - Fetch instances list from [instances.social](https://instances.social/), save it to `src/data/instances.json`
63
84
- requires `.env.dev` file with `INSTANCES_SOCIAL_SECRET_TOKEN` variable set
64
85
- `npm run sourcemap` - Run `source-map-explorer` on the production build
86
+
87
+
## Self-hosting
88
+
89
+
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.
90
+
91
+
Try search for "how to self-host static sites" as there are many ways to do it.
65
92
66
93
## Tech stack
67
94
readme-assets/boosts-carousel.jpg
readme-assets/boosts-carousel.jpg
This is a binary file and will not be displayed.
readme-assets/thread-number-badge.jpg
readme-assets/thread-number-badge.jpg
This is a binary file and will not be displayed.
readme-assets/user-name-display.jpg
readme-assets/user-name-display.jpg
This is a binary file and will not be displayed.