Click me for instructions
First, symlink your botany save file in ~/.botany/[your_username]_plant_data.json to somewhere in your public_html directory. Make sure you can load the file in your brower, and take note of the URL.
Then put the following code snippet somewhere in your page and change the plant attribute to the URL of your plant's json file. This is where your plant and its info will be rendered. (You can actually have an unlimited number of these and even point them all to different plants if you really wanted.)
<tilde-botany plant="[url_of_your_plant_data.json]" template="botany-template"></tilde-botany>
Finally, add the following code to your webpage just before the <body> tag. The content of the <template> will be rendered onto the <tilde-botany> tag using the script that comes after it. Any tag that has an attribute like data-show="value" will have its text content replaced by the corresponding plant data. You can use all of them, or just the ones you want.
<template id="botany-template">
<pre data-show="art"></pre>
<dl>
<dt>description</dt> <dd data-show="description"></dd>
<dt>file name</dt> <dd data-show="file_name"></dd>
<dt>owner</dt> <dd data-show="owner"></dd>
<dt>species</dt> <dd data-show="species"></dd>
<dt>stage</dt> <dd data-show="stage"></dd>
<dt>age</dt> <dd data-show="age"></dd>
<dt>rarity</dt> <dd data-show="rarity"></dd>
<dt>score</dt> <dd data-show="score"></dd>
<dt>mutation</dt> <dd data-show="mutation"></dd>
<dt>last_watered</dt> <dd data-show="last_watered"></dd>
<dt>is_dead</dt> <dd data-show="is_dead"></dd>
<dt>water %</dt> <dd data-show="water"></dd>
<dt>water meter</dt> <dd data-show="water-meter"></dd>
</dl>
</template>
<script src="https://tilde.town/~pilosophos/assets/js/botany.js"></script>
Botany