feat(AlbumDetails): Extract urls from comments and link them to their corresponding sites - #1053 #1570
Conversation
Signed-off-by: Pavithra Nair <pmpavithranair@gmail.com>
Signed-off-by: Pavithra Nair <pmpavithranair@gmail.com>
| @@ -112,15 +117,32 @@ const AlbumComment = ({ record }) => { | |||
| const classes = useStyles() | |||
| const [expanded, setExpanded] = React.useState(false) | |||
|
|
|||
| const reqClassName = classes.externalLinks | |||
| console.log(reqClassName) | |||
There was a problem hiding this comment.
Is this log still needed? If it was just for debugging during development, I suggest to clean it up and prevent collecting clutter in the console panel 🧹
| /(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/gi | ||
| return text.replace(urlRegex, function (url) { | ||
| return ( | ||
| '<a class=' + reqClassName + ' href="' + url + '">' + url + '</a>' |
There was a problem hiding this comment.
I think the vanilla anchor tag works, but to ensure continuity in how links appear and behave (e.g. :visited), I think a <Link> component without extra styles in this file. I would like to test this out, but at the moment I am not finished with setting up the linting stuff in my dev-environment.
More about accessibility in links: https://www.smashingmagazine.com/2021/12/designing-better-links-websites-emails-guideline/#link-accessibility
|
You can also use the WWW/URL tag (depending on format), that would be interesting |
Simple approach, may be extended/enhanced in the future.
|
I've finished this up in c530ccf. Thanks for your effort! |
|
This pull request has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs. |
Closes #1053
Description: Detect URLs from the comment body and link them to their respective site.
Changes: URL-detection in javascript clientside with regex and styled the links
When the user hovers over the links, the color changes.