importantimport / hatsu

🩵 Self-hosted & Fully-automated ActivityPub Bridge for Static Sites.
https://hatsu.cli.rs
GNU Affero General Public License v3.0
107 stars 2 forks source link

Frontend #7

Open kwaa opened 5 months ago

kwaa commented 5 months ago

Hatsu requires a front-end to implement Webmention Backfeed.

This part is a bit more complicated, so I expect to have it done before v1.0.0.

Stacks:

Paths (temporary):

kwaa commented 1 month ago

I expect to start writing the frontend at v0.3.0.

It should be:

features = ["frontend"] - enable by default, can be disable manually when compiling locally so that it doesn't contain any frontend content

./hatsu --frontend=false - enable by default, disable frontend if passed --frontend=false as a argument

reesericci commented 1 month ago

Would it be possible to help design the frontend?

kwaa commented 1 month ago

Would it be possible to help design the frontend?

Since Leptos doesn't have a proper component library, for now, I'm considering using @material/web.

reesericci commented 1 month ago

I meant like design things page by page, not necessarily components. Also, I recently looked into using that for one of my projects and found it to be woefully incomplete unfortunately, see the Roadmap

kwaa commented 1 month ago

I meant like design things page by page, not necessarily components.

I welcome any help. For now, the frontend of Hatsu doesn't need to be too complex, so it should be a Mobile-first design. It's just displaying content (maybe some simple interactions and a “view original page” button)

Also, I recently looked into using that for one of my projects and found it to be woefully incomplete unfortunately, see the Roadmap

As an alternative, it may be possible to use mdui, which currently offers more components

reesericci commented 1 month ago

image

just a quick mockup i made in a few mins, what are your thoughts?

kwaa commented 1 month ago

just a quick mockup i made in a few mins, what are your thoughts?

Posts should ideally be on a separate page.

reesericci commented 1 month ago

could we have both a permalink page that gets rendered as a drawer if you click from the UI?

kwaa commented 1 month ago

could we have both a permalink page that gets rendered as a drawer if you click from the UI?

My idea is still to make it as simple as possible, so we don't have to put in too much time for parts that don't matter.

reesericci commented 1 month ago

That makes total sense - I was just thinking from a UX perspective but simplicity is more valuable here.

I fleshed out the design a bit more:

image

here's the figma file: https://www.figma.com/file/Tc4glSBiGnwg6crUva5uKX/hatsu?type=design&node-id=0%3A1&mode=design&t=8xFSAjkRLoe9fYWj-1

kwaa commented 1 month ago

For post comments / reactions, I'll use KKna directly, they're all expected to use @material/web, so it'll look very consistent

reesericci commented 1 month ago

Makes sense to me

kwaa commented 1 month ago

The homepage should only show the Hatsu version (and optional instance info), and provide a webring-like feel to the user list on the other pages

reesericci commented 1 month ago

I think it would make sense to show a list of feeds though. I do like the webring idea too.

kwaa commented 1 month ago

I think it would make sense to show a list of feeds though. I do like the webring idea too.

The main thing I meant was to move the list of users to a separate page, with the home page only being used to display basic information.

reesericci commented 1 month ago

hmmm - i think the homepage being the index makes logical sense more than a separate index page

kwaa commented 1 month ago

I expect to write the frontend in the following order:

The other pages are low-priority.

reesericci commented 1 month ago

Separate reply page (for Webmention Backfeed feature)

Can't there just be multiple h-entries on the page and link with an ID?

kwaa commented 1 month ago

Can't there just be multiple h-entries on the page and link with an ID?

This means it's too complicated to implement it in KKna and SSR it.

reesericci commented 1 month ago

updated things a bit: image