adam/ipfs-blog
1
0 Fork 0
mirror of https://github.com/ipfs/ipfs-blog.git synced 2026-10-31 02:11:57 +01:00
Code Issues 17 Packages Projects Releases Wiki Activity

Improve the UX of external card links #65

New Issue
Closed
opened 2026-10-05 05:12:21 +02:00 by adam · 4 comments
adam commented 2026-10-05 05:12:21 +02:00
Owner
Copy link
Copy source

Currently it's not possible to distinguish external links from internal links on the blog homepage cards and it can be disorienting when these links open in a new tab. This UX is also inconsistent with the blog body content which displays a small external arrow for any outbound links.

2021-05-24 at 12 29 10

Example from Protocol.ai

2021-05-24 at 12 26 51

Currently it's not possible to distinguish external links from internal links on the blog homepage cards and it can be disorienting when these links open in a new tab. This UX is also inconsistent with the blog body content which displays a small external arrow for any outbound links. ![2021-05-24 at 12 29 10](https://user-images.githubusercontent.com/106938/119341518-c7977500-bc8b-11eb-9f35-52b78bf7e0d5.png) Example from Protocol.ai ![2021-05-24 at 12 26 51](https://user-images.githubusercontent.com/106938/119341133-56f05880-bc8b-11eb-83ac-a8585d032347.png) <!-- github-sync-id:899578316 -->
adam closed this issue 2026-10-05 05:12:21 +02:00
adam commented 2026-10-05 05:12:22 +02:00
Author
Owner
Copy link
Copy source

The approach most consistent with existing visual style would be simply to add the outbound-link icon to the end of the headline for cards that will open in a new window (e.g. everything but blog posts). @jdiogopeixoto, would you be able to fit this in sometime this week, since you know those cards better than anyone else? You can see it illustrated in the below screenshot: the left two cards would have the icon (since they open an off-site link) but the right card wouldn't (since it links to a blog post). Thank you!

image

The approach most consistent with existing visual style would be simply to add the outbound-link icon to the end of the headline for cards that will open in a new window (e.g. everything but blog posts). @jdiogopeixoto, would you be able to fit this in sometime this week, since you know those cards better than anyone else? You can see it illustrated in the below screenshot: the left two cards would have the icon (since they open an off-site link) but the right card wouldn't (since it links to a blog post). Thank you! ![image](https://user-images.githubusercontent.com/1507828/119391006-0bd64580-bc8b-11eb-85cf-1c6dd605481c.png) <!-- github-comment-id:847243897 -->
adam commented 2026-10-05 05:12:22 +02:00
Author
Owner
Copy link
Copy source

Yes, I'm already working on this.

I have two questions:

  1. What should we do when the text is truncated (last card below)? Should we try to fit the icon at the end?
Screenshot 2021-05-25 at 02 13 44
  1. Should the icon always stay in the same line where the text ends? (second card below)
Screenshot 2021-05-25 at 02 13 21

This is happening because I just added the icon to the end of the text, it works but we have those 2 issues. Let me know what you think about this so I can fix it.

Yes, I'm already working on this. I have two questions: 1. What should we do when the text is truncated (last card below)? Should we try to fit the icon at the end? <img width="629" alt="Screenshot 2021-05-25 at 02 13 44" src="https://user-images.githubusercontent.com/34691925/119425226-e7b44c00-bcfe-11eb-8e37-6ca103b0aacb.png"> 2. Should the icon always stay in the same line where the text ends? (second card below) <img width="629" alt="Screenshot 2021-05-25 at 02 13 21" src="https://user-images.githubusercontent.com/34691925/119425233-eaaf3c80-bcfe-11eb-82c1-5e9d2d8b6ba6.png"> This is happening because I just added the icon to the end of the text, it works but we have those 2 issues. Let me know what you think about this so I can fix it. <!-- github-comment-id:847460346 -->
adam commented 2026-10-05 05:12:23 +02:00
Author
Owner
Copy link
Copy source

Thanks!

  1. Yes - if the title truncates let's fit the icon at the end of the line. If that cuts down the number of characters to truncate at, that's OK.
  2. Good catch. Let's please never have a line with just an icon on it.
Thanks! 1. Yes - if the title truncates let's fit the icon at the end of the line. If that cuts down the number of characters to truncate at, that's OK. 2. Good catch. Let's please never have a line with just an icon on it. <!-- github-comment-id:847460984 -->
adam commented 2026-10-05 05:12:24 +02:00
Author
Owner
Copy link
Copy source

Nice thanks! There is a utility to check external links and the icon is included as a global component too (<LinkIcon/> I think but you may need to check the src), it should be relatively simple :)

Nice thanks! There is a utility to check external links and the icon is included as a global component too (`<LinkIcon/>` I think but you may need to check the src), it should be relatively simple :) <!-- github-comment-id:847596449 -->
Sign in to join this conversation.
No Branch/Tag Specified
Labels
No items
No labels
Milestone
No items
No Milestone
Projects
Clear projects
No projects
Assignees
Clear assignees
adam (Adam Wojcieszonek)
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: adam/ipfs-blog#65