computer-scienceangular-roadmapbackend-roadmapblockchain-roadmapdba-roadmapdeveloper-roadmapdevops-roadmapfrontend-roadmapgo-roadmaphactoberfestjava-roadmapjavascript-roadmapnodejs-roadmappython-roadmapqa-roadmapreact-roadmaproadmapstudy-planvue-roadmapweb3-roadmap
32 lines
793 B
32 lines
793 B
--- |
|
import Loader from '../Loader.astro'; |
|
import ShareIcons from '../ShareIcons/ShareIcons.astro'; |
|
import TopicOverlay from './TopicOverlay.astro'; |
|
import './FrameRenderer.css'; |
|
|
|
export interface Props { |
|
roadmapId: string; |
|
description: string; |
|
jsonUrl: string; |
|
dimensions?: { |
|
width: number; |
|
height: number; |
|
}; |
|
} |
|
|
|
const { roadmapId, jsonUrl, dimensions = null, description } = 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} |
|
data-roadmap-id={roadmapId} |
|
data-json-url={jsonUrl} |
|
> |
|
<Loader /> |
|
</div> |
|
|
|
<script src='./renderer.js'></script>
|
|
|