Merge pull request #142 from kamranahmedse/develop

Create a new pull request by comparing changes across two branches

readme.md

@@ -59,6 +59,7 @@ Here is the list of available roadmaps with more being actively worked upon.
 - [Node.js Roadmap](https://roadmap.sh/nodejs)
 - [GraphQL Roadmap](https://roadmap.sh/graphql)
 - [Android Roadmap](https://roadmap.sh/android)
+- [iOS Roadmap](https://roadmap.sh/ios)
 - [Flutter Roadmap](https://roadmap.sh/flutter)
 - [Go Roadmap](https://roadmap.sh/golang)
 - [Rust Roadmap](https://roadmap.sh/rust)
@@ -91,6 +92,7 @@ There are also interactive best practices:
 - [JavaScript Questions](https://roadmap.sh/questions/javascript)
 - [Node.js Questions](https://roadmap.sh/questions/nodejs)
 - [React Questions](https://roadmap.sh/questions/react)
+- [Backend Questions](https://roadmap.sh/questions/backend)
 
 ![](https://i.imgur.com/waxVImv.png)
 

src/components/EditorRoadmap/EditorRoadmapRenderer.tsx

@@ -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');
   }, []);

src/components/GenerateRoadmap/GenerateRoadmap.tsx

@@ -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';
 

src/components/GenerateRoadmap/RoadmapSearch.tsx

@@ -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/Navigation/Navigation.astro

@@ -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/OnboardingNudge.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/Roadmaps/RoadmapsPage.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/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<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

src/components/TopicDetail/TopicProgressButton.tsx

@@ -82,7 +82,6 @@ export function TopicProgressButton(props: TopicProgressButtonProps) {
     'l',
     () => {
       if (progress === 'learning') {
-        onClose();
         return;
       }
 
@@ -138,7 +137,9 @@ export function TopicProgressButton(props: TopicProgressButtonProps) {
     )
       .then(() => {
         setProgress(progress);
-        onClose();
+        if (progress !== 'learning') {
+          onClose();
+        }
         renderTopicProgress(topicId, progress);
         refreshProgressCounters();
       })

src/data/roadmaps/angular/content/102-angular-basics/101-angular-components.md

@@ -10,4 +10,6 @@ Components are the main building block for Angular applications. Each component
 Visit the following resources to learn more:
 
 - [Angular Components Overview](https://angular.io/guide/component-overview)
+- [Anatomy of a component](https://angular.dev/guide/components)
+- [Composing with Components in Angular](https://angular.dev/essentials/components)
 - [Standalone Components in Angular](https://www.youtube.com/watch?v=x5PZwb4XurU)

src/data/roadmaps/angular/content/104-templates/102-template-statements.md

@@ -5,3 +5,4 @@ Template statements are methods or properties that you can use in your HTML to r
 Visit the following resources to learn more:
 
 - [Angular Official Website](https://angular.io/guide/template-statements)
+- [Understanding Template Statements](https://angular.dev/guide/templates/template-statements#)

src/data/roadmaps/golang/content/101-go-advanced/112-pointers.md

@@ -1,3 +1,9 @@
 # Go Pointers
 
-Go pointers are a powerful feature that allows you to work with memory addresses directly. They are used to store the memory address of a variable. This can be useful when you need to pass a large amount of data to a function or when you need to modify the value of a variable inside a function.
+Go pointers are a powerful feature that allows you to work with memory addresses directly. They are used to store the memory address of a variable. This can be useful when you need to pass a large amount of data to a function or when you need to modify the value of a variable inside a function.
+
+Visit the following resources to learn more:
+
+- [Pointers](https://go.dev/tour/moretypes/1)
+- [Go by Example: Pointers](https://gobyexample.com/pointers)
+- [YouTube: Pointers](https://www.youtube.com/watch?v=a4HcEsJ1hIE)

src/data/roadmaps/ios/content/accessibility-inspector@h34LaYQ3JYN2AZPMDqpmO.md

@@ -0,0 +1 @@
+# Accessibility Inspector

src/data/roadmaps/ios/content/accessibility@1DZYPqvgY6GtwMCS7N2y-.md

@@ -0,0 +1 @@
+# Accessibility

src/data/roadmaps/ios/content/alamofire@nJeBisdKtN43ntkXnPCVF.md

@@ -0,0 +1 @@
+# Alamofire

src/data/roadmaps/ios/content/app-store-distribution@iZAXQKLe2LaIIifVFtFOL.md

@@ -0,0 +1 @@
+# App Store Distribution

src/data/roadmaps/ios/content/app-store-optimization-aso@jZpH-T2hW-XBdprVqemGi.md

@@ -0,0 +1 @@
+# App Store Optimization (ASO)

src/data/roadmaps/ios/content/architectural-patterns@ajPGMwoaFb1UFWTtpi5kd.md

@@ -0,0 +1 @@
+# Architectural Patterns

src/data/roadmaps/ios/content/arkit@k3uHcF0CsyHr6PK95UwR1.md

@@ -0,0 +1 @@
+# ARKit

src/data/roadmaps/ios/content/async--await-in-swift@3GtrUXvLgvXK3G8cXRb-P.md

@@ -0,0 +1 @@
+# async / await in Swift

src/data/roadmaps/ios/content/async--await@ysaBCl_TtWqelirptQp7P.md

@@ -0,0 +1 @@
+# Async / Await

src/data/roadmaps/ios/content/auto-layout@j2BL0sf3WjnJZZWa7cCjy.md

@@ -0,0 +1 @@
+# Auto layout

src/data/roadmaps/ios/content/av-foundation@UKgiSQvR9cryQT50t7riZ.md

@@ -0,0 +1 @@
+# AV Foundation

src/data/roadmaps/ios/content/azure@r3fNx1Hk_TGlQSDtRnXqF.md

@@ -0,0 +1 @@
+# Azure

src/data/roadmaps/ios/content/basic-interfaces@0o3V_zveN1xCIt7rayrCF.md

@@ -0,0 +1 @@
+# Basic Interfaces

src/data/roadmaps/ios/content/basics--creating-animations@w0i5Dxp40XS2HnF5nXeZI.md

@@ -0,0 +1 @@
+# Basics / Creating Animations

src/data/roadmaps/ios/content/benefits-over-objective-c@ZkNulHQAqhiFTO3CRC_mW.md

@@ -0,0 +1 @@
+# Benefits over Objective-C

src/data/roadmaps/ios/content/breakpoints@X0QavvwPVJU6sulafPVUK.md

@@ -0,0 +1 @@
+# Breakpoints

src/data/roadmaps/ios/content/building-interfaces@YvuYJceeNNfLBpq2-3iiL.md

@@ -0,0 +1 @@
+# Building Interfaces

src/data/roadmaps/ios/content/callback-hell@WhOpzFvv21QQV3aS6XbXr.md

@@ -0,0 +1 @@
+# Callback Hell

src/data/roadmaps/ios/content/callbacks@qJEd7KU52xL_GRG3IQqhM.md

@@ -0,0 +1 @@
+# Callbacks

src/data/roadmaps/ios/content/capturing-values--memory-mgmt@S-D-PnHA7COd2Dp6U2XO4.md

@@ -0,0 +1 @@
+# Capturing Values & Memory Mgmt.

src/data/roadmaps/ios/content/carthage@tIHjjNTXJWcNgkO6TB9ea.md

@@ -0,0 +1 @@
+# Carthage

src/data/roadmaps/ios/content/ci--cd@U4xE1enkZxUME0j0gutae.md

@@ -0,0 +1 @@
+# CI / CD

src/data/roadmaps/ios/content/circle-ci@tWxuFh0xDugdplnHt_G0e.md

@@ -0,0 +1 @@
+# Circle CI

src/data/roadmaps/ios/content/closures@M9UlalPL47GoqhcyGsAPV.md

@@ -0,0 +1 @@
+# Closures

src/data/roadmaps/ios/content/cocoa-touch@leozxW-5fAOfkKbQM4FD1.md

@@ -0,0 +1,7 @@
+# Cocoa Touch
+
+The Cocoa Touch layer in iOS provides the key frameworks needed to create apps for iOS devices. It offers extensive support for various user interface elements, gestures, animations, and event handling, making it central to developing interactive and visually appealing applications. Key components include UIKit for managing the graphical user interface, Foundation for essential data and network access, and Core Motion for handling device motion data. Additionally, frameworks like GameKit, MapKit, MessageUI, EventKit, and AVFoundation extend functionality for gaming, mapping, communication, event management, and multimedia.
+
+Cocoa Touch is responsible for the seamless integration of user interfaces and multimedia, supporting touch-based input, complex animations, and gesture recognizers through UIKit. AVFoundation provides robust tools for handling audio and video, essential for media-rich applications. GameKit offers features for game development, while MapKit integrates mapping services. MessageUI enables in-app communication via email and messages, and EventKit manages calendar events and reminders. These frameworks collectively empower developers to create rich, interactive, and high-performing iOS applications.
+
+You can learn more in depth information on the elements of the Cocoa Touch layer further down the roadmap in the UI Design & Framework sections.

src/data/roadmaps/ios/content/cocoapods@epr1sOEZIAOwlgb8bre7r.md

@@ -0,0 +1 @@
+# CocoaPods

src/data/roadmaps/ios/content/code-quality-tools@DVe8S6TjKcQ8LT5G-aMVa.md

@@ -0,0 +1 @@
+# Code Quality Tools

src/data/roadmaps/ios/content/combine-and-mvvm@pY_zaMcFpeFDLgVk2W0Vy.md

@@ -0,0 +1 @@
+# Combine and MVVM

src/data/roadmaps/ios/content/combine@UzpdLLPs226N00c6weWRv.md

@@ -0,0 +1 @@
+# Combine