Refactor share icons

src/components/FrameRenderer/FrameRenderer.astro

@@ -1,7 +1,7 @@
 ---
 import Loader from '../Loader.astro';
-import ShareIcons from '../ShareIcons.astro';
-import TopicOverlay from '../TopicOverlay.astro';
+import ShareIcons from '../ShareIcons/ShareIcons.astro';
+import TopicOverlay from './TopicOverlay.astro';
 import './FrameRenderer.css';
 
 export interface Props {
@@ -19,19 +19,14 @@ const { roadmapId, jsonUrl, dimensions = null, description } = Astro.props;
 
 <link rel='preload' href='/fonts/balsamiq.woff2' as='font' type='font/woff2' crossorigin slot='after-header' />
 
-<div class='bg-gray-50 py-4 sm:py-12'>
-  <div class='max-w-[1000px] container relative'>
-    <ShareIcons description={description} pageUrl={`https://roadmap.sh/${roadmapId}`} />
-    <TopicOverlay roadmapId={roadmapId} />
-    <div
+<TopicOverlay roadmapId={roadmapId} />
+<div
   id='roadmap-svg'
   style={dimensions ? `--aspect-ratio:${dimensions.width}/${dimensions.height}` : null}
   data-roadmap-id={roadmapId}
   data-json-url={jsonUrl}
-    >
+>
   <Loader />
-    </div>
-  </div>
 </div>
 
 <script src='./renderer.js'></script>

src/components/FrameRenderer/TopicOverlay.astro

@@ -1,6 +1,6 @@
 ---
-import Icon from './Icon.astro';
-import Loader from './Loader.astro';
+import Icon from '../Icon.astro';
+import Loader from '../Loader.astro';
 
 export interface Props {
   roadmapId: string;

src/components/FrameRenderer/renderer.js

@@ -1,6 +1,5 @@
 import { wireframeJSONToSVG } from 'roadmap-renderer';
 import { Topic } from './topic';
-import { Sharer } from './sharer';
 
 /**
  * @typedef {{ roadmapId: string, jsonUrl: string }} RoadmapConfig
@@ -104,7 +103,3 @@ renderer.init();
 // Initialize the topic loader
 const topic = new Topic();
 topic.init();
-
-// Handles the share icons on the roadmap page
-const sharer = new Sharer();
-sharer.init();

src/components/MarkdownFile.astro

@@ -1,7 +1,5 @@
-<div class='bg-gray-50'>
-  <div
-    class='container prose-blockquote:font-normal prose prose-code:bg-transparent prose-h2:text-3xl prose-h2:mt-4 prose-h2:mb-2 prose-h3:mt-2 prose-img:mt-1'
-  >
+<div
+  class='prose-blockquote:font-normal prose container prose-code:bg-transparent prose-h2:text-3xl prose-h2:mt-4 prose-h2:mb-2 prose-h3:mt-2 prose-img:mt-1'
+>
   <slot />
-  </div>
 </div>

src/components/ShareIcons.astro

@@ -1,43 +0,0 @@
----
-import Icon from "./Icon.astro";
-
-export interface Props {
-  pageUrl: string;
-  description: string;
-}
-
-const { pageUrl, description } = Astro.props;
-
-const twitterUrl = `https://twitter.com/intent/tweet?text=${description}&url=${pageUrl}`;
-const fbUrl = `https://www.facebook.com/sharer/sharer.php?quote=${description}&u=${pageUrl}`;
-const hnUrl = `https://news.ycombinator.com/submitlink?t=${description}&u=${pageUrl}`;
-const redditUrl = `https://www.reddit.com/submit?title=${description}&url=${pageUrl}`;
----
-
-<div
-  class="absolute left-[-18px] top-[110px] h-full hidden"
-  id="page-share-icons"
->
-  <div class="flex sticky top-[100px] flex-col gap-1.5">
-    <a
-      href={twitterUrl}
-      target="_blank"
-      class="text-gray-500 hover:text-gray-700"
-    >
-      <Icon icon="twitter" />
-    </a>
-    <a href={fbUrl} target="_blank" class="text-gray-500 hover:text-gray-700">
-      <Icon icon="facebook" />
-    </a>
-    <a href={hnUrl} target="_blank" class="text-gray-500 hover:text-gray-700">
-      <Icon icon="hackernews" />
-    </a>
-    <a
-      href={redditUrl}
-      target="_blank"
-      class="text-gray-500 hover:text-gray-700"
-    >
-      <Icon icon="reddit" />
-    </a>
-  </div>
-</div>

src/components/ShareIcons/ShareIcons.astro

@@ -0,0 +1,34 @@
+---
+import Icon from '../Icon.astro';
+
+export interface Props {
+  pageUrl: string;
+  description: string;
+}
+
+const { pageUrl, description } = Astro.props;
+
+const twitterUrl = `https://twitter.com/intent/tweet?text=${description}&url=${pageUrl}`;
+const fbUrl = `https://www.facebook.com/sharer/sharer.php?quote=${description}&u=${pageUrl}`;
+const hnUrl = `https://news.ycombinator.com/submitlink?t=${description}&u=${pageUrl}`;
+const redditUrl = `https://www.reddit.com/submit?title=${description}&url=${pageUrl}`;
+---
+
+<div class='absolute left-[-18px] top-[110px] h-full hidden' id='page-share-icons'>
+  <div class='flex sticky top-[100px] flex-col gap-1.5'>
+    <a href={twitterUrl} target='_blank' class='text-gray-500 hover:text-gray-700'>
+      <Icon icon='twitter' />
+    </a>
+    <a href={fbUrl} target='_blank' class='text-gray-500 hover:text-gray-700'>
+      <Icon icon='facebook' />
+    </a>
+    <a href={hnUrl} target='_blank' class='text-gray-500 hover:text-gray-700'>
+      <Icon icon='hackernews' />
+    </a>
+    <a href={redditUrl} target='_blank' class='text-gray-500 hover:text-gray-700'>
+      <Icon icon='reddit' />
+    </a>
+  </div>
+</div>
+
+<script src='./sharer.js'></script>

src/components/ShareIcons/sharer.js

@@ -27,3 +27,6 @@ export class Sharer {
     window.addEventListener('scroll', this.onScroll, { passive: true });
   }
 }
+
+const sharer = new Sharer();
+sharer.init();

src/components/UpcomingForm.astro

@@ -3,22 +3,13 @@ import CaptchaFields from './Captcha/CaptchaFields.astro';
 import Icon from './Icon.astro';
 ---
 
-<div
-  class='my-0 p-5 sm:p-12 border bg-gray-100 rounded-lg text-left sm:text-center'
->
+<div class='my-0 px-5 rounded-lg text-left sm:text-center'>
   <div class='sm:max-w-[400px] mx-auto'>
     <div class='hidden sm:block'><Icon icon='bell' /></div>
     <h2 class='text-3xl mb-1 font-medium hidden sm:block'>Upcoming</h2>
-    <p class='text-gray-600 mb-0 sm:mb-5'>
-      Please check back later or subscribe below.
-    </p>
+    <p class='text-gray-600 mb-0 sm:mb-5'>Please check back later or subscribe below.</p>
 
-    <form
-      action='https://newsletter.roadmap.sh/subscribe'
-      method='post'
-      accept-charset='utf-8'
-      captcha-form
-    >
+    <form action='https://newsletter.roadmap.sh/subscribe' method='post' accept-charset='utf-8' captcha-form>
       <input
         type='email'
         required

src/pages/[roadmapId]/index.astro

@@ -4,6 +4,7 @@ import FAQs from '../../components/FAQs/FAQs.astro';
 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 UpcomingForm from '../../components/UpcomingForm.astro';
 import BaseLayout from '../../layouts/BaseLayout.astro';
 import { generateArticleSchema, generateFAQSchema } from '../../lib/jsonld-schema';
@@ -65,20 +66,25 @@ if (roadmapFAQs.length) {
     isUpcoming={roadmapData.isUpcoming}
   />
 
+  <div class='bg-gray-50 py-4 sm:py-12'>
     {
       !roadmapData.isUpcoming && roadmapData.jsonUrl && (
+        <div class='max-w-[1000px] container relative'>
+          <ShareIcons description={roadmapData.description} pageUrl={`https://roadmap.sh/${roadmapId}`} />
+
           <FrameRenderer
             roadmapId={roadmapId}
             description={roadmapData.description}
             jsonUrl={roadmapData.jsonUrl}
             dimensions={roadmapData.dimensions}
           />
+        </div>
       )
     }
 
     {
       !roadmapData.isUpcoming && !roadmapData.jsonUrl && (
-      <div class='pt-5 bg-gray-50'>
+        <div class='mt-0 sm:-mt-6'>
           <MarkdownFile>
             <roadmapFile.Content />
           </MarkdownFile>
@@ -91,4 +97,5 @@ if (roadmapFAQs.length) {
     <FAQs faqs={roadmapFAQs} />
 
     <CaptchaScripts slot='after-footer' />
+  </div>
 </BaseLayout>

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

@@ -3,6 +3,7 @@ import BestPracticeHeader from '../../components/BestPracticeHeader.astro';
 import CaptchaScripts from '../../components/Captcha/CaptchaScripts.astro';
 import FrameRenderer from '../../components/FrameRenderer/FrameRenderer.astro';
 import MarkdownFile from '../../components/MarkdownFile.astro';
+import ShareIcons from '../../components/ShareIcons/ShareIcons.astro';
 import UpcomingForm from '../../components/UpcomingForm.astro';
 import BaseLayout from '../../layouts/BaseLayout.astro';
 import { BestPracticeFrontmatter, getBestPracticeIds } from '../../lib/best-pratice';
@@ -57,14 +58,22 @@ if (bestPracticeData.schema) {
     isUpcoming={bestPracticeData.isUpcoming}
   />
 
+  <div class='bg-gray-50 py-4 sm:py-12'>
     {
       !bestPracticeData.isUpcoming && bestPracticeData.jsonUrl && (
+        <div class='max-w-[1000px] container relative'>
+          <ShareIcons
+            description={bestPracticeData.description}
+            pageUrl={`https://roadmap.sh/best-practices/${bestPracticeId}`}
+          />
+
           <FrameRenderer
             roadmapId={bestPracticeId}
             description={bestPracticeData.description}
             jsonUrl={bestPracticeData.jsonUrl}
             dimensions={bestPracticeData.dimensions}
           />
+        </div>
       )
     }
 
@@ -75,6 +84,7 @@ if (bestPracticeData.schema) {
         </MarkdownFile>
       )
     }
+  </div>
 
   {bestPracticeData.isUpcoming && <UpcomingForm />}
   <CaptchaScripts slot='after-footer' />