Added garden generation script.

README.md

@@ -5,3 +5,7 @@ This project contains my hand-written HTML homepage for the world-wide-web.
 It's meant to be deployed as a simple set of files on a server, and doesn't
 use anything fancy beyond what can be done with a normal text editor and an
 HTTP file server.
+
+To develop it locally, it can help to run a local server, so for that, I've
+included `local-server.d`, a D script you can run to boot up a server on
+`http://localhost:8080`.

garden-data-gen/.gitignore

@@ -0,0 +1,16 @@
+.dub
+docs.json
+__dummy.html
+docs/
+/garden-data-gen
+garden-data-gen.so
+garden-data-gen.dylib
+garden-data-gen.dll
+garden-data-gen.a
+garden-data-gen.lib
+garden-data-gen-test-*
+*.exe
+*.pdb
+*.o
+*.obj
+*.lst

garden-data-gen/dub.json

@@ -0,0 +1,13 @@
+{
+	"authors": [
+		"Andrew Lalis"
+	],
+	"copyright": "Copyright © 2024, Andrew Lalis",
+	"dependencies": {
+		"archive": "~>0.7.1",
+		"dxml": "~>0.4.4"
+	},
+	"description": "Small app for dynamically generating garden site HTML from data.",
+	"license": "proprietary",
+	"name": "garden-data-gen"
+}

garden-data-gen/dub.selections.json

@@ -0,0 +1,7 @@
+{
+	"fileVersion": 1,
+	"versions": {
+		"archive": "0.7.1",
+		"dxml": "0.4.4"
+	}
+}

garden-data-gen/source/app.d

@@ -0,0 +1,29 @@
+import std.stdio;
+
+import plant_data;
+import content_gen;
+
+import std.algorithm;
+import std.array;
+import std.path;
+import std.file;
+
+const PLANT_DATA_FILE = "garden-plant-data.ods";
+
+void main() {
+	// Navigate to the project root for all tasks, for simplicity.
+	while (!exists("index.html") && !exists("upload.sh")) {
+		string prev = getcwd();
+		chdir("..");
+		if (getcwd == prev) throw new Exception("Couldn't navigate to the project root.");
+	}
+
+	writeln("Parsing plant data from " ~ PLANT_DATA_FILE ~ "...");
+	PlantData data = parsePlantData(PLANT_DATA_FILE);
+	writefln!"Read %d species and %d plants."(data.species.length, data.plants.length);
+	ensureDirectories(data);
+	writeln("Generating thumbnails for all images...");
+	generateAllThumbnails(false);
+	writeln("Rendering HTML components...");
+	renderHTML(data);
+}

garden-data-gen/source/content_gen.d

@@ -0,0 +1,142 @@
+module content_gen;
+
+import plant_data;
+import dom_utils;
+
+import dxml.writer;
+import dxml.util;
+
+import std.stdio;
+import std.path;
+import std.array;
+import std.algorithm;
+import std.file;
+import std.conv;
+
+void renderHTML(PlantData data) {
+    renderSpeciesCards(data);
+    renderSpeciesPages(data);
+}
+
+private void injectContent(string filename, string startTag, string endTag, string newContent) {
+    import std.file;
+    string data = std.file.readText(filename);
+    ptrdiff_t startIdx = indexOfStr(data, startTag);
+    if (startIdx == -1) throw new Exception("Couldn't find start tag " ~ startTag);
+    ptrdiff_t endIdx = indexOfStr(data, endTag);
+    if (endIdx == -1) throw new Exception("Couldn't find end tag " ~ endTag);
+    string prefix = data[0..(startIdx + startTag.length)];
+    string suffix = data[endIdx..$];
+    string newData = prefix ~ newContent ~ suffix;
+    std.file.write(filename, newData);
+}
+
+private void renderSpeciesCards(PlantData data) {
+    string tpl = std.file.readText(buildPath(
+        "garden-data-gen", "templates", "species-card.html"
+    ));
+    Appender!string htmlApp;
+    foreach (s; data.species) {
+        string card = replaceAll(tpl, [
+            "!NAME!": s.name,
+            "!SCIENTIFIC_NAME!": s.scientificName,
+            "!DESCRIPTION!": s.description,
+            "!LINK!": "garden/species/" ~ s.id ~ ".html",
+            "!REF_LINK!": s.referenceLink,
+            "!REF_LINK_TEXT!": s.referenceLink
+        ]);
+        ImageFilePair[] imagePairs = getSpeciesImages(s.id);
+        if (imagePairs.length > 0) {
+            string imageFile = imagePairs[0].filename;
+            string thumbnailFile = imagePairs[0].thumbnailFilename;
+            string imgTag = "<img src=\"" ~ imageFile ~ "\"/>";
+            card = replaceFirst(card, "!IMAGE!", imgTag);
+        } else {
+            card = replaceFirst(card, "!IMAGE!", "");
+        }
+        htmlApp ~= "\n" ~ card;
+    }
+    injectContent(
+		"garden.html",
+		"<!--__SPECIES_LIST_START__-->",
+		"<!--__SPECIES_LIST_END__-->",
+		htmlApp[]
+	);
+}
+
+private void renderSpeciesPages(PlantData data) {
+    string tpl = std.file.readText(buildPath(
+        "garden-data-gen", "templates", "species-page.html"
+    ));
+    string plantCardTpl = std.file.readText(buildPath(
+        "garden-data-gen", "templates", "plant-card.html"
+    ));
+    string speciesPagesDir = buildPath("garden", "species");
+    if (!exists(speciesPagesDir)) mkdirRecurse(speciesPagesDir);
+    foreach (species; data.species) {
+        Appender!string plantDivsApp;
+        foreach (plant; data.plantsInSpecies(species)) {
+            string card = replaceAll(plantCardTpl, [
+                "!IDENTIFIER!": plant.identifier,
+                "!GENERATION!": "F" ~ plant.generation.to!string,
+                "!DESCRIPTION!": plant.description,
+                "!PLANTING_INFO!": plant.plantingInfo
+            ]);
+            ImageFilePair[] imagePairs = getPlantImages(plant.identifier);
+            Appender!string imagesApp;
+            foreach (imagePair; imagePairs) {
+                import std.format;
+                const imgTpl = "<a href=\"%s\" data-pswp-width=\"%d\" data-pswp-height=\"%d\" target=\"_blank\">\n" ~
+                                "    <img src=\"%s\" alt=\"\"/>\n" ~
+                                "</a>\n";
+                imagesApp ~= format!(imgTpl)(
+                    "../../" ~ imagePair.filename,
+                    imagePair.width, imagePair.height,
+                    "../../" ~ imagePair.thumbnailFilename,
+                );
+            }
+            card = replaceFirst(card, "!IMAGES!", imagesApp[]);
+            plantDivsApp ~= card;
+        }
+
+        string page = replaceAll(tpl, [
+            "!HEAD_TITLE!": species.name,
+            "!PAGE_TITLE!": species.scientificName,
+            "!ABOUT_TITLE!": "About " ~ species.name,
+            "!ABOUT_TEXT!": species.description,
+            "!REF_LINK!": species.referenceLink,
+            "!REF_LINK_TEXT!": species.referenceLink,
+            "!PLANTS_DIVS!": plantDivsApp[]
+        ]);
+        string pagePath = buildPath(speciesPagesDir, species.id ~ ".html");
+        std.file.write(pagePath, page);
+    }
+}
+
+ptrdiff_t indexOfStr(string source, string target) {
+    for (size_t i = 0; i < source.length - target.length; i++) {
+        if (source[i..i+target.length] == target) {
+            return i;
+        }
+    }
+    return -1;
+}
+
+string replaceFirst(string source, string from, string to) {
+    ptrdiff_t idx = indexOfStr(source, from);
+    if (idx == -1) return source;
+    string pre = idx == 0 ? "" : source[0..idx];
+    string post = source[idx+from.length..$];
+    return pre ~ to ~ post;
+}
+
+unittest {
+    assert(replaceFirst("<p>!TEST</p>", "!TEST", "test") == "<p>test</p>");
+}
+
+string replaceAll(string source, string[string] values) {
+    foreach (k, v; values) {
+        source = replaceFirst(source, k, v);
+    }
+    return source;
+}

garden-data-gen/source/dom_utils.d

@@ -0,0 +1,77 @@
+module dom_utils;
+
+import dxml.dom;
+import dxml.writer;
+import dxml.util;
+
+import std.array;
+import std.algorithm;
+
+DOMEntity!string findDOMChild(
+    DOMEntity!string parent,
+    string elementName,
+    string[string] attributes = string[string].init
+) {
+    foreach (child; parent.children) {
+        if (child.type == EntityType.elementStart && child.name == elementName) {
+            if (attributes.length == 0) return child;
+            bool attributesMatch = true;
+            foreach (attrName, attrValue; attributes) {
+                bool hasValue = false;
+                foreach (attr; child.attributes) {
+                    if (attr.name == attrName && attr.value == attrValue) {
+                        hasValue = true;
+                        break;
+                    }
+                }
+                if (!hasValue) {
+                    attributesMatch = false;
+                    break;
+                }
+            }
+            if (attributesMatch) return child;
+        }
+    }
+    throw new Exception("Could not find child element " ~ elementName ~ " in " ~ parent.name);
+}
+
+DOMEntity!string[] findDOMChildren(DOMEntity!string parent, string name) {
+    DOMEntity!string[] matches;
+    auto app = appender(&matches);
+    foreach (child; parent.children) {
+        if (child.type == EntityType.elementStart && child.name == name) {
+            app ~= child;
+        }
+    }
+    return matches;
+}
+
+string readTableCellText(DOMEntity!string cell) {
+    if (
+        cell.type == EntityType.elementStart &&
+        cell.children.length > 0 &&
+        cell.children[0].type == EntityType.elementStart &&
+        cell.children[0].children.length == 1 &&
+        cell.children[0].children[0].type == EntityType.text
+    ) {
+        return cell.children[0].children[0].text.decodeXML;
+    }
+    return null;
+}
+
+void writeStartTagWithAttrs(O)(
+    ref XMLWriter!O writer,
+    string tag,
+    string[string] attributes,
+    EmptyTag emptyTag = EmptyTag.no
+) {
+    writer.openStartTag(tag);
+    foreach (k, v; attributes) {
+        writer.writeAttr(k, v);
+    }
+    writer.closeStartTag(emptyTag);
+}
+
+void writeStartTagWithClass(O)(ref XMLWriter!O writer, string tag, string classValue) {
+    writer.writeStartTagWithAttrs(tag, ["class": classValue]);
+}

garden-data-gen/source/plant_data.d

@@ -0,0 +1,270 @@
+module plant_data;
+
+import dom_utils;
+
+import std.stdio;
+import std.array;
+import std.algorithm;
+import std.path;
+import std.file;
+import std.datetime;
+import std.typecons;
+
+import dxml.dom;
+
+struct Species {
+    string id;
+    string name;
+    string scientificName;
+    string description;
+    string referenceLink;
+}
+
+struct Plant {
+    string speciesScientificName;
+    string identifier;
+    uint generation;
+    string plantingInfo;
+    string description;
+}
+
+string speciesId(string scientificName) {
+    import std.string;
+    import std.regex;
+    return scientificName
+        .replaceAll(ctRegex!(`\s+`), "-")
+        .replaceAll(ctRegex!(`ñ`), "n")
+        .replaceAll(ctRegex!(`["“”\.]`), "")
+        .toLower;
+}
+
+struct PlantData {
+    Species[] species;
+    Plant[] plants;
+
+    Plant[] plantsInSpecies(Species speciesItem) {
+        Appender!(Plant[]) app;
+        foreach (plant; plants) {
+            if (plant.speciesScientificName == speciesItem.scientificName) {
+                app ~= plant;
+            }
+        }
+        Plant[] results = app[];
+        sort!((a, b) => a.identifier < b.identifier)(results);
+        return results;
+    }
+
+    Species getSpecies(string name) {
+        foreach (s; species) {
+            if (s.scientificName == name) return s;
+        }
+        throw new Exception("No species with name " ~ name);
+    }
+
+    Plant getPlant(string identifier) {
+        foreach (p; plants) {
+            if (p.identifier == identifier) return p;
+        }
+        throw new Exception("No plant with identifier " ~ identifier);
+    }
+}
+
+struct ImageFilePair {
+    string filename;
+    uint width, height;
+    string thumbnailFilename;
+    uint thumbnailWidth, thumbnailHeight;
+}
+
+PlantData parsePlantData(string filename) {
+    import archive.zip;
+    ZipArchive zip = new ZipArchive(std.file.read(filename));
+    auto contentZipEntry = zip.getFile("content.xml");
+    if (contentZipEntry is null) throw new Exception("Couldn't find content.xml in " ~ filename);
+    DOMEntity!string dom = parseDOM(cast(string) contentZipEntry.data());
+    DOMEntity!string spreadsheet = dom.findDOMChild("office:document-content")
+        .findDOMChild("office:body")
+        .findDOMChild("office:spreadsheet");
+    DOMEntity!string speciesTable = spreadsheet.findDOMChild("table:table", ["table:name": "Species"]);
+    DOMEntity!string[] speciesRows = speciesTable.findDOMChildren("table:table-row")[1..$];
+    DOMEntity!string plantsTable = spreadsheet.findDOMChild("table:table", ["table:name": "Plants"]);
+    DOMEntity!string[] plantRows = plantsTable.findDOMChildren("table:table-row")[1..$];
+
+    PlantData result;
+    auto speciesAppender = appender(&result.species);
+    foreach (row; speciesRows) {
+        if (row.children.length < 4) continue;
+        Species species;
+        species.name = readTableCellText(row.children[0]);
+        species.scientificName = readTableCellText(row.children[1]);
+        species.description = readTableCellText(row.children[2]);
+        species.referenceLink = readTableCellText(row.children[3]);
+        species.id = speciesId(species.scientificName);
+        speciesAppender ~= species;
+    }
+    sort!((a, b) => a.name < b.name)(result.species);
+    
+    auto plantAppender = appender(&result.plants);
+    foreach (row; plantRows) {
+        if (row.children.length < 4) continue;
+        Plant plant;
+        plant.speciesScientificName = readTableCellText(row.children[0]);
+        plant.identifier = readTableCellText(row.children[1]);
+        string fGenStr = readTableCellText(row.children[2]);
+        import std.conv : to;
+        plant.generation = fGenStr[1..$].to!uint;
+        plant.plantingInfo = readTableCellText(row.children[3]);
+        if (row.children.length > 4) {
+            plant.description = readTableCellText(row.children[4]);
+        }
+        plantAppender ~= plant;
+    }
+    sort!((a, b) => a.identifier < b.identifier)(result.plants);
+
+    return result;
+}
+
+void ensureDirectories(PlantData data) {
+	string basePath = buildPath("images", "garden");
+	if (!exists(basePath)) mkdirRecurse(basePath);
+	string speciesDir = buildPath(basePath, "species");
+	if (!exists(speciesDir)) mkdir(speciesDir);
+	foreach (s; data.species) {
+		string thisSpeciesDir = buildPath(speciesDir, s.id);
+		if (!exists(thisSpeciesDir)) mkdir(thisSpeciesDir);
+	}
+	string plantsDir = buildPath(basePath, "plants");
+	if (!exists(plantsDir)) mkdir(plantsDir);
+	foreach (p; data.plants) {
+		string thisPlantDir = buildPath(plantsDir, p.identifier);
+		if (!exists(thisPlantDir)) mkdir(thisPlantDir);
+	}
+}
+
+ImageFilePair[] getPlantImages(string identifier) {
+    string plantDir = buildPath("images", "garden", "plants", identifier);
+    if (!exists(plantDir)) return [];
+    Appender!(ImageFilePair[]) app;
+    foreach (entry; dirEntries(plantDir, SpanMode.shallow, false)) {
+        if (entry.name.endsWith(".jpg") && !entry.name.endsWith(".thumb.jpg")) {
+            ImageFilePair pair;
+            pair.filename = entry.name;
+            getImageSize(entry.name, pair.width, pair.height);
+            string thumbnailFilename = buildPath(plantDir, baseName(entry.name, ".jpg") ~ ".thumb.jpg");
+            if (exists(thumbnailFilename)) {
+                pair.thumbnailFilename = thumbnailFilename;
+                getImageSize(thumbnailFilename, pair.thumbnailWidth, pair.thumbnailHeight);
+            }
+            app ~= pair;
+        }
+    }
+    ImageFilePair[] images = app[];
+    sort!((a, b) {
+        Nullable!DateTime tsA = getImageTimestamp(a.filename);
+        Nullable!DateTime tsB = getImageTimestamp(b.filename);
+        if (tsA.isNull && tsB.isNull) return a.filename < b.filename;
+        if (tsA.isNull) return true;
+        if (tsB.isNull) return false;
+        return tsA.get < tsB.get;
+    })(images);
+    return images;
+}
+
+ImageFilePair[] getSpeciesImages(string speciesId) {
+    string speciesDir = buildPath("images", "garden", "species", speciesId);
+    if (!exists(speciesDir)) return [];
+    Appender!(ImageFilePair[]) app;
+    foreach (entry; dirEntries(speciesDir, SpanMode.shallow, false)) {
+        if (entry.name.endsWith(".jpg") && !entry.name.endsWith(".thumb.jpg")) {
+            ImageFilePair pair;
+            pair.filename = entry.name;
+            getImageSize(entry.name, pair.width, pair.height);
+            string thumbnailFilename = buildPath(speciesDir, baseName(entry.name, ".jpg") ~ ".thumb.jpg");
+            if (exists(thumbnailFilename)) {
+                pair.thumbnailFilename = thumbnailFilename;
+                getImageSize(thumbnailFilename, pair.thumbnailWidth, pair.thumbnailHeight);
+            }
+            app ~= pair;
+        }
+    }
+    ImageFilePair[] images = app[];
+    sort!((a, b) {
+        Nullable!DateTime tsA = getImageTimestamp(a.filename);
+        Nullable!DateTime tsB = getImageTimestamp(b.filename);
+        if (tsA.isNull && tsB.isNull) return a.filename < b.filename;
+        if (tsA.isNull) return true;
+        if (tsB.isNull) return false;
+        return tsA.get < tsB.get;
+    })(images);
+    return images;
+}
+
+void getImageSize(string filePath, out uint width, out uint height) {
+    import std.process;
+    import std.format;
+    auto result = execute(["identify", "-ping", "-format", "'%w %h'", filePath]);
+    if (result.status != 0) throw new Exception("Failed to get image size of " ~ filePath);
+    formattedRead!"'%d %d'"(result.output, width, height);
+}
+
+Nullable!DateTime getImageTimestamp(string filePath) {
+    import std.regex;
+    import std.conv;
+    auto r = ctRegex!(`\d{8}_\d{6}`);
+    auto cap = matchFirst(baseName(filePath), r);
+    if (cap.empty) return Nullable!DateTime.init;
+    string text = cap[0];
+    return nullable(DateTime(
+        text[0..4].to!int,
+        text[4..6].to!int,
+        text[6..8].to!int,
+        text[9..11].to!int,
+        text[11..13].to!int,
+        text[13..15].to!int
+    ));
+}
+
+void generateAllThumbnails(bool regen = false) {
+    string plantsDir = buildPath("images", "garden", "plants");
+    foreach (entry; dirEntries(plantsDir, SpanMode.shallow, false)) {
+        generateThumbnails(entry.name, regen);
+    }
+    string speciesDir = buildPath("images", "garden", "species");
+    foreach (entry; dirEntries(speciesDir, SpanMode.shallow, false)) {
+        generateThumbnails(entry.name, regen);
+    }
+}
+
+void generateThumbnails(string dir, bool regen) {
+    import std.process;
+    if (regen) {
+        // Remove all thumbnails first.
+        foreach (entry; dirEntries(dir, SpanMode.shallow, false)) {
+            if (entry.name.endsWith(".thumb.jpg")) {
+                std.file.remove(entry.name);
+            }
+        }
+    }
+    foreach (entry; dirEntries(dir, SpanMode.shallow, false)) {
+        if (entry.name.endsWith(".jpg") && !entry.name.endsWith(".thumb.jpg")) {
+            string filenameWithoutExt = baseName(entry.name, ".jpg");
+            string outputFilePath = buildPath(dir, filenameWithoutExt ~ ".thumb.jpg");
+            if (exists(outputFilePath)) continue;
+            Pid pid = spawnProcess(
+                [
+                    "convert",
+                    entry.name,
+                    "-strip",
+                    "-interlace", "JPEG",
+                    "-sampling-factor", "4:2:0",
+                    "-colorspace", "RGB",
+                    "-quality", "85%",
+                    "-geometry", "x200",
+                    outputFilePath
+                ]
+            );
+            int exitCode = wait(pid);
+            if (exitCode != 0) throw new Exception("Thumbnail generation process failed.");
+        }
+    }
+}

garden-data-gen/templates/plant-card.html

@@ -0,0 +1,14 @@
+<div class="plant-card">
+    <section>
+        <h2>!IDENTIFIER!</h2>
+        <p class="gen">Generation !GENERATION!</p>
+        <p>!DESCRIPTION!</p>
+        <p>!PLANTING_INFO!</p>
+    </section>
+    <section>
+        <h3>Images</h3>
+        <div class="pswp-gallery">
+            !IMAGES!
+        </div>
+    </section>
+</div>

garden-data-gen/templates/species-card.html

@@ -0,0 +1,19 @@
+<div class="species-card">
+    <section>
+        <h2>
+            <a href="!LINK!">
+                !NAME!
+            </a>
+        </h2>
+        <p class="sci">
+            !SCIENTIFIC_NAME!
+        </p>
+        <p>!DESCRIPTION!</p>
+        <footer>
+            <a target="_blank" href="!REF_LINK!">
+                !REF_LINK_TEXT!
+            </a>
+        </footer>
+    </section>
+    !IMAGE!
+</div>

garden-data-gen/templates/species-page.html

@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>Andrew's Garden: !HEAD_TITLE!</title>
+    <meta charset="utf-8">
+    <meta name="description" content="Information about Andrew's Garden">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    
+    <script src="../../scripts/themes.min.js"></script>
+    <noscript><style>.jsonly{display: none !important;}</style></noscript>
+    <link rel="stylesheet" href="../../styles/style.css" type="text/css">
+    <link rel="stylesheet" href="../../styles/garden.css" type="text/css">
+    <script src="../../scripts/sitestat.js?remote-url=sitestat.andrewlalis.com" async></script>
+
+    <script type="module">
+        import PhotoSwipeLightbox from "../../vendor/photoswipe/photoswipe-lightbox.esm.min.js";
+        import PhotoSwipe from "../../vendor/photoswipe/photoswipe.esm.min.js";
+        const lightbox = new PhotoSwipeLightbox({
+            gallery: ".pswp-gallery",
+            children: "a",
+            pswpModule: PhotoSwipe
+        });
+        lightbox.init();
+    </script>
+    <link rel="stylesheet" href="../../vendor/photoswipe/photoswipe.css" type="text/css">
+</head>
+
+<body>
+    <header class="page-header">
+        <h1>Andrew's Garden</h1>
+        <h2 style="font-style: italic">!PAGE_TITLE!</h2>
+        <nav>
+            <div>
+                <a href="../../index.html">Home</a>
+                <a href="../../articles.html">Articles</a>
+                <a href="../../projects.html">Projects</a>
+                <a href="../../training.html">Training</a>
+                <a class="page-header-selected" href="../../garden.html">Garden</a>
+                <a href="../../contact.html">Contact</a>
+                <a href="../../logbook.html">Logbook</a>
+            </div>
+            <div>
+                <a href="https://github.com/andrewlalis">GitHub</a>
+                <a href="https://www.linkedin.com/in/andrew-lalis/">LinkedIn</a>
+                <a href="https://www.youtube.com/channel/UC9X4mx6-ObPUB6-ud2IGAFQ">YouTube</a>
+            </div>
+        </nav>
+        <button id="themeToggleButton" class="jsonly">Change Color Theme</button>
+        <hr>
+    </header>
+
+    <main>
+        <article>
+            <h2>!ABOUT_TITLE!</h2>
+            <p>!ABOUT_TEXT!</p>
+            <p>
+                <a href="!REF_LINK!">
+                    !REF_LINK_TEXT!
+                </a>
+            </p>
+        </article>
+        <article>
+            <h2 id="plants">Plants</h2>
+            <p>
+                Here's a detailed list of all plants I have of this species.
+            </p>
+            !PLANTS_DIVS!
+        </article>
+    </main>
+</body>

garden.html

@@ -12,6 +12,18 @@
     <link rel="stylesheet" href="styles/style.css" type="text/css">
     <link rel="stylesheet" href="styles/garden.css" type="text/css">
     <script src="scripts/sitestat.js?remote-url=sitestat.andrewlalis.com" async></script>
+
+    <script type="module">
+        import PhotoSwipeLightbox from "./vendor/photoswipe/photoswipe-lightbox.esm.min.js";
+        import PhotoSwipe from "./vendor/photoswipe/photoswipe.esm.min.js";
+        const lightbox = new PhotoSwipeLightbox({
+            gallery: "#main-garden-gallery",
+            children: "a",
+            pswpModule: PhotoSwipe
+        });
+        lightbox.init();
+    </script>
+    <link rel="stylesheet" href="vendor/photoswipe/photoswipe.css" type="text/css">
 </head>
 
 <body>
@@ -43,7 +55,16 @@
             <p>
                 My garden is just a small patch of land outside the condo my wife and I call home. It's located in <a href="https://planthardiness.ars.usda.gov/">USDA hardiness zone 10a</a> (actually, right on the border of 9b and 10a) in Florida, USA, and I've been trying to beautify the space with a mixture of native and non-invasive ornamental shrubs, herbs, and other plants. While currently there are quite a few non-native species, I'm trying to slowly migrate to entirely native plants and non-invasive food crops, especially those that can help rebuild the soil quality; it's pretty much just sandy clay here.
             </p>
-            <img style="max-width: 100%" src="images/garden/garden-front_20240310_084331.jpg" alt="The main area of my garden"/>
+            <div id="main-garden-gallery" class="pswp-gallery">
+                <a href="images/garden/garden-front_20240310_084331.jpg"
+                    data-pswp-width="2540"
+                    data-pswp-height="1492"
+                    target="_blank"
+                >
+                    <img src="images/garden/garden-front_20240310_084331.jpg" style="max-width: 100%"/>
+                </a>
+            </div>
+            <!-- <img style="max-width: 100%" src="images/garden/garden-front_20240310_084331.jpg" alt="The main area of my garden"/> -->
             <p>
                 If you'd like to leave feedback about the garden, or to request seeds, cuttings, please do contact me via the info on my <a href="contact.html">contact page</a>. I generally try to keep a supply of seeds for as many of my plants as possible, but as always, it depends.
             </p>
@@ -53,253 +74,360 @@
 
             <h3>Table of Contents</h3>
             <ol>
-                <li><a href="#plants">Plants</a></li>
+                <li><a href="#species">Species</a></li>
                 <li><a href="#hardscaping">Hardscaping</a></li>
             </ol>
             <hr/>
         </article>
 
         <article>
-            <h2 id="plants">Plants</h2>
+            <h2 id="species">Species</h2>
             <p>
-                Here's a detailed list of all the plants I've got in my garden. For each plant, I try to include its scientific name, place of origin, and a small description, usually taken from Wikipedia or other sources listed at the bottom of each plant's info.
+                Here's a detailed list of all the species I've got in my garden. For each species, I try to include its scientific name, place of origin, and a small description, usually taken from Wikipedia or other sources listed at the bottom of each species' info.
             </p>
-
+            <!--__SPECIES_LIST_START__-->
-            <div class="plant-card">
+<div class="species-card">
-                <section>
+    <section>
-                    <h2>Bird Pepper</h2>
+        <h2>
-                    <p class="sci">Capsicum annuum var. glabriusculum</p>
+            <a href="garden/species/capsicum-annuum-var-glabriusculum.html">
-                    <p>A small chili pepper variety native to southern North America and northern South America. It's the only pepper species native to the Floridian peninsula.</p>
+                Bird Pepper
-                    <p>Transplanted from a 1 gallon pot, on February 10th, 2024.</p>
+            </a>
-                    <footer>
+        </h2>
-                        <a href="https://en.wikipedia.org/wiki/Capsicum_annuum_var._glabriusculum">Wikipedia</a>
+        <p class="sci">
-                    </footer>
+            Capsicum annuum var. glabriusculum
-                </section>
+        </p>
-                <img src="images/garden/bird-pepper_20240310_113310.jpg" alt="Bird Pepper plant"/>
+        <p>A small chili pepper variety native to southern North America and northern South America. It's the only pepper species native to the Floridian peninsula.</p>
-            </div>
+        <footer>
-
+            <a target="_blank" href="https://en.wikipedia.org/wiki/Capsicum_annuum_var._glabriusculum">
-            <div class="plant-card">
+                https://en.wikipedia.org/wiki/Capsicum_annuum_var._glabriusculum
-                <section>
+            </a>
-                    <h2>Blue Pacific Juniper</h2>
+        </footer>
-                    <p class="sci">Juniperus conferta</p>
+    </section>
-                    <p>A species of Juniper native to Japan, that grows on sand dunes and other acidic/alkaline soils with good drainage. It forms a groundcover if left unattended.</p>
+    <img src="images/garden/species/capsicum-annuum-var-glabriusculum/Capsicum_annuum-FWF.jpg"/>
-                    <p>Transplanted on the 2nd of March, 2024.</p>
+</div>
-                    <footer>
+<div class="species-card">
-                        <a href="https://en.wikipedia.org/wiki/Juniperus_conferta">Wikipedia</a>
+    <section>
-                    </footer>
+        <h2>
-                </section>
+            <a href="garden/species/juniperus-conferta.html">
-                <img src="images/garden/blue-juniper_20240310_113334.jpg" alt="Blue Pacific Juniper plant"/>
+                Blue Pacific Juniper
-            </div>
+            </a>
-
+        </h2>
-            <div class="plant-card">
+        <p class="sci">
-                <section>
+            Juniperus conferta
-                    <h2>Browne's Savory</h2>
+        </p>
-                    <p class="sci">Clinopodium brownei</p>
+        <p>A species of Juniper native to Japan, that grows on sand dunes and other acidic/alkaline soils with good drainage. It forms a groundcover if left unattended.</p>
-                    <p>A sprawling perennial herb found natively in the coastal plains and marshes of the southeastern United States.</p>
+        <footer>
-                    <p>Transplanted on the 10th of February, 2024.</p>
+            <a target="_blank" href="https://en.wikipedia.org/wiki/Juniperus_conferta">
-                    <footer>
+                https://en.wikipedia.org/wiki/Juniperus_conferta
-                        <a href="https://en.wikipedia.org/wiki/Clinopodium_brownei">Wikipedia</a>
+            </a>
-                    </footer>
+        </footer>
-                </section>
+    </section>
-                <img src="images/garden/browns-savory_20240310_113313.jpg" alt="Browne's Savory plant"/>
+    <img src="images/garden/species/juniperus-conferta/Juniperus_conferta_blue_pacific--Javier-Alejandro--CC-BY-NC-ND.jpg"/>
-            </div>
+</div>
-
+<div class="species-card">
-            <div class="plant-card">
+    <section>
-                <section>
+        <h2>
-                    <h2>Catnip</h2>
+            <a href="garden/species/clinopodium-brownei.html">
-                    <p class="sci">Nepeta cataria</p>
+                Browne’s Savory
-                    <p>Species of mint that about 2/3rds of cats are attracted to.</p>
+            </a>
-                    <p>Native to southern and eastern Europe, the Middle East, Central Asia, and parts of China.</p>
+        </h2>
-                    <p>Transplanted from a small pot bought at a pet store, sometime in October, 2023.</p>
+        <p class="sci">
-                    <footer>
+            Clinopodium brownei
-                        <a href="https://en.wikipedia.org/wiki/Catnip">Wikipedia</a>
+        </p>
-                    </footer>
+        <p>A sprawling perennial herb found natively in the coastal plains and marshes of the southeastern United States.</p>
-                </section>
+        <footer>
-                <img src="images/garden/catnip_20240310_113153.jpg" alt="Catnip plant"/>
+            <a target="_blank" href="https://en.wikipedia.org/wiki/Clinopodium_brownei">
-            </div>
+                https://en.wikipedia.org/wiki/Clinopodium_brownei
-
+            </a>
-            <div class="plant-card">
+        </footer>
-                <section>
+    </section>
-                    <h2>Garlic Chives</h2>
+    <img src="images/garden/species/clinopodium-brownei/clinopodium_brownei-keim2-1-e1602619542587.jpg"/>
-                    <p class="sci">Allium tuberosum</p>
+</div>
-                    <p>A clump-forming perennial herb native to the Chinese province of Shanxi, but now found pretty much worldwide.</p>
+<div class="species-card">
-                    <p>Planted from seed on the 2nd of March, 2024.</p>
+    <section>
-                    <footer>
+        <h2>
-                        <a href="https://en.wikipedia.org/wiki/Allium_tuberosum">Wikipedia</a>
+            <a href="garden/species/nepeta-cataria.html">
-                    </footer>
+                Catnip
-                </section>
+            </a>
-                <img src="images/garden/chives_20240310_113216.jpg" alt="Chives plant"/>
+        </h2>
-            </div>
+        <p class="sci">
-
+            Nepeta cataria
-            <div class="plant-card">
+        </p>
-                <section>
+        <p>Species of mint that about 2/3rds of cats are attracted to. Native to southern and eastern Europe, the Middle East, Central Asia, and parts of China.</p>
-                    <h2>Cilantro</h2>
+        <footer>
-                    <p class="sci">Coriandrum sativum</p>
+            <a target="_blank" href="https://en.wikipedia.org/wiki/Catnip">
-                    <p>Also known as Coriander, this is an annual herb that most people enjoy has having a tart, lemon/lime taste. It's native to the mediterranean basin, but is grown worldwide.</p>
+                https://en.wikipedia.org/wiki/Catnip
-                    <footer>
+            </a>
-                        <a href="https://en.wikipedia.org/wiki/Coriander">Wikipedia</a>
+        </footer>
-                    </footer>
+    </section>
-                </section>
+    <img src="images/garden/species/nepeta-cataria/catnip-test.jpg"/>
-                <img src="images/garden/cilantro_20240310_113220.jpg" alt="Cilantro plant"/>
+</div>
-            </div>
+<div class="species-card">
-
+    <section>
-            <div class="plant-card">
+        <h2>
-                <section>
+            <a href="garden/species/coriandrum-sativum.html">
-                    <h2>Creeping Sage</h2>
+                Cilantro
-                    <p class="sci">Salvia misella</p>
+            </a>
-                    <p>Also known as tropical sage, it is an annual herb growing throughout the tropical Americas.</p>
+        </h2>
-                    <p>Transplanted on the 9th of March, 2024.</p>
+        <p class="sci">
-                    <footer>
+            Coriandrum sativum
-                        <a href="https://en.wikipedia.org/wiki/Salvia_misella">Wikipedia</a>
+        </p>
-                    </footer>
+        <p>Also known as Coriander, this is an annual herb that most people enjoy has having a tart, lemon/lime taste. It's native to the Mediterranean basin, but is grown worldwide.</p>
-                </section>
+        <footer>
-                <img src="images/garden/creeping-sage_20240310_113303.jpg" alt="Creeping Sage plant"/>
+            <a target="_blank" href="https://en.wikipedia.org/wiki/Coriander">
-            </div>
+                https://en.wikipedia.org/wiki/Coriander
-
+            </a>
-            <div class="plant-card">
+        </footer>
-                <section>
+    </section>
-                    <h2>Dwarf Shiny-Leaf Coffee</h2>
+    <img src="images/garden/species/coriandrum-sativum/Coriandrum_sativum--Forest-and-Kim-Starr--CC-BY.jpg"/>
-                    <p class="sci">Psychotria nervosa</p>
+</div>
-                    <p>A small shrub with shiny evergreen leaves that produces beans similar to coffee, but without any caffeine. Native to the southeastern United States.</p>
+<div class="species-card">
-                    <p>Transplanted on the 10th of February, 2024.</p>
+    <section>
-                    <footer>
+        <h2>
-                        <a href="https://gardeningsolutions.ifas.ufl.edu/plants/trees-and-shrubs/shrubs/wild-coffee.html">University of Florida</a>
+            <a href="garden/species/salvia-misella.html">
-                    </footer>
+                Creeping Sage
-                </section>
+            </a>
-                <img src="images/garden/dwarf-coffee_20240310_113259.jpg" alt="Dwarf Coffee plant"/>
+        </h2>
-            </div>
+        <p class="sci">
-
+            Salvia misella
-            <div class="plant-card">
+        </p>
-                <section>
+        <p>Also known as tropical sage, it is an annual herb growing throughout the tropical Americas.</p>
-                    <h2>Kimberley Queen Fern</h2>
+        <footer>
-                    <p class="sci">Nephrolepis obliterata</p>
+            <a target="_blank" href="https://en.wikipedia.org/wiki/Salvia_misella">
-                    <p>A species of fern originating from Australia, but grown worldwide.</p>
+                https://en.wikipedia.org/wiki/Salvia_misella
-                    <p>Transplanted on the 2nd of March, 2024.</p>
+            </a>
-                    <footer>
+        </footer>
-                        <a href="https://en.wikipedia.org/wiki/Nephrolepis_obliterata">Wikipedia</a>
+    </section>
-                    </footer>
+    <img src="images/garden/species/salvia-misella/salvia-misella.jpg"/>
-                </section>
+</div>
-                <img src="images/garden/fern_20240310_113359.jpg" alt="Fern plant"/>
+<div class="species-card">
-            </div>
+    <section>
-
+        <h2>
-            <div class="plant-card">
+            <a href="garden/species/psychotria-nervosa.html">
-                <section>
+                Dwarf Shiny-Leaf Coffee
-                    <h2>Foxtail Fern</h2>
+            </a>
-                    <p class="sci">Asparagus aethiopicus</p>
+        </h2>
-                    <p>A plant native to South Africa that's grown ornamentally in many places. Its roots form water-storage tubers.</p>
+        <p class="sci">
-                    <p>Transplanted in February, 2024.</p>
+            Psychotria nervosa
-                    <footer>
+        </p>
-                        <a href="https://en.wikipedia.org/wiki/Asparagus_aethiopicus">Wikipedia</a>
+        <p>A small shrub with shiny evergreen leaves that produces beans similar to coffee, but without any caffeine. Native to the southeastern United States.</p>
-                    </footer>
+        <footer>
-                </section>
+            <a target="_blank" href="https://gardeningsolutions.ifas.ufl.edu/plants/trees-and-shrubs/shrubs/wild-coffee.html">
-                <img src="images/garden/foxtail-fern_20240310_113229.jpg" alt="Foxtail Fern plant"/>
+                https://gardeningsolutions.ifas.ufl.edu/plants/trees-and-shrubs/shrubs/wild-coffee.html
-            </div>
+            </a>
-
+        </footer>
-            <div class="plant-card">
+    </section>
-                <section>
+    <img src="images/garden/species/psychotria-nervosa/Psychotria_nervosa-JennyEvans_CCBY-NC2.0.jpg"/>
-                    <h2>Inchplant</h2>
+</div>
-                    <p class="sci">Tradescantia zebrina</p>
+<div class="species-card">
-                    <p>A species of creeping vine plant that forms a dense groundcover in shaded areas. It's native to Mexico, Central America, and Colombia.</p>
+    <section>
-                    <p>Transplanted on the 8th of March, 2024.</p>
+        <h2>
-                    <footer>
+            <a href="garden/species/thymus-vulgaris.html">
-                        <a href="https://en.wikipedia.org/wiki/Tradescantia_zebrina">Wikipedia</a>
+                English Thyme
-                    </footer>
+            </a>
-                </section>
+        </h2>
-                <img src="images/garden/inchplant_20240310_113409.jpg" alt="Inchplant"/>
+        <p class="sci">
-            </div>
+            Thymus vulgaris
-
+        </p>
-            <div class="plant-card">
+        <p>A flowering plant in the mint family, native to southern Europe, that's commonly used as an herb.</p>
-                <section>
+        <footer>
-                    <h2>Jalapeño</h2>
+            <a target="_blank" href="https://en.wikipedia.org/wiki/Thymus_vulgaris">
-                    <p class="sci">Capsicum annuum var. jalapeño</p>
+                https://en.wikipedia.org/wiki/Thymus_vulgaris
-                    <p>A medium-sized chili pepper species with relatively mild pungency. It's commonly picked and consumed while still green, and were originally cultivated by the Aztecs.</p>
+            </a>
-                    <p>Transplanted on the 2nd of March, 2024.</p>
+        </footer>
-                    <footer>
+    </section>
-                        <a href="https://en.wikipedia.org/wiki/Jalape%C3%B1o">Wikipedia</a>
+    <img src="images/garden/species/thymus-vulgaris/Thymus-vulgaris--CT-Arzneimittel-GmbH--CC-BY-ND.jpg"/>
-                    </footer>
+</div>
-                </section>
+<div class="species-card">
-                <img src="images/garden/jalapeno_20240310_113329.jpg" alt="Jalapeño plant"/>
+    <section>
-            </div>
+        <h2>
-
+            <a href="garden/species/asparagus-aethiopicus.html">
-            <div class="plant-card">
+                Foxtail Fern
-                <section>
+            </a>
-                    <h2>Marigold</h2>
+        </h2>
-                    <p class="sci">Tagetes erecta</p>
+        <p class="sci">
-                    <p>A species of flowering plant native to the Americas that is widely used as an ornamental flower, and was originally called by its Nahuatl name, cempoalxóchitl.</p>
+            Asparagus aethiopicus
-                    <p>Planted from seed in February, 2024.</p>
+        </p>
-                    <footer>
+        <p>A plant native to South Africa that's grown ornamentally in many places. Its roots form water-storage tubers.</p>
-                        <a href="https://en.wikipedia.org/wiki/Tagetes_erecta">Wikipedia</a>
+        <footer>
-                    </footer>
+            <a target="_blank" href="https://en.wikipedia.org/wiki/Asparagus_aethiopicus">
-                </section>
+                https://en.wikipedia.org/wiki/Asparagus_aethiopicus
-                <img src="images/garden/marigold_20240310_113234.jpg" alt="Marigold plant"/>
+            </a>
-            </div>
+        </footer>
-
+    </section>
-            <div class="plant-card">
+    <img src="images/garden/species/asparagus-aethiopicus/foxtail_fern_asparagus_meyeri.jpg"/>
-                <section>
+</div>
-                    <h2>Perennial Petunia</h2>
+<div class="species-card">
-                    <p class="sci">Ruellia caroliniensis</p>
+    <section>
-                    <p>A wild petunia with blue or violet flowers that's native to the southeastern United States.</p>
+        <h2>
-                    <p>Transplanted on the 10th of February, 2024.</p>
+            <a href="garden/species/allium-tuberosum.html">
-                    <footer>
+                Garlic Chives
-                        <a href="https://en.wikipedia.org/wiki/Ruellia_caroliniensis">Wikipedia</a>
+            </a>
-                    </footer>
+        </h2>
-                </section>
+        <p class="sci">
-                <img src="images/garden/perennial-petunia_20240310_113346.jpg" alt="Petunia plant"/>
+            Allium tuberosum
-            </div>
+        </p>
-
+        <p>A clump-forming perennial herb native to the Chinese province of Shanxi, but now found pretty much worldwide.</p>
-            <div class="plant-card">
+        <footer>
-                <section>
+            <a target="_blank" href="https://en.wikipedia.org/wiki/Allium_tuberosum">
-                    <h2>Mona Lavender</h2>
+                https://en.wikipedia.org/wiki/Allium_tuberosum
-                    <p class="sci">Plectranthus "Mona Lavender"</p>
+            </a>
-                    <p>A hybrid of <em>Plectranthus saccatus</em> and <em>Plectranthus hilliardiae</em>, this is a broadleaf evergreen shrub in the mint family, which produces many small purple flowers.</p>
+        </footer>
-                    <p>Transplanted in February, 2024.</p>
+    </section>
-                    <footer>
+    <img src="images/garden/species/allium-tuberosum/Allium_tuberosum-ingarden1.jpg"/>
-                        <a href="https://plants.ces.ncsu.edu/plants/plectranthus-mona-lavender/">North Carolina State University</a>
+</div>
-                    </footer>
+<div class="species-card">
-                </section>
+    <section>
-                <img src="images/garden/plectranthus_20240310_113255.jpg" alt="Plectranthus plant"/>
+        <h2>
-            </div>
+            <a href="garden/species/trandescantia-zebrina.html">
-
+                Inchplant
-            <div class="plant-card">
+            </a>
-                <section>
+        </h2>
-                    <h2>English Thyme</h2>
+        <p class="sci">
-                    <p class="sci">Thymus vulgaris</p>
+            Trandescantia zebrina
-                    <p>A flowering plant in the mint family, native to southern Europe, that's commonly used as an herb.</p>
+        </p>
-                    <p>Planted from seed in March, 2024.</p>
+        <p>A species of creeping vine plant that forms a dense groundcover in shaded areas. It's native to Mexico, Central America, and Colombia.</p>
-                    <footer>
+        <footer>
-                        <a href="https://en.wikipedia.org/wiki/Thymus_vulgaris">Wikipedia</a>
+            <a target="_blank" href="https://en.wikipedia.org/wiki/Tradescantia_zebrina">
-                    </footer>
+                https://en.wikipedia.org/wiki/Tradescantia_zebrina
-                </section>
+            </a>
-                <img src="images/garden/thyme_20240310_113210.jpg" alt="Thyme plant"/>
+        </footer>
-            </div>
+    </section>
-
+    <img src="images/garden/species/trandescantia-zebrina/Tradescantia-zebrina_AdobeStock_492957504_1200px.jpg"/>
-            <div class="plant-card">
+</div>
-                <section>
+<div class="species-card">
-                    <h2>Tropical Milkweed</h2>
+    <section>
-                    <p class="sci">Asclepias curassavica</p>
+        <h2>
-                    <p>A flowering milkweed species native to the American tropics which is a food source for Monarch butterflies.</p>
+            <a href="garden/species/capsicum-annuum-var-jalapeno.html">
-                    <p>Note: Research suggests that this plant may disrupt migratory patterns in butterflies when planted in northern United States habitats. I'm working on replacing it with native milkweed variants.</p>
+                Jalapeño
-                    <p>Transplanted in February, 2024.</p>
+            </a>
-                    <footer>
+        </h2>
-                        <a href="https://en.wikipedia.org/wiki/Asclepias_curassavica">Wikipedia</a>
+        <p class="sci">
-                    </footer>
+            Capsicum annuum var. jalapeño
-                </section>
+        </p>
-                <img src="images/garden/tropical-milkweed_20240310_113353.jpg" alt="Tropical Milkweed plant"/>
+        <p>A medium-sized chili pepper species with relatively mild pungency. It's commonly picked and consumed while still green, and were originally cultivated by the Aztecs.</p>
-            </div>
+        <footer>
-
+            <a target="_blank" href="https://en.wikipedia.org/wiki/Jalape%C3%B1o">
-            <div class="plant-card">
+                https://en.wikipedia.org/wiki/Jalape%C3%B1o
-                <section>
+            </a>
-                    <h2>Wood Sage</h2>
+        </footer>
-                    <p class="sci">Teucrium canadense</p>
+    </section>
-                    <p>A perennial herb native to North America, growing in moist grasslands, forest edges, marshes, and on roadsides.</p>
+    <img src="images/garden/species/capsicum-annuum-var-jalapeno/jalapeno.jpg"/>
-                    <p>Transplanted on the 9th of March, 2024.</p>
+</div>
-                    <footer>
+<div class="species-card">
-                        <a href="https://en.wikipedia.org/wiki/Teucrium_canadense">Wikipedia</a>
+    <section>
-                    </footer>
+        <h2>
-                </section>
+            <a href="garden/species/nephrolepis-obliterata.html">
-                <img src="images/garden/woody-sage_20240310_113339.jpg" alt="Wood Sage plant"/>
+                Kimberley Queen Fern
-            </div>
+            </a>
-
+        </h2>
+        <p class="sci">
+            Nephrolepis obliterata
+        </p>
+        <p>A species of fern originating from Australia, but grown worldwide.</p>
+        <footer>
+            <a target="_blank" href="https://en.wikipedia.org/wiki/Nephrolepis_obliterata">
+                https://en.wikipedia.org/wiki/Nephrolepis_obliterata
+            </a>
+        </footer>
+    </section>
+    <img src="images/garden/species/nephrolepis-obliterata/nephrolepis-obliterata.jpg"/>
+</div>
+<div class="species-card">
+    <section>
+        <h2>
+            <a href="garden/species/tagetes-erecta.html">
+                Marigold
+            </a>
+        </h2>
+        <p class="sci">
+            Tagetes erecta
+        </p>
+        <p>A species of flowering plant native to the Americas that is widely used as an ornamental flower, and was originally called by its Nahuatl name, cempoalxóchitl.</p>
+        <footer>
+            <a target="_blank" href="https://en.wikipedia.org/wiki/Tagetes_erecta">
+                https://en.wikipedia.org/wiki/Tagetes_erecta
+            </a>
+        </footer>
+    </section>
+    <img src="images/garden/species/tagetes-erecta/tagetes-erecta.jpg"/>
+</div>
+<div class="species-card">
+    <section>
+        <h2>
+            <a href="garden/species/plectranthus-mona-lavender.html">
+                Mona Lavender
+            </a>
+        </h2>
+        <p class="sci">
+            Plectranthus “Mona Lavender”
+        </p>
+        <p>A hybrid of Plectranthus saccatus and Plectranthus hilliardiae, this is a broadleaf evergreen shrub in the mint family, which produces many small purple flowers.</p>
+        <footer>
+            <a target="_blank" href="https://plants.ces.ncsu.edu/plants/plectranthus-mona-lavender/">
+                https://plants.ces.ncsu.edu/plants/plectranthus-mona-lavender/
+            </a>
+        </footer>
+    </section>
+    <img src="images/garden/species/plectranthus-mona-lavender/plectranthus-0773400934.jpg"/>
+</div>
+<div class="species-card">
+    <section>
+        <h2>
+            <a href="garden/species/ruellia-caroliniensis.html">
+                Perennial Petunia
+            </a>
+        </h2>
+        <p class="sci">
+            Ruellia caroliniensis
+        </p>
+        <p>A wild petunia with blue or violet flowers that's native to the southeastern United States.</p>
+        <footer>
+            <a target="_blank" href="https://en.wikipedia.org/wiki/Ruellia_caroliniensis">
+                https://en.wikipedia.org/wiki/Ruellia_caroliniensis
+            </a>
+        </footer>
+    </section>
+    <img src="images/garden/species/ruellia-caroliniensis/Ruellia-carolinensis-Carolina-Wild-Petunia-by-Marti-Webster-e1525962513541.jpg"/>
+</div>
+<div class="species-card">
+    <section>
+        <h2>
+            <a href="garden/species/asclepias-curassavica.html">
+                Tropical Milkweed
+            </a>
+        </h2>
+        <p class="sci">
+            Asclepias curassavica
+        </p>
+        <p>A flowering milkweed species native to the American tropics which is a food source for Monarch butterflies. Note: Research suggests that this plant may disrupt migratory patterns in butterflies when planted in northern United States habitats. I'm working on replacing it with native milkweed variants.</p>
+        <footer>
+            <a target="_blank" href="https://en.wikipedia.org/wiki/Asclepias_curassavica">
+                https://en.wikipedia.org/wiki/Asclepias_curassavica
+            </a>
+        </footer>
+    </section>
+    <img src="images/garden/species/asclepias-curassavica/Asclepias_curassavica-Thekkady-2016-12-03-001.jpg"/>
+</div>
+<div class="species-card">
+    <section>
+        <h2>
+            <a href="garden/species/teucrium-canadense.html">
+                Wood Sage
+            </a>
+        </h2>
+        <p class="sci">
+            Teucrium canadense
+        </p>
+        <p>A perennial herb native to North America, growing in moist grasslands, forest edges, marshes, and on roadsides.</p>
+        <footer>
+            <a target="_blank" href="https://en.wikipedia.org/wiki/Teucrium_canadense">
+                https://en.wikipedia.org/wiki/Teucrium_canadense
+            </a>
+        </footer>
+    </section>
+    <img src="images/garden/species/teucrium-canadense/teucrium-canadense-perennials-20a__49095.jpg"/>
+</div><!--__SPECIES_LIST_END__-->
         </article>
 
         <article>

garden/species/allium-tuberosum.html

@@ -0,0 +1,87 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>Andrew's Garden: Garlic Chives</title>
+    <meta charset="utf-8">
+    <meta name="description" content="Information about Andrew's Garden">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    
+    <script src="../../scripts/themes.min.js"></script>
+    <noscript><style>.jsonly{display: none !important;}</style></noscript>
+    <link rel="stylesheet" href="../../styles/style.css" type="text/css">
+    <link rel="stylesheet" href="../../styles/garden.css" type="text/css">
+    <script src="../../scripts/sitestat.js?remote-url=sitestat.andrewlalis.com" async></script>
+
+    <script type="module">
+        import PhotoSwipeLightbox from "../../vendor/photoswipe/photoswipe-lightbox.esm.min.js";
+        import PhotoSwipe from "../../vendor/photoswipe/photoswipe.esm.min.js";
+        const lightbox = new PhotoSwipeLightbox({
+            gallery: ".pswp-gallery",
+            children: "a",
+            pswpModule: PhotoSwipe
+        });
+        lightbox.init();
+    </script>
+    <link rel="stylesheet" href="../../vendor/photoswipe/photoswipe.css" type="text/css">
+</head>
+
+<body>
+    <header class="page-header">
+        <h1>Andrew's Garden</h1>
+        <h2 style="font-style: italic">Allium tuberosum</h2>
+        <nav>
+            <div>
+                <a href="../../index.html">Home</a>
+                <a href="../../articles.html">Articles</a>
+                <a href="../../projects.html">Projects</a>
+                <a href="../../training.html">Training</a>
+                <a class="page-header-selected" href="../../garden.html">Garden</a>
+                <a href="../../contact.html">Contact</a>
+                <a href="../../logbook.html">Logbook</a>
+            </div>
+            <div>
+                <a href="https://github.com/andrewlalis">GitHub</a>
+                <a href="https://www.linkedin.com/in/andrew-lalis/">LinkedIn</a>
+                <a href="https://www.youtube.com/channel/UC9X4mx6-ObPUB6-ud2IGAFQ">YouTube</a>
+            </div>
+        </nav>
+        <button id="themeToggleButton" class="jsonly">Change Color Theme</button>
+        <hr>
+    </header>
+
+    <main>
+        <article>
+            <h2>About Garlic Chives</h2>
+            <p>A clump-forming perennial herb native to the Chinese province of Shanxi, but now found pretty much worldwide.</p>
+            <p>
+                <a href="https://en.wikipedia.org/wiki/Allium_tuberosum">
+                    https://en.wikipedia.org/wiki/Allium_tuberosum
+                </a>
+            </p>
+        </article>
+        <article>
+            <h2 id="plants">Plants</h2>
+            <p>
+                Here's a detailed list of all plants I have of this species.
+            </p>
+            <div class="plant-card">
+    <section>
+        <h2>garlic-chives-001</h2>
+        <p class="gen">Generation F1</p>
+        <p></p>
+        <p>Planted from seed on the 2nd of March, 2024.</p>
+    </section>
+    <section>
+        <h3>Images</h3>
+        <div class="pswp-gallery">
+            <a href="../../images/garden/plants/garlic-chives-001/chives_20240310_113216.jpg" data-pswp-width="1836" data-pswp-height="2552" target="_blank">
+    <img src="../../images/garden/plants/garlic-chives-001/chives_20240310_113216.thumb.jpg" alt=""/>
+</a>
+
+        </div>
+    </section>
+</div>
+        </article>
+    </main>
+</body>

garden/species/asclepias-curassavica.html

@@ -0,0 +1,87 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>Andrew's Garden: Tropical Milkweed</title>
+    <meta charset="utf-8">
+    <meta name="description" content="Information about Andrew's Garden">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    
+    <script src="../../scripts/themes.min.js"></script>
+    <noscript><style>.jsonly{display: none !important;}</style></noscript>
+    <link rel="stylesheet" href="../../styles/style.css" type="text/css">
+    <link rel="stylesheet" href="../../styles/garden.css" type="text/css">
+    <script src="../../scripts/sitestat.js?remote-url=sitestat.andrewlalis.com" async></script>
+
+    <script type="module">
+        import PhotoSwipeLightbox from "../../vendor/photoswipe/photoswipe-lightbox.esm.min.js";
+        import PhotoSwipe from "../../vendor/photoswipe/photoswipe.esm.min.js";
+        const lightbox = new PhotoSwipeLightbox({
+            gallery: ".pswp-gallery",
+            children: "a",
+            pswpModule: PhotoSwipe
+        });
+        lightbox.init();
+    </script>
+    <link rel="stylesheet" href="../../vendor/photoswipe/photoswipe.css" type="text/css">
+</head>
+
+<body>
+    <header class="page-header">
+        <h1>Andrew's Garden</h1>
+        <h2 style="font-style: italic">Asclepias curassavica</h2>
+        <nav>
+            <div>
+                <a href="../../index.html">Home</a>
+                <a href="../../articles.html">Articles</a>
+                <a href="../../projects.html">Projects</a>
+                <a href="../../training.html">Training</a>
+                <a class="page-header-selected" href="../../garden.html">Garden</a>
+                <a href="../../contact.html">Contact</a>
+                <a href="../../logbook.html">Logbook</a>
+            </div>
+            <div>
+                <a href="https://github.com/andrewlalis">GitHub</a>
+                <a href="https://www.linkedin.com/in/andrew-lalis/">LinkedIn</a>
+                <a href="https://www.youtube.com/channel/UC9X4mx6-ObPUB6-ud2IGAFQ">YouTube</a>
+            </div>
+        </nav>
+        <button id="themeToggleButton" class="jsonly">Change Color Theme</button>
+        <hr>
+    </header>
+
+    <main>
+        <article>
+            <h2>About Tropical Milkweed</h2>
+            <p>A flowering milkweed species native to the American tropics which is a food source for Monarch butterflies. Note: Research suggests that this plant may disrupt migratory patterns in butterflies when planted in northern United States habitats. I'm working on replacing it with native milkweed variants.</p>
+            <p>
+                <a href="https://en.wikipedia.org/wiki/Asclepias_curassavica">
+                    https://en.wikipedia.org/wiki/Asclepias_curassavica
+                </a>
+            </p>
+        </article>
+        <article>
+            <h2 id="plants">Plants</h2>
+            <p>
+                Here's a detailed list of all plants I have of this species.
+            </p>
+            <div class="plant-card">
+    <section>
+        <h2>tropical-milkweed-001</h2>
+        <p class="gen">Generation F1</p>
+        <p></p>
+        <p>Transplanted in February, 2024.</p>
+    </section>
+    <section>
+        <h3>Images</h3>
+        <div class="pswp-gallery">
+            <a href="../../images/garden/plants/tropical-milkweed-001/tropical-milkweed_20240310_113353.jpg" data-pswp-width="1836" data-pswp-height="2986" target="_blank">
+    <img src="../../images/garden/plants/tropical-milkweed-001/tropical-milkweed_20240310_113353.thumb.jpg" alt=""/>
+</a>
+
+        </div>
+    </section>
+</div>
+        </article>
+    </main>
+</body>

garden/species/asparagus-aethiopicus.html

@@ -0,0 +1,100 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>Andrew's Garden: Foxtail Fern</title>
+    <meta charset="utf-8">
+    <meta name="description" content="Information about Andrew's Garden">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    
+    <script src="../../scripts/themes.min.js"></script>
+    <noscript><style>.jsonly{display: none !important;}</style></noscript>
+    <link rel="stylesheet" href="../../styles/style.css" type="text/css">
+    <link rel="stylesheet" href="../../styles/garden.css" type="text/css">
+    <script src="../../scripts/sitestat.js?remote-url=sitestat.andrewlalis.com" async></script>
+
+    <script type="module">
+        import PhotoSwipeLightbox from "../../vendor/photoswipe/photoswipe-lightbox.esm.min.js";
+        import PhotoSwipe from "../../vendor/photoswipe/photoswipe.esm.min.js";
+        const lightbox = new PhotoSwipeLightbox({
+            gallery: ".pswp-gallery",
+            children: "a",
+            pswpModule: PhotoSwipe
+        });
+        lightbox.init();
+    </script>
+    <link rel="stylesheet" href="../../vendor/photoswipe/photoswipe.css" type="text/css">
+</head>
+
+<body>
+    <header class="page-header">
+        <h1>Andrew's Garden</h1>
+        <h2 style="font-style: italic">Asparagus aethiopicus</h2>
+        <nav>
+            <div>
+                <a href="../../index.html">Home</a>
+                <a href="../../articles.html">Articles</a>
+                <a href="../../projects.html">Projects</a>
+                <a href="../../training.html">Training</a>
+                <a class="page-header-selected" href="../../garden.html">Garden</a>
+                <a href="../../contact.html">Contact</a>
+                <a href="../../logbook.html">Logbook</a>
+            </div>
+            <div>
+                <a href="https://github.com/andrewlalis">GitHub</a>
+                <a href="https://www.linkedin.com/in/andrew-lalis/">LinkedIn</a>
+                <a href="https://www.youtube.com/channel/UC9X4mx6-ObPUB6-ud2IGAFQ">YouTube</a>
+            </div>
+        </nav>
+        <button id="themeToggleButton" class="jsonly">Change Color Theme</button>
+        <hr>
+    </header>
+
+    <main>
+        <article>
+            <h2>About Foxtail Fern</h2>
+            <p>A plant native to South Africa that's grown ornamentally in many places. Its roots form water-storage tubers.</p>
+            <p>
+                <a href="https://en.wikipedia.org/wiki/Asparagus_aethiopicus">
+                    https://en.wikipedia.org/wiki/Asparagus_aethiopicus
+                </a>
+            </p>
+        </article>
+        <article>
+            <h2 id="plants">Plants</h2>
+            <p>
+                Here's a detailed list of all plants I have of this species.
+            </p>
+            <div class="plant-card">
+    <section>
+        <h2>foxtail-fern-001</h2>
+        <p class="gen">Generation F1</p>
+        <p>The foxtail fern in the bottom-left corner of the garden, when looking from the front. It’s right by the sidewalk.</p>
+        <p>Transplanted in February, 2024.</p>
+    </section>
+    <section>
+        <h3>Images</h3>
+        <div class="pswp-gallery">
+            <a href="../../images/garden/plants/foxtail-fern-001/foxtail-fern_20240310_113229.jpg" data-pswp-width="1836" data-pswp-height="2472" target="_blank">
+    <img src="../../images/garden/plants/foxtail-fern-001/foxtail-fern_20240310_113229.thumb.jpg" alt=""/>
+</a>
+
+        </div>
+    </section>
+</div><div class="plant-card">
+    <section>
+        <h2>foxtail-fern-002</h2>
+        <p class="gen">Generation F1</p>
+        <p>The foxtail fern that’s situated right in the middle of the garden, nearby the first bird-pepper plant.</p>
+        <p>Transplanted in February, 2024.</p>
+    </section>
+    <section>
+        <h3>Images</h3>
+        <div class="pswp-gallery">
+            
+        </div>
+    </section>
+</div>
+        </article>
+    </main>
+</body>

garden/species/capsicum-annuum-var-glabriusculum.html

@@ -0,0 +1,87 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>Andrew's Garden: Bird Pepper</title>
+    <meta charset="utf-8">
+    <meta name="description" content="Information about Andrew's Garden">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    
+    <script src="../../scripts/themes.min.js"></script>
+    <noscript><style>.jsonly{display: none !important;}</style></noscript>
+    <link rel="stylesheet" href="../../styles/style.css" type="text/css">
+    <link rel="stylesheet" href="../../styles/garden.css" type="text/css">
+    <script src="../../scripts/sitestat.js?remote-url=sitestat.andrewlalis.com" async></script>
+
+    <script type="module">
+        import PhotoSwipeLightbox from "../../vendor/photoswipe/photoswipe-lightbox.esm.min.js";
+        import PhotoSwipe from "../../vendor/photoswipe/photoswipe.esm.min.js";
+        const lightbox = new PhotoSwipeLightbox({
+            gallery: ".pswp-gallery",
+            children: "a",
+            pswpModule: PhotoSwipe
+        });
+        lightbox.init();
+    </script>
+    <link rel="stylesheet" href="../../vendor/photoswipe/photoswipe.css" type="text/css">
+</head>
+
+<body>
+    <header class="page-header">
+        <h1>Andrew's Garden</h1>
+        <h2 style="font-style: italic">Capsicum annuum var. glabriusculum</h2>
+        <nav>
+            <div>
+                <a href="../../index.html">Home</a>
+                <a href="../../articles.html">Articles</a>
+                <a href="../../projects.html">Projects</a>
+                <a href="../../training.html">Training</a>
+                <a class="page-header-selected" href="../../garden.html">Garden</a>
+                <a href="../../contact.html">Contact</a>
+                <a href="../../logbook.html">Logbook</a>
+            </div>
+            <div>
+                <a href="https://github.com/andrewlalis">GitHub</a>
+                <a href="https://www.linkedin.com/in/andrew-lalis/">LinkedIn</a>
+                <a href="https://www.youtube.com/channel/UC9X4mx6-ObPUB6-ud2IGAFQ">YouTube</a>
+            </div>
+        </nav>
+        <button id="themeToggleButton" class="jsonly">Change Color Theme</button>
+        <hr>
+    </header>
+
+    <main>
+        <article>
+            <h2>About Bird Pepper</h2>
+            <p>A small chili pepper variety native to southern North America and northern South America. It's the only pepper species native to the Floridian peninsula.</p>
+            <p>
+                <a href="https://en.wikipedia.org/wiki/Capsicum_annuum_var._glabriusculum">
+                    https://en.wikipedia.org/wiki/Capsicum_annuum_var._glabriusculum
+                </a>
+            </p>
+        </article>
+        <article>
+            <h2 id="plants">Plants</h2>
+            <p>
+                Here's a detailed list of all plants I have of this species.
+            </p>
+            <div class="plant-card">
+    <section>
+        <h2>bird-pepper-001</h2>
+        <p class="gen">Generation F1</p>
+        <p>My first bird pepper plant, acquired from a local nursery.</p>
+        <p>Transplanted from a 1 gallon pot, on February 10th, 2024.</p>
+    </section>
+    <section>
+        <h3>Images</h3>
+        <div class="pswp-gallery">
+            <a href="../../images/garden/plants/bird-pepper-001/bird-pepper_20240310_113310.jpg" data-pswp-width="1836" data-pswp-height="2338" target="_blank">
+    <img src="../../images/garden/plants/bird-pepper-001/bird-pepper_20240310_113310.thumb.jpg" alt=""/>
+</a>
+
+        </div>
+    </section>
+</div>
+        </article>
+    </main>
+</body>

garden/species/capsicum-annuum-var-jalapeno.html

@@ -0,0 +1,87 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>Andrew's Garden: Jalapeño</title>
+    <meta charset="utf-8">
+    <meta name="description" content="Information about Andrew's Garden">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    
+    <script src="../../scripts/themes.min.js"></script>
+    <noscript><style>.jsonly{display: none !important;}</style></noscript>
+    <link rel="stylesheet" href="../../styles/style.css" type="text/css">
+    <link rel="stylesheet" href="../../styles/garden.css" type="text/css">
+    <script src="../../scripts/sitestat.js?remote-url=sitestat.andrewlalis.com" async></script>
+
+    <script type="module">
+        import PhotoSwipeLightbox from "../../vendor/photoswipe/photoswipe-lightbox.esm.min.js";
+        import PhotoSwipe from "../../vendor/photoswipe/photoswipe.esm.min.js";
+        const lightbox = new PhotoSwipeLightbox({
+            gallery: ".pswp-gallery",
+            children: "a",
+            pswpModule: PhotoSwipe
+        });
+        lightbox.init();
+    </script>
+    <link rel="stylesheet" href="../../vendor/photoswipe/photoswipe.css" type="text/css">
+</head>
+
+<body>
+    <header class="page-header">
+        <h1>Andrew's Garden</h1>
+        <h2 style="font-style: italic">Capsicum annuum var. jalapeño</h2>
+        <nav>
+            <div>
+                <a href="../../index.html">Home</a>
+                <a href="../../articles.html">Articles</a>
+                <a href="../../projects.html">Projects</a>
+                <a href="../../training.html">Training</a>
+                <a class="page-header-selected" href="../../garden.html">Garden</a>
+                <a href="../../contact.html">Contact</a>
+                <a href="../../logbook.html">Logbook</a>
+            </div>
+            <div>
+                <a href="https://github.com/andrewlalis">GitHub</a>
+                <a href="https://www.linkedin.com/in/andrew-lalis/">LinkedIn</a>
+                <a href="https://www.youtube.com/channel/UC9X4mx6-ObPUB6-ud2IGAFQ">YouTube</a>
+            </div>
+        </nav>
+        <button id="themeToggleButton" class="jsonly">Change Color Theme</button>
+        <hr>
+    </header>
+
+    <main>
+        <article>
+            <h2>About Jalapeño</h2>
+            <p>A medium-sized chili pepper species with relatively mild pungency. It's commonly picked and consumed while still green, and were originally cultivated by the Aztecs.</p>
+            <p>
+                <a href="https://en.wikipedia.org/wiki/Jalape%C3%B1o">
+                    https://en.wikipedia.org/wiki/Jalape%C3%B1o
+                </a>
+            </p>
+        </article>
+        <article>
+            <h2 id="plants">Plants</h2>
+            <p>
+                Here's a detailed list of all plants I have of this species.
+            </p>
+            <div class="plant-card">
+    <section>
+        <h2>jalapeno-001</h2>
+        <p class="gen">Generation F1</p>
+        <p></p>
+        <p>Transplanted on the 2nd of March, 2024.</p>
+    </section>
+    <section>
+        <h3>Images</h3>
+        <div class="pswp-gallery">
+            <a href="../../images/garden/plants/jalapeno-001/jalapeno_20240310_113329.jpg" data-pswp-width="1836" data-pswp-height="2860" target="_blank">
+    <img src="../../images/garden/plants/jalapeno-001/jalapeno_20240310_113329.thumb.jpg" alt=""/>
+</a>
+
+        </div>
+    </section>
+</div>
+        </article>
+    </main>
+</body>

garden/species/clinopodium-brownei.html

@@ -0,0 +1,87 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>Andrew's Garden: Browne’s Savory</title>
+    <meta charset="utf-8">
+    <meta name="description" content="Information about Andrew's Garden">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    
+    <script src="../../scripts/themes.min.js"></script>
+    <noscript><style>.jsonly{display: none !important;}</style></noscript>
+    <link rel="stylesheet" href="../../styles/style.css" type="text/css">
+    <link rel="stylesheet" href="../../styles/garden.css" type="text/css">
+    <script src="../../scripts/sitestat.js?remote-url=sitestat.andrewlalis.com" async></script>
+
+    <script type="module">
+        import PhotoSwipeLightbox from "../../vendor/photoswipe/photoswipe-lightbox.esm.min.js";
+        import PhotoSwipe from "../../vendor/photoswipe/photoswipe.esm.min.js";
+        const lightbox = new PhotoSwipeLightbox({
+            gallery: ".pswp-gallery",
+            children: "a",
+            pswpModule: PhotoSwipe
+        });
+        lightbox.init();
+    </script>
+    <link rel="stylesheet" href="../../vendor/photoswipe/photoswipe.css" type="text/css">
+</head>
+
+<body>
+    <header class="page-header">
+        <h1>Andrew's Garden</h1>
+        <h2 style="font-style: italic">Clinopodium brownei</h2>
+        <nav>
+            <div>
+                <a href="../../index.html">Home</a>
+                <a href="../../articles.html">Articles</a>
+                <a href="../../projects.html">Projects</a>
+                <a href="../../training.html">Training</a>
+                <a class="page-header-selected" href="../../garden.html">Garden</a>
+                <a href="../../contact.html">Contact</a>
+                <a href="../../logbook.html">Logbook</a>
+            </div>
+            <div>
+                <a href="https://github.com/andrewlalis">GitHub</a>
+                <a href="https://www.linkedin.com/in/andrew-lalis/">LinkedIn</a>
+                <a href="https://www.youtube.com/channel/UC9X4mx6-ObPUB6-ud2IGAFQ">YouTube</a>
+            </div>
+        </nav>
+        <button id="themeToggleButton" class="jsonly">Change Color Theme</button>
+        <hr>
+    </header>
+
+    <main>
+        <article>
+            <h2>About Browne’s Savory</h2>
+            <p>A sprawling perennial herb found natively in the coastal plains and marshes of the southeastern United States.</p>
+            <p>
+                <a href="https://en.wikipedia.org/wiki/Clinopodium_brownei">
+                    https://en.wikipedia.org/wiki/Clinopodium_brownei
+                </a>
+            </p>
+        </article>
+        <article>
+            <h2 id="plants">Plants</h2>
+            <p>
+                Here's a detailed list of all plants I have of this species.
+            </p>
+            <div class="plant-card">
+    <section>
+        <h2>brownes-savory-001</h2>
+        <p class="gen">Generation F1</p>
+        <p></p>
+        <p>Transplanted on the 10th of February, 2024.</p>
+    </section>
+    <section>
+        <h3>Images</h3>
+        <div class="pswp-gallery">
+            <a href="../../images/garden/plants/brownes-savory-001/browns-savory_20240310_113313.jpg" data-pswp-width="1794" data-pswp-height="1623" target="_blank">
+    <img src="../../images/garden/plants/brownes-savory-001/browns-savory_20240310_113313.thumb.jpg" alt=""/>
+</a>
+
+        </div>
+    </section>
+</div>
+        </article>
+    </main>
+</body>

garden/species/coriandrum-sativum.html

@@ -0,0 +1,87 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>Andrew's Garden: Cilantro</title>
+    <meta charset="utf-8">
+    <meta name="description" content="Information about Andrew's Garden">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    
+    <script src="../../scripts/themes.min.js"></script>
+    <noscript><style>.jsonly{display: none !important;}</style></noscript>
+    <link rel="stylesheet" href="../../styles/style.css" type="text/css">
+    <link rel="stylesheet" href="../../styles/garden.css" type="text/css">
+    <script src="../../scripts/sitestat.js?remote-url=sitestat.andrewlalis.com" async></script>
+
+    <script type="module">
+        import PhotoSwipeLightbox from "../../vendor/photoswipe/photoswipe-lightbox.esm.min.js";
+        import PhotoSwipe from "../../vendor/photoswipe/photoswipe.esm.min.js";
+        const lightbox = new PhotoSwipeLightbox({
+            gallery: ".pswp-gallery",
+            children: "a",
+            pswpModule: PhotoSwipe
+        });
+        lightbox.init();
+    </script>
+    <link rel="stylesheet" href="../../vendor/photoswipe/photoswipe.css" type="text/css">
+</head>
+
+<body>
+    <header class="page-header">
+        <h1>Andrew's Garden</h1>
+        <h2 style="font-style: italic">Coriandrum sativum</h2>
+        <nav>
+            <div>
+                <a href="../../index.html">Home</a>
+                <a href="../../articles.html">Articles</a>
+                <a href="../../projects.html">Projects</a>
+                <a href="../../training.html">Training</a>
+                <a class="page-header-selected" href="../../garden.html">Garden</a>
+                <a href="../../contact.html">Contact</a>
+                <a href="../../logbook.html">Logbook</a>
+            </div>
+            <div>
+                <a href="https://github.com/andrewlalis">GitHub</a>
+                <a href="https://www.linkedin.com/in/andrew-lalis/">LinkedIn</a>
+                <a href="https://www.youtube.com/channel/UC9X4mx6-ObPUB6-ud2IGAFQ">YouTube</a>
+            </div>
+        </nav>
+        <button id="themeToggleButton" class="jsonly">Change Color Theme</button>
+        <hr>
+    </header>
+
+    <main>
+        <article>
+            <h2>About Cilantro</h2>
+            <p>Also known as Coriander, this is an annual herb that most people enjoy has having a tart, lemon/lime taste. It's native to the Mediterranean basin, but is grown worldwide.</p>
+            <p>
+                <a href="https://en.wikipedia.org/wiki/Coriander">
+                    https://en.wikipedia.org/wiki/Coriander
+                </a>
+            </p>
+        </article>
+        <article>
+            <h2 id="plants">Plants</h2>
+            <p>
+                Here's a detailed list of all plants I have of this species.
+            </p>
+            <div class="plant-card">
+    <section>
+        <h2>coriander-001</h2>
+        <p class="gen">Generation F1</p>
+        <p></p>
+        <p>Planted from seed on the 2nd of March, 2024.</p>
+    </section>
+    <section>
+        <h3>Images</h3>
+        <div class="pswp-gallery">
+            <a href="../../images/garden/plants/coriander-001/cilantro_20240310_113220.jpg" data-pswp-width="1836" data-pswp-height="2768" target="_blank">
+    <img src="../../images/garden/plants/coriander-001/cilantro_20240310_113220.thumb.jpg" alt=""/>
+</a>
+
+        </div>
+    </section>
+</div>
+        </article>
+    </main>
+</body>

garden/species/juniperus-conferta.html

@@ -0,0 +1,87 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>Andrew's Garden: Blue Pacific Juniper</title>
+    <meta charset="utf-8">
+    <meta name="description" content="Information about Andrew's Garden">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    
+    <script src="../../scripts/themes.min.js"></script>
+    <noscript><style>.jsonly{display: none !important;}</style></noscript>
+    <link rel="stylesheet" href="../../styles/style.css" type="text/css">
+    <link rel="stylesheet" href="../../styles/garden.css" type="text/css">
+    <script src="../../scripts/sitestat.js?remote-url=sitestat.andrewlalis.com" async></script>
+
+    <script type="module">
+        import PhotoSwipeLightbox from "../../vendor/photoswipe/photoswipe-lightbox.esm.min.js";
+        import PhotoSwipe from "../../vendor/photoswipe/photoswipe.esm.min.js";
+        const lightbox = new PhotoSwipeLightbox({
+            gallery: ".pswp-gallery",
+            children: "a",
+            pswpModule: PhotoSwipe
+        });
+        lightbox.init();
+    </script>
+    <link rel="stylesheet" href="../../vendor/photoswipe/photoswipe.css" type="text/css">
+</head>
+
+<body>
+    <header class="page-header">
+        <h1>Andrew's Garden</h1>
+        <h2 style="font-style: italic">Juniperus conferta</h2>
+        <nav>
+            <div>
+                <a href="../../index.html">Home</a>
+                <a href="../../articles.html">Articles</a>
+                <a href="../../projects.html">Projects</a>
+                <a href="../../training.html">Training</a>
+                <a class="page-header-selected" href="../../garden.html">Garden</a>
+                <a href="../../contact.html">Contact</a>
+                <a href="../../logbook.html">Logbook</a>
+            </div>
+            <div>
+                <a href="https://github.com/andrewlalis">GitHub</a>
+                <a href="https://www.linkedin.com/in/andrew-lalis/">LinkedIn</a>
+                <a href="https://www.youtube.com/channel/UC9X4mx6-ObPUB6-ud2IGAFQ">YouTube</a>
+            </div>
+        </nav>
+        <button id="themeToggleButton" class="jsonly">Change Color Theme</button>
+        <hr>
+    </header>
+
+    <main>
+        <article>
+            <h2>About Blue Pacific Juniper</h2>
+            <p>A species of Juniper native to Japan, that grows on sand dunes and other acidic/alkaline soils with good drainage. It forms a groundcover if left unattended.</p>
+            <p>
+                <a href="https://en.wikipedia.org/wiki/Juniperus_conferta">
+                    https://en.wikipedia.org/wiki/Juniperus_conferta
+                </a>
+            </p>
+        </article>
+        <article>
+            <h2 id="plants">Plants</h2>
+            <p>
+                Here's a detailed list of all plants I have of this species.
+            </p>
+            <div class="plant-card">
+    <section>
+        <h2>blue-juniper-001</h2>
+        <p class="gen">Generation F1</p>
+        <p>A nice-looking juniper shrub I got at Lowe’s. It’s located right on the corner of my garden.</p>
+        <p>Transplanted on the 2nd of March, 2024.</p>
+    </section>
+    <section>
+        <h3>Images</h3>
+        <div class="pswp-gallery">
+            <a href="../../images/garden/plants/blue-juniper-001/blue-juniper_20240310_113334.jpg" data-pswp-width="1836" data-pswp-height="2673" target="_blank">
+    <img src="../../images/garden/plants/blue-juniper-001/blue-juniper_20240310_113334.thumb.jpg" alt=""/>
+</a>
+
+        </div>
+    </section>
+</div>
+        </article>
+    </main>
+</body>

garden/species/nepeta-cataria.html

@@ -0,0 +1,87 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>Andrew's Garden: Catnip</title>
+    <meta charset="utf-8">
+    <meta name="description" content="Information about Andrew's Garden">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    
+    <script src="../../scripts/themes.min.js"></script>
+    <noscript><style>.jsonly{display: none !important;}</style></noscript>
+    <link rel="stylesheet" href="../../styles/style.css" type="text/css">
+    <link rel="stylesheet" href="../../styles/garden.css" type="text/css">
+    <script src="../../scripts/sitestat.js?remote-url=sitestat.andrewlalis.com" async></script>
+
+    <script type="module">
+        import PhotoSwipeLightbox from "../../vendor/photoswipe/photoswipe-lightbox.esm.min.js";
+        import PhotoSwipe from "../../vendor/photoswipe/photoswipe.esm.min.js";
+        const lightbox = new PhotoSwipeLightbox({
+            gallery: ".pswp-gallery",
+            children: "a",
+            pswpModule: PhotoSwipe
+        });
+        lightbox.init();
+    </script>
+    <link rel="stylesheet" href="../../vendor/photoswipe/photoswipe.css" type="text/css">
+</head>
+
+<body>
+    <header class="page-header">
+        <h1>Andrew's Garden</h1>
+        <h2 style="font-style: italic">Nepeta cataria</h2>
+        <nav>
+            <div>
+                <a href="../../index.html">Home</a>
+                <a href="../../articles.html">Articles</a>
+                <a href="../../projects.html">Projects</a>
+                <a href="../../training.html">Training</a>
+                <a class="page-header-selected" href="../../garden.html">Garden</a>
+                <a href="../../contact.html">Contact</a>
+                <a href="../../logbook.html">Logbook</a>
+            </div>
+            <div>
+                <a href="https://github.com/andrewlalis">GitHub</a>
+                <a href="https://www.linkedin.com/in/andrew-lalis/">LinkedIn</a>
+                <a href="https://www.youtube.com/channel/UC9X4mx6-ObPUB6-ud2IGAFQ">YouTube</a>
+            </div>
+        </nav>
+        <button id="themeToggleButton" class="jsonly">Change Color Theme</button>
+        <hr>
+    </header>
+
+    <main>
+        <article>
+            <h2>About Catnip</h2>
+            <p>Species of mint that about 2/3rds of cats are attracted to. Native to southern and eastern Europe, the Middle East, Central Asia, and parts of China.</p>
+            <p>
+                <a href="https://en.wikipedia.org/wiki/Catnip">
+                    https://en.wikipedia.org/wiki/Catnip
+                </a>
+            </p>
+        </article>
+        <article>
+            <h2 id="plants">Plants</h2>
+            <p>
+                Here's a detailed list of all plants I have of this species.
+            </p>
+            <div class="plant-card">
+    <section>
+        <h2>catnip-001</h2>
+        <p class="gen">Generation F1</p>
+        <p></p>
+        <p>Transplanted from a small pot bought at a pet store, sometime in October, 2023.</p>
+    </section>
+    <section>
+        <h3>Images</h3>
+        <div class="pswp-gallery">
+            <a href="../../images/garden/plants/catnip-001/catnip_20240310_113153.jpg" data-pswp-width="1836" data-pswp-height="2810" target="_blank">
+    <img src="../../images/garden/plants/catnip-001/catnip_20240310_113153.thumb.jpg" alt=""/>
+</a>
+
+        </div>
+    </section>
+</div>
+        </article>
+    </main>
+</body>

garden/species/nephrolepis-obliterata.html

@@ -0,0 +1,87 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>Andrew's Garden: Kimberley Queen Fern</title>
+    <meta charset="utf-8">
+    <meta name="description" content="Information about Andrew's Garden">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    
+    <script src="../../scripts/themes.min.js"></script>
+    <noscript><style>.jsonly{display: none !important;}</style></noscript>
+    <link rel="stylesheet" href="../../styles/style.css" type="text/css">
+    <link rel="stylesheet" href="../../styles/garden.css" type="text/css">
+    <script src="../../scripts/sitestat.js?remote-url=sitestat.andrewlalis.com" async></script>
+
+    <script type="module">
+        import PhotoSwipeLightbox from "../../vendor/photoswipe/photoswipe-lightbox.esm.min.js";
+        import PhotoSwipe from "../../vendor/photoswipe/photoswipe.esm.min.js";
+        const lightbox = new PhotoSwipeLightbox({
+            gallery: ".pswp-gallery",
+            children: "a",
+            pswpModule: PhotoSwipe
+        });
+        lightbox.init();
+    </script>
+    <link rel="stylesheet" href="../../vendor/photoswipe/photoswipe.css" type="text/css">
+</head>
+
+<body>
+    <header class="page-header">
+        <h1>Andrew's Garden</h1>
+        <h2 style="font-style: italic">Nephrolepis obliterata</h2>
+        <nav>
+            <div>
+                <a href="../../index.html">Home</a>
+                <a href="../../articles.html">Articles</a>
+                <a href="../../projects.html">Projects</a>
+                <a href="../../training.html">Training</a>
+                <a class="page-header-selected" href="../../garden.html">Garden</a>
+                <a href="../../contact.html">Contact</a>
+                <a href="../../logbook.html">Logbook</a>
+            </div>
+            <div>
+                <a href="https://github.com/andrewlalis">GitHub</a>
+                <a href="https://www.linkedin.com/in/andrew-lalis/">LinkedIn</a>
+                <a href="https://www.youtube.com/channel/UC9X4mx6-ObPUB6-ud2IGAFQ">YouTube</a>
+            </div>
+        </nav>
+        <button id="themeToggleButton" class="jsonly">Change Color Theme</button>
+        <hr>
+    </header>
+
+    <main>
+        <article>
+            <h2>About Kimberley Queen Fern</h2>
+            <p>A species of fern originating from Australia, but grown worldwide.</p>
+            <p>
+                <a href="https://en.wikipedia.org/wiki/Nephrolepis_obliterata">
+                    https://en.wikipedia.org/wiki/Nephrolepis_obliterata
+                </a>
+            </p>
+        </article>
+        <article>
+            <h2 id="plants">Plants</h2>
+            <p>
+                Here's a detailed list of all plants I have of this species.
+            </p>
+            <div class="plant-card">
+    <section>
+        <h2>kimberley-fern-001</h2>
+        <p class="gen">Generation F1</p>
+        <p></p>
+        <p>Transplanted on the 2nd of March, 2024.</p>
+    </section>
+    <section>
+        <h3>Images</h3>
+        <div class="pswp-gallery">
+            <a href="../../images/garden/plants/kimberley-fern-001/fern_20240310_113359.jpg" data-pswp-width="1836" data-pswp-height="2420" target="_blank">
+    <img src="../../images/garden/plants/kimberley-fern-001/fern_20240310_113359.thumb.jpg" alt=""/>
+</a>
+
+        </div>
+    </section>
+</div>
+        </article>
+    </main>
+</body>

garden/species/plectranthus-mona-lavender.html

@@ -0,0 +1,87 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>Andrew's Garden: Mona Lavender</title>
+    <meta charset="utf-8">
+    <meta name="description" content="Information about Andrew's Garden">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    
+    <script src="../../scripts/themes.min.js"></script>
+    <noscript><style>.jsonly{display: none !important;}</style></noscript>
+    <link rel="stylesheet" href="../../styles/style.css" type="text/css">
+    <link rel="stylesheet" href="../../styles/garden.css" type="text/css">
+    <script src="../../scripts/sitestat.js?remote-url=sitestat.andrewlalis.com" async></script>
+
+    <script type="module">
+        import PhotoSwipeLightbox from "../../vendor/photoswipe/photoswipe-lightbox.esm.min.js";
+        import PhotoSwipe from "../../vendor/photoswipe/photoswipe.esm.min.js";
+        const lightbox = new PhotoSwipeLightbox({
+            gallery: ".pswp-gallery",
+            children: "a",
+            pswpModule: PhotoSwipe
+        });
+        lightbox.init();
+    </script>
+    <link rel="stylesheet" href="../../vendor/photoswipe/photoswipe.css" type="text/css">
+</head>
+
+<body>
+    <header class="page-header">
+        <h1>Andrew's Garden</h1>
+        <h2 style="font-style: italic">Plectranthus “Mona Lavender”</h2>
+        <nav>
+            <div>
+                <a href="../../index.html">Home</a>
+                <a href="../../articles.html">Articles</a>
+                <a href="../../projects.html">Projects</a>
+                <a href="../../training.html">Training</a>
+                <a class="page-header-selected" href="../../garden.html">Garden</a>
+                <a href="../../contact.html">Contact</a>
+                <a href="../../logbook.html">Logbook</a>
+            </div>
+            <div>
+                <a href="https://github.com/andrewlalis">GitHub</a>
+                <a href="https://www.linkedin.com/in/andrew-lalis/">LinkedIn</a>
+                <a href="https://www.youtube.com/channel/UC9X4mx6-ObPUB6-ud2IGAFQ">YouTube</a>
+            </div>
+        </nav>
+        <button id="themeToggleButton" class="jsonly">Change Color Theme</button>
+        <hr>
+    </header>
+
+    <main>
+        <article>
+            <h2>About Mona Lavender</h2>
+            <p>A hybrid of Plectranthus saccatus and Plectranthus hilliardiae, this is a broadleaf evergreen shrub in the mint family, which produces many small purple flowers.</p>
+            <p>
+                <a href="https://plants.ces.ncsu.edu/plants/plectranthus-mona-lavender/">
+                    https://plants.ces.ncsu.edu/plants/plectranthus-mona-lavender/
+                </a>
+            </p>
+        </article>
+        <article>
+            <h2 id="plants">Plants</h2>
+            <p>
+                Here's a detailed list of all plants I have of this species.
+            </p>
+            <div class="plant-card">
+    <section>
+        <h2>mona-lavender-001</h2>
+        <p class="gen">Generation F1</p>
+        <p>The mona lavender that’s on the right side of the tree.</p>
+        <p>Transplanted in February, 2024.</p>
+    </section>
+    <section>
+        <h3>Images</h3>
+        <div class="pswp-gallery">
+            <a href="../../images/garden/plants/mona-lavender-001/plectranthus_20240310_113255.jpg" data-pswp-width="1836" data-pswp-height="2576" target="_blank">
+    <img src="../../images/garden/plants/mona-lavender-001/plectranthus_20240310_113255.thumb.jpg" alt=""/>
+</a>
+
+        </div>
+    </section>
+</div>
+        </article>
+    </main>
+</body>

garden/species/psychotria-nervosa.html

@@ -0,0 +1,87 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>Andrew's Garden: Dwarf Shiny-Leaf Coffee</title>
+    <meta charset="utf-8">
+    <meta name="description" content="Information about Andrew's Garden">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    
+    <script src="../../scripts/themes.min.js"></script>
+    <noscript><style>.jsonly{display: none !important;}</style></noscript>
+    <link rel="stylesheet" href="../../styles/style.css" type="text/css">
+    <link rel="stylesheet" href="../../styles/garden.css" type="text/css">
+    <script src="../../scripts/sitestat.js?remote-url=sitestat.andrewlalis.com" async></script>
+
+    <script type="module">
+        import PhotoSwipeLightbox from "../../vendor/photoswipe/photoswipe-lightbox.esm.min.js";
+        import PhotoSwipe from "../../vendor/photoswipe/photoswipe.esm.min.js";
+        const lightbox = new PhotoSwipeLightbox({
+            gallery: ".pswp-gallery",
+            children: "a",
+            pswpModule: PhotoSwipe
+        });
+        lightbox.init();
+    </script>
+    <link rel="stylesheet" href="../../vendor/photoswipe/photoswipe.css" type="text/css">
+</head>
+
+<body>
+    <header class="page-header">
+        <h1>Andrew's Garden</h1>
+        <h2 style="font-style: italic">Psychotria nervosa</h2>
+        <nav>
+            <div>
+                <a href="../../index.html">Home</a>
+                <a href="../../articles.html">Articles</a>
+                <a href="../../projects.html">Projects</a>
+                <a href="../../training.html">Training</a>
+                <a class="page-header-selected" href="../../garden.html">Garden</a>
+                <a href="../../contact.html">Contact</a>
+                <a href="../../logbook.html">Logbook</a>
+            </div>
+            <div>
+                <a href="https://github.com/andrewlalis">GitHub</a>
+                <a href="https://www.linkedin.com/in/andrew-lalis/">LinkedIn</a>
+                <a href="https://www.youtube.com/channel/UC9X4mx6-ObPUB6-ud2IGAFQ">YouTube</a>
+            </div>
+        </nav>
+        <button id="themeToggleButton" class="jsonly">Change Color Theme</button>
+        <hr>
+    </header>
+
+    <main>
+        <article>
+            <h2>About Dwarf Shiny-Leaf Coffee</h2>
+            <p>A small shrub with shiny evergreen leaves that produces beans similar to coffee, but without any caffeine. Native to the southeastern United States.</p>
+            <p>
+                <a href="https://gardeningsolutions.ifas.ufl.edu/plants/trees-and-shrubs/shrubs/wild-coffee.html">
+                    https://gardeningsolutions.ifas.ufl.edu/plants/trees-and-shrubs/shrubs/wild-coffee.html
+                </a>
+            </p>
+        </article>
+        <article>
+            <h2 id="plants">Plants</h2>
+            <p>
+                Here's a detailed list of all plants I have of this species.
+            </p>
+            <div class="plant-card">
+    <section>
+        <h2>dwarf-coffee-001</h2>
+        <p class="gen">Generation F1</p>
+        <p></p>
+        <p>Transplanted on the 10th of February, 2024.</p>
+    </section>
+    <section>
+        <h3>Images</h3>
+        <div class="pswp-gallery">
+            <a href="../../images/garden/plants/dwarf-coffee-001/dwarf-coffee_20240310_113259.jpg" data-pswp-width="1836" data-pswp-height="2036" target="_blank">
+    <img src="../../images/garden/plants/dwarf-coffee-001/dwarf-coffee_20240310_113259.thumb.jpg" alt=""/>
+</a>
+
+        </div>
+    </section>
+</div>
+        </article>
+    </main>
+</body>

garden/species/ruellia-caroliniensis.html

@@ -0,0 +1,87 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>Andrew's Garden: Perennial Petunia</title>
+    <meta charset="utf-8">
+    <meta name="description" content="Information about Andrew's Garden">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    
+    <script src="../../scripts/themes.min.js"></script>
+    <noscript><style>.jsonly{display: none !important;}</style></noscript>
+    <link rel="stylesheet" href="../../styles/style.css" type="text/css">
+    <link rel="stylesheet" href="../../styles/garden.css" type="text/css">
+    <script src="../../scripts/sitestat.js?remote-url=sitestat.andrewlalis.com" async></script>
+
+    <script type="module">
+        import PhotoSwipeLightbox from "../../vendor/photoswipe/photoswipe-lightbox.esm.min.js";
+        import PhotoSwipe from "../../vendor/photoswipe/photoswipe.esm.min.js";
+        const lightbox = new PhotoSwipeLightbox({
+            gallery: ".pswp-gallery",
+            children: "a",
+            pswpModule: PhotoSwipe
+        });
+        lightbox.init();
+    </script>
+    <link rel="stylesheet" href="../../vendor/photoswipe/photoswipe.css" type="text/css">
+</head>
+
+<body>
+    <header class="page-header">
+        <h1>Andrew's Garden</h1>
+        <h2 style="font-style: italic">Ruellia caroliniensis</h2>
+        <nav>
+            <div>
+                <a href="../../index.html">Home</a>
+                <a href="../../articles.html">Articles</a>
+                <a href="../../projects.html">Projects</a>
+                <a href="../../training.html">Training</a>
+                <a class="page-header-selected" href="../../garden.html">Garden</a>
+                <a href="../../contact.html">Contact</a>
+                <a href="../../logbook.html">Logbook</a>
+            </div>
+            <div>
+                <a href="https://github.com/andrewlalis">GitHub</a>
+                <a href="https://www.linkedin.com/in/andrew-lalis/">LinkedIn</a>
+                <a href="https://www.youtube.com/channel/UC9X4mx6-ObPUB6-ud2IGAFQ">YouTube</a>
+            </div>
+        </nav>
+        <button id="themeToggleButton" class="jsonly">Change Color Theme</button>
+        <hr>
+    </header>
+
+    <main>
+        <article>
+            <h2>About Perennial Petunia</h2>
+            <p>A wild petunia with blue or violet flowers that's native to the southeastern United States.</p>
+            <p>
+                <a href="https://en.wikipedia.org/wiki/Ruellia_caroliniensis">
+                    https://en.wikipedia.org/wiki/Ruellia_caroliniensis
+                </a>
+            </p>
+        </article>
+        <article>
+            <h2 id="plants">Plants</h2>
+            <p>
+                Here's a detailed list of all plants I have of this species.
+            </p>
+            <div class="plant-card">
+    <section>
+        <h2>carolina-petunia-001</h2>
+        <p class="gen">Generation F1</p>
+        <p></p>
+        <p>Transplanted on the 10th of February, 2024.</p>
+    </section>
+    <section>
+        <h3>Images</h3>
+        <div class="pswp-gallery">
+            <a href="../../images/garden/plants/carolina-petunia-001/perennial-petunia_20240310_113346.jpg" data-pswp-width="1836" data-pswp-height="1914" target="_blank">
+    <img src="../../images/garden/plants/carolina-petunia-001/perennial-petunia_20240310_113346.thumb.jpg" alt=""/>
+</a>
+
+        </div>
+    </section>
+</div>
+        </article>
+    </main>
+</body>

garden/species/salvia-misella.html

@@ -0,0 +1,87 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>Andrew's Garden: Creeping Sage</title>
+    <meta charset="utf-8">
+    <meta name="description" content="Information about Andrew's Garden">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    
+    <script src="../../scripts/themes.min.js"></script>
+    <noscript><style>.jsonly{display: none !important;}</style></noscript>
+    <link rel="stylesheet" href="../../styles/style.css" type="text/css">
+    <link rel="stylesheet" href="../../styles/garden.css" type="text/css">
+    <script src="../../scripts/sitestat.js?remote-url=sitestat.andrewlalis.com" async></script>
+
+    <script type="module">
+        import PhotoSwipeLightbox from "../../vendor/photoswipe/photoswipe-lightbox.esm.min.js";
+        import PhotoSwipe from "../../vendor/photoswipe/photoswipe.esm.min.js";
+        const lightbox = new PhotoSwipeLightbox({
+            gallery: ".pswp-gallery",
+            children: "a",
+            pswpModule: PhotoSwipe
+        });
+        lightbox.init();
+    </script>
+    <link rel="stylesheet" href="../../vendor/photoswipe/photoswipe.css" type="text/css">
+</head>
+
+<body>
+    <header class="page-header">
+        <h1>Andrew's Garden</h1>
+        <h2 style="font-style: italic">Salvia misella</h2>
+        <nav>
+            <div>
+                <a href="../../index.html">Home</a>
+                <a href="../../articles.html">Articles</a>
+                <a href="../../projects.html">Projects</a>
+                <a href="../../training.html">Training</a>
+                <a class="page-header-selected" href="../../garden.html">Garden</a>
+                <a href="../../contact.html">Contact</a>
+                <a href="../../logbook.html">Logbook</a>
+            </div>
+            <div>
+                <a href="https://github.com/andrewlalis">GitHub</a>
+                <a href="https://www.linkedin.com/in/andrew-lalis/">LinkedIn</a>
+                <a href="https://www.youtube.com/channel/UC9X4mx6-ObPUB6-ud2IGAFQ">YouTube</a>
+            </div>
+        </nav>
+        <button id="themeToggleButton" class="jsonly">Change Color Theme</button>
+        <hr>
+    </header>
+
+    <main>
+        <article>
+            <h2>About Creeping Sage</h2>
+            <p>Also known as tropical sage, it is an annual herb growing throughout the tropical Americas.</p>
+            <p>
+                <a href="https://en.wikipedia.org/wiki/Salvia_misella">
+                    https://en.wikipedia.org/wiki/Salvia_misella
+                </a>
+            </p>
+        </article>
+        <article>
+            <h2 id="plants">Plants</h2>
+            <p>
+                Here's a detailed list of all plants I have of this species.
+            </p>
+            <div class="plant-card">
+    <section>
+        <h2>creeping-sage-001</h2>
+        <p class="gen">Generation F1</p>
+        <p></p>
+        <p>Transplanted on the 9th of March, 2024.</p>
+    </section>
+    <section>
+        <h3>Images</h3>
+        <div class="pswp-gallery">
+            <a href="../../images/garden/plants/creeping-sage-001/creeping-sage_20240310_113303.jpg" data-pswp-width="1836" data-pswp-height="1758" target="_blank">
+    <img src="../../images/garden/plants/creeping-sage-001/creeping-sage_20240310_113303.thumb.jpg" alt=""/>
+</a>
+
+        </div>
+    </section>
+</div>
+        </article>
+    </main>
+</body>

garden/species/tagetes-erecta.html

@@ -0,0 +1,87 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>Andrew's Garden: Marigold</title>
+    <meta charset="utf-8">
+    <meta name="description" content="Information about Andrew's Garden">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    
+    <script src="../../scripts/themes.min.js"></script>
+    <noscript><style>.jsonly{display: none !important;}</style></noscript>
+    <link rel="stylesheet" href="../../styles/style.css" type="text/css">
+    <link rel="stylesheet" href="../../styles/garden.css" type="text/css">
+    <script src="../../scripts/sitestat.js?remote-url=sitestat.andrewlalis.com" async></script>
+
+    <script type="module">
+        import PhotoSwipeLightbox from "../../vendor/photoswipe/photoswipe-lightbox.esm.min.js";
+        import PhotoSwipe from "../../vendor/photoswipe/photoswipe.esm.min.js";
+        const lightbox = new PhotoSwipeLightbox({
+            gallery: ".pswp-gallery",
+            children: "a",
+            pswpModule: PhotoSwipe
+        });
+        lightbox.init();
+    </script>
+    <link rel="stylesheet" href="../../vendor/photoswipe/photoswipe.css" type="text/css">
+</head>
+
+<body>
+    <header class="page-header">
+        <h1>Andrew's Garden</h1>
+        <h2 style="font-style: italic">Tagetes erecta</h2>
+        <nav>
+            <div>
+                <a href="../../index.html">Home</a>
+                <a href="../../articles.html">Articles</a>
+                <a href="../../projects.html">Projects</a>
+                <a href="../../training.html">Training</a>
+                <a class="page-header-selected" href="../../garden.html">Garden</a>
+                <a href="../../contact.html">Contact</a>
+                <a href="../../logbook.html">Logbook</a>
+            </div>
+            <div>
+                <a href="https://github.com/andrewlalis">GitHub</a>
+                <a href="https://www.linkedin.com/in/andrew-lalis/">LinkedIn</a>
+                <a href="https://www.youtube.com/channel/UC9X4mx6-ObPUB6-ud2IGAFQ">YouTube</a>
+            </div>
+        </nav>
+        <button id="themeToggleButton" class="jsonly">Change Color Theme</button>
+        <hr>
+    </header>
+
+    <main>
+        <article>
+            <h2>About Marigold</h2>
+            <p>A species of flowering plant native to the Americas that is widely used as an ornamental flower, and was originally called by its Nahuatl name, cempoalxóchitl.</p>
+            <p>
+                <a href="https://en.wikipedia.org/wiki/Tagetes_erecta">
+                    https://en.wikipedia.org/wiki/Tagetes_erecta
+                </a>
+            </p>
+        </article>
+        <article>
+            <h2 id="plants">Plants</h2>
+            <p>
+                Here's a detailed list of all plants I have of this species.
+            </p>
+            <div class="plant-card">
+    <section>
+        <h2>marigold-001</h2>
+        <p class="gen">Generation F1</p>
+        <p>The second marigold from the left, when viewing the garden from the front.</p>
+        <p>Planted from seed in February, 2024.</p>
+    </section>
+    <section>
+        <h3>Images</h3>
+        <div class="pswp-gallery">
+            <a href="../../images/garden/plants/marigold-001/marigold_20240310_113234.jpg" data-pswp-width="1148" data-pswp-height="1328" target="_blank">
+    <img src="../../images/garden/plants/marigold-001/marigold_20240310_113234.thumb.jpg" alt=""/>
+</a>
+
+        </div>
+    </section>
+</div>
+        </article>
+    </main>
+</body>

garden/species/teucrium-canadense.html

@@ -0,0 +1,87 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>Andrew's Garden: Wood Sage</title>
+    <meta charset="utf-8">
+    <meta name="description" content="Information about Andrew's Garden">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    
+    <script src="../../scripts/themes.min.js"></script>
+    <noscript><style>.jsonly{display: none !important;}</style></noscript>
+    <link rel="stylesheet" href="../../styles/style.css" type="text/css">
+    <link rel="stylesheet" href="../../styles/garden.css" type="text/css">
+    <script src="../../scripts/sitestat.js?remote-url=sitestat.andrewlalis.com" async></script>
+
+    <script type="module">
+        import PhotoSwipeLightbox from "../../vendor/photoswipe/photoswipe-lightbox.esm.min.js";
+        import PhotoSwipe from "../../vendor/photoswipe/photoswipe.esm.min.js";
+        const lightbox = new PhotoSwipeLightbox({
+            gallery: ".pswp-gallery",
+            children: "a",
+            pswpModule: PhotoSwipe
+        });
+        lightbox.init();
+    </script>
+    <link rel="stylesheet" href="../../vendor/photoswipe/photoswipe.css" type="text/css">
+</head>
+
+<body>
+    <header class="page-header">
+        <h1>Andrew's Garden</h1>
+        <h2 style="font-style: italic">Teucrium canadense</h2>
+        <nav>
+            <div>
+                <a href="../../index.html">Home</a>
+                <a href="../../articles.html">Articles</a>
+                <a href="../../projects.html">Projects</a>
+                <a href="../../training.html">Training</a>
+                <a class="page-header-selected" href="../../garden.html">Garden</a>
+                <a href="../../contact.html">Contact</a>
+                <a href="../../logbook.html">Logbook</a>
+            </div>
+            <div>
+                <a href="https://github.com/andrewlalis">GitHub</a>
+                <a href="https://www.linkedin.com/in/andrew-lalis/">LinkedIn</a>
+                <a href="https://www.youtube.com/channel/UC9X4mx6-ObPUB6-ud2IGAFQ">YouTube</a>
+            </div>
+        </nav>
+        <button id="themeToggleButton" class="jsonly">Change Color Theme</button>
+        <hr>
+    </header>
+
+    <main>
+        <article>
+            <h2>About Wood Sage</h2>
+            <p>A perennial herb native to North America, growing in moist grasslands, forest edges, marshes, and on roadsides.</p>
+            <p>
+                <a href="https://en.wikipedia.org/wiki/Teucrium_canadense">
+                    https://en.wikipedia.org/wiki/Teucrium_canadense
+                </a>
+            </p>
+        </article>
+        <article>
+            <h2 id="plants">Plants</h2>
+            <p>
+                Here's a detailed list of all plants I have of this species.
+            </p>
+            <div class="plant-card">
+    <section>
+        <h2>wood-sage-001</h2>
+        <p class="gen">Generation F1</p>
+        <p></p>
+        <p>Transplanted on the 9th of March, 2024.</p>
+    </section>
+    <section>
+        <h3>Images</h3>
+        <div class="pswp-gallery">
+            <a href="../../images/garden/plants/wood-sage-001/woody-sage_20240310_113339.jpg" data-pswp-width="1836" data-pswp-height="2695" target="_blank">
+    <img src="../../images/garden/plants/wood-sage-001/woody-sage_20240310_113339.thumb.jpg" alt=""/>
+</a>
+
+        </div>
+    </section>
+</div>
+        </article>
+    </main>
+</body>

garden/species/thymus-vulgaris.html

@@ -0,0 +1,87 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>Andrew's Garden: English Thyme</title>
+    <meta charset="utf-8">
+    <meta name="description" content="Information about Andrew's Garden">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    
+    <script src="../../scripts/themes.min.js"></script>
+    <noscript><style>.jsonly{display: none !important;}</style></noscript>
+    <link rel="stylesheet" href="../../styles/style.css" type="text/css">
+    <link rel="stylesheet" href="../../styles/garden.css" type="text/css">
+    <script src="../../scripts/sitestat.js?remote-url=sitestat.andrewlalis.com" async></script>
+
+    <script type="module">
+        import PhotoSwipeLightbox from "../../vendor/photoswipe/photoswipe-lightbox.esm.min.js";
+        import PhotoSwipe from "../../vendor/photoswipe/photoswipe.esm.min.js";
+        const lightbox = new PhotoSwipeLightbox({
+            gallery: ".pswp-gallery",
+            children: "a",
+            pswpModule: PhotoSwipe
+        });
+        lightbox.init();
+    </script>
+    <link rel="stylesheet" href="../../vendor/photoswipe/photoswipe.css" type="text/css">
+</head>
+
+<body>
+    <header class="page-header">
+        <h1>Andrew's Garden</h1>
+        <h2 style="font-style: italic">Thymus vulgaris</h2>
+        <nav>
+            <div>
+                <a href="../../index.html">Home</a>
+                <a href="../../articles.html">Articles</a>
+                <a href="../../projects.html">Projects</a>
+                <a href="../../training.html">Training</a>
+                <a class="page-header-selected" href="../../garden.html">Garden</a>
+                <a href="../../contact.html">Contact</a>
+                <a href="../../logbook.html">Logbook</a>
+            </div>
+            <div>
+                <a href="https://github.com/andrewlalis">GitHub</a>
+                <a href="https://www.linkedin.com/in/andrew-lalis/">LinkedIn</a>
+                <a href="https://www.youtube.com/channel/UC9X4mx6-ObPUB6-ud2IGAFQ">YouTube</a>
+            </div>
+        </nav>
+        <button id="themeToggleButton" class="jsonly">Change Color Theme</button>
+        <hr>
+    </header>
+
+    <main>
+        <article>
+            <h2>About English Thyme</h2>
+            <p>A flowering plant in the mint family, native to southern Europe, that's commonly used as an herb.</p>
+            <p>
+                <a href="https://en.wikipedia.org/wiki/Thymus_vulgaris">
+                    https://en.wikipedia.org/wiki/Thymus_vulgaris
+                </a>
+            </p>
+        </article>
+        <article>
+            <h2 id="plants">Plants</h2>
+            <p>
+                Here's a detailed list of all plants I have of this species.
+            </p>
+            <div class="plant-card">
+    <section>
+        <h2>thyme-001</h2>
+        <p class="gen">Generation F1</p>
+        <p></p>
+        <p>Planted from seed in March, 2024.</p>
+    </section>
+    <section>
+        <h3>Images</h3>
+        <div class="pswp-gallery">
+            <a href="../../images/garden/plants/thyme-001/thyme_20240310_113210.jpg" data-pswp-width="1836" data-pswp-height="2282" target="_blank">
+    <img src="../../images/garden/plants/thyme-001/thyme_20240310_113210.thumb.jpg" alt=""/>
+</a>
+
+        </div>
+    </section>
+</div>
+        </article>
+    </main>
+</body>

garden/species/trandescantia-zebrina.html

@@ -0,0 +1,87 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>Andrew's Garden: Inchplant</title>
+    <meta charset="utf-8">
+    <meta name="description" content="Information about Andrew's Garden">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    
+    <script src="../../scripts/themes.min.js"></script>
+    <noscript><style>.jsonly{display: none !important;}</style></noscript>
+    <link rel="stylesheet" href="../../styles/style.css" type="text/css">
+    <link rel="stylesheet" href="../../styles/garden.css" type="text/css">
+    <script src="../../scripts/sitestat.js?remote-url=sitestat.andrewlalis.com" async></script>
+
+    <script type="module">
+        import PhotoSwipeLightbox from "../../vendor/photoswipe/photoswipe-lightbox.esm.min.js";
+        import PhotoSwipe from "../../vendor/photoswipe/photoswipe.esm.min.js";
+        const lightbox = new PhotoSwipeLightbox({
+            gallery: ".pswp-gallery",
+            children: "a",
+            pswpModule: PhotoSwipe
+        });
+        lightbox.init();
+    </script>
+    <link rel="stylesheet" href="../../vendor/photoswipe/photoswipe.css" type="text/css">
+</head>
+
+<body>
+    <header class="page-header">
+        <h1>Andrew's Garden</h1>
+        <h2 style="font-style: italic">Trandescantia zebrina</h2>
+        <nav>
+            <div>
+                <a href="../../index.html">Home</a>
+                <a href="../../articles.html">Articles</a>
+                <a href="../../projects.html">Projects</a>
+                <a href="../../training.html">Training</a>
+                <a class="page-header-selected" href="../../garden.html">Garden</a>
+                <a href="../../contact.html">Contact</a>
+                <a href="../../logbook.html">Logbook</a>
+            </div>
+            <div>
+                <a href="https://github.com/andrewlalis">GitHub</a>
+                <a href="https://www.linkedin.com/in/andrew-lalis/">LinkedIn</a>
+                <a href="https://www.youtube.com/channel/UC9X4mx6-ObPUB6-ud2IGAFQ">YouTube</a>
+            </div>
+        </nav>
+        <button id="themeToggleButton" class="jsonly">Change Color Theme</button>
+        <hr>
+    </header>
+
+    <main>
+        <article>
+            <h2>About Inchplant</h2>
+            <p>A species of creeping vine plant that forms a dense groundcover in shaded areas. It's native to Mexico, Central America, and Colombia.</p>
+            <p>
+                <a href="https://en.wikipedia.org/wiki/Tradescantia_zebrina">
+                    https://en.wikipedia.org/wiki/Tradescantia_zebrina
+                </a>
+            </p>
+        </article>
+        <article>
+            <h2 id="plants">Plants</h2>
+            <p>
+                Here's a detailed list of all plants I have of this species.
+            </p>
+            <div class="plant-card">
+    <section>
+        <h2>inchplant-001</h2>
+        <p class="gen">Generation F1</p>
+        <p></p>
+        <p>Transplanted on the 8th of March, 2024.</p>
+    </section>
+    <section>
+        <h3>Images</h3>
+        <div class="pswp-gallery">
+            <a href="../../images/garden/plants/inchplant-001/inchplant_20240310_113409.jpg" data-pswp-width="1599" data-pswp-height="1566" target="_blank">
+    <img src="../../images/garden/plants/inchplant-001/inchplant_20240310_113409.thumb.jpg" alt=""/>
+</a>
+
+        </div>
+    </section>
+</div>
+        </article>
+    </main>
+</body>