Add site data mapping

src/routes/Footer.svelte

@@ -3,7 +3,7 @@
     <a href="https://trivernis.net">My Website</a>
   </div>
   <div class="footer-item float-right">
-    <a href="https://git.trivernis.net/trivernis/plantwiki">Source</a>
+    <a href="https://git.trivernis.net/trivernis/plantwiki-svelte">Source</a>
   </div>
 </footer>
 

src/routes/plants/[plant]/+page.svelte

@@ -1,5 +1,7 @@
 <script lang="ts">
   import type { PageData } from "./$types";
+  import Badge from "./Badge.svelte";
+  import TempBar from "./TempBar.svelte";
 
   export let data: PageData;
   const image = data.image;
@@ -21,6 +23,30 @@
       </a>
     {/if}
   </figure>
+  <section>
+    <a href="#site"><h2 id="site">Site</h2></a>
+    <TempBar temp={data.temp} />
+
+    {#if data.site.light}
+      <Badge
+        icon="sun"
+        text={data.site.light}
+        alt="Prefers {data.site.light} lighting conditions."
+      />
+    {/if}
+
+    {#if data.site.humidity}
+      <Badge
+        icon="drop"
+        text={data.site.humidity}
+        alt="Prefers {data.site.light} humidity."
+      />
+    {/if}
+
+    <p>
+      {@html data.site.description}
+    </p>
+  </section>
 </div>
 
 <style lang="scss">

src/routes/plants/[plant]/+page.ts

@@ -27,6 +27,7 @@ export type PlantData = {
 	site: {
 		description: string;
 		light: string;
+		humidity?: string;
 	};
 };
 

src/routes/plants/[plant]/Badge.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+  export let icon: string;
+  export let alt: string;
+  export let text: string;
+</script>
+
+<div class="badge" aria-label={alt}>
+  <i class="ri-{icon}-fill icon" aria-hidden="true" /><span aria-hidden="true">
+    {@html text}
+  </span>
+</div>
+
+<style lang="scss">
+  @use "../../../colors.scss";
+
+  .badge {
+    padding: 0.25em;
+    display: inline-block;
+    border-radius: 0.5em;
+    background-color: colors.$highlight;
+    color: colors.$highlight-text;
+
+    .icon,
+    span {
+      float: left;
+      padding-right: 0.25em;
+      margin: auto;
+      line-height: 1;
+    }
+    margin: 0.25em;
+  }
+</style>

src/routes/plants/[plant]/TempBar.svelte

@@ -0,0 +1,109 @@
+<script lang="ts">
+  import type { PlantData } from "./proxy+page";
+  export let temp: PlantData["temp"];
+</script>
+
+<div
+  class="temp-bar"
+  title="Tolerates temperatures between {temp.lower}°C and {temp.upper}°C. Dies below {temp.death}°C."
+>
+  <div
+    class="temp lower-temp-death"
+    style="width: {temp.death / (4 / 10)}%"
+    aria-hidden="true"
+  >
+    <p>
+      <i class="ri-skull-fill icon" aria-hidden="true" /> &lt; {temp.death}} °C
+    </p>
+  </div>
+  <div
+    class="temp lower-temp-live"
+    aria-hidden="true"
+    style="width: {(temp.lower - temp.death) / (4 / 10)}%"
+  />
+  <div
+    class="temp temp-live"
+    aria-hidden="true"
+    style="width: {(temp.upper - temp.lower) / (4 / 10)}%"
+  >
+    <p>
+      <i class="ri-plant-fill icon" aria-hidden="true" />{temp.lower}°C - {temp.upper}°C
+    </p>
+  </div>
+  <div
+    class="temp upper-temp-live"
+    aria-hidden="true"
+    style="width: {(40 - temp.upper) / (4 / 10)}%"
+  />
+  <div class="shadow-pseudo" />
+</div>
+
+<style lang="scss">
+  @use "../../../colors.scss";
+
+  .temp-bar {
+    height: 1em;
+    width: 100%;
+    display: flex;
+    position: relative;
+    margin-bottom: 0.5em;
+
+    .temp {
+      height: 1em;
+      display: flex;
+      position: relative;
+
+      p {
+        font-size: 0.85em;
+        display: flex;
+        margin: -0.1em auto 0;
+        white-space: nowrap;
+        z-index: 3;
+
+        .icon {
+          padding-right: 0.25em;
+          margin-top: 0.15em;
+          line-height: 1;
+        }
+      }
+    }
+
+    .shadow-pseudo {
+      height: 1em;
+      width: 100%;
+      position: absolute;
+      top: 0;
+      left: 0;
+      box-shadow: 0.35em 0.35em colors.$highlight;
+      border-radius: 1em;
+    }
+
+    .lower-temp-death {
+      text-align: right;
+      border-radius: 1em 0 0 1em;
+      background-image: linear-gradient(to right, colors.$red, colors.$yellow);
+
+      p {
+        right: 0;
+      }
+    }
+
+    .lower-temp-live {
+      background-image: linear-gradient(to right, colors.$yellow, colors.$blue);
+    }
+
+    .temp-live {
+      background-color: colors.$blue;
+      text-align: center;
+    }
+
+    .upper-temp-live {
+      background-image: linear-gradient(to right, colors.$blue, colors.$yellow);
+      border-radius: 0 1em 1em 0;
+
+      p {
+        left: 0;
+      }
+    }
+  }
+</style>