Partial usage in the topics

src/components/TopicDetail/TopicDetail.tsx

@@ -158,13 +158,7 @@ export function TopicDetail(props: TopicDetailProps) {
         }
         let topicHtml = '';
         if (!isCustomResource) {
-          // It's full HTML with page body, head etc.
-          // We only need the inner HTML of the #main-content
-          const node = new DOMParser().parseFromString(
-            response as string,
-            'text/html',
-          );
-          topicHtml = node?.getElementById('main-content')?.outerHTML || '';
+          topicHtml = response as string;
         } else {
           setLinks((response as RoadmapContentDocument)?.links || []);
           setTopicTitle((response as RoadmapContentDocument)?.title || '');

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

@@ -24,40 +24,11 @@ export async function getStaticPaths() {
   });
 }
 
+export const partial = true;
+
 const { topicId } = Astro.params;
 const { file, roadmapId, roadmap, heading } =
   Astro.props as RoadmapTopicFileType;
-
-const gitHubBaseUrl =
-  'https://github.com/kamranahmedse/developer-roadmap/blob/master/src/data';
-const gitHubFullUrl = file.file.replace(/^.+\/src\/data/, `${gitHubBaseUrl}/`);
-const gitHubRelativeUrl = file.file.replace(/^.+\/src\/data/, 'src/data');
 ---
 
-<BaseLayout
-  title={`${heading} - roadmap.sh`}
-  description={`Free resources to learn ${heading} in ${roadmap.briefTitle}. Everything you need to know about ${heading} and how it relates to ${roadmap.briefTitle}.`}
-  noIndex={true}
-  permalink={`/${roadmapId}/${topicId}`}
->
-  <RoadmapBanner roadmapId={roadmapId} roadmap={roadmap} />
-  <div class='bg-gray-50'>
-    <div
-      class='container prose pb-16 prose-h1:mb-4 prose-h2:mb-3 prose-h2:mt-0 prose-p:mt-0'
-    >
-      <main id='main-content'>
-        <file.Content />
-      </main>
-
-      <p class='rounded-md border border-yellow-500 bg-white p-2 text-sm'>
-        Found any mistakes? Help us improve by <a
-          id='gh-file-url'
-          rel='nofollow'
-          target='_blank'
-          data-relative-url={gitHubRelativeUrl}
-          href={gitHubFullUrl}>updating the file here.</a
-        >.
-      </p>
-    </div>
-  </div>
-</BaseLayout>
+<file.Content />