docs: Add some more explanation to the website.

README.md

@@ -89,7 +89,20 @@ let numbers = await worker.matchAll('Lots of text ...', /\b\w{3}\s+\w{3}/g, more
 
 // It is a good idea to dispose of the worker before shutdown.
 // The worker thread will stop on its own if left idle for more than 200ms.
-worker.dispose();
+await worker.dispose();
+```
+
+**Note:** The worker supports the proposed [`using`](https://github.com/tc39/proposal-explicit-resource-management) keyword. See also: [TypeScript: `using`](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-5-2.html).
+
+```ts
+import { RegExpWorker } from 'regexp-worker';
+
+async function run() {
+    await using worker = new RegExpWorker();
+    // ... do some work.
+    let numbers = await worker.matchAll('Lots of text 123 ...', /\b\d+\b/g);
+    // The worker is auto cleaned up when when the function exits.
+}
 ```
 
 ## Handling Timeouts

website/src/app.css

@@ -6,12 +6,12 @@
     --font-body:
         Arial, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
     --font-mono: 'Fira Mono', monospace;
-    --color-bg-0: rgb(202, 216, 228);
-    --color-bg-1: hsl(209, 36%, 86%);
-    --color-bg-2: hsl(224, 44%, 95%);
+    --color-bg-0: #fdfdfd;
+    --color-bg-1: #fdfdfd;
+    --color-bg-2: #fdfdfd;
     --color-theme-1: #00aa00;
     --color-theme-2: #4075a6;
-    --color-text: rgba(0, 0, 0, 0.7);
+    --color-text: rgba(0, 0, 0, 0.9);
     --column-width: 42rem;
     --column-margin-top: 4rem;
     font-family: var(--font-body);
@@ -21,12 +21,7 @@
 body {
     min-height: 100vh;
     margin: 0;
-    background-attachment: fixed;
     background-color: var(--color-bg-1);
-    background-size: 100vw 100vh;
-    background-image:
-        radial-gradient(50% 50% at 50% 50%, rgba(255, 255, 255, 0.75) 0%, rgba(255, 255, 255, 0) 100%),
-        linear-gradient(180deg, var(--color-bg-0) 0%, var(--color-bg-1) 15%, var(--color-bg-2) 50%);
 }
 
 h1,

website/src/lib/Playground.svelte

@@ -127,7 +127,7 @@
 {#snippet snipFragments()}{#each fragments as frag (frag.id)}{#if frag.type === 'mark'}<mark>{frag.content}</mark
             >{:else}{frag.content}{/if}{/each}{/snippet}
 
-{#snippet fixedWidth(value: number, fixed: number = 4, width: number = 9)}
+{#snippet fixedWidth(value: number, fixed: number = 2, width: number = 9)}
     {value.toFixed(fixed).padStart(width, ' ')}{/snippet}
 
 <div class="wrapper">
@@ -304,6 +304,7 @@
     .header {
         grid-area: header;
         text-align: center;
+        border-radius: 5px 5px 0px 0px;
     }
 
     .header {
@@ -316,6 +317,7 @@
         box-sizing: border-box;
         padding: 10px;
         grid-area: footer;
+        border-radius: 0px 0px 5px 5px;
         /* min-height: 20px; */
     }
 

website/src/routes/+page.svelte

@@ -15,12 +15,21 @@
         Execute Regular Expression Matches on a Node <a href="https://nodejs.org/api/worker_threads.html">Worker Thread</a> or in a
         <a href="https://developer.mozilla.org/en-US/docs/Web/API/Worker">Web Worker</a>.
     </p>
-    <br />
     <p>
         Regular Expressions can suffer from <a href="https://www.regular-expressions.info/catastrophic.html">Catastrophic Backtracking</a> .
         A very simple expression like <code>/(x+x+)+y/</code> can cause your JavaScript application to freeze. This library allows you to run
-        these expressions on another thread. If they take to long to complete, they are terminated, protecting your application from locking
-        up.
+        these expressions in another thread, keeping your application responsive. If they take to long to complete, they are terminated, protecting
+        your application from locking up.
+    </p>
+    <p>
+        The playground below allows you to test the worker with different regular expressions and content. It will show you the elapsed time
+        for the the worker to process the regular expression against the content.
+    </p>
+    <p>
+        <b>Note:</b> The timings shown are rounded to the nearest 1/10 of a millisecond. This is due to the
+        <a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/crossOriginIsolated"><code>crossOriginIsolated</code></a>
+        property. See also:
+        <a href="https://developer.mozilla.org/en-US/docs/Web/API/Performance/now">Performance: now() method - Web APIs | MDN</a>.
     </p>
     <br />
 
@@ -40,6 +49,10 @@
         text-align: left;
     }
 
+    p + p {
+        margin-top: 1em;
+    }
+
     h1 {
         width: 100%;
     }