---
const { sketch_path, canvas_id, figure_id, sketch_description }  = Astro.props;
const sketch_url = 'https://github.com/osbm/osbm.dev/blob/main/' + sketch_path;
---

<div class="p5-div" id={canvas_id}>
</div>
<p><b>Figure {figure_id}</b>: {sketch_description} <a href={sketch_url}><b>Sketch source</b></a>

</p>
<style>
    .p5-div {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    canvas {
        max-width: 100%;
        max-height: 100%;
    }
    p {
        text-align: center;
    }
</style>