From fac9a2bd6a5ac115580055d1847044ce9b5fe620 Mon Sep 17 00:00:00 2001
From: Kamran Ahmed <kamranahmed.se@gmail.com>
Date: Tue, 23 Apr 2024 17:35:29 +0100
Subject: [PATCH] Add google youtube links in topic content

---
 .../CustomRoadmap/CustomRoadmap.tsx           |  7 +++-
 src/components/ReactIcons/YouTubeIcon.tsx     | 19 +++++++++
 src/components/TopicDetail/TopicDetail.tsx    | 40 ++++++++++++++++++-
 src/pages/[roadmapId]/index.astro             |  7 +++-
 .../[bestPracticeId]/index.astro              |  7 +++-
 5 files changed, 76 insertions(+), 4 deletions(-)
 create mode 100644 src/components/ReactIcons/YouTubeIcon.tsx

diff --git a/src/components/CustomRoadmap/CustomRoadmap.tsx b/src/components/CustomRoadmap/CustomRoadmap.tsx
index d04af93b6..39930efc4 100644
--- a/src/components/CustomRoadmap/CustomRoadmap.tsx
+++ b/src/components/CustomRoadmap/CustomRoadmap.tsx
@@ -116,7 +116,12 @@ export function CustomRoadmap(props: CustomRoadmapProps) {
     <>
       {!isEmbed && <RoadmapHeader />}
       <FlowRoadmapRenderer isEmbed={isEmbed} roadmap={roadmap!} />
-      <TopicDetail isEmbed={isEmbed} canSubmitContribution={false} />
+      <TopicDetail
+        resourceTitle={roadmap!.title}
+        resourceType="roadmap"
+        isEmbed={isEmbed}
+        canSubmitContribution={false}
+      />
     </>
   );
 }
diff --git a/src/components/ReactIcons/YouTubeIcon.tsx b/src/components/ReactIcons/YouTubeIcon.tsx
new file mode 100644
index 000000000..2ccbe6684
--- /dev/null
+++ b/src/components/ReactIcons/YouTubeIcon.tsx
@@ -0,0 +1,19 @@
+type YouTubeIconProps = {
+  className?: string;
+};
+export function YouTubeIcon(props: YouTubeIconProps) {
+  const { className } = props;
+
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="20"
+      height="20"
+      viewBox="0 0 24 24"
+      fill="currentColor"
+      className={className}
+    >
+      <path d="M19.615 3.184c-3.604-.246-11.631-.245-15.23 0C.488 3.45.029 5.804 0 12c.029 6.185.484 8.549 4.385 8.816 3.6.245 11.626.246 15.23 0C23.512 20.55 23.971 18.196 24 12c-.029-6.185-.484-8.549-4.385-8.816zM9 16V8l8 3.993L9 16z" />
+    </svg>
+  );
+}
diff --git a/src/components/TopicDetail/TopicDetail.tsx b/src/components/TopicDetail/TopicDetail.tsx
index ed63cce3a..1c8af348d 100644
--- a/src/components/TopicDetail/TopicDetail.tsx
+++ b/src/components/TopicDetail/TopicDetail.tsx
@@ -27,8 +27,13 @@ import { Ban, FileText, X } from 'lucide-react';
 import { getUrlParams } from '../../lib/browser';
 import { Spinner } from '../ReactIcons/Spinner';
 import { GitHubIcon } from '../ReactIcons/GitHubIcon.tsx';
+import { GoogleIcon } from '../ReactIcons/GoogleIcon.tsx';
+import { YouTubeIcon } from '../ReactIcons/YouTubeIcon.tsx';
 
 type TopicDetailProps = {
+  resourceTitle?: string;
+  resourceType?: ResourceType;
+
   isEmbed?: boolean;
   canSubmitContribution: boolean;
 };
@@ -43,7 +48,7 @@ const linkTypes: Record<AllowedLinkTypes, string> = {
 };
 
 export function TopicDetail(props: TopicDetailProps) {
-  const { canSubmitContribution, isEmbed = false } = props;
+  const { canSubmitContribution, isEmbed = false, resourceTitle } = props;
 
   const [hasEnoughLinks, setHasEnoughLinks] = useState(false);
   const [contributionUrl, setContributionUrl] = useState('');
@@ -53,6 +58,7 @@ export function TopicDetail(props: TopicDetailProps) {
   const [error, setError] = useState('');
   const [topicHtml, setTopicHtml] = useState('');
   const [topicTitle, setTopicTitle] = useState('');
+  const [topicHtmlTitle, setTopicHtmlTitle] = useState('');
   const [links, setLinks] = useState<RoadmapContentDocument['links']>([]);
   const toast = useToast();
 
@@ -168,8 +174,11 @@ export function TopicDetail(props: TopicDetailProps) {
             topicDom.querySelector('[data-github-url]')!;
           const contributionUrl = urlElem?.dataset?.githubUrl || '';
 
+          const titleElem: HTMLElement = topicDom.querySelector('h1')!;
+
           setContributionUrl(contributionUrl);
           setHasEnoughLinks(links.length >= 3);
+          setTopicHtmlTitle(titleElem?.textContent || '');
         } else {
           setLinks((response as RoadmapContentDocument)?.links || []);
           setTopicTitle((response as RoadmapContentDocument)?.title || '');
@@ -198,6 +207,8 @@ export function TopicDetail(props: TopicDetailProps) {
   }
 
   const hasContent = topicHtml?.length > 0 || links?.length > 0 || topicTitle;
+  const googleSearchUrl = `https://www.google.com/search?q=${topicHtmlTitle?.toLowerCase()} guide for ${resourceTitle?.toLowerCase()}`;
+  const youtubeSearchUrl = `https://www.youtube.com/results?search_query=${topicHtmlTitle?.toLowerCase()} for ${resourceTitle?.toLowerCase()}`;
 
   return (
     <div className={'relative z-50'}>
@@ -288,6 +299,33 @@ export function TopicDetail(props: TopicDetailProps) {
               </ul>
             )}
 
+            {canSubmitContribution && (
+              <div>
+                <p className='text-base text-gray-700'>
+                  Use the pre-filled search queries below to find learning
+                  resources:
+                </p>
+                <div className="mt-3 flex gap-2">
+                  <a
+                    href={googleSearchUrl}
+                    target="_blank"
+                    className="flex items-center gap-2 rounded-md border border-gray-300 px-3 py-1.5 pl-2 text-sm hover:border-gray-700 hover:bg-gray-100"
+                  >
+                    <GoogleIcon className={'h-4 w-4'} />
+                    Google
+                  </a>
+                  <a
+                    href={youtubeSearchUrl}
+                    target="_blank"
+                    className="flex items-center gap-2 rounded-md border border-gray-300 px-3 py-1.5 pl-2 text-sm hover:border-gray-700 hover:bg-gray-100"
+                  >
+                    <YouTubeIcon className={'h-4 w-4 text-red-500'} />
+                    YouTube
+                  </a>
+                </div>
+              </div>
+            )}
+
             {/* Contribution */}
             {canSubmitContribution && !hasEnoughLinks && contributionUrl && (
               <div className="mt-8 flex-1 border-t">
diff --git a/src/pages/[roadmapId]/index.astro b/src/pages/[roadmapId]/index.astro
index 898c6d161..8353af669 100644
--- a/src/pages/[roadmapId]/index.astro
+++ b/src/pages/[roadmapId]/index.astro
@@ -106,7 +106,12 @@ const ogImageUrl =
             description={roadmapData.briefDescription}
             pageUrl={`https://roadmap.sh/${roadmapId}`}
           />
-          <TopicDetail client:idle canSubmitContribution={true} />
+          <TopicDetail
+            resourceTitle={roadmapData.title}
+            resourceType='roadmap'
+            client:idle
+            canSubmitContribution={true}
+          />
 
           <FrameRenderer
             resourceType={'roadmap'}
diff --git a/src/pages/best-practices/[bestPracticeId]/index.astro b/src/pages/best-practices/[bestPracticeId]/index.astro
index 54a1fd744..2dcb197ac 100644
--- a/src/pages/best-practices/[bestPracticeId]/index.astro
+++ b/src/pages/best-practices/[bestPracticeId]/index.astro
@@ -98,7 +98,12 @@ const ogImageUrl = getOpenGraphImageUrl({
             pageUrl={`https://roadmap.sh/best-practices/${bestPracticeId}`}
           />
 
-          <TopicDetail client:idle canSubmitContribution={true} />
+          <TopicDetail
+            resourceTitle={bestPracticeData.title}
+            resourceType='best-practice'
+            client:idle
+            canSubmitContribution={true}
+          />
 
           <FrameRenderer
             resourceType={'best-practice'}