docs: update README.md

README.md

@@ -1,11 +1,23 @@
 # GitHub Emoji
 
-Finally a complete list of GitHub Emojis.
+[![Deploy to Pages](https://img.shields.io/github/actions/workflow/status/marcomontalbano/github-emoji/gh-pages.yaml?style=for-the-badge&logo=github&label=deploy%20to%20pages)](https://github.com/marcomontalbano/github-emoji/actions/workflows/gh-pages.yaml)
 
-Now you can search and use all emojis you want in your .md files, like this :cowboy_hat_face: or this :european_castle:.
+This is a complete list of all GitHub Markdown emojis.
 
-## Development stuff
+As detailed in the [official documentation](https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax#using-emojis), incorporating emojis into your Markdown is straightforward. Simply type `:EMOJICODE:`—a colon followed by the emoji name. Typing `:` will prompt a list of suggested emojis and this **list is dynamically filtered as you type**.
 
-The project has been developed with [React](https://reactjs.org/) and [Flux](http://facebook.github.io/flux/).
+Finding the ideal emoji can be challenging as it requires precise name input.
 
-I'm using [GitHub Actions](https://github.com/marcomontalbano/github-emoji/actions) to build and deploy the website.
+For instance, if you're feeling hungry but can't decide what to eat, locating a suitable dish becomes hard due to the need for specific keyword matching.
+
+With _GitHub Emoji_, you can simply search for _"**food**"_ …
+
+![Searching for "food"](https://github.com/marcomontalbano/github-emoji/assets/1681269/786ad9d2-877b-4bdf-b5df-1551ae02fc8c)
+
+## How it works
+
+The emoji compilation is automatically generated from the [GitHub Emoji API](https://api.github.com/emojis) and integrated with keywords from the [Unicode Emoji List](https://www.unicode.org/emoji/charts/emoji-list.html).
+
+This approach enables you to find emojis effortlessly. If you want to write the emojicode for a cute :parrot:, instead of typing `:parrot:`, you can search for `bird`, `pirate`, or `talk`.
+
+After building the dictionary, I leverage [GitHub Actions](https://github.com/marcomontalbano/github-emoji/actions) to build the website and deploy it on GitHub Pages.

src/app/components/Emoji.jsx

@@ -11,7 +11,9 @@ export const Emoji = ({ item }) => {
 
     const copyToClipboard = (target) => {
         var textarea = document.createElement('textarea');
-        textarea.innerText = target.classList.contains('is-emoji') ? target.textContent : target.querySelector('img').src;
+        textarea.innerText = target.classList.contains('is-image')
+          ? target.querySelector('img').src
+          : target.textContent;
 
         document.getElementsByTagName('body')[0].append(textarea);
         textarea.select();
@@ -36,13 +38,17 @@ export const Emoji = ({ item }) => {
     }
 
     return (
-        <>
-            <div className={`image ${content.valid ? 'is-emoji': ''}`}>{emoji}</div>
-            <div className="name">{ghcode}</div>
-            <div className="details">
-                <div onClick={handleClickToCopy} className={`image ${content.valid ? 'is-emoji': ''}`}><span>{emoji}</span></div>
-                <div className="name" onClick={handleClickToCopy}>{ghcode}</div>
-            </div>
-        </>
+      <>
+        <div className={`image ${content.valid ? 'is-emoji' : 'is-image'}`}>{emoji}</div>
+        <div className="name">{ghcode}</div>
+        <div className="details">
+          <div onClick={handleClickToCopy} className={`image ${content.valid ? 'is-emoji' : 'is-image'}`}>
+            <span>{emoji}</span>
+          </div>
+          <div className="name" onClick={handleClickToCopy}>
+            {ghcode}
+          </div>
+        </div>
+      </>
     );
 }

src/app/stores/EmojiStore.js

@@ -1,3 +1,5 @@
+// @ts-check
+
 import { ReduceStore } from 'flux/utils';
 import AppDispatcher from '../../AppDispatcher';
 import ActionTypes from '../actions/ActionTypes';
@@ -33,6 +35,7 @@ class EmojiStore extends ReduceStore {
                             || (content.keywords || []).find(k => k.includes(action.value.toLowerCase())) !== undefined
                             || (content.category ? content.category.toLowerCase().includes(action.value.toLowerCase()) : false)
                             || (content.emoji === action.value)
+                            || (content.ghcode.includes(action.value))
                             ;
                     }),
                 };