Added garden images.

app/src/assets/main.css

@@ -6,6 +6,7 @@
   --background-color-2: rgb(34, 34, 34);
   --code-color: rgb(224, 226, 120);
   --success-color: rgb(118, 201, 118);
+  --error-color: rgb(241, 64, 64);
 }
 
 body {

app/src/components/GardenSpeciesCard.vue

@@ -0,0 +1,69 @@
+<script setup lang="ts">
+defineProps<{
+  species: any
+}>()
+</script>
+<template>
+  <div class="garden-species-card">
+    <div class="garden-species-card-content">
+      <h3 v-text="species['Common Name']"></h3>
+      <a
+        :href="species['Reference']"
+        v-text="species['Scientific Name']"
+        class="link-out"
+        style="font-style: italic"
+      ></a>
+      <p>
+        In the
+        <span
+          v-text="species['Family']"
+          style="font-style: italic; color: var(--code-color)"
+        ></span>
+        family.
+      </p>
+      <p>
+        Flordia native:
+        <span v-if="species['Florida Native'] === 'Yes'" style="color: var(--success-color)">
+          Yes
+        </span>
+        <span v-if="species['Florida Native'] !== 'Yes'" style="color: var(--error-color)">No</span>
+      </p>
+    </div>
+    <div class="garden-species-card-image">
+      <img v-if="species['Image Link']" :src="species['Image Link']" />
+    </div>
+  </div>
+</template>
+<style>
+.garden-species-card {
+  background-color: var(--background-color-2);
+  border-radius: 20px;
+  padding: 1rem;
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+}
+.garden-species-card > .garden-species-card-content > h3 {
+  margin-top: 0;
+  margin-bottom: 0.25rem;
+  font-family: OpenSans, sans-serif;
+}
+.garden-species-card > .garden-species-card-content > p {
+  margin-top: 0.25rem;
+  margin-bottom: 0.25rem;
+}
+.garden-species-card-content {
+  width: 50%;
+  display: inline-block;
+  vertical-align: top;
+}
+.garden-species-card-image {
+  width: 50%;
+  display: inline-block;
+  vertical-align: top;
+  text-align: right;
+}
+.garden-species-card-image > img {
+  max-height: 128px;
+  max-width: 100%;
+}
+</style>

app/src/components/SpeciesLink.vue

@@ -1,12 +0,0 @@
-<script setup lang="ts">
-defineProps<{
-  scientificName: string
-  commonName: string
-  link: string
-}>()
-</script>
-<template>
-  <a :href="link" class="link-out" target="_blank">
-    <em v-text="scientificName"></em>, <span v-text="commonName"></span>
-  </a>
-</template>

app/src/garden_data.ts

@@ -9,7 +9,9 @@ export const SPECIES = [
     'Common Name': 'Carolina Petunia',
     Family: 'Acanthaceae',
     Reference: 'https://en.wikipedia.org/wiki/Ruellia_caroliniensis',
+    'Image Link': 'https://www.fnps.org/assets/images/plants/Ruellia_caroliniana_SD.jpg',
     'Florida Native': 'Yes',
+    Current: 'Yes',
     Statistics: 'Total Species',
     '': 56
   },
@@ -19,7 +21,10 @@ export const SPECIES = [
     Family: 'Adoxaceae',
     Reference:
       'https://gardeningsolutions.ifas.ufl.edu/plants/trees-and-shrubs/shrubs/walters-viburnum/',
+    'Image Link':
+      'https://s3.amazonaws.com/eit-planttoolbox-prod/media/images/Viburnum_obovatum_D__0p36y8hAIvHU.jpeg',
     'Florida Native': 'Yes',
+    Current: 'Yes',
     Statistics: 'Total Natives',
     '': 38
   },
@@ -28,7 +33,9 @@ export const SPECIES = [
     'Common Name': 'Garlic Chives',
     Family: 'Amaryllidaceae',
     Reference: 'https://en.wikipedia.org/wiki/Allium_tuberosum',
+    'Image Link': 'https://hort.extension.wisc.edu/files/2015/12/Allium_tuberosum-ingarden1.jpg',
     'Florida Native': 'No',
+    Current: 'Yes',
     Statistics: '% Native',
     '': '67.86%'
   },
@@ -37,7 +44,10 @@ export const SPECIES = [
     'Common Name': 'Pink Swamp Milkweed',
     Family: 'Apocynaceae',
     Reference: 'https://en.wikipedia.org/wiki/Asclepias_incarnata',
+    'Image Link':
+      'https://sciotogardens.com/wp-content/uploads/2021/04/Asclepias-incarnata-Swamp-Milkweed-Flower-with-Bee.jpg',
     'Florida Native': 'Yes',
+    Current: 'Yes',
     Statistics: 'Milkweed Species',
     '': 4
   },
@@ -46,7 +56,9 @@ export const SPECIES = [
     'Common Name': 'Aquatic Milkweed',
     Family: 'Apocynaceae',
     Reference: 'https://en.wikipedia.org/wiki/Asclepias_perennis',
+    'Image Link': 'https://www.fnps.org/assets/images/plants/Asclepias_perennis-Stibolt2.jpg',
     'Florida Native': 'Yes',
+    Current: 'Yes',
     Statistics: '',
     '': ''
   },
@@ -55,7 +67,10 @@ export const SPECIES = [
     'Common Name': 'Butterfly Weed',
     Family: 'Apocynaceae',
     Reference: 'https://en.wikipedia.org/wiki/Asclepias_tuberosa',
+    'Image Link':
+      'https://www.gardenia.net/wp-content/uploads/2023/05/Asclepias-Tuberosa-Butterfly-Weed.webp',
     'Florida Native': 'Yes',
+    Current: 'Yes',
     Statistics: '',
     '': ''
   },
@@ -64,7 +79,10 @@ export const SPECIES = [
     'Common Name': 'Whorled Milkweed',
     Family: 'Apocynaceae',
     Reference: 'https://en.wikipedia.org/wiki/Asclepias_verticillata',
+    'Image Link':
+      'https://kb.jniplants.com/wp-content/uploads/2022/01/whorled-milkweed-asclepias-verticillata-ftimg.jpg',
     'Florida Native': 'Yes',
+    Current: 'Yes',
     Statistics: '',
     '': ''
   },
@@ -73,7 +91,9 @@ export const SPECIES = [
     'Common Name': 'Saw Palmetto',
     Family: 'Arecaceae',
     Reference: 'https://plants.ces.ncsu.edu/plants/serenoa-repens/',
+    'Image Link': 'https://www.fnps.org/assets/images/plants/serenoa_repens_Denton.JPG',
     'Florida Native': 'Yes',
+    Current: 'Yes',
     Statistics: '',
     '': ''
   },
@@ -82,7 +102,10 @@ export const SPECIES = [
     'Common Name': 'Hammock Snakeroot',
     Family: 'Asteraceae',
     Reference: 'https://en.wikipedia.org/wiki/Ageratina_jucunda',
+    'Image Link':
+      'https://upload.wikimedia.org/wikipedia/commons/thumb/8/83/Hammock_snakeroot_imported_from_iNaturalist_photo_334164824_on_10_September_2024.jpg/1200px-Hammock_snakeroot_imported_from_iNaturalist_photo_334164824_on_10_September_2024.jpg',
     'Florida Native': 'Yes',
+    Current: 'Yes',
     Statistics: '',
     '': ''
   },
@@ -91,7 +114,10 @@ export const SPECIES = [
     'Common Name': 'Lanceleaf Coreopsis',
     Family: 'Asteraceae',
     Reference: 'https://en.wikipedia.org/wiki/Coreopsis_lanceolata',
+    'Image Link':
+      'https://upload.wikimedia.org/wikipedia/commons/b/bf/Coreopsis_lanceolata_Sterntaler.JPG',
     'Florida Native': 'Yes',
+    Current: 'Yes',
     Statistics: '',
     '': ''
   },
@@ -100,7 +126,10 @@ export const SPECIES = [
     'Common Name': 'Leavenworth’s Coreopsis',
     Family: 'Asteraceae',
     Reference: 'https://en.wikipedia.org/wiki/Coreopsis_leavenworthii',
+    'Image Link':
+      'https://www.flawildflowers.org/wp-content/uploads/2017/06/coreopsis_leavenworthii-e1591118903862.jpg',
     'Florida Native': 'Yes',
+    Current: 'Yes',
     Statistics: '',
     '': ''
   },
@@ -109,7 +138,10 @@ export const SPECIES = [
     'Common Name': 'Cosmos',
     Family: 'Asteraceae',
     Reference: 'https://en.wikipedia.org/wiki/Cosmos_bipinnatus',
+    'Image Link':
+      'https://upload.wikimedia.org/wikipedia/commons/9/9c/Cosmos_bipinnatus_pink%2C_Burdwan%2C_West_Bengal%2C_India_10_01_2013.jpg',
     'Florida Native': 'No',
+    Current: 'Yes',
     Statistics: '',
     '': ''
   },
@@ -118,7 +150,10 @@ export const SPECIES = [
     'Common Name': 'Dense Blazing Star',
     Family: 'Asteraceae',
     Reference: 'https://en.wikipedia.org/wiki/Liatris_spicata',
+    'Image Link':
+      'https://s3.amazonaws.com/eit-planttoolbox-prod/media/images/Liatris_spicata_Hedwig_Storch_ccbysa30.JPG',
     'Florida Native': 'Yes',
+    Current: 'Yes',
     Statistics: '',
     '': ''
   },
@@ -127,7 +162,9 @@ export const SPECIES = [
     'Common Name': 'Salt and Pepper Plant',
     Family: 'Asteraceae',
     Reference: 'https://en.wikipedia.org/wiki/Melanthera_nivea',
+    'Image Link': 'https://www.fnps.org/assets/images/plants/Melanthera%20nivea1-Stibolt.jpg',
     'Florida Native': 'Yes',
+    Current: 'Yes',
     Statistics: '',
     '': ''
   },
@@ -136,7 +173,9 @@ export const SPECIES = [
     'Common Name': 'Pinebarren Goldenrod',
     Family: 'Asteraceae',
     Reference: 'https://en.wikipedia.org/wiki/Solidago_fistulosa',
+    'Image Link': 'https://upload.wikimedia.org/wikipedia/commons/5/56/Solidago_fistulosa01.jpg',
     'Florida Native': 'Yes',
+    Current: 'Yes',
     Statistics: '',
     '': ''
   },
@@ -145,7 +184,10 @@ export const SPECIES = [
     'Common Name': 'Calico Aster',
     Family: 'Asteraceae',
     Reference: 'https://en.wikipedia.org/wiki/Symphyotrichum_lateriflorum',
+    'Image Link':
+      'https://s3.amazonaws.com/eit-planttoolbox-prod/media/images/Symphyotrichum-later_vMt4pemBxDbP.jpg',
     'Florida Native': 'Yes',
+    Current: 'Yes',
     Statistics: '',
     '': ''
   },
@@ -154,16 +196,22 @@ export const SPECIES = [
     'Common Name': 'Mexican Sunflower',
     Family: 'Asteraceae',
     Reference: 'https://en.wikipedia.org/wiki/Tithonia_rotundifolia',
+    'Image Link':
+      'https://upload.wikimedia.org/wikipedia/commons/b/b6/Tithonia_rotundifolia_kz2.jpg',
     'Florida Native': 'No',
+    Current: 'Yes',
     Statistics: '',
     '': ''
   },
   {
-    'Scientific Name': 'Lonicera sempervierens',
+    'Scientific Name': 'Lonicera sempervirens',
     'Common Name': 'Coral Honeysuckle',
     Family: 'Caprifoliaceae',
     Reference: 'https://en.wikipedia.org/wiki/Lonicera_sempervirens',
+    'Image Link':
+      'https://upload.wikimedia.org/wikipedia/commons/thumb/8/8b/Lonicera_sempervirens_2.jpg/1200px-Lonicera_sempervirens_2.jpg',
     'Florida Native': 'Yes',
+    Current: 'Yes',
     Statistics: '',
     '': ''
   },
@@ -172,7 +220,10 @@ export const SPECIES = [
     'Common Name': 'Spiderwort',
     Family: 'Commelinoideae',
     Reference: 'https://en.wikipedia.org/wiki/Tradescantia_ohiensis',
+    'Image Link':
+      'https://upload.wikimedia.org/wikipedia/commons/thumb/8/8e/Tradescantia_ohiensis2.jpg/1200px-Tradescantia_ohiensis2.jpg',
     'Florida Native': 'Yes',
+    Current: 'Yes',
     Statistics: '',
     '': ''
   },
@@ -181,7 +232,9 @@ export const SPECIES = [
     'Common Name': 'Inchplant',
     Family: 'Commelinoideae',
     Reference: 'https://en.wikipedia.org/wiki/Tradescantia_zebrina',
+    'Image Link': 'https://hort.extension.wisc.edu/files/2015/12/T_zebrina-planting.jpg',
     'Florida Native': 'No',
+    Current: 'Yes',
     Statistics: '',
     '': ''
   },
@@ -190,7 +243,9 @@ export const SPECIES = [
     'Common Name': 'Blue Pacific Juniper',
     Family: 'Cupressaceae',
     Reference: 'https://en.wikipedia.org/wiki/Juniperus_conferta',
+    'Image Link': 'https://upload.wikimedia.org/wikipedia/commons/9/9b/Juniperus_conferta.JPG',
     'Florida Native': 'No',
+    Current: 'Yes',
     Statistics: '',
     '': ''
   },
@@ -199,7 +254,9 @@ export const SPECIES = [
     'Common Name': 'King Sago Palm',
     Family: 'Cycadaceae',
     Reference: 'https://en.wikipedia.org/wiki/Cycas_revoluta',
+    'Image Link': 'https://upload.wikimedia.org/wikipedia/commons/3/3b/Cycas_inflorescence.jpg',
     'Florida Native': 'No',
+    Current: 'Yes',
     Statistics: '',
     '': ''
   },
@@ -208,7 +265,10 @@ export const SPECIES = [
     'Common Name': 'Coral Bean',
     Family: 'Fabaceae',
     Reference: 'https://en.wikipedia.org/wiki/Erythrina_herbacea',
+    'Image Link':
+      'https://warcapps.usgs.gov/PlantID/Image/GivenFile?id=3324&file=Erythrina%20herbacea_0001.JPG&size=w',
     'Florida Native': 'Yes',
+    Current: 'Yes',
     Statistics: '',
     '': ''
   },
@@ -217,7 +277,10 @@ export const SPECIES = [
     'Common Name': 'Sunshine Mimosa',
     Family: 'Fabaceae',
     Reference: 'https://en.wikipedia.org/wiki/Mimosa_strigillosa',
+    'Image Link':
+      'https://www.flawildflowers.org/wp-content/uploads/2015/07/mimosa_strigillosa_ScottZona-CCBY-NC2.0.jpg',
     'Florida Native': 'Yes',
+    Current: 'Yes',
     Statistics: '',
     '': ''
   },
@@ -226,7 +289,10 @@ export const SPECIES = [
     'Common Name': 'Browne’s Savory',
     Family: 'Lamiaceae',
     Reference: 'https://en.wikipedia.org/wiki/Clinopodium_brownei',
+    'Image Link':
+      'https://www.flawildflowers.org/wp-content/uploads/2018/04/clinopodium_brownei-keim2-1-e1602619542587.jpg',
     'Florida Native': 'Yes',
+    Current: 'Yes',
     Statistics: '',
     '': ''
   },
@@ -235,7 +301,10 @@ export const SPECIES = [
     'Common Name': 'Lemon Balm',
     Family: 'Lamiaceae',
     Reference: 'https://en.wikipedia.org/wiki/Lemon_balm',
+    'Image Link':
+      'https://www.gardenia.net/wp-content/uploads/2023/05/melissa-officinalis-780x520.webp',
     'Florida Native': 'No',
+    Current: 'Yes',
     Statistics: '',
     '': ''
   },
@@ -244,7 +313,10 @@ export const SPECIES = [
     'Common Name': 'Catnip',
     Family: 'Lamiaceae',
     Reference: 'https://en.wikipedia.org/wiki/Catnip',
+    'Image Link':
+      'https://i.etsystatic.com/27743352/r/il/77ac53/3780897667/il_fullxfull.3780897667_5dod.jpg',
     'Florida Native': 'No',
+    Current: 'Yes',
     Statistics: '',
     '': ''
   },
@@ -253,7 +325,10 @@ export const SPECIES = [
     'Common Name': 'Basil',
     Family: 'Lamiaceae',
     Reference: 'https://en.wikipedia.org/wiki/Basil',
+    'Image Link':
+      'https://www.gardenia.net/wp-content/uploads/2023/04/Zr6xu4xq1jF7hLENb2aNtO9jsD7DS6GLZMw24RPF-780x520.webp',
     'Florida Native': 'No',
+    Current: 'Yes',
     Statistics: '',
     '': ''
   },
@@ -262,7 +337,9 @@ export const SPECIES = [
     'Common Name': 'Wild Sweet Basil',
     Family: 'Lamiaceae',
     Reference: 'https://en.wikipedia.org/wiki/Ocimum_campechianum',
+    'Image Link': 'https://chalk.richmond.edu/flora-kaxil-kiuic/o/ocimum_campechianum_04s.JPG',
     'Florida Native': 'Yes',
+    Current: 'Yes',
     Statistics: '',
     '': ''
   },
@@ -271,7 +348,10 @@ export const SPECIES = [
     'Common Name': 'Oregano',
     Family: 'Lamiaceae',
     Reference: 'https://en.wikipedia.org/wiki/Oregano',
+    'Image Link':
+      'https://s3.amazonaws.com/eit-planttoolbox-prod/media/images/Origanum-vulgare--Anna--CC-BY.jpg',
     'Florida Native': 'No',
+    Current: 'Yes',
     Statistics: '',
     '': ''
   },
@@ -280,7 +360,9 @@ export const SPECIES = [
     'Common Name': 'Azure Sage',
     Family: 'Lamiaceae',
     Reference: 'https://en.wikipedia.org/wiki/Salvia_azurea',
+    'Image Link': 'https://upload.wikimedia.org/wikipedia/commons/6/63/Salvia_azurea1.jpg',
     'Florida Native': 'Yes',
+    Current: 'Yes',
     Statistics: '',
     '': ''
   },
@@ -289,7 +371,10 @@ export const SPECIES = [
     'Common Name': 'Tropical Sage',
     Family: 'Lamiaceae',
     Reference: 'https://en.wikipedia.org/wiki/Salvia_coccinea',
+    'Image Link':
+      'https://s3.amazonaws.com/eit-planttoolbox-prod/media/images/Salvia-coccinea--Carol-Foll--CC-BY-NC-ND.jpg',
     'Florida Native': 'Yes',
+    Current: 'Yes',
     Statistics: '',
     '': ''
   },
@@ -298,7 +383,9 @@ export const SPECIES = [
     'Common Name': 'Creeping Sage',
     Family: 'Lamiaceae',
     Reference: 'https://en.wikipedia.org/wiki/Salvia_misella',
+    'Image Link': 'https://upload.wikimedia.org/wikipedia/commons/7/77/Salvia_misella.jpg',
     'Florida Native': 'Yes',
+    Current: 'Yes',
     Statistics: '',
     '': ''
   },
@@ -307,7 +394,10 @@ export const SPECIES = [
     'Common Name': 'Garden Sage',
     Family: 'Lamiaceae',
     Reference: 'https://en.wikipedia.org/wiki/Salvia_officinalis',
+    'Image Link':
+      'https://www.gardenia.net/wp-content/uploads/2023/05/salvia-officinalis-780x520.webp',
     'Florida Native': 'No',
+    Current: 'Yes',
     Statistics: '',
     '': ''
   },
@@ -316,7 +406,10 @@ export const SPECIES = [
     'Common Name': 'Rosemary',
     Family: 'Lamiaceae',
     Reference: 'https://en.wikipedia.org/wiki/Rosemary',
+    'Image Link':
+      'https://s3.amazonaws.com/eit-planttoolbox-prod/media/images/Rosmarinus-officinalis-Gil-Costa-CC-BY-NC-2-0.jpg',
     'Florida Native': 'No',
+    Current: 'Yes',
     Statistics: '',
     '': ''
   },
@@ -325,7 +418,10 @@ export const SPECIES = [
     'Common Name': 'American Germander',
     Family: 'Lamiaceae',
     Reference: 'https://en.wikipedia.org/wiki/Teucrium_canadense',
+    'Image Link':
+      'https://upload.wikimedia.org/wikipedia/commons/8/84/American_Germander_%282981720555%29.jpg',
     'Florida Native': 'Yes',
+    Current: 'Yes',
     Statistics: '',
     '': ''
   },
@@ -334,7 +430,10 @@ export const SPECIES = [
     'Common Name': 'English Thyme',
     Family: 'Lamiaceae',
     Reference: 'https://en.wikipedia.org/wiki/Thymus_vulgaris',
+    'Image Link':
+      'https://s3.amazonaws.com/eit-planttoolbox-prod/media/images/Thymus-vulgaris-argenteusPressebereich-Dehner-Garten-Center--CC-BY-ND.jpg',
     'Florida Native': 'No',
+    Current: 'Yes',
     Statistics: '',
     '': ''
   },
@@ -343,26 +442,34 @@ export const SPECIES = [
     'Common Name': 'Saltmarsh Mallow',
     Family: 'Malvaceae',
     Reference: 'https://en.wikipedia.org/wiki/Kosteletzkya_pentacarpos',
+    'Image Link':
+      'https://upload.wikimedia.org/wikipedia/commons/9/94/Virginia_saltmarsh_mallow_%28Kosteletzkya_virginica%29_%287513257570%29.jpg',
     'Florida Native': 'Yes',
+    Current: 'Yes',
     Statistics: '',
     '': ''
   },
   {
-    'Scientific Name': 'Nephrolepsis exaltata var. Petticoat',
+    'Scientific Name': 'Nephrolepis exaltata var. Petticoat',
     'Common Name': 'Petticoat Fern',
     Family: 'Nephrolepidaceae',
     Reference:
       'https://garden.org/plants/view/678483/Petticoat-Fern-Nephrolepis-exaltata-Petticoat/',
+    'Image Link':
+      'https://sprouthome.com/cdn/shop/products/NephroPetti10detail_sprout_800x.jpg?v=1656886021',
     'Florida Native': 'Yes',
+    Current: 'Yes',
     Statistics: '',
     '': ''
   },
   {
-    'Scientific Name': 'Nephrolepsis obliterata',
+    'Scientific Name': 'Nephrolepis obliterata',
     'Common Name': 'Kimberley Queen Fern',
     Family: 'Nephrolepidaceae',
     Reference: 'https://en.wikipedia.org/wiki/Nephrolepis_obliterata',
+    'Image Link': 'https://d2seqvvyy3b8p2.cloudfront.net/3dcdfa0979c349fad87894ff597a80fc.jpg',
     'Florida Native': 'No',
+    Current: 'Yes',
     Statistics: '',
     '': ''
   },
@@ -371,7 +478,9 @@ export const SPECIES = [
     'Common Name': 'Rouge Plant / Bloodberry',
     Family: 'Petiveriaceae',
     Reference: 'https://en.wikipedia.org/wiki/Rivina_humilis',
+    'Image Link': 'https://www.gardenia.net/wp-content/uploads/2023/05/rivina-humilis.webp',
     'Florida Native': 'Yes',
+    Current: 'Yes',
     Statistics: '',
     '': ''
   },
@@ -380,7 +489,10 @@ export const SPECIES = [
     'Common Name': 'Wiregrass',
     Family: 'Poaceae',
     Reference: 'https://en.wikipedia.org/wiki/Aristida_stricta',
+    'Image Link':
+      'https://lh4.googleusercontent.com/proxy/nRFsygxXYmqmqPAkGwgiZWDKrNwhjl7yCjBWh0kC7HuEpo5kzrXiwfOvyqfS_V0QJ9Q3w-kMXw4lR_D8oNJpsDf9dU9BJF4TWIOBolZt_Q',
     'Florida Native': 'Yes',
+    Current: 'Yes',
     Statistics: '',
     '': ''
   },
@@ -389,7 +501,10 @@ export const SPECIES = [
     'Common Name': 'Purple Lovegrass',
     Family: 'Poaceae',
     Reference: 'https://en.wikipedia.org/wiki/Eragrostis_spectabilis',
+    'Image Link':
+      'https://s3.amazonaws.com/eit-planttoolbox-prod/media/images/Eragrostrum_spectabl_QNqsgDI5kmks.jfif',
     'Florida Native': 'Yes',
+    Current: 'Yes',
     Statistics: '',
     '': ''
   },
@@ -398,7 +513,9 @@ export const SPECIES = [
     'Common Name': 'Dwarf Fakahatchee Grass',
     Family: 'Poaceae',
     Reference: 'https://www.fnps.org/plant/tripsacum-floridanum',
+    'Image Link': 'https://www.fnps.org/assets/images/plants/tripsacum_floridanum_0009Denton.jpg',
     'Florida Native': 'Yes',
+    Current: 'Yes',
     Statistics: '',
     '': ''
   },
@@ -407,7 +524,10 @@ export const SPECIES = [
     'Common Name': 'Firebush',
     Family: 'Rubiaceae',
     Reference: 'https://en.wikipedia.org/wiki/Hamelia_patens',
+    'Image Link':
+      'https://www.flawildflowers.org/wp-content/uploads/2014/05/hamelia_patens_keim.jpg',
     'Florida Native': 'Yes',
+    Current: 'Yes',
     Statistics: '',
     '': ''
   },
@@ -416,7 +536,10 @@ export const SPECIES = [
     'Common Name': 'Dwarf Shiny-Leaf Coffee',
     Family: 'Rubiaceae',
     Reference: 'https://en.wikipedia.org/wiki/Psychotria_nervosa',
+    'Image Link':
+      'https://upload.wikimedia.org/wikipedia/commons/thumb/2/21/Psychotria_nervosa_Florida.JPG/1200px-Psychotria_nervosa_Florida.JPG',
     'Florida Native': 'Yes',
+    Current: 'Yes',
     Statistics: '',
     '': ''
   },
@@ -425,7 +548,10 @@ export const SPECIES = [
     'Common Name': 'Cayenne Pepper',
     Family: 'Solanaceae',
     Reference: 'https://en.wikipedia.org/wiki/Cayenne_pepper',
+    'Image Link':
+      'https://s3.amazonaws.com/eit-planttoolbox-prod/media/images/Capsicum_annuum_Chil_AyfsPt9WpZrr.jpeg',
     'Florida Native': 'No',
+    Current: 'Yes',
     Statistics: '',
     '': ''
   },
@@ -434,7 +560,9 @@ export const SPECIES = [
     'Common Name': 'Bird Pepper',
     Family: 'Solanaceae',
     Reference: 'https://en.wikipedia.org/wiki/Capsicum_annuum_var._glabriusculum',
+    'Image Link': 'https://www.fnps.org/assets/images/plants/Capsicum_annuum_RH.jpg',
     'Florida Native': 'Yes',
+    Current: 'Yes',
     Statistics: '',
     '': ''
   },
@@ -443,7 +571,10 @@ export const SPECIES = [
     'Common Name': 'Jalapeño Pepper',
     Family: 'Solanaceae',
     Reference: 'https://en.wikipedia.org/wiki/Jalape%C3%B1o',
+    'Image Link':
+      'https://upload.wikimedia.org/wikipedia/commons/thumb/d/d6/Immature_jalapeno_capsicum_annuum_var_annuum.jpeg/1024px-Immature_jalapeno_capsicum_annuum_var_annuum.jpeg',
     'Florida Native': 'No',
+    Current: 'Yes',
     Statistics: '',
     '': ''
   },
@@ -452,7 +583,10 @@ export const SPECIES = [
     'Common Name': 'Bird of Paradise',
     Family: 'Strelitziaceae',
     Reference: 'https://en.wikipedia.org/wiki/Strelitzia_reginae',
+    'Image Link':
+      'https://upload.wikimedia.org/wikipedia/commons/thumb/5/55/Bird_of_Paradise_flower.JPG/1200px-Bird_of_Paradise_flower.JPG',
     'Florida Native': 'No',
+    Current: 'Yes',
     Statistics: '',
     '': ''
   },
@@ -461,7 +595,10 @@ export const SPECIES = [
     'Common Name': 'Anne Marie Lantana',
     Family: 'Verbenaceae',
     Reference: 'https://garden.org/plants/view/172550/Lantana-Lantana-camara-Anne-Marie/',
+    'Image Link':
+      'https://cdn11.bigcommerce.com/s-5ahp77r7un/images/stencil/1280x1280/products/2251/8704/Lantana_Anne_Marie_web__60642.1657546129.jpg?c=2',
     'Florida Native': 'No',
+    Current: 'Yes',
     Statistics: '',
     '': ''
   },
@@ -470,7 +607,9 @@ export const SPECIES = [
     'Common Name': 'Pineland Lantana',
     Family: 'Verbenaceae',
     Reference: 'https://www.wildflower.org/plants/result.php?id_plant=LADED',
+    'Image Link': 'https://florida.plantatlas.usf.edu/plantimage/Lantana_depressa7.jpg',
     'Florida Native': 'Yes',
+    Current: 'Yes',
     Statistics: '',
     '': ''
   },
@@ -480,7 +619,9 @@ export const SPECIES = [
     Family: 'Verbenaceae',
     Reference:
       'https://explorer.natureserve.org/Taxon/ELEMENT_GLOBAL.2.155560/Lantana_depressa_var_floridana',
+    'Image Link': 'https://fsus.ncbg.unc.edu/img/orig/kb/kb_02227.jpg',
     'Florida Native': 'Yes',
+    Current: 'Yes',
     Statistics: '',
     '': ''
   },
@@ -489,7 +630,9 @@ export const SPECIES = [
     'Common Name': 'Buttonsage Lantana',
     Family: 'Verbenaceae',
     Reference: 'https://en.wikipedia.org/wiki/Lantana_involucrata',
+    'Image Link': 'https://upload.wikimedia.org/wikipedia/commons/6/6d/Lantana_involucrata.jpg',
     'Florida Native': 'Yes',
+    Current: 'Yes',
     Statistics: '',
     '': ''
   },
@@ -498,7 +641,10 @@ export const SPECIES = [
     'Common Name': 'Blue Violet',
     Family: 'Violaceae',
     Reference: 'https://en.wikipedia.org/wiki/Viola_sororia',
+    'Image Link':
+      'https://www.gardenia.net/wp-content/uploads/2023/04/xE7cZkfR0j4qirAl5q7pMR7b3SordMxYVpty5rsV-790x533.webp',
     'Florida Native': 'Yes',
+    Current: 'Yes',
     Statistics: '',
     '': ''
   },
@@ -507,7 +653,10 @@ export const SPECIES = [
     'Common Name': 'Coontie Palm',
     Family: 'Zamiaceae',
     Reference: 'https://en.wikipedia.org/wiki/Zamia_integrifolia',
+    'Image Link':
+      'https://s3.amazonaws.com/eit-planttoolbox-prod/media/images/Zamia_integrifolia_a_CPKJilCHmLjh.jpeg',
     'Florida Native': 'Yes',
+    Current: 'Yes',
     Statistics: '',
     '': ''
   }

app/src/views/GardeningView.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import SpeciesLink from '@/components/SpeciesLink.vue'
+import GardenSpeciesCard from '@/components/GardenSpeciesCard.vue'
 import { SPECIES } from '@/garden_data'
 
 const sortedSpecies = [...SPECIES].sort((a, b) =>
@@ -14,14 +14,15 @@ const sortedSpecies = [...SPECIES].sort((a, b) =>
       both for flowering and produce.
     </p>
     <h3>Species in My Garden</h3>
-    <ul>
+    <p>
-      <li v-for="species in sortedSpecies" :key="species['Scientific Name']">
+      I keep a spreadsheet of all the species in my garden (or that have been present in the past).
-        <SpeciesLink
+      In total, my garden currently has <strong>56 unique species</strong>, with
-          :scientific-name="species['Scientific Name']"
+      <strong>38 native species</strong>.
-          :common-name="species['Common Name']"
+    </p>
-          :link="species['Reference']"
+    <GardenSpeciesCard
+      v-for="species in sortedSpecies"
+      :key="species['Scientific Name']"
+      :species="species"
     />
-      </li>
-    </ul>
   </main>
 </template>