info/developer-roadmap
1
0
Fork 0
mirror of https://github.com/kamranahmedse/developer-roadmap.git synced 2025-03-19 06:39:44 +01:00
Code Issues Releases Wiki Activity

feat: implement topic link's label (#5817)

Browse Source
This commit is contained in:
Arik Chakma 2024-06-07 00:01:05 +06:00 committed by Kamran Ahmed
parent 3af2a6b6bc
commit c68823c478
2 changed files with 40 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
src/components/TopicDetail/TopicDetail.tsx
View File

@ -42,10 +42,10 @@ type TopicDetailProps = {
const linkTypes: Record<AllowedLinkTypes, string> = {
article: 'bg-yellow-200',
course: 'bg-green-200',
opensource: 'bg-blue-200',
opensource: 'bg-black-200 text-white',
podcast: 'bg-purple-200',
video: 'bg-pink-200',
website: 'bg-red-200',
video: 'bg-pink-300',
website: 'bg-blue-300',
};
export function TopicDetail(props: TopicDetailProps) {
@ -165,9 +165,8 @@ export function TopicDetail(props: TopicDetailProps) {
}
let topicHtml = '';
if (!isCustomResource) {
topicHtml = response as string;
const topicDom = new DOMParser().parseFromString(
topicHtml,
response as string,
'text/html',
);
@ -180,6 +179,31 @@ export function TopicDetail(props: TopicDetailProps) {
const otherElems = topicDom.querySelectorAll('body > *:not(h1, div)');
const listLinks = Array.from(
topicDom.querySelectorAll('ul > li > a'),
).map((link, counter) => {
const typePattern = /@([a-z]+)@/;
let linkText = link.textContent || '';
const linkHref = link.getAttribute('href') || '';
const linkType = linkText.match(typePattern)?.[1] || 'article';
linkText = linkText.replace(typePattern, '');
return {
id: `link-${linkHref}-${counter}`,
title: linkText,
url: linkHref,
type: linkType as AllowedLinkTypes,
};
});
const lastUl = topicDom.querySelector('ul:last-child');
if (lastUl) {
lastUl.remove();
}
topicHtml = topicDom.body.innerHTML;
setLinks(listLinks);
setHasContent(otherElems.length > 0);
setContributionUrl(contributionUrl);
setHasEnoughLinks(links.length >= 3);
@ -322,7 +346,7 @@ export function TopicDetail(props: TopicDetailProps) {
<ul className="mt-6 space-y-1">
{links.map((link) => {
return (
<li>
<li key={link.id}>
<a
href={link.url}
target="_blank"
@ -331,7 +355,9 @@ export function TopicDetail(props: TopicDetailProps) {
<span
className={cn(
'mr-2 inline-block rounded px-1.5 py-1 text-xs uppercase no-underline',
linkTypes[link.type],
link.type in linkTypes
? linkTypes[link.type]
: 'bg-gray-200',
)}
>
{link.type.charAt(0).toUpperCase() +

14
src/data/roadmaps/frontend/content/100-internet/index.md
View File

@ -4,10 +4,10 @@ The Internet is a global network of computers connected to each other which comm
Visit the following resources to learn more:
- [How does the Internet Work?](https://cs.fyi/guide/how-does-internet-work)
- [The Internet Explained](https://www.vox.com/2014/6/16/18076282/the-internet)
- [How Does the Internet Work?](http://web.stanford.edu/class/msande91si/www-spr04/readings/week1/InternetWhitepaper.htm)
- [Introduction to Internet](/guides/what-is-internet)
- [Learn How the Web Works](https://internetfundamentals.com)
- [How does the Internet work?](https://www.youtube.com/watch?v=x3c1ih2NJEg)
- [How the Internet Works in 5 Minutes](https://www.youtube.com/watch?v=7_LPdttKXPc)
- [@article@How does the Internet Work?](https://cs.fyi/guide/how-does-internet-work)
- [@article@The Internet Explained](https://www.vox.com/2014/6/16/18076282/the-internet)
- [@article@How Does the Internet Work?](http://web.stanford.edu/class/msande91si/www-spr04/readings/week1/InternetWhitepaper.htm)
- [@article@Introduction to Internet](/guides/what-is-internet)
- [@website@Learn How the Web Works](https://internetfundamentals.com)
- [@video@How does the Internet work?](https://www.youtube.com/watch?v=x3c1ih2NJEg)
- [@video@How the Internet Works in 5 Minutes](https://www.youtube.com/watch?v=7_LPdttKXPc)