@ca-plant-list/ca-plant-list 0.4.24 → 0.4.27

package/lib/{pagerenderer.js → web/renderAllPages.js}

@@ -1,10 +1,11 @@
-import { PageTaxon } from "./web/pagetaxon.js";
-import { RarePlants } from "./rareplants.js";
-import { BasePageRenderer } from "./basepagerenderer.js";
-import { GenericPage } from "./genericpage.js";
-import { Files } from "./files.js";
-import { HTML } from "./html.js";
-import { HTMLTaxon, TAXA_LIST_COLS } from "./htmltaxon.js";
+import { RarePlants } from "../rareplants.js";
+import { BasePageRenderer } from "../basepagerenderer.js";
+import { Files } from "../files.js";
+import { HTML } from "../html.js";
+import { TAXA_LIST_COLS } from "../htmltaxon.js";
+import { PageTaxonList } from "./pageTaxonList.js";
+import { HTMLFragments } from "../utils/htmlFragments.js";
+import { PageTaxon } from "./pageTaxon.js";
 
 const ENDANGERED_COLS = [
     TAXA_LIST_COLS.SPECIES,
@@ -18,33 +19,33 @@ const RPI_COLUMNS = [
     TAXA_LIST_COLS.CNPS_RANK,
 ];
 
-class PageRenderer extends BasePageRenderer {
+export class PageRenderer extends BasePageRenderer {
     /**
-     * @param {string} outputDir
-     * @param {import('./config.js').Config} config
-     * @param {import("./types.js").Taxa} taxa
+     * @param {import("../types.js").SiteGenerator} siteGenerator
+     * @param {import('../config.js').Config} config
+     * @param {import("../types.js").Taxa} taxa
      */
-    static render(outputDir, config, taxa) {
-        super.renderBasePages(outputDir, taxa);
+    static renderAll(siteGenerator, config, taxa) {
+        super.renderBasePages(siteGenerator, taxa);
 
-        this.renderLists(outputDir, config, taxa);
+        this.renderLists(siteGenerator, config, taxa);
 
         const taxonList = taxa.getTaxonList();
         for (const taxon of taxonList) {
-            new PageTaxon(outputDir, config, taxon).render();
+            new PageTaxon(siteGenerator, config, taxon).render();
         }
     }
 
     /**
-     * @param {string} outputDir
-     * @param {import('./config.js').Config} config
-     * @param {import("./types.js").Taxa} taxa
+     * @param {import("../types.js").SiteGenerator} siteGenerator
+     * @param {import('../config.js').Config} config
+     * @param {import("../types.js").Taxa} taxa
      */
-    static renderLists(outputDir, config, taxa) {
+    static renderLists(siteGenerator, config, taxa) {
         /**
          * @param {ListInfo[]} listInfo
          * @param {Object<string,string>} attributes
-         * @param {import("./types.js").TaxaColDef[]} [columns]
+         * @param {import("../types.js").TaxaColDef[]} [columns]
          * @returns {string}
          */
         function getListArray(listInfo, attributes = {}, columns) {
@@ -75,10 +76,11 @@ class PageRenderer extends BasePageRenderer {
                 );
 
                 const cols = columns ? columns : list.columns;
-                new PageTaxonList(outputDir, list.name, list.filename).render(
-                    listTaxa,
-                    cols,
-                );
+                new PageTaxonList(
+                    siteGenerator,
+                    list.name,
+                    list.filename,
+                ).render(listTaxa, cols);
 
                 // Check for sublists.
                 const subListHTML = list.listInfo
@@ -117,7 +119,9 @@ class PageRenderer extends BasePageRenderer {
             return html;
         }
 
-        /** @typedef {{name:string,filename:string,include:function(import("./types.js").Taxon):boolean,columns?:import("./types.js").TaxaColDef[],listInfo?:ListInfo[]}} ListInfo */
+        const outputDir = siteGenerator.getBaseDir();
+
+        /** @typedef {{name:string,filename:string,include:function(import("../types.js").Taxon):boolean,columns?:import("../types.js").TaxaColDef[],listInfo?:ListInfo[]}} ListInfo */
         /** @type {{title:string,listInfo:ListInfo[]}[]} */
         const sections = [
             {
@@ -191,7 +195,10 @@ class PageRenderer extends BasePageRenderer {
             },
         ];
 
-        let html = '<div class="wrapper">';
+        let html =
+            HTMLFragments.getMarkdownSection("./data/intros/index_lists.md") +
+            '<div class="wrapper">';
+
         for (const section of sections) {
             const listHTML = getListArray(section.listInfo);
 
@@ -208,59 +215,10 @@ class PageRenderer extends BasePageRenderer {
 
         html += "</div>";
 
-        // Write lists to includes directory so it can be inserted into pages.
-        Files.write(outputDir + "/_includes/plantlists.html", html);
-    }
-}
-
-class PageTaxonList extends GenericPage {
-    /**
-     * @param {string} outputDir
-     * @param {string} title
-     * @param {string} baseName
-     */
-    constructor(outputDir, title, baseName) {
-        super(outputDir, title, baseName);
-    }
-
-    /**
-     *
-     * @param {import("./types.js").Taxon[]} taxa
-     * @param {import("./types.js").TaxaColDef[]|undefined} columns
-     */
-    render(taxa, columns) {
-        let html = this.getDefaultIntro();
-
-        html += '<div class="wrapper">';
-
-        html += '<div class="section">';
-        html += HTMLTaxon.getTaxaTable(taxa, columns);
-        html += "</div>";
-
-        html += '<div class="section nobullet">';
-        html += HTML.textElement("h2", "Download");
-        html += "<ul>";
-        html +=
-            "<li>" +
-            HTML.getLink(
-                "./calflora_" + this.getBaseFileName() + ".txt",
-                "Calflora List",
-            ) +
-            "</li>";
-        html +=
-            "<li>" +
-            HTML.getLink(
-                "./inat_" + this.getBaseFileName() + ".txt",
-                "iNaturalist List",
-            ) +
-            "</li>";
-        html += "</ul>";
-        html += "</div>";
-
-        html += "</div>";
-
-        this.writeFile(html);
+        siteGenerator.writeTemplate(
+            html,
+            { title: "Plant lists" },
+            "index_lists.html",
+        );
     }
 }
-
-export { PageRenderer };

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@ca-plant-list/ca-plant-list",
-    "version": "0.4.24",
-    "description": "Tools to create Jekyll files for a website listing plants in an area of California.",
+    "version": "0.4.27",
+    "description": "Tools to create files for a website listing plants in an area of California.",
     "license": "MIT",
     "repository": {
         "type": "git",
@@ -12,9 +12,10 @@
     "files": [
         "data",
         "ebook",
-        "jekyll",
+        "generators",
         "lib",
-        "scripts"
+        "scripts",
+        "static"
     ],
     "exports": {
         ".": "./lib/index.js"
@@ -22,10 +23,10 @@
     "types": "./lib/index.d.ts",
     "scripts": {
         "check": "npm run eslint && npm run tsc && npm run jest",
-        "eslint": "npx eslint",
+        "eslint": "eslint",
         "jest": "node --experimental-vm-modules node_modules/jest/bin/jest.js tests",
-        "prettier": "npx prettier -l .",
-        "tsc": "npx tsc"
+        "prettier": "prettier -l .",
+        "tsc": "tsc"
     },
     "bin": {
         "ca-plant-list": "scripts/build-site.js",
@@ -35,10 +36,11 @@
         "inatobsphotos": "scripts/inatobsphotos.js"
     },
     "dependencies": {
+        "@11ty/eleventy": "^3.0.0",
         "@htmltools/scrape": "^0.1.1",
         "archiver": "^5.3.1",
         "cli-progress": "^3.12.0",
-        "commander": "^12.1.0",
+        "commander": "^13.1.0",
         "csv-parse": "^5.6.0",
         "csv-stringify": "^6.5.2",
         "exceljs": "^4.4.0",
@@ -55,9 +57,9 @@
         "@types/markdown-it": "^14.1.2",
         "@types/node": "^22.10.7",
         "@types/unzipper": "^0.10.9",
-        "eslint": "^9.18.0",
+        "eslint": "^9.20.1",
         "jest": "^29.7.0",
-        "prettier": "^3.4.2",
+        "prettier": "^3.5.1",
         "puppeteer": "^24.1.1",
         "typescript": "^5.7.3"
     }

package/scripts/build-site.js

@@ -1,76 +1,44 @@
 #!/usr/bin/env node
 
-import * as child_process from "node:child_process";
-import * as path from "node:path";
 import { Config } from "../lib/config.js";
-import { PageRenderer } from "../lib/pagerenderer.js";
+import { PageRenderer } from "../lib/web/renderAllPages.js";
 import { Files } from "../lib/files.js";
 import { Program } from "../lib/program.js";
 import { Taxa } from "../lib/taxonomy/taxa.js";
 import { ErrorLog } from "../lib/errorlog.js";
 
-class JekyllRenderer {
-    #srcDir = "./output";
-    #destDir = "./public";
-
-    async renderPages() {
-        /**
-         * @param {string[]} configFiles
-         * @param {string} dir
-         * @param {string} name
-         */
-        function addConfigFile(configFiles, dir, name) {
-            const fullPath = path.join(dir, name);
-            if (Files.exists(fullPath)) {
-                configFiles.push(fullPath);
-            }
-        }
-
-        // Remove existing files.
-        Files.rmDir(this.#destDir);
-
-        const options = [
-            "--source",
-            this.#srcDir,
-            "--destination",
-            this.#destDir,
-        ];
-
-        // Find out what config files are available.
-        /** @type {string[]} */
-        const configFiles = [];
-        addConfigFile(configFiles, this.#srcDir, "_config.yml");
-        addConfigFile(configFiles, this.#srcDir, "_config-local.yml");
-        addConfigFile(configFiles, ".", "_config-dev.yml");
-        options.push("--config", `"${configFiles.join()}"`);
-
-        const result = child_process.execSync(
-            "bundle exec jekyll build " + options.join(" "),
-        );
-        console.log(result.toString());
-    }
-}
-
 /**
- * @param {import("commander").OptionValues} options
+ * @param {{outputdir:string,datadir:string,webdir:string,showFlowerErrors:boolean,render:boolean}} options
  */
 async function build(options) {
-    Files.rmDir(options.outputdir);
-    const errorLog = new ErrorLog(options.outputdir + "/errors.tsv");
+    console.info("generating templates");
+    const outputDir = options.outputdir;
+    Files.rmDir(outputDir);
+    const errorLog = new ErrorLog(outputDir + "/errors.tsv");
     const taxa = new Taxa(
         Program.getIncludeList(options.datadir),
         errorLog,
         options.showFlowerErrors,
     );
-    PageRenderer.render(options.outputdir, new Config(options.datadir), taxa);
+    const config = new Config(options.datadir);
+    const generator = PageRenderer.newSiteGenerator(config, outputDir);
+    PageRenderer.renderAll(generator, config, taxa);
     errorLog.write();
 
-    console.log("generating site");
-    const r = new JekyllRenderer();
-    await r.renderPages();
+    if (options.render) {
+        console.info("generating site");
+        Files.rmDir(options.webdir);
+        await generator.generate(options.webdir);
+    }
 }
 
 const program = Program.getProgram();
+program.option(
+    "--no-render",
+    "Do not render full HTML output (only build the templates)",
+);
+program.option("-w, --webdir", "Directory for fully processed files", "public");
+
 program.action(build);
 
 await program.parseAsync();

package/static/assets/js/nameSearchData.js

@@ -0,0 +1,2 @@
+/** @type {import("../../../lib/types.js").NameSearchData[]} */
+export const NAMES = [];

package/static/assets/js/name_search.js

@@ -0,0 +1,203 @@
+import { NAMES } from "./nameSearchData.js";
+import { Utils } from "./utils.js";
+
+/**
+ * @typedef {{raw:import("../../../lib/types.js").NameSearchData,searchSci:string,searchCommon?:string,synonyms?:string[]}} SearchData
+ */
+
+const MIN_LEN = 2;
+const MAX_RESULTS = 50;
+
+class Search {
+    /** @type {number|undefined} */
+    static #debounceTimer;
+    /** @type {SearchData[]} */
+    static #searchData;
+
+    /**
+     * @param {number} [timeout]
+     */
+    static #debounce(timeout = 500) {
+        clearTimeout(this.#debounceTimer);
+        this.#debounceTimer = window.setTimeout(Search.#doSearch, timeout);
+    }
+
+    static #doSearch() {
+        /**
+         * @param {SearchData} taxon
+         * @param {string} value
+         */
+        function matchTaxon(taxon, value) {
+            /**
+             * @param {string[]|undefined} syns
+             * @param {string} value
+             * @returns {number[]}
+             */
+            function matchSynonyms(syns, value) {
+                const matchedIndexes = [];
+                if (syns) {
+                    for (let index = 0; index < syns.length; index++) {
+                        if (syns[index].includes(value)) {
+                            matchedIndexes.push(index);
+                        }
+                    }
+                }
+                return matchedIndexes;
+            }
+
+            const name = taxon.searchSci;
+            const cn = taxon.searchCommon;
+            const syns = matchSynonyms(taxon.synonyms, value);
+            if (syns.length > 0) {
+                // Include any matching synonyms.
+                for (const index of syns) {
+                    matches.push([
+                        taxon.raw.t,
+                        taxon.raw.c,
+                        taxon.raw.s ? taxon.raw.s[index] : undefined,
+                    ]);
+                }
+            } else {
+                // No synonyms match; see if the scientific or common names match.
+                const namesMatch =
+                    name.includes(value) || (cn && cn.includes(value));
+                if (namesMatch) {
+                    matches.push([taxon.raw.t, taxon.raw.c]);
+                }
+            }
+        }
+
+        Search.#debounceTimer = undefined;
+
+        const input = Utils.getElement("name");
+        if (!(input instanceof HTMLInputElement)) {
+            throw new Error();
+        }
+        const value = Search.#normalizeName(input.value);
+
+        /**
+         * @type {([string,string|undefined]|[string,string|undefined,string|undefined])[]}
+         */
+        const matches = [];
+        const shouldSearch = value.length >= MIN_LEN;
+
+        if (shouldSearch) {
+            // If the search data is not done generating, try again later.
+            if (!Search.#searchData) {
+                this.#debounce();
+            }
+
+            for (const taxon of Search.#searchData) {
+                matchTaxon(taxon, value);
+            }
+        }
+
+        const eBody = document.createElement("tbody");
+        if (matches.length <= MAX_RESULTS) {
+            for (const match of matches) {
+                const tr = document.createElement("tr");
+
+                // Scientific name.
+                const name = match[0];
+                const syn = match[2];
+                const td1 = document.createElement("td");
+                const link = Utils.domTaxonLink(name);
+                td1.appendChild(link);
+                if (syn) {
+                    td1.appendChild(document.createTextNode(" (" + syn + ")"));
+                }
+                tr.appendChild(td1);
+
+                const cn = match[1];
+                const td2 = document.createElement("td");
+                if (cn) {
+                    td2.textContent = cn;
+                }
+                tr.appendChild(td2);
+
+                eBody.appendChild(tr);
+            }
+        }
+
+        // Delete current message
+        const eMessage = Utils.getElement("message");
+        if (eMessage.firstChild) {
+            eMessage.removeChild(eMessage.firstChild);
+        }
+        if (shouldSearch) {
+            if (matches.length === 0) {
+                eMessage.textContent = "Nothing found.";
+            }
+            if (matches.length > MAX_RESULTS) {
+                eMessage.textContent = "Too many results.";
+            }
+        }
+
+        // Delete current results
+        const eTable = Utils.getElement("results");
+        if (eTable.firstChild) {
+            eTable.removeChild(eTable.firstChild);
+        }
+
+        eTable.appendChild(eBody);
+    }
+
+    static async generateSearchData() {
+        /** @type {SearchData[]} */
+        const searchData = [];
+
+        /** @type {import("../../../lib/types.js").NameSearchData[]} */
+        const names = NAMES;
+
+        for (const taxon of names) {
+            /** @type {SearchData} */
+            const taxonData = {
+                raw: taxon,
+                searchSci: this.#normalizeName(taxon.t),
+            };
+            if (taxon.c) {
+                taxonData.searchCommon = taxon.c.toLowerCase();
+            }
+            if (taxon.s) {
+                const syns = [];
+                for (const syn of taxon.s) {
+                    syns.push(this.#normalizeName(syn));
+                }
+                taxonData.synonyms = syns;
+            }
+            searchData.push(taxonData);
+        }
+        this.#searchData = searchData;
+    }
+
+    static #handleChange() {
+        this.#debounce();
+    }
+
+    static #handleSubmit() {
+        this.#debounce(0);
+    }
+
+    static init() {
+        this.generateSearchData();
+        const eName = Utils.getElement("name");
+        eName.focus();
+        eName.oninput = () => {
+            return this.#handleChange();
+        };
+        Utils.getElement("search_form").onsubmit = () => {
+            this.#handleSubmit();
+            return false;
+        };
+    }
+
+    /**
+     * @param {string} name
+     * @returns {string}
+     */
+    static #normalizeName(name) {
+        return name.toLowerCase().replace(/ (subsp|var)\./, "");
+    }
+}
+
+Search.init();

package/static/assets/js/ui.js

@@ -0,0 +1,11 @@
+class UI {
+    static init() {
+        const tooltips = document.querySelectorAll("span[title]");
+        [...tooltips].map(
+            // @ts-ignore
+            (tooltipTriggerEl) => new bootstrap.Tooltip(tooltipTriggerEl),
+        );
+    }
+}
+
+UI.init();

package/static/assets/js/utils.js

@@ -0,0 +1,56 @@
+export class Utils {
+    /**
+     * @param {string} name
+     * @param {Object<string,string>} attributes
+     * @param {string} [content]
+     * @returns {Element}
+     */
+    static domElement(name, attributes = {}, content) {
+        const e = document.createElement(name);
+        for (const [k, v] of Object.entries(attributes)) {
+            e.setAttribute(k, v);
+        }
+        if (content) {
+            e.textContent = content;
+        }
+        return e;
+    }
+
+    /**
+     * @param {string} href
+     * @param {string} text
+     * @param {Object<string,string>} attributes
+     * @returns {Element}
+     */
+    static domLink(href, text, attributes = {}) {
+        const e = this.domElement(
+            "a",
+            Object.assign({ href: href }, attributes),
+        );
+        e.textContent = text;
+        return e;
+    }
+
+    /**
+     * @param {string} name
+     * @returns {Element}
+     */
+    static domTaxonLink(name) {
+        return this.domLink(
+            "./" + name.replaceAll(".", "").replaceAll(" ", "-") + ".html",
+            name,
+        );
+    }
+
+    /**
+     * @param {string} id
+     * @returns {HTMLElement}
+     */
+    static getElement(id) {
+        const e = document.getElementById(id);
+        if (e === null) {
+            throw new Error();
+        }
+        return e;
+    }
+}

package/static/name_search.html

@@ -0,0 +1,15 @@
+---
+title: Name Search
+js: name_search.js
+---
+
+<form id="search_form">
+    <input type="text" id="name" />
+    <label for="name"
+        >Search for scientific name, common name, or synonym.</label
+    >
+</form>
+
+<div class="section" id="message"></div>
+
+<table id="results"></table>