From f920fe900110e7cc60c19135e5fe05625eea86cd Mon Sep 17 00:00:00 2001
From: Siah <i@siah.sg>
Date: Sat, 11 May 2024 22:59:43 +0900
Subject: [PATCH 1/3] feat: added `remove` field with regex parsing

---
 index.html    | 9 +++++++--
 playground.js | 9 +++++++++
 2 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/index.html b/index.html
index df1f93e..cc9bcd4 100644
--- a/index.html
+++ b/index.html
@@ -13,13 +13,18 @@
 				<input type="text" id="input" placeholder="An Apple computer" autofocus>
 			</fieldset>
 
-
-
 			<fieldset>
 				<label for="replacement">Replacement character</label>
 				<input type="text" id="replacement" name="replacement" placeholder="-">
 			</fieldset>
 
+			 <fieldset style="display: flex; justify-content: flex-start; align-items: center">
+        <label for="remove">Remove chars (regex)</label>
+        /<input type="text" id="remove" name="remove" />/<br />
+        <label> <input type="checkbox" name="regex_g" /> g </label>
+
+        <label> <input type="checkbox" name="regex_i" /> i </label>
+      </fieldset>
 
 			<fieldset>
 			<label>
diff --git a/playground.js b/playground.js
index 8f1bbd3..74264f5 100644
--- a/playground.js
+++ b/playground.js
@@ -14,12 +14,21 @@ form.addEventListener('submit', function (e) {
   const trim = fd.get('trim')
   const fallback = fd.get('fallback')
 
+  const remove = fd.get('remove')
+  const regexG = fd.get('regex_g') === null ? '' : 'g'
+  const regexI = fd.get('regex_i') === null ? '' : 'i'
+
   const opts = {}
 
   if (replacement.length > 0) {
     opts.replacement = replacement
   }
 
+  if (remove !== null && remove.length > 0) {
+    const regex = new RegExp(`/${remove}/${regexG}${regexI}`)
+    opts.remove = regex
+  }
+
   opts.lower = lowercase !== null
 
   opts.trim = trim !== null

From 87f9d1fd6ee9d0affca999219c2621deac678635 Mon Sep 17 00:00:00 2001
From: Siah <i@siah.sg>
Date: Sat, 11 May 2024 23:01:20 +0900
Subject: [PATCH 2/3] feat: added placeholder for `remove` field

---
 index.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/index.html b/index.html
index cc9bcd4..67e2ccf 100644
--- a/index.html
+++ b/index.html
@@ -19,8 +19,8 @@
 			</fieldset>
 
 			 <fieldset style="display: flex; justify-content: flex-start; align-items: center">
-        <label for="remove">Remove chars (regex)</label>
-        /<input type="text" id="remove" name="remove" />/<br />
+        <label for="remove">Remove chars (regex)</label>&nbsp;
+        /<input type="text" id="remove" name="remove" placeholder="(?<= )((a)|(an)|(the))(?= )" />/<br />
         <label> <input type="checkbox" name="regex_g" /> g </label>
 
         <label> <input type="checkbox" name="regex_i" /> i </label>

From 5f2d8a7e0ed69552b95b40739b5841b51d80dfb7 Mon Sep 17 00:00:00 2001
From: Siah <i@siah.sg>
Date: Sun, 12 May 2024 11:05:58 +0900
Subject: [PATCH 3/3] feat: fold advanced options under a <details> disclosure

---
 index.html | 19 +++++++++++--------
 1 file changed, 11 insertions(+), 8 deletions(-)

diff --git a/index.html b/index.html
index 67e2ccf..6bbea03 100644
--- a/index.html
+++ b/index.html
@@ -18,14 +18,6 @@
 				<input type="text" id="replacement" name="replacement" placeholder="-">
 			</fieldset>
 
-			 <fieldset style="display: flex; justify-content: flex-start; align-items: center">
-        <label for="remove">Remove chars (regex)</label>&nbsp;
-        /<input type="text" id="remove" name="remove" placeholder="(?<= )((a)|(an)|(the))(?= )" />/<br />
-        <label> <input type="checkbox" name="regex_g" /> g </label>
-
-        <label> <input type="checkbox" name="regex_i" /> i </label>
-      </fieldset>
-
 			<fieldset>
 			<label>
 				<input type="checkbox" name="lowercase" checked> Lowercase
@@ -44,6 +36,17 @@
 			</label>
 			</fieldset>
 
+			<details>
+				<summary><h4>Advanced options</h4></summary>
+			 <fieldset style="display: flex; justify-content: flex-start; align-items: center">
+        <label for="remove">Remove chars (regex)</label>&nbsp;
+        /<input type="text" id="remove" name="remove" placeholder="(?<= )((a)|(an)|(the))(?= )" />/<br />
+        <label> <input type="checkbox" name="regex_g" /> g </label>
+
+        <label> <input type="checkbox" name="regex_i" /> i </label>
+      </fieldset>
+			</details>
+
       <input type="submit" value="Slug it">
 
     </form>