├── .firebaserc
├── .gitignore
├── .npmrc
├── .vscode
    └── extensions.json
├── README.md
├── app.vue
├── assets
    ├── github-logo.svg
    └── styles.css
├── components
    └── NavBar.vue
├── composables
    ├── domain-check.ts
    ├── emojis.ts
    └── relative-time.ts
├── firebase.json
├── firestore.indexes.json
├── firestore.rules
├── middleware
    └── authenticated.ts
├── nuxt.config.ts
├── package.json
├── pages
    ├── index.vue
    └── login.vue
├── pnpm-lock.yaml
└── tsconfig.json


/.firebaserc:
--------------------------------------------------------------------------------
1 | {
2 |   "projects": {
3 |     "default": "emoji-panel-test-1"
4 |   }
5 | }
6 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | node_modules
 2 | *.log*
 3 | .nuxt
 4 | .nitro
 5 | .cache
 6 | .output
 7 | .env
 8 | dist
 9 | .yalc
10 | yalc.lock
11 | .firebase
12 | 


--------------------------------------------------------------------------------
/.npmrc:
--------------------------------------------------------------------------------
1 | shamefully-hoist=true
2 | strict-peer-dependencies=false
3 | 


--------------------------------------------------------------------------------
/.vscode/extensions.json:
--------------------------------------------------------------------------------
1 | {
2 | 	"recommendations": [
3 | 		"chflick.firecode"
4 | 	]
5 | }
6 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Nuxt 3 Minimal Starter
 2 | 
 3 | Look at the [Nuxt 3 documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
 4 | 
 5 | ## Setup
 6 | 
 7 | Make sure to install the dependencies:
 8 | 
 9 | ```bash
10 | # yarn
11 | yarn install
12 | 
13 | # npm
14 | npm install
15 | 
16 | # pnpm
17 | pnpm install --shamefully-hoist
18 | ```
19 | 
20 | ## Development Server
21 | 
22 | Start the development server on http://localhost:3000
23 | 
24 | ```bash
25 | npm run dev
26 | ```
27 | 
28 | ## Production
29 | 
30 | Build the application for production:
31 | 
32 | ```bash
33 | npm run build
34 | ```
35 | 
36 | Locally preview production build:
37 | 
38 | ```bash
39 | npm run preview
40 | ```
41 | 
42 | Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.
43 | 


--------------------------------------------------------------------------------
/app.vue:
--------------------------------------------------------------------------------
 1 | <script lang="ts" setup>
 2 | const user = useCurrentUser()
 3 | const router = useRouter()
 4 | const route = useRoute()
 5 | 
 6 | onMounted(() => {
 7 |   watch(user, (user, previousUser) => {
 8 |     // user logged out
 9 |     if (previousUser && !user) {
10 |       router.push('/login')
11 |     } else if (
12 |       !previousUser &&
13 |       user &&
14 |       typeof route.query.redirect === 'string'
15 |     ) {
16 |       // user logged in
17 |       router.push(route.query.redirect)
18 |     }
19 |   })
20 | })
21 | 
22 | // for demo purposes only
23 | useDomainCheck()
24 | </script>
25 | 
26 | <template>
27 |   <div class="container">
28 |     <NavBar />
29 | 
30 |     <h1>Emoji Panel</h1>
31 | 
32 |     <NuxtPage />
33 | 
34 |     <footer>
35 |       <a href="https://github.com/posva/vuefire-emoji-panel" rel="noreferrer">
36 |         <img
37 |           src="@/assets/github-logo.svg"
38 |           alt="GitHub logo"
39 |           class="logo github"
40 |         />
41 |         Source Code
42 |       </a>
43 |     </footer>
44 |   </div>
45 | </template>
46 | 


--------------------------------------------------------------------------------
/assets/github-logo.svg:
--------------------------------------------------------------------------------
 1 | <svg width="98" height="96" xmlns="http://www.w3.org/2000/svg">
 2 | <style>
 3 | @media (prefers-color-scheme: light) {
 4 |   path {
 5 |     fill: #24292f;
 6 |   }
 7 | }
 8 | </style>
 9 | <path fill-rule="evenodd" clip-rule="evenodd" d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z" fill="#fff"/></svg>
10 | 


--------------------------------------------------------------------------------
/assets/styles.css:
--------------------------------------------------------------------------------
 1 | :root {
 2 |   --links: #00dc82;
 3 |   --code: currentColor;
 4 | 
 5 |   --ease-bezier: cubic-bezier(0, 0.26, 0.55, 1.18);
 6 | }
 7 | 
 8 | a {
 9 |   font-weight: 500;
10 |   text-decoration: inherit;
11 | }
12 | a:hover {
13 |   color: #4de7a8;
14 |   text-decoration: inherit;
15 | }
16 | 
17 | h1 {
18 |   font-size: 3.2em;
19 |   line-height: 1.1;
20 | }
21 | /* force emoji in specific places where the variation should always be used */
22 | .emoji {
23 |   font-family: Apple Color Emoji, Segoe UI Emoji, Noto Color Emoji,
24 |     Android Emoji, EmojiSymbols, EmojiOne Mozilla, Twemoji Mozilla,
25 |     Segoe UI Symbol, Noto Color Emoji Compat, emoji, noto-emojipedia-fallback;
26 | }
27 | 
28 | .message-box {
29 |   --border-radius: 8px;
30 | 
31 |   background-color: var(--background-alt);
32 |   padding: 0.2em 1em;
33 |   padding-left: calc(var(--border-radius) + 0.75em);
34 |   margin: var(--border-radius) 0;
35 |   border-radius: var(--border-radius);
36 | 
37 |   position: relative;
38 | }
39 | 
40 | .message-box p {
41 |   margin: 0;
42 | }
43 | 
44 | .message-box::after {
45 |   content: '';
46 |   position: absolute;
47 |   z-index: 2;
48 |   left: 0;
49 |   top: 0;
50 |   background-color: azure;
51 |   width: var(--border-radius);
52 |   height: 100%;
53 |   border-radius: var(--border-radius) 0 0 var(--border-radius);
54 | }
55 | 
56 | .mini-avatar,
57 | .nav-avatar {
58 |   border-radius: 100%;
59 |   width: 2em;
60 |   height: 2em;
61 |   max-width: 100%;
62 |   height: auto;
63 |   vertical-align: middle;
64 |   margin-right: 0.3em;
65 | }
66 | 
67 | .nav-avatar {
68 |   width: 1.5em;
69 |   height: 1.5em;
70 |   margin: -0.5em 0.1em -0.5em 0;
71 |   /* margin-right: 0.1em; */
72 | }
73 | 
74 | .logo {
75 |   height: 1em;
76 |   padding: 0 0.15em;
77 | }
78 | 


--------------------------------------------------------------------------------
/components/NavBar.vue:
--------------------------------------------------------------------------------
 1 | <script lang="ts" setup>
 2 | import { signOut } from 'firebase/auth'
 3 | const user = useCurrentUser()
 4 | const auth = useFirebaseAuth()!
 5 | </script>
 6 | 
 7 | <template>
 8 |   <nav class="links">
 9 |     <ul>
10 |       <li>
11 |         <NuxtLink to="/">Emoji Panel</NuxtLink>
12 |       </li>
13 |       <template v-if="user">
14 |         <li>
15 |           <!-- TODO: Demo this -->
16 |           <NuxtLink to="/login">
17 |             <img
18 |               :src="user.photoURL || `https://i.pravatar.cc/150?u=${user.uid}`"
19 |               referrerpolicy="no-referrer"
20 |               alt="user photo"
21 |               class="nav-avatar"
22 |             />
23 |             {{ user.displayName || 'Anonymous' }}</NuxtLink
24 |           >
25 |         </li>
26 |         <li>
27 |           <button @click="signOut(auth)">Logout</button>
28 |         </li>
29 |       </template>
30 |       <template v-else>
31 |         <li>
32 |           <NuxtLink to="/login">Login</NuxtLink>
33 |         </li>
34 |       </template>
35 |     </ul>
36 |   </nav>
37 | </template>
38 | 
39 | <style scoped>
40 | nav.links ul {
41 |   list-style: none;
42 |   margin: 0;
43 |   padding: 0;
44 | 
45 |   display: flex;
46 | }
47 | 
48 | nav.links li a {
49 |   position: relative;
50 |   display: block;
51 |   text-align: center;
52 |   padding: 8px 12px;
53 | 
54 |   --background: var(--background-alt);
55 | }
56 | 
57 | nav.links li a::after {
58 |   content: '';
59 |   position: absolute;
60 |   z-index: -1;
61 |   top: 75%;
62 |   left: 0.2em;
63 |   right: 0.2em;
64 |   bottom: 10%;
65 |   transition: top 200ms ease-out, background-color 200ms ease-out;
66 |   background-color: var(--background);
67 |   border-radius: 0.35em;
68 | }
69 | 
70 | nav.links li a:hover::after {
71 |   top: 10%;
72 |   background-color: var(--background);
73 | }
74 | 
75 | .router-link-active {
76 |   color: #00dc82;
77 | }
78 | nav.links li a.router-link-active::after {
79 |   top: 75%;
80 |   --background: var(--border);
81 | }
82 | </style>
83 | 


--------------------------------------------------------------------------------
/composables/domain-check.ts:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Ensures the domain is firebaseapp.com to avoid
 3 |  */
 4 | export function useDomainCheck() {
 5 |   onMounted(() => {
 6 |     if (process.env.NODE_ENV === 'production') {
 7 |       if (location.hostname.endsWith('.web.app')) {
 8 |         location.replace(location.href.replace('.web.app', '.firebaseapp.com'))
 9 |       }
10 |     }
11 |   })
12 | }
13 | 


--------------------------------------------------------------------------------
/composables/emojis.ts:
--------------------------------------------------------------------------------
  1 | export const emojiList = [
  2 |   '😄',
  3 |   '😃',
  4 |   '😀',
  5 |   '😊',
  6 |   '☺️',
  7 |   '😉',
  8 |   '😍',
  9 |   '😘',
 10 |   '😚',
 11 |   '😗',
 12 |   '😙',
 13 |   '😜',
 14 |   '😝',
 15 |   '😛',
 16 |   '😳',
 17 |   '😁',
 18 |   '😔',
 19 |   '😌',
 20 |   '😒',
 21 |   '😞',
 22 |   '😣',
 23 |   '😢',
 24 |   '😂',
 25 |   '😭',
 26 |   '😪',
 27 |   '😥',
 28 |   '😰',
 29 |   '😅',
 30 |   '😓',
 31 |   '😩',
 32 |   '😫',
 33 |   '😨',
 34 |   '😱',
 35 |   '😠',
 36 |   '😡',
 37 |   '😤',
 38 |   '😖',
 39 |   '😆',
 40 |   '😋',
 41 |   '😷',
 42 |   '😎',
 43 |   '😴',
 44 |   '😵',
 45 |   '😲',
 46 |   '😟',
 47 |   '😦',
 48 |   '😧',
 49 |   '😈',
 50 |   '👿',
 51 |   '😮',
 52 |   '😬',
 53 |   '😐',
 54 |   '😕',
 55 |   '😯',
 56 |   '😶',
 57 |   '😇',
 58 |   '😏',
 59 |   '😑',
 60 |   '👲',
 61 |   '👳',
 62 |   '👮',
 63 |   '👷',
 64 |   '💂',
 65 |   '👶',
 66 |   '👦',
 67 |   '👧',
 68 |   '👨',
 69 |   '👩',
 70 |   '👴',
 71 |   '👵',
 72 |   '👱',
 73 |   '👼',
 74 |   '👸',
 75 |   '😺',
 76 |   '😸',
 77 |   '😻',
 78 |   '😽',
 79 |   '😼',
 80 |   '🙀',
 81 |   '😿',
 82 |   '😹',
 83 |   '😾',
 84 |   '👹',
 85 |   '👺',
 86 |   '🙈',
 87 |   '🙉',
 88 |   '🙊',
 89 |   '💀',
 90 |   '👽',
 91 |   '💩',
 92 |   '🔥',
 93 |   '✨',
 94 |   '🌟',
 95 |   '💫',
 96 |   '💥',
 97 |   '💢',
 98 |   '💦',
 99 |   '💧',
100 |   '💤',
101 |   '💨',
102 |   '👂',
103 |   '👀',
104 |   '👃',
105 |   '👅',
106 |   '👄',
107 |   '👍',
108 |   '👎',
109 |   '👌',
110 |   '👊',
111 |   '✊',
112 |   '✌',
113 |   '👋',
114 |   '✋',
115 |   '👐',
116 |   '👆',
117 |   '👇',
118 |   '👉',
119 |   '👈',
120 |   '🙌',
121 |   '🙏',
122 |   '☝',
123 |   '👏',
124 |   '💪',
125 |   '🚶',
126 |   '🏃',
127 |   '💃',
128 |   '👫',
129 |   '👪',
130 |   '👬',
131 |   '👭',
132 |   '💏',
133 |   '💑',
134 |   '👯',
135 |   '🙆',
136 |   '🙅',
137 |   '💁',
138 |   '🙋',
139 |   '💆',
140 |   '💇',
141 |   '💅',
142 |   '👰',
143 |   '🙎',
144 |   '🙍',
145 |   '🙇',
146 |   '🎩',
147 |   '👑',
148 |   '👒',
149 |   '👟',
150 |   '👞',
151 |   '👡',
152 |   '👠',
153 |   '👢',
154 |   '👕',
155 |   '👔',
156 |   '👚',
157 |   '👗',
158 |   '🎽',
159 |   '👖',
160 |   '👘',
161 |   '👙',
162 |   '💼',
163 |   '👜',
164 |   '👝',
165 |   '👛',
166 |   '👓',
167 |   '🎀',
168 |   '🌂',
169 |   '💄',
170 |   '💛',
171 |   '💙',
172 |   '💜',
173 |   '💚',
174 |   '❤',
175 |   '💔',
176 |   '💗',
177 |   '💓',
178 |   '💕',
179 |   '💖',
180 |   '💞',
181 |   '💘',
182 |   '💌',
183 |   '💋',
184 |   '💍',
185 |   '💎',
186 |   '👤',
187 |   '👥',
188 |   '💬',
189 |   '👣',
190 |   '💭',
191 |   '🐶',
192 |   '🐺',
193 |   '🐱',
194 |   '🐭',
195 |   '🐹',
196 |   '🐰',
197 |   '🐸',
198 |   '🐯',
199 |   '🐨',
200 |   '🐻',
201 |   '🐷',
202 |   '🐽',
203 |   '🐮',
204 |   '🐗',
205 |   '🐵',
206 |   '🐒',
207 |   '🐴',
208 |   '🐑',
209 |   '🐘',
210 |   '🐼',
211 |   '🐧',
212 |   '🐦',
213 |   '🐤',
214 |   '🐥',
215 |   '🐣',
216 |   '🐔',
217 |   '🐍',
218 |   '🐢',
219 |   '🐛',
220 |   '🐝',
221 |   '🐜',
222 |   '🐞',
223 |   '🐌',
224 |   '🐙',
225 |   '🐚',
226 |   '🐠',
227 |   '🐟',
228 |   '🐬',
229 |   '🐳',
230 |   '🐋',
231 |   '🐄',
232 |   '🐏',
233 |   '🐀',
234 |   '🐃',
235 |   '🐅',
236 |   '🐇',
237 |   '🐉',
238 |   '🐎',
239 |   '🐐',
240 |   '🐓',
241 |   '🐕',
242 |   '🐖',
243 |   '🐁',
244 |   '🐂',
245 |   '🐲',
246 |   '🐡',
247 |   '🐊',
248 |   '🐫',
249 |   '🐪',
250 |   '🐆',
251 |   '🐈',
252 |   '🐩',
253 |   '🐾',
254 |   '💐',
255 |   '🌸',
256 |   '🌷',
257 |   '🍀',
258 |   '🌹',
259 |   '🌻',
260 |   '🌺',
261 |   '🍁',
262 |   '🍃',
263 |   '🍂',
264 |   '🌿',
265 |   '🌾',
266 |   '🍄',
267 |   '🌵',
268 |   '🌴',
269 |   '🌲',
270 |   '🌳',
271 |   '🌰',
272 |   '🌱',
273 |   '🌼',
274 |   '🌐',
275 |   '🌞',
276 |   '🌝',
277 |   '🌚',
278 |   '🌑',
279 |   '🌒',
280 |   '🌓',
281 |   '🌔',
282 |   '🌕',
283 |   '🌖',
284 |   '🌗',
285 |   '🌘',
286 |   '🌜',
287 |   '🌛',
288 |   '🌙',
289 |   '🌍',
290 |   '🌎',
291 |   '🌏',
292 |   '🌋',
293 |   '🌌',
294 |   '🌠',
295 |   '⭐',
296 |   '☀',
297 |   '⛅',
298 |   '☁',
299 |   '⚡',
300 |   '☔',
301 |   '❄',
302 |   '⛄',
303 |   '🌀',
304 |   '🌁',
305 |   '🌈',
306 |   '🌊',
307 |   '🎍',
308 |   '💝',
309 |   '🎎',
310 |   '🎒',
311 |   '🎓',
312 |   '🎏',
313 |   '🎆',
314 |   '🎇',
315 |   '🎐',
316 |   '🎑',
317 |   '🎃',
318 |   '👻',
319 |   '🎅',
320 |   '🎄',
321 |   '🎁',
322 |   '🎋',
323 |   '🎉',
324 |   '🎊',
325 |   '🎈',
326 |   '🎌',
327 |   '🔮',
328 |   '🎥',
329 |   '📷',
330 |   '📹',
331 |   '📼',
332 |   '💿',
333 |   '📀',
334 |   '💽',
335 |   '💾',
336 |   '💻',
337 |   '📱',
338 |   '☎',
339 |   '📞',
340 |   '📟',
341 |   '📠',
342 |   '📡',
343 |   '📺',
344 |   '📻',
345 |   '🔊',
346 |   '🔉',
347 |   '🔈',
348 |   '🔇',
349 |   '🔔',
350 |   '🔕',
351 |   '📢',
352 |   '📣',
353 |   '⏳',
354 |   '⌛',
355 |   '⏰',
356 |   '⌚',
357 |   '🔓',
358 |   '🔒',
359 |   '🔏',
360 |   '🔐',
361 |   '🔑',
362 |   '🔎',
363 |   '💡',
364 |   '🔦',
365 |   '🔆',
366 |   '🔅',
367 |   '🔌',
368 |   '🔋',
369 |   '🔍',
370 |   '🛁',
371 |   '🛀',
372 |   '🚿',
373 |   '🚽',
374 |   '🔧',
375 |   '🔩',
376 |   '🔨',
377 |   '🚪',
378 |   '🚬',
379 |   '💣',
380 |   '🔫',
381 |   '🔪',
382 |   '💊',
383 |   '💉',
384 |   '💰',
385 |   '💴',
386 |   '💵',
387 |   '💷',
388 |   '💶',
389 |   '💳',
390 |   '💸',
391 |   '📲',
392 |   '📧',
393 |   '📥',
394 |   '📤',
395 |   '✉',
396 |   '📩',
397 |   '📨',
398 |   '📯',
399 |   '📫',
400 |   '📪',
401 |   '📬',
402 |   '📭',
403 |   '📮',
404 |   '📦',
405 |   '📝',
406 |   '📄',
407 |   '📃',
408 |   '📑',
409 |   '📊',
410 |   '📈',
411 |   '📉',
412 |   '📜',
413 |   '📋',
414 |   '📅',
415 |   '📆',
416 |   '📇',
417 |   '📁',
418 |   '📂',
419 |   '✂',
420 |   '📌',
421 |   '📎',
422 |   '✒',
423 |   '✏',
424 |   '📏',
425 |   '📐',
426 |   '📕',
427 |   '📗',
428 |   '📘',
429 |   '📙',
430 |   '📓',
431 |   '📔',
432 |   '📒',
433 |   '📚',
434 |   '📖',
435 |   '🔖',
436 |   '📛',
437 |   '🔬',
438 |   '🔭',
439 |   '📰',
440 |   '🎨',
441 |   '🎬',
442 |   '🎤',
443 |   '🎧',
444 |   '🎼',
445 |   '🎵',
446 |   '🎶',
447 |   '🎹',
448 |   '🎻',
449 |   '🎺',
450 |   '🎷',
451 |   '🎸',
452 |   '👾',
453 |   '🎮',
454 |   '🃏',
455 |   '🎴',
456 |   '🀄',
457 |   '🎲',
458 |   '🎯',
459 |   '🏈',
460 |   '🏀',
461 |   '⚽',
462 |   '⚾',
463 |   '🎾',
464 |   '🎱',
465 |   '🏉',
466 |   '🎳',
467 |   '⛳',
468 |   '🚵',
469 |   '🚴',
470 |   '🏁',
471 |   '🏇',
472 |   '🏆',
473 |   '🎿',
474 |   '🏂',
475 |   '🏊',
476 |   '🏄',
477 |   '🎣',
478 |   '☕',
479 |   '🍵',
480 |   '🍶',
481 |   '🍼',
482 |   '🍺',
483 |   '🍻',
484 |   '🍸',
485 |   '🍹',
486 |   '🍷',
487 |   '🍴',
488 |   '🍕',
489 |   '🍔',
490 |   '🍟',
491 |   '🍗',
492 |   '🍖',
493 |   '🍝',
494 |   '🍛',
495 |   '🍤',
496 |   '🍱',
497 |   '🍣',
498 |   '🍥',
499 |   '🍙',
500 |   '🍘',
501 |   '🍚',
502 |   '🍜',
503 |   '🍲',
504 |   '🍢',
505 |   '🍡',
506 |   '🍳',
507 |   '🍞',
508 |   '🍩',
509 |   '🍮',
510 |   '🍦',
511 |   '🍨',
512 |   '🍧',
513 |   '🎂',
514 |   '🍰',
515 |   '🍪',
516 |   '🍫',
517 |   '🍬',
518 |   '🍭',
519 |   '🍯',
520 |   '🍎',
521 |   '🍏',
522 |   '🍊',
523 |   '🍋',
524 |   '🍒',
525 |   '🍇',
526 |   '🍉',
527 |   '🍓',
528 |   '🍑',
529 |   '🍈',
530 |   '🍌',
531 |   '🍐',
532 |   '🍍',
533 |   '🍠',
534 |   '🍆',
535 |   '🍅',
536 |   '🌽',
537 |   '🏠',
538 |   '🏡',
539 |   '🏫',
540 |   '🏢',
541 |   '🏣',
542 |   '🏥',
543 |   '🏦',
544 |   '🏪',
545 |   '🏩',
546 |   '🏨',
547 |   '💒',
548 |   '⛪',
549 |   '🏬',
550 |   '🏤',
551 |   '🌇',
552 |   '🌆',
553 |   '🏯',
554 |   '🏰',
555 |   '⛺',
556 |   '🏭',
557 |   '🗼',
558 |   '🗾',
559 |   '🗻',
560 |   '🌄',
561 |   '🌅',
562 |   '🌃',
563 |   '🗽',
564 |   '🌉',
565 |   '🎠',
566 |   '🎡',
567 |   '⛲',
568 |   '🎢',
569 |   '🚢',
570 |   '⛵',
571 |   '🚤',
572 |   '🚣',
573 |   '⚓',
574 |   '🚀',
575 |   '✈',
576 |   '💺',
577 |   '🚁',
578 |   '🚂',
579 |   '🚊',
580 |   '🚉',
581 |   '🚞',
582 |   '🚆',
583 |   '🚄',
584 |   '🚅',
585 |   '🚈',
586 |   '🚇',
587 |   '🚝',
588 |   '🚋',
589 |   '🚃',
590 |   '🚎',
591 |   '🚌',
592 |   '🚍',
593 |   '🚙',
594 |   '🚘',
595 |   '🚗',
596 |   '🚕',
597 |   '🚖',
598 |   '🚛',
599 |   '🚚',
600 |   '🚨',
601 |   '🚓',
602 |   '🚔',
603 |   '🚒',
604 |   '🚑',
605 |   '🚐',
606 |   '🚲',
607 |   '🚡',
608 |   '🚟',
609 |   '🚠',
610 |   '🚜',
611 |   '💈',
612 |   '🚏',
613 |   '🎫',
614 |   '🚦',
615 |   '🚥',
616 |   '⚠',
617 |   '🚧',
618 |   '🔰',
619 |   '⛽',
620 |   '🏮',
621 |   '🎰',
622 |   '♨',
623 |   '🗿',
624 |   '🎪',
625 |   '🎭',
626 |   '📍',
627 |   '🚩',
628 |   '⬆',
629 |   '⬇',
630 |   '⬅',
631 |   '➡',
632 |   '🔠',
633 |   '🔡',
634 |   '🔤',
635 |   '↗',
636 |   '↖',
637 |   '↘',
638 |   '↙',
639 |   '↔',
640 |   '↕',
641 |   '🔄',
642 |   '◀',
643 |   '▶',
644 |   '🔼',
645 |   '🔽',
646 |   '↩',
647 |   '↪',
648 |   'ℹ',
649 |   '⏪',
650 |   '⏩',
651 |   '⏫',
652 |   '⏬',
653 |   '⤵',
654 |   '⤴',
655 |   '🆗',
656 |   '🔀',
657 |   '🔁',
658 |   '🔂',
659 |   '🆕',
660 |   '🆙',
661 |   '🆒',
662 |   '🆓',
663 |   '🆖',
664 |   '📶',
665 |   '🎦',
666 |   '🈁',
667 |   '🈯',
668 |   '🈳',
669 |   '🈵',
670 |   '🈴',
671 |   '🈲',
672 |   '🉐',
673 |   '🈹',
674 |   '🈺',
675 |   '🈶',
676 |   '🈚',
677 |   '🚻',
678 |   '🚹',
679 |   '🚺',
680 |   '🚼',
681 |   '🚾',
682 |   '🚰',
683 |   '🚮',
684 |   '🅿',
685 |   '♿',
686 |   '🚭',
687 |   '🈷',
688 |   '🈸',
689 |   '🈂',
690 |   'Ⓜ',
691 |   '🛂',
692 |   '🛄',
693 |   '🛅',
694 |   '🛃',
695 |   '🉑',
696 |   '㊙',
697 |   '㊗',
698 |   '🆑',
699 |   '🆘',
700 |   '🆔',
701 |   '🚫',
702 |   '🔞',
703 |   '📵',
704 |   '🚯',
705 |   '🚱',
706 |   '🚳',
707 |   '🚷',
708 |   '🚸',
709 |   '⛔',
710 |   '✳',
711 |   '❇',
712 |   '❎',
713 |   '✅',
714 |   '✴',
715 |   '💟',
716 |   '🆚',
717 |   '📳',
718 |   '📴',
719 |   '🅰',
720 |   '🅱',
721 |   '🆎',
722 |   '🅾',
723 |   '💠',
724 |   '➿',
725 |   '♻',
726 |   '♈',
727 |   '♉',
728 |   '♊',
729 |   '♋',
730 |   '♌',
731 |   '♍',
732 |   '♎',
733 |   '♏',
734 |   '♐',
735 |   '♑',
736 |   '♒',
737 |   '♓',
738 |   '⛎',
739 |   '🔯',
740 |   '🏧',
741 |   '💹',
742 |   '💲',
743 |   '💱',
744 |   '©',
745 |   '®',
746 |   '™',
747 |   '〽',
748 |   '〰',
749 |   '🔝',
750 |   '🔚',
751 |   '🔙',
752 |   '🔛',
753 |   '🔜',
754 |   '❌',
755 |   '⭕',
756 |   '❗',
757 |   '❓',
758 |   '❕',
759 |   '❔',
760 |   '🔃',
761 |   '🕛',
762 |   '🕧',
763 |   '🕐',
764 |   '🕜',
765 |   '🕑',
766 |   '🕝',
767 |   '🕒',
768 |   '🕞',
769 |   '🕓',
770 |   '🕟',
771 |   '🕔',
772 |   '🕠',
773 |   '🕕',
774 |   '🕖',
775 |   '🕗',
776 |   '🕘',
777 |   '🕙',
778 |   '🕚',
779 |   '🕡',
780 |   '🕢',
781 |   '🕣',
782 |   '🕤',
783 |   '🕥',
784 |   '🕦',
785 |   '✖',
786 |   '➕',
787 |   '➖',
788 |   '➗',
789 |   '♠',
790 |   '♦',
791 |   '♥',
792 |   '♣',
793 |   '💮',
794 |   '💯',
795 |   '✔',
796 |   '☑',
797 |   '🔘',
798 |   '🔗',
799 |   '➰',
800 |   '🔱',
801 |   '🔲',
802 |   '🔳',
803 |   '◼',
804 |   '◻',
805 |   '◾',
806 |   '◽',
807 |   '▪',
808 |   '▫',
809 |   '🔺',
810 |   '⬜',
811 |   '⬛',
812 |   '⚫',
813 |   '⚪',
814 |   '🔴',
815 |   '🔵',
816 |   '🔻',
817 |   '🔶',
818 |   '🔷',
819 |   '🔸',
820 |   '🔹',
821 | ]
822 | 
823 | export function getRandomEmoji() {
824 |   return emojiList[Math.floor(Math.random() * emojiList.length)]
825 | }
826 | 
827 | export function useRandomEmoji() {
828 |   const emoji = useState('randomEmoji', () => getRandomEmoji())
829 | 
830 |   function randomize() {
831 |     emoji.value = getRandomEmoji()
832 |   }
833 | 
834 |   return { emoji, randomize }
835 | }
836 | 


--------------------------------------------------------------------------------
/composables/relative-time.ts:
--------------------------------------------------------------------------------
 1 | import { MaybeRef, useNow } from '@vueuse/core'
 2 | import { Timestamp } from 'firebase/firestore'
 3 | 
 4 | export function useRelativeTime(when: MaybeRef<Timestamp | undefined | null>) {
 5 |   const now = useNow()
 6 | 
 7 |   return computed(() =>
 8 |     unref(when) == null
 9 |       ? 'never'
10 |       : relativeSeconds(now.value.getTime(), unref(when)!.seconds * 1000)
11 |   )
12 | }
13 | 
14 | // time formatting
15 | const rtf = new Intl.RelativeTimeFormat('en', { style: 'long' })
16 | function relativeSeconds(now: number, time: number) {
17 |   const sinceDate = Math.min(
18 |     // only allow negative values
19 |     -0,
20 |     Math.floor((time - now) / 1000)
21 |   )
22 |   return rtf.format(sinceDate, 'seconds')
23 | }
24 | 


--------------------------------------------------------------------------------
/firebase.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "firestore": {
 3 |     "rules": "firestore.rules",
 4 |     "indexes": "firestore.indexes.json"
 5 |   },
 6 |   "hosting": {
 7 |     "public": ".output/public",
 8 |     "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
 9 |     "rewrites": [
10 |       {
11 |         "source": "**",
12 |         "destination": "/index.html"
13 |       }
14 |     ]
15 |   }
16 | }
17 | 


--------------------------------------------------------------------------------
/firestore.indexes.json:
--------------------------------------------------------------------------------
1 | {
2 |   "indexes": [],
3 |   "fieldOverrides": []
4 | }
5 | 


--------------------------------------------------------------------------------
/firestore.rules:
--------------------------------------------------------------------------------
 1 | rules_version = '2';
 2 | service cloud.firestore {
 3 |   match /databases/{database}/documents {
 4 | 
 5 |     match /panelEmojis/{userId} {
 6 |       allow read;
 7 | 
 8 |       function isOwner() {
 9 |         return request.auth.uid == userId;
10 |       }
11 | 
12 |       function hasValidData() {
13 |         return ['createdAt', 'content', 'pos', 'revision']
14 |             .toSet()
15 |             .difference(request.resource.data.keys().toSet())
16 |             .size() == 0
17 |           && request.resource.data.createdAt == request.time
18 |           && request.resource.data.pos is int
19 |           && request.resource.data.content is string
20 |           && request.resource.data.content.size() <= 2;
21 |       }
22 | 
23 |       function hasValidUserInfo() {
24 |         return request.resource.data.photoURL is string
25 |           && request.resource.data.displayName is string;
26 |       }
27 | 
28 |       allow create: if isOwner()
29 |         && hasValidData()
30 |         && hasValidUserInfo()
31 |         && request.resource.data.revision == 1
32 |       ;
33 | 
34 |       allow update: if isOwner()
35 |         && hasValidData()
36 |         // only allow one write every 5 seconds
37 |         && request.time > resource.data.createdAt + duration.value(5, 's')
38 |         // only allow increments
39 |         && request.resource.data.revision == resource.data.revision + 1
40 |       ;
41 | 
42 |       allow delete: if isOwner();
43 |     }
44 | 
45 |     // disable all other access
46 |     match /{document=**} {
47 |       allow read, write: if false;
48 |     }
49 |   }
50 | }
51 | 


--------------------------------------------------------------------------------
/middleware/authenticated.ts:
--------------------------------------------------------------------------------
1 | export default defineNuxtRouteMiddleware(async (to) => {
2 |   const user = await getCurrentUser()
3 |   if (!user) {
4 |     return navigateTo({ path: '/login', query: { redirect: to.fullPath } })
5 |   }
6 | })
7 | 


--------------------------------------------------------------------------------
/nuxt.config.ts:
--------------------------------------------------------------------------------
 1 | // https://nuxt.com/docs/api/configuration/nuxt-config
 2 | export default defineNuxtConfig({
 3 |   app: {
 4 |     head: {
 5 |       titleTemplate: 'Emoji Panel - %s',
 6 |       link: [
 7 |         {
 8 |           href: 'https://cdn.jsdelivr.net/npm/water.css@2/out/water.css',
 9 |           rel: 'stylesheet',
10 |         },
11 |       ],
12 |     },
13 |   },
14 | 
15 |   css: ['~/assets/styles.css'],
16 | 
17 |   modules: ['nuxt-vuefire'],
18 | 
19 |   vuefire: {
20 |     auth: true,
21 |     config: {
22 |       apiKey: 'AIzaSyBwmo761a-X3AV-2foLGWCpg2vTbrB7NjE',
23 |       authDomain: 'emoji-panel-test-1.firebaseapp.com',
24 |       projectId: 'emoji-panel-test-1',
25 |       storageBucket: 'emoji-panel-test-1.appspot.com',
26 |       messagingSenderId: '743661406627',
27 |       appId: '1:743661406627:web:cd491cf645094383b33216',
28 |     },
29 |   },
30 | 
31 |   // TODO: maybe not needed for the demo
32 |   typescript: {
33 |     shim: false,
34 |   },
35 | })
36 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "private": true,
 3 |   "scripts": {
 4 |     "build": "nuxt build",
 5 |     "dev": "nuxt dev",
 6 |     "generate": "nuxt generate",
 7 |     "preview": "nuxt preview",
 8 |     "postinstall": "nuxt prepare"
 9 |   },
10 |   "dependencies": {
11 |     "@vueuse/core": "^9.11.0",
12 |     "firebase": "^9.15.0",
13 |     "nuxt": "^3.0.0",
14 |     "nuxt-vuefire": "^0.1.5",
15 |     "vuefire": "^3.0.1"
16 |   },
17 |   "devDependencies": {
18 |     "@firebase/app-types": "^0.9.0",
19 |     "firebase-admin": "^11.4.1"
20 |   }
21 | }
22 | 


--------------------------------------------------------------------------------
/pages/index.vue:
--------------------------------------------------------------------------------
  1 | <script lang="ts" setup>
  2 | import {
  3 |   collection,
  4 |   doc,
  5 |   increment,
  6 |   orderBy,
  7 |   query,
  8 |   serverTimestamp,
  9 |   setDoc,
 10 |   Timestamp,
 11 |   updateDoc,
 12 | } from 'firebase/firestore'
 13 | import { VueFirestoreDocumentData } from 'vuefire'
 14 | import { useTimeout } from '@vueuse/core'
 15 | 
 16 | useHead({
 17 |   title: 'Collaborative Emoji Art',
 18 | })
 19 | definePageMeta({
 20 |   middleware: ['authenticated'],
 21 | })
 22 | 
 23 | interface PanelEmoji {
 24 |   id: string
 25 |   content: string
 26 |   createdAt: Timestamp
 27 |   displayName: string | null
 28 |   photoURL: string | null
 29 |   pos: number
 30 |   revision: number
 31 | }
 32 | type PanelEmojiWithId = VueFirestoreDocumentData<PanelEmoji>
 33 | 
 34 | const db = useFirestore()
 35 | const user = useCurrentUser()
 36 | const emojisRef = collection(db, 'panelEmojis')
 37 | 
 38 | const WIDTH = 15
 39 | const HEIGHT = 15
 40 | 
 41 | const emojis = useCollection<PanelEmoji>(
 42 |   query(emojisRef, orderBy('createdAt', 'asc')),
 43 |   {
 44 |     ssrKey: 'emojis',
 45 |   }
 46 | )
 47 | 
 48 | // good part of vue: easy to rework the data
 49 | const emojisByPos = computed(() => {
 50 |   const result: PanelEmojiWithId[] = Array(WIDTH * HEIGHT)
 51 |   emojis.value.forEach((emoji) => {
 52 |     result[emoji.pos] = emoji
 53 |   })
 54 | 
 55 |   return result
 56 | })
 57 | 
 58 | const lastCreatedEmoji = computed(() => emojis.value.at(-1))
 59 | const lastCreationRelativeTime = useRelativeTime(
 60 |   computed(() => lastCreatedEmoji.value?.createdAt)
 61 | )
 62 | 
 63 | const myEmojiRef = computed(() => user.value && doc(emojisRef, user.value.uid))
 64 | const myEmoji = useDocument<PanelEmoji>(myEmojiRef)
 65 | 
 66 | const { ready: canCreateNewEmoji, start } = useTimeout(5000, {
 67 |   controls: true,
 68 |   immediate: false,
 69 | })
 70 | 
 71 | const { emoji: newContent, randomize: generateNewContent } = useRandomEmoji()
 72 | const currentHover = ref(-1)
 73 | 
 74 | async function createEmoji(pos: number) {
 75 |   if (!user.value || !canCreateNewEmoji.value || !myEmojiRef.value) return
 76 | 
 77 |   try {
 78 |     // check if the user already created an emoji before
 79 |     if (myEmoji.value != null) {
 80 |       await updateDoc(myEmojiRef.value, {
 81 |         createdAt: serverTimestamp(),
 82 |         revision: increment(1),
 83 |         pos,
 84 |         content: newContent.value,
 85 |       })
 86 |     } else {
 87 |       await setDoc(myEmojiRef.value, {
 88 |         displayName: user.value.displayName || 'anonymous',
 89 |         photoURL: user.value.photoURL || '',
 90 |         createdAt: serverTimestamp(),
 91 |         revision: increment(1),
 92 |         pos,
 93 |         content: newContent.value,
 94 |       })
 95 |     }
 96 | 
 97 |     // wait 5s before allowing a new creation
 98 |     start()
 99 |   } catch (error) {
100 |     console.error(error)
101 |   }
102 |   currentHover.value = -1
103 | }
104 | </script>
105 | 
106 | <template>
107 |   <main>
108 |     <h2>Emoji Panel</h2>
109 | 
110 |     <p>
111 |       Currently we have
112 |       <strong
113 |         >{{ emojis.length }} contribution{{
114 |           emojis.length == 1 ? '' : 's'
115 |         }}</strong
116 |       >.
117 |       <br />
118 | 
119 |       <template v-if="myEmoji"
120 |         >Your last emoji is {{ myEmoji.content }} after
121 |         {{ myEmoji.revision }} updates.
122 |         <br />
123 |       </template>
124 |     </p>
125 | 
126 |     <button class="emoji" @click="generateNewContent()" style="font-size: 2rem">
127 |       {{ newContent }}
128 |     </button>
129 | 
130 |     <p v-if="lastCreatedEmoji">
131 |       <img
132 |         class="mini-avatar"
133 |         referrerpolicy="no-referrer"
134 |         :src="
135 |           lastCreatedEmoji.photoURL ||
136 |           `https://i.pravatar.cc/150?u=${lastCreatedEmoji.id}`
137 |         "
138 |         alt="Avatar"
139 |       />
140 |       created {{ lastCreatedEmoji.content }}
141 |       <ClientOnly>
142 |         <strong>{{ lastCreationRelativeTime }}</strong>
143 |       </ClientOnly>
144 |       after
145 |       {{ lastCreatedEmoji.revision }} updates.
146 |     </p>
147 | 
148 |     <transition-group tag="div" class="emoji-grid" name="emoji-grid">
149 |       <button
150 |         class="emoji-button emoji"
151 |         :class="{ 'emoji-button--mine': emoji && emoji.id === user?.uid }"
152 |         v-for="(emoji, pos) in emojisByPos"
153 |         :key="emoji?.id || pos"
154 |         @click="createEmoji(pos)"
155 |         @mouseover="canCreateNewEmoji && (currentHover = pos)"
156 |         @mouseleave="currentHover = -1"
157 |         :aria-disabled="!canCreateNewEmoji"
158 |       >
159 |         {{ currentHover === pos ? newContent : emoji?.content }}
160 |       </button>
161 |     </transition-group>
162 | 
163 |     <p v-if="!canCreateNewEmoji">
164 |       You added an emoji less than 5 seconds ago. Wait a bit to create a new one
165 |       😊
166 |     </p>
167 |     <p v-else>Click on any box to add your very own emoji!</p>
168 |   </main>
169 | </template>
170 | 
171 | <style>
172 | .emoji-grid {
173 |   display: grid;
174 |   margin: 1rem 0;
175 |   grid-template-columns: repeat(v-bind(WIDTH), 1.2em);
176 |   grid-template-rows: repeat(v-bind(HEIGHT), 1.2em);
177 |   grid-column-gap: 4px;
178 |   grid-row-gap: 4px;
179 |   /* font-size: 2rem; */
180 | 
181 |   user-select: none;
182 | }
183 | 
184 | @media screen and (min-width: 426px) {
185 |   .emoji-grid {
186 |     font-size: 2rem;
187 |   }
188 | }
189 | 
190 | .emoji-grid:hover {
191 |   cursor: crosshair;
192 | }
193 | 
194 | .emoji-button {
195 |   /* resets */
196 |   background-color: transparent;
197 |   padding: 0;
198 |   margin: 0;
199 | 
200 |   display: flex;
201 |   align-items: center;
202 |   justify-content: center;
203 |   transition: background-color 0.3s ease;
204 |   border-radius: 5px;
205 |   border: solid 1px var(--border);
206 | }
207 | 
208 | .emoji-button:focus {
209 |   box-shadow: none;
210 | }
211 | 
212 | .emoji-button--mine {
213 |   background-color: var(--highlight);
214 | }
215 | 
216 | .emoji-button:hover {
217 |   background-color: var(--selection);
218 | }
219 | .emoji-button:active {
220 |   transform: translateY(2px);
221 | }
222 | .emoji-button[aria-disabled='true']:hover {
223 |   cursor: not-allowed;
224 | }
225 | 
226 | .emoji-grid-move,
227 | .emoji-grid-enter-active,
228 | .emoji-grid-leave-active {
229 |   transition: all 500ms var(--ease-bezier);
230 | }
231 | .emoji-grid-enter-active {
232 |   z-index: 10;
233 | }
234 | .emoji-grid-move {
235 |   z-index: 15;
236 | }
237 | 
238 | .emoji-grid-enter-from:not(:empty) {
239 |   transform: scale(3.5);
240 | }
241 | 
242 | .emoji-grid-enter-from,
243 | /* both from and to to remove the leaving animation */
244 | .emoji-grid-leave-from,
245 | .emoji-grid-leave-to {
246 |   opacity: 0;
247 | }
248 | 
249 | .emoji-grid-leave-active {
250 |   position: absolute;
251 | }
252 | </style>
253 | 


--------------------------------------------------------------------------------
/pages/login.vue:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | import { GoogleAuthProvider } from 'firebase/auth'
 3 | export const googleAuthProvider = new GoogleAuthProvider()
 4 | </script>
 5 | 
 6 | <script lang="ts" setup>
 7 | import { signInAnonymously, signInWithRedirect, signOut } from 'firebase/auth'
 8 | import { useCurrentUser, useFirebaseAuth } from 'vuefire'
 9 | 
10 | useHead({
11 |   title: 'Login',
12 | })
13 | 
14 | const auth = useFirebaseAuth()! // only exists on client side
15 | const user = useCurrentUser()
16 | 
17 | function signinRedirect() {
18 |   return signInWithRedirect(auth, googleAuthProvider)
19 | }
20 | </script>
21 | 
22 | <template>
23 |   <h2>Login</h2>
24 | 
25 |   <template v-if="user === undefined">
26 |     <p>Loading...</p>
27 |   </template>
28 | 
29 |   <template v-else>
30 |     <p>Choose a signin method:</p>
31 | 
32 |     <div v-if="$route.query.redirect" class="message-box">
33 |       <p>
34 |         Please login to access <code>{{ $route.query.redirect }}</code
35 |         >.
36 |       </p>
37 |     </div>
38 | 
39 |     <template v-if="user">
40 |       <p>
41 |         You are currently logged in as:
42 |         <img
43 |           class="mini-avatar"
44 |           :src="user.photoURL || `https://i.pravatar.cc/150?u=${user.uid}`"
45 |           referrerpolicy="no-referrer"
46 |         />
47 |         <span>{{ user.displayName || 'Anonymous' }}.</span>
48 |       </p>
49 | 
50 |       <button @click="signOut(auth)">Logout</button>
51 |     </template>
52 | 
53 |     <template v-else>
54 |       <button @click="signinRedirect()">Sign in with Google</button>
55 |       <button @click="signInAnonymously(auth)">Sign in anonymously</button>
56 |     </template>
57 |   </template>
58 | </template>
59 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 |   // https://nuxt.com/docs/guide/concepts/typescript
3 |   "extends": "./.nuxt/tsconfig.json"
4 | }
5 | 


--------------------------------------------------------------------------------