From badb2c029d114371e9c01877c3746344f05c8b5d Mon Sep 17 00:00:00 2001
From: Kamran Ahmed <kamranahmed.se@gmail.com>
Date: Tue, 24 Jan 2023 01:26:01 +0400
Subject: [PATCH] Refactor the topic loading

---
 src/components/FrameRenderer/FrameRenderer.astro     |  9 ++-------
 src/components/FrameRenderer/renderer.js             |  5 -----
 .../TopicOverlay.astro                               |  2 ++
 .../{FrameRenderer => TopicOverlay}/topic.js         |  4 ++++
 src/pages/[roadmapId]/index.astro                    | 12 ++++++------
 src/pages/best-practices/[bestPracticeId].astro      |  4 +++-
 6 files changed, 17 insertions(+), 19 deletions(-)
 rename src/components/{FrameRenderer => TopicOverlay}/TopicOverlay.astro (98%)
 rename src/components/{FrameRenderer => TopicOverlay}/topic.js (98%)

diff --git a/src/components/FrameRenderer/FrameRenderer.astro b/src/components/FrameRenderer/FrameRenderer.astro
index 949f7ee97..fb90eb446 100644
--- a/src/components/FrameRenderer/FrameRenderer.astro
+++ b/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}
diff --git a/src/components/FrameRenderer/renderer.js b/src/components/FrameRenderer/renderer.js
index 30d2227e0..55b09e544 100644
--- a/src/components/FrameRenderer/renderer.js
+++ b/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();
diff --git a/src/components/FrameRenderer/TopicOverlay.astro b/src/components/TopicOverlay/TopicOverlay.astro
similarity index 98%
rename from src/components/FrameRenderer/TopicOverlay.astro
rename to src/components/TopicOverlay/TopicOverlay.astro
index 94b8d9f66..bbd565bf9 100644
--- a/src/components/FrameRenderer/TopicOverlay.astro
+++ b/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" />
\ No newline at end of file
diff --git a/src/components/FrameRenderer/topic.js b/src/components/TopicOverlay/topic.js
similarity index 98%
rename from src/components/FrameRenderer/topic.js
rename to src/components/TopicOverlay/topic.js
index 3f12127e9..971f142d8 100644
--- a/src/components/FrameRenderer/topic.js
+++ b/src/components/TopicOverlay/topic.js
@@ -230,3 +230,7 @@ export class Topic {
     });
   }
 }
+
+// Initialize the topic loader
+const topic = new Topic();
+topic.init();
diff --git a/src/pages/[roadmapId]/index.astro b/src/pages/[roadmapId]/index.astro
index 81a8f26ae..ef6f06551 100644
--- a/src/pages/[roadmapId]/index.astro
+++ b/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>
       )
     }
diff --git a/src/pages/best-practices/[bestPracticeId].astro b/src/pages/best-practices/[bestPracticeId].astro
index 5b9e32d58..0446f418c 100644
--- a/src/pages/best-practices/[bestPracticeId].astro
+++ b/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}
           />