56 |
57 |
59 |
60 |
61 | );
62 | }
63 | }
64 |
--------------------------------------------------------------------------------
/.github/workflows/automerge-dependabot.yml:
--------------------------------------------------------------------------------
1 | name: Auto Merge Dependabot PRs
2 |
3 | on:
4 | pull_request_target:
5 | workflow_dispatch:
6 |
7 | permissions:
8 | pull-requests: write
9 | contents: write
10 |
11 | jobs:
12 | auto-merge:
13 | runs-on: ubuntu-latest
14 |
15 | # Checking the actor will prevent your Action run failing on non-Dependabot PRs
16 | if: ${{ github.actor == 'dependabot[bot]' }}
17 |
18 | steps:
19 | - name: Fetch Dependabot PR metadata 🎣
20 | id: dependabot-metadata
21 | uses: dependabot/fetch-metadata@v2.4.0
22 | with:
23 | github-token: "${{ secrets.GITHUB_TOKEN }}"
24 |
25 | - name: Approve Dependabot PR ✅
26 | if: ${{steps.dependabot-metadata.outputs.update-type == 'version-update:semver-minor' || steps.dependabot-metadata.outputs.update-type == 'version-update:semver-patch'}}
27 | run: gh pr review --approve "$PR_URL"
28 | env:
29 | PR_URL: ${{github.event.pull_request.html_url}}
30 | GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}}
31 |
32 | - name: Auto-merge Dependabot PR 🪄
33 | if: ${{steps.dependabot-metadata.outputs.update-type == 'version-update:semver-minor' || steps.dependabot-metadata.outputs.update-type == 'version-update:semver-patch'}}
34 | run: gh pr merge --merge "$PR_URL"
35 | env:
36 | PR_URL: ${{github.event.pull_request.html_url}}
37 | GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}}
38 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # 🧑🍳 Emoji Kitchen
2 |
3 | This repository contains the source code for the website [https://emojikitchen.dev](https://emojikitchen.dev).
4 |
5 | This website allows for quick and easy browsing of the comprehensive list of supported emoji mashups as part of Google's [Emoji Kitchen](https://emojipedia.org/emoji-kitchen/).
6 |
7 | There are currently over 100,000 possible valid combinations showcasing the unique illustrations and combined emoji!
8 |
9 | ## Getting Started
10 |
11 | This repository leverages [VSCode's devcontainer](https://code.visualstudio.com/docs/remote/containers) feature to ensure all necessary dependencies are available inside the container for development.
12 |
13 | ### Application
14 |
15 | To get started, you will need to first download the supporting metadata, then install and start the project normally:
16 |
17 | ```bash
18 | curl -L --compressed https://raw.githubusercontent.com/xsalazar/emoji-kitchen-backend/main/app/metadata.json -o src/Components/metadata.json
19 | npm install && npm start
20 | ```
21 |
22 | This will start the application on your local machine, running on [http://localhost:5173/](http://localhost:5173).
23 |
24 | ### Deployments
25 |
26 | All application deployments are managed via GitHub Actions and the [`./.github/workflows/deploy.yml`](./.github/workflows/deploy.yml) workflow.
27 |
28 | Additionally, application dependencies are automatically managed and updated via Dependabot and the [`./.github/workflows/automerge-dependabot.yml`](./.github/workflows/automerge-dependabot.yml) workflow.
29 |
--------------------------------------------------------------------------------
/src/Components/footer.tsx:
--------------------------------------------------------------------------------
1 | import Box from "@mui/material/Box";
2 | import Link from "@mui/material/Link";
3 | import Stack from "@mui/material/Stack";
4 | import Tooltip from "@mui/material/Tooltip";
5 | import {
6 | FileCodeIcon,
7 | LinkExternalIcon,
8 | MentionIcon,
9 | } from "@primer/octicons-react";
10 |
11 | export default function Footer() {
12 | return (
13 |
14 |
15 |
16 |
17 |
24 |
27 |
28 |
35 |
38 |
39 |
46 |
49 |
50 |
51 |
52 | );
53 | }
54 |
--------------------------------------------------------------------------------
/src/Components/left-emoji-list.tsx:
--------------------------------------------------------------------------------
1 | import { ImageListItem } from "@mui/material";
2 | import React, { Dispatch } from "react";
3 | import { getEmojiData, getNotoEmojiUrl, getSupportedEmoji } from "./utils";
4 |
5 | export default function LeftEmojiList({
6 | handleLeftEmojiClicked,
7 | handleBulkImageDownloadMenuOpen,
8 | leftSearchResults,
9 | selectedLeftEmoji,
10 | }: {
11 | handleLeftEmojiClicked: Dispatch {}
35 | }
36 | >
37 | {
39 | handleLeftEmojiClicked(emojiCodepoint);
40 | }}
41 | sx={{
42 | p: 0.5,
43 | borderRadius: 2,
44 | opacity: (_) => {
45 | return 1;
46 | },
47 | backgroundColor: (theme) =>
48 | selectedLeftEmoji === emojiCodepoint
49 | ? theme.palette.action.selected
50 | : theme.palette.background.default,
51 | "&:hover": {
52 | backgroundColor: (theme) => {
53 | return theme.palette.action.hover;
54 | },
55 | },
56 | }}
57 | >
58 | })
65 |
66 |
67 | );
68 | });
69 | }
70 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
10 |
14 |
15 |
16 |
17 |
18 |
44 |
46 | hasSelectedLeftEmoji && isValidCombo
47 | ? handleRightEmojiClicked(emojiCodepoint)
48 | : null
49 | }
50 | sx={{
51 | p: 0.5,
52 | borderRadius: 2,
53 | opacity: (_) => {
54 | if (!hasSelectedLeftEmoji) {
55 | return 0.1;
56 | }
57 |
58 | return isValidCombo ? 1 : 0.1;
59 | },
60 | backgroundColor: (theme) =>
61 | selectedRightEmoji === emojiCodepoint
62 | ? theme.palette.action.selected
63 | : theme.palette.background.default,
64 | "&:hover": {
65 | backgroundColor: (theme) => {
66 | if (hasSelectedLeftEmoji) {
67 | return theme.palette.action.hover;
68 | }
69 | },
70 | },
71 | }}
72 | >
73 |
80 |
81 |
82 | );
83 | });
84 | }
85 |
--------------------------------------------------------------------------------
/src/Components/mobile-emoji-list.tsx:
--------------------------------------------------------------------------------
1 | import { ImageListItem } from "@mui/material";
2 | import { Dispatch } from "react";
3 | import { getEmojiData, getNotoEmojiUrl, getSupportedEmoji } from "./utils";
4 |
5 | export default function MobileEmojiList({
6 | handleEmojiClicked,
7 | searchResults,
8 | selectedEmoji,
9 | selectedOtherEmoji,
10 | selectedMode,
11 | }: {
12 | handleEmojiClicked: Dispatch
42 | {
44 | // On mobile, only return this if it's a valid combination
45 | return isValidCombo ? handleEmojiClicked(emojiCodepoint) : null;
46 | }}
47 | sx={{
48 | p: 0.5,
49 | borderRadius: 2,
50 | opacity: (_) => {
51 | return isValidCombo ? 1 : 0.1;
52 | },
53 | backgroundColor: (theme) =>
54 | selectedEmoji === emojiCodepoint
55 | ? theme.palette.action.selected
56 | : theme.palette.background.default,
57 | "&:hover": {
58 | backgroundColor: (theme) => {
59 | return theme.palette.action.hover;
60 | },
61 | },
62 | }}
63 | >
64 |
71 |
72 |
73 | );
74 | });
75 | } else {
76 | return knownSupportedEmoji.map((emojiCodepoint) => {
77 | const data = getEmojiData(emojiCodepoint);
78 |
79 | return (
80 |
81 | handleEmojiClicked(emojiCodepoint)}
83 | sx={{
84 | p: 0.5,
85 | borderRadius: 2,
86 | backgroundColor: (theme) =>
87 | selectedEmoji === emojiCodepoint
88 | ? theme.palette.action.selected
89 | : theme.palette.background.default,
90 | "&:hover": {
91 | backgroundColor: (theme) => {
92 | return theme.palette.action.hover;
93 | },
94 | },
95 | }}
96 | >
97 |
104 |
105 |
106 | );
107 | });
108 | }
109 | }
110 |
--------------------------------------------------------------------------------
/src/Components/search.tsx:
--------------------------------------------------------------------------------
1 | import { Close, Search as SearchIcon } from "@mui/icons-material";
2 | import CircularProgress from "@mui/material/CircularProgress";
3 | import Divider from "@mui/material/Divider";
4 | import IconButton from "@mui/material/IconButton";
5 | import InputBase from "@mui/material/InputBase";
6 | import Paper from "@mui/material/Paper";
7 | import Typography from "@mui/material/Typography";
8 | import { useDebounce } from "@uidotdev/usehooks";
9 | import React, { Dispatch, SetStateAction, useEffect, useState } from "react";
10 | import { getEmojiData, getNotoEmojiUrl } from "./utils";
11 |
12 | export default function Search({
13 | disabled,
14 | handleRandomize,
15 | isMobile,
16 | selectedEmoji,
17 | setSearchResults,
18 | uuid,
19 | }: {
20 | disabled?: boolean;
21 | handleRandomize?: () => void;
22 | isMobile: boolean;
23 | selectedEmoji?: string;
24 | setSearchResults: Dispatch
674 | 
684 |
685 | ) : null}
686 |