hatsu icon indicating copy to clipboard operation
hatsu copied to clipboard

Frontend

Open kwaa opened this issue 1 year ago • 20 comments

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):

  • hatsu.local/@example.com (user, /u/example.com => /@example.com)
  • hatsu.local/@example.com/foo/bar (post, /o/https://example.com/foo/bar => /@example.com/foo/bar)

kwaa avatar Jan 17 '24 10:01 kwaa

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

kwaa avatar May 12 '24 03:05 kwaa

Would it be possible to help design the frontend?

reesericci avatar May 13 '24 10:05 reesericci

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.

kwaa avatar May 13 '24 10:05 kwaa

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

reesericci avatar May 13 '24 10:05 reesericci

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

kwaa avatar May 13 '24 11:05 kwaa

image

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

reesericci avatar May 13 '24 11:05 reesericci

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

Posts should ideally be on a separate page.

kwaa avatar May 13 '24 11:05 kwaa

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

reesericci avatar May 13 '24 11:05 reesericci

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.

kwaa avatar May 13 '24 12:05 kwaa

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

reesericci avatar May 13 '24 14:05 reesericci

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

kwaa avatar May 13 '24 14:05 kwaa

Makes sense to me

reesericci avatar May 13 '24 14:05 reesericci

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

kwaa avatar May 13 '24 14:05 kwaa

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

reesericci avatar May 13 '24 14:05 reesericci

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.

kwaa avatar May 13 '24 14:05 kwaa

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

reesericci avatar May 13 '24 14:05 reesericci

I expect to write the frontend in the following order:

  • Home page with only basic information
  • User page
  • Post page
  • Separate reply page (for Webmention Backfeed feature)

The other pages are low-priority.

kwaa avatar May 13 '24 14:05 kwaa

Separate reply page (for Webmention Backfeed feature)

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

reesericci avatar May 13 '24 15:05 reesericci

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.

kwaa avatar May 13 '24 15:05 kwaa

updated things a bit: image

reesericci avatar May 13 '24 15:05 reesericci

Here's a WIP PR: #83

kwaa avatar Dec 01 '24 06:12 kwaa