Merge pull request #131 from kamranahmedse/master

Create a new pull request by comparing changes across two branches

Author: GulajavaMinistudio

public/og-images/roadmaps/data-analyst.png

@@ -39,6 +39,7 @@ Here is the list of available roadmaps with more being actively worked upon.
 - [Computer Science Roadmap](https://roadmap.sh/computer-science)
 - [Data Structures and Algorithms Roadmap](https://roadmap.sh/datastructures-and-algorithms)
 - [AI and Data Scientist Roadmap](https://roadmap.sh/ai-data-scientist)
+- [Data Analyst Roadmap](https://roadmap.sh/data-analyst)
 - [MLOps Roadmap](https://roadmap.sh/mlops)
 - [QA Roadmap](https://roadmap.sh/qa)
 - [Python Roadmap](https://roadmap.sh/python)

public/pdfs/roadmaps/data-analyst.pdf

@@ -48,6 +48,11 @@ function getFilesInFolder(folderPath, fileList = {}) {
   return fileList;
 }
 
+/**
+ * Write the topic content for the given topic
+ * @param currTopicUrl
+ * @returns {Promise<string>}
+ */
 function writeTopicContent(currTopicUrl) {
   const [parentTopic, childTopic] = currTopicUrl
     .replace(/^\d+-/g, '/')
@@ -59,9 +64,18 @@ function writeTopicContent(currTopicUrl) {
 
   const roadmapTitle = roadmapId.replace(/-/g, ' ');
 
-  let prompt = `I am reading a guide about "${roadmapTitle}". I am on the topic "${parentTopic}". I want to know more about "${childTopic}". Write me a brief paragraph for that. Your output should be strictly markdown. Do not include anything other than the description in your output. I already know the benefits of each so do not add benefits in the output.`;
+  let prompt = `I will give you a topic and you need to write a brief introduction for that with regards to "${roadmapTitle}". Your format should be as follows and be in strictly markdown format:
+
+# (Put a heading for the topic)
+
+(Write me a brief introduction for the topic with regards to "${roadmapTitle}")
+
+`;
+
   if (!childTopic) {
-    prompt = `I am reading a guide about "${roadmapTitle}". I am on the topic "${parentTopic}". I want to know more about "${parentTopic}". Write me a brief paragraph for that. Your output should be strictly markdown. Do not include anything other than the description in your output. I already know the benefits of each so do not add benefits in the output.`;
+    prompt += `First topic is: ${parentTopic}`;
+  } else {
+    prompt += `First topic is: ${childTopic} under ${parentTopic}`;
   }
 
   console.log(`Generating '${childTopic || parentTopic}'...`);
@@ -123,10 +137,9 @@ async function writeFileForGroup(group, topicUrlToPathMapping) {
   }
 
   const topicContent = await writeTopicContent(currTopicUrl);
-  newFileContent += `\n\n${topicContent}`;
 
   console.log(`Writing ${topicId}..`);
-  fs.writeFileSync(contentFilePath, newFileContent, 'utf8');
+  fs.writeFileSync(contentFilePath, topicContent, 'utf8');
 
   // console.log(currentFileContent);
   // console.log(currTopicUrl);

public/roadmaps/data-analyst.png

@@ -246,7 +246,7 @@ export function AITermSuggestionInput(props: AITermSuggestionInputProps) {
                     key={result?._id}
                     type="button"
                     className={cn(
-                      'flex w-full items-center rounded p-2 text-sm',
+                      'flex w-full items-start rounded p-2 text-left text-sm',
                       counter === activeCounter ? 'bg-gray-100' : '',
                     )}
                     onMouseOver={() => setActiveCounter(counter)}
@@ -264,7 +264,7 @@ export function AITermSuggestionInput(props: AITermSuggestionInputProps) {
                   >
                     <span
                       className={cn(
-                        'mr-2 rounded-full p-1 px-1.5 text-xs leading-none',
+                        'mr-2 whitespace-nowrap rounded-full p-1 px-1.5 text-xs leading-none',
                         result.isOfficial
                           ? 'bg-green-500 text-green-50'
                           : 'bg-blue-400 text-blue-50',

readme.md

@@ -113,7 +113,9 @@ export function GenerateRoadmap() {
   const [roadmapTopicLimitUsed, setRoadmapTopicLimitUsed] = useState(0);
   const [isConfiguring, setIsConfiguring] = useState(false);
 
-  const [openAPIKey, setOpenAPIKey] = useState<string | undefined>(getOpenAIKey());
+  const [openAPIKey, setOpenAPIKey] = useState<string | undefined>(
+    getOpenAIKey(),
+  );
   const isKeyOnly = IS_KEY_ONLY_ROADMAP_GENERATION;
   const isAuthenticatedUser = isLoggedIn();
 
@@ -658,26 +660,26 @@ export function GenerateRoadmap() {
         </div>
         <div
           className={cn({
-            'relative mb-20 max-h-[800px] min-h-[800px] sm:max-h-[1000px] md:min-h-[1000px]  lg:max-h-[1200px] lg:min-h-[1200px] overflow-hidden':
+            'relative mb-20 max-h-[800px] min-h-[800px] overflow-hidden sm:max-h-[1000px]  md:min-h-[1000px] lg:max-h-[1200px] lg:min-h-[1200px]':
               !isAuthenticatedUser,
           })}
         >
           <div
             ref={roadmapContainerRef}
             id="roadmap-container"
             onClick={handleNodeClick}
-            className="relative px-4 py-5 [&>svg]:mx-auto [&>svg]:max-w-[1300px]"
+            className="relative min-h-[400px] px-4 py-5 [&>svg]:mx-auto [&>svg]:max-w-[1300px]"
           />
           {!isAuthenticatedUser && (
             <div className="absolute bottom-0 left-0 right-0">
               <div className="h-80 w-full bg-gradient-to-t from-gray-100 to-transparent" />
               <div className="bg-gray-100">
-                <div className="mx-auto px-5 max-w-[600px] flex-col items-center justify-center bg-gray-100 pt-px">
+                <div className="mx-auto max-w-[600px] flex-col items-center justify-center bg-gray-100 px-5 pt-px">
                   <div className="mt-8 text-center">
-                    <h2 className="mb-0.5 sm:mb-3 text-xl sm:text-2xl font-medium">
+                    <h2 className="mb-0.5 text-xl font-medium sm:mb-3 sm:text-2xl">
                       Sign up to View the full roadmap
                     </h2>
-                    <p className="mb-6 text-sm sm:text-base text-gray-600 text-balance">
+                    <p className="mb-6 text-balance text-sm text-gray-600 sm:text-base">
                       You must be logged in to view the complete roadmap
                     </p>
                   </div>

scripts/roadmap-content.cjs

@@ -45,7 +45,7 @@ export function RoadmapSearch(props: RoadmapSearchProps) {
   const randomTerms = ['OAuth', 'APIs', 'UX Design', 'gRPC'];
 
   return (
-    <div className="flex flex-grow flex-col items-center px-4 py-6 sm:px-6">
+    <div className="flex flex-grow flex-col items-center px-4 py-6 sm:px-6 md:my-24 lg:my-32">
       {isConfiguring && (
         <IncreaseRoadmapLimit
           onClose={() => {
@@ -55,7 +55,7 @@ export function RoadmapSearch(props: RoadmapSearchProps) {
           }}
         />
       )}
-      <div className="flex flex-col gap-0 text-center sm:gap-2 md:mt-24 lg:mt-32">
+      <div className="flex flex-col gap-0 text-center sm:gap-2">
         <h1 className="relative text-2xl font-medium sm:text-3xl">
           <span className="hidden sm:inline">Generate roadmaps with AI</span>
           <span className="inline sm:hidden">AI Roadmap Generator</span>

src/components/GenerateRoadmap/AITermSuggestionInput.tsx

@@ -18,7 +18,7 @@ export function RoleRoadmaps(props: RoleRoadmapsProps) {
           <SectionBadge title={badge} />
         </div>
         <div className="my-4 sm:my-7 text-left">
-          <h2 className="mb-1 text-xl sm:text-3xl font-semibold">{title}</h2>
+          <h2 className="mb-1 text-balance text-xl sm:text-3xl font-semibold">{title}</h2>
           <p className="text-sm sm:text-base text-gray-500">{description}</p>
 
           <div className="mt-4 sm:mt-7 grid sm:grid-cols-2 md:grid-cols-3 gap-3">{children}</div>

src/components/GenerateRoadmap/GenerateRoadmap.tsx

@@ -0,0 +1,61 @@
+---
+import { getGuideTableOfContent, type GuideFileType } from '../../lib/guide';
+import MarkdownFile from '../MarkdownFile.astro';
+import { TableOfContent } from '../TableOfContent/TableOfContent';
+
+interface Props {
+  guide: GuideFileType;
+}
+
+const { guide } = Astro.props;
+
+const allHeadings = guide.getHeadings();
+const tableOfContent = getGuideTableOfContent(allHeadings);
+
+const showTableOfContent = tableOfContent.length > 0;
+const { frontmatter: guideFrontmatter, author } = guide;
+---
+
+<article class='lg:grid lg:max-w-full lg:grid-cols-[1fr_minmax(0,700px)_1fr]'>
+  {
+    showTableOfContent && (
+      <div class='bg-gradient-to-r from-gray-50 py-0 lg:col-start-3 lg:col-end-4 lg:row-start-1'>
+        <TableOfContent toc={tableOfContent} client:load />
+      </div>
+    )
+  }
+
+  <div
+    class:list={['col-start-2 col-end-3 row-start-1 mx-auto max-w-[700px] py-5 sm:py-10', {
+      'lg:border-r': showTableOfContent
+    }]}
+  >
+    <MarkdownFile>
+      <h1 class='text-balance text-4xl mb-3 font-bold'>{guideFrontmatter.title}</h1>
+      <p
+        class='flex items-center justify-start text-sm text-gray-400 my-0'
+      >
+        <a
+          href={`/authors/${author.id}`}
+          class='inline-flex items-center font-medium hover:text-gray-600 hover:underline underline-offset-2'
+        >
+          <img
+            alt={author.frontmatter.name}
+            src={author.frontmatter.imageUrl}
+            class='mb-0 mr-2 inline h-5 w-5 rounded-full'
+          />
+          {author.frontmatter.name}
+        </a>
+        <span class='mx-2 hidden sm:inline'>&middot;</span>
+        <a
+          class='hover:text-gray-600 underline-offset-2 hidden sm:inline'
+          href={`https://github.com/kamranahmedse/developer-roadmap/tree/master/src/data/guides/${guide.id}.md`}
+          target='_blank'
+        >
+          Improve this Guide
+        </a>
+      </p>
+      <guide.Content />
+    </MarkdownFile>
+  </div>
+</article>