From 7da244fe100739be7dd19a99d1450b743a73fbe0 Mon Sep 17 00:00:00 2001 From: Kamran Ahmed Date: Tue, 24 Oct 2023 23:48:50 +0100 Subject: [PATCH] Add related questions below roadmaps --- src/components/RelatedRoadmaps.astro | 100 ++++++++++++++++----- src/data/roadmaps/angular/angular.md | 2 + src/data/roadmaps/backend/backend.md | 2 + src/data/roadmaps/frontend/frontend.md | 3 + src/data/roadmaps/javascript/javascript.md | 3 + src/data/roadmaps/nodejs/nodejs.md | 2 + src/data/roadmaps/react/react.md | 3 + src/data/roadmaps/vue/vue.md | 2 + src/lib/question-group.ts | 33 ++++++- src/lib/roadmap.ts | 17 ++-- src/pages/[roadmapId]/index.astro | 3 +- 11 files changed, 138 insertions(+), 32 deletions(-) diff --git a/src/components/RelatedRoadmaps.astro b/src/components/RelatedRoadmaps.astro index 2663d556f..81b2546f1 100644 --- a/src/components/RelatedRoadmaps.astro +++ b/src/components/RelatedRoadmaps.astro @@ -1,5 +1,7 @@ --- +import { getQuestionGroupsByIds } from '../lib/question-group'; import { getRoadmapsByIds, RoadmapFrontmatter } from '../lib/roadmap'; +import { Map, Clipboard } from 'lucide-react'; export interface Props { roadmap: RoadmapFrontmatter; @@ -8,35 +10,87 @@ export interface Props { const { roadmap } = Astro.props; const relatedRoadmaps = roadmap.relatedRoadmaps || []; -if (!relatedRoadmaps.length) { - return null; -} - const relatedRoadmapDetails = await getRoadmapsByIds(relatedRoadmaps); + +const relatedQuestions = roadmap.relatedQuestions || []; +const relatedQuestionDetails = await getQuestionGroupsByIds(relatedQuestions); --- -
-
-
- Related Roadmaps - - - More → - +{ + relatedQuestionDetails.length > 0 && ( +
+
+
+ + + Test your Knowledge + + New + + + + + More → + +
+ +
+ {relatedQuestionDetails.map((relatedQuestionGroup) => ( + + + {relatedQuestionGroup.title} + + + {relatedQuestionGroup.description} + + + ))} +
+
+ ) +} -
- { - relatedRoadmapDetails.map((relatedRoadmap) => ( +{ + relatedRoadmaps.length && ( +
+
+
+ + + Related Roadmaps + - {relatedRoadmap.frontmatter.briefTitle} - {relatedRoadmap.frontmatter.briefDescription} + + More → - )) - } +
+ +
+ {relatedRoadmapDetails.map((relatedRoadmap) => ( + + + {relatedRoadmap.frontmatter.briefTitle} + + + {relatedRoadmap.frontmatter.briefDescription} + + + ))} +
+
-
-
+ ) +} diff --git a/src/data/roadmaps/angular/angular.md b/src/data/roadmaps/angular/angular.md index 917fb37dc..024f8dc73 100644 --- a/src/data/roadmaps/angular/angular.md +++ b/src/data/roadmaps/angular/angular.md @@ -37,6 +37,8 @@ relatedRoadmaps: - 'react' - 'vue' - 'nodejs' +relatedQuestions: + - 'javascript' sitemap: priority: 1 changefreq: 'monthly' diff --git a/src/data/roadmaps/backend/backend.md b/src/data/roadmaps/backend/backend.md index f175b8b1f..47c3239d0 100644 --- a/src/data/roadmaps/backend/backend.md +++ b/src/data/roadmaps/backend/backend.md @@ -63,6 +63,8 @@ relatedRoadmaps: - 'javascript' - 'nodejs' - 'postgresql-dba' +relatedQuestions: + - 'javascript' sitemap: priority: 1 changefreq: 'monthly' diff --git a/src/data/roadmaps/frontend/frontend.md b/src/data/roadmaps/frontend/frontend.md index 1c15e1dd6..bf1117315 100644 --- a/src/data/roadmaps/frontend/frontend.md +++ b/src/data/roadmaps/frontend/frontend.md @@ -61,6 +61,9 @@ relatedRoadmaps: - 'angular' - 'vue' - 'design-system' +relatedQuestions: + - 'javascript' + - 'react' sitemap: priority: 1 changefreq: 'monthly' diff --git a/src/data/roadmaps/javascript/javascript.md b/src/data/roadmaps/javascript/javascript.md index 638f9911c..8c759696c 100644 --- a/src/data/roadmaps/javascript/javascript.md +++ b/src/data/roadmaps/javascript/javascript.md @@ -45,6 +45,9 @@ relatedRoadmaps: - 'react' - 'angular' - 'vue' +relatedQuestions: + - 'javascript' + - 'react' sitemap: priority: 1 changefreq: 'monthly' diff --git a/src/data/roadmaps/nodejs/nodejs.md b/src/data/roadmaps/nodejs/nodejs.md index 691a98a4a..f384c0e14 100644 --- a/src/data/roadmaps/nodejs/nodejs.md +++ b/src/data/roadmaps/nodejs/nodejs.md @@ -75,6 +75,8 @@ relatedRoadmaps: - 'system-design' - 'graphql' - 'frontend' +relatedQuestions: + - 'javascript' sitemap: priority: 1 changefreq: 'monthly' diff --git a/src/data/roadmaps/react/react.md b/src/data/roadmaps/react/react.md index 9e21919af..425c1c082 100644 --- a/src/data/roadmaps/react/react.md +++ b/src/data/roadmaps/react/react.md @@ -40,6 +40,9 @@ relatedRoadmaps: - 'vue' - 'nodejs' - 'design-system' +relatedQuestions: + - 'react' + - 'javascript' sitemap: priority: 1 changefreq: 'monthly' diff --git a/src/data/roadmaps/vue/vue.md b/src/data/roadmaps/vue/vue.md index 312ffd65a..61a094850 100644 --- a/src/data/roadmaps/vue/vue.md +++ b/src/data/roadmaps/vue/vue.md @@ -49,6 +49,8 @@ relatedRoadmaps: - 'react' - 'angular' - 'nodejs' +relatedQuestions: + - 'javascript' sitemap: priority: 1 changefreq: 'monthly' diff --git a/src/lib/question-group.ts b/src/lib/question-group.ts index 305389aa5..114bccc78 100644 --- a/src/lib/question-group.ts +++ b/src/lib/question-group.ts @@ -54,7 +54,7 @@ export async function getAllQuestionGroups(): Promise { `/src/data/question-groups/*/*.md`, { eager: true, - } + }, ); const answerFilesMap = await import.meta.glob( @@ -63,7 +63,7 @@ export async function getAllQuestionGroups(): Promise { { eager: true, as: 'raw', - } + }, ); return Object.values(questionGroupFilesMap) @@ -116,3 +116,32 @@ export async function getAllQuestionGroups(): Promise { }) .sort((a, b) => a.frontmatter.order - b.frontmatter.order); } + +export async function getQuestionGroupsByIds( + ids: string[], +): Promise<{ id: string; title: string; description: string }[]> { + if (!ids?.length) { + return []; + } + + const questionGroupFilesMap = import.meta.glob< + MarkdownFileType + >(`/src/data/question-groups/*/*.md`, { + eager: true, + }); + + return Object.values(questionGroupFilesMap) + .map((group) => { + const fileId = group?.file?.split('/')?.pop()?.replace('.md', ''); + const frontmatter = group.frontmatter; + + return { + id: fileId!, + title: frontmatter.briefTitle, + description: `${frontmatter.questions.length} Questions`, + }; + }) + .filter((group) => { + return ids.includes(group.id); + }); +} diff --git a/src/lib/roadmap.ts b/src/lib/roadmap.ts index 0cd77e738..cd78e6f31 100644 --- a/src/lib/roadmap.ts +++ b/src/lib/roadmap.ts @@ -34,6 +34,7 @@ export interface RoadmapFrontmatter { imageUrl: string; }; relatedRoadmaps: string[]; + relatedQuestions: string[]; sitemap: { priority: number; changefreq: string; @@ -61,7 +62,7 @@ export async function getRoadmapIds() { '/src/data/roadmaps/*/*.md', { eager: true, - } + }, ); return Object.keys(roadmapFiles).map(roadmapPathToId); @@ -74,13 +75,13 @@ export async function getRoadmapIds() { * @returns Promisified RoadmapFileType[] */ export async function getRoadmapsByTag( - tag: string + tag: string, ): Promise { const roadmapFilesMap = await import.meta.glob( '/src/data/roadmaps/*/*.md', { eager: true, - } + }, ); const roadmapFiles = Object.values(roadmapFilesMap); @@ -92,7 +93,7 @@ export async function getRoadmapsByTag( })); return filteredRoadmaps.sort( - (a, b) => a.frontmatter.order - b.frontmatter.order + (a, b) => a.frontmatter.order - b.frontmatter.order, ); } @@ -101,7 +102,7 @@ export async function getRoadmapById(id: string): Promise { '/src/data/roadmaps/*/*.md', { eager: true, - } + }, ); const roadmapFile = Object.values(roadmapFilesMap).find((roadmapFile) => { @@ -119,7 +120,11 @@ export async function getRoadmapById(id: string): Promise { } export async function getRoadmapsByIds( - ids: string[] + ids: string[], ): Promise { + if (!ids?.length) { + return []; + } + return Promise.all(ids.map((id) => getRoadmapById(id))); } diff --git a/src/pages/[roadmapId]/index.astro b/src/pages/[roadmapId]/index.astro index a38129969..5ad92729d 100644 --- a/src/pages/[roadmapId]/index.astro +++ b/src/pages/[roadmapId]/index.astro @@ -48,7 +48,7 @@ if (roadmapData.schema) { datePublished: roadmapSchema.datePublished, dateModified: roadmapSchema.dateModified, imageUrl: roadmapSchema.imageUrl, - }) + }), ); } @@ -116,6 +116,7 @@ if (roadmapFAQs.length) { /> +