github
/
developer-roadmap
mirror of https://github.com/kamranahmedse/developer-roadmap.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Add tns link

Browse Source
pull/5577/head
Kamran Ahmed 7 months ago
parent 2a9195c6d2
commit 2eb90d78e5
4 changed files with 1340 additions and 1247 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 3
      .astro/settings.json
  2. 2331
      pnpm-lock.yaml
  3. 242
      src/components/TopicDetail/TopicDetail.tsx
  4. 11
      src/lib/roadmap.ts

3
.astro/settings.json
Unescape View File

@ -1,5 +1,8 @@
{ {
"devToolbar": { "devToolbar": {
"enabled": false "enabled": false
},
"_variables": {
"lastUpdateCheck": 1714413381505
} }
} }

2331
pnpm-lock.yaml
View File

File diff suppressed because it is too large Load Diff

242
src/components/TopicDetail/TopicDetail.tsx
Unescape View File

@ -29,6 +29,7 @@ import { Spinner } from '../ReactIcons/Spinner';
import { GitHubIcon } from '../ReactIcons/GitHubIcon.tsx'; import { GitHubIcon } from '../ReactIcons/GitHubIcon.tsx';
import { GoogleIcon } from '../ReactIcons/GoogleIcon.tsx'; import { GoogleIcon } from '../ReactIcons/GoogleIcon.tsx';
import { YouTubeIcon } from '../ReactIcons/YouTubeIcon.tsx'; import { YouTubeIcon } from '../ReactIcons/YouTubeIcon.tsx';
import { resourceTitleFromId } from '../../lib/roadmap.ts';
type TopicDetailProps = { type TopicDetailProps = {
resourceTitle?: string; resourceTitle?: string;
@ -207,7 +208,9 @@ export function TopicDetail(props: TopicDetailProps) {
} }
const hasContent = topicHtml?.length > 0 || links?.length > 0 || topicTitle; const hasContent = topicHtml?.length > 0 || links?.length > 0 || topicTitle;
const resourceTitleForSearch = resourceTitle?.toLowerCase()?.replace(/\s+?roadmap/ig, ''); const resourceTitleForSearch = resourceTitle
?.toLowerCase()
?.replace(/\s+?roadmap/gi, '');
const googleSearchUrl = `https://www.google.com/search?q=${topicHtmlTitle?.toLowerCase()} guide for ${resourceTitleForSearch}`; const googleSearchUrl = `https://www.google.com/search?q=${topicHtmlTitle?.toLowerCase()} guide for ${resourceTitleForSearch}`;
const youtubeSearchUrl = `https://www.youtube.com/results?search_query=${topicHtmlTitle?.toLowerCase()} for ${resourceTitleForSearch}`; const youtubeSearchUrl = `https://www.youtube.com/results?search_query=${topicHtmlTitle?.toLowerCase()} for ${resourceTitleForSearch}`;
@ -216,7 +219,7 @@ export function TopicDetail(props: TopicDetailProps) {
<div <div
ref={topicRef} ref={topicRef}
tabIndex={0} tabIndex={0}
className="fixed right-0 top-0 z-40 h-screen w-full overflow-y-auto bg-white p-4 focus:outline-0 sm:max-w-[600px] sm:p-6" className="fixed right-0 top-0 z-40 flex h-screen w-full flex-col overflow-y-auto bg-white p-4 focus:outline-0 sm:max-w-[600px] sm:p-6"
> >
{isLoading && ( {isLoading && (
<div className="flex w-full justify-center"> <div className="flex w-full justify-center">
@ -230,140 +233,171 @@ export function TopicDetail(props: TopicDetailProps) {
{!isContributing && !isLoading && !error && ( {!isContributing && !isLoading && !error && (
<> <>
{/* Actions for the topic */} <div className="flex-1">
<div className="mb-2"> {/* Actions for the topic */}
{!isEmbed && ( <div className="mb-2">
<TopicProgressButton {!isEmbed && (
topicId={topicId} <TopicProgressButton
resourceId={resourceId} topicId={topicId}
resourceType={resourceType} resourceId={resourceId}
onClose={() => { resourceType={resourceType}
onClose={() => {
setIsActive(false);
}}
/>
)}
<button
type="button"
id="close-topic"
className="absolute right-2.5 top-2.5 inline-flex items-center rounded-lg bg-transparent p-1.5 text-sm text-gray-400 hover:bg-gray-200 hover:text-gray-900"
onClick={() => {
setIsActive(false); setIsActive(false);
}} }}
/> >
)} <X className="h-5 w-5" />
</button>
<button
type="button"
id="close-topic"
className="absolute right-2.5 top-2.5 inline-flex items-center rounded-lg bg-transparent p-1.5 text-sm text-gray-400 hover:bg-gray-200 hover:text-gray-900"
onClick={() => {
setIsActive(false);
}}
>
<X className="h-5 w-5" />
</button>
</div>
{/* Topic Content */}
{hasContent ? (
<div className="prose prose-h1:text-balance prose-quoteless prose-h1:mb-2.5 prose-h1:mt-7 prose-h2:mb-3 prose-h2:mt-0 prose-h3:mb-[5px] prose-h3:mt-[10px] prose-p:mb-2 prose-p:mt-0 prose-blockquote:font-normal prose-blockquote:not-italic prose-blockquote:text-gray-700 prose-li:m-0 prose-li:mb-0.5">
{topicTitle && <h1>{topicTitle}</h1>}
<div
id="topic-content"
dangerouslySetInnerHTML={{ __html: topicHtml }}
/>
</div> </div>
) : (
<div className="flex h-[calc(100%-38px)] flex-col items-center justify-center">
<FileText className="h-16 w-16 text-gray-300" />
<p className="mt-2 text-lg font-medium text-gray-500">
Empty Content
</p>
</div>
)}
{links.length > 0 && ( {/* Topic Content */}
<ul className="mt-6 space-y-1"> {hasContent ? (
{links.map((link) => { <div className="prose prose-quoteless prose-h1:mb-2.5 prose-h1:mt-7 prose-h1:text-balance prose-h2:mb-3 prose-h2:mt-0 prose-h3:mb-[5px] prose-h3:mt-[10px] prose-p:mb-2 prose-p:mt-0 prose-blockquote:font-normal prose-blockquote:not-italic prose-blockquote:text-gray-700 prose-li:m-0 prose-li:mb-0.5">
return ( {topicTitle && <h1>{topicTitle}</h1>}
<li> <div
<a id="topic-content"
href={link.url} dangerouslySetInnerHTML={{ __html: topicHtml }}
target="_blank" />
className="font-medium underline" </div>
> ) : (
<span <div className="flex h-[calc(100%-38px)] flex-col items-center justify-center">
className={cn( <FileText className="h-16 w-16 text-gray-300" />
'mr-2 inline-block rounded px-1.5 py-1 text-xs uppercase no-underline', <p className="mt-2 text-lg font-medium text-gray-500">
linkTypes[link.type], Empty Content
)} </p>
</div>
)}
{links.length > 0 && (
<ul className="mt-6 space-y-1">
{links.map((link) => {
return (
<li>
<a
href={link.url}
target="_blank"
className="font-medium underline"
> >
{link.type.charAt(0).toUpperCase() + <span
link.type.slice(1)} className={cn(
</span> 'mr-2 inline-block rounded px-1.5 py-1 text-xs uppercase no-underline',
{link.title} linkTypes[link.type],
</a> )}
</li> >
); {link.type.charAt(0).toUpperCase() +
})} link.type.slice(1)}
</ul> </span>
)} {link.title}
</a>
</li>
);
})}
</ul>
)}
{/* Contribution */} {/* Contribution */}
{canSubmitContribution && !hasEnoughLinks && contributionUrl && ( {canSubmitContribution && !hasEnoughLinks && contributionUrl && (
<div className="mt-8 mb-12 flex-1 border-t text-gray-400 text-sm"> <div className="mb-12 mt-3 border-t text-sm text-gray-400">
<div className='mt-3 mb-4'> <div className="mb-4 mt-3">
<p className=''> <p className="">
Can't find what you're looking for? Try these pre-filled search queries: Can't find what you're looking for? Try these pre-filled
search queries:
</p> </p>
<div className="mt-3 flex gap-2 text-gray-700"> <div className="mt-3 flex gap-2 text-gray-700">
<a <a
href={googleSearchUrl} href={googleSearchUrl}
target="_blank" target="_blank"
className="text-xs flex items-center gap-2 rounded-md border border-gray-300 px-3 py-1.5 pl-2 hover:border-gray-700 hover:bg-gray-100" className="flex items-center gap-2 rounded-md border border-gray-300 px-3 py-1.5 pl-2 text-xs hover:border-gray-700 hover:bg-gray-100"
> >
<GoogleIcon className={'h-4 w-4'}/> <GoogleIcon className={'h-4 w-4'} />
Google Google
</a> </a>
<a <a
href={youtubeSearchUrl} href={youtubeSearchUrl}
target="_blank" target="_blank"
className="text-xs flex items-center gap-2 rounded-md border border-gray-300 px-3 py-1.5 pl-2 hover:border-gray-700 hover:bg-gray-100" className="flex items-center gap-2 rounded-md border border-gray-300 px-3 py-1.5 pl-2 text-xs hover:border-gray-700 hover:bg-gray-100"
> >
<YouTubeIcon className={'h-4 w-4 text-red-500'}/> <YouTubeIcon className={'h-4 w-4 text-red-500'} />
YouTube YouTube
</a> </a>
</div> </div>
</div> </div>
<p className="mb-2 mt-2 leading-relaxed"> <p className="mb-2 mt-2 leading-relaxed">
Help us improve this introduction and submit a link to a good Help us improve this introduction and submit a link to a
article, podcast, video, or any other self-vetted resource that helped you good article, podcast, video, or any other self-vetted
understand this topic better. resource that helped you understand this topic better.
</p> </p>
<a <a
href={contributionUrl} href={contributionUrl}
target={'_blank'} target={'_blank'}
className="flex w-full items-center justify-center rounded-md bg-gray-800 p-2 text-sm text-white transition-colors hover:bg-black hover:text-white disabled:bg-green-200 disabled:text-black" className="flex w-full items-center justify-center rounded-md bg-gray-800 p-2 text-sm text-white transition-colors hover:bg-black hover:text-white disabled:bg-green-200 disabled:text-black"
> >
<GitHubIcon className="mr-2 inline-block h-4 w-4 text-white"/> <GitHubIcon className="mr-2 inline-block h-4 w-4 text-white" />
Edit this Content Edit this Content
</a> </a>
</div> </div>
)}
</div>
{resourceId === 'devops' && (
<div className="mt-4">
<a
href={'https://thenewstack.io'}
target="_blank"
className="hidden rounded-md border bg-gray-200 px-2 py-2 text-sm hover:bg-gray-300 sm:block"
>
<span className="badge mr-1.5">Partner</span>
Get the latest {resourceTitleFromId(resourceId)} news from our
sister site{' '}
<span className="font-medium underline underline-offset-1">
TheNewStack.io
</span>
</a>
<a
href={'https://thenewstack.io'}
className="hidden rounded-md border bg-gray-200 px-2 py-1.5 text-sm hover:bg-gray-300 min-[390px]:block sm:hidden"
>
<span className="badge mr-1.5">Partner</span>
Visit{' '}
<span className="font-medium underline underline-offset-1">
TheNewStack.io
</span>{' '}
for {resourceTitleFromId(resourceId)} news
</a>
</div>
)} )}
</> </>
)} )}
{/* Error */} {/* Error */}
{!isContributing && !isLoading && error && ( {!isContributing && !isLoading && error && (
<> <>
<button <button
type="button" type="button"
id="close-topic" id="close-topic"
className="absolute right-2.5 top-2.5 inline-flex items-center rounded-lg bg-transparent p-1.5 text-sm text-gray-400 hover:bg-gray-200 hover:text-gray-900" className="absolute right-2.5 top-2.5 inline-flex items-center rounded-lg bg-transparent p-1.5 text-sm text-gray-400 hover:bg-gray-200 hover:text-gray-900"
onClick={() => { onClick={() => {
setIsActive(false); setIsActive(false);
setIsContributing(false); setIsContributing(false);
}} }}
> >
<X className="h-5 w-5"/> <X className="h-5 w-5" />
</button> </button>
<div className="flex h-full flex-col items-center justify-center"> <div className="flex h-full flex-col items-center justify-center">
<Ban className="h-16 w-16 text-red-500"/> <Ban className="h-16 w-16 text-red-500" />
<p className="mt-2 text-lg font-medium text-red-500">{error}</p> <p className="mt-2 text-lg font-medium text-red-500">{error}</p>
</div> </div>
</> </>
)} )}
</div> </div>
<div className="fixed inset-0 z-30 bg-gray-900 bg-opacity-50 dark:bg-opacity-80"></div> <div className="fixed inset-0 z-30 bg-gray-900 bg-opacity-50 dark:bg-opacity-80"></div>

11
src/lib/roadmap.ts
Unescape View File

@ -1,5 +1,16 @@
import type { MarkdownFileType } from './file'; import type { MarkdownFileType } from './file';
export function resourceTitleFromId(id: string): string {
if (id === 'devops') {
return 'DevOps';
}
return id
.split('-')
.map((word) => word.charAt(0).toUpperCase() + word.slice(1))
.join(' ');
}
export interface RoadmapFrontmatter { export interface RoadmapFrontmatter {
pdfUrl: string; pdfUrl: string;
order: number; order: number;

Write Preview
Loading…
Cancel
Save