From 8431b6664601a3e4d14642312685955c697b28fc Mon Sep 17 00:00:00 2001
From: mrfry <mrfry@airmail.cc>
Date: Wed, 24 Feb 2021 15:40:36 +0100
Subject: [PATCH 01/14] Added discord link

---
 src/pages/index.js | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/pages/index.js b/src/pages/index.js
index 4dcc39d..2bd4caf 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -15,6 +15,10 @@ const links = {
     href: '/install',
     text: 'Install',
   },
+  discord: {
+    href: '/discord',
+    text: 'Discord',
+  },
   irc: {
     href: '/irc',
     text: 'IRC chat',

From 599ef00635c15d500dfcc1a9c226212000e74707 Mon Sep 17 00:00:00 2001
From: mrfry <mrfry@airmail.cc>
Date: Wed, 24 Feb 2021 15:41:07 +0100
Subject: [PATCH 02/14] removed empty line

---
 .gitignore | 1 -
 1 file changed, 1 deletion(-)

diff --git a/.gitignore b/.gitignore
index 475b938..7c8ed23 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,4 +1,3 @@
 node_modules/
 .next/
 out/
-

From 8e0c03ba360f79c6dbbab30b7f0166fce3174529 Mon Sep 17 00:00:00 2001
From: mrfry <mr.fry@tutanota.com>
Date: Wed, 24 Feb 2021 17:38:58 +0100
Subject: [PATCH 03/14] gitignore added public dir

---
 .gitignore | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.gitignore b/.gitignore
index 7c8ed23..2c8e1d7 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,3 +1,4 @@
 node_modules/
 .next/
 out/
+public/

From 62b35eac68bbadab093a607ef8ceef1c272b3b7e Mon Sep 17 00:00:00 2001
From: mrfry <mr.fry@tutanota.com>
Date: Wed, 3 Mar 2021 14:40:20 +0100
Subject: [PATCH 04/14] Removed discord link

---
 src/pages/index.js | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/src/pages/index.js b/src/pages/index.js
index 2bd4caf..4dcc39d 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -15,10 +15,6 @@ const links = {
     href: '/install',
     text: 'Install',
   },
-  discord: {
-    href: '/discord',
-    text: 'Discord',
-  },
   irc: {
     href: '/irc',
     text: 'IRC chat',

From 64697efc96a3e0f83ed82b0d6d14870db5cd2817 Mon Sep 17 00:00:00 2001
From: mrfry <mr.fry@tutanota.com>
Date: Wed, 3 Mar 2021 18:45:12 +0100
Subject: [PATCH 05/14] Added reactions on news items

---
 .eslintrc.js                          |    2 +-
 src/components/newsEntry.js           |   29 +
 src/components/newsEntry.module.css   |   26 +
 src/components/reactButton.js         |  109 +
 src/components/reactButton.module.css |   37 +
 src/components/tooltip.js             |   13 +
 src/components/tooltip.module.css     |   28 +
 src/data/reactions.json               | 5417 +++++++++++++++++++++++++
 src/pages/index.js                    |  111 +-
 src/pages/index.module.css            |   26 -
 10 files changed, 5711 insertions(+), 87 deletions(-)
 create mode 100644 src/components/newsEntry.js
 create mode 100644 src/components/newsEntry.module.css
 create mode 100644 src/components/reactButton.js
 create mode 100644 src/components/reactButton.module.css
 create mode 100644 src/components/tooltip.js
 create mode 100644 src/components/tooltip.module.css
 create mode 100644 src/data/reactions.json

diff --git a/.eslintrc.js b/.eslintrc.js
index 6d44a27..f572f7a 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -18,7 +18,7 @@ module.exports = {
     'no-prototype-builtins': 'off',
     'id-length': [
       'warn',
-      { exceptions: ['x', 'i', 'j', 't', 'Q', 'A', 'C', 'q', 'a', 'b'] },
+      { exceptions: ['x', 'i', 'j', 't', 'Q', 'A', 'C', 'q', 'a', 'b', 'e'] },
     ],
   },
   root: true,
diff --git a/src/components/newsEntry.js b/src/components/newsEntry.js
new file mode 100644
index 0000000..58228d2
--- /dev/null
+++ b/src/components/newsEntry.js
@@ -0,0 +1,29 @@
+import React from 'react'
+
+import ReactButton from './reactButton.js'
+
+import styles from './newsEntry.module.css'
+
+export default function NewsEntry({ newsKey, newsItem, uid, onReact }) {
+  return (
+    <div>
+      <div className={styles.newsContainer}>
+        <div className={styles.itemNumber}>{newsKey} :</div>
+        <div
+          className={styles.newsTitle}
+          dangerouslySetInnerHTML={{ __html: newsItem.title }}
+        />
+        <div
+          className={styles.newsBody}
+          dangerouslySetInnerHTML={{ __html: newsItem.body }}
+        />
+      </div>
+      <ReactButton
+        existingReacts={newsItem.reacts}
+        uid={uid}
+        onClick={onReact}
+      />
+      <hr />
+    </div>
+  )
+}
diff --git a/src/components/newsEntry.module.css b/src/components/newsEntry.module.css
new file mode 100644
index 0000000..7ac797b
--- /dev/null
+++ b/src/components/newsEntry.module.css
@@ -0,0 +1,26 @@
+.newsBody {
+  margin: 0px 5px;
+  font-size: 18px;
+  color: #fff;
+}
+
+.newsTitle {
+  font-size: 28px;
+  color: var(--text-color);
+  margin: 0px 5px;
+}
+
+.itemNumber {
+  color: #fff;
+  margin: 0px 5px;
+  font-size: 24px;
+}
+
+.newsContainer {
+  margin: 20px 5px;
+}
+
+.newsContainer img {
+  max-width: 100%;
+  min-width: 200px;
+}
diff --git a/src/components/reactButton.js b/src/components/reactButton.js
new file mode 100644
index 0000000..1937463
--- /dev/null
+++ b/src/components/reactButton.js
@@ -0,0 +1,109 @@
+import React, { useState } from 'react'
+
+import Tooltip from './tooltip.js'
+
+import styles from './reactButton.module.css'
+import reactions from '../data/reactions.json'
+
+const breakEvery = 7
+
+function ExistingReacts({ existingReacts, onClick, uid }) {
+  return (
+    <div className={styles.reactionContainer}>
+      <div>React</div>
+      {existingReacts &&
+        Object.keys(existingReacts).map((key) => {
+          const currReact = existingReacts[key]
+          const react = reactions[key]
+          if (!react) {
+            return null
+          }
+          return (
+            <div
+              className={`${currReact.includes(uid) && styles.reacted}`}
+              key={key}
+              onClick={() => {
+                onClick(key, currReact.includes(uid))
+              }}
+            >
+              {react.emoji} {currReact.length}
+            </div>
+          )
+        })}
+    </div>
+  )
+}
+
+function RenderEmojis({ onClick }) {
+  const [search, setSearch] = useState('')
+
+  let index = 0
+  return (
+    <>
+      <input
+        type="text"
+        placeholder="Keresés..."
+        onChange={(event) => {
+          setSearch(event.target.value)
+        }}
+      />
+      {Object.keys(reactions).map((key) => {
+        const reaction = reactions[key]
+        if (!key.includes(search.toLowerCase())) {
+          return null
+        }
+        return (
+          <>
+            {index++ % breakEvery === 0 && (
+              <div key={`${key}_break`} className={styles.break} />
+            )}
+            <div
+              title={key}
+              key={key}
+              onClick={() => {
+                onClick(key)
+              }}
+            >
+              {reaction.emoji}
+            </div>
+          </>
+        )
+      })}
+    </>
+  )
+}
+
+export default function ReactButton({ onClick, existingReacts, uid }) {
+  const [opened, setOpened] = useState(false)
+
+  return (
+    <div
+      onMouseEnter={() => {
+        setOpened(true)
+      }}
+      onMouseLeave={() => {
+        setOpened(false)
+      }}
+    >
+      <Tooltip
+        opened={opened}
+        text={() => (
+          <ExistingReacts
+            uid={uid}
+            onClick={onClick}
+            existingReacts={existingReacts}
+          />
+        )}
+      >
+        <div className={styles.reactionContainer}>
+          <RenderEmojis
+            onClick={(e) => {
+              // setOpened(false)
+              onClick(e)
+            }}
+          />
+        </div>
+      </Tooltip>
+    </div>
+  )
+}
diff --git a/src/components/reactButton.module.css b/src/components/reactButton.module.css
new file mode 100644
index 0000000..03217c8
--- /dev/null
+++ b/src/components/reactButton.module.css
@@ -0,0 +1,37 @@
+.reactionContainer {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.reactionContainer > input {
+  width: 100%;
+  background-color: var(--background-color);
+  color: var(--text-color);
+  border: none;
+  border-radius: 3px;
+  margin: 2px 5px;
+  font-size: 16px;
+}
+
+.reactionContainer > div {
+  margin: 2px 2px;
+  padding: 0px 8px;
+  background-color: #444;
+  border-radius: 6px;
+  cursor: pointer;
+
+  font-size: 18px;
+}
+
+.reactionContainer > div:hover {
+  background-color: #666;
+}
+
+.break {
+  flex-basis: 100%;
+  height: 0;
+}
+
+.reacted {
+  color: yellow;
+}
diff --git a/src/components/tooltip.js b/src/components/tooltip.js
new file mode 100644
index 0000000..a629003
--- /dev/null
+++ b/src/components/tooltip.js
@@ -0,0 +1,13 @@
+import React from 'react'
+import styles from './tooltip.module.css'
+
+export default function Tooltip({ children, text, opened }) {
+  return (
+    <div>
+      <div className={styles.tooltip}>
+        {text()}
+        {opened && <span className={styles.tooltiptext}>{children}</span>}
+      </div>
+    </div>
+  )
+}
diff --git a/src/components/tooltip.module.css b/src/components/tooltip.module.css
new file mode 100644
index 0000000..59d5723
--- /dev/null
+++ b/src/components/tooltip.module.css
@@ -0,0 +1,28 @@
+.tooltip {
+  position: relative;
+  display: inline-block;
+  border-bottom: 1px dotted black;
+}
+
+.tooltip .tooltiptext {
+  width: 280px;
+  height: 250px;
+  max-width: 280px;
+  max-height: 250px;
+  background-color: #555;
+  color: #fff;
+  text-align: center;
+  border-radius: 6px;
+  padding: 5px;
+  position: absolute;
+  z-index: 1;
+  bottom: 100%;
+  left: 0%;
+  margin-left: -60px;
+  transition: opacity 0.3s;
+
+  overflow-y: scroll;
+}
+
+.container {
+}
diff --git a/src/data/reactions.json b/src/data/reactions.json
new file mode 100644
index 0000000..4cc4d06
--- /dev/null
+++ b/src/data/reactions.json
@@ -0,0 +1,5417 @@
+{
+  "grinning face": {
+    "emoji": "😀"
+  },
+  "grinning face with big eyes": {
+    "emoji": "😃"
+  },
+  "grinning face with smiling eyes": {
+    "emoji": "😄"
+  },
+  "beaming face with smiling eyes": {
+    "emoji": "😁"
+  },
+  "grinning squinting face": {
+    "emoji": "😆"
+  },
+  "grinning face with sweat": {
+    "emoji": "😅"
+  },
+  "rolling on the floor laughing": {
+    "emoji": "🤣"
+  },
+  "face with tears of joy": {
+    "emoji": "😂"
+  },
+  "slightly smiling face": {
+    "emoji": "🙂"
+  },
+  "upside-down face": {
+    "emoji": "🙃"
+  },
+  "winking face": {
+    "emoji": "😉"
+  },
+  "smiling face with smiling eyes": {
+    "emoji": "😊"
+  },
+  "smiling face with halo": {
+    "emoji": "😇"
+  },
+  "smiling face with hearts": {
+    "emoji": "🥰"
+  },
+  "smiling face with heart-eyes": {
+    "emoji": "😍"
+  },
+  "star-struck": {
+    "emoji": "🤩"
+  },
+  "face blowing a kiss": {
+    "emoji": "😘"
+  },
+  "kissing face": {
+    "emoji": "😗"
+  },
+  "smiling face": {
+    "emoji": "☺️"
+  },
+  "kissing face with closed eyes": {
+    "emoji": "😚"
+  },
+  "kissing face with smiling eyes": {
+    "emoji": "😙"
+  },
+  "smiling face with tear": {
+    "emoji": "🥲"
+  },
+  "face savoring food": {
+    "emoji": "😋"
+  },
+  "face with tongue": {
+    "emoji": "😛"
+  },
+  "winking face with tongue": {
+    "emoji": "😜"
+  },
+  "zany face": {
+    "emoji": "🤪"
+  },
+  "squinting face with tongue": {
+    "emoji": "😝"
+  },
+  "money-mouth face": {
+    "emoji": "🤑"
+  },
+  "hugging face": {
+    "emoji": "🤗"
+  },
+  "face with hand over mouth": {
+    "emoji": "🤭"
+  },
+  "shushing face": {
+    "emoji": "🤫"
+  },
+  "thinking face": {
+    "emoji": "🤔"
+  },
+  "zipper-mouth face": {
+    "emoji": "🤐"
+  },
+  "face with raised eyebrow": {
+    "emoji": "🤨"
+  },
+  "neutral face": {
+    "emoji": "😐"
+  },
+  "expressionless face": {
+    "emoji": "😑"
+  },
+  "face without mouth": {
+    "emoji": "😶"
+  },
+  "smirking face": {
+    "emoji": "😏"
+  },
+  "unamused face": {
+    "emoji": "😒"
+  },
+  "face with rolling eyes": {
+    "emoji": "🙄"
+  },
+  "grimacing face": {
+    "emoji": "😬"
+  },
+  "lying face": {
+    "emoji": "🤥"
+  },
+  "relieved face": {
+    "emoji": "😌"
+  },
+  "pensive face": {
+    "emoji": "😔"
+  },
+  "sleepy face": {
+    "emoji": "😪"
+  },
+  "drooling face": {
+    "emoji": "🤤"
+  },
+  "sleeping face": {
+    "emoji": "😴"
+  },
+  "face with medical mask": {
+    "emoji": "😷"
+  },
+  "face with thermometer": {
+    "emoji": "🤒"
+  },
+  "face with head-bandage": {
+    "emoji": "🤕"
+  },
+  "nauseated face": {
+    "emoji": "🤢"
+  },
+  "face vomiting": {
+    "emoji": "🤮"
+  },
+  "sneezing face": {
+    "emoji": "🤧"
+  },
+  "hot face": {
+    "emoji": "🥵"
+  },
+  "cold face": {
+    "emoji": "🥶"
+  },
+  "woozy face": {
+    "emoji": "🥴"
+  },
+  "dizzy face": {
+    "emoji": "😵"
+  },
+  "exploding head": {
+    "emoji": "🤯"
+  },
+  "cowboy hat face": {
+    "emoji": "🤠"
+  },
+  "partying face": {
+    "emoji": "🥳"
+  },
+  "disguised face": {
+    "emoji": "🥸"
+  },
+  "smiling face with sunglasses": {
+    "emoji": "😎"
+  },
+  "nerd face": {
+    "emoji": "🤓"
+  },
+  "face with monocle": {
+    "emoji": "🧐"
+  },
+  "confused face": {
+    "emoji": "😕"
+  },
+  "worried face": {
+    "emoji": "😟"
+  },
+  "slightly frowning face": {
+    "emoji": "🙁"
+  },
+  "frowning face": {
+    "emoji": "☹️"
+  },
+  "face with open mouth": {
+    "emoji": "😮"
+  },
+  "hushed face": {
+    "emoji": "😯"
+  },
+  "astonished face": {
+    "emoji": "😲"
+  },
+  "flushed face": {
+    "emoji": "😳"
+  },
+  "pleading face": {
+    "emoji": "🥺"
+  },
+  "frowning face with open mouth": {
+    "emoji": "😦"
+  },
+  "anguished face": {
+    "emoji": "😧"
+  },
+  "fearful face": {
+    "emoji": "😨"
+  },
+  "anxious face with sweat": {
+    "emoji": "😰"
+  },
+  "sad but relieved face": {
+    "emoji": "😥"
+  },
+  "crying face": {
+    "emoji": "😢"
+  },
+  "loudly crying face": {
+    "emoji": "😭"
+  },
+  "face screaming in fear": {
+    "emoji": "😱"
+  },
+  "confounded face": {
+    "emoji": "😖"
+  },
+  "persevering face": {
+    "emoji": "😣"
+  },
+  "disappointed face": {
+    "emoji": "😞"
+  },
+  "downcast face with sweat": {
+    "emoji": "😓"
+  },
+  "weary face": {
+    "emoji": "😩"
+  },
+  "tired face": {
+    "emoji": "😫"
+  },
+  "yawning face": {
+    "emoji": "🥱"
+  },
+  "face with steam from nose": {
+    "emoji": "😤"
+  },
+  "pouting face": {
+    "emoji": "😡"
+  },
+  "angry face": {
+    "emoji": "😠"
+  },
+  "face with symbols on mouth": {
+    "emoji": "🤬"
+  },
+  "smiling face with horns": {
+    "emoji": "😈"
+  },
+  "angry face with horns": {
+    "emoji": "👿"
+  },
+  "skull": {
+    "emoji": "💀"
+  },
+  "skull and crossbones": {
+    "emoji": "☠️"
+  },
+  "pile of poo": {
+    "emoji": "💩"
+  },
+  "clown face": {
+    "emoji": "🤡"
+  },
+  "ogre": {
+    "emoji": "👹"
+  },
+  "goblin": {
+    "emoji": "👺"
+  },
+  "ghost": {
+    "emoji": "👻"
+  },
+  "alien": {
+    "emoji": "👽"
+  },
+  "alien monster": {
+    "emoji": "👾"
+  },
+  "robot": {
+    "emoji": "🤖"
+  },
+  "grinning cat": {
+    "emoji": "😺"
+  },
+  "grinning cat with smiling eyes": {
+    "emoji": "😸"
+  },
+  "cat with tears of joy": {
+    "emoji": "😹"
+  },
+  "smiling cat with heart-eyes": {
+    "emoji": "😻"
+  },
+  "cat with wry smile": {
+    "emoji": "😼"
+  },
+  "kissing cat": {
+    "emoji": "😽"
+  },
+  "weary cat": {
+    "emoji": "🙀"
+  },
+  "crying cat": {
+    "emoji": "😿"
+  },
+  "pouting cat": {
+    "emoji": "😾"
+  },
+  "see-no-evil monkey": {
+    "emoji": "🙈"
+  },
+  "hear-no-evil monkey": {
+    "emoji": "🙉"
+  },
+  "speak-no-evil monkey": {
+    "emoji": "🙊"
+  },
+  "kiss mark": {
+    "emoji": "💋"
+  },
+  "love letter": {
+    "emoji": "💌"
+  },
+  "heart with arrow": {
+    "emoji": "💘"
+  },
+  "heart with ribbon": {
+    "emoji": "💝"
+  },
+  "sparkling heart": {
+    "emoji": "💖"
+  },
+  "growing heart": {
+    "emoji": "💗"
+  },
+  "beating heart": {
+    "emoji": "💓"
+  },
+  "revolving hearts": {
+    "emoji": "💞"
+  },
+  "two hearts": {
+    "emoji": "💕"
+  },
+  "heart decoration": {
+    "emoji": "💟"
+  },
+  "heart exclamation": {
+    "emoji": "❣️"
+  },
+  "broken heart": {
+    "emoji": "💔"
+  },
+  "red heart": {
+    "emoji": "❤️"
+  },
+  "orange heart": {
+    "emoji": "🧡"
+  },
+  "yellow heart": {
+    "emoji": "💛"
+  },
+  "green heart": {
+    "emoji": "💚"
+  },
+  "blue heart": {
+    "emoji": "💙"
+  },
+  "purple heart": {
+    "emoji": "💜"
+  },
+  "brown heart": {
+    "emoji": "🤎"
+  },
+  "black heart": {
+    "emoji": "🖤"
+  },
+  "white heart": {
+    "emoji": "🤍"
+  },
+  "hundred points": {
+    "emoji": "💯"
+  },
+  "anger symbol": {
+    "emoji": "💢"
+  },
+  "collision": {
+    "emoji": "💥"
+  },
+  "dizzy": {
+    "emoji": "💫"
+  },
+  "sweat droplets": {
+    "emoji": "💦"
+  },
+  "dashing away": {
+    "emoji": "💨"
+  },
+  "hole": {
+    "emoji": "🕳️"
+  },
+  "bomb": {
+    "emoji": "💣"
+  },
+  "speech balloon": {
+    "emoji": "💬"
+  },
+  "eye in speech bubble": {
+    "emoji": "👁️‍🗨️"
+  },
+  "left speech bubble": {
+    "emoji": "🗨️"
+  },
+  "right anger bubble": {
+    "emoji": "🗯️"
+  },
+  "thought balloon": {
+    "emoji": "💭"
+  },
+  "zzz": {
+    "emoji": "💤"
+  },
+  "waving hand": {
+    "emoji": "👋"
+  },
+  "raised back of hand": {
+    "emoji": "🤚"
+  },
+  "hand with fingers splayed": {
+    "emoji": "🖐️"
+  },
+  "raised hand": {
+    "emoji": "✋"
+  },
+  "vulcan salute": {
+    "emoji": "🖖"
+  },
+  "OK hand": {
+    "emoji": "👌"
+  },
+  "pinched fingers": {
+    "emoji": "🤌"
+  },
+  "pinching hand": {
+    "emoji": "🤏"
+  },
+  "victory hand": {
+    "emoji": "✌️"
+  },
+  "crossed fingers": {
+    "emoji": "🤞"
+  },
+  "love-you gesture": {
+    "emoji": "🤟"
+  },
+  "sign of the horns": {
+    "emoji": "🤘"
+  },
+  "call me hand": {
+    "emoji": "🤙"
+  },
+  "backhand index pointing left": {
+    "emoji": "👈"
+  },
+  "backhand index pointing right": {
+    "emoji": "👉"
+  },
+  "backhand index pointing up": {
+    "emoji": "👆"
+  },
+  "middle finger": {
+    "emoji": "🖕"
+  },
+  "backhand index pointing down": {
+    "emoji": "👇"
+  },
+  "index pointing up": {
+    "emoji": "☝️"
+  },
+  "thumbs up": {
+    "emoji": "👍"
+  },
+  "thumbs down": {
+    "emoji": "👎"
+  },
+  "raised fist": {
+    "emoji": "✊"
+  },
+  "oncoming fist": {
+    "emoji": "👊"
+  },
+  "left-facing fist": {
+    "emoji": "🤛"
+  },
+  "right-facing fist": {
+    "emoji": "🤜"
+  },
+  "clapping hands": {
+    "emoji": "👏"
+  },
+  "raising hands": {
+    "emoji": "🙌"
+  },
+  "open hands": {
+    "emoji": "👐"
+  },
+  "palms up together": {
+    "emoji": "🤲"
+  },
+  "handshake": {
+    "emoji": "🤝"
+  },
+  "folded hands": {
+    "emoji": "🙏"
+  },
+  "writing hand": {
+    "emoji": "✍️"
+  },
+  "nail polish": {
+    "emoji": "💅"
+  },
+  "selfie": {
+    "emoji": "🤳"
+  },
+  "flexed biceps": {
+    "emoji": "💪"
+  },
+  "mechanical arm": {
+    "emoji": "🦾"
+  },
+  "mechanical leg": {
+    "emoji": "🦿"
+  },
+  "leg": {
+    "emoji": "🦵"
+  },
+  "foot": {
+    "emoji": "🦶"
+  },
+  "ear": {
+    "emoji": "👂"
+  },
+  "ear with hearing aid": {
+    "emoji": "🦻"
+  },
+  "nose": {
+    "emoji": "👃"
+  },
+  "brain": {
+    "emoji": "🧠"
+  },
+  "anatomical heart": {
+    "emoji": "🫀"
+  },
+  "lungs": {
+    "emoji": "🫁"
+  },
+  "tooth": {
+    "emoji": "🦷"
+  },
+  "bone": {
+    "emoji": "🦴"
+  },
+  "eyes": {
+    "emoji": "👀"
+  },
+  "eye": {
+    "emoji": "👁️"
+  },
+  "tongue": {
+    "emoji": "👅"
+  },
+  "mouth": {
+    "emoji": "👄"
+  },
+  "baby": {
+    "emoji": "👶"
+  },
+  "child": {
+    "emoji": "🧒"
+  },
+  "boy": {
+    "emoji": "👦"
+  },
+  "girl": {
+    "emoji": "👧"
+  },
+  "person": {
+    "emoji": "🧑"
+  },
+  "person: blond hair": {
+    "emoji": "👱"
+  },
+  "man": {
+    "emoji": "👨"
+  },
+  "man: beard": {
+    "emoji": "🧔"
+  },
+  "man: red hair": {
+    "emoji": "👨‍🦰"
+  },
+  "man: curly hair": {
+    "emoji": "👨‍🦱"
+  },
+  "man: white hair": {
+    "emoji": "👨‍🦳"
+  },
+  "man: bald": {
+    "emoji": "👨‍🦲"
+  },
+  "woman": {
+    "emoji": "👩"
+  },
+  "woman: red hair": {
+    "emoji": "👩‍🦰"
+  },
+  "person: red hair": {
+    "emoji": "🧑‍🦰"
+  },
+  "woman: curly hair": {
+    "emoji": "👩‍🦱"
+  },
+  "person: curly hair": {
+    "emoji": "🧑‍🦱"
+  },
+  "woman: white hair": {
+    "emoji": "👩‍🦳"
+  },
+  "person: white hair": {
+    "emoji": "🧑‍🦳"
+  },
+  "woman: bald": {
+    "emoji": "👩‍🦲"
+  },
+  "person: bald": {
+    "emoji": "🧑‍🦲"
+  },
+  "woman: blond hair": {
+    "emoji": "👱‍♀️"
+  },
+  "man: blond hair": {
+    "emoji": "👱‍♂️"
+  },
+  "older person": {
+    "emoji": "🧓"
+  },
+  "old man": {
+    "emoji": "👴"
+  },
+  "old woman": {
+    "emoji": "👵"
+  },
+  "person frowning": {
+    "emoji": "🙍"
+  },
+  "man frowning": {
+    "emoji": "🙍‍♂️"
+  },
+  "woman frowning": {
+    "emoji": "🙍‍♀️"
+  },
+  "person pouting": {
+    "emoji": "🙎"
+  },
+  "man pouting": {
+    "emoji": "🙎‍♂️"
+  },
+  "woman pouting": {
+    "emoji": "🙎‍♀️"
+  },
+  "person gesturing NO": {
+    "emoji": "🙅"
+  },
+  "man gesturing NO": {
+    "emoji": "🙅‍♂️"
+  },
+  "woman gesturing NO": {
+    "emoji": "🙅‍♀️"
+  },
+  "person gesturing OK": {
+    "emoji": "🙆"
+  },
+  "man gesturing OK": {
+    "emoji": "🙆‍♂️"
+  },
+  "woman gesturing OK": {
+    "emoji": "🙆‍♀️"
+  },
+  "person tipping hand": {
+    "emoji": "💁"
+  },
+  "man tipping hand": {
+    "emoji": "💁‍♂️"
+  },
+  "woman tipping hand": {
+    "emoji": "💁‍♀️"
+  },
+  "person raising hand": {
+    "emoji": "🙋"
+  },
+  "man raising hand": {
+    "emoji": "🙋‍♂️"
+  },
+  "woman raising hand": {
+    "emoji": "🙋‍♀️"
+  },
+  "deaf person": {
+    "emoji": "🧏"
+  },
+  "deaf man": {
+    "emoji": "🧏‍♂️"
+  },
+  "deaf woman": {
+    "emoji": "🧏‍♀️"
+  },
+  "person bowing": {
+    "emoji": "🙇"
+  },
+  "man bowing": {
+    "emoji": "🙇‍♂️"
+  },
+  "woman bowing": {
+    "emoji": "🙇‍♀️"
+  },
+  "person facepalming": {
+    "emoji": "🤦"
+  },
+  "man facepalming": {
+    "emoji": "🤦‍♂️"
+  },
+  "woman facepalming": {
+    "emoji": "🤦‍♀️"
+  },
+  "person shrugging": {
+    "emoji": "🤷"
+  },
+  "man shrugging": {
+    "emoji": "🤷‍♂️"
+  },
+  "woman shrugging": {
+    "emoji": "🤷‍♀️"
+  },
+  "health worker": {
+    "emoji": "🧑‍⚕️"
+  },
+  "man health worker": {
+    "emoji": "👨‍⚕️"
+  },
+  "woman health worker": {
+    "emoji": "👩‍⚕️"
+  },
+  "student": {
+    "emoji": "🧑‍🎓"
+  },
+  "man student": {
+    "emoji": "👨‍🎓"
+  },
+  "woman student": {
+    "emoji": "👩‍🎓"
+  },
+  "teacher": {
+    "emoji": "🧑‍🏫"
+  },
+  "man teacher": {
+    "emoji": "👨‍🏫"
+  },
+  "woman teacher": {
+    "emoji": "👩‍🏫"
+  },
+  "judge": {
+    "emoji": "🧑‍⚖️"
+  },
+  "man judge": {
+    "emoji": "👨‍⚖️"
+  },
+  "woman judge": {
+    "emoji": "👩‍⚖️"
+  },
+  "farmer": {
+    "emoji": "🧑‍🌾"
+  },
+  "man farmer": {
+    "emoji": "👨‍🌾"
+  },
+  "woman farmer": {
+    "emoji": "👩‍🌾"
+  },
+  "cook": {
+    "emoji": "🧑‍🍳"
+  },
+  "man cook": {
+    "emoji": "👨‍🍳"
+  },
+  "woman cook": {
+    "emoji": "👩‍🍳"
+  },
+  "mechanic": {
+    "emoji": "🧑‍🔧"
+  },
+  "man mechanic": {
+    "emoji": "👨‍🔧"
+  },
+  "woman mechanic": {
+    "emoji": "👩‍🔧"
+  },
+  "factory worker": {
+    "emoji": "🧑‍🏭"
+  },
+  "man factory worker": {
+    "emoji": "👨‍🏭"
+  },
+  "woman factory worker": {
+    "emoji": "👩‍🏭"
+  },
+  "office worker": {
+    "emoji": "🧑‍💼"
+  },
+  "man office worker": {
+    "emoji": "👨‍💼"
+  },
+  "woman office worker": {
+    "emoji": "👩‍💼"
+  },
+  "scientist": {
+    "emoji": "🧑‍🔬"
+  },
+  "man scientist": {
+    "emoji": "👨‍🔬"
+  },
+  "woman scientist": {
+    "emoji": "👩‍🔬"
+  },
+  "technologist": {
+    "emoji": "🧑‍💻"
+  },
+  "man technologist": {
+    "emoji": "👨‍💻"
+  },
+  "woman technologist": {
+    "emoji": "👩‍💻"
+  },
+  "singer": {
+    "emoji": "🧑‍🎤"
+  },
+  "man singer": {
+    "emoji": "👨‍🎤"
+  },
+  "woman singer": {
+    "emoji": "👩‍🎤"
+  },
+  "artist": {
+    "emoji": "🧑‍🎨"
+  },
+  "man artist": {
+    "emoji": "👨‍🎨"
+  },
+  "woman artist": {
+    "emoji": "👩‍🎨"
+  },
+  "pilot": {
+    "emoji": "🧑‍✈️"
+  },
+  "man pilot": {
+    "emoji": "👨‍✈️"
+  },
+  "woman pilot": {
+    "emoji": "👩‍✈️"
+  },
+  "astronaut": {
+    "emoji": "🧑‍🚀"
+  },
+  "man astronaut": {
+    "emoji": "👨‍🚀"
+  },
+  "woman astronaut": {
+    "emoji": "👩‍🚀"
+  },
+  "firefighter": {
+    "emoji": "🧑‍🚒"
+  },
+  "man firefighter": {
+    "emoji": "👨‍🚒"
+  },
+  "woman firefighter": {
+    "emoji": "👩‍🚒"
+  },
+  "police officer": {
+    "emoji": "👮"
+  },
+  "man police officer": {
+    "emoji": "👮‍♂️"
+  },
+  "woman police officer": {
+    "emoji": "👮‍♀️"
+  },
+  "detective": {
+    "emoji": "🕵️"
+  },
+  "man detective": {
+    "emoji": "🕵️‍♂️"
+  },
+  "woman detective": {
+    "emoji": "🕵️‍♀️"
+  },
+  "guard": {
+    "emoji": "💂"
+  },
+  "man guard": {
+    "emoji": "💂‍♂️"
+  },
+  "woman guard": {
+    "emoji": "💂‍♀️"
+  },
+  "ninja": {
+    "emoji": "🥷"
+  },
+  "construction worker": {
+    "emoji": "👷"
+  },
+  "man construction worker": {
+    "emoji": "👷‍♂️"
+  },
+  "woman construction worker": {
+    "emoji": "👷‍♀️"
+  },
+  "prince": {
+    "emoji": "🤴"
+  },
+  "princess": {
+    "emoji": "👸"
+  },
+  "person wearing turban": {
+    "emoji": "👳"
+  },
+  "man wearing turban": {
+    "emoji": "👳‍♂️"
+  },
+  "woman wearing turban": {
+    "emoji": "👳‍♀️"
+  },
+  "person with skullcap": {
+    "emoji": "👲"
+  },
+  "woman with headscarf": {
+    "emoji": "🧕"
+  },
+  "person in tuxedo": {
+    "emoji": "🤵"
+  },
+  "man in tuxedo": {
+    "emoji": "🤵‍♂️"
+  },
+  "woman in tuxedo": {
+    "emoji": "🤵‍♀️"
+  },
+  "person with veil": {
+    "emoji": "👰"
+  },
+  "man with veil": {
+    "emoji": "👰‍♂️"
+  },
+  "woman with veil": {
+    "emoji": "👰‍♀️"
+  },
+  "pregnant woman": {
+    "emoji": "🤰"
+  },
+  "breast-feeding": {
+    "emoji": "🤱"
+  },
+  "woman feeding baby": {
+    "emoji": "👩‍🍼"
+  },
+  "man feeding baby": {
+    "emoji": "👨‍🍼"
+  },
+  "person feeding baby": {
+    "emoji": "🧑‍🍼"
+  },
+  "baby angel": {
+    "emoji": "👼"
+  },
+  "Santa Claus": {
+    "emoji": "🎅"
+  },
+  "Mrs. Claus": {
+    "emoji": "🤶"
+  },
+  "mx claus": {
+    "emoji": "🧑‍🎄"
+  },
+  "superhero": {
+    "emoji": "🦸"
+  },
+  "man superhero": {
+    "emoji": "🦸‍♂️"
+  },
+  "woman superhero": {
+    "emoji": "🦸‍♀️"
+  },
+  "supervillain": {
+    "emoji": "🦹"
+  },
+  "man supervillain": {
+    "emoji": "🦹‍♂️"
+  },
+  "woman supervillain": {
+    "emoji": "🦹‍♀️"
+  },
+  "mage": {
+    "emoji": "🧙"
+  },
+  "man mage": {
+    "emoji": "🧙‍♂️"
+  },
+  "woman mage": {
+    "emoji": "🧙‍♀️"
+  },
+  "fairy": {
+    "emoji": "🧚"
+  },
+  "man fairy": {
+    "emoji": "🧚‍♂️"
+  },
+  "woman fairy": {
+    "emoji": "🧚‍♀️"
+  },
+  "vampire": {
+    "emoji": "🧛"
+  },
+  "man vampire": {
+    "emoji": "🧛‍♂️"
+  },
+  "woman vampire": {
+    "emoji": "🧛‍♀️"
+  },
+  "merperson": {
+    "emoji": "🧜"
+  },
+  "merman": {
+    "emoji": "🧜‍♂️"
+  },
+  "mermaid": {
+    "emoji": "🧜‍♀️"
+  },
+  "elf": {
+    "emoji": "🧝"
+  },
+  "man elf": {
+    "emoji": "🧝‍♂️"
+  },
+  "woman elf": {
+    "emoji": "🧝‍♀️"
+  },
+  "genie": {
+    "emoji": "🧞"
+  },
+  "man genie": {
+    "emoji": "🧞‍♂️"
+  },
+  "woman genie": {
+    "emoji": "🧞‍♀️"
+  },
+  "zombie": {
+    "emoji": "🧟"
+  },
+  "man zombie": {
+    "emoji": "🧟‍♂️"
+  },
+  "woman zombie": {
+    "emoji": "🧟‍♀️"
+  },
+  "person getting massage": {
+    "emoji": "💆"
+  },
+  "man getting massage": {
+    "emoji": "💆‍♂️"
+  },
+  "woman getting massage": {
+    "emoji": "💆‍♀️"
+  },
+  "person getting haircut": {
+    "emoji": "💇"
+  },
+  "man getting haircut": {
+    "emoji": "💇‍♂️"
+  },
+  "woman getting haircut": {
+    "emoji": "💇‍♀️"
+  },
+  "person walking": {
+    "emoji": "🚶"
+  },
+  "man walking": {
+    "emoji": "🚶‍♂️"
+  },
+  "woman walking": {
+    "emoji": "🚶‍♀️"
+  },
+  "person standing": {
+    "emoji": "🧍"
+  },
+  "man standing": {
+    "emoji": "🧍‍♂️"
+  },
+  "woman standing": {
+    "emoji": "🧍‍♀️"
+  },
+  "person kneeling": {
+    "emoji": "🧎"
+  },
+  "man kneeling": {
+    "emoji": "🧎‍♂️"
+  },
+  "woman kneeling": {
+    "emoji": "🧎‍♀️"
+  },
+  "person with white cane": {
+    "emoji": "🧑‍🦯"
+  },
+  "man with white cane": {
+    "emoji": "👨‍🦯"
+  },
+  "woman with white cane": {
+    "emoji": "👩‍🦯"
+  },
+  "person in motorized wheelchair": {
+    "emoji": "🧑‍🦼"
+  },
+  "man in motorized wheelchair": {
+    "emoji": "👨‍🦼"
+  },
+  "woman in motorized wheelchair": {
+    "emoji": "👩‍🦼"
+  },
+  "person in manual wheelchair": {
+    "emoji": "🧑‍🦽"
+  },
+  "man in manual wheelchair": {
+    "emoji": "👨‍🦽"
+  },
+  "woman in manual wheelchair": {
+    "emoji": "👩‍🦽"
+  },
+  "person running": {
+    "emoji": "🏃"
+  },
+  "man running": {
+    "emoji": "🏃‍♂️"
+  },
+  "woman running": {
+    "emoji": "🏃‍♀️"
+  },
+  "woman dancing": {
+    "emoji": "💃"
+  },
+  "man dancing": {
+    "emoji": "🕺"
+  },
+  "person in suit levitating": {
+    "emoji": "🕴️"
+  },
+  "people with bunny ears": {
+    "emoji": "👯"
+  },
+  "men with bunny ears": {
+    "emoji": "👯‍♂️"
+  },
+  "women with bunny ears": {
+    "emoji": "👯‍♀️"
+  },
+  "person in steamy room": {
+    "emoji": "🧖"
+  },
+  "man in steamy room": {
+    "emoji": "🧖‍♂️"
+  },
+  "woman in steamy room": {
+    "emoji": "🧖‍♀️"
+  },
+  "person climbing": {
+    "emoji": "🧗"
+  },
+  "man climbing": {
+    "emoji": "🧗‍♂️"
+  },
+  "woman climbing": {
+    "emoji": "🧗‍♀️"
+  },
+  "person fencing": {
+    "emoji": "🤺"
+  },
+  "horse racing": {
+    "emoji": "🏇"
+  },
+  "skier": {
+    "emoji": "⛷️"
+  },
+  "snowboarder": {
+    "emoji": "🏂"
+  },
+  "person golfing": {
+    "emoji": "🏌️"
+  },
+  "man golfing": {
+    "emoji": "🏌️‍♂️"
+  },
+  "woman golfing": {
+    "emoji": "🏌️‍♀️"
+  },
+  "person surfing": {
+    "emoji": "🏄"
+  },
+  "man surfing": {
+    "emoji": "🏄‍♂️"
+  },
+  "woman surfing": {
+    "emoji": "🏄‍♀️"
+  },
+  "person rowing boat": {
+    "emoji": "🚣"
+  },
+  "man rowing boat": {
+    "emoji": "🚣‍♂️"
+  },
+  "woman rowing boat": {
+    "emoji": "🚣‍♀️"
+  },
+  "person swimming": {
+    "emoji": "🏊"
+  },
+  "man swimming": {
+    "emoji": "🏊‍♂️"
+  },
+  "woman swimming": {
+    "emoji": "🏊‍♀️"
+  },
+  "person bouncing ball": {
+    "emoji": "⛹️"
+  },
+  "man bouncing ball": {
+    "emoji": "⛹️‍♂️"
+  },
+  "woman bouncing ball": {
+    "emoji": "⛹️‍♀️"
+  },
+  "person lifting weights": {
+    "emoji": "🏋️"
+  },
+  "man lifting weights": {
+    "emoji": "🏋️‍♂️"
+  },
+  "woman lifting weights": {
+    "emoji": "🏋️‍♀️"
+  },
+  "person biking": {
+    "emoji": "🚴"
+  },
+  "man biking": {
+    "emoji": "🚴‍♂️"
+  },
+  "woman biking": {
+    "emoji": "🚴‍♀️"
+  },
+  "person mountain biking": {
+    "emoji": "🚵"
+  },
+  "man mountain biking": {
+    "emoji": "🚵‍♂️"
+  },
+  "woman mountain biking": {
+    "emoji": "🚵‍♀️"
+  },
+  "person cartwheeling": {
+    "emoji": "🤸"
+  },
+  "man cartwheeling": {
+    "emoji": "🤸‍♂️"
+  },
+  "woman cartwheeling": {
+    "emoji": "🤸‍♀️"
+  },
+  "people wrestling": {
+    "emoji": "🤼"
+  },
+  "men wrestling": {
+    "emoji": "🤼‍♂️"
+  },
+  "women wrestling": {
+    "emoji": "🤼‍♀️"
+  },
+  "person playing water polo": {
+    "emoji": "🤽"
+  },
+  "man playing water polo": {
+    "emoji": "🤽‍♂️"
+  },
+  "woman playing water polo": {
+    "emoji": "🤽‍♀️"
+  },
+  "person playing handball": {
+    "emoji": "🤾"
+  },
+  "man playing handball": {
+    "emoji": "🤾‍♂️"
+  },
+  "woman playing handball": {
+    "emoji": "🤾‍♀️"
+  },
+  "person juggling": {
+    "emoji": "🤹"
+  },
+  "man juggling": {
+    "emoji": "🤹‍♂️"
+  },
+  "woman juggling": {
+    "emoji": "🤹‍♀️"
+  },
+  "person in lotus position": {
+    "emoji": "🧘"
+  },
+  "man in lotus position": {
+    "emoji": "🧘‍♂️"
+  },
+  "woman in lotus position": {
+    "emoji": "🧘‍♀️"
+  },
+  "person taking bath": {
+    "emoji": "🛀"
+  },
+  "person in bed": {
+    "emoji": "🛌"
+  },
+  "people holding hands": {
+    "emoji": "🧑‍🤝‍🧑"
+  },
+  "women holding hands": {
+    "emoji": "👭"
+  },
+  "woman and man holding hands": {
+    "emoji": "👫"
+  },
+  "men holding hands": {
+    "emoji": "👬"
+  },
+  "kiss": {
+    "emoji": "💏"
+  },
+  "kiss: woman, man": {
+    "emoji": "👩‍❤️‍💋‍👨"
+  },
+  "kiss: man, man": {
+    "emoji": "👨‍❤️‍💋‍👨"
+  },
+  "kiss: woman, woman": {
+    "emoji": "👩‍❤️‍💋‍👩"
+  },
+  "couple with heart": {
+    "emoji": "💑"
+  },
+  "couple with heart: woman, man": {
+    "emoji": "👩‍❤️‍👨"
+  },
+  "couple with heart: man, man": {
+    "emoji": "👨‍❤️‍👨"
+  },
+  "couple with heart: woman, woman": {
+    "emoji": "👩‍❤️‍👩"
+  },
+  "family": {
+    "emoji": "👪"
+  },
+  "family: man, woman, boy": {
+    "emoji": "👨‍👩‍👦"
+  },
+  "family: man, woman, girl": {
+    "emoji": "👨‍👩‍👧"
+  },
+  "family: man, woman, girl, boy": {
+    "emoji": "👨‍👩‍👧‍👦"
+  },
+  "family: man, woman, boy, boy": {
+    "emoji": "👨‍👩‍👦‍👦"
+  },
+  "family: man, woman, girl, girl": {
+    "emoji": "👨‍👩‍👧‍👧"
+  },
+  "family: man, man, boy": {
+    "emoji": "👨‍👨‍👦"
+  },
+  "family: man, man, girl": {
+    "emoji": "👨‍👨‍👧"
+  },
+  "family: man, man, girl, boy": {
+    "emoji": "👨‍👨‍👧‍👦"
+  },
+  "family: man, man, boy, boy": {
+    "emoji": "👨‍👨‍👦‍👦"
+  },
+  "family: man, man, girl, girl": {
+    "emoji": "👨‍👨‍👧‍👧"
+  },
+  "family: woman, woman, boy": {
+    "emoji": "👩‍👩‍👦"
+  },
+  "family: woman, woman, girl": {
+    "emoji": "👩‍👩‍👧"
+  },
+  "family: woman, woman, girl, boy": {
+    "emoji": "👩‍👩‍👧‍👦"
+  },
+  "family: woman, woman, boy, boy": {
+    "emoji": "👩‍👩‍👦‍👦"
+  },
+  "family: woman, woman, girl, girl": {
+    "emoji": "👩‍👩‍👧‍👧"
+  },
+  "family: man, boy": {
+    "emoji": "👨‍👦"
+  },
+  "family: man, boy, boy": {
+    "emoji": "👨‍👦‍👦"
+  },
+  "family: man, girl": {
+    "emoji": "👨‍👧"
+  },
+  "family: man, girl, boy": {
+    "emoji": "👨‍👧‍👦"
+  },
+  "family: man, girl, girl": {
+    "emoji": "👨‍👧‍👧"
+  },
+  "family: woman, boy": {
+    "emoji": "👩‍👦"
+  },
+  "family: woman, boy, boy": {
+    "emoji": "👩‍👦‍👦"
+  },
+  "family: woman, girl": {
+    "emoji": "👩‍👧"
+  },
+  "family: woman, girl, boy": {
+    "emoji": "👩‍👧‍👦"
+  },
+  "family: woman, girl, girl": {
+    "emoji": "👩‍👧‍👧"
+  },
+  "speaking head": {
+    "emoji": "🗣️"
+  },
+  "bust in silhouette": {
+    "emoji": "👤"
+  },
+  "busts in silhouette": {
+    "emoji": "👥"
+  },
+  "people hugging": {
+    "emoji": "🫂"
+  },
+  "footprints": {
+    "emoji": "👣"
+  },
+  "monkey face": {
+    "emoji": "🐵"
+  },
+  "monkey": {
+    "emoji": "🐒"
+  },
+  "gorilla": {
+    "emoji": "🦍"
+  },
+  "orangutan": {
+    "emoji": "🦧"
+  },
+  "dog face": {
+    "emoji": "🐶"
+  },
+  "dog": {
+    "emoji": "🐕"
+  },
+  "guide dog": {
+    "emoji": "🦮"
+  },
+  "service dog": {
+    "emoji": "🐕‍🦺"
+  },
+  "poodle": {
+    "emoji": "🐩"
+  },
+  "wolf": {
+    "emoji": "🐺"
+  },
+  "fox": {
+    "emoji": "🦊"
+  },
+  "raccoon": {
+    "emoji": "🦝"
+  },
+  "cat face": {
+    "emoji": "🐱"
+  },
+  "cat": {
+    "emoji": "🐈"
+  },
+  "black cat": {
+    "emoji": "🐈‍⬛"
+  },
+  "lion": {
+    "emoji": "🦁"
+  },
+  "tiger face": {
+    "emoji": "🐯"
+  },
+  "tiger": {
+    "emoji": "🐅"
+  },
+  "leopard": {
+    "emoji": "🐆"
+  },
+  "horse face": {
+    "emoji": "🐴"
+  },
+  "horse": {
+    "emoji": "🐎"
+  },
+  "unicorn": {
+    "emoji": "🦄"
+  },
+  "zebra": {
+    "emoji": "🦓"
+  },
+  "deer": {
+    "emoji": "🦌"
+  },
+  "bison": {
+    "emoji": "🦬"
+  },
+  "cow face": {
+    "emoji": "🐮"
+  },
+  "ox": {
+    "emoji": "🐂"
+  },
+  "water buffalo": {
+    "emoji": "🐃"
+  },
+  "cow": {
+    "emoji": "🐄"
+  },
+  "pig face": {
+    "emoji": "🐷"
+  },
+  "pig": {
+    "emoji": "🐖"
+  },
+  "boar": {
+    "emoji": "🐗"
+  },
+  "pig nose": {
+    "emoji": "🐽"
+  },
+  "ram": {
+    "emoji": "🐏"
+  },
+  "ewe": {
+    "emoji": "🐑"
+  },
+  "goat": {
+    "emoji": "🐐"
+  },
+  "camel": {
+    "emoji": "🐪"
+  },
+  "two-hump camel": {
+    "emoji": "🐫"
+  },
+  "llama": {
+    "emoji": "🦙"
+  },
+  "giraffe": {
+    "emoji": "🦒"
+  },
+  "elephant": {
+    "emoji": "🐘"
+  },
+  "mammoth": {
+    "emoji": "🦣"
+  },
+  "rhinoceros": {
+    "emoji": "🦏"
+  },
+  "hippopotamus": {
+    "emoji": "🦛"
+  },
+  "mouse face": {
+    "emoji": "🐭"
+  },
+  "mouse": {
+    "emoji": "🐁"
+  },
+  "rat": {
+    "emoji": "🐀"
+  },
+  "hamster": {
+    "emoji": "🐹"
+  },
+  "rabbit face": {
+    "emoji": "🐰"
+  },
+  "rabbit": {
+    "emoji": "🐇"
+  },
+  "chipmunk": {
+    "emoji": "🐿️"
+  },
+  "beaver": {
+    "emoji": "🦫"
+  },
+  "hedgehog": {
+    "emoji": "🦔"
+  },
+  "bat": {
+    "emoji": "🦇"
+  },
+  "bear": {
+    "emoji": "🐻"
+  },
+  "polar bear": {
+    "emoji": "🐻‍❄️"
+  },
+  "koala": {
+    "emoji": "🐨"
+  },
+  "panda": {
+    "emoji": "🐼"
+  },
+  "sloth": {
+    "emoji": "🦥"
+  },
+  "otter": {
+    "emoji": "🦦"
+  },
+  "skunk": {
+    "emoji": "🦨"
+  },
+  "kangaroo": {
+    "emoji": "🦘"
+  },
+  "badger": {
+    "emoji": "🦡"
+  },
+  "paw prints": {
+    "emoji": "🐾"
+  },
+  "turkey": {
+    "emoji": "🦃"
+  },
+  "chicken": {
+    "emoji": "🐔"
+  },
+  "rooster": {
+    "emoji": "🐓"
+  },
+  "hatching chick": {
+    "emoji": "🐣"
+  },
+  "baby chick": {
+    "emoji": "🐤"
+  },
+  "front-facing baby chick": {
+    "emoji": "🐥"
+  },
+  "bird": {
+    "emoji": "🐦"
+  },
+  "penguin": {
+    "emoji": "🐧"
+  },
+  "dove": {
+    "emoji": "🕊️"
+  },
+  "eagle": {
+    "emoji": "🦅"
+  },
+  "duck": {
+    "emoji": "🦆"
+  },
+  "swan": {
+    "emoji": "🦢"
+  },
+  "owl": {
+    "emoji": "🦉"
+  },
+  "dodo": {
+    "emoji": "🦤"
+  },
+  "feather": {
+    "emoji": "🪶"
+  },
+  "flamingo": {
+    "emoji": "🦩"
+  },
+  "peacock": {
+    "emoji": "🦚"
+  },
+  "parrot": {
+    "emoji": "🦜"
+  },
+  "frog": {
+    "emoji": "🐸"
+  },
+  "crocodile": {
+    "emoji": "🐊"
+  },
+  "turtle": {
+    "emoji": "🐢"
+  },
+  "lizard": {
+    "emoji": "🦎"
+  },
+  "snake": {
+    "emoji": "🐍"
+  },
+  "dragon face": {
+    "emoji": "🐲"
+  },
+  "dragon": {
+    "emoji": "🐉"
+  },
+  "sauropod": {
+    "emoji": "🦕"
+  },
+  "T-Rex": {
+    "emoji": "🦖"
+  },
+  "spouting whale": {
+    "emoji": "🐳"
+  },
+  "whale": {
+    "emoji": "🐋"
+  },
+  "dolphin": {
+    "emoji": "🐬"
+  },
+  "seal": {
+    "emoji": "🦭"
+  },
+  "fish": {
+    "emoji": "🐟"
+  },
+  "tropical fish": {
+    "emoji": "🐠"
+  },
+  "blowfish": {
+    "emoji": "🐡"
+  },
+  "shark": {
+    "emoji": "🦈"
+  },
+  "octopus": {
+    "emoji": "🐙"
+  },
+  "spiral shell": {
+    "emoji": "🐚"
+  },
+  "snail": {
+    "emoji": "🐌"
+  },
+  "butterfly": {
+    "emoji": "🦋"
+  },
+  "bug": {
+    "emoji": "🐛"
+  },
+  "ant": {
+    "emoji": "🐜"
+  },
+  "honeybee": {
+    "emoji": "🐝"
+  },
+  "beetle": {
+    "emoji": "🪲"
+  },
+  "lady beetle": {
+    "emoji": "🐞"
+  },
+  "cricket": {
+    "emoji": "🦗"
+  },
+  "cockroach": {
+    "emoji": "🪳"
+  },
+  "spider": {
+    "emoji": "🕷️"
+  },
+  "spider web": {
+    "emoji": "🕸️"
+  },
+  "scorpion": {
+    "emoji": "🦂"
+  },
+  "mosquito": {
+    "emoji": "🦟"
+  },
+  "fly": {
+    "emoji": "🪰"
+  },
+  "worm": {
+    "emoji": "🪱"
+  },
+  "microbe": {
+    "emoji": "🦠"
+  },
+  "bouquet": {
+    "emoji": "💐"
+  },
+  "cherry blossom": {
+    "emoji": "🌸"
+  },
+  "white flower": {
+    "emoji": "💮"
+  },
+  "rosette": {
+    "emoji": "🏵️"
+  },
+  "rose": {
+    "emoji": "🌹"
+  },
+  "wilted flower": {
+    "emoji": "🥀"
+  },
+  "hibiscus": {
+    "emoji": "🌺"
+  },
+  "sunflower": {
+    "emoji": "🌻"
+  },
+  "blossom": {
+    "emoji": "🌼"
+  },
+  "tulip": {
+    "emoji": "🌷"
+  },
+  "seedling": {
+    "emoji": "🌱"
+  },
+  "potted plant": {
+    "emoji": "🪴"
+  },
+  "evergreen tree": {
+    "emoji": "🌲"
+  },
+  "deciduous tree": {
+    "emoji": "🌳"
+  },
+  "palm tree": {
+    "emoji": "🌴"
+  },
+  "cactus": {
+    "emoji": "🌵"
+  },
+  "sheaf of rice": {
+    "emoji": "🌾"
+  },
+  "herb": {
+    "emoji": "🌿"
+  },
+  "shamrock": {
+    "emoji": "☘️"
+  },
+  "four leaf clover": {
+    "emoji": "🍀"
+  },
+  "maple leaf": {
+    "emoji": "🍁"
+  },
+  "fallen leaf": {
+    "emoji": "🍂"
+  },
+  "leaf fluttering in wind": {
+    "emoji": "🍃"
+  },
+  "grapes": {
+    "emoji": "🍇"
+  },
+  "melon": {
+    "emoji": "🍈"
+  },
+  "watermelon": {
+    "emoji": "🍉"
+  },
+  "tangerine": {
+    "emoji": "🍊"
+  },
+  "lemon": {
+    "emoji": "🍋"
+  },
+  "banana": {
+    "emoji": "🍌"
+  },
+  "pineapple": {
+    "emoji": "🍍"
+  },
+  "mango": {
+    "emoji": "🥭"
+  },
+  "red apple": {
+    "emoji": "🍎"
+  },
+  "green apple": {
+    "emoji": "🍏"
+  },
+  "pear": {
+    "emoji": "🍐"
+  },
+  "peach": {
+    "emoji": "🍑"
+  },
+  "cherries": {
+    "emoji": "🍒"
+  },
+  "strawberry": {
+    "emoji": "🍓"
+  },
+  "blueberries": {
+    "emoji": "🫐"
+  },
+  "kiwi fruit": {
+    "emoji": "🥝"
+  },
+  "tomato": {
+    "emoji": "🍅"
+  },
+  "olive": {
+    "emoji": "🫒"
+  },
+  "coconut": {
+    "emoji": "🥥"
+  },
+  "avocado": {
+    "emoji": "🥑"
+  },
+  "eggplant": {
+    "emoji": "🍆"
+  },
+  "potato": {
+    "emoji": "🥔"
+  },
+  "carrot": {
+    "emoji": "🥕"
+  },
+  "ear of corn": {
+    "emoji": "🌽"
+  },
+  "hot pepper": {
+    "emoji": "🌶️"
+  },
+  "bell pepper": {
+    "emoji": "🫑"
+  },
+  "cucumber": {
+    "emoji": "🥒"
+  },
+  "leafy green": {
+    "emoji": "🥬"
+  },
+  "broccoli": {
+    "emoji": "🥦"
+  },
+  "garlic": {
+    "emoji": "🧄"
+  },
+  "onion": {
+    "emoji": "🧅"
+  },
+  "mushroom": {
+    "emoji": "🍄"
+  },
+  "peanuts": {
+    "emoji": "🥜"
+  },
+  "chestnut": {
+    "emoji": "🌰"
+  },
+  "bread": {
+    "emoji": "🍞"
+  },
+  "croissant": {
+    "emoji": "🥐"
+  },
+  "baguette bread": {
+    "emoji": "🥖"
+  },
+  "flatbread": {
+    "emoji": "🫓"
+  },
+  "pretzel": {
+    "emoji": "🥨"
+  },
+  "bagel": {
+    "emoji": "🥯"
+  },
+  "pancakes": {
+    "emoji": "🥞"
+  },
+  "waffle": {
+    "emoji": "🧇"
+  },
+  "cheese wedge": {
+    "emoji": "🧀"
+  },
+  "meat on bone": {
+    "emoji": "🍖"
+  },
+  "poultry leg": {
+    "emoji": "🍗"
+  },
+  "cut of meat": {
+    "emoji": "🥩"
+  },
+  "bacon": {
+    "emoji": "🥓"
+  },
+  "hamburger": {
+    "emoji": "🍔"
+  },
+  "french fries": {
+    "emoji": "🍟"
+  },
+  "pizza": {
+    "emoji": "🍕"
+  },
+  "hot dog": {
+    "emoji": "🌭"
+  },
+  "sandwich": {
+    "emoji": "🥪"
+  },
+  "taco": {
+    "emoji": "🌮"
+  },
+  "burrito": {
+    "emoji": "🌯"
+  },
+  "tamale": {
+    "emoji": "🫔"
+  },
+  "stuffed flatbread": {
+    "emoji": "🥙"
+  },
+  "falafel": {
+    "emoji": "🧆"
+  },
+  "egg": {
+    "emoji": "🥚"
+  },
+  "cooking": {
+    "emoji": "🍳"
+  },
+  "shallow pan of food": {
+    "emoji": "🥘"
+  },
+  "pot of food": {
+    "emoji": "🍲"
+  },
+  "fondue": {
+    "emoji": "🫕"
+  },
+  "bowl with spoon": {
+    "emoji": "🥣"
+  },
+  "green salad": {
+    "emoji": "🥗"
+  },
+  "popcorn": {
+    "emoji": "🍿"
+  },
+  "butter": {
+    "emoji": "🧈"
+  },
+  "salt": {
+    "emoji": "🧂"
+  },
+  "canned food": {
+    "emoji": "🥫"
+  },
+  "bento box": {
+    "emoji": "🍱"
+  },
+  "rice cracker": {
+    "emoji": "🍘"
+  },
+  "rice ball": {
+    "emoji": "🍙"
+  },
+  "cooked rice": {
+    "emoji": "🍚"
+  },
+  "curry rice": {
+    "emoji": "🍛"
+  },
+  "steaming bowl": {
+    "emoji": "🍜"
+  },
+  "spaghetti": {
+    "emoji": "🍝"
+  },
+  "roasted sweet potato": {
+    "emoji": "🍠"
+  },
+  "oden": {
+    "emoji": "🍢"
+  },
+  "sushi": {
+    "emoji": "🍣"
+  },
+  "fried shrimp": {
+    "emoji": "🍤"
+  },
+  "fish cake with swirl": {
+    "emoji": "🍥"
+  },
+  "moon cake": {
+    "emoji": "🥮"
+  },
+  "dango": {
+    "emoji": "🍡"
+  },
+  "dumpling": {
+    "emoji": "🥟"
+  },
+  "fortune cookie": {
+    "emoji": "🥠"
+  },
+  "takeout box": {
+    "emoji": "🥡"
+  },
+  "crab": {
+    "emoji": "🦀"
+  },
+  "lobster": {
+    "emoji": "🦞"
+  },
+  "shrimp": {
+    "emoji": "🦐"
+  },
+  "squid": {
+    "emoji": "🦑"
+  },
+  "oyster": {
+    "emoji": "🦪"
+  },
+  "soft ice cream": {
+    "emoji": "🍦"
+  },
+  "shaved ice": {
+    "emoji": "🍧"
+  },
+  "ice cream": {
+    "emoji": "🍨"
+  },
+  "doughnut": {
+    "emoji": "🍩"
+  },
+  "cookie": {
+    "emoji": "🍪"
+  },
+  "birthday cake": {
+    "emoji": "🎂"
+  },
+  "shortcake": {
+    "emoji": "🍰"
+  },
+  "cupcake": {
+    "emoji": "🧁"
+  },
+  "pie": {
+    "emoji": "🥧"
+  },
+  "chocolate bar": {
+    "emoji": "🍫"
+  },
+  "candy": {
+    "emoji": "🍬"
+  },
+  "lollipop": {
+    "emoji": "🍭"
+  },
+  "custard": {
+    "emoji": "🍮"
+  },
+  "honey pot": {
+    "emoji": "🍯"
+  },
+  "baby bottle": {
+    "emoji": "🍼"
+  },
+  "glass of milk": {
+    "emoji": "🥛"
+  },
+  "hot beverage": {
+    "emoji": "☕"
+  },
+  "teapot": {
+    "emoji": "🫖"
+  },
+  "teacup without handle": {
+    "emoji": "🍵"
+  },
+  "sake": {
+    "emoji": "🍶"
+  },
+  "bottle with popping cork": {
+    "emoji": "🍾"
+  },
+  "wine glass": {
+    "emoji": "🍷"
+  },
+  "cocktail glass": {
+    "emoji": "🍸"
+  },
+  "tropical drink": {
+    "emoji": "🍹"
+  },
+  "beer mug": {
+    "emoji": "🍺"
+  },
+  "clinking beer mugs": {
+    "emoji": "🍻"
+  },
+  "clinking glasses": {
+    "emoji": "🥂"
+  },
+  "tumbler glass": {
+    "emoji": "🥃"
+  },
+  "cup with straw": {
+    "emoji": "🥤"
+  },
+  "bubble tea": {
+    "emoji": "🧋"
+  },
+  "beverage box": {
+    "emoji": "🧃"
+  },
+  "mate": {
+    "emoji": "🧉"
+  },
+  "ice": {
+    "emoji": "🧊"
+  },
+  "chopsticks": {
+    "emoji": "🥢"
+  },
+  "fork and knife with plate": {
+    "emoji": "🍽️"
+  },
+  "fork and knife": {
+    "emoji": "🍴"
+  },
+  "spoon": {
+    "emoji": "🥄"
+  },
+  "kitchen knife": {
+    "emoji": "🔪"
+  },
+  "amphora": {
+    "emoji": "🏺"
+  },
+  "globe showing Europe-Africa": {
+    "emoji": "🌍"
+  },
+  "globe showing Americas": {
+    "emoji": "🌎"
+  },
+  "globe showing Asia-Australia": {
+    "emoji": "🌏"
+  },
+  "globe with meridians": {
+    "emoji": "🌐"
+  },
+  "world map": {
+    "emoji": "🗺️"
+  },
+  "map of Japan": {
+    "emoji": "🗾"
+  },
+  "compass": {
+    "emoji": "🧭"
+  },
+  "snow-capped mountain": {
+    "emoji": "🏔️"
+  },
+  "mountain": {
+    "emoji": "⛰️"
+  },
+  "volcano": {
+    "emoji": "🌋"
+  },
+  "mount fuji": {
+    "emoji": "🗻"
+  },
+  "camping": {
+    "emoji": "🏕️"
+  },
+  "beach with umbrella": {
+    "emoji": "🏖️"
+  },
+  "desert": {
+    "emoji": "🏜️"
+  },
+  "desert island": {
+    "emoji": "🏝️"
+  },
+  "national park": {
+    "emoji": "🏞️"
+  },
+  "stadium": {
+    "emoji": "🏟️"
+  },
+  "classical building": {
+    "emoji": "🏛️"
+  },
+  "building construction": {
+    "emoji": "🏗️"
+  },
+  "brick": {
+    "emoji": "🧱"
+  },
+  "rock": {
+    "emoji": "🪨"
+  },
+  "wood": {
+    "emoji": "🪵"
+  },
+  "hut": {
+    "emoji": "🛖"
+  },
+  "houses": {
+    "emoji": "🏘️"
+  },
+  "derelict house": {
+    "emoji": "🏚️"
+  },
+  "house": {
+    "emoji": "🏠"
+  },
+  "house with garden": {
+    "emoji": "🏡"
+  },
+  "office building": {
+    "emoji": "🏢"
+  },
+  "Japanese post office": {
+    "emoji": "🏣"
+  },
+  "post office": {
+    "emoji": "🏤"
+  },
+  "hospital": {
+    "emoji": "🏥"
+  },
+  "bank": {
+    "emoji": "🏦"
+  },
+  "hotel": {
+    "emoji": "🏨"
+  },
+  "love hotel": {
+    "emoji": "🏩"
+  },
+  "convenience store": {
+    "emoji": "🏪"
+  },
+  "school": {
+    "emoji": "🏫"
+  },
+  "department store": {
+    "emoji": "🏬"
+  },
+  "factory": {
+    "emoji": "🏭"
+  },
+  "Japanese castle": {
+    "emoji": "🏯"
+  },
+  "castle": {
+    "emoji": "🏰"
+  },
+  "wedding": {
+    "emoji": "💒"
+  },
+  "Tokyo tower": {
+    "emoji": "🗼"
+  },
+  "Statue of Liberty": {
+    "emoji": "🗽"
+  },
+  "church": {
+    "emoji": "⛪"
+  },
+  "mosque": {
+    "emoji": "🕌"
+  },
+  "hindu temple": {
+    "emoji": "🛕"
+  },
+  "synagogue": {
+    "emoji": "🕍"
+  },
+  "shinto shrine": {
+    "emoji": "⛩️"
+  },
+  "kaaba": {
+    "emoji": "🕋"
+  },
+  "fountain": {
+    "emoji": "⛲"
+  },
+  "tent": {
+    "emoji": "⛺"
+  },
+  "foggy": {
+    "emoji": "🌁"
+  },
+  "night with stars": {
+    "emoji": "🌃"
+  },
+  "cityscape": {
+    "emoji": "🏙️"
+  },
+  "sunrise over mountains": {
+    "emoji": "🌄"
+  },
+  "sunrise": {
+    "emoji": "🌅"
+  },
+  "cityscape at dusk": {
+    "emoji": "🌆"
+  },
+  "sunset": {
+    "emoji": "🌇"
+  },
+  "bridge at night": {
+    "emoji": "🌉"
+  },
+  "hot springs": {
+    "emoji": "♨️"
+  },
+  "carousel horse": {
+    "emoji": "🎠"
+  },
+  "ferris wheel": {
+    "emoji": "🎡"
+  },
+  "roller coaster": {
+    "emoji": "🎢"
+  },
+  "barber pole": {
+    "emoji": "💈"
+  },
+  "circus tent": {
+    "emoji": "🎪"
+  },
+  "locomotive": {
+    "emoji": "🚂"
+  },
+  "railway car": {
+    "emoji": "🚃"
+  },
+  "high-speed train": {
+    "emoji": "🚄"
+  },
+  "bullet train": {
+    "emoji": "🚅"
+  },
+  "train": {
+    "emoji": "🚆"
+  },
+  "metro": {
+    "emoji": "🚇"
+  },
+  "light rail": {
+    "emoji": "🚈"
+  },
+  "station": {
+    "emoji": "🚉"
+  },
+  "tram": {
+    "emoji": "🚊"
+  },
+  "monorail": {
+    "emoji": "🚝"
+  },
+  "mountain railway": {
+    "emoji": "🚞"
+  },
+  "tram car": {
+    "emoji": "🚋"
+  },
+  "bus": {
+    "emoji": "🚌"
+  },
+  "oncoming bus": {
+    "emoji": "🚍"
+  },
+  "trolleybus": {
+    "emoji": "🚎"
+  },
+  "minibus": {
+    "emoji": "🚐"
+  },
+  "ambulance": {
+    "emoji": "🚑"
+  },
+  "fire engine": {
+    "emoji": "🚒"
+  },
+  "police car": {
+    "emoji": "🚓"
+  },
+  "oncoming police car": {
+    "emoji": "🚔"
+  },
+  "taxi": {
+    "emoji": "🚕"
+  },
+  "oncoming taxi": {
+    "emoji": "🚖"
+  },
+  "automobile": {
+    "emoji": "🚗"
+  },
+  "oncoming automobile": {
+    "emoji": "🚘"
+  },
+  "sport utility vehicle": {
+    "emoji": "🚙"
+  },
+  "pickup truck": {
+    "emoji": "🛻"
+  },
+  "delivery truck": {
+    "emoji": "🚚"
+  },
+  "articulated lorry": {
+    "emoji": "🚛"
+  },
+  "tractor": {
+    "emoji": "🚜"
+  },
+  "racing car": {
+    "emoji": "🏎️"
+  },
+  "motorcycle": {
+    "emoji": "🏍️"
+  },
+  "motor scooter": {
+    "emoji": "🛵"
+  },
+  "manual wheelchair": {
+    "emoji": "🦽"
+  },
+  "motorized wheelchair": {
+    "emoji": "🦼"
+  },
+  "auto rickshaw": {
+    "emoji": "🛺"
+  },
+  "bicycle": {
+    "emoji": "🚲"
+  },
+  "kick scooter": {
+    "emoji": "🛴"
+  },
+  "skateboard": {
+    "emoji": "🛹"
+  },
+  "roller skate": {
+    "emoji": "🛼"
+  },
+  "bus stop": {
+    "emoji": "🚏"
+  },
+  "motorway": {
+    "emoji": "🛣️"
+  },
+  "railway track": {
+    "emoji": "🛤️"
+  },
+  "oil drum": {
+    "emoji": "🛢️"
+  },
+  "fuel pump": {
+    "emoji": "⛽"
+  },
+  "police car light": {
+    "emoji": "🚨"
+  },
+  "horizontal traffic light": {
+    "emoji": "🚥"
+  },
+  "vertical traffic light": {
+    "emoji": "🚦"
+  },
+  "stop sign": {
+    "emoji": "🛑"
+  },
+  "construction": {
+    "emoji": "🚧"
+  },
+  "anchor": {
+    "emoji": "⚓"
+  },
+  "sailboat": {
+    "emoji": "⛵"
+  },
+  "canoe": {
+    "emoji": "🛶"
+  },
+  "speedboat": {
+    "emoji": "🚤"
+  },
+  "passenger ship": {
+    "emoji": "🛳️"
+  },
+  "ferry": {
+    "emoji": "⛴️"
+  },
+  "motor boat": {
+    "emoji": "🛥️"
+  },
+  "ship": {
+    "emoji": "🚢"
+  },
+  "airplane": {
+    "emoji": "✈️"
+  },
+  "small airplane": {
+    "emoji": "🛩️"
+  },
+  "airplane departure": {
+    "emoji": "🛫"
+  },
+  "airplane arrival": {
+    "emoji": "🛬"
+  },
+  "parachute": {
+    "emoji": "🪂"
+  },
+  "seat": {
+    "emoji": "💺"
+  },
+  "helicopter": {
+    "emoji": "🚁"
+  },
+  "suspension railway": {
+    "emoji": "🚟"
+  },
+  "mountain cableway": {
+    "emoji": "🚠"
+  },
+  "aerial tramway": {
+    "emoji": "🚡"
+  },
+  "satellite": {
+    "emoji": "🛰️"
+  },
+  "rocket": {
+    "emoji": "🚀"
+  },
+  "flying saucer": {
+    "emoji": "🛸"
+  },
+  "bellhop bell": {
+    "emoji": "🛎️"
+  },
+  "luggage": {
+    "emoji": "🧳"
+  },
+  "hourglass done": {
+    "emoji": "⌛"
+  },
+  "hourglass not done": {
+    "emoji": "⏳"
+  },
+  "watch": {
+    "emoji": "⌚"
+  },
+  "alarm clock": {
+    "emoji": "⏰"
+  },
+  "stopwatch": {
+    "emoji": "⏱️"
+  },
+  "timer clock": {
+    "emoji": "⏲️"
+  },
+  "mantelpiece clock": {
+    "emoji": "🕰️"
+  },
+  "twelve o’clock": {
+    "emoji": "🕛"
+  },
+  "twelve-thirty": {
+    "emoji": "🕧"
+  },
+  "one o’clock": {
+    "emoji": "🕐"
+  },
+  "one-thirty": {
+    "emoji": "🕜"
+  },
+  "two o’clock": {
+    "emoji": "🕑"
+  },
+  "two-thirty": {
+    "emoji": "🕝"
+  },
+  "three o’clock": {
+    "emoji": "🕒"
+  },
+  "three-thirty": {
+    "emoji": "🕞"
+  },
+  "four o’clock": {
+    "emoji": "🕓"
+  },
+  "four-thirty": {
+    "emoji": "🕟"
+  },
+  "five o’clock": {
+    "emoji": "🕔"
+  },
+  "five-thirty": {
+    "emoji": "🕠"
+  },
+  "six o’clock": {
+    "emoji": "🕕"
+  },
+  "six-thirty": {
+    "emoji": "🕡"
+  },
+  "seven o’clock": {
+    "emoji": "🕖"
+  },
+  "seven-thirty": {
+    "emoji": "🕢"
+  },
+  "eight o’clock": {
+    "emoji": "🕗"
+  },
+  "eight-thirty": {
+    "emoji": "🕣"
+  },
+  "nine o’clock": {
+    "emoji": "🕘"
+  },
+  "nine-thirty": {
+    "emoji": "🕤"
+  },
+  "ten o’clock": {
+    "emoji": "🕙"
+  },
+  "ten-thirty": {
+    "emoji": "🕥"
+  },
+  "eleven o’clock": {
+    "emoji": "🕚"
+  },
+  "eleven-thirty": {
+    "emoji": "🕦"
+  },
+  "new moon": {
+    "emoji": "🌑"
+  },
+  "waxing crescent moon": {
+    "emoji": "🌒"
+  },
+  "first quarter moon": {
+    "emoji": "🌓"
+  },
+  "waxing gibbous moon": {
+    "emoji": "🌔"
+  },
+  "full moon": {
+    "emoji": "🌕"
+  },
+  "waning gibbous moon": {
+    "emoji": "🌖"
+  },
+  "last quarter moon": {
+    "emoji": "🌗"
+  },
+  "waning crescent moon": {
+    "emoji": "🌘"
+  },
+  "crescent moon": {
+    "emoji": "🌙"
+  },
+  "new moon face": {
+    "emoji": "🌚"
+  },
+  "first quarter moon face": {
+    "emoji": "🌛"
+  },
+  "last quarter moon face": {
+    "emoji": "🌜"
+  },
+  "thermometer": {
+    "emoji": "🌡️"
+  },
+  "sun": {
+    "emoji": "☀️"
+  },
+  "full moon face": {
+    "emoji": "🌝"
+  },
+  "sun with face": {
+    "emoji": "🌞"
+  },
+  "ringed planet": {
+    "emoji": "🪐"
+  },
+  "star": {
+    "emoji": "⭐"
+  },
+  "glowing star": {
+    "emoji": "🌟"
+  },
+  "shooting star": {
+    "emoji": "🌠"
+  },
+  "milky way": {
+    "emoji": "🌌"
+  },
+  "cloud": {
+    "emoji": "☁️"
+  },
+  "sun behind cloud": {
+    "emoji": "⛅"
+  },
+  "cloud with lightning and rain": {
+    "emoji": "⛈️"
+  },
+  "sun behind small cloud": {
+    "emoji": "🌤️"
+  },
+  "sun behind large cloud": {
+    "emoji": "🌥️"
+  },
+  "sun behind rain cloud": {
+    "emoji": "🌦️"
+  },
+  "cloud with rain": {
+    "emoji": "🌧️"
+  },
+  "cloud with snow": {
+    "emoji": "🌨️"
+  },
+  "cloud with lightning": {
+    "emoji": "🌩️"
+  },
+  "tornado": {
+    "emoji": "🌪️"
+  },
+  "fog": {
+    "emoji": "🌫️"
+  },
+  "wind face": {
+    "emoji": "🌬️"
+  },
+  "cyclone": {
+    "emoji": "🌀"
+  },
+  "rainbow": {
+    "emoji": "🌈"
+  },
+  "closed umbrella": {
+    "emoji": "🌂"
+  },
+  "umbrella": {
+    "emoji": "☂️"
+  },
+  "umbrella with rain drops": {
+    "emoji": "☔"
+  },
+  "umbrella on ground": {
+    "emoji": "⛱️"
+  },
+  "high voltage": {
+    "emoji": "⚡"
+  },
+  "snowflake": {
+    "emoji": "❄️"
+  },
+  "snowman": {
+    "emoji": "☃️"
+  },
+  "snowman without snow": {
+    "emoji": "⛄"
+  },
+  "comet": {
+    "emoji": "☄️"
+  },
+  "fire": {
+    "emoji": "🔥"
+  },
+  "droplet": {
+    "emoji": "💧"
+  },
+  "water wave": {
+    "emoji": "🌊"
+  },
+  "jack-o-lantern": {
+    "emoji": "🎃"
+  },
+  "Christmas tree": {
+    "emoji": "🎄"
+  },
+  "fireworks": {
+    "emoji": "🎆"
+  },
+  "sparkler": {
+    "emoji": "🎇"
+  },
+  "firecracker": {
+    "emoji": "🧨"
+  },
+  "sparkles": {
+    "emoji": "✨"
+  },
+  "balloon": {
+    "emoji": "🎈"
+  },
+  "party popper": {
+    "emoji": "🎉"
+  },
+  "confetti ball": {
+    "emoji": "🎊"
+  },
+  "tanabata tree": {
+    "emoji": "🎋"
+  },
+  "pine decoration": {
+    "emoji": "🎍"
+  },
+  "Japanese dolls": {
+    "emoji": "🎎"
+  },
+  "carp streamer": {
+    "emoji": "🎏"
+  },
+  "wind chime": {
+    "emoji": "🎐"
+  },
+  "moon viewing ceremony": {
+    "emoji": "🎑"
+  },
+  "red envelope": {
+    "emoji": "🧧"
+  },
+  "ribbon": {
+    "emoji": "🎀"
+  },
+  "wrapped gift": {
+    "emoji": "🎁"
+  },
+  "reminder ribbon": {
+    "emoji": "🎗️"
+  },
+  "admission tickets": {
+    "emoji": "🎟️"
+  },
+  "ticket": {
+    "emoji": "🎫"
+  },
+  "military medal": {
+    "emoji": "🎖️"
+  },
+  "trophy": {
+    "emoji": "🏆"
+  },
+  "sports medal": {
+    "emoji": "🏅"
+  },
+  "1st place medal": {
+    "emoji": "🥇"
+  },
+  "2nd place medal": {
+    "emoji": "🥈"
+  },
+  "3rd place medal": {
+    "emoji": "🥉"
+  },
+  "soccer ball": {
+    "emoji": "⚽"
+  },
+  "baseball": {
+    "emoji": "⚾"
+  },
+  "softball": {
+    "emoji": "🥎"
+  },
+  "basketball": {
+    "emoji": "🏀"
+  },
+  "volleyball": {
+    "emoji": "🏐"
+  },
+  "american football": {
+    "emoji": "🏈"
+  },
+  "rugby football": {
+    "emoji": "🏉"
+  },
+  "tennis": {
+    "emoji": "🎾"
+  },
+  "flying disc": {
+    "emoji": "🥏"
+  },
+  "bowling": {
+    "emoji": "🎳"
+  },
+  "cricket game": {
+    "emoji": "🏏"
+  },
+  "field hockey": {
+    "emoji": "🏑"
+  },
+  "ice hockey": {
+    "emoji": "🏒"
+  },
+  "lacrosse": {
+    "emoji": "🥍"
+  },
+  "ping pong": {
+    "emoji": "🏓"
+  },
+  "badminton": {
+    "emoji": "🏸"
+  },
+  "boxing glove": {
+    "emoji": "🥊"
+  },
+  "martial arts uniform": {
+    "emoji": "🥋"
+  },
+  "goal net": {
+    "emoji": "🥅"
+  },
+  "flag in hole": {
+    "emoji": "⛳"
+  },
+  "ice skate": {
+    "emoji": "⛸️"
+  },
+  "fishing pole": {
+    "emoji": "🎣"
+  },
+  "diving mask": {
+    "emoji": "🤿"
+  },
+  "running shirt": {
+    "emoji": "🎽"
+  },
+  "skis": {
+    "emoji": "🎿"
+  },
+  "sled": {
+    "emoji": "🛷"
+  },
+  "curling stone": {
+    "emoji": "🥌"
+  },
+  "direct hit": {
+    "emoji": "🎯"
+  },
+  "yo-yo": {
+    "emoji": "🪀"
+  },
+  "kite": {
+    "emoji": "🪁"
+  },
+  "pool 8 ball": {
+    "emoji": "🎱"
+  },
+  "crystal ball": {
+    "emoji": "🔮"
+  },
+  "magic wand": {
+    "emoji": "🪄"
+  },
+  "nazar amulet": {
+    "emoji": "🧿"
+  },
+  "video game": {
+    "emoji": "🎮"
+  },
+  "joystick": {
+    "emoji": "🕹️"
+  },
+  "slot machine": {
+    "emoji": "🎰"
+  },
+  "game die": {
+    "emoji": "🎲"
+  },
+  "puzzle piece": {
+    "emoji": "🧩"
+  },
+  "teddy bear": {
+    "emoji": "🧸"
+  },
+  "piñata": {
+    "emoji": "🪅"
+  },
+  "nesting dolls": {
+    "emoji": "🪆"
+  },
+  "spade suit": {
+    "emoji": "♠️"
+  },
+  "heart suit": {
+    "emoji": "♥️"
+  },
+  "diamond suit": {
+    "emoji": "♦️"
+  },
+  "club suit": {
+    "emoji": "♣️"
+  },
+  "chess pawn": {
+    "emoji": "♟️"
+  },
+  "joker": {
+    "emoji": "🃏"
+  },
+  "mahjong red dragon": {
+    "emoji": "🀄"
+  },
+  "flower playing cards": {
+    "emoji": "🎴"
+  },
+  "performing arts": {
+    "emoji": "🎭"
+  },
+  "framed picture": {
+    "emoji": "🖼️"
+  },
+  "artist palette": {
+    "emoji": "🎨"
+  },
+  "thread": {
+    "emoji": "🧵"
+  },
+  "sewing needle": {
+    "emoji": "🪡"
+  },
+  "yarn": {
+    "emoji": "🧶"
+  },
+  "knot": {
+    "emoji": "🪢"
+  },
+  "glasses": {
+    "emoji": "👓"
+  },
+  "sunglasses": {
+    "emoji": "🕶️"
+  },
+  "goggles": {
+    "emoji": "🥽"
+  },
+  "lab coat": {
+    "emoji": "🥼"
+  },
+  "safety vest": {
+    "emoji": "🦺"
+  },
+  "necktie": {
+    "emoji": "👔"
+  },
+  "t-shirt": {
+    "emoji": "👕"
+  },
+  "jeans": {
+    "emoji": "👖"
+  },
+  "scarf": {
+    "emoji": "🧣"
+  },
+  "gloves": {
+    "emoji": "🧤"
+  },
+  "coat": {
+    "emoji": "🧥"
+  },
+  "socks": {
+    "emoji": "🧦"
+  },
+  "dress": {
+    "emoji": "👗"
+  },
+  "kimono": {
+    "emoji": "👘"
+  },
+  "sari": {
+    "emoji": "🥻"
+  },
+  "one-piece swimsuit": {
+    "emoji": "🩱"
+  },
+  "briefs": {
+    "emoji": "🩲"
+  },
+  "shorts": {
+    "emoji": "🩳"
+  },
+  "bikini": {
+    "emoji": "👙"
+  },
+  "woman’s clothes": {
+    "emoji": "👚"
+  },
+  "purse": {
+    "emoji": "👛"
+  },
+  "handbag": {
+    "emoji": "👜"
+  },
+  "clutch bag": {
+    "emoji": "👝"
+  },
+  "shopping bags": {
+    "emoji": "🛍️"
+  },
+  "backpack": {
+    "emoji": "🎒"
+  },
+  "thong sandal": {
+    "emoji": "🩴"
+  },
+  "man’s shoe": {
+    "emoji": "👞"
+  },
+  "running shoe": {
+    "emoji": "👟"
+  },
+  "hiking boot": {
+    "emoji": "🥾"
+  },
+  "flat shoe": {
+    "emoji": "🥿"
+  },
+  "high-heeled shoe": {
+    "emoji": "👠"
+  },
+  "woman’s sandal": {
+    "emoji": "👡"
+  },
+  "ballet shoes": {
+    "emoji": "🩰"
+  },
+  "woman’s boot": {
+    "emoji": "👢"
+  },
+  "crown": {
+    "emoji": "👑"
+  },
+  "woman’s hat": {
+    "emoji": "👒"
+  },
+  "top hat": {
+    "emoji": "🎩"
+  },
+  "graduation cap": {
+    "emoji": "🎓"
+  },
+  "billed cap": {
+    "emoji": "🧢"
+  },
+  "military helmet": {
+    "emoji": "🪖"
+  },
+  "rescue worker’s helmet": {
+    "emoji": "⛑️"
+  },
+  "prayer beads": {
+    "emoji": "📿"
+  },
+  "lipstick": {
+    "emoji": "💄"
+  },
+  "ring": {
+    "emoji": "💍"
+  },
+  "gem stone": {
+    "emoji": "💎"
+  },
+  "muted speaker": {
+    "emoji": "🔇"
+  },
+  "speaker low volume": {
+    "emoji": "🔈"
+  },
+  "speaker medium volume": {
+    "emoji": "🔉"
+  },
+  "speaker high volume": {
+    "emoji": "🔊"
+  },
+  "loudspeaker": {
+    "emoji": "📢"
+  },
+  "megaphone": {
+    "emoji": "📣"
+  },
+  "postal horn": {
+    "emoji": "📯"
+  },
+  "bell": {
+    "emoji": "🔔"
+  },
+  "bell with slash": {
+    "emoji": "🔕"
+  },
+  "musical score": {
+    "emoji": "🎼"
+  },
+  "musical note": {
+    "emoji": "🎵"
+  },
+  "musical notes": {
+    "emoji": "🎶"
+  },
+  "studio microphone": {
+    "emoji": "🎙️"
+  },
+  "level slider": {
+    "emoji": "🎚️"
+  },
+  "control knobs": {
+    "emoji": "🎛️"
+  },
+  "microphone": {
+    "emoji": "🎤"
+  },
+  "headphone": {
+    "emoji": "🎧"
+  },
+  "radio": {
+    "emoji": "📻"
+  },
+  "saxophone": {
+    "emoji": "🎷"
+  },
+  "accordion": {
+    "emoji": "🪗"
+  },
+  "guitar": {
+    "emoji": "🎸"
+  },
+  "musical keyboard": {
+    "emoji": "🎹"
+  },
+  "trumpet": {
+    "emoji": "🎺"
+  },
+  "violin": {
+    "emoji": "🎻"
+  },
+  "banjo": {
+    "emoji": "🪕"
+  },
+  "drum": {
+    "emoji": "🥁"
+  },
+  "long drum": {
+    "emoji": "🪘"
+  },
+  "mobile phone": {
+    "emoji": "📱"
+  },
+  "mobile phone with arrow": {
+    "emoji": "📲"
+  },
+  "telephone": {
+    "emoji": "☎️"
+  },
+  "telephone receiver": {
+    "emoji": "📞"
+  },
+  "pager": {
+    "emoji": "📟"
+  },
+  "fax machine": {
+    "emoji": "📠"
+  },
+  "battery": {
+    "emoji": "🔋"
+  },
+  "electric plug": {
+    "emoji": "🔌"
+  },
+  "laptop": {
+    "emoji": "💻"
+  },
+  "desktop computer": {
+    "emoji": "🖥️"
+  },
+  "printer": {
+    "emoji": "🖨️"
+  },
+  "keyboard": {
+    "emoji": "⌨️"
+  },
+  "computer mouse": {
+    "emoji": "🖱️"
+  },
+  "trackball": {
+    "emoji": "🖲️"
+  },
+  "computer disk": {
+    "emoji": "💽"
+  },
+  "floppy disk": {
+    "emoji": "💾"
+  },
+  "optical disk": {
+    "emoji": "💿"
+  },
+  "dvd": {
+    "emoji": "📀"
+  },
+  "abacus": {
+    "emoji": "🧮"
+  },
+  "movie camera": {
+    "emoji": "🎥"
+  },
+  "film frames": {
+    "emoji": "🎞️"
+  },
+  "film projector": {
+    "emoji": "📽️"
+  },
+  "clapper board": {
+    "emoji": "🎬"
+  },
+  "television": {
+    "emoji": "📺"
+  },
+  "camera": {
+    "emoji": "📷"
+  },
+  "camera with flash": {
+    "emoji": "📸"
+  },
+  "video camera": {
+    "emoji": "📹"
+  },
+  "videocassette": {
+    "emoji": "📼"
+  },
+  "magnifying glass tilted left": {
+    "emoji": "🔍"
+  },
+  "magnifying glass tilted right": {
+    "emoji": "🔎"
+  },
+  "candle": {
+    "emoji": "🕯️"
+  },
+  "light bulb": {
+    "emoji": "💡"
+  },
+  "flashlight": {
+    "emoji": "🔦"
+  },
+  "red paper lantern": {
+    "emoji": "🏮"
+  },
+  "diya lamp": {
+    "emoji": "🪔"
+  },
+  "notebook with decorative cover": {
+    "emoji": "📔"
+  },
+  "closed book": {
+    "emoji": "📕"
+  },
+  "open book": {
+    "emoji": "📖"
+  },
+  "green book": {
+    "emoji": "📗"
+  },
+  "blue book": {
+    "emoji": "📘"
+  },
+  "orange book": {
+    "emoji": "📙"
+  },
+  "books": {
+    "emoji": "📚"
+  },
+  "notebook": {
+    "emoji": "📓"
+  },
+  "ledger": {
+    "emoji": "📒"
+  },
+  "page with curl": {
+    "emoji": "📃"
+  },
+  "scroll": {
+    "emoji": "📜"
+  },
+  "page facing up": {
+    "emoji": "📄"
+  },
+  "newspaper": {
+    "emoji": "📰"
+  },
+  "rolled-up newspaper": {
+    "emoji": "🗞️"
+  },
+  "bookmark tabs": {
+    "emoji": "📑"
+  },
+  "bookmark": {
+    "emoji": "🔖"
+  },
+  "label": {
+    "emoji": "🏷️"
+  },
+  "money bag": {
+    "emoji": "💰"
+  },
+  "coin": {
+    "emoji": "🪙"
+  },
+  "yen banknote": {
+    "emoji": "💴"
+  },
+  "dollar banknote": {
+    "emoji": "💵"
+  },
+  "euro banknote": {
+    "emoji": "💶"
+  },
+  "pound banknote": {
+    "emoji": "💷"
+  },
+  "money with wings": {
+    "emoji": "💸"
+  },
+  "credit card": {
+    "emoji": "💳"
+  },
+  "receipt": {
+    "emoji": "🧾"
+  },
+  "chart increasing with yen": {
+    "emoji": "💹"
+  },
+  "envelope": {
+    "emoji": "✉️"
+  },
+  "e-mail": {
+    "emoji": "📧"
+  },
+  "incoming envelope": {
+    "emoji": "📨"
+  },
+  "envelope with arrow": {
+    "emoji": "📩"
+  },
+  "outbox tray": {
+    "emoji": "📤"
+  },
+  "inbox tray": {
+    "emoji": "📥"
+  },
+  "package": {
+    "emoji": "📦"
+  },
+  "closed mailbox with raised flag": {
+    "emoji": "📫"
+  },
+  "closed mailbox with lowered flag": {
+    "emoji": "📪"
+  },
+  "open mailbox with raised flag": {
+    "emoji": "📬"
+  },
+  "open mailbox with lowered flag": {
+    "emoji": "📭"
+  },
+  "postbox": {
+    "emoji": "📮"
+  },
+  "ballot box with ballot": {
+    "emoji": "🗳️"
+  },
+  "pencil": {
+    "emoji": "✏️"
+  },
+  "black nib": {
+    "emoji": "✒️"
+  },
+  "fountain pen": {
+    "emoji": "🖋️"
+  },
+  "pen": {
+    "emoji": "🖊️"
+  },
+  "paintbrush": {
+    "emoji": "🖌️"
+  },
+  "crayon": {
+    "emoji": "🖍️"
+  },
+  "memo": {
+    "emoji": "📝"
+  },
+  "briefcase": {
+    "emoji": "💼"
+  },
+  "file folder": {
+    "emoji": "📁"
+  },
+  "open file folder": {
+    "emoji": "📂"
+  },
+  "card index dividers": {
+    "emoji": "🗂️"
+  },
+  "calendar": {
+    "emoji": "📅"
+  },
+  "tear-off calendar": {
+    "emoji": "📆"
+  },
+  "spiral notepad": {
+    "emoji": "🗒️"
+  },
+  "spiral calendar": {
+    "emoji": "🗓️"
+  },
+  "card index": {
+    "emoji": "📇"
+  },
+  "chart increasing": {
+    "emoji": "📈"
+  },
+  "chart decreasing": {
+    "emoji": "📉"
+  },
+  "bar chart": {
+    "emoji": "📊"
+  },
+  "clipboard": {
+    "emoji": "📋"
+  },
+  "pushpin": {
+    "emoji": "📌"
+  },
+  "round pushpin": {
+    "emoji": "📍"
+  },
+  "paperclip": {
+    "emoji": "📎"
+  },
+  "linked paperclips": {
+    "emoji": "🖇️"
+  },
+  "straight ruler": {
+    "emoji": "📏"
+  },
+  "triangular ruler": {
+    "emoji": "📐"
+  },
+  "scissors": {
+    "emoji": "✂️"
+  },
+  "card file box": {
+    "emoji": "🗃️"
+  },
+  "file cabinet": {
+    "emoji": "🗄️"
+  },
+  "wastebasket": {
+    "emoji": "🗑️"
+  },
+  "locked": {
+    "emoji": "🔒"
+  },
+  "unlocked": {
+    "emoji": "🔓"
+  },
+  "locked with pen": {
+    "emoji": "🔏"
+  },
+  "locked with key": {
+    "emoji": "🔐"
+  },
+  "key": {
+    "emoji": "🔑"
+  },
+  "old key": {
+    "emoji": "🗝️"
+  },
+  "hammer": {
+    "emoji": "🔨"
+  },
+  "axe": {
+    "emoji": "🪓"
+  },
+  "pick": {
+    "emoji": "⛏️"
+  },
+  "hammer and pick": {
+    "emoji": "⚒️"
+  },
+  "hammer and wrench": {
+    "emoji": "🛠️"
+  },
+  "dagger": {
+    "emoji": "🗡️"
+  },
+  "crossed swords": {
+    "emoji": "⚔️"
+  },
+  "pistol": {
+    "emoji": "🔫"
+  },
+  "boomerang": {
+    "emoji": "🪃"
+  },
+  "bow and arrow": {
+    "emoji": "🏹"
+  },
+  "shield": {
+    "emoji": "🛡️"
+  },
+  "carpentry saw": {
+    "emoji": "🪚"
+  },
+  "wrench": {
+    "emoji": "🔧"
+  },
+  "screwdriver": {
+    "emoji": "🪛"
+  },
+  "nut and bolt": {
+    "emoji": "🔩"
+  },
+  "gear": {
+    "emoji": "⚙️"
+  },
+  "clamp": {
+    "emoji": "🗜️"
+  },
+  "balance scale": {
+    "emoji": "⚖️"
+  },
+  "white cane": {
+    "emoji": "🦯"
+  },
+  "link": {
+    "emoji": "🔗"
+  },
+  "chains": {
+    "emoji": "⛓️"
+  },
+  "hook": {
+    "emoji": "🪝"
+  },
+  "toolbox": {
+    "emoji": "🧰"
+  },
+  "magnet": {
+    "emoji": "🧲"
+  },
+  "ladder": {
+    "emoji": "🪜"
+  },
+  "alembic": {
+    "emoji": "⚗️"
+  },
+  "test tube": {
+    "emoji": "🧪"
+  },
+  "petri dish": {
+    "emoji": "🧫"
+  },
+  "dna": {
+    "emoji": "🧬"
+  },
+  "microscope": {
+    "emoji": "🔬"
+  },
+  "telescope": {
+    "emoji": "🔭"
+  },
+  "satellite antenna": {
+    "emoji": "📡"
+  },
+  "syringe": {
+    "emoji": "💉"
+  },
+  "drop of blood": {
+    "emoji": "🩸"
+  },
+  "pill": {
+    "emoji": "💊"
+  },
+  "adhesive bandage": {
+    "emoji": "🩹"
+  },
+  "stethoscope": {
+    "emoji": "🩺"
+  },
+  "door": {
+    "emoji": "🚪"
+  },
+  "elevator": {
+    "emoji": "🛗"
+  },
+  "mirror": {
+    "emoji": "🪞"
+  },
+  "window": {
+    "emoji": "🪟"
+  },
+  "bed": {
+    "emoji": "🛏️"
+  },
+  "couch and lamp": {
+    "emoji": "🛋️"
+  },
+  "chair": {
+    "emoji": "🪑"
+  },
+  "toilet": {
+    "emoji": "🚽"
+  },
+  "plunger": {
+    "emoji": "🪠"
+  },
+  "shower": {
+    "emoji": "🚿"
+  },
+  "bathtub": {
+    "emoji": "🛁"
+  },
+  "mouse trap": {
+    "emoji": "🪤"
+  },
+  "razor": {
+    "emoji": "🪒"
+  },
+  "lotion bottle": {
+    "emoji": "🧴"
+  },
+  "safety pin": {
+    "emoji": "🧷"
+  },
+  "broom": {
+    "emoji": "🧹"
+  },
+  "basket": {
+    "emoji": "🧺"
+  },
+  "roll of paper": {
+    "emoji": "🧻"
+  },
+  "bucket": {
+    "emoji": "🪣"
+  },
+  "soap": {
+    "emoji": "🧼"
+  },
+  "toothbrush": {
+    "emoji": "🪥"
+  },
+  "sponge": {
+    "emoji": "🧽"
+  },
+  "fire extinguisher": {
+    "emoji": "🧯"
+  },
+  "shopping cart": {
+    "emoji": "🛒"
+  },
+  "cigarette": {
+    "emoji": "🚬"
+  },
+  "coffin": {
+    "emoji": "⚰️"
+  },
+  "headstone": {
+    "emoji": "🪦"
+  },
+  "funeral urn": {
+    "emoji": "⚱️"
+  },
+  "moai": {
+    "emoji": "🗿"
+  },
+  "placard": {
+    "emoji": "🪧"
+  },
+  "ATM sign": {
+    "emoji": "🏧"
+  },
+  "litter in bin sign": {
+    "emoji": "🚮"
+  },
+  "potable water": {
+    "emoji": "🚰"
+  },
+  "wheelchair symbol": {
+    "emoji": "♿"
+  },
+  "men’s room": {
+    "emoji": "🚹"
+  },
+  "women’s room": {
+    "emoji": "🚺"
+  },
+  "restroom": {
+    "emoji": "🚻"
+  },
+  "baby symbol": {
+    "emoji": "🚼"
+  },
+  "water closet": {
+    "emoji": "🚾"
+  },
+  "passport control": {
+    "emoji": "🛂"
+  },
+  "customs": {
+    "emoji": "🛃"
+  },
+  "baggage claim": {
+    "emoji": "🛄"
+  },
+  "left luggage": {
+    "emoji": "🛅"
+  },
+  "warning": {
+    "emoji": "⚠️"
+  },
+  "children crossing": {
+    "emoji": "🚸"
+  },
+  "no entry": {
+    "emoji": "⛔"
+  },
+  "prohibited": {
+    "emoji": "🚫"
+  },
+  "no bicycles": {
+    "emoji": "🚳"
+  },
+  "no smoking": {
+    "emoji": "🚭"
+  },
+  "no littering": {
+    "emoji": "🚯"
+  },
+  "non-potable water": {
+    "emoji": "🚱"
+  },
+  "no pedestrians": {
+    "emoji": "🚷"
+  },
+  "no mobile phones": {
+    "emoji": "📵"
+  },
+  "no one under eighteen": {
+    "emoji": "🔞"
+  },
+  "radioactive": {
+    "emoji": "☢️"
+  },
+  "biohazard": {
+    "emoji": "☣️"
+  },
+  "up arrow": {
+    "emoji": "⬆️"
+  },
+  "up-right arrow": {
+    "emoji": "↗️"
+  },
+  "right arrow": {
+    "emoji": "➡️"
+  },
+  "down-right arrow": {
+    "emoji": "↘️"
+  },
+  "down arrow": {
+    "emoji": "⬇️"
+  },
+  "down-left arrow": {
+    "emoji": "↙️"
+  },
+  "left arrow": {
+    "emoji": "⬅️"
+  },
+  "up-left arrow": {
+    "emoji": "↖️"
+  },
+  "up-down arrow": {
+    "emoji": "↕️"
+  },
+  "left-right arrow": {
+    "emoji": "↔️"
+  },
+  "right arrow curving left": {
+    "emoji": "↩️"
+  },
+  "left arrow curving right": {
+    "emoji": "↪️"
+  },
+  "right arrow curving up": {
+    "emoji": "⤴️"
+  },
+  "right arrow curving down": {
+    "emoji": "⤵️"
+  },
+  "clockwise vertical arrows": {
+    "emoji": "🔃"
+  },
+  "counterclockwise arrows button": {
+    "emoji": "🔄"
+  },
+  "BACK arrow": {
+    "emoji": "🔙"
+  },
+  "END arrow": {
+    "emoji": "🔚"
+  },
+  "ON! arrow": {
+    "emoji": "🔛"
+  },
+  "SOON arrow": {
+    "emoji": "🔜"
+  },
+  "TOP arrow": {
+    "emoji": "🔝"
+  },
+  "place of worship": {
+    "emoji": "🛐"
+  },
+  "atom symbol": {
+    "emoji": "⚛️"
+  },
+  "om": {
+    "emoji": "🕉️"
+  },
+  "star of David": {
+    "emoji": "✡️"
+  },
+  "wheel of dharma": {
+    "emoji": "☸️"
+  },
+  "yin yang": {
+    "emoji": "☯️"
+  },
+  "latin cross": {
+    "emoji": "✝️"
+  },
+  "orthodox cross": {
+    "emoji": "☦️"
+  },
+  "star and crescent": {
+    "emoji": "☪️"
+  },
+  "peace symbol": {
+    "emoji": "☮️"
+  },
+  "menorah": {
+    "emoji": "🕎"
+  },
+  "dotted six-pointed star": {
+    "emoji": "🔯"
+  },
+  "Aries": {
+    "emoji": "♈"
+  },
+  "Taurus": {
+    "emoji": "♉"
+  },
+  "Gemini": {
+    "emoji": "♊"
+  },
+  "Cancer": {
+    "emoji": "♋"
+  },
+  "Leo": {
+    "emoji": "♌"
+  },
+  "Virgo": {
+    "emoji": "♍"
+  },
+  "Libra": {
+    "emoji": "♎"
+  },
+  "Scorpio": {
+    "emoji": "♏"
+  },
+  "Sagittarius": {
+    "emoji": "♐"
+  },
+  "Capricorn": {
+    "emoji": "♑"
+  },
+  "Aquarius": {
+    "emoji": "♒"
+  },
+  "Pisces": {
+    "emoji": "♓"
+  },
+  "Ophiuchus": {
+    "emoji": "⛎"
+  },
+  "shuffle tracks button": {
+    "emoji": "🔀"
+  },
+  "repeat button": {
+    "emoji": "🔁"
+  },
+  "repeat single button": {
+    "emoji": "🔂"
+  },
+  "play button": {
+    "emoji": "▶️"
+  },
+  "fast-forward button": {
+    "emoji": "⏩"
+  },
+  "next track button": {
+    "emoji": "⏭️"
+  },
+  "play or pause button": {
+    "emoji": "⏯️"
+  },
+  "reverse button": {
+    "emoji": "◀️"
+  },
+  "fast reverse button": {
+    "emoji": "⏪"
+  },
+  "last track button": {
+    "emoji": "⏮️"
+  },
+  "upwards button": {
+    "emoji": "🔼"
+  },
+  "fast up button": {
+    "emoji": "⏫"
+  },
+  "downwards button": {
+    "emoji": "🔽"
+  },
+  "fast down button": {
+    "emoji": "⏬"
+  },
+  "pause button": {
+    "emoji": "⏸️"
+  },
+  "stop button": {
+    "emoji": "⏹️"
+  },
+  "record button": {
+    "emoji": "⏺️"
+  },
+  "eject button": {
+    "emoji": "⏏️"
+  },
+  "cinema": {
+    "emoji": "🎦"
+  },
+  "dim button": {
+    "emoji": "🔅"
+  },
+  "bright button": {
+    "emoji": "🔆"
+  },
+  "antenna bars": {
+    "emoji": "📶"
+  },
+  "vibration mode": {
+    "emoji": "📳"
+  },
+  "mobile phone off": {
+    "emoji": "📴"
+  },
+  "female sign": {
+    "emoji": "♀️"
+  },
+  "male sign": {
+    "emoji": "♂️"
+  },
+  "transgender symbol": {
+    "emoji": "⚧️"
+  },
+  "multiply": {
+    "emoji": "✖️"
+  },
+  "plus": {
+    "emoji": "➕"
+  },
+  "minus": {
+    "emoji": "➖"
+  },
+  "divide": {
+    "emoji": "➗"
+  },
+  "infinity": {
+    "emoji": "♾️"
+  },
+  "double exclamation mark": {
+    "emoji": "‼️"
+  },
+  "exclamation question mark": {
+    "emoji": "⁉️"
+  },
+  "question mark": {
+    "emoji": "❓"
+  },
+  "white question mark": {
+    "emoji": "❔"
+  },
+  "white exclamation mark": {
+    "emoji": "❕"
+  },
+  "exclamation mark": {
+    "emoji": "❗"
+  },
+  "wavy dash": {
+    "emoji": "〰️"
+  },
+  "currency exchange": {
+    "emoji": "💱"
+  },
+  "heavy dollar sign": {
+    "emoji": "💲"
+  },
+  "medical symbol": {
+    "emoji": "⚕️"
+  },
+  "recycling symbol": {
+    "emoji": "♻️"
+  },
+  "fleur-de-lis": {
+    "emoji": "⚜️"
+  },
+  "trident emblem": {
+    "emoji": "🔱"
+  },
+  "name badge": {
+    "emoji": "📛"
+  },
+  "Japanese symbol for beginner": {
+    "emoji": "🔰"
+  },
+  "hollow red circle": {
+    "emoji": "⭕"
+  },
+  "check mark button": {
+    "emoji": "✅"
+  },
+  "check box with check": {
+    "emoji": "☑️"
+  },
+  "check mark": {
+    "emoji": "✔️"
+  },
+  "cross mark": {
+    "emoji": "❌"
+  },
+  "cross mark button": {
+    "emoji": "❎"
+  },
+  "curly loop": {
+    "emoji": "➰"
+  },
+  "double curly loop": {
+    "emoji": "➿"
+  },
+  "part alternation mark": {
+    "emoji": "〽️"
+  },
+  "eight-spoked asterisk": {
+    "emoji": "✳️"
+  },
+  "eight-pointed star": {
+    "emoji": "✴️"
+  },
+  "sparkle": {
+    "emoji": "❇️"
+  },
+  "copyright": {
+    "emoji": "©️"
+  },
+  "registered": {
+    "emoji": "®️"
+  },
+  "trade mark": {
+    "emoji": "™️"
+  },
+  "keycap: #": {
+    "emoji": "#️⃣"
+  },
+  "keycap: *": {
+    "emoji": "*️⃣"
+  },
+  "keycap: 0": {
+    "emoji": "0️⃣"
+  },
+  "keycap: 1": {
+    "emoji": "1️⃣"
+  },
+  "keycap: 2": {
+    "emoji": "2️⃣"
+  },
+  "keycap: 3": {
+    "emoji": "3️⃣"
+  },
+  "keycap: 4": {
+    "emoji": "4️⃣"
+  },
+  "keycap: 5": {
+    "emoji": "5️⃣"
+  },
+  "keycap: 6": {
+    "emoji": "6️⃣"
+  },
+  "keycap: 7": {
+    "emoji": "7️⃣"
+  },
+  "keycap: 8": {
+    "emoji": "8️⃣"
+  },
+  "keycap: 9": {
+    "emoji": "9️⃣"
+  },
+  "keycap: 10": {
+    "emoji": "🔟"
+  },
+  "input latin uppercase": {
+    "emoji": "🔠"
+  },
+  "input latin lowercase": {
+    "emoji": "🔡"
+  },
+  "input numbers": {
+    "emoji": "🔢"
+  },
+  "input symbols": {
+    "emoji": "🔣"
+  },
+  "input latin letters": {
+    "emoji": "🔤"
+  },
+  "A button (blood type)": {
+    "emoji": "🅰️"
+  },
+  "AB button (blood type)": {
+    "emoji": "🆎"
+  },
+  "B button (blood type)": {
+    "emoji": "🅱️"
+  },
+  "CL button": {
+    "emoji": "🆑"
+  },
+  "COOL button": {
+    "emoji": "🆒"
+  },
+  "FREE button": {
+    "emoji": "🆓"
+  },
+  "information": {
+    "emoji": "ℹ️"
+  },
+  "ID button": {
+    "emoji": "🆔"
+  },
+  "circled M": {
+    "emoji": "Ⓜ️"
+  },
+  "NEW button": {
+    "emoji": "🆕"
+  },
+  "NG button": {
+    "emoji": "🆖"
+  },
+  "O button (blood type)": {
+    "emoji": "🅾️"
+  },
+  "OK button": {
+    "emoji": "🆗"
+  },
+  "P button": {
+    "emoji": "🅿️"
+  },
+  "SOS button": {
+    "emoji": "🆘"
+  },
+  "UP! button": {
+    "emoji": "🆙"
+  },
+  "VS button": {
+    "emoji": "🆚"
+  },
+  "Japanese “here” button": {
+    "emoji": "🈁"
+  },
+  "Japanese “service charge” button": {
+    "emoji": "🈂️"
+  },
+  "Japanese “monthly amount” button": {
+    "emoji": "🈷️"
+  },
+  "Japanese “not free of charge” button": {
+    "emoji": "🈶"
+  },
+  "Japanese “reserved” button": {
+    "emoji": "🈯"
+  },
+  "Japanese “bargain” button": {
+    "emoji": "🉐"
+  },
+  "Japanese “discount” button": {
+    "emoji": "🈹"
+  },
+  "Japanese “free of charge” button": {
+    "emoji": "🈚"
+  },
+  "Japanese “prohibited” button": {
+    "emoji": "🈲"
+  },
+  "Japanese “acceptable” button": {
+    "emoji": "🉑"
+  },
+  "Japanese “application” button": {
+    "emoji": "🈸"
+  },
+  "Japanese “passing grade” button": {
+    "emoji": "🈴"
+  },
+  "Japanese “vacancy” button": {
+    "emoji": "🈳"
+  },
+  "Japanese “congratulations” button": {
+    "emoji": "㊗️"
+  },
+  "Japanese “secret” button": {
+    "emoji": "㊙️"
+  },
+  "Japanese “open for business” button": {
+    "emoji": "🈺"
+  },
+  "Japanese “no vacancy” button": {
+    "emoji": "🈵"
+  },
+  "red circle": {
+    "emoji": "🔴"
+  },
+  "orange circle": {
+    "emoji": "🟠"
+  },
+  "yellow circle": {
+    "emoji": "🟡"
+  },
+  "green circle": {
+    "emoji": "🟢"
+  },
+  "blue circle": {
+    "emoji": "🔵"
+  },
+  "purple circle": {
+    "emoji": "🟣"
+  },
+  "brown circle": {
+    "emoji": "🟤"
+  },
+  "black circle": {
+    "emoji": "⚫"
+  },
+  "white circle": {
+    "emoji": "⚪"
+  },
+  "red square": {
+    "emoji": "🟥"
+  },
+  "orange square": {
+    "emoji": "🟧"
+  },
+  "yellow square": {
+    "emoji": "🟨"
+  },
+  "green square": {
+    "emoji": "🟩"
+  },
+  "blue square": {
+    "emoji": "🟦"
+  },
+  "purple square": {
+    "emoji": "🟪"
+  },
+  "brown square": {
+    "emoji": "🟫"
+  },
+  "black large square": {
+    "emoji": "⬛"
+  },
+  "white large square": {
+    "emoji": "⬜"
+  },
+  "black medium square": {
+    "emoji": "◼️"
+  },
+  "white medium square": {
+    "emoji": "◻️"
+  },
+  "black medium-small square": {
+    "emoji": "◾"
+  },
+  "white medium-small square": {
+    "emoji": "◽"
+  },
+  "black small square": {
+    "emoji": "▪️"
+  },
+  "white small square": {
+    "emoji": "▫️"
+  },
+  "large orange diamond": {
+    "emoji": "🔶"
+  },
+  "large blue diamond": {
+    "emoji": "🔷"
+  },
+  "small orange diamond": {
+    "emoji": "🔸"
+  },
+  "small blue diamond": {
+    "emoji": "🔹"
+  },
+  "red triangle pointed up": {
+    "emoji": "🔺"
+  },
+  "red triangle pointed down": {
+    "emoji": "🔻"
+  },
+  "diamond with a dot": {
+    "emoji": "💠"
+  },
+  "radio button": {
+    "emoji": "🔘"
+  },
+  "white square button": {
+    "emoji": "🔳"
+  },
+  "black square button": {
+    "emoji": "🔲"
+  },
+  "chequered flag": {
+    "emoji": "🏁"
+  },
+  "triangular flag": {
+    "emoji": "🚩"
+  },
+  "crossed flags": {
+    "emoji": "🎌"
+  },
+  "black flag": {
+    "emoji": "🏴"
+  },
+  "white flag": {
+    "emoji": "🏳️"
+  },
+  "rainbow flag": {
+    "emoji": "🏳️‍🌈"
+  },
+  "transgender flag": {
+    "emoji": "🏳️‍⚧️"
+  },
+  "pirate flag": {
+    "emoji": "🏴‍☠️"
+  },
+  "flag: Ascension Island": {
+    "emoji": "🇦🇨"
+  },
+  "flag: Andorra": {
+    "emoji": "🇦🇩"
+  },
+  "flag: United Arab Emirates": {
+    "emoji": "🇦🇪"
+  },
+  "flag: Afghanistan": {
+    "emoji": "🇦🇫"
+  },
+  "flag: Antigua & Barbuda": {
+    "emoji": "🇦🇬"
+  },
+  "flag: Anguilla": {
+    "emoji": "🇦🇮"
+  },
+  "flag: Albania": {
+    "emoji": "🇦🇱"
+  },
+  "flag: Armenia": {
+    "emoji": "🇦🇲"
+  },
+  "flag: Angola": {
+    "emoji": "🇦🇴"
+  },
+  "flag: Antarctica": {
+    "emoji": "🇦🇶"
+  },
+  "flag: Argentina": {
+    "emoji": "🇦🇷"
+  },
+  "flag: American Samoa": {
+    "emoji": "🇦🇸"
+  },
+  "flag: Austria": {
+    "emoji": "🇦🇹"
+  },
+  "flag: Australia": {
+    "emoji": "🇦🇺"
+  },
+  "flag: Aruba": {
+    "emoji": "🇦🇼"
+  },
+  "flag: Åland Islands": {
+    "emoji": "🇦🇽"
+  },
+  "flag: Azerbaijan": {
+    "emoji": "🇦🇿"
+  },
+  "flag: Bosnia & Herzegovina": {
+    "emoji": "🇧🇦"
+  },
+  "flag: Barbados": {
+    "emoji": "🇧🇧"
+  },
+  "flag: Bangladesh": {
+    "emoji": "🇧🇩"
+  },
+  "flag: Belgium": {
+    "emoji": "🇧🇪"
+  },
+  "flag: Burkina Faso": {
+    "emoji": "🇧🇫"
+  },
+  "flag: Bulgaria": {
+    "emoji": "🇧🇬"
+  },
+  "flag: Bahrain": {
+    "emoji": "🇧🇭"
+  },
+  "flag: Burundi": {
+    "emoji": "🇧🇮"
+  },
+  "flag: Benin": {
+    "emoji": "🇧🇯"
+  },
+  "flag: St. Barthélemy": {
+    "emoji": "🇧🇱"
+  },
+  "flag: Bermuda": {
+    "emoji": "🇧🇲"
+  },
+  "flag: Brunei": {
+    "emoji": "🇧🇳"
+  },
+  "flag: Bolivia": {
+    "emoji": "🇧🇴"
+  },
+  "flag: Caribbean Netherlands": {
+    "emoji": "🇧🇶"
+  },
+  "flag: Brazil": {
+    "emoji": "🇧🇷"
+  },
+  "flag: Bahamas": {
+    "emoji": "🇧🇸"
+  },
+  "flag: Bhutan": {
+    "emoji": "🇧🇹"
+  },
+  "flag: Bouvet Island": {
+    "emoji": "🇧🇻"
+  },
+  "flag: Botswana": {
+    "emoji": "🇧🇼"
+  },
+  "flag: Belarus": {
+    "emoji": "🇧🇾"
+  },
+  "flag: Belize": {
+    "emoji": "🇧🇿"
+  },
+  "flag: Canada": {
+    "emoji": "🇨🇦"
+  },
+  "flag: Cocos (Keeling) Islands": {
+    "emoji": "🇨🇨"
+  },
+  "flag: Congo - Kinshasa": {
+    "emoji": "🇨🇩"
+  },
+  "flag: Central African Republic": {
+    "emoji": "🇨🇫"
+  },
+  "flag: Congo - Brazzaville": {
+    "emoji": "🇨🇬"
+  },
+  "flag: Switzerland": {
+    "emoji": "🇨🇭"
+  },
+  "flag: Côte d’Ivoire": {
+    "emoji": "🇨🇮"
+  },
+  "flag: Cook Islands": {
+    "emoji": "🇨🇰"
+  },
+  "flag: Chile": {
+    "emoji": "🇨🇱"
+  },
+  "flag: Cameroon": {
+    "emoji": "🇨🇲"
+  },
+  "flag: China": {
+    "emoji": "🇨🇳"
+  },
+  "flag: Colombia": {
+    "emoji": "🇨🇴"
+  },
+  "flag: Clipperton Island": {
+    "emoji": "🇨🇵"
+  },
+  "flag: Costa Rica": {
+    "emoji": "🇨🇷"
+  },
+  "flag: Cuba": {
+    "emoji": "🇨🇺"
+  },
+  "flag: Cape Verde": {
+    "emoji": "🇨🇻"
+  },
+  "flag: Curaçao": {
+    "emoji": "🇨🇼"
+  },
+  "flag: Christmas Island": {
+    "emoji": "🇨🇽"
+  },
+  "flag: Cyprus": {
+    "emoji": "🇨🇾"
+  },
+  "flag: Czechia": {
+    "emoji": "🇨🇿"
+  },
+  "flag: Germany": {
+    "emoji": "🇩🇪"
+  },
+  "flag: Diego Garcia": {
+    "emoji": "🇩🇬"
+  },
+  "flag: Djibouti": {
+    "emoji": "🇩🇯"
+  },
+  "flag: Denmark": {
+    "emoji": "🇩🇰"
+  },
+  "flag: Dominica": {
+    "emoji": "🇩🇲"
+  },
+  "flag: Dominican Republic": {
+    "emoji": "🇩🇴"
+  },
+  "flag: Algeria": {
+    "emoji": "🇩🇿"
+  },
+  "flag: Ceuta & Melilla": {
+    "emoji": "🇪🇦"
+  },
+  "flag: Ecuador": {
+    "emoji": "🇪🇨"
+  },
+  "flag: Estonia": {
+    "emoji": "🇪🇪"
+  },
+  "flag: Egypt": {
+    "emoji": "🇪🇬"
+  },
+  "flag: Western Sahara": {
+    "emoji": "🇪🇭"
+  },
+  "flag: Eritrea": {
+    "emoji": "🇪🇷"
+  },
+  "flag: Spain": {
+    "emoji": "🇪🇸"
+  },
+  "flag: Ethiopia": {
+    "emoji": "🇪🇹"
+  },
+  "flag: European Union": {
+    "emoji": "🇪🇺"
+  },
+  "flag: Finland": {
+    "emoji": "🇫🇮"
+  },
+  "flag: Fiji": {
+    "emoji": "🇫🇯"
+  },
+  "flag: Falkland Islands": {
+    "emoji": "🇫🇰"
+  },
+  "flag: Micronesia": {
+    "emoji": "🇫🇲"
+  },
+  "flag: Faroe Islands": {
+    "emoji": "🇫🇴"
+  },
+  "flag: France": {
+    "emoji": "🇫🇷"
+  },
+  "flag: Gabon": {
+    "emoji": "🇬🇦"
+  },
+  "flag: United Kingdom": {
+    "emoji": "🇬🇧"
+  },
+  "flag: Grenada": {
+    "emoji": "🇬🇩"
+  },
+  "flag: Georgia": {
+    "emoji": "🇬🇪"
+  },
+  "flag: French Guiana": {
+    "emoji": "🇬🇫"
+  },
+  "flag: Guernsey": {
+    "emoji": "🇬🇬"
+  },
+  "flag: Ghana": {
+    "emoji": "🇬🇭"
+  },
+  "flag: Gibraltar": {
+    "emoji": "🇬🇮"
+  },
+  "flag: Greenland": {
+    "emoji": "🇬🇱"
+  },
+  "flag: Gambia": {
+    "emoji": "🇬🇲"
+  },
+  "flag: Guinea": {
+    "emoji": "🇬🇳"
+  },
+  "flag: Guadeloupe": {
+    "emoji": "🇬🇵"
+  },
+  "flag: Equatorial Guinea": {
+    "emoji": "🇬🇶"
+  },
+  "flag: Greece": {
+    "emoji": "🇬🇷"
+  },
+  "flag: South Georgia & South Sandwich Islands": {
+    "emoji": "🇬🇸"
+  },
+  "flag: Guatemala": {
+    "emoji": "🇬🇹"
+  },
+  "flag: Guam": {
+    "emoji": "🇬🇺"
+  },
+  "flag: Guinea-Bissau": {
+    "emoji": "🇬🇼"
+  },
+  "flag: Guyana": {
+    "emoji": "🇬🇾"
+  },
+  "flag: Hong Kong SAR China": {
+    "emoji": "🇭🇰"
+  },
+  "flag: Heard & McDonald Islands": {
+    "emoji": "🇭🇲"
+  },
+  "flag: Honduras": {
+    "emoji": "🇭🇳"
+  },
+  "flag: Croatia": {
+    "emoji": "🇭🇷"
+  },
+  "flag: Haiti": {
+    "emoji": "🇭🇹"
+  },
+  "flag: Hungary": {
+    "emoji": "🇭🇺"
+  },
+  "flag: Canary Islands": {
+    "emoji": "🇮🇨"
+  },
+  "flag: Indonesia": {
+    "emoji": "🇮🇩"
+  },
+  "flag: Ireland": {
+    "emoji": "🇮🇪"
+  },
+  "flag: Israel": {
+    "emoji": "🇮🇱"
+  },
+  "flag: Isle of Man": {
+    "emoji": "🇮🇲"
+  },
+  "flag: India": {
+    "emoji": "🇮🇳"
+  },
+  "flag: British Indian Ocean Territory": {
+    "emoji": "🇮🇴"
+  },
+  "flag: Iraq": {
+    "emoji": "🇮🇶"
+  },
+  "flag: Iran": {
+    "emoji": "🇮🇷"
+  },
+  "flag: Iceland": {
+    "emoji": "🇮🇸"
+  },
+  "flag: Italy": {
+    "emoji": "🇮🇹"
+  },
+  "flag: Jersey": {
+    "emoji": "🇯🇪"
+  },
+  "flag: Jamaica": {
+    "emoji": "🇯🇲"
+  },
+  "flag: Jordan": {
+    "emoji": "🇯🇴"
+  },
+  "flag: Japan": {
+    "emoji": "🇯🇵"
+  },
+  "flag: Kenya": {
+    "emoji": "🇰🇪"
+  },
+  "flag: Kyrgyzstan": {
+    "emoji": "🇰🇬"
+  },
+  "flag: Cambodia": {
+    "emoji": "🇰🇭"
+  },
+  "flag: Kiribati": {
+    "emoji": "🇰🇮"
+  },
+  "flag: Comoros": {
+    "emoji": "🇰🇲"
+  },
+  "flag: St. Kitts & Nevis": {
+    "emoji": "🇰🇳"
+  },
+  "flag: North Korea": {
+    "emoji": "🇰🇵"
+  },
+  "flag: South Korea": {
+    "emoji": "🇰🇷"
+  },
+  "flag: Kuwait": {
+    "emoji": "🇰🇼"
+  },
+  "flag: Cayman Islands": {
+    "emoji": "🇰🇾"
+  },
+  "flag: Kazakhstan": {
+    "emoji": "🇰🇿"
+  },
+  "flag: Laos": {
+    "emoji": "🇱🇦"
+  },
+  "flag: Lebanon": {
+    "emoji": "🇱🇧"
+  },
+  "flag: St. Lucia": {
+    "emoji": "🇱🇨"
+  },
+  "flag: Liechtenstein": {
+    "emoji": "🇱🇮"
+  },
+  "flag: Sri Lanka": {
+    "emoji": "🇱🇰"
+  },
+  "flag: Liberia": {
+    "emoji": "🇱🇷"
+  },
+  "flag: Lesotho": {
+    "emoji": "🇱🇸"
+  },
+  "flag: Lithuania": {
+    "emoji": "🇱🇹"
+  },
+  "flag: Luxembourg": {
+    "emoji": "🇱🇺"
+  },
+  "flag: Latvia": {
+    "emoji": "🇱🇻"
+  },
+  "flag: Libya": {
+    "emoji": "🇱🇾"
+  },
+  "flag: Morocco": {
+    "emoji": "🇲🇦"
+  },
+  "flag: Monaco": {
+    "emoji": "🇲🇨"
+  },
+  "flag: Moldova": {
+    "emoji": "🇲🇩"
+  },
+  "flag: Montenegro": {
+    "emoji": "🇲🇪"
+  },
+  "flag: St. Martin": {
+    "emoji": "🇲🇫"
+  },
+  "flag: Madagascar": {
+    "emoji": "🇲🇬"
+  },
+  "flag: Marshall Islands": {
+    "emoji": "🇲🇭"
+  },
+  "flag: North Macedonia": {
+    "emoji": "🇲🇰"
+  },
+  "flag: Mali": {
+    "emoji": "🇲🇱"
+  },
+  "flag: Myanmar (Burma)": {
+    "emoji": "🇲🇲"
+  },
+  "flag: Mongolia": {
+    "emoji": "🇲🇳"
+  },
+  "flag: Macao SAR China": {
+    "emoji": "🇲🇴"
+  },
+  "flag: Northern Mariana Islands": {
+    "emoji": "🇲🇵"
+  },
+  "flag: Martinique": {
+    "emoji": "🇲🇶"
+  },
+  "flag: Mauritania": {
+    "emoji": "🇲🇷"
+  },
+  "flag: Montserrat": {
+    "emoji": "🇲🇸"
+  },
+  "flag: Malta": {
+    "emoji": "🇲🇹"
+  },
+  "flag: Mauritius": {
+    "emoji": "🇲🇺"
+  },
+  "flag: Maldives": {
+    "emoji": "🇲🇻"
+  },
+  "flag: Malawi": {
+    "emoji": "🇲🇼"
+  },
+  "flag: Mexico": {
+    "emoji": "🇲🇽"
+  },
+  "flag: Malaysia": {
+    "emoji": "🇲🇾"
+  },
+  "flag: Mozambique": {
+    "emoji": "🇲🇿"
+  },
+  "flag: Namibia": {
+    "emoji": "🇳🇦"
+  },
+  "flag: New Caledonia": {
+    "emoji": "🇳🇨"
+  },
+  "flag: Niger": {
+    "emoji": "🇳🇪"
+  },
+  "flag: Norfolk Island": {
+    "emoji": "🇳🇫"
+  },
+  "flag: Nigeria": {
+    "emoji": "🇳🇬"
+  },
+  "flag: Nicaragua": {
+    "emoji": "🇳🇮"
+  },
+  "flag: Netherlands": {
+    "emoji": "🇳🇱"
+  },
+  "flag: Norway": {
+    "emoji": "🇳🇴"
+  },
+  "flag: Nepal": {
+    "emoji": "🇳🇵"
+  },
+  "flag: Nauru": {
+    "emoji": "🇳🇷"
+  },
+  "flag: Niue": {
+    "emoji": "🇳🇺"
+  },
+  "flag: New Zealand": {
+    "emoji": "🇳🇿"
+  },
+  "flag: Oman": {
+    "emoji": "🇴🇲"
+  },
+  "flag: Panama": {
+    "emoji": "🇵🇦"
+  },
+  "flag: Peru": {
+    "emoji": "🇵🇪"
+  },
+  "flag: French Polynesia": {
+    "emoji": "🇵🇫"
+  },
+  "flag: Papua New Guinea": {
+    "emoji": "🇵🇬"
+  },
+  "flag: Philippines": {
+    "emoji": "🇵🇭"
+  },
+  "flag: Pakistan": {
+    "emoji": "🇵🇰"
+  },
+  "flag: Poland": {
+    "emoji": "🇵🇱"
+  },
+  "flag: St. Pierre & Miquelon": {
+    "emoji": "🇵🇲"
+  },
+  "flag: Pitcairn Islands": {
+    "emoji": "🇵🇳"
+  },
+  "flag: Puerto Rico": {
+    "emoji": "🇵🇷"
+  },
+  "flag: Palestinian Territories": {
+    "emoji": "🇵🇸"
+  },
+  "flag: Portugal": {
+    "emoji": "🇵🇹"
+  },
+  "flag: Palau": {
+    "emoji": "🇵🇼"
+  },
+  "flag: Paraguay": {
+    "emoji": "🇵🇾"
+  },
+  "flag: Qatar": {
+    "emoji": "🇶🇦"
+  },
+  "flag: Réunion": {
+    "emoji": "🇷🇪"
+  },
+  "flag: Romania": {
+    "emoji": "🇷🇴"
+  },
+  "flag: Serbia": {
+    "emoji": "🇷🇸"
+  },
+  "flag: Russia": {
+    "emoji": "🇷🇺"
+  },
+  "flag: Rwanda": {
+    "emoji": "🇷🇼"
+  },
+  "flag: Saudi Arabia": {
+    "emoji": "🇸🇦"
+  },
+  "flag: Solomon Islands": {
+    "emoji": "🇸🇧"
+  },
+  "flag: Seychelles": {
+    "emoji": "🇸🇨"
+  },
+  "flag: Sudan": {
+    "emoji": "🇸🇩"
+  },
+  "flag: Sweden": {
+    "emoji": "🇸🇪"
+  },
+  "flag: Singapore": {
+    "emoji": "🇸🇬"
+  },
+  "flag: St. Helena": {
+    "emoji": "🇸🇭"
+  },
+  "flag: Slovenia": {
+    "emoji": "🇸🇮"
+  },
+  "flag: Svalbard & Jan Mayen": {
+    "emoji": "🇸🇯"
+  },
+  "flag: Slovakia": {
+    "emoji": "🇸🇰"
+  },
+  "flag: Sierra Leone": {
+    "emoji": "🇸🇱"
+  },
+  "flag: San Marino": {
+    "emoji": "🇸🇲"
+  },
+  "flag: Senegal": {
+    "emoji": "🇸🇳"
+  },
+  "flag: Somalia": {
+    "emoji": "🇸🇴"
+  },
+  "flag: Suriname": {
+    "emoji": "🇸🇷"
+  },
+  "flag: South Sudan": {
+    "emoji": "🇸🇸"
+  },
+  "flag: São Tomé & Príncipe": {
+    "emoji": "🇸🇹"
+  },
+  "flag: El Salvador": {
+    "emoji": "🇸🇻"
+  },
+  "flag: Sint Maarten": {
+    "emoji": "🇸🇽"
+  },
+  "flag: Syria": {
+    "emoji": "🇸🇾"
+  },
+  "flag: Eswatini": {
+    "emoji": "🇸🇿"
+  },
+  "flag: Tristan da Cunha": {
+    "emoji": "🇹🇦"
+  },
+  "flag: Turks & Caicos Islands": {
+    "emoji": "🇹🇨"
+  },
+  "flag: Chad": {
+    "emoji": "🇹🇩"
+  },
+  "flag: French Southern Territories": {
+    "emoji": "🇹🇫"
+  },
+  "flag: Togo": {
+    "emoji": "🇹🇬"
+  },
+  "flag: Thailand": {
+    "emoji": "🇹🇭"
+  },
+  "flag: Tajikistan": {
+    "emoji": "🇹🇯"
+  },
+  "flag: Tokelau": {
+    "emoji": "🇹🇰"
+  },
+  "flag: Timor-Leste": {
+    "emoji": "🇹🇱"
+  },
+  "flag: Turkmenistan": {
+    "emoji": "🇹🇲"
+  },
+  "flag: Tunisia": {
+    "emoji": "🇹🇳"
+  },
+  "flag: Tonga": {
+    "emoji": "🇹🇴"
+  },
+  "flag: Turkey": {
+    "emoji": "🇹🇷"
+  },
+  "flag: Trinidad & Tobago": {
+    "emoji": "🇹🇹"
+  },
+  "flag: Tuvalu": {
+    "emoji": "🇹🇻"
+  },
+  "flag: Taiwan": {
+    "emoji": "🇹🇼"
+  },
+  "flag: Tanzania": {
+    "emoji": "🇹🇿"
+  },
+  "flag: Ukraine": {
+    "emoji": "🇺🇦"
+  },
+  "flag: Uganda": {
+    "emoji": "🇺🇬"
+  },
+  "flag: U.S. Outlying Islands": {
+    "emoji": "🇺🇲"
+  },
+  "flag: United Nations": {
+    "emoji": "🇺🇳"
+  },
+  "flag: United States": {
+    "emoji": "🇺🇸"
+  },
+  "flag: Uruguay": {
+    "emoji": "🇺🇾"
+  },
+  "flag: Uzbekistan": {
+    "emoji": "🇺🇿"
+  },
+  "flag: Vatican City": {
+    "emoji": "🇻🇦"
+  },
+  "flag: St. Vincent & Grenadines": {
+    "emoji": "🇻🇨"
+  },
+  "flag: Venezuela": {
+    "emoji": "🇻🇪"
+  },
+  "flag: British Virgin Islands": {
+    "emoji": "🇻🇬"
+  },
+  "flag: U.S. Virgin Islands": {
+    "emoji": "🇻🇮"
+  },
+  "flag: Vietnam": {
+    "emoji": "🇻🇳"
+  },
+  "flag: Vanuatu": {
+    "emoji": "🇻🇺"
+  },
+  "flag: Wallis & Futuna": {
+    "emoji": "🇼🇫"
+  },
+  "flag: Samoa": {
+    "emoji": "🇼🇸"
+  },
+  "flag: Kosovo": {
+    "emoji": "🇽🇰"
+  },
+  "flag: Yemen": {
+    "emoji": "🇾🇪"
+  },
+  "flag: Mayotte": {
+    "emoji": "🇾🇹"
+  },
+  "flag: South Africa": {
+    "emoji": "🇿🇦"
+  },
+  "flag: Zambia": {
+    "emoji": "🇿🇲"
+  },
+  "flag: Zimbabwe": {
+    "emoji": "🇿🇼"
+  },
+  "flag: England": {
+    "emoji": "🏴󠁧󠁢󠁥󠁮󠁧󠁿"
+  },
+  "flag: Scotland": {
+    "emoji": "🏴󠁧󠁢󠁳󠁣󠁴󠁿"
+  },
+  "flag: Wales": {
+    "emoji": "🏴󠁧󠁢󠁷󠁬󠁳󠁿"
+  }
+}
diff --git a/src/pages/index.js b/src/pages/index.js
index 4dcc39d..bbc157c 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -5,6 +5,7 @@ import Link from 'next/link'
 
 import LoadingIndicator from '../components/LoadingIndicator'
 import Sleep from '../components/sleep'
+import NewsEntry from '../components/newsEntry'
 import DbSelector from '../components/dbSelector.js'
 
 import styles from './index.module.css'
@@ -21,77 +22,67 @@ const links = {
   },
 }
 
-export default function Index(props) {
-  const [news, setNews] = useState(null)
-  const [allQrSelector, setAllQrSelector] = useState(null)
-  const motd = props.globalData.motd
-  // const userSpecificMotd = props.globalData.userSpecificMotd
-
-  useEffect(() => {
-    console.info('Fetching news.json')
+function fetchNews() {
+  return new Promise((resolve) => {
     fetch(`${constants.apiUrl}news.json`, {
       credentials: 'include',
     })
       .then((resp) => {
         return resp.json()
       })
-      .then((data) => {
-        setNews(data)
+      .then((res) => {
+        resolve(res)
       })
+  })
+}
+
+export default function Index({ globalData }) {
+  const userId = globalData.userId
+  const motd = globalData.motd
+  const [news, setNews] = useState(null)
+  const [allQrSelector, setAllQrSelector] = useState(null)
+  // const userSpecificMotd = props.globalData.userSpecificMotd
+
+  useEffect(() => {
+    console.info('Fetching news.json')
+    fetchNews().then((res) => {
+      setNews(res)
+    })
   }, [])
 
-  const renderQAItem = (newsItem, key) => {
-    return (
-      <div key={key} className={styles.itemContainer}>
-        <div className={styles.itemNumber}>{key} :</div>
-        <div
-          className={styles.question}
-          dangerouslySetInnerHTML={{ __html: newsItem.q }}
-        />
-        <div
-          className={styles.answer}
-          dangerouslySetInnerHTML={{ __html: newsItem.a }}
-        />
-      </div>
-    )
-  }
-
-  const renderNewsItem = (newsItem, key) => {
-    return (
-      <div key={key} className={styles.itemContainer}>
-        <div className={styles.itemNumber}>{key} :</div>
-        <div
-          className={styles.newsTitle}
-          dangerouslySetInnerHTML={{ __html: newsItem.title }}
-        />
-        <div
-          className={styles.newsBody}
-          dangerouslySetInnerHTML={{ __html: newsItem.body }}
-        />
-      </div>
-    )
-  }
-
   const renderNews = () => {
     if (news) {
-      let questions = Object.keys(news)
+      let newsItems = Object.keys(news)
         .map((key) => {
-          let newsItem = news[key]
-          if (newsItem.q) {
-            return (
-              <div key={key}>
-                {renderQAItem(newsItem, key)}
-                <hr />
-              </div>
-            )
-          } else {
-            return (
-              <div key={key}>
-                {renderNewsItem(newsItem, key)}
-                <hr />
-              </div>
-            )
-          }
+          let newsEntryData = news[key]
+          return (
+            <NewsEntry
+              onReact={(reaction, isDelete) => {
+                console.log(reaction, isDelete)
+                fetch(constants.apiUrl + 'infos', {
+                  method: 'POST',
+                  credentials: 'include',
+                  headers: {
+                    Accept: 'application/json',
+                    'Content-Type': 'application/json',
+                  },
+                  body: JSON.stringify({
+                    react: reaction,
+                    newsKey: key,
+                    isDelete: isDelete,
+                  }),
+                }).then((res) => {
+                  fetchNews().then((res) => {
+                    setNews(res)
+                  })
+                })
+              }}
+              uid={userId}
+              key={key}
+              newsKey={key}
+              newsItem={newsEntryData}
+            />
+          )
         })
         .reverse()
 
@@ -100,7 +91,7 @@ export default function Index(props) {
           <div className={styles.title}>News</div>
           <hr />
           <hr />
-          <div className={styles.questionscontainer}>{questions}</div>
+          <div>{newsItems}</div>
         </div>
       )
     } else {
diff --git a/src/pages/index.module.css b/src/pages/index.module.css
index e29b3ae..bab4ce3 100644
--- a/src/pages/index.module.css
+++ b/src/pages/index.module.css
@@ -30,20 +30,6 @@
   margin: 5px;
 }
 
-.itemContainer {
-  margin: 20px 5px;
-}
-
-.itemContainer:hover {
-  background-color: var(--hoover-color);
-}
-
-.newsBody {
-  margin: 0px 5px;
-  font-size: 18px;
-  color: #fff;
-}
-
 .title {
   color: #9999ff;
   font-size: 30px;
@@ -56,12 +42,6 @@
   text-align: center;
 }
 
-.newsTitle {
-  font-size: 28px;
-  color: var(--text-color);
-  margin: 0px 5px;
-}
-
 .question {
   font-weight: 'bold';
   font-size: 16px;
@@ -73,12 +53,6 @@
   margin: 0px 5px;
 }
 
-.itemNumber {
-  color: #fff;
-  margin: 0px 5px;
-  font-size: 24px;
-}
-
 .repos {
   display: flex;
   flex-direction: column;

From 71911063b0107e5b22311a970387c0254fe8e7b1 Mon Sep 17 00:00:00 2001
From: mrfry <mr.fry@tutanota.com>
Date: Thu, 4 Mar 2021 21:31:32 +0100
Subject: [PATCH 06/14] Added comments to news items

---
 src/components/comments.js            | 169 ++++++++++++++++++++++++++
 src/components/comments.module.css    |  80 ++++++++++++
 src/components/newsEntry.js           |  33 ++++-
 src/components/reactButton.js         |   3 +
 src/components/reactButton.module.css |  10 +-
 src/components/tooltip.js             |   8 +-
 src/components/tooltip.module.css     |   1 -
 src/constants.json                    |   2 +-
 src/pages/index.js                    |  73 ++++++++++-
 9 files changed, 357 insertions(+), 22 deletions(-)
 create mode 100644 src/components/comments.js
 create mode 100644 src/components/comments.module.css

diff --git a/src/components/comments.js b/src/components/comments.js
new file mode 100644
index 0000000..909e573
--- /dev/null
+++ b/src/components/comments.js
@@ -0,0 +1,169 @@
+import React, { useState } from 'react'
+
+import ReactButton from './reactButton.js'
+
+import styles from './comments.module.css'
+
+function CommentInput({ onSubmit }) {
+  const [val, setVal] = useState('')
+  return (
+    <div className={styles.commentAreaContainer}>
+      <textarea
+        autoFocus
+        className={styles.commentArea}
+        value={val}
+        onChange={(e) => {
+          setVal(e.target.value)
+        }}
+      />
+      <div>
+        <span
+          onClick={() => {
+            onSubmit(val)
+          }}
+          className={styles.button}
+        >
+          Submit
+        </span>
+      </div>
+    </div>
+  )
+}
+
+function Comment({ comment, index, onComment, onDelete, onReact, uid }) {
+  const [displayed, setDisplayed] = useState(true)
+  const [commenting, setCommenting] = useState(false)
+  const { text, subComments, date, user, reacts } = comment
+  const own = uid === user
+
+  return (
+    <div className={styles.comment}>
+      <div className={`${styles.commentData} ${own && styles.ownComment}`}>
+        <div className={styles.commentHeader}>
+          <div className={styles.userContainer}>
+            <div
+              className={styles.showHide}
+              onClick={() => {
+                setDisplayed(!displayed)
+              }}
+            >
+              {displayed ? '[-]' : '[+]'}
+            </div>
+            <div>User #{user}</div>
+          </div>
+          <div>{date}</div>
+        </div>
+        <div className={`${!displayed && styles.hidden}`}>
+          <div className={styles.commentText}> {text}</div>
+          <div className={styles.actionsContainer}>
+            <div
+              className={styles.button}
+              onClick={() => {
+                setCommenting(true)
+              }}
+            >
+              Reply...
+            </div>
+            {own && (
+              <div
+                className={styles.button}
+                onClick={() => {
+                  onDelete([index])
+                }}
+              >
+                Delete
+              </div>
+            )}
+            <ReactButton
+              onClick={(reaction, isDelete) => {
+                onReact([index], reaction, isDelete)
+              }}
+              uid={uid}
+              existingReacts={reacts}
+            />
+          </div>
+          {commenting && (
+            <CommentInput
+              onSubmit={(e) => {
+                onComment([index], e)
+                setCommenting(false)
+              }}
+            />
+          )}
+        </div>
+      </div>
+      <div className={`${!displayed && styles.hidden}`}>
+        {subComments &&
+          subComments.map((sc, i) => {
+            return (
+              <Comment
+                comment={sc}
+                onReact={(path, reaction, isDelete) => {
+                  onReact([...path, index], reaction, isDelete)
+                }}
+                onDelete={(path) => {
+                  onDelete([...path, index])
+                }}
+                onComment={(path, text) => {
+                  onComment([...path, index], text)
+                }}
+                index={i}
+                key={i}
+                uid={uid}
+              />
+            )
+          })}
+      </div>
+    </div>
+  )
+}
+
+export default function Comments({
+  comments,
+  onComment,
+  onDelete,
+  onReact,
+  uid,
+}) {
+  const [addingNewComment, setAddingNewComment] = useState(false)
+  return (
+    <div>
+      {comments && comments.length > 0 ? (
+        comments.map((comment, i) => {
+          return (
+            <Comment
+              onReact={onReact}
+              onComment={onComment}
+              onDelete={onDelete}
+              comment={comment}
+              index={i}
+              key={i}
+              uid={uid}
+            />
+          )
+        })
+      ) : (
+        <div>
+          <div>No comments yet</div>
+        </div>
+      )}
+      {addingNewComment ? (
+        <CommentInput
+          onSubmit={(e) => {
+            setAddingNewComment(false)
+            onComment([], e)
+          }}
+        />
+      ) : (
+        <span
+          onClick={() => {
+            setAddingNewComment(true)
+          }}
+          className={styles.button}
+        >
+          Add new
+        </span>
+      )}
+    </div>
+  )
+}
diff --git a/src/components/comments.module.css b/src/components/comments.module.css
new file mode 100644
index 0000000..ef4c72d
--- /dev/null
+++ b/src/components/comments.module.css
@@ -0,0 +1,80 @@
+.comment {
+  margin-left: 25px;
+  padding: 8px 0px;
+}
+
+.commentData {
+  padding: 5px 2px;
+  border-left: 1px solid var(--text-color);
+  background-color: #222;
+}
+
+.commentHeader {
+  display: flex;
+  justify-content: space-between;
+}
+
+.commentHeader > div {
+  font-weight: bold;
+  margin: 2px;
+}
+
+.userContainer {
+  display: flex;
+  flex-direction: row;
+}
+
+.userContainer > div {
+  padding: 0px 3px;
+}
+
+.commentText {
+  margin: 2px;
+  padding: 10px 5px;
+}
+
+.ownComment {
+  border-left: 1px solid yellow;
+}
+
+.showHide {
+  cursor: pointer;
+}
+
+.hidden {
+  display: none;
+}
+
+.actionsContainer {
+  display: flex;
+  align-items: center;
+}
+
+.button {
+  margin: 2px 2px;
+  padding: 0px 10px;
+  border: 1px solid #444;
+  border-radius: 6px;
+  cursor: pointer;
+}
+
+.button:hover {
+  background-color: #444;
+}
+
+.commentArea {
+  color: var(--text-color);
+  background-color: var(--background-color);
+  font-size: 16px;
+  box-sizing: border-box;
+  height: 120px;
+  width: 100%;
+}
+
+.commentAreaContainer {
+  margin: 0px 8px 3px 8px;
+}
+
+.commentAreaContainer > div {
+  margin: 5px 0px;
+}
diff --git a/src/components/newsEntry.js b/src/components/newsEntry.js
index 58228d2..f899f52 100644
--- a/src/components/newsEntry.js
+++ b/src/components/newsEntry.js
@@ -1,29 +1,52 @@
 import React from 'react'
 
 import ReactButton from './reactButton.js'
+import Comments from './comments.js'
 
 import styles from './newsEntry.module.css'
 
-export default function NewsEntry({ newsKey, newsItem, uid, onReact }) {
+export default function NewsEntry({
+  newsKey,
+  newsItem,
+  uid,
+  onReact,
+  onComment,
+  onDelete,
+}) {
+  const { reacts, title, body, comments } = newsItem
+
   return (
     <div>
       <div className={styles.newsContainer}>
         <div className={styles.itemNumber}>{newsKey} :</div>
         <div
           className={styles.newsTitle}
-          dangerouslySetInnerHTML={{ __html: newsItem.title }}
+          dangerouslySetInnerHTML={{ __html: title }}
         />
         <div
           className={styles.newsBody}
-          dangerouslySetInnerHTML={{ __html: newsItem.body }}
+          dangerouslySetInnerHTML={{ __html: body }}
         />
       </div>
       <ReactButton
-        existingReacts={newsItem.reacts}
+        existingReacts={reacts}
         uid={uid}
-        onClick={onReact}
+        onClick={(reaction, isDelete) => {
+          onReact({ type: 'news', reaction, isDelete })
+        }}
       />
       <hr />
+      <Comments
+        uid={uid}
+        onReact={(path, reaction, isDelete) => {
+          onReact({ type: 'comment', path, reaction, isDelete })
+        }}
+        onComment={onComment}
+        onDelete={onDelete}
+        comments={comments}
+      />
+      <hr />
+      <hr />
     </div>
   )
 }
diff --git a/src/components/reactButton.js b/src/components/reactButton.js
index 1937463..d23aa3c 100644
--- a/src/components/reactButton.js
+++ b/src/components/reactButton.js
@@ -5,6 +5,7 @@ import Tooltip from './tooltip.js'
 import styles from './reactButton.module.css'
 import reactions from '../data/reactions.json'
 
+// TODO: fixdis
 const breakEvery = 7
 
 function ExistingReacts({ existingReacts, onClick, uid }) {
@@ -20,6 +21,7 @@ function ExistingReacts({ existingReacts, onClick, uid }) {
           }
           return (
             <div
+              title={currReact.join(', ')}
               className={`${currReact.includes(uid) && styles.reacted}`}
               key={key}
               onClick={() => {
@@ -78,6 +80,7 @@ export default function ReactButton({ onClick, existingReacts, uid }) {
 
   return (
     <div
+      className={styles.reactContainer}
       onMouseEnter={() => {
         setOpened(true)
       }}
diff --git a/src/components/reactButton.module.css b/src/components/reactButton.module.css
index 03217c8..9c53a71 100644
--- a/src/components/reactButton.module.css
+++ b/src/components/reactButton.module.css
@@ -15,12 +15,10 @@
 
 .reactionContainer > div {
   margin: 2px 2px;
-  padding: 0px 8px;
-  background-color: #444;
+  padding: 0px 10px;
+  border: 1px solid #444;
   border-radius: 6px;
   cursor: pointer;
-
-  font-size: 18px;
 }
 
 .reactionContainer > div:hover {
@@ -35,3 +33,7 @@
 .reacted {
   color: yellow;
 }
+
+.reactContainer {
+  display: inline-block;
+}
diff --git a/src/components/tooltip.js b/src/components/tooltip.js
index a629003..f8a8987 100644
--- a/src/components/tooltip.js
+++ b/src/components/tooltip.js
@@ -3,11 +3,9 @@ import styles from './tooltip.module.css'
 
 export default function Tooltip({ children, text, opened }) {
   return (
-    <div>
-      <div className={styles.tooltip}>
-        {text()}
-        {opened && <span className={styles.tooltiptext}>{children}</span>}
-      </div>
+    <div className={styles.tooltip}>
+      {text()}
+      {opened && <span className={styles.tooltiptext}>{children}</span>}
     </div>
   )
 }
diff --git a/src/components/tooltip.module.css b/src/components/tooltip.module.css
index 59d5723..05b9267 100644
--- a/src/components/tooltip.module.css
+++ b/src/components/tooltip.module.css
@@ -1,7 +1,6 @@
 .tooltip {
   position: relative;
   display: inline-block;
-  border-bottom: 1px dotted black;
 }
 
 .tooltip .tooltiptext {
diff --git a/src/constants.json b/src/constants.json
index 8650745..dec44ec 100644
--- a/src/constants.json
+++ b/src/constants.json
@@ -1,6 +1,6 @@
 {
   "siteUrl": "https://qmining.frylabs.net/",
-  "apiUrl": "https://api.frylabs.net/",
+  "apiUrl": "http://localhost:8080/",
   "mobileWindowWidth": 700,
   "maxQuestionsToRender": 250
 }
diff --git a/src/pages/index.js b/src/pages/index.js
index bbc157c..23f193f 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -57,9 +57,50 @@ export default function Index({ globalData }) {
           let newsEntryData = news[key]
           return (
             <NewsEntry
-              onReact={(reaction, isDelete) => {
-                console.log(reaction, isDelete)
-                fetch(constants.apiUrl + 'infos', {
+              onReact={({ type, path, reaction, isDelete }) => {
+                if (type === 'news') {
+                  fetch(constants.apiUrl + 'infos', {
+                    method: 'POST',
+                    credentials: 'include',
+                    headers: {
+                      Accept: 'application/json',
+                      'Content-Type': 'application/json',
+                    },
+                    body: JSON.stringify({
+                      react: reaction,
+                      newsKey: key,
+                      isDelete: isDelete,
+                    }),
+                  }).then((res) => {
+                    // TODO: dont refetch news
+                    fetchNews().then((res) => {
+                      setNews(res)
+                    })
+                  })
+                } else if (type === 'comment') {
+                  fetch(constants.apiUrl + 'comment', {
+                    method: 'POST',
+                    credentials: 'include',
+                    headers: {
+                      Accept: 'application/json',
+                      'Content-Type': 'application/json',
+                    },
+                    body: JSON.stringify({
+                      type: 'reaction',
+                      newsKey: key,
+                      path: path,
+                      reaction: reaction,
+                      isDelete: isDelete,
+                    }),
+                  }).then((res) => {
+                    fetchNews().then((res) => {
+                      setNews(res)
+                    })
+                  })
+                }
+              }}
+              onDelete={(path) => {
+                fetch(constants.apiUrl + 'comment', {
                   method: 'POST',
                   credentials: 'include',
                   headers: {
@@ -67,11 +108,31 @@ export default function Index({ globalData }) {
                     'Content-Type': 'application/json',
                   },
                   body: JSON.stringify({
-                    react: reaction,
+                    type: 'delete',
+                    path: path,
                     newsKey: key,
-                    isDelete: isDelete,
                   }),
-                }).then((res) => {
+                }).then(() => {
+                  fetchNews().then((res) => {
+                    setNews(res)
+                  })
+                })
+              }}
+              onComment={(path, text) => {
+                fetch(constants.apiUrl + 'comment', {
+                  method: 'POST',
+                  credentials: 'include',
+                  headers: {
+                    Accept: 'application/json',
+                    'Content-Type': 'application/json',
+                  },
+                  body: JSON.stringify({
+                    type: 'add',
+                    path: path,
+                    text: text,
+                    newsKey: key,
+                  }),
+                }).then(() => {
                   fetchNews().then((res) => {
                     setNews(res)
                   })

From a09e9734daca5ad50f179419a0532eccd7f27cb5 Mon Sep 17 00:00:00 2001
From: mrfry <mr.fry@tutanota.com>
Date: Thu, 4 Mar 2021 22:11:21 +0100
Subject: [PATCH 07/14] Added admin comments, styling

---
 src/components/comments.js          | 10 ++++++--
 src/components/comments.module.css  |  9 +++++--
 src/components/newsEntry.js         | 38 +++++++++++++++++------------
 src/components/newsEntry.module.css | 24 ++++++++++++++----
 4 files changed, 56 insertions(+), 25 deletions(-)

diff --git a/src/components/comments.js b/src/components/comments.js
index 909e573..0524073 100644
--- a/src/components/comments.js
+++ b/src/components/comments.js
@@ -33,12 +33,18 @@ function CommentInput({ onSubmit }) {
 function Comment({ comment, index, onComment, onDelete, onReact, uid }) {
   const [displayed, setDisplayed] = useState(true)
   const [commenting, setCommenting] = useState(false)
-  const { text, subComments, date, user, reacts } = comment
+  const { text, subComments, date, user, reacts, adminComment } = comment
   const own = uid === user
 
+  const commentStyle = adminComment
+    ? styles.adminComment
+    : own
+    ? styles.ownComment
+    : ''
+
   return (
     <div className={styles.comment}>
-      <div className={`${styles.commentData} ${own && styles.ownComment}`}>
+      <div className={`${styles.commentData} ${commentStyle}`}>
         <div className={styles.commentHeader}>
           <div className={styles.userContainer}>
             <div
diff --git a/src/components/comments.module.css b/src/components/comments.module.css
index ef4c72d..43bad99 100644
--- a/src/components/comments.module.css
+++ b/src/components/comments.module.css
@@ -5,8 +5,9 @@
 
 .commentData {
   padding: 5px 2px;
-  border-left: 1px solid var(--text-color);
+  border-left: 2px solid var(--text-color);
   background-color: #222;
+  border-radius: 3px;
 }
 
 .commentHeader {
@@ -34,7 +35,7 @@
 }
 
 .ownComment {
-  border-left: 1px solid yellow;
+  border-left: 2px solid green;
 }
 
 .showHide {
@@ -78,3 +79,7 @@
 .commentAreaContainer > div {
   margin: 5px 0px;
 }
+
+.adminComment {
+  border-left: 2px solid yellow;
+}
diff --git a/src/components/newsEntry.js b/src/components/newsEntry.js
index f899f52..4942bd9 100644
--- a/src/components/newsEntry.js
+++ b/src/components/newsEntry.js
@@ -13,29 +13,35 @@ export default function NewsEntry({
   onComment,
   onDelete,
 }) {
-  const { reacts, title, body, comments } = newsItem
+  const { reacts, title, text, user, comments, date, adminPost } = newsItem
 
   return (
     <div>
-      <div className={styles.newsContainer}>
-        <div className={styles.itemNumber}>{newsKey} :</div>
-        <div
-          className={styles.newsTitle}
-          dangerouslySetInnerHTML={{ __html: title }}
-        />
+      <div
+        className={`${styles.newsContainer} ${adminPost && styles.adminPost}`}
+      >
+        <div className={styles.newsHeader}>
+          <div
+            className={styles.newsTitle}
+            dangerouslySetInnerHTML={{ __html: title }}
+          />
+          <div className={styles.user}>
+            <div>User #{user}</div>
+            <div className={styles.newsDate}>{date}</div>
+          </div>
+        </div>
         <div
           className={styles.newsBody}
-          dangerouslySetInnerHTML={{ __html: body }}
+          dangerouslySetInnerHTML={{ __html: text }}
+        />
+        <ReactButton
+          existingReacts={reacts}
+          uid={uid}
+          onClick={(reaction, isDelete) => {
+            onReact({ type: 'news', reaction, isDelete })
+          }}
         />
       </div>
-      <ReactButton
-        existingReacts={reacts}
-        uid={uid}
-        onClick={(reaction, isDelete) => {
-          onReact({ type: 'news', reaction, isDelete })
-        }}
-      />
-      <hr />
       <Comments
         uid={uid}
         onReact={(path, reaction, isDelete) => {
diff --git a/src/components/newsEntry.module.css b/src/components/newsEntry.module.css
index 7ac797b..6d8fc98 100644
--- a/src/components/newsEntry.module.css
+++ b/src/components/newsEntry.module.css
@@ -5,22 +5,36 @@
 }
 
 .newsTitle {
-  font-size: 28px;
+  font-size: 20px;
   color: var(--text-color);
   margin: 0px 5px;
 }
 
-.itemNumber {
-  color: #fff;
+.newsDate {
   margin: 0px 5px;
-  font-size: 24px;
 }
 
 .newsContainer {
-  margin: 20px 5px;
+  margin: 5px 5px;
+}
+
+.adminPost {
+  border-left: 5px solid yellow;
+  border-radius: 5px;
 }
 
 .newsContainer img {
   max-width: 100%;
   min-width: 200px;
 }
+
+.newsHeader {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.user {
+  display: flex;
+  align-items: center;
+}

From 561aa21d9394b0ac4d18427b492c5a27bad9126d Mon Sep 17 00:00:00 2001
From: mrfry <mr.fry@tutanota.com>
Date: Fri, 5 Mar 2021 17:07:37 +0100
Subject: [PATCH 08/14] Front page forum

---
 src/components/comments.js            | 150 ++++++++++++++++--------
 src/components/comments.module.css    |  31 +----
 src/components/composer.js            | 119 +++++++++++++++++++
 src/components/composer.module.css    |  32 ++++++
 src/components/dbSelector.module.css  |   2 +-
 src/components/modal.js               |   2 +-
 src/components/modal.module.css       |  18 ++-
 src/components/newsEntry.js           |  21 +++-
 src/components/newsEntry.module.css   |   2 +-
 src/components/reactButton.js         |  38 +++----
 src/components/reactButton.module.css |   3 +-
 src/components/tooltip.module.css     |   7 +-
 src/defaultStyles.css                 |  36 ++++++
 src/pages/index.js                    | 157 ++++++++++++++++++++++----
 src/pages/ranklist.module.css         |   2 +-
 15 files changed, 484 insertions(+), 136 deletions(-)
 create mode 100644 src/components/composer.js
 create mode 100644 src/components/composer.module.css

diff --git a/src/components/comments.js b/src/components/comments.js
index 0524073..5323f09 100644
--- a/src/components/comments.js
+++ b/src/components/comments.js
@@ -1,30 +1,36 @@
 import React, { useState } from 'react'
 
 import ReactButton from './reactButton.js'
+import Modal from './modal.js'
 
 import styles from './comments.module.css'
 
-function CommentInput({ onSubmit }) {
+function CommentInput({ onSubmit, onCancel }) {
   const [val, setVal] = useState('')
   return (
     <div className={styles.commentAreaContainer}>
       <textarea
         autoFocus
-        className={styles.commentArea}
         value={val}
         onChange={(e) => {
           setVal(e.target.value)
         }}
       />
-      <div>
+      <div className={'actions'}>
         <span
           onClick={() => {
             onSubmit(val)
           }}
-          className={styles.button}
         >
           Submit
         </span>
+        <span
+          onClick={() => {
+            onCancel()
+          }}
+        >
+          Cancel
+        </span>
       </div>
     </div>
   )
@@ -33,10 +39,10 @@ function CommentInput({ onSubmit }) {
 function Comment({ comment, index, onComment, onDelete, onReact, uid }) {
   const [displayed, setDisplayed] = useState(true)
   const [commenting, setCommenting] = useState(false)
-  const { text, subComments, date, user, reacts, adminComment } = comment
+  const { content, subComments, date, user, reacts, admin } = comment
   const own = uid === user
 
-  const commentStyle = adminComment
+  const commentStyle = admin
     ? styles.adminComment
     : own
     ? styles.ownComment
@@ -60,25 +66,23 @@ function Comment({ comment, index, onComment, onDelete, onReact, uid }) {
           <div>{date}</div>
         </div>
         <div className={`${!displayed && styles.hidden}`}>
-          <div className={styles.commentText}> {text}</div>
-          <div className={styles.actionsContainer}>
-            <div
-              className={styles.button}
+          <div className={styles.commentText}> {content}</div>
+          <div className={'actions'}>
+            <span
               onClick={() => {
                 setCommenting(true)
               }}
             >
               Reply...
-            </div>
+            </span>
             {own && (
-              <div
-                className={styles.button}
+              <span
                 onClick={() => {
                   onDelete([index])
                 }}
               >
                 Delete
-              </div>
+              </span>
             )}
             <ReactButton
               onClick={(reaction, isDelete) => {
@@ -90,6 +94,9 @@ function Comment({ comment, index, onComment, onDelete, onReact, uid }) {
           </div>
           {commenting && (
             <CommentInput
+              onCancel={() => {
+                setCommenting(false)
+              }}
               onSubmit={(e) => {
                 onComment([index], e)
                 setCommenting(false)
@@ -110,8 +117,8 @@ function Comment({ comment, index, onComment, onDelete, onReact, uid }) {
                 onDelete={(path) => {
                   onDelete([...path, index])
                 }}
-                onComment={(path, text) => {
-                  onComment([...path, index], text)
+                onComment={(path, content) => {
+                  onComment([...path, index], content)
                 }}
                 index={i}
                 key={i}
@@ -124,6 +131,17 @@ function Comment({ comment, index, onComment, onDelete, onReact, uid }) {
   )
 }
 
+function countComments(comments) {
+  return comments.reduce((acc, comment) => {
+    if (comment.subComments) {
+      acc += countComments(comment.subComments) + 1
+    } else {
+      acc += 1
+    }
+    return acc
+  }, 0)
+}
+
 export default function Comments({
   comments,
   onComment,
@@ -132,44 +150,78 @@ export default function Comments({
   uid,
 }) {
   const [addingNewComment, setAddingNewComment] = useState(false)
+  const [commentsShowing, setCommentsShowing] = useState(false)
+  const commentCount = comments ? countComments(comments) : 0
+
   return (
     <div>
-      {comments && comments.length > 0 ? (
-        comments.map((comment, i) => {
-          return (
-            <Comment
-              onReact={onReact}
-              onComment={onComment}
-              onDelete={onDelete}
-              comment={comment}
-              index={i}
-              key={i}
-              uid={uid}
-            />
-          )
-        })
-      ) : (
-        <div>
-          <div>No comments yet</div>
-        </div>
-      )}
-      {addingNewComment ? (
-        <CommentInput
-          onSubmit={(e) => {
-            setAddingNewComment(false)
-            onComment([], e)
+      {commentsShowing ? (
+        <Modal
+          closeClick={() => {
+            setCommentsShowing(false)
           }}
-        />
-      ) : (
-        <span
-          onClick={() => {
-            setAddingNewComment(true)
-          }}
-          className={styles.button}
         >
-          Add new
+          {comments && comments.length > 0
+            ? comments.map((comment, i) => {
+                return (
+                  <Comment
+                    onReact={onReact}
+                    onComment={onComment}
+                    onDelete={onDelete}
+                    comment={comment}
+                    index={i}
+                    key={i}
+                    uid={uid}
+                  />
+                )
+              })
+            : null}
+          {commentCount !== 0 ? (
+            <div className={'actions'}>
+              <span
+                onClick={() => {
+                  setAddingNewComment(true)
+                }}
+              >
+                New comment
+              </span>
+            </div>
+          ) : null}
+          {addingNewComment ? (
+            <CommentInput
+              onSubmit={(e) => {
+                if (!e) {
+                  alert('Írj be valamit, hogy kommentelhess...')
+                  return
+                }
+                setAddingNewComment(false)
+                onComment([], e)
+              }}
+              onCancel={() => {
+                setAddingNewComment(false)
+                if (commentCount === 0) {
+                  setCommentsShowing(false)
+                }
+              }}
+            />
+          ) : null}
+        </Modal>
+      ) : null}
+      <div
+        className={'actions'}
+        onClick={() => {
+          setCommentsShowing(true)
+          if (commentCount === 0) {
+            setAddingNewComment(true)
+          }
+        }}
+      >
+        <span>
+          {commentCount === 0
+            ? 'New comment'
+            : `Show ${commentCount} comment${commentCount > 1 ? 's' : ''}`}
         </span>
-      )}
+      </div>
     </div>
   )
 }
diff --git a/src/components/comments.module.css b/src/components/comments.module.css
index 43bad99..91e3a12 100644
--- a/src/components/comments.module.css
+++ b/src/components/comments.module.css
@@ -6,10 +6,13 @@
 .commentData {
   padding: 5px 2px;
   border-left: 2px solid var(--text-color);
-  background-color: #222;
   border-radius: 3px;
 }
 
+.commentData:hover {
+  background-color: var(--hoover-color);
+}
+
 .commentHeader {
   display: flex;
   justify-content: space-between;
@@ -46,32 +49,6 @@
   display: none;
 }
 
-.actionsContainer {
-  display: flex;
-  align-items: center;
-}
-
-.button {
-  margin: 2px 2px;
-  padding: 0px 10px;
-  border: 1px solid #444;
-  border-radius: 6px;
-  cursor: pointer;
-}
-
-.button:hover {
-  background-color: #444;
-}
-
-.commentArea {
-  color: var(--text-color);
-  background-color: var(--background-color);
-  font-size: 16px;
-  box-sizing: border-box;
-  height: 120px;
-  width: 100%;
-}
-
 .commentAreaContainer {
   margin: 0px 8px 3px 8px;
 }
diff --git a/src/components/composer.js b/src/components/composer.js
new file mode 100644
index 0000000..e9fc533
--- /dev/null
+++ b/src/components/composer.js
@@ -0,0 +1,119 @@
+import React, { useState } from 'react'
+
+import Modal from './modal'
+
+import styles from './composer.module.css'
+
+function FileUploader({ onChange }) {
+  return (
+    <div className={styles.inputArea}>
+      <div className={styles.textTitle}>Fájl csatolása</div>
+      <input
+        className={styles.fileInput}
+        type="file"
+        name="file"
+        onChange={onChange}
+      />
+    </div>
+  )
+}
+
+export default function Composer({ onSubmit }) {
+  const [editorShowing, setEditorShowing] = useState(false)
+  const [val, setVal] = useState('')
+  const [type, setType] = useState('public')
+  const [title, setTitle] = useState('')
+  const [file, setFile] = useState()
+
+  return (
+    <>
+      <div
+        onClick={() => {
+          setEditorShowing(true)
+        }}
+        className={styles.new}
+      >
+        Új bejegyzés / feedback
+      </div>
+      {editorShowing && (
+        <Modal
+          closeClick={() => {
+            setEditorShowing(false)
+          }}
+        >
+          <div className={styles.container}>
+            {type !== 'private' && (
+              <input
+                placeholder={'Téma'}
+                value={title}
+                onChange={(e) => {
+                  setTitle(e.target.value)
+                }}
+              />
+            )}
+            <textarea
+              placeholder={'...'}
+              value={val}
+              onChange={(e) => {
+                setVal(e.target.value)
+              }}
+            />
+            {type === 'private' && (
+              <FileUploader
+                onChange={(e) => {
+                  setFile(e.target.files[0])
+                }}
+              />
+            )}
+            <div className={styles.typeSelector}>
+              <div>Post típusa:</div>
+              <div title="Minden felhasználó látja főoldalon, és tudnak rá válaszolni">
+                <input
+                  onChange={(e) => {
+                    setType(e.target.value)
+                  }}
+                  type="radio"
+                  name="type"
+                  value="public"
+                  defaultChecked
+                />
+                Publikus
+              </div>
+              <div title="Csak a weboldal üzemeltetője látja">
+                <input
+                  onChange={(e) => {
+                    setType(e.target.value)
+                  }}
+                  type="radio"
+                  name="type"
+                  value="private"
+                />
+                Privát
+              </div>
+              <div className={styles.tip}>
+                (Tartsd egered opciókra több infóért)
+              </div>
+            </div>
+            <div className={'actions'}>
+              <span
+                onClick={() => {
+                  onSubmit(type, title, val, file)
+                  setEditorShowing(false)
+                }}
+              >
+                Post
+              </span>
+              <span
+                onClick={() => {
+                  setEditorShowing(false)
+                }}
+              >
+                Cancel
+              </span>
+            </div>
+          </div>
+        </Modal>
+      )}
+    </>
+  )
+}
diff --git a/src/components/composer.module.css b/src/components/composer.module.css
new file mode 100644
index 0000000..9bdf88b
--- /dev/null
+++ b/src/components/composer.module.css
@@ -0,0 +1,32 @@
+.container {
+  display: flex;
+  flex-flow: column;
+}
+
+.container > input,
+.container > textarea {
+  margin: 5px 0px;
+  padding: 4px;
+}
+
+.typeSelector {
+  display: flex;
+  align-items: center;
+}
+
+.tip {
+  font-size: 10px;
+  margin: 0px 10px;
+}
+
+.new {
+  padding: 10px;
+  text-align: center;
+  border: 2px dashed var(--text-color);
+  border-radius: 3px;
+  cursor: pointer;
+}
+
+.new:hover {
+  background-color: var(--hoover-color);
+}
diff --git a/src/components/dbSelector.module.css b/src/components/dbSelector.module.css
index 81779c7..5c247a9 100644
--- a/src/components/dbSelector.module.css
+++ b/src/components/dbSelector.module.css
@@ -15,7 +15,7 @@
 }
 
 .listItem:hover {
-  background-color: #666;
+  background-color: var(--hoover-color);
 }
 
 .text {
diff --git a/src/components/modal.js b/src/components/modal.js
index 8c449ab..cc51083 100644
--- a/src/components/modal.js
+++ b/src/components/modal.js
@@ -46,7 +46,7 @@ export default function Modal(props) {
             ❌
           </div>
         )}
-        {props.children}
+        <div className={styles.children}>{props.children}</div>
       </div>
     </div>
   )
diff --git a/src/components/modal.module.css b/src/components/modal.module.css
index 4723bd0..a1a03e2 100644
--- a/src/components/modal.module.css
+++ b/src/components/modal.module.css
@@ -1,4 +1,5 @@
 .modal {
+  z-index: 9999;
   position: fixed;
   top: 0;
   left: 0;
@@ -8,16 +9,19 @@
 }
 
 .modalContent {
+  display: flex;
+  align-items: stretch;
+  max-height: 80%;
+  width: 80%;
   position: fixed;
   background: var(--background-color);
-  width: 70%;
   height: auto;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
-  border-radius: 5px;
+  border-radius: 8px;
 
-  padding: 20px;
+  padding: 20px 30px;
   cursor: auto;
 }
 
@@ -26,8 +30,14 @@
   font-size: 18px;
   position: absolute;
 
-  position: absolute;
   top: 10px;
   right: 10px;
   display: inline;
 }
+
+.children {
+  max-height: 100%;
+  width: 100%;
+  overflow-y: scroll;
+  overflow-x: hidden;
+}
diff --git a/src/components/newsEntry.js b/src/components/newsEntry.js
index 4942bd9..f980347 100644
--- a/src/components/newsEntry.js
+++ b/src/components/newsEntry.js
@@ -6,20 +6,18 @@ import Comments from './comments.js'
 import styles from './newsEntry.module.css'
 
 export default function NewsEntry({
-  newsKey,
   newsItem,
   uid,
   onReact,
   onComment,
   onDelete,
+  onPostDelete,
 }) {
-  const { reacts, title, text, user, comments, date, adminPost } = newsItem
+  const { reacts, title, content, user, comments, date, admin } = newsItem
 
   return (
     <div>
-      <div
-        className={`${styles.newsContainer} ${adminPost && styles.adminPost}`}
-      >
+      <div className={`${styles.newsContainer} ${admin && styles.adminPost}`}>
         <div className={styles.newsHeader}>
           <div
             className={styles.newsTitle}
@@ -32,8 +30,19 @@ export default function NewsEntry({
         </div>
         <div
           className={styles.newsBody}
-          dangerouslySetInnerHTML={{ __html: text }}
+          dangerouslySetInnerHTML={{ __html: content }}
         />
+      </div>
+      <div className={'actions'}>
+        {uid === user ? (
+          <span
+            onClick={() => {
+              onPostDelete()
+            }}
+          >
+            Delete
+          </span>
+        ) : null}
         <ReactButton
           existingReacts={reacts}
           uid={uid}
diff --git a/src/components/newsEntry.module.css b/src/components/newsEntry.module.css
index 6d8fc98..c5185a1 100644
--- a/src/components/newsEntry.module.css
+++ b/src/components/newsEntry.module.css
@@ -19,7 +19,7 @@
 }
 
 .adminPost {
-  border-left: 5px solid yellow;
+  border-left: 2px solid yellow;
   border-radius: 5px;
 }
 
diff --git a/src/components/reactButton.js b/src/components/reactButton.js
index d23aa3c..11a4610 100644
--- a/src/components/reactButton.js
+++ b/src/components/reactButton.js
@@ -5,9 +5,6 @@ import Tooltip from './tooltip.js'
 import styles from './reactButton.module.css'
 import reactions from '../data/reactions.json'
 
-// TODO: fixdis
-const breakEvery = 7
-
 function ExistingReacts({ existingReacts, onClick, uid }) {
   return (
     <div className={styles.reactionContainer}>
@@ -24,7 +21,8 @@ function ExistingReacts({ existingReacts, onClick, uid }) {
               title={currReact.join(', ')}
               className={`${currReact.includes(uid) && styles.reacted}`}
               key={key}
-              onClick={() => {
+              onClick={(e) => {
+                e.stopPropagation()
                 onClick(key, currReact.includes(uid))
               }}
             >
@@ -39,7 +37,6 @@ function ExistingReacts({ existingReacts, onClick, uid }) {
 function RenderEmojis({ onClick }) {
   const [search, setSearch] = useState('')
 
-  let index = 0
   return (
     <>
       <input
@@ -55,20 +52,15 @@ function RenderEmojis({ onClick }) {
           return null
         }
         return (
-          <>
-            {index++ % breakEvery === 0 && (
-              <div key={`${key}_break`} className={styles.break} />
-            )}
-            <div
-              title={key}
-              key={key}
-              onClick={() => {
-                onClick(key)
-              }}
-            >
-              {reaction.emoji}
-            </div>
-          </>
+          <div
+            title={key}
+            key={key}
+            onClick={() => {
+              onClick(key)
+            }}
+          >
+            {reaction.emoji}
+          </div>
         )
       })}
     </>
@@ -81,9 +73,10 @@ export default function ReactButton({ onClick, existingReacts, uid }) {
   return (
     <div
       className={styles.reactContainer}
-      onMouseEnter={() => {
+      onClick={() => {
         setOpened(true)
       }}
+      onMouseEnter={() => {}}
       onMouseLeave={() => {
         setOpened(false)
       }}
@@ -93,7 +86,10 @@ export default function ReactButton({ onClick, existingReacts, uid }) {
         text={() => (
           <ExistingReacts
             uid={uid}
-            onClick={onClick}
+            onClick={(key, isDelete) => {
+              onClick(key, isDelete)
+              setOpened(false)
+            }}
             existingReacts={existingReacts}
           />
         )}
diff --git a/src/components/reactButton.module.css b/src/components/reactButton.module.css
index 9c53a71..cce9089 100644
--- a/src/components/reactButton.module.css
+++ b/src/components/reactButton.module.css
@@ -19,10 +19,11 @@
   border: 1px solid #444;
   border-radius: 6px;
   cursor: pointer;
+  user-select: none;
 }
 
 .reactionContainer > div:hover {
-  background-color: #666;
+  background-color: var(--hoover-color);
 }
 
 .break {
diff --git a/src/components/tooltip.module.css b/src/components/tooltip.module.css
index 05b9267..b7beba2 100644
--- a/src/components/tooltip.module.css
+++ b/src/components/tooltip.module.css
@@ -4,11 +4,12 @@
 }
 
 .tooltip .tooltiptext {
-  width: 280px;
+  width: 300px;
+  max-width: 300px;
   height: 250px;
-  max-width: 280px;
   max-height: 250px;
-  background-color: #555;
+  background-color: var(--background-color);
+  border-radius: 5px;
   color: #fff;
   text-align: center;
   border-radius: 6px;
diff --git a/src/defaultStyles.css b/src/defaultStyles.css
index 660fdc7..f52c246 100644
--- a/src/defaultStyles.css
+++ b/src/defaultStyles.css
@@ -1,5 +1,6 @@
 :root {
   --text-color: #9999ff;
+  --primary-color: #9999ff;
   --bright-color: #f2f2f2;
   --background-color: #222426;
   --hoover-color: #202020;
@@ -14,6 +15,23 @@ a {
   color: white;
 }
 
+textarea {
+  color: var(--text-color);
+  background-color: var(--background-color);
+  box-sizing: border-box;
+  height: 120px;
+  width: 100%;
+  border: 1px solid #666;
+  border-radius: 3px;
+}
+
+input {
+  color: var(--text-color);
+  background-color: var(--background-color);
+  border: 1px solid #444;
+  border-radius: 3px;
+}
+
 .link {
   margin: 20px;
   font-size: 20px;
@@ -263,3 +281,21 @@ select:hover {
 .msgs > div {
   margin: 0px 5px;
 }
+
+.actions {
+  display: flex;
+  align-items: center;
+}
+
+.actions > span {
+  margin: 2px 2px;
+  padding: 0px 10px;
+  border: 1px solid #444;
+  border-radius: 6px;
+  cursor: pointer;
+  user-select: none;
+}
+
+.actions > span:hover {
+  background-color: var(--hoover-color);
+}
diff --git a/src/pages/index.js b/src/pages/index.js
index 23f193f..1700aa2 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -6,6 +6,7 @@ import Link from 'next/link'
 import LoadingIndicator from '../components/LoadingIndicator'
 import Sleep from '../components/sleep'
 import NewsEntry from '../components/newsEntry'
+import Composer from '../components/composer'
 import DbSelector from '../components/dbSelector.js'
 
 import styles from './index.module.css'
@@ -36,6 +37,72 @@ function fetchNews() {
   })
 }
 
+function addPost(title, content) {
+  return new Promise((resolve) => {
+    fetch(constants.apiUrl + 'addPost', {
+      method: 'POST',
+      credentials: 'include',
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({
+        title: title,
+        content: content,
+      }),
+    })
+      .then((res) => {
+        return res.json()
+      })
+      .then((res) => {
+        resolve(res)
+      })
+  })
+}
+
+function postFeedback(content, file) {
+  return new Promise((resolve) => {
+    const promises = [
+      fetch(constants.apiUrl + 'postfeedback', {
+        method: 'POST',
+        credentials: 'include',
+        headers: {
+          Accept: 'application/json',
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          content: content,
+        }),
+      }).then((res) => {
+        return res.json()
+      }),
+    ]
+
+    if (file) {
+      console.log('FIEEEEEEEEEELE')
+      const formData = new FormData() // eslint-disable-line
+      formData.append('file', file)
+
+      promises.push(
+        fetch(constants.apiUrl + 'postfeedbackfile', {
+          method: 'POST',
+          credentials: 'include',
+          headers: {
+            Accept: 'application/json',
+          },
+          body: formData,
+        }).then((res) => {
+          return res.json()
+        })
+      )
+    }
+
+    Promise.all(promises).then((res) => {
+      resolve(res)
+    })
+  })
+}
+
 export default function Index({ globalData }) {
   const userId = globalData.userId
   const motd = globalData.motd
@@ -57,6 +124,25 @@ export default function Index({ globalData }) {
           let newsEntryData = news[key]
           return (
             <NewsEntry
+              onPostDelete={() => {
+                fetch(constants.apiUrl + 'rmPost', {
+                  method: 'POST',
+                  credentials: 'include',
+                  headers: {
+                    Accept: 'application/json',
+                    'Content-Type': 'application/json',
+                  },
+                  body: JSON.stringify({
+                    newsKey: key,
+                  }),
+                })
+                  .then((res) => {
+                    return res.json()
+                  })
+                  .then((res) => {
+                    setNews(res.news)
+                  })
+              }}
               onReact={({ type, path, reaction, isDelete }) => {
                 if (type === 'news') {
                   fetch(constants.apiUrl + 'infos', {
@@ -71,12 +157,13 @@ export default function Index({ globalData }) {
                       newsKey: key,
                       isDelete: isDelete,
                     }),
-                  }).then((res) => {
-                    // TODO: dont refetch news
-                    fetchNews().then((res) => {
-                      setNews(res)
-                    })
                   })
+                    .then((res) => {
+                      return res.json()
+                    })
+                    .then((res) => {
+                      setNews(res.news)
+                    })
                 } else if (type === 'comment') {
                   fetch(constants.apiUrl + 'comment', {
                     method: 'POST',
@@ -92,11 +179,13 @@ export default function Index({ globalData }) {
                       reaction: reaction,
                       isDelete: isDelete,
                     }),
-                  }).then((res) => {
-                    fetchNews().then((res) => {
-                      setNews(res)
-                    })
                   })
+                    .then((res) => {
+                      return res.json()
+                    })
+                    .then((res) => {
+                      setNews(res.news)
+                    })
                 }
               }}
               onDelete={(path) => {
@@ -112,13 +201,15 @@ export default function Index({ globalData }) {
                     path: path,
                     newsKey: key,
                   }),
-                }).then(() => {
-                  fetchNews().then((res) => {
-                    setNews(res)
-                  })
                 })
+                  .then((res) => {
+                    return res.json()
+                  })
+                  .then((res) => {
+                    setNews(res.news)
+                  })
               }}
-              onComment={(path, text) => {
+              onComment={(path, content) => {
                 fetch(constants.apiUrl + 'comment', {
                   method: 'POST',
                   credentials: 'include',
@@ -129,14 +220,16 @@ export default function Index({ globalData }) {
                   body: JSON.stringify({
                     type: 'add',
                     path: path,
-                    text: text,
+                    content: content,
                     newsKey: key,
                   }),
-                }).then(() => {
-                  fetchNews().then((res) => {
-                    setNews(res)
-                  })
                 })
+                  .then((res) => {
+                    return res.json()
+                  })
+                  .then((res) => {
+                    setNews(res.news)
+                  })
               }}
               uid={userId}
               key={key}
@@ -149,8 +242,31 @@ export default function Index({ globalData }) {
 
       return (
         <div>
-          <div className={styles.title}>News</div>
+          <div className={styles.title}>Forum</div>
           <hr />
+          <Composer
+            onSubmit={(type, title, content, file) => {
+              if (!content) {
+                alert('Üres a tartalom!')
+                return
+              }
+              console.log(type, title, content, file)
+              if (type === 'private') {
+                postFeedback(content, file).then((res) => {
+                  console.log(res)
+                  alert('Privát visszajelzés elküldve!')
+                })
+              } else {
+                if (!title) {
+                  alert('Üres a téma!')
+                  return
+                }
+                addPost(title, content).then((res) => {
+                  setNews(res.news)
+                })
+              }
+            }}
+          />
           <hr />
           <div>{newsItems}</div>
         </div>
@@ -165,7 +281,6 @@ export default function Index({ globalData }) {
       <div>
         <div className={styles.title}>MOTD</div>
         <hr />
-        <hr />
         {motd ? (
           <div
             className={styles.motd}
diff --git a/src/pages/ranklist.module.css b/src/pages/ranklist.module.css
index f2545eb..b440043 100644
--- a/src/pages/ranklist.module.css
+++ b/src/pages/ranklist.module.css
@@ -46,7 +46,7 @@
 }
 
 .clickable:hover {
-  background-color: #666666;
+  background-color: var(--hoover-color);
 }
 
 .clickable {

From d84948918f4d3a1c925b9c5974cb13f2d5ad753c Mon Sep 17 00:00:00 2001
From: mrfry <mr.fry@tutanota.com>
Date: Fri, 5 Mar 2021 17:13:43 +0100
Subject: [PATCH 09/14] Removed feedback

---
 src/data/tabs.json            |   5 -
 src/pages/feedback.js         | 214 ----------------------------------
 src/pages/feedback.module.css |  46 --------
 3 files changed, 265 deletions(-)
 delete mode 100644 src/pages/feedback.js
 delete mode 100644 src/pages/feedback.module.css

diff --git a/src/data/tabs.json b/src/data/tabs.json
index 3fb334a..e633e07 100644
--- a/src/data/tabs.json
+++ b/src/data/tabs.json
@@ -22,10 +22,5 @@
   "ranklist": {
     "href": "/ranklist",
     "text": "Ranklista"
-  },
-  "feedback": {
-    "href": "/feedback",
-    "text": "Feedback",
-    "id": "feedback"
   }
 }
diff --git a/src/pages/feedback.js b/src/pages/feedback.js
deleted file mode 100644
index dc951ca..0000000
--- a/src/pages/feedback.js
+++ /dev/null
@@ -1,214 +0,0 @@
-import React, { useState } from 'react'
-import fetch from 'unfetch'
-import Head from 'next/head'
-
-import Button from '../components/Button.js'
-
-import styles from './feedback.module.css'
-import constants from '../constants.json'
-
-const results = {
-  success: 'SUCCESS',
-  error: 'ERROR',
-  notSent: 'NOTSENT',
-  invalid: 'INVALID',
-}
-
-export default function Feedback() {
-  const [form, setForm] = useState({})
-  const [file, setFile] = useState(undefined)
-  const [result, setResult] = useState(results.notSent)
-  const [fileResult, setFileResult] = useState(results.notSent)
-
-  const onChange = (event) => {
-    setForm({
-      ...form,
-      [event.target.name]: event.target.value,
-    })
-  }
-
-  const renderTextInputArea = (params) => {
-    return (
-      <div className={styles.inputArea}>
-        <div className={styles.textTitle}>{params.text}</div>
-        <textarea
-          autoFocus={params.autoFocus}
-          onChange={(event) => params.onChange(event)}
-          value={form[params.name] || ''}
-          className={styles.feedback}
-          name={params.name}
-        />
-      </div>
-    )
-  }
-
-  const onFileChangeHandler = (event) => {
-    setForm({
-      ...form,
-      file: event.target.files[0].name,
-    })
-    setFile(event.target.files[0])
-  }
-
-  const renderFileUploader = () => {
-    return (
-      <div className={styles.inputArea}>
-        <div className={styles.textTitle}>Fájl csatolása</div>
-        <input
-          className={styles.fileInput}
-          type="file"
-          name="file"
-          onChange={onFileChangeHandler}
-        />
-      </div>
-    )
-  }
-
-  const handleSubmit = async () => {
-    if (!form.description) {
-      setResult(results.invalid)
-    }
-
-    const t = document.getElementById('cid').value
-    let cid = ''
-    let version = ''
-    if (t) {
-      cid = t.split('|')[0]
-      version = t.split('|')[1]
-    }
-
-    const rawResponse = await fetch(constants.apiUrl + 'postfeedback', {
-      method: 'POST',
-      credentials: 'include',
-      headers: {
-        Accept: 'application/json',
-        'Content-Type': 'application/json',
-      },
-      body: JSON.stringify({
-        ...form,
-        cid: cid,
-        version: version,
-      }),
-    })
-    rawResponse
-      .json()
-      .then((resp) => {
-        if (resp.success) {
-          setResult(results.success)
-        } else {
-          setResult(results.error)
-        }
-      })
-      .catch((err) => {
-        setResult(results.error)
-        console.error(err)
-      })
-
-    if (file) {
-      const formData = new FormData() // eslint-disable-line
-      formData.append('file', file)
-
-      const rawFileResponse = await fetch(
-        constants.apiUrl + 'postfeedbackfile',
-        {
-          method: 'POST',
-          credentials: 'include',
-          headers: {
-            Accept: 'application/json',
-          },
-          body: formData,
-        }
-      )
-      rawFileResponse
-        .json()
-        .then((resp) => {
-          if (resp.success) {
-            setFileResult(results.success)
-          } else {
-            setFileResult(results.error)
-          }
-        })
-        .catch((err) => {
-          setFileResult(results.error)
-          console.error('FILE error', err)
-        })
-    }
-  }
-
-  const renderResult = () => {
-    if (results === result.success) {
-      return <div>sucess</div>
-    } else if (results === result.error) {
-      return <div>error</div>
-    } else if (results === result.invalid) {
-      return <div>invalid</div>
-    } else {
-      return null
-    }
-  }
-
-  // action={constants.apiUrl + 'badtestsender'} encType='multipart/form-data' method='post'
-  const renderForm = (props) => {
-    return (
-      <div className={styles.feedback}>
-        {props.noDesc ? (
-          <div className={styles.errorMsg}>Mező kitöltése kötelező!</div>
-        ) : null}
-        {renderTextInputArea({
-          text: 'Rövid leírás',
-          name: 'description',
-          onChange: onChange,
-          autoFocus: true,
-        })}
-        <div className={styles.desc}>
-          Bal aluli levelesláda ikonnál keresd majd a választ
-        </div>
-        {renderFileUploader()}
-        <div className={styles.buttonContainer}>
-          <button className={styles.button} onClick={handleSubmit}>
-            Küldés
-          </button>
-        </div>
-        <input type="text" id="cid" name="cid" hidden />
-        {renderResult()}
-      </div>
-    )
-  }
-
-  const renderStuff = () => {
-    if (result === results.notSent && fileResult === results.notSent) {
-      return <div className={styles.textTitle}>{renderForm({})}</div>
-    } else if (result === results.invalid) {
-      return (
-        <div className={styles.textTitle}>{renderForm({ noDesc: true })}</div>
-      )
-    } else if (result === results.success && !file) {
-      return <div className={styles.textTitle}>Visszajelzés elküldve c:</div>
-    } else if (result === results.error && fileResult === results.success) {
-      return <div className={styles.textTitle}>Hiba küldés közben :c</div>
-    } else if (result === results.success && fileResult === results.error) {
-      return (
-        <div className={styles.textTitle}>
-          Visszajelzés elküldve, de fájlt nem sikerült elküldeni :c
-        </div>
-      )
-    } else if (result === results.success && fileResult === results.success) {
-      return <div className={styles.textTitle}>Visszajelzés elküldve c:</div>
-    } else {
-      return <div className={styles.textTitle}>Bit of a fuckup here</div>
-    }
-  }
-
-  return (
-    <div>
-      <Head>
-        <title>Feedback - Qmining | Frylabs.net</title>
-      </Head>
-      <Button text="IRC chat" href="/irc" />
-      <p />
-      <hr />
-      <p />
-      {renderStuff()}
-    </div>
-  )
-}
diff --git a/src/pages/feedback.module.css b/src/pages/feedback.module.css
deleted file mode 100644
index 0431c63..0000000
--- a/src/pages/feedback.module.css
+++ /dev/null
@@ -1,46 +0,0 @@
-.feedback {
-  color: var(--text-color);
-  background-color: var(--background-color);
-  font-size: 16px;
-  width: 100%;
-  box-sizing: border-box;
-  height: 120px;
-}
-
-.buttonContainer {
-  text-align: 'center';
-  width: 200px;
-  margin: 0 auto;
-  padding: 10px;
-}
-
-.desc {
-  font-size: 16px;
-  color: white;
-}
-
-.textTitle {
-  color: var(--text-color);
-  font-size: 20px;
-}
-
-.button {
-  background-color: var(--text-color);
-  border: none;
-  padding: 10px 30px;
-  color: white;
-  width: 200px;
-}
-
-.textInputArea {
-  padding: 20px 0px;
-}
-
-.fileInput {
-  margin: 10px;
-  color: var(--text-color);
-}
-
-.errorMsg {
-  color: red;
-}

From f7d737c6dc446cb5e47d5e083ec8cbbfddb9620a Mon Sep 17 00:00:00 2001
From: mrfry <mr.fry@tutanota.com>
Date: Fri, 5 Mar 2021 18:38:26 +0100
Subject: [PATCH 10/14] merged master

---
 src/components/composer.module.css  |  5 +++--
 src/components/newsEntry.js         |  2 --
 src/components/newsEntry.module.css |  3 ++-
 src/defaultStyles.css               |  2 +-
 src/pages/index.js                  | 31 +----------------------------
 5 files changed, 7 insertions(+), 36 deletions(-)

diff --git a/src/components/composer.module.css b/src/components/composer.module.css
index 9bdf88b..927bdca 100644
--- a/src/components/composer.module.css
+++ b/src/components/composer.module.css
@@ -20,11 +20,12 @@
 }
 
 .new {
-  padding: 10px;
   text-align: center;
-  border: 2px dashed var(--text-color);
+  background-color: #191919;
   border-radius: 3px;
   cursor: pointer;
+  margin: 8px;
+  padding: 8px;
 }
 
 .new:hover {
diff --git a/src/components/newsEntry.js b/src/components/newsEntry.js
index 565b42e..96ae22d 100644
--- a/src/components/newsEntry.js
+++ b/src/components/newsEntry.js
@@ -60,8 +60,6 @@ export default function NewsEntry({
         onDelete={onDelete}
         comments={comments}
       />
-      <hr />
-      <hr />
     </div>
   )
 }
diff --git a/src/components/newsEntry.module.css b/src/components/newsEntry.module.css
index 7d1d4ae..1594d3d 100644
--- a/src/components/newsEntry.module.css
+++ b/src/components/newsEntry.module.css
@@ -1,6 +1,5 @@
 .newsBody {
   margin: 0px 5px;
-  font-size: 18px;
   color: #fff;
 }
 
@@ -41,4 +40,6 @@
 
 .newsRoot {
   background-color: #191919;
+  margin: 8px;
+  padding: 8px;
 }
diff --git a/src/defaultStyles.css b/src/defaultStyles.css
index 2307a10..7d1f659 100644
--- a/src/defaultStyles.css
+++ b/src/defaultStyles.css
@@ -3,7 +3,7 @@
   --primary-color: #9999ff;
   --bright-color: #f2f2f2;
   --background-color: #222426;
-  --hoover-color: #191919;
+  --hoover-color: #393939;
 }
 
 @import url('https://fonts.googleapis.com/css2?family=Kameron&family=Overpass+Mono:wght@300;400&display=swap');
diff --git a/src/pages/index.js b/src/pages/index.js
index b5136f4..a3a41ab 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -242,9 +242,7 @@ export default function Index({ globalData }) {
 
       return (
         <div>
-          <div className={styles.title}>Hírek</div>
-          <hr />
-          <div className={styles.title}>Forum</div>
+          <div className={styles.title}>Fórum</div>
           <hr />
           <Composer
             onSubmit={(type, title, content, file) => {
@@ -269,7 +267,6 @@ export default function Index({ globalData }) {
               }
             }}
           />
-          <hr />
           <div>{newsItems}</div>
         </div>
       )
@@ -282,7 +279,6 @@ export default function Index({ globalData }) {
     return (
       <div className={styles.motd_body}>
         <div className={styles.title}>MOTD</div>
-        <hr />
         {motd ? (
           <div
             className={styles.motd}
@@ -295,23 +291,6 @@ export default function Index({ globalData }) {
     )
   }
 
-  // const renderUserSpecificMotd = () => {
-  //   return (
-  //     <div>
-  //       <hr />
-  //       <div className={styles.subtitle}>Üzenet admintól:</div>
-  //       {userSpecificMotd ? (
-  //         <div
-  //           className={styles.motd}
-  //           dangerouslySetInnerHTML={{ __html: userSpecificMotd.msg }}
-  //         />
-  //       ) : (
-  //         <div>...</div>
-  //       )}
-  //     </div>
-  //   )
-  // }
-
   const renderDbSelector = () => {
     if (allQrSelector) {
       return (
@@ -366,14 +345,6 @@ export default function Index({ globalData }) {
         >
           {'Összes kérdés TXT'}
         </a>
-        <a
-          onClick={() => {
-            setAllQrSelector('json')
-          }}
-          className={styles.button}
-        >
-          {'Összes kérdés JSON'}
-        </a>
       </div>
       {renderMotd()}
       {/*{userSpecificMotd && renderUserSpecificMotd()} */}

From b2034089cdd1c740a19b9cf6dffe7ed6526f156e Mon Sep 17 00:00:00 2001
From: mrfry <mr.fry@tutanota.com>
Date: Fri, 5 Mar 2021 20:02:11 +0100
Subject: [PATCH 11/14] Changed api endpoints

---
 src/components/modal.module.css   |  2 +-
 src/components/newsEntry.js       |  7 +--
 src/components/tooltip.module.css |  2 +-
 src/pages/index.js                | 84 +++++++++++++++----------------
 4 files changed, 48 insertions(+), 47 deletions(-)

diff --git a/src/components/modal.module.css b/src/components/modal.module.css
index a1a03e2..19aa27e 100644
--- a/src/components/modal.module.css
+++ b/src/components/modal.module.css
@@ -1,5 +1,5 @@
 .modal {
-  z-index: 9999;
+  z-index: 99;
   position: fixed;
   top: 0;
   left: 0;
diff --git a/src/components/newsEntry.js b/src/components/newsEntry.js
index f980347..c29bca7 100644
--- a/src/components/newsEntry.js
+++ b/src/components/newsEntry.js
@@ -8,7 +8,8 @@ import styles from './newsEntry.module.css'
 export default function NewsEntry({
   newsItem,
   uid,
-  onReact,
+  onCommentReact,
+  onNewsReact,
   onComment,
   onDelete,
   onPostDelete,
@@ -47,14 +48,14 @@ export default function NewsEntry({
           existingReacts={reacts}
           uid={uid}
           onClick={(reaction, isDelete) => {
-            onReact({ type: 'news', reaction, isDelete })
+            onNewsReact({ reaction, isDelete })
           }}
         />
       </div>
       <Comments
         uid={uid}
         onReact={(path, reaction, isDelete) => {
-          onReact({ type: 'comment', path, reaction, isDelete })
+          onCommentReact({ path, reaction, isDelete })
         }}
         onComment={onComment}
         onDelete={onDelete}
diff --git a/src/components/tooltip.module.css b/src/components/tooltip.module.css
index b7beba2..2f05f33 100644
--- a/src/components/tooltip.module.css
+++ b/src/components/tooltip.module.css
@@ -15,7 +15,7 @@
   border-radius: 6px;
   padding: 5px;
   position: absolute;
-  z-index: 1;
+  z-index: 9999;
   bottom: 100%;
   left: 0%;
   margin-left: -60px;
diff --git a/src/pages/index.js b/src/pages/index.js
index 1700aa2..18987f7 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -143,50 +143,50 @@ export default function Index({ globalData }) {
                     setNews(res.news)
                   })
               }}
-              onReact={({ type, path, reaction, isDelete }) => {
-                if (type === 'news') {
-                  fetch(constants.apiUrl + 'infos', {
-                    method: 'POST',
-                    credentials: 'include',
-                    headers: {
-                      Accept: 'application/json',
-                      'Content-Type': 'application/json',
-                    },
-                    body: JSON.stringify({
-                      react: reaction,
-                      newsKey: key,
-                      isDelete: isDelete,
-                    }),
+              onNewsReact={({ reaction, isDelete }) => {
+                fetch(constants.apiUrl + 'react', {
+                  method: 'POST',
+                  credentials: 'include',
+                  headers: {
+                    Accept: 'application/json',
+                    'Content-Type': 'application/json',
+                  },
+                  body: JSON.stringify({
+                    reaction: reaction,
+                    newsKey: key,
+                    isDelete: isDelete,
+                  }),
+                })
+                  .then((res) => {
+                    return res.json()
                   })
-                    .then((res) => {
-                      return res.json()
-                    })
-                    .then((res) => {
-                      setNews(res.news)
-                    })
-                } else if (type === 'comment') {
-                  fetch(constants.apiUrl + 'comment', {
-                    method: 'POST',
-                    credentials: 'include',
-                    headers: {
-                      Accept: 'application/json',
-                      'Content-Type': 'application/json',
-                    },
-                    body: JSON.stringify({
-                      type: 'reaction',
-                      newsKey: key,
-                      path: path,
-                      reaction: reaction,
-                      isDelete: isDelete,
-                    }),
+                  .then((res) => {
+                    console.log(res)
+                    setNews(res.news)
+                  })
+              }}
+              onCommentReact={({ path, reaction, isDelete }) => {
+                fetch(constants.apiUrl + 'react', {
+                  method: 'POST',
+                  credentials: 'include',
+                  headers: {
+                    Accept: 'application/json',
+                    'Content-Type': 'application/json',
+                  },
+                  body: JSON.stringify({
+                    type: 'reaction',
+                    newsKey: key,
+                    path: path,
+                    reaction: reaction,
+                    isDelete: isDelete,
+                  }),
+                })
+                  .then((res) => {
+                    return res.json()
+                  })
+                  .then((res) => {
+                    setNews(res.news)
                   })
-                    .then((res) => {
-                      return res.json()
-                    })
-                    .then((res) => {
-                      setNews(res.news)
-                    })
-                }
               }}
               onDelete={(path) => {
                 fetch(constants.apiUrl + 'comment', {

From 78df0dcfffeaa57e45b0c4e04c82d2cc9a8cf905 Mon Sep 17 00:00:00 2001
From: mrfry <mr.fry@tutanota.com>
Date: Sat, 6 Mar 2021 14:53:27 +0100
Subject: [PATCH 12/14] Fixed new lines in news entry

---
 src/components/newsEntry.js         | 17 +++++++++--------
 src/components/newsEntry.module.css |  1 +
 src/components/reactButton.js       |  1 -
 3 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/src/components/newsEntry.js b/src/components/newsEntry.js
index c29bca7..8a37d40 100644
--- a/src/components/newsEntry.js
+++ b/src/components/newsEntry.js
@@ -20,19 +20,20 @@ export default function NewsEntry({
     <div>
       <div className={`${styles.newsContainer} ${admin && styles.adminPost}`}>
         <div className={styles.newsHeader}>
-          <div
-            className={styles.newsTitle}
-            dangerouslySetInnerHTML={{ __html: title }}
-          />
+          <div className={styles.newsTitle}>{title}</div>
           <div className={styles.user}>
             <div>User #{user}</div>
             <div className={styles.newsDate}>{date}</div>
           </div>
         </div>
-        <div
-          className={styles.newsBody}
-          dangerouslySetInnerHTML={{ __html: content }}
-        />
+        {admin ? (
+          <div
+            className={styles.newsBody}
+            dangerouslySetInnerHTML={{ __html: content }}
+          />
+        ) : (
+          <div className={styles.newsBody}>{content}</div>
+        )}
       </div>
       <div className={'actions'}>
         {uid === user ? (
diff --git a/src/components/newsEntry.module.css b/src/components/newsEntry.module.css
index c5185a1..960b94a 100644
--- a/src/components/newsEntry.module.css
+++ b/src/components/newsEntry.module.css
@@ -2,6 +2,7 @@
   margin: 0px 5px;
   font-size: 18px;
   color: #fff;
+  white-space: pre-line;
 }
 
 .newsTitle {
diff --git a/src/components/reactButton.js b/src/components/reactButton.js
index 11a4610..68c61f3 100644
--- a/src/components/reactButton.js
+++ b/src/components/reactButton.js
@@ -76,7 +76,6 @@ export default function ReactButton({ onClick, existingReacts, uid }) {
       onClick={() => {
         setOpened(true)
       }}
-      onMouseEnter={() => {}}
       onMouseLeave={() => {
         setOpened(false)
       }}

From 34cc962ab44d223952ca458c8bdf5a5375544e9d Mon Sep 17 00:00:00 2001
From: mrfry <mr.fry@tutanota.com>
Date: Sat, 6 Mar 2021 14:59:09 +0100
Subject: [PATCH 13/14] Prettying stuff

---
 src/components/Button.js          |   6 +-
 src/components/Question.js        |  16 +-
 src/components/Questions.js       |  15 +-
 src/components/Subject.js         |  15 +-
 src/components/SubjectSelector.js |  15 +-
 src/components/layout.js          |  18 ++-
 src/components/sleep.js           |   9 +-
 src/data/helps.json               |   5 +-
 src/defaultStyles.css             |  44 ++---
 src/pages/404.js                  |  11 +-
 src/pages/_document.js            |   6 +-
 src/pages/_error.js               |  11 +-
 src/pages/index.module.css        |  32 ++--
 src/pages/manual.js               | 258 +++++++++++++++++-------------
 src/pages/pwRequest.module.css    |   2 +-
 src/pages/thanks.js               |   2 +-
 16 files changed, 247 insertions(+), 218 deletions(-)

diff --git a/src/components/Button.js b/src/components/Button.js
index 8cda1d4..8395434 100644
--- a/src/components/Button.js
+++ b/src/components/Button.js
@@ -1,13 +1,11 @@
 import styles from './button.module.css'
 
-export default function Button (props) {
+export default function Button(props) {
   return (
     <div>
       <center>
         <a href={props.href}>
-          <div className={styles.ircLink}>
-            {props.text}
-          </div>
+          <div className={styles.ircLink}>{props.text}</div>
         </a>
       </center>
     </div>
diff --git a/src/components/Question.js b/src/components/Question.js
index 549d512..8c100db 100644
--- a/src/components/Question.js
+++ b/src/components/Question.js
@@ -1,7 +1,7 @@
 import React, { PureComponent } from 'react'
 
 class Question extends PureComponent {
-  render () {
+  render() {
     const { question } = this.props
 
     let qdata = question.data
@@ -15,16 +15,10 @@ class Question extends PureComponent {
     }
 
     return (
-      <div className='questionContainer'>
-        <div className='question'>
-          {question.Q}
-        </div>
-        <div className='answer'>
-          {question.A}
-        </div>
-        <div className='data'>
-          {qdata || null}
-        </div>
+      <div className="questionContainer">
+        <div className="question">{question.Q}</div>
+        <div className="answer">{question.A}</div>
+        <div className="data">{qdata || null}</div>
       </div>
     )
   }
diff --git a/src/components/Questions.js b/src/components/Questions.js
index b2107cf..d1c0555 100644
--- a/src/components/Questions.js
+++ b/src/components/Questions.js
@@ -5,7 +5,7 @@ import Question from './Question.js'
 import styles from './Questions.module.css'
 
 class Questions extends PureComponent {
-  render () {
+  render() {
     const { subjs } = this.props
 
     return (
@@ -13,16 +13,9 @@ class Questions extends PureComponent {
         {subjs.map((subj, i) => {
           return (
             <div key={i}>
-              <div className={styles.subjName}>
-                {subj.Name}
-              </div>
-              { subj.Questions.map((question, i) => {
-                return (
-                  <Question
-                    key={i}
-                    question={question}
-                  />
-                )
+              <div className={styles.subjName}>{subj.Name}</div>
+              {subj.Questions.map((question, i) => {
+                return <Question key={i} question={question} />
               })}
             </div>
           )
diff --git a/src/components/Subject.js b/src/components/Subject.js
index 8235b5e..cd88281 100644
--- a/src/components/Subject.js
+++ b/src/components/Subject.js
@@ -3,26 +3,19 @@ import React, { PureComponent } from 'react'
 import Question from './Question.js'
 
 class Subject extends PureComponent {
-  render () {
+  render() {
     const { subj } = this.props
 
     if (subj) {
       return (
-        <div >
+        <div>
           {subj.Questions.map((question, i) => {
-            return (
-              <Question
-                key={i}
-                question={question}
-              />
-            )
+            return <Question key={i} question={question} />
           })}
         </div>
       )
     } else {
-      return (
-        <div />
-      )
+      return <div />
     }
   }
 }
diff --git a/src/components/SubjectSelector.js b/src/components/SubjectSelector.js
index 3918c99..735add3 100644
--- a/src/components/SubjectSelector.js
+++ b/src/components/SubjectSelector.js
@@ -1,10 +1,10 @@
 import styles from './SubjectSelector.module.css'
 
-export default function SubjectSelector (props) {
+export default function SubjectSelector(props) {
   const { activeSubjName, searchTerm, data, onSubjSelect } = props
 
   return (
-    <div className='subjectSelector'>
+    <div className="subjectSelector">
       {data.map((subj, i) => {
         if (!subj.Name.toLowerCase().includes(searchTerm.toLowerCase())) {
           return null
@@ -12,16 +12,15 @@ export default function SubjectSelector (props) {
 
         return (
           <div
-            className={activeSubjName === subj.Name
-              ? 'subjItem activeSubjItem'
-              : 'subjItem'
+            className={
+              activeSubjName === subj.Name
+                ? 'subjItem activeSubjItem'
+                : 'subjItem'
             }
             key={i}
             onClick={() => onSubjSelect(subj.Name)}
           >
-            <span className={styles.subjName}>
-              {subj.Name}
-            </span>
+            <span className={styles.subjName}>{subj.Name}</span>
             <span className={styles.questionCount}>
               [ {subj.Questions.length} ]
             </span>
diff --git a/src/components/layout.js b/src/components/layout.js
index 6e1e6cf..f83a7e6 100644
--- a/src/components/layout.js
+++ b/src/components/layout.js
@@ -80,11 +80,15 @@ export default function Layout({
             <div />
           </span>
           <div className="sidebarheader">
-            <Link href="/"><a><img
-              style={{ maxWidth: '100%' }}
-              src={`${constants.siteUrl}img/frylabs-logo_small_transparent.png`}
-              alt="Frylabs"
-            /></a></Link>
+            <Link href="/">
+              <a>
+                <img
+                  style={{ maxWidth: '100%' }}
+                  src={`${constants.siteUrl}img/frylabs-logo_small_transparent.png`}
+                  alt="Frylabs"
+                />
+              </a>
+            </Link>
           </div>
         </div>
         {sidebarOpen ? (
@@ -123,9 +127,9 @@ export default function Layout({
                 rel="noreferrer"
               >
                 Donate
-              </a>  
+              </a>
             </div>
-            <div className="userStatus">   
+            <div className="userStatus">
               <div className="msgs">
                 <div
                   onClick={() => {
diff --git a/src/components/sleep.js b/src/components/sleep.js
index dfa2b6a..62efc19 100644
--- a/src/components/sleep.js
+++ b/src/components/sleep.js
@@ -1,18 +1,19 @@
 import constants from '../constants.json'
 
-export default function Sleep (props) {
+export default function Sleep(props) {
   const hours = new Date().getHours()
   if (hours < 4 || hours > 23) {
     return (
-        <div>
+      <div>
         <center>
           <img
             style={{
               margin: '10px',
               width: '300px',
-              border: '2px solid white'
+              border: '2px solid white',
             }}
-            src={constants.siteUrl + 'img/aludni.jpeg'} title="Ezt a kepet azert latod, mert ilyenkor mar igazan nem ezen az oldalon kellene jarnod"
+            src={constants.siteUrl + 'img/aludni.jpeg'}
+            title="Ezt a kepet azert latod, mert ilyenkor mar igazan nem ezen az oldalon kellene jarnod"
           />
         </center>
       </div>
diff --git a/src/data/helps.json b/src/data/helps.json
index 9da4768..1220b1f 100644
--- a/src/data/helps.json
+++ b/src/data/helps.json
@@ -1,8 +1,5 @@
 {
-  "header": [
-    "Miben",
-    "Hogy"
-  ],
+  "header": ["Miben", "Hogy"],
   "rows": {
     "feedbacker": {
       "name": "Visszajelzésben",
diff --git a/src/defaultStyles.css b/src/defaultStyles.css
index b8d492a..165c227 100644
--- a/src/defaultStyles.css
+++ b/src/defaultStyles.css
@@ -15,7 +15,7 @@ body {
 }
 
 li {
-    padding: 2px 0px;
+  padding: 2px 0px;
 }
 
 a {
@@ -195,7 +195,7 @@ input {
 }
 
 .endofpage {
-    padding-bottom: 20px;
+  padding-bottom: 20px;
 }
 
 .questionContainer {
@@ -267,40 +267,40 @@ input {
 }
 
 .warning {
-    color: red;
-    font-weight: 100;
-    font-size: 17.5px;
+  color: red;
+  font-weight: 100;
+  font-size: 17.5px;
 }
 
 #manualWarn {
-    font-size: 14px;
+  font-size: 14px;
 }
 
 .manual_img {
-    padding: 20px 2px;
+  padding: 20px 2px;
 }
 
 .subtitle {
-    color: var(--text-color);
-    font-size: 23px;
-    text-align: center;
-    font-weight: 100;
-    margin: 0px;
-    padding-top: 8px;
+  color: var(--text-color);
+  font-size: 23px;
+  text-align: center;
+  font-weight: 100;
+  margin: 0px;
+  padding-top: 8px;
 }
 
 .pageHeader {
-    background-color: var(--text-color);
-    height: 45px;
-    max-width: 100%;
-    color: black;
-    margin: 5px 0px 0px 0px;
+  background-color: var(--text-color);
+  height: 45px;
+  max-width: 100%;
+  color: black;
+  margin: 5px 0px 0px 0px;
 }
 
 .pageHeader h1 {
-    padding-top: 6px;
-    letter-spacing: 7px;
-    margin: 0px;
+  padding-top: 6px;
+  letter-spacing: 7px;
+  margin: 0px;
 }
 
 .manualUsage {
@@ -309,7 +309,7 @@ input {
 }
 
 .manualBody {
-    text-align: justify;
+  text-align: justify;
 }
 
 select {
diff --git a/src/pages/404.js b/src/pages/404.js
index c07144b..afd11fc 100644
--- a/src/pages/404.js
+++ b/src/pages/404.js
@@ -1,8 +1,15 @@
-export default function Custom404 () {
+export default function Custom404() {
   return (
     <center>
       <h1>404</h1>
-      <iframe width='660' height='465' src='https://www.youtube-nocookie.com/embed/GOzwOeONBhQ' frameBorder='0' allow='accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture' allowFullScreen />
+      <iframe
+        width="660"
+        height="465"
+        src="https://www.youtube-nocookie.com/embed/GOzwOeONBhQ"
+        frameBorder="0"
+        allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
+        allowFullScreen
+      />
     </center>
   )
 }
diff --git a/src/pages/_document.js b/src/pages/_document.js
index 5e43ea1..d730a08 100644
--- a/src/pages/_document.js
+++ b/src/pages/_document.js
@@ -1,16 +1,16 @@
 import Document, { Html, Head, Main, NextScript } from 'next/document'
 
 class MyDocument extends Document {
-  static async getInitialProps (ctx) {
+  static async getInitialProps(ctx) {
     const initialProps = await Document.getInitialProps(ctx)
     return { ...initialProps }
   }
 
-  render () {
+  render() {
     return (
       <Html>
         <Head />
-        <body bgcolor='#222426'>
+        <body bgcolor="#222426">
           <Main />
           <NextScript />
         </body>
diff --git a/src/pages/_error.js b/src/pages/_error.js
index e68897c..e135e8c 100644
--- a/src/pages/_error.js
+++ b/src/pages/_error.js
@@ -1,9 +1,16 @@
-function Error ({ statusCode }) {
+function Error({ statusCode }) {
   const render404 = () => {
     return (
       <center>
         <h1>404</h1>
-        <iframe width='100%' height='465' src='https://www.youtube-nocookie.com/embed/GOzwOeONBhQ' frameBorder='0' allow='accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture' allowFullScreen />
+        <iframe
+          width="100%"
+          height="465"
+          src="https://www.youtube-nocookie.com/embed/GOzwOeONBhQ"
+          frameBorder="0"
+          allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
+          allowFullScreen
+        />
       </center>
     )
   }
diff --git a/src/pages/index.module.css b/src/pages/index.module.css
index 76ee908..375fa60 100644
--- a/src/pages/index.module.css
+++ b/src/pages/index.module.css
@@ -3,22 +3,22 @@
 }
 
 .button {
-    color: white;
-    background-color: #313131;
-    margin: 0px 4px;
-    padding: 15px 4px;
-    max-width: 100%;
-    text-align: center;
-    font-size: 16px;
-    cursor: pointer;
-    word-wrap: break-word;
-    text-decoration: none;
-    transition: width 0.5s, height 0.5s, ease-in 0.5s;
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    user-select: none;
+  color: white;
+  background-color: #313131;
+  margin: 0px 4px;
+  padding: 15px 4px;
+  max-width: 100%;
+  text-align: center;
+  font-size: 16px;
+  cursor: pointer;
+  word-wrap: break-word;
+  text-decoration: none;
+  transition: width 0.5s, height 0.5s, ease-in 0.5s;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  user-select: none;
 }
 
 .button:hover {
diff --git a/src/pages/manual.js b/src/pages/manual.js
index 474fa0d..8438e04 100644
--- a/src/pages/manual.js
+++ b/src/pages/manual.js
@@ -15,44 +15,49 @@ function renderMaual() {
       </Head>
       <center>
         <div className={'pageHeader'}>
-            <h1>Manual</h1>
-        </div>     
+          <h1>Manual</h1>
+        </div>
         <h3 className={'warning'}>
           Ha az oldalt vagy a scriptet használod: akármikor észrevehetik,
           leállhat a szerver, és rossz lehet az összes válasz!
         </h3>
-        <p id="manualWarn">Valószínűleg semmi baj nem lesz, de én szóltam. Ha emiatt aggódsz,
-        olvasd el a <a href="#risk">kockázatok részt</a>.</p>
+        <p id="manualWarn">
+          Valószínűleg semmi baj nem lesz, de én szóltam. Ha emiatt aggódsz,
+          olvasd el a <a href="#risk">kockázatok részt</a>.
+        </p>
       </center>
       <Sleep />
-      <center>
-      </center>
+      <center></center>
       <hr />
       <center>
         <h2 className={'subtitle'}>A userscript használata</h2>
       </center>
       <div className={'manualUsage manualBody'}>
         <div>
-          <p>Ez a userscript Moodle/Elearnig/KMOOC tesztek megoldása során segítséget
-          jelenít meg.</p>
+          <p>
+            Ez a userscript Moodle/Elearnig/KMOOC tesztek megoldása során
+            segítséget jelenít meg.
+          </p>
           <ul>
             <li>
-              Tölts le egy userscript futtató kiegészítőt a böngésződhöz: pl. a {' '}
+              Tölts le egy userscript futtató kiegészítőt a böngésződhöz: pl. a{' '}
               <a
                 href="https://www.tampermonkey.net/"
                 target="_blank"
                 rel="noreferrer"
               >
                 Tampermonkey
-              </a>-t.
+              </a>
+              -t.
             </li>
             <li>
-              A <a
+              A{' '}
+              <a
                 href="http://qmining.frylabs.net/install?man"
                 target="_blank"
                 rel="noreferrer"
               >
-               weboldalról
+                weboldalról
               </a>{' '}
               rakd fel a scriptet.
             </li>
@@ -64,8 +69,8 @@ function renderMaual() {
               Ezután:
               <ul>
                 <li>
-                  A kitöltendő teszt oldalán a kérdésre a választ kell látnod felül egy
-                  lebegő ablakban.
+                  A kitöltendő teszt oldalán a kérdésre a választ kell látnod
+                  felül egy lebegő ablakban.
                 </li>
                 <li>
                   Teszt ellenőrzés oldalon a script beküldi a szervernek a
@@ -90,12 +95,12 @@ function renderMaual() {
               (ha elszállna a szerver)
             </li>
             <li>
-              Az <a
-                href="/allQuestions"
-                rel="noreferrer"
-              >
+              Az{' '}
+              <a href="/allQuestions" rel="noreferrer">
                 összes kérdés oldal
-              </a> az oldal, ahol manuálisan tudsz keresni, ha valami gáz lenne a scripttel.
+              </a>{' '}
+              az oldal, ahol manuálisan tudsz keresni, ha valami gáz lenne a
+              scripttel.
             </li>
           </ul>
         </div>
@@ -112,85 +117,103 @@ function renderMaual() {
         <h2 className={'subtitle'}>Jelszavak</h2>
       </center>
       <div className={'manualBody'}>
-      <p>Ha ezt olvasod valszeg már neked is van. Azért lett bevezetve, hogy
-      nagyjából zárt legyen a felhasználók köre.</p>
-      <ul>
-        <li>Minden felhasználónak más jelszava van.</li>
-        <li>
-          Elvileg elég csak 1 szer beírnod, és többet nem kell, de{' '}
-          <b>mentsd le biztos helyre a jelszót, hogy később is meglegyen</b>! Ha
-          többször kell megadnod, akkor az bug lesz. Ilyenkor ezt {' '}
-          <a
-            href="http://qmining.frylabs.net/feedback?man"
-            target="_blank"
-            rel="noreferrer"
-          >
-            jelentsd
-          </a>.
-        </li>
-        <li>
-          <i>
-            Jelenleg nincs elfelejtett jelszó funkció, ha elfelejted, akkor az
-            örökre eltűnik!
-          </i>
-        </li>
-        <li>
-          Ha van jelszavad akkor {' '}
-          <b>bizonyos határok között</b>{' '}
-           te is <a
-            href="https://qmining.frylabs.net/pwRequest?man"
-            target="_blank"
-            rel="noreferrer"
-          >
-            tudsz generálni
-          </a> másoknak (ncore style).
-        </li>
-        <li>
-          Saját jelszavadat ne oszd meg, mivel egyszerre egy helyen lehetsz belépve, máshol automatikusan ki leszel jelentkeztetve. (meg minek, ha tudsz adni másoknak az előző pont alapján) 
-        </li>
-        <li>
-          Mivel senkinek sincs felhasználóneve, csak egy UserID (amit bal alul találsz), 
-          így az egész teljesen anonim. Emiatt a jelszavakat nem lehet megváltoztatni, 
-          hogy a szükséges komplexitás megmaradjon.
-        </li>
-      </ul>
+        <p>
+          Ha ezt olvasod valszeg már neked is van. Azért lett bevezetve, hogy
+          nagyjából zárt legyen a felhasználók köre.
+        </p>
+        <ul>
+          <li>Minden felhasználónak más jelszava van.</li>
+          <li>
+            Elvileg elég csak 1 szer beírnod, és többet nem kell, de{' '}
+            <b>mentsd le biztos helyre a jelszót, hogy később is meglegyen</b>!
+            Ha többször kell megadnod, akkor az bug lesz. Ilyenkor ezt{' '}
+            <a
+              href="http://qmining.frylabs.net/feedback?man"
+              target="_blank"
+              rel="noreferrer"
+            >
+              jelentsd
+            </a>
+            .
+          </li>
+          <li>
+            <i>
+              Jelenleg nincs elfelejtett jelszó funkció, ha elfelejted, akkor az
+              örökre eltűnik!
+            </i>
+          </li>
+          <li>
+            Ha van jelszavad akkor <b>bizonyos határok között</b> te is{' '}
+            <a
+              href="https://qmining.frylabs.net/pwRequest?man"
+              target="_blank"
+              rel="noreferrer"
+            >
+              tudsz generálni
+            </a>{' '}
+            másoknak (ncore style).
+          </li>
+          <li>
+            Saját jelszavadat ne oszd meg, mivel egyszerre egy helyen lehetsz
+            belépve, máshol automatikusan ki leszel jelentkeztetve. (meg minek,
+            ha tudsz adni másoknak az előző pont alapján)
+          </li>
+          <li>
+            Mivel senkinek sincs felhasználóneve, csak egy UserID (amit bal alul
+            találsz), így az egész teljesen anonim. Emiatt a jelszavakat nem
+            lehet megváltoztatni, hogy a szükséges komplexitás megmaradjon.
+          </li>
+        </ul>
       </div>
       <hr />
       <center>
         <h2 className={'subtitle'}>Gyakran Ismételt Kérdések</h2>
       </center>
       <div className={'manualBody'}>
-      <ul>
-        <li>
-          <b>
-            Olyan helyeken fut le a script, ahol nem kellene, vagy ideiglenesen
-            ki akarod kapcsolni;
-          </b>
-          <br /><i>Tampermonkey bővitmény ikon -{'>'} click -{'>'} a scriptet
-          kapcsold ki. Csak ne felejtsd el visszakapcsolni ;)</i>
-        </li>
-        <br />
-        <li>
-          <b>
-            Túl nagy a kérdést és a választ megjelenítő ablak, nem tudok a
-            válaszra kattintani;
-          </b>
-          <br /><i>Zoomolj ki egy kicsit az oldalon, kapcsold ki addig a scriptet, 
-          vagy zárd be a script ablakát. Illetve a középső egérgombbal kattintva a 
-          script abalkon el bírod tüntetni, amíg újra nem töltöd az oldalt, vagy görgetéssel 
-          állíthatsz az átlátszóságán.</i>
-        </li>
-        <br />
-        <li>
-        <b>Gombok, %-ok, számok;</b>
-        <br />
-        <img style={{ maxWidth: '100%' }} src="img/6.png" alt="img" className={'manual_img'} />
-        </li>
-      </ul>
+        <ul>
+          <li>
+            <b>
+              Olyan helyeken fut le a script, ahol nem kellene, vagy
+              ideiglenesen ki akarod kapcsolni;
+            </b>
+            <br />
+            <i>
+              Tampermonkey bővitmény ikon -{'>'} click -{'>'} a scriptet
+              kapcsold ki. Csak ne felejtsd el visszakapcsolni ;)
+            </i>
+          </li>
+          <br />
+          <li>
+            <b>
+              Túl nagy a kérdést és a választ megjelenítő ablak, nem tudok a
+              válaszra kattintani;
+            </b>
+            <br />
+            <i>
+              Zoomolj ki egy kicsit az oldalon, kapcsold ki addig a scriptet,
+              vagy zárd be a script ablakát. Illetve a középső egérgombbal
+              kattintva a script abalkon el bírod tüntetni, amíg újra nem töltöd
+              az oldalt, vagy görgetéssel állíthatsz az átlátszóságán.
+            </i>
+          </li>
+          <br />
+          <li>
+            <b>Gombok, %-ok, számok;</b>
+            <br />
+            <img
+              style={{ maxWidth: '100%' }}
+              src="img/6.png"
+              alt="img"
+              className={'manual_img'}
+            />
+          </li>
+        </ul>
       </div>
       <hr />
       <center>
-        <h2 id="risk" className={'subtitle'}>Kockázatok</h2>
+        <h2 id="risk" className={'subtitle'}>
+          Kockázatok
+        </h2>
       </center>
       <ul>
         <li>
@@ -240,30 +263,42 @@ function renderMaual() {
         </li>
       </ul>
       <hr />
-      <h2 id="sitesave" className={'subtitle'}>Weboldal lementése</h2>
-      <p>Hogy a hibákat a saját gépemen reprodukálni tudjam, és könnyen ki bírjam
-          javítani, sokszor jól jön, ha egy lementett weboldalt megkapok. Így lehet
-      menteni egy oldalt:</p>
+      <h2 id="sitesave" className={'subtitle'}>
+        Weboldal lementése
+      </h2>
+      <p>
+        Hogy a hibákat a saját gépemen reprodukálni tudjam, és könnyen ki bírjam
+        javítani, sokszor jól jön, ha egy lementett weboldalt megkapok. Így
+        lehet menteni egy oldalt:
+      </p>
       <center>
-      <img style={{ maxWidth: '100%' }} src="img/websitesave.png" alt="img" className={'manual_img'} />
-      <br />
-      <a
-        href="/feedback"
-        rel="noreferrer"
-      >
-        Ide tudod feltölteni
-      </a>
+        <img
+          style={{ maxWidth: '100%' }}
+          src="img/websitesave.png"
+          alt="img"
+          className={'manual_img'}
+        />
+        <br />
+        <a href="/feedback" rel="noreferrer">
+          Ide tudod feltölteni
+        </a>
       </center>
-      <p>Mivel nincs hozzáférésem semmilyen egyetemi oldalhoz, így csak így tudom
-      hatékonyan tesztelni a scriptet. Ezért hatalmas segítség ha feltöltöd azt
-      az oldalt amin hibával találkozol.</p>
+      <p>
+        Mivel nincs hozzáférésem semmilyen egyetemi oldalhoz, így csak így tudom
+        hatékonyan tesztelni a scriptet. Ezért hatalmas segítség ha feltöltöd
+        azt az oldalt amin hibával találkozol.
+      </p>
       <hr />
-      <h2 id="scriptreinstall" className={'subtitle'}>Script újratelepítése</h2>
-      <p>Jelenleg két helyről lehet telepíteni a scriptet: greasyforkról és a
-      weboldalról. A greasyforkos telepítési lehetőség meg fog szűnni, így ha
-      onnan telepítetted, akkor nem lesznek frissítések elérhetők (amik nagyon
-      fontosak (de tényleg)). Ezért a következő rövid manővert kellene
-      végrehajtani, hogy minden zökkenőmentesen menjen:</p>
+      <h2 id="scriptreinstall" className={'subtitle'}>
+        Script újratelepítése
+      </h2>
+      <p>
+        Jelenleg két helyről lehet telepíteni a scriptet: greasyforkról és a
+        weboldalról. A greasyforkos telepítési lehetőség meg fog szűnni, így ha
+        onnan telepítetted, akkor nem lesznek frissítések elérhetők (amik nagyon
+        fontosak (de tényleg)). Ezért a következő rövid manővert kellene
+        végrehajtani, hogy minden zökkenőmentesen menjen:
+      </p>
       <ul>
         <li>Böngésző bővítményeidnél kattints a tampermonkey-ra</li>
         <li>Válaszd ki alulról második opciót, ami dashboard néven fut</li>
@@ -281,7 +316,8 @@ function renderMaual() {
             rel="noreferrer"
           >
             ide
-          </a> a script újratelepítéséhez a weboldalról.
+          </a>{' '}
+          a script újratelepítéséhez a weboldalról.
         </li>
         <li>
           Kész! Lehet megkérdezi újra, hogy elérheti-e a szervert, de azt csak
diff --git a/src/pages/pwRequest.module.css b/src/pages/pwRequest.module.css
index 2ca83ba..e8fba29 100644
--- a/src/pages/pwRequest.module.css
+++ b/src/pages/pwRequest.module.css
@@ -27,7 +27,7 @@
 }
 
 .pwContainer {
-  font-family: "Courier New", Courier, monospace;
+  font-family: 'Courier New', Courier, monospace;
   text-align: center;
   font-size: 24px;
   color: white;
diff --git a/src/pages/thanks.js b/src/pages/thanks.js
index 5e7fcd7..e3b38b6 100644
--- a/src/pages/thanks.js
+++ b/src/pages/thanks.js
@@ -2,7 +2,7 @@ import styles from './thanks.module.css'
 import constants from '../constants.json'
 import Head from 'next/head'
 
-export default function Thanks () {
+export default function Thanks() {
   return (
     <div>
       <Head>

From 1d6cc647e9cfab1568df53844c0112817f8b786d Mon Sep 17 00:00:00 2001
From: mrfry <mr.fry@tutanota.com>
Date: Sat, 6 Mar 2021 15:14:28 +0100
Subject: [PATCH 14/14] Minor style fixes, minor manual refactor

---
 src/components/comments.module.css            |  5 --
 src/components/newsEntry.module.css           |  1 -
 src/components/sidebar.module.css             |  2 +-
 .../todoStuff/todoSidebar.module.css          |  6 +--
 src/constants.json                            |  2 +-
 src/defaultStyles.css                         |  2 +-
 src/pages/allQuestions.js                     |  2 -
 src/pages/allQuestions.module.css             |  9 ----
 src/pages/contribute.module.css               |  2 +-
 src/pages/manual.js                           | 50 +++++++------------
 10 files changed, 24 insertions(+), 57 deletions(-)

diff --git a/src/components/comments.module.css b/src/components/comments.module.css
index 91e3a12..93a81a9 100644
--- a/src/components/comments.module.css
+++ b/src/components/comments.module.css
@@ -6,11 +6,6 @@
 .commentData {
   padding: 5px 2px;
   border-left: 2px solid var(--text-color);
-  border-radius: 3px;
-}
-
-.commentData:hover {
-  background-color: var(--hoover-color);
 }
 
 .commentHeader {
diff --git a/src/components/newsEntry.module.css b/src/components/newsEntry.module.css
index 022fca8..a8b4ee5 100644
--- a/src/components/newsEntry.module.css
+++ b/src/components/newsEntry.module.css
@@ -20,7 +20,6 @@
 
 .adminPost {
   border-left: 2px solid yellow;
-  border-radius: 5px;
 }
 
 .newsContainer img {
diff --git a/src/components/sidebar.module.css b/src/components/sidebar.module.css
index 9311c00..85744a5 100644
--- a/src/components/sidebar.module.css
+++ b/src/components/sidebar.module.css
@@ -1,6 +1,6 @@
 .container {
   background-color: var(--background-color);
-  border-left: 3px solid #99f;
+  border-left: 3px solid var(--text-color);
   top: 0;
   right: 0px;
   height: 100%;
diff --git a/src/components/todoStuff/todoSidebar.module.css b/src/components/todoStuff/todoSidebar.module.css
index 8159b96..b89d034 100644
--- a/src/components/todoStuff/todoSidebar.module.css
+++ b/src/components/todoStuff/todoSidebar.module.css
@@ -9,12 +9,12 @@
 }
 
 .title {
-  color: #99f;
+  color: var(--text-color);
   font-size: 18px;
 }
 
 .name {
-  color: #99f;
+  color: var(--text-color);
   font-size: 20px;
   margin: 20px 0px;
 }
@@ -36,7 +36,7 @@
 }
 
 .button {
-  border: 2px solid #99f;
+  border: 2px solid var(--text-color);
   border-radius: 3px;
   text-align: center;
   cursor: pointer;
diff --git a/src/constants.json b/src/constants.json
index dec44ec..8650745 100644
--- a/src/constants.json
+++ b/src/constants.json
@@ -1,6 +1,6 @@
 {
   "siteUrl": "https://qmining.frylabs.net/",
-  "apiUrl": "http://localhost:8080/",
+  "apiUrl": "https://api.frylabs.net/",
   "mobileWindowWidth": 700,
   "maxQuestionsToRender": 250
 }
diff --git a/src/defaultStyles.css b/src/defaultStyles.css
index 165c227..bd26096 100644
--- a/src/defaultStyles.css
+++ b/src/defaultStyles.css
@@ -40,7 +40,7 @@ input {
   color: var(--text-color);
   background-color: var(--background-color);
   border: 1px solid #444;
-  border-radius: 3px;
+  width: 100%;
 }
 
 .link {
diff --git a/src/pages/allQuestions.js b/src/pages/allQuestions.js
index 6335750..5a82374 100644
--- a/src/pages/allQuestions.js
+++ b/src/pages/allQuestions.js
@@ -157,7 +157,6 @@ export default function AllQuestions({ router }) {
               <input
                 autoFocus
                 placeholder="Keresés..."
-                className={styles.searchBar}
                 type="text"
                 value={searchTerm}
                 onChange={(event) => {
@@ -206,7 +205,6 @@ export default function AllQuestions({ router }) {
               <input
                 autoFocus
                 placeholder="Keresés..."
-                className={styles.searchBar}
                 type="text"
                 value={searchTerm}
                 onChange={(event) => {
diff --git a/src/pages/allQuestions.module.css b/src/pages/allQuestions.module.css
index f67d0b7..9304a36 100644
--- a/src/pages/allQuestions.module.css
+++ b/src/pages/allQuestions.module.css
@@ -1,12 +1,3 @@
-.searchBar {
-  margin: 10px;
-  color: white;
-  background-color: #222426;
-  border: none;
-  font-size: 18px;
-  flex-grow: 1;
-}
-
 .searchContainer {
   width: 100%;
   display: flex;
diff --git a/src/pages/contribute.module.css b/src/pages/contribute.module.css
index b3e2a02..ca49b87 100644
--- a/src/pages/contribute.module.css
+++ b/src/pages/contribute.module.css
@@ -35,7 +35,7 @@
 }
 
 .title {
-  color: #9999ff;
+  color: var(--text-color);
   font-size: 30px;
   text-align: center;
 }
diff --git a/src/pages/manual.js b/src/pages/manual.js
index 8438e04..345d835 100644
--- a/src/pages/manual.js
+++ b/src/pages/manual.js
@@ -51,33 +51,26 @@ function renderMaual() {
               -t.
             </li>
             <li>
-              A{' '}
               <a
                 href="http://qmining.frylabs.net/install?man"
                 target="_blank"
                 rel="noreferrer"
               >
-                weboldalról
+                Kattints ide hogy felrakd a scriptet
               </a>{' '}
-              rakd fel a scriptet.
             </li>
             <li>
               A script ezt követően udvariasan megkér, hogy hadd beszélgessen a
               szerverrel, mert mással nem tud, ezért ezt engedélyezd neki.
             </li>
             <li>
-              Ezután:
-              <ul>
-                <li>
-                  A kitöltendő teszt oldalán a kérdésre a választ kell látnod
-                  felül egy lebegő ablakban.
-                </li>
-                <li>
-                  Teszt ellenőrzés oldalon a script beküldi a szervernek a
-                  helyes válaszokat, az lementi az új kérdéseket, amik ezután
-                  azonnal elérhetők lesznek
-                </li>
-              </ul>
+              A kitöltendő teszt oldalán a kérdésre a választ kell látnod felül
+              egy lebegő ablakban.
+            </li>
+            <li>
+              Teszt ellenőrzés oldalon a script beküldi a szervernek a helyes
+              válaszokat, az lementi az új kérdéseket, amik ezután azonnal
+              elérhetők lesznek (neked, és másoknak is)
             </li>
           </ul>
           Egyéb fontos tudnivalók:
@@ -92,7 +85,7 @@ function renderMaual() {
                 {' '}
                 Összes kérdés TXT
               </a>{' '}
-              (ha elszállna a szerver)
+              (az összes összegyűjtött kérdés, ha elszállna a szerver)
             </li>
             <li>
               Az{' '}
@@ -190,10 +183,10 @@ function renderMaual() {
             </b>
             <br />
             <i>
-              Zoomolj ki egy kicsit az oldalon, kapcsold ki addig a scriptet,
-              vagy zárd be a script ablakát. Illetve a középső egérgombbal
-              kattintva a script abalkon el bírod tüntetni, amíg újra nem töltöd
-              az oldalt, vagy görgetéssel állíthatsz az átlátszóságán.
+              A felugró ablakot ha minden jól megy akkor a szélénél fogva tudod
+              mozgatni, vagy egeret rajtatartva a görgővel tudod állítani az
+              áttetszőségét, vagy be tudod zárni jobb felül X-el, vagy egér
+              középső gombbal.
             </i>
           </li>
           <br />
@@ -223,16 +216,6 @@ function renderMaual() {
           mert nem fut. Később manuálisan is be lehet majd küldeni
           kérdés-válaszokat.
           <p />
-          Ha arra nem veszik a fáradságot, hogy a kérdéseket lecseréljék akkor
-          valószínűleg arra se hogy userscript futását detektáló kódot rakjanak
-          a weboldalra. A{' '}
-          <a href="https://moodle.org/" target="_blank" rel="noreferrer">
-            Moodle
-          </a>{' '}
-          egy nyílt forráskódú, valószínűleg self-hosted rendszer. Valószínűleg
-          az egyetem egy ezer éves debian szerverén fut, amihez senki se mer
-          nyúlni, nemhogy a moodle-t frissítse valaki.
-          <p />
           A script shadow-root hoz teszi hozzá az összes megjelenített
           elementet, így ezeket szinte lehetetlen detektálni. A moodle
           semmiféleképpen nem látja, hogy milyen más oldalak vannak megnyitva a
@@ -267,9 +250,10 @@ function renderMaual() {
         Weboldal lementése
       </h2>
       <p>
-        Hogy a hibákat a saját gépemen reprodukálni tudjam, és könnyen ki bírjam
-        javítani, sokszor jól jön, ha egy lementett weboldalt megkapok. Így
-        lehet menteni egy oldalt:
+        Ha hibát észlesz, kérlek jelents. Hogy a hibákat a saját gépemen
+        reprodukálni tudjam, és könnyen ki bírjam javítani, sokszor jól jön, ha
+        egy lementett weboldalt megkapok, amin a hiba történik. Így lehet
+        menteni egy oldalt:
       </p>
       <center>
         <img