Minor tweaks after review

CONTRIBUTING.md

@@ -9,21 +9,19 @@ If you want to add support for a new regex engine, you need to do this is a sepa
 
 The [existing regex backends](https://github.com/regexplanet) are on Github and a good place to start.  Note: I am not an expert at all of the languages, so the code can definitely be sub-optimal.
 
-Once you have a working backend, you need to host it somewhere.  If you have it Docker-ized, I take it from here.
+Once you have a working backend, you need to host it somewhere.  If you have it Docker-ized, I take it from there and host it with the other backends.
 
-Once it is running on the internet, you need to add a new [RegexEngine](https://github.com/regexplanet/regexplanet-next/tree/main/src/engines/RegexEngine.ts).  You can use [empty.ts](https://github.com/regexplanet/regexplanet-next/blob/main/src/engines/empty.ts) as a starting point.  See [metadata](#metadata) below for details about each property.
-
-You can try your engine by adding a `testurl` parameter to the query string of the advanced test page. I.e. something like:
+You can try your engine by adding a `testurl` parameter to the query string of the test page. I.e. something like:
 https://www.regexplanet.com/advanced/perl/index.html?testurl=http://localhost:8080/test.pl
 
 
 ## Backend API
 
 These are the API endpoints RegexPlanet uses to communicate with each backend regex engines.
-Note: the endpoints must support for JSON and [JSONP](https://en.wikipedia.org/wiki/JSONP).  The JSONP version takes a `callback=` in the query string.
+Note: the endpoints must support both JSON and [JSONP](https://en.wikipedia.org/wiki/JSONP).  The JSONP version takes a `callback` parameter in the query string.
 
 
-## `test` endpoint
+### `test` endpoint
 
 Input:
 * `callback` - the name of the JSONP callback function. This is the only parameter not visible in the page source. This will not be present for browsers (*cough* MSIE *cough*) that do not support CORS. They get get proxied instead.
@@ -38,35 +36,26 @@ Output:
 * `success` - boolean, true only if no errors
 * `html` - html to display on the page
 
-## `status` endpoint
+### `status` endpoint
+
+This will be displayed on the [status page](https://www.regexplanet.com/status.html).
 
 Input:
 * (none)
+
 Output:
 JSON map of any items of interest. Mandatory items:
 * `success` - boolean, true only if no errors
 * `version` - String, human-readable version information.  Do not include `short_name`.
 
-## Other Standard Pages
+### Other Standard Pages
 
 * `/` - should redirect to the testing page
 * `/favicon.ico`
 * `/favicon.svg`
 * `/robots.txt`
 * `/humans.txt` - optional, if you want to take some credit
 
-## Metadata
-
-Details of what you need for the [RegexEngine interface](https://github.com/regexplanet/regexplanet-next/tree/main/src/engines/RegexEngine.ts).
-
-- `short_name` - Name of the language or engine
-- `description` - library or module name (do not include `short_name`)
-- `help_label` - text for the help button on the testing page
-- `help_url` - URL destination for the help button on the testing page
-- `logo_ar21` - SVG logo (including language name) in a 2:1 aspect ratio
-- `logo_icon` - SVG icon (just the logo, no text) in a square
-- `links` - A map of (name: url) for other help links. These will be displayed on the support page under “Official Documentation”
-- `options` - A list of which options it supports. Please use the common (long) codes so options can be shared between engines.  These need to be implemented the same way in the endpoint.
-- `source_url` - URL of source code
-- `status_url` - URL of the status endpoint
-- `test_url` - URL of the test endpoint
+## Add a RegexEngine
+
+Add a new [RegexEngine](https://github.com/regexplanet/regexplanet-next/tree/main/src/engines/RegexEngine.ts) in [`src/engines`](https://github.com/regexplanet/regexplanet-next/tree/main/src/engines).  You can use [`empty.ts`](https://github.com/regexplanet/regexplanet-next/blob/main/src/engines/empty.ts) as a starter.

TODO.md

@@ -1,7 +1,10 @@
 # To Do
 
+- [ ] posting
 - [ ] [analytics](https://nextjs.org/docs/app/building-your-application/optimizing/analytics)
+- [ ] options report (across all backends)
 - [ ] Options cleanup + picker widget
+- [ ] Support for `?testurl=` query string parameter
 
 ## Move to Regex.zone
 

src/app/status.html/ResultsTable.tsx

@@ -41,7 +41,7 @@ function EngineStatusColumns(status: EngineStatus | undefined) {
             <>
                 <td><img src="/images/cross-circle.png" alt="down" /> Down</td>
                 <td />
-                <td />
+                <td className="d-none d-lg-table-cell" />
             </>
         );
     }
@@ -51,7 +51,7 @@ function EngineStatusColumns(status: EngineStatus | undefined) {
             <>
                 <td><img src="/images/exclamation-red.png" alt="error" /> Error</td>
                 <td />
-                <td />
+                <td className="d-none d-lg-table-cell"/>
             </>
         );
     }
@@ -61,21 +61,22 @@ function EngineStatusColumns(status: EngineStatus | undefined) {
             <>
                 <td><img src="/images/exclamation-red.png" alt="why no time?" /> No time?!?</td>
                 <td />
-                <td />
+                <td className="d-none d-lg-table-cell" />
             </>
         );
     }
 
     const icon_url = status.time_millis < SLOW_TIME_MILLIS ? "/images/tick.png" : "/images/exclamation-frame.png";
     const text = status.time_millis < SLOW_TIME_MILLIS ? "Success" : "Slow";
+    const alt_text = status.time_millis < SLOW_TIME_MILLIS ? `Success (${status.time_millis} ms)` : `Slow (${status.time_millis} ms)`;
 
     return (
         <>
             <td>
-                <img src={icon_url} alt={text} /> {text}
+                <img src={icon_url} alt={alt_text} title={alt_text} /> {text}
             </td>
             <td>{status.version}</td>
-            <td>{status.time_millis}</td>
+            <td className="d-none d-lg-table-cell">{status.time_millis}</td>
         </>
     );
 }
@@ -147,8 +148,8 @@ export function ResultsTable() {
                         <th>Engine</th>
                         <th>Status</th>
                         <th>Version</th>
-                        <th>Time (ms)</th>
-                        <th>Hosted at</th>
+                        <th className="d-none d-lg-table-cell">Time (ms)</th>
+                        <th className="d-none d-lg-table-cell">Hosted at</th>
                     </tr>
                 </thead>
                 <tbody>
@@ -159,7 +160,7 @@ export function ResultsTable() {
                                 <Link href={`/advanced/${engine.handle}/index.html`} >{engine.short_name}</Link>
                             </td>
                             {EngineStatusColumns(results[index])}
-                            <td>{getHost(engine.test_url)}</td>
+                            <td className="d-none d-lg-table-cell">{getHost(engine.test_url)}</td>
                         </tr>
                     ))}
                 </tbody>

src/app/support/contact.html/ClientPage.tsx

@@ -15,7 +15,6 @@ export default function Page() {
     return (
         <>
                 <iframe height="737" title="Embedded Wufoo Form" style={{ "width": "100%", "border": "none" }} sandbox="allow-popups-to-escape-sandbox allow-top-navigation allow-scripts allow-popups allow-forms allow-same-origin" src={`https://fileformat.wufoo.com/embed/z5yinul1mj3me9/?field14=regexplanet-next&field16=${encodeURIComponent(fullpath)}`}></iframe>
-                <p>{fullpath}</p>
         </>
     );
 }

src/app/support/index.html/page.tsx

@@ -17,10 +17,12 @@ export default function Page() {
             <hr />
             {getEngines().map((engine, index) => (
                 <div className="card m-3 d-inline-block" key={`key${index}`} style={{ "width": "18rem" }}>
-                    <img src={engine.logo_ar21} className="card-img-top" alt={`${engine.short_name} logo`} style={{ "width": "18rem", "height": "9rem" }} />
                     <div className="card-body p-0 border-top">
                         <ul className="list-group list-group-flush">
-                            <li className="list-group-item fw-bold" key={`key${index}_title`}>{engine.short_name}</li>
+                            <li className="list-group-item fw-bold" key={`key${index}_title`}>
+                                <img src={engine.logo_icon} className="me-2" alt={`${engine.short_name} logo`} style={{ "width": "2.0rem" }} />
+                                {engine.short_name}
+                            </li>
                             <li className="list-group-item" key={`key${index}_help`}><a href={engine.help_url}>{engine.help_label}</a></li>
                             {engine.links && Object.keys(engine.links).map((key, linkindex) => (
                                 <li className="list-group-item" key={`key${index}_${linkindex}`}><a href={engine.links[key]}>{key}</a></li>

src/components/Navbar.tsx

@@ -2,18 +2,18 @@
 
 import Link from "next/link";
 import { NavbarLink } from "./NavbarLink";
-import { PiCloudCheckBold, PiPlayBold, PiQuestionBold } from "react-icons/pi";
+import { PiCloudCheck, PiCloudCheckBold, PiPlay, PiPlayBold, PiQuestion, PiQuestionBold } from "react-icons/pi";
 
 /* eslint-disable @next/next/no-img-element */
 
 
 const links = [
-    { link: '/', label: 'Testing', startsWith: '/advanced/', icon: <PiPlayBold /> },
+    { link: '/', label: 'Testing', startsWith: '/advanced/', icon: <PiPlay />, icon_bold: <PiPlayBold /> },
     {
-        link: '/status.html', label: 'Status', startsWith: '/status.html', icon: <PiCloudCheckBold />
+        link: '/status.html', label: 'Status', startsWith: '/status.html', icon: <PiCloudCheck />, icon_bold: <PiCloudCheckBold />
     },
     {
-        link: '/support/index.html', label: 'Support', startsWith: '/support/', icon: <PiQuestionBold />
+        link: '/support/index.html', label: 'Support', startsWith: '/support/', icon: <PiQuestion />, icon_bold: <PiQuestionBold />
     },
 ];
 

src/components/NavbarLink.tsx

@@ -9,18 +9,20 @@ export type NavbarLinkData = {
     label: string; 
     startsWith: string
     icon: JSX.Element;
+    icon_bold: JSX.Element;
 };
 
 export function NavbarLink(link: NavbarLinkData) {
     const pathname = usePathname()
+    const isActive = pathname.startsWith(link.startsWith)
 
     return (
         <li className = "nav-item" key={link.label}>
         <Link
-            className={`mx-2 nav-link${pathname.startsWith(link.startsWith) ? ' fw-bold active' : ''}`}
+                className={`mx-2 nav-link${isActive ? ' fw-bold active' : ''}`}
             href={link.link}
         >
-                <span className="d-lg-none">{link.icon}</span>
+                <span className="d-lg-none">{isActive ? link.icon_bold : link.icon}</span>
                 <span className="d-none d-lg-inline">{link.label}</span>
         </Link>
         </li>

src/engines/RegexEngine.ts

@@ -1,30 +1,28 @@
 type RegexOption = {
   code: string;
-  value: string|number;
+  value: string | number;
   description: string;
   portable?: string;
-}
+};
 
 type RegexEngine = {
-  description: string;
-  enabled: boolean;
-  help_label: string;
-  help_url: string;
-  handle: string;
+  description: string; // library or module name (do not include `short_name`)
+  enabled: boolean; // always true for now
+  help_label: string; // text for the help button on the testing page
+  help_url: string; // URL destination for the help button on the testing page
+  handle: string; // unique identifier for the language or engine used as the slug in URLs
   level: "alpha" | "beta" | "golden";
-  links: Record<string, string>;
-  logo_icon: string;
-  logo_ar21: string;
-  nodeping_url: string;
-  notfound?: string[];
-  options: RegexOption[];
-  option_notes?: string;
-  short_name: string;
-  source_url: string;
-  status_url: string;
-  test_url: string;
+  links: Record<string, string>; // A map of (name: url) for other help links. These will be displayed on the support page under “Official Documentation”
+  logo_icon: string; // SVG icon (just the logo, no text) in a square
+  logo_ar21: string; // SVG logo (including language name) in a 2:1 aspect ratio
+  nodeping_url: string; // URL of the nodeping status page
+  notfound?: string[]; // A list of handles that this is a substitute for (i.e. nodejs is a substitute for javascript)
+  options: RegexOption[]; // A list of which options it supports.
+  option_notes?: string; // Notes to display on the options page (html allowed)
+  short_name: string; // Name of the language or engine
+  source_url: string; // URL of source code
+  status_url: string; // URL of the status endpoint
+  test_url: string; // URL of the test endpoint
 };
 
-export { 
-    type RegexEngine,
-}
+export { type RegexEngine };