Refactor the topic loading

src/components/FrameRenderer/FrameRenderer.astro

@@ -1,12 +1,10 @@
 ---
 import Loader from '../Loader.astro';
-import ShareIcons from '../ShareIcons/ShareIcons.astro';
-import TopicOverlay from './TopicOverlay.astro';
+import TopicOverlay from '../TopicOverlay/TopicOverlay.astro';
 import './FrameRenderer.css';
 
 export interface Props {
   roadmapId: string;
-  description: string;
   jsonUrl: string;
   dimensions?: {
     width: number;
@@ -14,12 +12,9 @@ export interface Props {
   };
 }
 
-const { roadmapId, jsonUrl, dimensions = null, description } = Astro.props;
+const { roadmapId, jsonUrl, dimensions = null } = Astro.props;
 ---
 
-<link rel='preload' href='/fonts/balsamiq.woff2' as='font' type='font/woff2' crossorigin slot='after-header' />
-
-<TopicOverlay roadmapId={roadmapId} />
 <div
   id='roadmap-svg'
   style={dimensions ? `--aspect-ratio:${dimensions.width}/${dimensions.height}` : null}

src/components/FrameRenderer/renderer.js

@@ -1,5 +1,4 @@
 import { wireframeJSONToSVG } from 'roadmap-renderer';
-import { Topic } from './topic';
 
 /**
  * @typedef {{ roadmapId: string, jsonUrl: string }} RoadmapConfig
@@ -99,7 +98,3 @@ export class Renderer {
 
 const renderer = new Renderer();
 renderer.init();
-
-// Initialize the topic loader
-const topic = new Topic();
-topic.init();

src/components/TopicOverlay/TopicOverlay.astro

@@ -67,3 +67,5 @@ const githubLink = `https://github.com/kamranahmedse/developer-roadmap/tree/mast
   <div class='bg-gray-900 bg-opacity-50 dark:bg-opacity-80 fixed inset-0 z-30'>
   </div>
 </div>
+
+<script src="./topic.js" />

src/components/TopicOverlay/topic.js

@@ -230,3 +230,7 @@ export class Topic {
     });
   }
 }
+
+// Initialize the topic loader
+const topic = new Topic();
+topic.init();

src/pages/[roadmapId]/index.astro

@@ -5,6 +5,7 @@ import FrameRenderer from '../../components/FrameRenderer/FrameRenderer.astro';
 import MarkdownFile from '../../components/MarkdownFile.astro';
 import RoadmapHeader from '../../components/RoadmapHeader.astro';
 import ShareIcons from '../../components/ShareIcons/ShareIcons.astro';
+import TopicOverlay from '../../components/TopicOverlay/TopicOverlay.astro';
 import UpcomingForm from '../../components/UpcomingForm.astro';
 import BaseLayout from '../../layouts/BaseLayout.astro';
 import { generateArticleSchema, generateFAQSchema } from '../../lib/jsonld-schema';
@@ -57,6 +58,9 @@ if (roadmapFAQs.length) {
   noIndex={roadmapData.isUpcoming}
   jsonLd={jsonLdSchema}
 >
+  <!-- Preload the font being used in the renderer -->
+  <link rel='preload' href='/fonts/balsamiq.woff2' as='font' type='font/woff2' crossorigin slot='after-header' />
+
   <RoadmapHeader
     title={roadmapData.title}
     description={roadmapData.description}
@@ -71,13 +75,9 @@ if (roadmapFAQs.length) {
       !roadmapData.isUpcoming && roadmapData.jsonUrl && (
         <div class='max-w-[1000px] container relative'>
           <ShareIcons description={roadmapData.featuredDescription} pageUrl={`https://roadmap.sh/${roadmapId}`} />
+          <TopicOverlay roadmapId={roadmapId} />
 
-          <FrameRenderer
-            roadmapId={roadmapId}
-            description={roadmapData.description}
-            jsonUrl={roadmapData.jsonUrl}
-            dimensions={roadmapData.dimensions}
-          />
+          <FrameRenderer roadmapId={roadmapId} jsonUrl={roadmapData.jsonUrl} dimensions={roadmapData.dimensions} />
         </div>
       )
     }

src/pages/best-practices/[bestPracticeId].astro

@@ -51,6 +51,9 @@ if (bestPracticeData.schema) {
   noIndex={bestPracticeData.isUpcoming}
   jsonLd={jsonLdSchema}
 >
+  <!-- Preload the font being used in the renderer -->
+  <link rel='preload' href='/fonts/balsamiq.woff2' as='font' type='font/woff2' crossorigin slot='after-header' />
+
   <BestPracticeHeader
     title={bestPracticeData.title}
     description={bestPracticeData.description}
@@ -69,7 +72,6 @@ if (bestPracticeData.schema) {
 
           <FrameRenderer
             roadmapId={bestPracticeId}
-            description={bestPracticeData.description}
             jsonUrl={bestPracticeData.jsonUrl}
             dimensions={bestPracticeData.dimensions}
           />