From 5e9eb7a94ebb7edf2a4b1387a642caa700f9beb0 Mon Sep 17 00:00:00 2001
From: Aimee Gamble-Milner <12508200+aimee-gm@users.noreply.github.com>
Date: Sat, 16 May 2020 11:30:37 +0100
Subject: [PATCH] docs(demo): add experimental lang options

---
 demo/demo.css   | 11 ++++++++++-
 demo/demo.js    |  7 ++++---
 demo/index.html | 25 +++++++++++++++----------
 3 files changed, 29 insertions(+), 14 deletions(-)

diff --git a/demo/demo.css b/demo/demo.css
index c09bd129..77cd9d33 100644
--- a/demo/demo.css
+++ b/demo/demo.css
@@ -117,7 +117,7 @@ form label {
   padding: 1rem 0;
 }
 
-form input,
+form input[type="text"],
 form textarea {
   width: 100%;
   display: block;
@@ -144,3 +144,12 @@ form textarea {
 .hide {
   display: none;
 }
+
+.experimental label {
+  display: inline-block;
+}
+
+h3 {
+  font-size: 1rem;
+  margin: 0;
+}
diff --git a/demo/demo.js b/demo/demo.js
index 55c1e86a..3e942e88 100644
--- a/demo/demo.js
+++ b/demo/demo.js
@@ -13,11 +13,11 @@ const setError = (error) => {
   el.classList.remove("hide");
 };
 
-const parse = (html, { baseUrl }) => {
+const parse = (html, options) => {
   document.getElementById("error").classList.add("hide");
 
   try {
-    const result = mf2(html, { baseUrl });
+    const result = mf2(html, options);
     setResult(result);
   } catch (err) {
     setError(err.message);
@@ -29,6 +29,7 @@ const parse = (html, { baseUrl }) => {
 window.parseHtml = () => {
   const html = document.getElementById("html").value;
   const baseUrl = document.getElementById("base-url").value;
+  const lang = document.getElementById("lang").checked;
 
-  return parse(html, { baseUrl });
+  return parse(html, { baseUrl, experimental: { lang } });
 };
diff --git a/demo/index.html b/demo/index.html
index 33e653da..a0283f28 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -38,6 +38,13 @@ <h1>{{ name }}</h1>
     </header>
     <main class="container">
       <h2>Try it out</h2>
+      <noscript>
+        <div class="error">
+          <h1>JavaScript is disabled</h1>
+          <p>It looks like you have JavaScript disabled.</p>
+          <p>You need JavaScript to be enabled to view the demo.</p>
+        </div>
+      </noscript>
       <form onsubmit="return parseHtml()">
         <label>
           <span>Base URL</span>
@@ -49,6 +56,14 @@ <h2>Try it out</h2>
           <textarea name="html" id="html"></textarea>
         </label>
 
+        <h3>Experimental options</h3>
+        <p class="experimental">
+          <label>
+            <input type="checkbox" name="lang" id="lang" value="true" checked />
+            <span>Language parsing</span>
+          </label>
+        </p>
+
         <div class="submit">
           <button type="submit">Parse</button>
         </div>
@@ -59,16 +74,6 @@ <h2>Output</h2>
         <pre id="result"></pre>
       </div>
     </main>
-    <noscript>
-      <div class="error">
-        <h1>JavaScript is disabled</h1>
-        <p>It looks like you have JavaScript disabled.</p>
-        <p>
-          You need JavaScript to be enabled to view the demo; it's a JavaScript
-          component!
-        </p>
-      </div>
-    </noscript>
     <footer>
       <div class="container">
         <a href="{{ licenseUrl }}">{{ license }} Licensed</a>