Merge pull request #142 from kamranahmedse/develop

Create a new pull request by comparing changes across two branches

Author: GulajavaMinistudio

public/pdfs/roadmaps/ios.pdf

@@ -12,6 +12,8 @@ import { useToast } from '../../hooks/use-toast';
 import type { Edge, Node } from 'reactflow';
 import { Renderer } from '../../../editor/renderer';
 import { slugify } from '../../lib/slugger';
+import { isLoggedIn } from '../../lib/jwt';
+import { showLoginPopup } from '../../lib/popup';
 
 export type RoadmapRendererProps = {
   resourceId: string;
@@ -104,13 +106,23 @@ export function EditorRoadmapRenderer(props: RoadmapRendererProps) {
 
     if (e.shiftKey) {
       e.preventDefault();
+      if (!isLoggedIn()) {
+        showLoginPopup();
+        return;
+      }
+
       updateTopicStatus(
         nodeId,
         isCurrentStatusLearning ? 'pending' : 'learning',
       );
       return;
     } else if (e.altKey) {
       e.preventDefault();
+      if (!isLoggedIn()) {
+        showLoginPopup();
+        return;
+      }
+
       updateTopicStatus(nodeId, isCurrentStatusSkipped ? 'pending' : 'skipped');
       return;
     }
@@ -143,6 +155,10 @@ export function EditorRoadmapRenderer(props: RoadmapRendererProps) {
       return;
     }
 
+    if (!isLoggedIn()) {
+      showLoginPopup();
+      return;
+    }
     const isCurrentStatusDone = targetGroup?.classList.contains('done');
     updateTopicStatus(nodeId, isCurrentStatusDone ? 'pending' : 'done');
   }, []);

public/roadmaps/ios.png

@@ -25,20 +25,14 @@ import { Ban, Cog, Download, PenSquare, Save, Wand } from 'lucide-react';
 import { ShareRoadmapButton } from '../ShareRoadmapButton.tsx';
 import { httpGet, httpPost } from '../../lib/http.ts';
 import { pageProgressMessage } from '../../stores/page.ts';
-import {
-  deleteUrlParam,
-  getUrlParams,
-  setUrlParams,
-} from '../../lib/browser.ts';
+import { deleteUrlParam, getUrlParams } from '../../lib/browser.ts';
 import { downloadGeneratedRoadmapImage } from '../../helper/download-image.ts';
 import { showLoginPopup } from '../../lib/popup.ts';
 import { cn } from '../../lib/classname.ts';
 import { RoadmapTopicDetail } from './RoadmapTopicDetail.tsx';
 import { AIRoadmapAlert } from './AIRoadmapAlert.tsx';
-import { OpenAISettings } from './OpenAISettings.tsx';
 import { IS_KEY_ONLY_ROADMAP_GENERATION } from '../../lib/ai.ts';
 import { AITermSuggestionInput } from './AITermSuggestionInput.tsx';
-import { useParams } from '../../hooks/use-params.ts';
 import { IncreaseRoadmapLimit } from './IncreaseRoadmapLimit.tsx';
 import { AuthenticationForm } from '../AuthenticationFlow/AuthenticationForm.tsx';
 

readme.md

@@ -42,7 +42,7 @@ export function RoadmapSearch(props: RoadmapSearchProps) {
     setIsAuthenticatedUser(isLoggedIn());
   }, []);
 
-  const randomTerms = ['OAuth', 'APIs', 'UX Design', 'gRPC'];
+  const randomTerms = ['OAuth', 'UI / UX', 'SRE', 'DevRel'];
 
   return (
     <div className="flex flex-grow flex-col items-center px-4 py-6 sm:px-6 md:my-24 lg:my-32">

src/components/EditorRoadmap/EditorRoadmapRenderer.tsx

@@ -17,10 +17,10 @@ import { AccountDropdown } from './AccountDropdown';
       </a>
 
       <a
-          href='/ai'
+          href='/teams'
           class='group inline sm:hidden relative !mr-2 text-blue-300 hover:text-white'
       >
-        AI Roadmaps&nbsp;
+        Teams
 
         <span class='absolute -right-[11px] top-0'>
             <span class='relative flex h-2 w-2'>

src/components/GenerateRoadmap/GenerateRoadmap.tsx

@@ -33,7 +33,7 @@ export function OnboardingNudge(props: OnboardingNudgeProps) {
   return (
     <div
       className={cn(
-        'fixed left-0 right-0 top-0 z-[91] flex w-full items-center justify-center bg-yellow-300 border-b border-b-yellow-500/30 py-1.5',
+        'fixed left-0 right-0 top-0 z-[91] flex w-full items-center justify-center bg-yellow-300 border-b border-b-yellow-500/30 pt-1.5 pb-2',
         {
           'striped-loader': isLoading,
         },

src/components/GenerateRoadmap/RoadmapSearch.tsx

@@ -232,6 +232,11 @@ const groups: GroupType[] = [
         link: '/android',
         type: 'role',
       },
+      {
+        title: 'iOS',
+        link: '/ios',
+        type: 'role',
+      },
       {
         title: 'React Native',
         link: '/react-native',

src/components/Navigation/Navigation.astro

@@ -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<RoadmapContentDocument['links']>([]);
@@ -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 || '');
@@ -187,6 +191,8 @@ export function TopicDetail(props: TopicDetailProps) {
           const sanitizedMarkdown = sanitizeMarkdown(
             (response as RoadmapContentDocument).description || '',
           );
+
+          setHasContent(sanitizedMarkdown?.length > 0);
           topicHtml = markdownToHtml(sanitizedMarkdown, false);
         }
 
@@ -207,7 +213,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 +230,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 && (
-          <div className="flex w-full h-full items-center justify-center">
+          <div className="flex h-full w-full items-center justify-center">
             <Spinner
               outerFill="#d1d5db"
               className="h-6 w-6 sm:h-8 sm:w-8"
@@ -242,7 +247,11 @@ export function TopicDetail(props: TopicDetailProps) {
               <div className="mb-2">
                 {!isEmbed && (
                   <TopicProgressButton
-                    topicId={topicId}
+                    topicId={
+                      topicId.indexOf('@') !== -1
+                        ? topicId.split('@')[1]
+                        : topicId
+                    }
                     resourceId={resourceId}
                     resourceType={resourceType}
                     onClose={() => {
@@ -265,20 +274,48 @@ export function TopicDetail(props: TopicDetailProps) {
 
               {/* Topic Content */}
               {hasContent ? (
-                <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">
-                  {topicTitle && <h1>{topicTitle}</h1>}
-                  <div
-                    id="topic-content"
-                    dangerouslySetInnerHTML={{ __html: topicHtml }}
-                  />
-                </div>
+                <>
+                  <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">
+                    {topicTitle && <h1>{topicTitle}</h1>}
+                    <div
+                      id="topic-content"
+                      dangerouslySetInnerHTML={{ __html: topicHtml }}
+                    />
+                  </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>
+                <>
+                  {!canSubmitContribution && (
+                    <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>
+                  )}
+                  {canSubmitContribution && (
+                    <div className="mx-auto flex h-[calc(100%-38px)] max-w-[400px] flex-col items-center justify-center text-center">
+                      <HeartHandshake className="mb-2 h-16 w-16 text-gray-300" />
+                      <p className="text-lg font-semibold text-gray-900">
+                        Help us write this content
+                      </p>
+                      <p className="mb-3 mt-2 text-sm text-gray-500">
+                        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.
+                      </p>
+                      <a
+                        href={contributionUrl}
+                        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"
+                      >
+                        <GitHubIcon className="mr-2 inline-block h-4 w-4 text-white" />
+                        Edit this Content
+                      </a>
+                    </div>
+                  )}
+                </>
               )}
 
               {links.length > 0 && (
@@ -313,8 +350,7 @@ export function TopicDetail(props: TopicDetailProps) {
                 <div className="mb-12 mt-3 border-t text-sm text-gray-400">
                   <div className="mb-4 mt-3">
                     <p className="">
-                      Can't find what you're looking for? Try these pre-filled
-                      search queries:
+                      Find more resources using these pre-filled search queries:
                     </p>
                     <div className="mt-3 flex gap-2  text-gray-700">
                       <a