@ca-plant-list/ca-plant-list 0.1.5 → 0.1.6

package/jekyll/assets/css/main.css

@@ -61,6 +61,13 @@ span.rare::before {
     font-weight: 600;
 }
 
+div.grid {
+    display: grid;
+    grid-auto-flow: row;
+    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
+    column-gap: 2rem;
+}
+
 div.wrapper {
     display: flex;
     flex-wrap: wrap;
@@ -82,6 +89,8 @@ div.section ul {
 
 div.section li {
     display: block;
+    margin-left: 1rem;
+    text-indent: -1rem;
 }
 
 div.section ul.indent {

package/jekyll/assets/js/name_search.js

@@ -6,9 +6,9 @@ class Search {
     static #debounceTimer;
     static #searchData;
 
-    static #debounce( func ) {
+    static #debounce( timeout = 500 ) {
         clearTimeout( this.#debounceTimer );
-        this.#debounceTimer = setTimeout( func, 500 );
+        this.#debounceTimer = setTimeout( Search.#doSearch, timeout );
     }
 
     static #doSearch() {
@@ -141,7 +141,11 @@ class Search {
     }
 
     static #handleChange() {
-        this.#debounce( Search.#doSearch );
+        this.#debounce();
+    }
+
+    static #handleSubmit() {
+        this.#debounce( 0 );
     }
 
     static init() {
@@ -149,6 +153,7 @@ class Search {
         const eName = document.getElementById( "name" );
         eName.focus();
         eName.oninput = ( ev ) => { return this.#handleChange( ev ); };
+        document.getElementById( "search_form" ).onsubmit = () => { this.#handleSubmit(); return false; };
     }
 
 }

package/jekyll/name_search.html

@@ -8,7 +8,7 @@ js: name_search.js
     const NAMES = {% include names.json%};
 </script>
 
-<form>
+<form id="search_form">
     <input type="text" id="name"><label for="name">Search for scientific name, common name, or synonym</label>
 </form>
 

package/lib/basepagerenderer.js

@@ -1,17 +1,20 @@
 import * as fs from "node:fs";
 import { Config } from "./config.js";
+import { Families } from "./families.js";
 
 class BasePageRenderer {
 
     static render( outputDir, Taxa ) {
 
         // Copy static files
-        fs.rmSync( outputDir, { force: true, recursive: true, maxRetries: 2, retryDelay: 300 } );
+        fs.rmSync( outputDir, { force: true, recursive: true, maxRetries: 2, retryDelay: 400 } );
         // First copy default Jekyll files from package.
         fs.cpSync( Config.getPackageDir() + "/jekyll", outputDir, { recursive: true } );
         // Then copy Jekyll files from current dir (which may override default files).
         fs.cpSync( "jekyll", outputDir, { recursive: true } );
 
+        Families.renderPages( outputDir );
+
         this.renderTools( outputDir, Taxa );
 
     }

package/lib/families.js

@@ -1,6 +1,6 @@
 import * as fs from "node:fs";
 import { HTMLPage } from "./htmlpage.js";
-import { HTML, HTML_OPTIONS } from "./html.js";
+import { HTML } from "./html.js";
 import { Jepson } from "./jepson.js";
 import { Taxa } from "./taxa.js";
 
@@ -46,7 +46,7 @@ class PageFamilyList extends HTMLPage {
 
         let html = this.getFrontMatter( title );
 
-        html += HTML.getElement( "h1", title );
+        html += HTML.textElement( "h1", title );
 
         html += "<ul>";
         for ( const family of this.#families ) {
@@ -75,13 +75,12 @@ class PageFamily extends HTMLPage {
 
         let html = this.getFrontMatter( this.#family.getName() );
 
-        html += HTML.getElement( "h1", this.#family.getName() );
+        html += HTML.textElement( "h1", this.#family.getName() );
 
-        html += HTML.getElement(
+        html += HTML.wrap(
             "div",
             Jepson.getEFloraLink( this.#family.getJepsonID() ),
-            { class: "section" },
-            HTML_OPTIONS.NO_ESCAPE
+            { class: "section" }
         );
 
         html += Taxa.getHTMLTable( this.#family.getTaxa() );

package/lib/html.js

@@ -1,3 +1,6 @@
+/**
+ * @deprecated
+ */
 const HTML_OPTIONS = {
     OPEN_NEW: 1,
     NO_ESCAPE: 2,
@@ -17,6 +20,9 @@ class HTML {
         return text.replaceAll( "&", "&amp;" ).replaceAll( "<", "&lt;" ).replaceAll( ">", "&gt;" );
     }
 
+    /**
+     * @deprecated
+     */
     static getElement( elName, text, attributes = {}, options = 0 ) {
         let html = "<" + elName;
         html += this.renderAttributes( attributes );
@@ -28,6 +34,16 @@ class HTML {
 
     }
 
+    static #getElement( elName, text, attributes, escape ) {
+        let html = "<" + elName;
+        html += this.renderAttributes( attributes );
+        if ( escape ) {
+            text = this.escapeText( text );
+        }
+        html += ">" + text + "</" + elName + ">";
+        return html;
+    }
+
     static getLink( href, linkText, attributes = {}, options = 0 ) {
         let html = "<a";
         if ( href !== undefined ) {
@@ -52,6 +68,14 @@ class HTML {
         return html;
     }
 
+    static textElement( elName, text, attributes = {} ) {
+        return this.#getElement( elName, text, attributes, true );
+    }
+
+    static wrap( elName, text, attributes = {} ) {
+        return this.#getElement( elName, text, attributes, false );
+    }
+
 }
 
 export { HTML, HTML_OPTIONS };

package/lib/pagerenderer.js

@@ -1,5 +1,4 @@
 import * as fs from "node:fs";
-import { Families } from "./families.js";
 import { HTML, HTML_OPTIONS } from "./html.js";
 import { Taxa } from "./taxa.js";
 import { HTMLPage } from "./htmlpage.js";
@@ -16,8 +15,6 @@ class PageRenderer extends BasePageRenderer {
 
         this.renderLists( outputDir );
 
-        Families.renderPages( outputDir );
-
         const taxa = Taxa.getTaxa();
         for ( const taxon of taxa ) {
             new PageTaxon( taxon ).render( outputDir );

package/lib/pagetaxon.js

@@ -151,7 +151,7 @@ class PageTaxon extends HTMLPage {
             );
         }
 
-        html += "<div class=\"wrapper\">";
+        html += "<div class=\"grid\">";
         html += this.#getListSectionHTML( this.#getInfoLinks(), "Information", "info" );
         html += this.#getListSectionHTML( this.#getObsLinks(), "Observations", "obs" );
         html += this.#getListSectionHTML( this.#getRelatedTaxaLinks(), "Related Species", "rel-taxa" );

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@ca-plant-list/ca-plant-list",
-    "version": "0.1.5",
+    "version": "0.1.6",
     "description": "Tools to create Jekyll files for a website listing plants in an area of California.",
     "license": "MIT",
     "repository": {