feat: add text slide in animation for quotes in card

[shravan20]

Description:

Add slide in custom css as well for slide append to the svg created as we return with class name as additional option.

[shravan20]

Refer to design 1: https://codepen.io/shravan20/pen/xxmpMBr

[ashishk1331]

Well, I would love to work on it. Can you explain more?
Do you want to add custom CSS for the slides? Like accept CSS and then apply on the slide to generate the custom slide.

[shravan20]

@ashishk1331 : That is an interesting thought, that would be a great add-on to add custom css. But wouldnt it make query params very dirty, or should we provide css link from some source and that can be consumed from there??

What do you think about the second approach?

[ashishk1331]

Passing css to parameters would be devastating for network bandwidths. Also, custom css would mean they want a custom structure.

A solution would be to enable POST requests to the same end-point, and the request body would contain CSS and HTML for the SVG.

However, this will alter whole process flow and needs more code. I would suggest to increase the number of themes for the quotes.

[shravan20]

Passing css to parameters would be devastating for network bandwidths. Also, custom css would mean they want a custom structure.

Should we provide css link from some source and that can be consumed from there??

Yes, that is why I am suggesting passing custom css url as part of the query params.

---

However, this will alter whole process flow and needs more code. I would suggest to increase the number of themes for the quotes

Feel free to add themes as well. I would like to see if we can try adding custom slide animation. I have done a PoC as such which was working well, wanted to keep it as open issue to see if there would be any better approach to it.

[shraf]

i would like to contribute on this, i was suggesting to pass the custom css as request body , what do you think? + how should i start contributing on this?
@shravan20

[shravan20]

i would like to contribute on this, i was suggesting to pass the custom css as request body , what do you think? + how should i start contributing on this? @shravan20

@shraf: Instead, we can give a custom CSS file from github gist, i.e. provide a URL that would be picked up as custom CSS for card.

[ashishk1331]

It's better to offer themes to pick from rather than get custom CSS from headers or even gist. This can lead to slower first load times, an increase in bandwidth consumption which can easily run long bills and incorrect CSS code can cause anomalies. I suggest leaving user input to a minimum.

[shravan20]

It's better to offer themes to pick from rather than get custom CSS from headers or even gist. This can lead to slower first load times, an increase in bandwidth consumption which can easily run long bills and incorrect CSS code can cause anomalies. I suggest leaving user input to a minimum.

How would we add it as part of GET method ? Since it would be a GET method and would be completely handled via stringified css in this case which would make unnecessary long uri

[ashishk1331]

The only way for GET requests is to query parameters. Encode the whole CSS string using base64, and add it to the query parameter like

https://github-readme-quotes-returns.vercel.app/?css=LmNvbnRhaW5lciB7CmNvbG9yOiByZWQ7Cn0=

the above code runs for

.container {
color: red;
}

https://tree.nathanfriend.io/ implements the same technique to store state while sharing custom structures.

[shravan20]

Sure, sounds like a good point to start with. You can start with this implementation for now and we can fix any issues we face on the way.

👏🏼