Allow users to paste their own URLs

[FalkF]

It would be cool to be able to insert any URL and have the site explain it.
Good work so far btw 👍

[theoparis]

I totally agree with this idea!

[theoparis]

Would adding the url to a query string be a good idea?
(like howurls.work?url=site.com)

i can see that the url field in the site is rendered as several span elements so im not sure how you would make it editable

Edit: I'm currently trying to figure it out

[theoparis]

Actually, how about a paste icon button? Like this:

I've been working on this in my fork, maybe you can approve it when i'm done. I think this would be my first time contributing to a project on GitHub.

[kettanaito]

@creepinson, a good point. I don't think the same component could be reused as an input for the custom URL. I like the idea of a query parameter, yet it would be great to be able to enter that URL as a part of site experience, what do you think? I'd absolutely love to review your changes once you're done :) Thanks.

When we receive a URL string, we can parse it via new URL(customUrl), and compose the same explanatory preview by accessing each individual piece (url.protocol, url.search).

My concern with such feature is in long URLs. How should we handle a URL that is too long? For example, an automatically generated URL, or the one with a lot of query parameters.

[theoparis]

Hmm, that's also a good polnt. I'm not sure what we should do about that yet.

[FalkF]

I would favor just allowing the user to paste any length and insert a horizontal scroll around the whole explanation ui. I bet a few users would be disappointed if we cap it.

[theoparis]

I agree with this,. However, I tried to add this and the rectangle box around the url isn't long enough.

I'm not sure what to apply here.

[FalkF]

If you could push your branch I or somebody else might be able to help ;)

[kettanaito]

@creepinson the current layout is not in its greatest in terms of handling horizontal overflow on big screens. I think the design itself needs to be redone in general. As much as I admire top/bottom asymmetric transitions of explanation blocks, they are failure-prone, as their dimensions are fixed, yet their content depends on the translations. It also puts quite a strict limitation over the amount of content that can be put into each section, limiting the otherwise more profound explanation.

I was thinking to always fix the URL preview part to the top and display the explanatory content at the bottom, as you can see on mobile right now. Without any absolute elements. This will require a few move-arounds in the layout, but is totally doable.

That being said, I think the #8 should be tackled first, eliminating quite a few current and future layout issues, so we can focus on URL pasting with a layout that can handle it. Doesn't mean we can't develop the actual functionality right now, just thinking out loud.

Do you find this a good idea? I'm curious to hear what you folks think.

[theoparis]

This sounds good. How will it handle long urls though? Like will it wrap or have a horizontal scroll bar?

[theoparis]

Ok, I made a fork because that's what I thought I was supposed to do. It still looks weird but I uploaded what I have so far. Here is the link to it:
https://github.com/creepinson/howurls.work

[FalkF]

Forking is correct the way. Repos don't allow non members to create branches on default settings.

Making the UI more responsive before introducing the feature is probably the right move.
I can't really decide what I favor in terms of wrap or scroll, if I would code it I would just try both and keep the best or maybe offer a button to switch between both when the scrollbar appears.