Add some plant data
parent
826e9e01c7
commit
e43724b9c5
@ -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"
|
||||
@ -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>
|
||||
@ -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");
|
||||
};
|
||||
Loading…
Reference in New Issue