excalidraw / excalidraw-blog Goto Github PK

View Code? Open in Web Editor NEW

171.0 171.0 44.0 67.28 MB

Official blog of Excalidraw

Home Page: https://blog.excalidraw.com

License: MIT License

JavaScript 80.92% CSS 19.08%

excalidraw-blog's Introduction

Excalidraw Editor | Blog | Documentation | Excalidraw+

An open source virtual hand-drawn style whiteboard.
Collaborative and end-to-end encrypted.

Create beautiful hand-drawn like diagrams, wireframes, or whatever you like.

Features

The Excalidraw editor (npm package) supports:

💯 Free & open-source.
🎨 Infinite, canvas-based whiteboard.
✍️ Hand-drawn like style.
🌓 Dark mode.
🏗️ Customizable.
📷 Image support.
😀 Shape libraries support.
👅 Localization (i18n) support.
🖼️ Export to PNG, SVG & clipboard.
💾 Open format - export drawings as an .excalidraw json file.
⚒️ Wide range of tools - rectangle, circle, diamond, arrow, line, free-draw, eraser...
➡️ Arrow-binding & labeled arrows.
🔙 Undo / Redo.
🔍 Zoom and panning support.

Excalidraw.com

The app hosted at excalidraw.com is a minimal showcase of what you can build with Excalidraw. Its source code is part of this repository as well, and the app features:

📡 PWA support (works offline).
🤼 Real-time collaboration.
🔒 End-to-end encryption.
💾 Local-first support (autosaves to the browser).
🔗 Shareable links (export to a readonly link you can share with others).

We'll be adding these features as drop-in plugins for the npm package in the future.

Quick start

Note: following instructions are for installing the Excalidraw npm package when integrating Excalidraw into your own app. To run the repository locally for development, please refer to our Development Guide.

npm install react react-dom @excalidraw/excalidraw

or via yarn

yarn add react react-dom @excalidraw/excalidraw

Check out our documentation for more details!

Contributing

Missing something or found a bug? Report here.
Want to contribute? Check out our contribution guide or let us know on Discord.
Want to help with translations? See the translation guide.

Integrations

Who's integrating Excalidraw

Google Cloud • Meta • CodeSandbox • Obsidian Excalidraw • Replit • Slite • Notion • HackerRank • and many others

Sponsors & support

If you like the project, you can become a sponsor at Open Collective or use Excalidraw+.

Thank you for supporting Excalidraw

Last but not least, we're thankful to these companies for offering their services for free:

excalidraw-blog's People

Contributors

Stargazers

Watchers

excalidraw-blog's Issues

Add canonical URL for open graph

Add RSS

https://www.gatsbyjs.org/docs/adding-an-rss-feed/

Reduce the size of the H1 font

The title doesn't fit on my Pixel 4

How do I use server with the client?

I found https://hub.docker.com/r/excalidraw/excalidraw and https://hub.docker.com/r/excalidraw/excalidraw-room in docker hub. How do I write a single docker-compose file and make it up and running with colab server in docker environment either locally or on vercel?

Add sitemaps.xml

https://www.gatsbyjs.org/packages/gatsby-plugin-sitemap/

Add GitHub actions

Add open graph image

how to share key?

https://blog.excalidraw.com/end-to-end-encryption/

I think it is a good resource to know EXCALIDRAW, and its e2e encryption.

But I'm still curious how users share the URL that contains a key they generated?
https://excalidraw.com/?scene=1234#key=BQ1moYESmTEXgtA1KozyVw

Will they share the URL via email? @vjeux
I think server should not know the entire URL since it contains a key.

Twitter posts are not shown as tweets

website in dark mode but dark mode selector shows light mode

When opening the website for the first time,

Look at the website, it's in dark mode but the top right dark mode selector is at light mode by default, when the website is not in dark mode.

Looks like this happens only when opening the website for the fist time.

I do not have force dark mode enabled.

Blog - broken url

from https://blog.excalidraw.com/introducing-excalidraw-plus/

Link to https://blog.excalidraw.com/introducing-excalidraw-plus/excalidraw.com return 404, rather than excalidraw.com

I love excalidraw :)

Change the line height of the title

Use excerpts separator for open grpah

https://www.gatsbyjs.org/packages/gatsby-transformer-remark/#example-excerpts

Update blogpost with the new information about random IV

When this will be merged excalidraw/excalidraw#2833

Option to save and name files to a specific gone

I'm getting an error on a fresh version of the master during start or build

$ yarn start
yarn run v1.22.10
$ yarn develop
$ gatsby develop
success open and validate gatsby-configs - 0.093s
⠁ dyld: lazy symbol binding failed: Symbol not found: _g_once_impl
  Referenced from: /Users/lipis/work/lipis/excalidraw-blog/node_modules/gatsby-transformer-sharp/node_modules/sharp/build/Release/sharp.node
  Expected in: /Users/lipis/work/lipis/excalidraw-blog/node_modules/sharp/build/Release/../../vendor/lib/libvips.42.dylib

dyld: Symbol not found: _g_once_impl
  Referenced from: /Users/lipis/work/lipis/excalidraw-blog/node_modules/gatsby-transformer-sharp/node_modules/sharp/build/Release/sharp.node
  Expected in: /Users/lipis/work/lipis/excalidraw-blog/node_modules/sharp/build/Release/../../vendor/lib/libvips.42.dylib

error Command failed with signal "SIGKILL".
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
(base)

Videos

I'm trying to put out more video content these days.

Would there be value in my showcasing excalidraw's features and if so, what would you all like to see?

Add edit on GitHub button on every post

Reduce the size of the highlighted code

and maybe try solarized-dark theme

Better 404 pages

https://blog.excalidraw.com/404 ✔
https://blog.excalidraw.com/asd ✖️

Add commit hooks

Add the markdown source link with data-media-type="text/markdown" attribute for the #SearchDown web-spider

At the moment #SearchDown (Markdown search-engine) is only a POC and thinking to the web-spider I am looking for a standard way to share the raw code used to generate the HTML page instead to find the GitHub edit link because in future you could choose to migrate all to another place (for example GitLab or your web host).

So the idea is to put a link (visible or invisible is the same) with data-media-type="text/markdown" attribute, here you can see an example:

From	To
https://blog.excalidraw.com/browser-nativefs/	https://blog.excalidraw.com/browser-fs-access/

#490

Add author list

Maybe a small marldown file for every possible author with a few words about him/her.

Add dark mode

Like in Dan's https://overreacted.io/