chore: replace topic content

src/pages/[roadmapId]/[...topicId].astro

@@ -1,7 +1,6 @@
 ---
 import fs from 'node:fs';
 import path from 'node:path';
-import matter from 'gray-matter';
 import MarkdownIt from 'markdown-it-async';
 import { fileURLToPath } from 'node:url';
 import {
@@ -11,6 +10,10 @@ import {
 import BaseLayout from '../../layouts/BaseLayout.astro';
 import { GuideContent } from '../../components/Guide/GuideContent';
 import { getOpenGraphImageUrl } from '../../lib/open-graph';
+import {
+  getOfficialRoadmapTopic,
+  prepareOfficialRoadmapTopicContent,
+} from '../../queries/official-roadmap-topic';
 
 export const prerender = false;
 
@@ -52,41 +55,27 @@ if (isTopic) {
     `${topicPath}.md`,
   );
 
+  const topic = await getOfficialRoadmapTopic({
+    roadmapSlug: roadmapId,
+    nodeId: topicPath,
+  });
+
   // Check if file exists
-  if (!fs.existsSync(contentPath)) {
+  if (!fs.existsSync(contentPath) || !topic) {
-    const indexFilePath = path.join(
+    Astro.response.status = 404;
-      projectRoot,
+    Astro.response.statusText = 'Not found';
-      'src',
-      'data',
-      'roadmaps',
-      roadmapId,
-      'content',
-      `${topicPath}/index.md`,
-    );
 
-    if (!fs.existsSync(indexFilePath)) {
+    return Astro.rewrite('/404');
-      Astro.response.status = 404;
-      Astro.response.statusText = 'Not found';
-
-      return Astro.rewrite('/404');
-    }
-
-    contentPath = indexFilePath;
   }
 
-  // Read and parse the markdown file
-  const fileContent = fs.readFileSync(contentPath, 'utf-8');
-  const { content } = matter(fileContent);
-
   const fileWithoutBasePath = contentPath.replace(
     /.+?\/src\/data/,
     '/src/data',
   );
 
   const md = MarkdownIt();
-
+  htmlContent = await md.renderAsync(prepareOfficialRoadmapTopicContent(topic));
   gitHubUrl = `https://github.com/kamranahmedse/developer-roadmap/tree/master${fileWithoutBasePath}`;
-  htmlContent = await md.renderAsync(content);
 } else {
   guide = await getOfficialGuide(topicId, roadmapId);
   if (!guide) {

src/queries/official-roadmap-topic.ts

@@ -0,0 +1,70 @@
+import { FetchError, httpGet } from '../lib/query-http';
+
+export const allowedOfficialRoadmapTopicResourceType = [
+  'roadmap',
+  'official',
+  'opensource',
+  'article',
+  'course',
+  'podcast',
+  'video',
+  'book',
+  'feed',
+] as const;
+export type AllowedOfficialRoadmapTopicResourceType =
+  (typeof allowedOfficialRoadmapTopicResourceType)[number];
+
+type OfficialRoadmapTopicResource = {
+  _id: string;
+  type: AllowedOfficialRoadmapTopicResourceType;
+  title: string;
+  url: string;
+};
+
+export interface OfficialRoadmapTopicContentDocument {
+  _id: string;
+  roadmapSlug: string;
+  nodeId: string;
+  description: string;
+  resources: OfficialRoadmapTopicResource[];
+  createdAt: Date;
+  updatedAt: Date;
+}
+
+type GetOfficialRoadmapTopicOptions = {
+  roadmapSlug: string;
+  nodeId: string;
+};
+
+export async function getOfficialRoadmapTopic(
+  options: GetOfficialRoadmapTopicOptions,
+) {
+  const { roadmapSlug, nodeId } = options;
+
+  try {
+    const topic = await httpGet<OfficialRoadmapTopicContentDocument>(
+      `/v1-official-roadmap-topic/${roadmapSlug}/${nodeId}`,
+    );
+
+    return topic;
+  } catch (error) {
+    if (FetchError.isFetchError(error) && error.status === 404) {
+      return null;
+    }
+
+    throw error;
+  }
+}
+
+export function prepareOfficialRoadmapTopicContent(
+  topic: OfficialRoadmapTopicContentDocument,
+) {
+  const { description, resources = [] } = topic;
+
+  let content = description;
+  if (resources.length > 0) {
+    content += `\n\nVisit the following resources to learn more:\n\n${resources.map((resource) => `- [@${resource.type}@${resource.title}](${resource.url})`).join('\n')}`;
+  }
+
+  return content;
+}