This pull request is being automatically deployed with ZEIT Now (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://zeit.co/vjeux/excalidraw/f51tvc7k8
✅ Preview: https://excalidraw-git-jsjoeio-fix-font-file.vjeux.now.sh

Tested using both Facebook's Sharing Debugger and Twitter's Card Validator using the Now preview URL but not getting the expected results.

Twitter:

Facebook:

🤞🏼These results should change once merged into production. Happy to follow up and test and make changes if needed.

Recommend adding og:image:width and og:image:height and equivalent twitter ones as well.

"Using these tags will specify the image dimensions to the crawler so that it can render the image immediately without having to asynchronously download and process it."
https://developers.facebook.com/docs/sharing/best-practices/

Just checked the font, the rendering of ! is perfect now

Thanks for the suggestion @pshihn! I'll add those in now

Okay, I think it should be good now if someone wants to review it again.

Re: @pshihn

equivalent twitter ones as well

I had the Twitter meta tags in there but @lipis suggested opting for the og:image instead.

From the quick research I did, I think it should be fine.

If an og:type, og:title and og:description exist in the markup but twitter:card is absent, then a summary card may be rendered.

Source

Maybe also update the image in the readme with this one?

Maybe also update the image in the readme with this one?

Why not?!

I'd center the "Sketch hand-drawn like diagrams" and 👌🏼

Maybe also update the image in the readme with this one?

Good idea, done.

I'd center the "Sketch hand-drawn like diagrams"

Done!

Let's ship this and see if the results of the preview cards change!

@jsjoeio the image doesn't show up

@Fausto95 you're right, i'm seeing the same thing

I'll see if I can figure it out. The frustrating part is you can't use the Twitter card validator on localhost (for obvious reasons). I saw someone once suggest using ngrok but I tried that and ran into a canvas security error. Open to suggestions if you have any

I wonder if it has anything to do with it being a relative path...

AH-HA - look what I found:

Documentation have nothing about it, but relative URLs will not work, only full URL including scheme works

https://stackoverflow.com/a/9858694/3015595

I hope it does haha.
Let's try it out