Minor cleanup on home and support pages

Author: fileformat

TODO.md

@@ -3,7 +3,6 @@
 - [ ] 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
@@ -36,12 +35,14 @@
 - [ ] [Elm](https://package.elm-lang.org/packages/elm/regex/latest/)
 - [ ] Julia
 - [ ] Haskell (done, but hosting isn't working)
+- [ ] AWK
 - [ ] D
 - [ ] GNU grep
 - [ ] [Zig](https://github.com/tiehuis/zig-regex)
 - [ ] direct to engines: PCRE, RE2, [ICU](https://unicode-org.github.io/icu/userguide/strings/regexp.html), [hyperscan](https://github.com/intel/hyperscan)/[vectorscan](https://github.com/VectorCamp/vectorscan), Yarr...  
 - [ ] [Janet](https://janet-lang.org/) ~lisp
 - [ ] [marianobarrios/dregex](https://github.com/marianobarrios/dregex) - Java alternative
+- [ ] Mozilla's [list of JavaScript implementations](https://developer.mozilla.org/en-US/docs/Web/JavaScript/JavaScript_technologies_overview#javascript_implementations), each of which should support Regex.
 
 Patterns that are not regular expressions:
 - [ ] [wildcards](https://crates.io/crates/wildcard) - lots of flavors

src/app/page.tsx

@@ -25,13 +25,55 @@ export default function Home() {
           Pick which programming language you are using:
         </div>
       </div>
-      <div className="row">
+      <div className="row mt-3">
         <div className="col d-flex flex-wrap justify-content-center">
           {buttons}
         </div>
       </div>
-      <h2 className="mt-3">One last thing</h2>
 
+      <hr />
+
+      <div className="d-flex justify-content-center align-items-start">
+        <div className="card m-3 d-inline-block" style={{ "width": "18rem" }}>
+          <h5 className="card-header border-bottom p-3 bg-body-tertiary">Sharing</h5>
+          <div className="card-body pt-1">
+            Share codes are an easy way to share regexes.  If you have a share code, enter it here:
+            <div className="pt-2 d-flex justify-content-center">
+              <form action="/share/index.html" className="form-inline" method="post">
+                <div className="input-group">
+                  <input type="text" className="form-control" name="share" placeholder="Share code" />
+                  <button type="submit" className="btn btn-primary">Go</button>
+                </div>
+              </form>
+            </div>
+          </div>
+        </div>
+
+        <div className="card m-3 d-inline-block" style={{ "width": "18rem" }}>
+          <h5 className="card-header xborder-bottom p-3 bg-body-tertiary">Status</h5>
+          <div className="card-body pt-1">
+            A badly formed regular expression can run forever, making it very useful for denial of services attacks.  Some of the engines/hosts are susceptible to these.
+            <div className="pt-2 d-flex justify-content-center">
+              <a className="btn btn-outline-secondary" href="/status.html" rel="nofollow">Engine Status</a>
+            </div>
+          </div>
+        </div>
+
+        <div className="card m-3 d-inline-block" style={{ "width": "18rem" }}>
+          <h5 className="card-header xborder-bottom p-3 bg-body-tertiary">Regex Zone</h5>
+          <div className="card-body pt-1">
+            The <a href="https://www.regex.zone/">Regex Zone</a> is a place to share regular expressions, and learn from others.  It is a community of regex enthusiasts.
+            <div className="pt-2 d-flex justify-content-center">
+              <a className="btn btn-primary" href="https://www.regex.zone/" rel="nofollow">Visit the Regex Zone</a>
+            </div>
+          </div>
+        </div>
+
+    </div >
+
+      <hr />
+
+      <h2 className="mt-3">One last thing</h2>
       <div className="card my-3 bg-light">
         <div className="card-body">
           Some people, when confronted with a problem, think &ldquo;I know, I’ll use regular expressions.&rdquo; Now they have two problems.<br />

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

@@ -17,18 +17,16 @@ export default function Page() {
             <hr />
             {getEngines().map((engine, index) => (
                 <div className="card m-3 d-inline-block" key={`key${index}`} style={{ "width": "18rem" }}>
-                    <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`}>
-                                <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>
-                            ))}
-                        </ul>
+                    <div className="card-header bg-body-tertiary d-flex align-items-center">
+                    <img src={engine.logo_icon} className="me-3" alt={`${engine.short_name} logo`} style={{ "width": "2.0rem" }} />
+                        {engine.short_name}
                     </div>
+                    <ul className="list-group list-group-flush">
+                        <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>
+                        ))}
+                    </ul>
                 </div>
             ))}
         </>