Fix {#link to=...} example (#40)

* Swap `"` quotes for `|` quotes (`"` is a syntax error)
* Make example interactive
* Use extant example.com URL
* Amend rendering logic to match example

Author: lionel-rowe

docs/quick-start.md

@@ -256,10 +256,14 @@ separated by an equal sign `=`. Options are separated by spaces. Options can be
 used to modify the behaviour of markup tags, for example changing the target of
 a link.
 
+<mf2-interactive>
+
 ```mf2
-This is a {#link to="home"}link{/link}.
+This is a {#link to=|https://example.com|}link{/link}.
 ```
 
+</mf2-interactive>
+
 It is best practice to not mix styles into messages too much - instead, use
 markup tags to add semantic meaning and selectors to text, and let the
 application decide how to render the message. This makes it easier to change the

playground.tsx

@@ -258,7 +258,7 @@ export default function IndexPage({ comp }: any) {
                     <code>link</code>
                   </td>
                   <td class="border px-2">
-                    Add a link, pointing to the <code>url</code> option.
+                    Add a link, pointing to the <code>to</code> option.
                   </td>
                 </tr>
                 <tr>

src/_utils/message_format.ts

@@ -51,7 +51,7 @@ export function formatMessageToHTML(
             }
             case "link": {
               const link = document.createElement("a");
-              link.href = part.options?.url as string;
+              link.href = part.options?.to as string;
               link.target = "_blank";
               link.rel = "noopener noreferrer";
               currentElement.appendChild(link);