feat: add help section and amend README.md

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)

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"

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>
   `;

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;