diff --git a/src/components/TopicDetail/TopicDetail.tsx b/src/components/TopicDetail/TopicDetail.tsx index ca28800a4..b3ca77289 100644 --- a/src/components/TopicDetail/TopicDetail.tsx +++ b/src/components/TopicDetail/TopicDetail.tsx @@ -23,7 +23,7 @@ import type { } from '../CustomRoadmap/CustomRoadmap'; import { markdownToHtml, sanitizeMarkdown } from '../../lib/markdown'; import { cn } from '../../lib/classname'; -import { Ban, FileText, X } from 'lucide-react'; +import { Ban, FileText, HeartHandshake, X } from 'lucide-react'; import { getUrlParams } from '../../lib/browser'; import { Spinner } from '../ReactIcons/Spinner'; import { GitHubIcon } from '../ReactIcons/GitHubIcon.tsx'; @@ -58,6 +58,7 @@ export function TopicDetail(props: TopicDetailProps) { const [isContributing, setIsContributing] = useState(false); const [error, setError] = useState(''); const [topicHtml, setTopicHtml] = useState(''); + const [hasContent, setHasContent] = useState(false); const [topicTitle, setTopicTitle] = useState(''); const [topicHtmlTitle, setTopicHtmlTitle] = useState(''); const [links, setLinks] = useState([]); @@ -177,6 +178,9 @@ export function TopicDetail(props: TopicDetailProps) { const titleElem: HTMLElement = topicDom.querySelector('h1')!; + const otherElems = topicDom.querySelectorAll('body > *:not(h1, div)'); + + setHasContent(otherElems.length > 0); setContributionUrl(contributionUrl); setHasEnoughLinks(links.length >= 3); setTopicHtmlTitle(titleElem?.textContent || ''); @@ -207,7 +211,6 @@ export function TopicDetail(props: TopicDetailProps) { return null; } - const hasContent = topicHtml?.length > 0 || links?.length > 0 || topicTitle; const resourceTitleForSearch = resourceTitle ?.toLowerCase() ?.replace(/\s+?roadmap/gi, ''); @@ -225,7 +228,7 @@ export function TopicDetail(props: TopicDetailProps) { 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 && ( -
+
- {topicTitle &&

{topicTitle}

} -
-
+ <> +
+ {topicTitle &&

{topicTitle}

} +
+
+ ) : ( -
- -

- Empty Content -

-
+ <> + {!canSubmitContribution && ( +
+ +

+ Empty Content +

+
+ )} + {canSubmitContribution && ( +
+ +

+ Help us write this content +

+

+ Write a brief introduction to this topic and submit a link to a good article, podcast, video, or any other self-vetted resource that helped you understand this topic better. +

+ + + Submit a Pull Request + +
+ )} + )} {links.length > 0 && ( @@ -313,8 +341,7 @@ export function TopicDetail(props: TopicDetailProps) {

- Can't find what you're looking for? Try these pre-filled - search queries: + Find more resources using these pre-filled search queries: