48 lines
973 B
Plaintext
48 lines
973 B
Plaintext
---
|
|
import Loader from "../Loader.astro";
|
|
import ShareIcons from "../ShareIcons.astro";
|
|
import "./InteractiveRoadmap.css";
|
|
|
|
export interface Props {
|
|
roadmapId: string;
|
|
description: string;
|
|
roadmapPermalink: string;
|
|
jsonUrl: string;
|
|
dimensions: {
|
|
width: number;
|
|
height: number;
|
|
};
|
|
}
|
|
|
|
const { roadmapId, jsonUrl, dimensions, description, roadmapPermalink } =
|
|
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-10'>
|
|
<div class="max-w-[1000px] container relative">
|
|
<ShareIcons
|
|
description={description}
|
|
pageUrl={`https://roadmap.sh/${roadmapId}`}
|
|
/>
|
|
<div
|
|
id="roadmap-svg"
|
|
style={`--aspect-ratio:${dimensions.width}/${dimensions.height}`}
|
|
data-roadmap-id={roadmapId}
|
|
data-json-url={jsonUrl}
|
|
>
|
|
<Loader />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="./roadmap.js"></script>
|