New Issue

XMLHttpRequest for boost and likes #850

Closed

opened by freyja_wildes · 11 comments

freyja_wildes commented

I want to work on that issue. I’m new to Rust and Plume, so anyone willing to help me (please don’t to the work for me, just point me in the right direction, thanks!) is welcome.

Right now, when boosting or liking an article, the whole page is reloaded. I think it’s not enjoyable for the user. That’s why I suggest to implement XMLHttpRequest on both those action, to change the values without reloading the whole page. I want to work on that issue. I’m new to Rust and Plume, so anyone willing to help me (please don’t to the work for me, just point me in the right direction, thanks!) is welcome.

KitaitiMakoto commented

Owner

That sounds nice feature.

Plume's frontend development is a little complex.

HTML (Ructe template) files are present under templates directory
CSS (SCSS) files are included in themes. You can see about theme development at Creating a theme page
Sources of JavaScript (WASM) file are present under plume-front/src

To compile WASM file, you need run cargo web deploy -p plume-front. And then, files of these types are compiled and copied at Rust's compile time in build.rs.

Additionally, you might have to develop API endpoints for boost and like. That will be achieved mostly in src/routes directory.

Now Plume has API endpoints at /api/v1 URI. But they requires OAuth authentication to access and you will not prefer it.

You might send a request via XMLHttpRequest (or fetch) to /~/{BlogName}/{article-slug}/like, parse HTML in response and check if it succeeded or faild. Or,
You can add API endpoint for this purpose.

Is this enough information? Feel free to ask anything.

That sounds nice feature. Plume's frontend development is a little complex. * HTML (Ructe template) files are present under `templates` directory * CSS (SCSS) files are included in themes. You can see about theme development at [Creating a theme](https://docs.joinplu.me/guide/creating-themes/) page * Sources of JavaScript (WASM) file are present under `plume-front/src` To compile WASM file, you need run `cargo web deploy -p plume-front`. And then, files of these types are compiled and copied at Rust's compile time in `build.rs`. Additionally, you might have to develop API endpoints for boost and like. That will be achieved mostly in `src/routes` directory. Now Plume has API endpoints at `/api/v1` URI. But they requires OAuth authentication to access and you will not prefer it. * You might send a request via `XMLHttpRequest` (or `fetch`) to `/~/{BlogName}/{article-slug}/like`, parse HTML in response and check if it succeeded or faild. Or, * You can add API endpoint for this purpose. Is this enough information? Feel free to ask anything.

👍 1

KitaitiMakoto commented

Owner

Development Guide also helps you.

[Development Guide](https://docs.joinplu.me/contribute/development/) also helps you.

👍 1

Ghost commented

IMO, sending an XHR to a HTML endpoint just to trigger a side-effect is quite a nasty hack. I think we'd be much better off with a separate API endpoint for this.

freyja_wildes commented

Poster

That's exacty my intention, to XHR the numbers of boosts and likes in one go and update the view arcordingly

KitaitiMakoto commented

Owner

Sorry, I was wrong. Some API endpoints like /api/v1/posts doesn't require authorization. It's might be better to add endpoints under /api/v1.

Sorry, I was wrong. Some API endpoints like `/api/v1/posts` doesn't require authorization. It's might be better to add endpoints under `/api/v1`.

👍 1

freyja_wildes commented

Poster

Don't worry about it, we all make tiny mistakes like that

❤️ 1

zcdunn commented

A technique I've used is having the form still on the page that submits to an HTML endpoint and using Javascript to add an input named format with value json, then submitting the form with FormData. That way if the user disables javascript or the js doesn't load, the form will still have its current behavior and instead of creating a new endoint you just use the same endpoint but change the response based on that format parameter

A technique I've used is having the form still on the page that submits to an HTML endpoint and using Javascript to add an input named `format` with value `json`, then submitting the form with [FormData](https://developer.mozilla.org/en-US/docs/Web/API/FormData/Using_FormData_Objects#Retrieving_a_FormData_object_from_an_HTML_form). That way if the user disables javascript or the js doesn't load, the form will still have its current behavior and instead of creating a new endoint you just use the same endpoint but change the response based on that `format` parameter

KitaitiMakoto commented

Owner

I found the issue for API: #5

👍 1

pwFoo commented

would be nice to have!

freyja_wildes commented

Poster

Isn't this issue a copy or very similar to #591 ?

Isn't this issue a copy or very similar to [#591](https://git.joinplu.me/Plume/Plume/issues/591) ?

KitaitiMakoto commented

Owner

Ah, you're right. Okay I will close this issue. Track #591. Thanks!

KitaitiMakoto closed this issue

No Milestone

No Assignees

5 Participants

Notifications

Due Date

The due date is invalid or out of range. Please use the format 'yyyy-mm-dd'.

No due date set.

Dependencies

No dependencies set.

Loading…

There is no content yet.

Labels Milestones

XMLHttpRequest for boost and likes #850