From 6b625d0fcf8176dc4d5cfcac236148b7d0892afc Mon Sep 17 00:00:00 2001
From: Nanoskript <96655713+nanoskript@users.noreply.github.com>
Date: Thu, 28 Dec 2023 04:22:10 +1100
Subject: [PATCH] feat: add help section and amend README.md

---
 README.md         |  9 ++++++++-
 public/index.html |  2 +-
 public/index.js   | 26 +++++++++++++++++++++++++-
 public/styles.css | 10 ++++++++++
 4 files changed, 44 insertions(+), 3 deletions(-)

diff --git a/README.md b/README.md
index 9ada9dd..424c438 100644
--- a/README.md
+++ b/README.md
@@ -1,8 +1,15 @@
 # jp-onomatopoeia
 
-Compiled dataset of Japanese onomatopoeia and sound effects.
+[Japanese Onomatopoeia Search](https://nsk.sh/tools/jp-onomatopoeia/)
+
+Compiled dataset and search tool for Japanese onomatopoeia and sound effects.
+
+## Preview
+
+![](media/preview.png)
 
 ## Data sources
 
 - [nihongoresources.com](https://github.com/Pomax/nihongoresources.com)
 - [Japanese Manga SFX spreadsheet](https://docs.google.com/spreadsheets/d/1iXFIVmSzukN1PYD1JakdqMmrNNlc7TtkutDKevuKM0c/edit)
+- [The Jaded Network](http://thejadednetwork.com/sfx/) (included in the Japanese Manga SFX spreadsheet)
diff --git a/public/index.html b/public/index.html
index cf11bf9..581515d 100644
--- a/public/index.html
+++ b/public/index.html
@@ -7,7 +7,7 @@
     <meta
       name="description"
       property="og:description"
-      content="Use this tool to search for Japanese onomatopoeia and sound effects."
+      content="Use this tool to quickly search for meanings of Japanese onomatopoeia and manga sound effects."
     />
     <link
       rel="stylesheet"
diff --git a/public/index.js b/public/index.js
index 9fc9517..560bd1c 100644
--- a/public/index.js
+++ b/public/index.js
@@ -29,7 +29,7 @@ const TermSearchForm = ({ query, updateQuery }) => {
           type="text"
           value=${string}
           class="term-search-input"
-          placeholder="Romaji / Hiragana / Katakana"
+          placeholder="Romaji · ひらがな · カタカナ"
           oninput=${(e) => setString(e.target.value)}
           autocomplete="off"
           autocapitalize="none"
@@ -141,6 +141,29 @@ const SearchResults = ({ query }) => {
   `;
 };
 
+const Help = () => {
+  return html`
+    <details>
+      <summary>Help</summary>
+      <div className="help-content">
+        <p>
+          This tool lets you easily search for definitions of manga sound
+          effects and onomatopoeia. Type a sound effect in the search box, and
+          press${" "}
+          <b>Search</b> to find definitions for that sound effect. You can
+          search using romaji, hiragana, or katakana.
+        </p>
+        <p>
+          Results where your search term appears at the start of a sound effect
+          will appear under <b>Exact matches</b>. Results where your search term
+          appears in the middle of a sound effect will appear under${" "}
+          <b>Similar matches</b>.
+        </p>
+      </div>
+    </details>
+  `;
+};
+
 function usePageQuery() {
   const read = () => new URL(window.location).searchParams;
   const [query, setQuery] = useState(read());
@@ -164,6 +187,7 @@ const Page = () => {
   return html`
     <div>
       <${TermSearchForm} query=${query} updateQuery=${updateQuery} />
+      <${Help} />
       <${SearchResults} query=${query} />
     </div>
   `;
diff --git a/public/styles.css b/public/styles.css
index 9a12bc6..a2f4b3e 100644
--- a/public/styles.css
+++ b/public/styles.css
@@ -31,6 +31,16 @@
   color: dimgray;
 }
 
+.help-content {
+  border: 0.2rem darkgray solid;
+  margin: 1rem 0 1.5rem;
+  padding: 1rem 1.5rem;
+}
+
+.help-content p:last-child {
+  margin-bottom: 0;
+}
+
 footer {
   text-align: center;
   padding-bottom: 2rem;