@ca-plant-list/ca-plant-list 0.2.18 → 0.3.0

package/lib/web/glossarypages.js

@@ -1,49 +1,54 @@
 import { Files, HTML } from "@ca-plant-list/ca-plant-list";
 import { Glossary } from "../plants/glossary.js";
-import { Jekyll } from "../jekyll.js";
+import { Markdown } from "../markdown.js";
+
+const ENTRY_DIR = "g";
 
 class GlossaryPages {
 
-    #outputDir;
-    #entryDir;
+    #siteGenerator;
     #glossary;
 
-    constructor( outputDir ) {
-        this.#outputDir = outputDir;
-        this.#entryDir = outputDir + "/g";
+    constructor( siteGenerator ) {
+        this.#siteGenerator = siteGenerator;
         this.#glossary = new Glossary();
     }
 
     #generateEntryPage( entry ) {
-        const front = Jekyll.getFrontMatter( { title: entry.getTermName() } );
-        const markdown = entry.getMarkdown();
-        Files.write( this.#entryDir + "/" + entry.getTermName() + ".md", front + markdown );
+        const title = entry.getTermName();
+        let html = HTML.textElement( "h1", title );
+        html += HTML.wrap( "div", Markdown.strToHTML( entry.getMarkdown() ), { class: "glossary" } );
+        this.#siteGenerator.writeTemplate( html, { title: title }, Files.join( ENTRY_DIR, title + ".html" ) );
     }
 
     #generateEntryPages() {
+
+        // Make sure output directory exists.
+        this.#siteGenerator.mkdir( ENTRY_DIR );
+
         const entries = this.#glossary.getEntries();
         for ( const entry of entries ) {
             this.#generateEntryPage( entry );
         }
     }
 
-    #generateIncludeFile() {
-
+    #generateIndexPage() {
         const links = [];
         const entries = this.#glossary.getEntries();
         for ( const entry of entries ) {
-            links.push( HTML.getLink( "g/" + entry.getHTMLFileName(), entry.getTermName() ) );
+            links.push( HTML.getLink( Files.join( ENTRY_DIR, entry.getHTMLFileName() ), entry.getTermName() ) );
         }
+        let html = HTML.wrap( "h1", "Glossary" );
+        html += HTML.wrap( "ol", HTML.arrayToLI( links ) );
+        this.#siteGenerator.writeTemplate( html, { title: "Glossary" }, "glossary.html" );
+    }
 
-        Files.write( this.#outputDir + "/_includes/glossary.html", HTML.arrayToLI( links ), true );
-
+    getGlossary() {
+        return this.#glossary;
     }
 
     renderPages() {
-        // Make sure output directory exists.
-        Files.mkdir( this.#entryDir );
-
-        this.#generateIncludeFile();
+        this.#generateIndexPage();
         this.#generateEntryPages();
     }
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@ca-plant-list/ca-plant-list",
-    "version": "0.2.18",
+    "version": "0.3.0",
     "description": "Tools to create Jekyll files for a website listing plants in an area of California.",
     "license": "MIT",
     "repository": {
@@ -30,6 +30,7 @@
         "image-size": "^1.0.2",
         "markdown-it": "^13.0.1",
         "sharp": "^0.32.1",
+        "svgo": "^3.0.3",
         "unzipper": "^0.10.11"
     },
     "devDependencies": {
@@ -37,4 +38,4 @@
         "eslint": "^8.26.0",
         "typescript": "^4.9.3"
     }
-}
+}

package/data/illustrations/optimized/asteraceae_floret.svg

@@ -1,28 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-<svg width="82.437mm" height="84.504mm" version="1.1" viewBox="0 0 82.437 84.504" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
- <defs>
-  <marker id="Triangle" overflow="visible" markerHeight="1" markerWidth="1" orient="auto-start-reverse" preserveAspectRatio="xMidYMid" viewBox="0 0 1 1">
-   <path transform="scale(.5)" d="m5.77 0-8.65 5v-10z" fill="context-stroke" fill-rule="evenodd" stroke="context-stroke" stroke-width="1pt"/>
-  </marker>
- </defs>
- <g transform="translate(-48.054 -6.5123)">
-  <g fill="#959595">
-   <path d="m79.276 37.945a8.4667 31.089 0 0 1 1.8353 33.88 8.4667 31.089 0 0 1-7.8222 19.191 8.4667 31.089 0 0 1-7.8222-19.191 8.4667 31.089 0 0 1 1.8353-33.88z"/>
-   <path d="m48.253 13.074 19.05 24.871" stroke="#888" stroke-width=".5"/>
-   <path id="path3" d="m98.326 13.074-19.05 24.871" fill="#959595" stroke="#888" stroke-width=".5"/>
-  </g>
-  <use transform="rotate(-17.226 77.257 49.068)" xlink:href="#path3"/>
-  <path d="m55.686 9.6812 13.798 28.126" fill="#959595" stroke="#888" stroke-width=".5"/>
-  <path d="m62.705 7.5473 8.2896 30.212" fill="#959595" stroke="#888" stroke-width=".5"/>
-  <use transform="rotate(-5.8666 77.05 56.397)" xlink:href="#path3"/>
-  <use transform="rotate(-27.32 76.391 49.027)" xlink:href="#path3"/>
-  <g>
-   <path d="m69.881 6.5376 3.171 31.167" fill="#959595" stroke="#888" stroke-width=".5"/>
-   <text x="114.47877" y="66.073151" fill="#050000" font-family="Arial" font-size="4.9389px" stroke="#020000" stroke-width="0" xml:space="preserve"><tspan x="114.47877" y="66.073151" fill="#050000" font-family="Arial" font-size="4.9389px" stroke="#020000" stroke-width="0">achene</tspan></text>
-   <text x="114.47877" y="28.502281" fill="#050000" font-family="Arial" font-size="4.9389px" stroke="#020000" stroke-width="0" xml:space="preserve"><tspan x="114.47877" y="28.502281" fill="#050000" font-family="Arial" font-size="4.9389px" stroke="#020000" stroke-width="0">pappus</tspan></text>
-   <path d="m88.996 65.009 20.886-0.12554" marker-start="url(#Triangle)" stroke="#000" stroke-width=".42043"/>
-   <path d="m90.584 27.967 20.886-0.12554" marker-start="url(#Triangle)" stroke="#000" stroke-width=".42043"/>
-  </g>
- </g>
-</svg>

package/data/illustrations/optimized/f-blue.svg

@@ -1,11 +0,0 @@
-<svg version="1.1" viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg"
-    xmlns:xlink="http://www.w3.org/1999/xlink">
-    <ellipse id="a" cx="15" cy="15" rx="2.5" ry="15" fill="blue" stroke-width="0" />
-    <use xlink:href="#a" />
-    <use transform="rotate(30,15,15)" xlink:href="#a" />
-    <use transform="rotate(60,15,15)" xlink:href="#a" />
-    <use transform="rotate(90,15,15)" xlink:href="#a" />
-    <use transform="rotate(120,15,15)" xlink:href="#a" />
-    <use transform="rotate(150,15,15)" xlink:href="#a" />
-</svg>
-    

package/data/illustrations/optimized/f-orange.svg

@@ -1,11 +0,0 @@
-<svg version="1.1" viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg"
-    xmlns:xlink="http://www.w3.org/1999/xlink">
-    <ellipse id="a" cx="15" cy="15" rx="2.5" ry="15" fill="orange" stroke-width="0" />
-    <use xlink:href="#a" />
-    <use transform="rotate(30,15,15)" xlink:href="#a" />
-    <use transform="rotate(60,15,15)" xlink:href="#a" />
-    <use transform="rotate(90,15,15)" xlink:href="#a" />
-    <use transform="rotate(120,15,15)" xlink:href="#a" />
-    <use transform="rotate(150,15,15)" xlink:href="#a" />
-</svg>
-    

package/data/illustrations/optimized/f-pink.svg

@@ -1,11 +0,0 @@
-<svg version="1.1" viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg"
-    xmlns:xlink="http://www.w3.org/1999/xlink">
-    <ellipse id="a" cx="15" cy="15" rx="2.5" ry="15" fill="pink" stroke-width="0" />
-    <use xlink:href="#a" />
-    <use transform="rotate(30,15,15)" xlink:href="#a" />
-    <use transform="rotate(60,15,15)" xlink:href="#a" />
-    <use transform="rotate(90,15,15)" xlink:href="#a" />
-    <use transform="rotate(120,15,15)" xlink:href="#a" />
-    <use transform="rotate(150,15,15)" xlink:href="#a" />
-</svg>
-    

package/data/illustrations/optimized/f-red.svg

@@ -1,11 +0,0 @@
-<svg version="1.1" viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg"
-    xmlns:xlink="http://www.w3.org/1999/xlink">
-    <ellipse id="a" cx="15" cy="15" rx="2.5" ry="15" fill="red" stroke-width="0" />
-    <use xlink:href="#a" />
-    <use transform="rotate(30,15,15)" xlink:href="#a" />
-    <use transform="rotate(60,15,15)" xlink:href="#a" />
-    <use transform="rotate(90,15,15)" xlink:href="#a" />
-    <use transform="rotate(120,15,15)" xlink:href="#a" />
-    <use transform="rotate(150,15,15)" xlink:href="#a" />
-</svg>
-    

package/data/illustrations/optimized/f-white.svg

@@ -1,11 +0,0 @@
-<svg version="1.1" viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg"
-    xmlns:xlink="http://www.w3.org/1999/xlink">
-    <ellipse id="a" cx="15" cy="15" rx="2.5" ry="15" fill="white" stroke-width="0" />
-    <use xlink:href="#a" />
-    <use transform="rotate(30,15,15)" xlink:href="#a" />
-    <use transform="rotate(60,15,15)" xlink:href="#a" />
-    <use transform="rotate(90,15,15)" xlink:href="#a" />
-    <use transform="rotate(120,15,15)" xlink:href="#a" />
-    <use transform="rotate(150,15,15)" xlink:href="#a" />
-</svg>
-    

package/data/illustrations/optimized/f-yellow.svg

@@ -1,11 +0,0 @@
-<svg version="1.1" viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg"
-    xmlns:xlink="http://www.w3.org/1999/xlink">
-    <ellipse id="a" cx="15" cy="15" rx="2.5" ry="15" fill="yellow" stroke-width="0" />
-    <use xlink:href="#a" />
-    <use transform="rotate(30,15,15)" xlink:href="#a" />
-    <use transform="rotate(60,15,15)" xlink:href="#a" />
-    <use transform="rotate(90,15,15)" xlink:href="#a" />
-    <use transform="rotate(120,15,15)" xlink:href="#a" />
-    <use transform="rotate(150,15,15)" xlink:href="#a" />
-</svg>
-    

package/data/illustrations/optimized/peduncle.svg

@@ -1,21 +0,0 @@
-<svg version="1.1" viewBox="0 0 102.55 60" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-<defs>
-<marker id="b" overflow="visible" markerHeight="1" markerWidth="1" orient="auto-start-reverse" preserveAspectRatio="xMidYMid" viewBox="0 0 1 1">
-<path transform="scale(.5)" d="m5.77 0-8.65 5v-10z" fill="context-stroke" fill-rule="evenodd" stroke="context-stroke" stroke-width="1pt"/>
-</marker>
-</defs>
-<path d="m15 60v-45" fill="#14140c" stroke="#160707"/>
-<use xlink:href="#a"/>
-<use transform="rotate(30,15,15)" xlink:href="#a"/>
-<use transform="rotate(60,15,15)" xlink:href="#a"/>
-<use transform="rotate(90,15,15)" xlink:href="#a"/>
-<use transform="rotate(120,15,15)" xlink:href="#a"/>
-<use transform="rotate(150,15,15)" xlink:href="#a"/>
-<ellipse id="a" cx="15" cy="15" rx="2.5" ry="15" fill="#ff0" stroke-width="0"/>
-<g fill="#14140c" stroke="#160707">
-<path d="m20 45h25" marker-start="url(#b)" stroke-width=".5"/>
-<text x="50" y="47.068359" font-family="Arial" font-size="8px" letter-spacing=".5px" opacity=".55843" stroke-width=".1" xml:space="preserve"><tspan x="50" y="47.068359" font-family="Arial" font-size="8px" letter-spacing=".5px" stroke-width=".1" style="font-variant-caps:normal;font-variant-east-asian:normal;font-variant-ligatures:normal;font-variant-numeric:normal">peduncle</tspan></text>
-<path d="m35 15h10" marker-start="url(#b)" stroke-width=".5"/>
-<text x="49.696735" y="17.068359" font-family="Arial" font-size="8px" letter-spacing=".5px" opacity=".55843" stroke-width=".1" xml:space="preserve"><tspan x="49.696735" y="17.068359" font-family="Arial" font-size="8px" letter-spacing=".5px" stroke-width=".1" style="font-variant-caps:normal;font-variant-east-asian:normal;font-variant-ligatures:normal;font-variant-numeric:normal">inflorescence</tspan></text>
-</g>
-</svg>

package/jekyll/glossary.md

@@ -1,5 +0,0 @@
----
-title: Glossary
----
-
-{%include glossary.html %}