Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(Excalidraw): Add support for Excalidraw #122

Open
wants to merge 4 commits into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
65 changes: 59 additions & 6 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -25,12 +25,12 @@
## The problem

Trying to embed well known services (like [CodePen][codepen],
[CodeSandbox][codesandbox], [GIPHY][giphy], [Instagram][instagram],
[Lichess][lichess], [Pinterest][pinterest], [Slides][slides],
[SoundCloud][soundcloud], [Spotify][spotify], [Streamable][streamable],
[Twitch][twitch], [Twitter][twitter] or [YouTube][youtube]) into your
[Gatsby][gatsby] website can be hard, since you have to know how this needs to
be done for all of these different services.
[CodeSandbox][codesandbox], [Excalidraw][excalidraw], [GIPHY][giphy],
[Instagram][instagram], [Lichess][lichess], [Pinterest][pinterest],
[Slides][slides], [SoundCloud][soundcloud], [Spotify][spotify],
[Streamable][streamable], [Twitch][twitch], [Twitter][twitter] or
[YouTube][youtube]) into your [Gatsby][gatsby] website can be hard, since you
have to know how this needs to be done for all of these different services.

## This solution

Expand All @@ -49,6 +49,7 @@ empty lines) and replace it with the proper embed-code.
- [Supported services](#supported-services)
- [CodePen](#codepen)
- [CodeSandbox](#codesandbox)
- [Excalidraw](#excalidraw)
- [GIPHY](#giphy)
- [Instagram](#instagram)
- [Lichess](#lichess)
Expand Down Expand Up @@ -209,6 +210,57 @@ https://codesandbox.io/s/ynn88nx9x?view=split

</details>

### Excalidraw

#### Usage

```md
https://excalidraw.com/#json=5882351917727744,hCHWNykp-VOHM8S0cV5psw
```

<details>
<summary><b>Result</b></summary>

```html
<a
style="box-shadow: none"
href="https://excalidraw.com/#json=5882351917727744,hCHWNykp-VOHM8S0cV5psw"
>
<svg
role="img"
aria-label="Excalidraw drawing"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 202 202"
>
<!-- svg-source:excalidraw -->
<defs>
<style>
@font-face {
font-family: 'Virgil';
src: url('https://excalidraw.com/FG_Virgil.woff2');
}
@font-face {
font-family: 'Cascadia';
src: url('https://excalidraw.com/Cascadia.woff2');
}
</style>
</defs>
<rect x="0" y="0" width="202" height="202" fill="#ffffff"></rect>
<g transform="translate(10 10) rotate(0 91 91)">
<path
d="M53.07633632077433 8.601300083646208 C63.121486059690454 2.422918619984636, 77.33296850064588 0.018940392172360987, 89.60919700362075 -0.06200743103180173 C101.88542550659562 -0.14295525423596445, 115.61470506571268 3.309890508262047, 126.73370733862359 8.115613144421232 C137.8527096115345 12.921335780580417, 148.13976317691697 19.963922114473846, 156.32321064108618 28.77232838592331 C164.50665810525538 37.58073465737277, 171.48423023261753 49.674143194439914, 175.83439212363874 60.96605077311803 C180.18455401465994 72.25795835179613, 183.2710283526084 84.40338263585139, 182.42418198721333 96.52377385799198 C181.57733562181826 108.64416508013258, 176.42676102744676 122.95697493609364, 170.75331393126834 133.6883981059616 C165.07986683508992 144.41982127582955, 157.71847152608854 153.4233235796702, 148.38349941014286 160.91231287719967 C139.04852729419719 168.40130217472912, 126.52211597332538 175.31015104381416, 114.74348123559433 178.62233389113834 C102.96484649786328 181.93451673846252, 89.84765882194327 182.53279917486802, 77.71169098375653 180.7854099611447 C65.57572314556978 179.03802074742137, 52.381283544061546 174.4358103992153, 41.927674206473846 168.13799860879834 C31.474064868886146 161.84018681838137, 21.691693245499238 153.07945173326308, 14.99003495823034 142.99853921864292 C8.28837667096144 132.91762670402275, 3.7759215930305245 119.75703019964666, 1.7177244828604614 107.65252352107734 C-0.3404726273096017 95.54801684250802, -0.2142970884240918 82.11544158165904, 2.6408522972099604 70.37149914722696 C5.496001682844012 58.62755671279486, 11.745102719386399 46.98474790528368, 18.848620796664775 37.1888689144848 C25.952138873943152 27.392989923685917, 38.30873530017378 16.899744148285716, 45.261960760880214 11.596225202433644 C52.21518622158665 6.29270625658157, 57.05269210501028 6.586644480564355, 60.56797356090339 5.367755239372357 C64.0832550167965 4.1488659981803595, 66.10463028444848 2.8217840355375783, 66.35364949623887 4.2828897552816585 M67.21627029592412 2.504910306064062 C78.14281999167808 -1.9948945452844553, 92.9546044656805 -1.2421517620839304, 104.96221362659993 0.8625956868542204 C116.96982278751936 2.967343135792371, 129.1056889785416 8.874572836980459, 139.26192526144072 15.133394999692968 C149.41816154433985 21.392217162405476, 159.0763697019205 28.45799342629718, 165.89963132399464 38.41552866312928 C172.72289294606878 48.37306389996138, 178.03106171424773 62.553345153588744, 180.2014949938856 74.87860642068557 C182.37192827352348 87.2038676877824, 181.49324567301292 100.47216677890391, 178.92223100182196 112.36709626571026 C176.351216330631 124.2620257525166, 172.00589374808087 136.58594855524564, 164.77540696673975 146.24818334152363 C157.54492018539864 155.91041812780162, 146.3782787120463 164.2574264130463, 135.53931031377533 170.34050498337825 C124.70034191550437 176.42358355371022, 111.49869305291756 181.7319851803843, 99.74159657711397 182.74665476351538 C87.98450010131037 183.76132434664646, 76.26556490346259 180.31833826818269, 64.99673145895373 176.4285224821648 C53.727898014444875 172.5387066961469, 41.7535957616762 167.22306873207333, 32.12859591006084 159.4077600474081 C22.503596058445474 151.59245136274285, 12.776081345583108 140.46179407589617, 7.246732349261549 129.53667037417338 C1.71738335293999 118.61154667245059, -0.9779739934788481 105.84087637615268, -1.047498067868517 93.85701783707133 C-1.117022142258186 81.87315929798997, 1.934090153593135 69.07578015522725, 6.829587902923535 57.633519139685255 C11.725085652253934 46.19125812414326, 19.452931991567887 33.673251075136534, 28.325488428113886 25.203451743819343 C37.198044864659884 16.733652412502153, 53.5438124131887 10.220580839833291, 60.06492652219954 6.814723151782118 C66.5860406312104 3.4088654637309452, 66.20184239549651 4.852986002852748, 67.45217308217897 4.768305615512304 C68.70250376886143 4.68362522817186, 67.36003565434599 4.876121836192593, 67.56691064229433 6.306640827739457"
stroke="#000000"
stroke-width="1"
fill="none"
></path>
</g>
</svg>
</a>
```

</details>

### GIPHY

#### Usage
Expand Down Expand Up @@ -785,6 +837,7 @@ MIT

[codepen]: https://codepen.io
[codesandbox]: https://codesandbox.io
[excalidraw]: https://excalidraw.com
[embedded-tweet-docs]: https://developer.twitter.com/web/embedded-tweets
[gatsby]: https://github.com/gatsbyjs/gatsby
[gatsby-plugin-instagram-embed]: https://github.com/MichaelDeBoey/gatsby-plugin-instagram-embed
Expand Down
4 changes: 3 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,8 @@
"streamable",
"twitch",
"twitter",
"youtube"
"youtube",
"excalidraw"
],
"author": "Michaël De Boey <[email protected]> (https://michaeldeboey.be)",
"license": "MIT",
Expand Down Expand Up @@ -50,6 +51,7 @@
"@babel/runtime": "^7.9.6",
"fetch-retry": "^3.1.0",
"node-fetch": "^2.6.0",
"puppeteer": "^2.1.1",
"unist-util-visit": "^2.0.2"
},
"devDependencies": {
Expand Down
Loading