Add some plant data

package-lock.json

@@ -16,6 +16,7 @@
 				"svelte-check": "^3.6.0",
 				"tslib": "^2.4.1",
 				"typescript": "^5.0.0",
+				"typescript-plugin-toml": "^0.3.1",
 				"vite": "^4.4.2",
 				"vite-plugin-toml": "^0.6.0"
 			}
@@ -1717,6 +1718,12 @@
 				"node": ">=8.0"
 			}
 		},
+		"node_modules/toml": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/toml/-/toml-3.0.0.tgz",
+			"integrity": "sha512-y/mWCZinnvxjTKYhJ+pYxwD0mRLVvOtdS2Awbgxln6iEnt4rk0yBxeSBHkGJcPucRiG0e55mwWp+g/05rsrd6w==",
+			"dev": true
+		},
 		"node_modules/toml-eslint-parser": {
 			"version": "0.6.1",
 			"resolved": "https://registry.npmjs.org/toml-eslint-parser/-/toml-eslint-parser-0.6.1.tgz",
@@ -1760,6 +1767,18 @@
 				"node": ">=14.17"
 			}
 		},
+		"node_modules/typescript-plugin-toml": {
+			"version": "0.3.1",
+			"resolved": "https://registry.npmjs.org/typescript-plugin-toml/-/typescript-plugin-toml-0.3.1.tgz",
+			"integrity": "sha512-pBRKcuidbQyGQZOejx3abJtjX2NRemYCIBImWAJ/Lek6byUJObw/j/jPwdlrOWEcIo37t4AHHeh9fXAgQ8FZzA==",
+			"dev": true,
+			"dependencies": {
+				"toml": "^3.0.0"
+			},
+			"peerDependencies": {
+				"typescript": "^5.0.2"
+			}
+		},
 		"node_modules/undici": {
 			"version": "5.26.5",
 			"resolved": "https://registry.npmjs.org/undici/-/undici-5.26.5.tgz",

package.json

@@ -18,6 +18,7 @@
 		"svelte-check": "^3.6.0",
 		"tslib": "^2.4.1",
 		"typescript": "^5.0.0",
+		"typescript-plugin-toml": "^0.3.1",
 		"vite": "^4.4.2",
 		"vite-plugin-toml": "^0.6.0"
 	},

src/app.scss

@@ -24,4 +24,22 @@ a {
 
 .float-right {
   float: right;
+}
+
+
+.card {
+  width: 50%;
+  margin: auto;
+}
+
+@media (max-width: 500px) {
+  .card {
+    width: 100%;
+  }
+}
+
+@media (min-width: 500px) and (max-width: 1000px) {
+  .card {
+    width: 75%;
+  }
 }

src/lib/assets/plants.toml

@@ -0,0 +1,34 @@
+[aloe-vera]
+name = "Aloe Vera"
+bin_name = "Aloe Vera"
+
+[aloe-vera.image]
+small = "https://upload.wikimedia.org/wikipedia/commons/thumb/d/d2/Aloe_Vera_%284700054020%29.jpg/320px-Aloe_Vera_%284700054020%29.jpg"
+medium = "https://upload.wikimedia.org/wikipedia/commons/thumb/d/d2/Aloe_Vera_%284700054020%29.jpg/1024px-Aloe_Vera_%284700054020%29.jpg"
+large = "https://upload.wikimedia.org/wikipedia/commons/d/d2/Aloe_Vera_%284700054020%29.jpg"
+source = "https://commons.wikimedia.org/wiki/File:Aloe_Vera_(4700054020).jpg"
+alt = """
+Aloe Vera. \
+Tentacle-like succulent leaves sprout out from the base of the plant \
+going up at multiple angles.
+"""
+
+[aloe-vera.temp]
+death = 5
+lower = 12
+upper = 29
+
+[aloe-vera.site]
+description = """
+Aloe Vera prefers to grow in direct sunlight at temperatures between 12°C and 29°C. Temperatures below 5°C might kill the plant. Aloe Vera doesn't have any special humidity preferences.
+"""
+light = "full or part sun"
+humidity = "any"
+
+
+[aloe-vera.care]
+description = """
+Aloe Vera needs to be watered about ever 16 days. Make sure the soil is almost completely dry before watering it as it can be overwatered easily.
+"""
+water_schedule = "16 days"
+fertilize_schedule = "month"

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

@@ -0,0 +1,64 @@
+<script lang="ts">
+  import type { PageData } from "./$types";
+
+  export let data: PageData;
+  const image = data.image;
+</script>
+
+<div class="card">
+  <h1>{data.name} (<i>{data.bin_name}</i>)</h1>
+
+  <figure class="plant-image">
+    <img src={image.medium} alt={data.image.alt} title={data.bin_name} />
+
+    {#if data.image.source != ""}
+      <a
+        class="image-source"
+        href={data.image.source}
+        aria-label="Image Source"
+      >
+        Source
+      </a>
+    {/if}
+  </figure>
+</div>
+
+<style lang="scss">
+  @use "../../../colors.scss";
+  .plant-image {
+    width: 100%;
+    aspect-ratio: 2 / 1;
+    display: flex;
+    margin: auto;
+    border-radius: 0.5em;
+    color: colors.$highlight-text;
+    box-shadow: 0.5em 0.5em colors.$highlight;
+    position: relative;
+
+    a {
+      color: colors.$highlight-text;
+    }
+
+    .image-source {
+      position: absolute;
+      padding: 0.25em;
+      border-radius: 0.25em;
+      margin: 0.25em;
+      bottom: 0;
+      right: 0;
+      font-size: 0.8em;
+      background-color: transparentize(colors.$highlight, 0.75);
+      transition-duration: 0.5s;
+    }
+
+    img {
+      border-radius: 0.5em;
+      width: 100%;
+      object-fit: cover;
+    }
+
+    &:hover .image-source {
+      background-color: colors.$highlight;
+    }
+  }
+</style>

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

@@ -0,0 +1,40 @@
+import { error } from "@sveltejs/kit";
+import type { PageLoad } from "./$types";
+// @ts-ignore
+import plants from "$lib/assets/plants.toml";
+
+export type PlantData = {
+	name: string;
+	bin_name: string;
+
+	image: {
+		small: string;
+		medium: string;
+		large: string;
+		source: string;
+		alt: string;
+	};
+	temp: {
+		death: number;
+		lower: number;
+		upper: number;
+	};
+	care: {
+		description: string;
+		water_schedule: string;
+		fertilize_schedule?: string;
+	};
+	site: {
+		description: string;
+		light: string;
+	};
+};
+
+export const load: PageLoad = ({ params }) => {
+	console.log(plants);
+	if (plants[params.plant]) {
+		return plants[params.plant] as PlantData;
+	}
+
+	throw error(404, "Not found");
+};