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/media/preview.png b/media/preview.png new file mode 100644 index 0000000..247d63b Binary files /dev/null and b/media/preview.png differ 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 @@ { 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` +
+ Help +
+

+ This tool lets you easily search for definitions of manga sound + effects and onomatopoeia. Type a sound effect in the search box, and + press${" "} + Search to find definitions for that sound effect. You can + search using romaji, hiragana, or katakana. +

+

+ Results where your search term appears at the start of a sound effect + will appear under Exact matches. Results where your search term + appears in the middle of a sound effect will appear under${" "} + Similar matches. +

+
+
+ `; +}; + function usePageQuery() { const read = () => new URL(window.location).searchParams; const [query, setQuery] = useState(read()); @@ -164,6 +187,7 @@ const Page = () => { return html`
<${TermSearchForm} query=${query} updateQuery=${updateQuery} /> + <${Help} /> <${SearchResults} query=${query} />
`; 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;