Feature: Add node emoji to highlight cards

[bdougie]

Type of feature

🍕 Feature

Current behavior

Emojis are not being generated in the card preview.

https://insights.opensauced.pizza/feed/171

Suggested solution

Use node-emoji wrapper for copy. We use it in open-sauced/hot

https://github.com/open-sauced/hot/pulls?q=is%3Apr+emoji+is%3Aclosed

Additional context

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

Contributing Docs

• I agree to follow this project's Contribution Docs

[a0m0rajab]

Clicking on the link in the issue gave me this issue:

Runtime.UnhandledPromiseRejection: TypeError: fetch failed
    at process.<anonymous> (file:///var/runtime/index.mjs:1189:17)
    at process.emit (node:events:525:35)
    at process.emit (node:domain:489:12)
    at emit (node:internal/process/promises:140:20)
    at processPromiseRejections (node:internal/process/promises:274:27)
    at processTicksAndRejections (node:internal/process/task_queues:97:32)

Runtime.UnhandledPromiseRejection - TypeError: fetch failed

Netlify internal ID: 01H5YKK2BXRAP2QXDVZ283Y20B

Refreshing the page solved the issue.

[a0m0rajab]

This is the result I got when I paste the link on FaceBook

[a0m0rajab]

This is the related component in this repo:

opengraph/src/social-card/templates/highlight-card.template.ts

Line 21 in bf8992e

${body.length > 108 ? `${body.slice(0, 108)}...` : body}

This is an example of fixing it based on the suggestion in the issue:
https://github.com/open-sauced/hot/pull/449/files

[a0m0rajab]

I worked on this and used node-emoji but it seems not to work, not sure if it's only on my PC, here is the code:
https://github.com/a0m0rajab/opengraph/tree/feat-add-emoji

But one of the things that I got curious about is the HTML/image convertor: the solution might be there:
https://github.com/vercel/satori#dynamically-load-emojis-and-fonts

I will do further testing later.

[a0m0rajab]

Satory/Vercel is using an API/CDN to get the SVG of the emoji:
https://github.com/vercel/satori/blob/2e8dcb486f3dadeb6fc2e8790cb822a72893a21a/playground/pages/index.tsx#L102

We might need to implement something similar:

https://github.com/vercel/satori/blob/2e8dcb486f3dadeb6fc2e8790cb822a72893a21a/playground/utils/twemoji.ts

I will stop here now and check it at another time.

[bdougie]

Clicking on the link in the issue gave me this issue:

Runtime.UnhandledPromiseRejection: TypeError: fetch failed
    at process.<anonymous> (file:///var/runtime/index.mjs:1189:17)
    at process.emit (node:events:525:35)
    at process.emit (node:domain:489:12)
    at emit (node:internal/process/promises:140:20)
    at processPromiseRejections (node:internal/process/promises:274:27)
    at processTicksAndRejections (node:internal/process/task_queues:97:32)

Runtime.UnhandledPromiseRejection - TypeError: fetch failed

Netlify internal ID: 01H5YKK2BXRAP2QXDVZ283Y20B

Refreshing the page solved the issue.

This is do to the image generation failing because the data is not ready, I believe. Refreshing hits the cache. We will honestly need to look into using an edge function for all of this in the future.

That work is being explored here. open-sauced/app#1400

I will look at this deeper on Monday. Interesting that nore-emoji did not work in this case.

[a0m0rajab]

Thank you for that! Looking forward to read your review.

[a0m0rajab]

Shower thoughts: This issue could be a great case study for why you need to provide a suggestion to your issue.
The suggestion that you @bdougie provided saved a couple of hours (between 2-3 hours) of trial and error and debugging, since the node-emoji worked on other project it proved to me that the issue is not in the HTML/React part of the code! Otherwise, it would be hard to get out of the rabbit hole.

[bdougie]

Indeed. I need to get in more issues and make proper suggestions.

Hoping we can start coordinating more triaging with the team.

[a0m0rajab]

I would like to help in case if I can do anything there, when the PR get accepted I am thinking to write a blog about this. Focusing on the value of providing suggested solutions.

[github-actions]

🎉 This issue has been resolved in version 2.4.0-beta.1 🎉

The release is available on:

• GitHub release
• ghcr.io container (@beta dist-tag)

Your semantic-release bot 📦🚀

[github-actions]

🎉 This issue has been resolved in version 2.4.0 🎉

The release is available on:

• GitHub release
• ghcr.io container (@latest dist-tag)

Your semantic-release bot 📦🚀