search

slapdash / platform

Docs, tools & examples for extending Slapdash.
https://slapdash.com/developers
29 stars 11 forks source link

Add convert-hex-to-tailwind command #3

Closed TedisAgolli closed 2 years ago

TedisAgolli commented 2 years ago

image Adds a Cloud Command that takes in a hex color and returns the closest Tailwind.css preset.

ivan-slapdash commented 2 years ago

Just tried it. Very cool! Now I want to build a command for our color system.

@taras-slapdash - can you help Tedis merge this in.

taras-slapdash commented 2 years ago

@TedisAgolli awesome command! Thanks for sharing it with others.

The only thing we should do before merging the PR – fix the CORS issue in the browser. If you run the command in the browser it will fail with the following error logged in the console:

Access to fetch at 'https://tailwind-color-finder.vercel.app/api/slapdash/hex-to-tailwind-command' from origin 'https://slapdash.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

To fix it, simply set the "Access-Control-Allow-Origin" HTTP header on the response that the command returns:

res.setHeader("Access-Control-Allow-Origin", "*");

Also, to get the best look in Slapdash, we recommend providing a 64x64 icon with no padding around it. The current command's icon has a bit of padding around it, so I removed it. Feel free to update it yourself or we can do it after merging the PR. Here is the same SVG without padding:

<svg width="64" height="64" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M61.212 2.788c-3.7173-3.717332-9.6651-3.717332-13.3824 0L34.6951 15.9226l-3.2217-3.2217c-.9913-.9913-2.4782-.9913-3.4695 0-.9913.9913-.9913 2.4782 0 3.4695l3.2217 3.2217L4.95644 45.6612c-1.48693 1.4869-2.47822 3.4695-2.72604 5.6999C.743466 52.6002 0 54.5828 0 56.5653 0 60.7783 3.22168 64 7.43466 64c1.98257 0 3.96514-.7435 5.45204-2.2304 1.9826-.2478 3.9652-1.2391 5.4521-2.726l26.2691-26.2692 3.2217 3.2217c.4957.4957 1.2391.7435 1.7348.7435.4956 0 1.2391-.2478 1.7347-.7435.9913-.9913.9913-2.4782 0-3.4695l-3.2217-3.2217L61.212 16.1704c3.7173-3.7174 3.7173-9.66508 0-13.3824ZM14.8693 55.5741c-.9913.9912-1.9826 1.4869-3.2217 1.2391-.9913 0-1.73472.4956-2.23037 1.2391-.24782.4956-1.23911.9913-1.98257.9913-1.48693 0-2.47822-.9913-2.47822-2.4783 0-.7434.49564-1.7347 1.23911-1.9825.74346-.4957 1.23911-1.2391 1.23911-2.2304 0-1.2391.49564-2.4782 1.23911-3.2217L34.6951 22.8616l6.4433 6.4433-26.2691 26.2692Z" fill="#000"/></svg>

Once the PR is merged we'll add the screenshot.json file and the command will be featured on https://slapdash.com/developers.

TedisAgolli commented 2 years ago

My last commit should've fixed the issues. I also updated the code branch to add the CORS header. Hadn't thought about testing it from the browser!

taras-slapdash commented 2 years ago

@TedisAgolli, Awesome!

No problem. We should document this better in our docs. Or, we may actually come up with some proxy solution to completely eliminate this problem for developers. Although, it could introduce some delay when running the command.

Thanks again for your contribution. I'm going to merge this PR now and your command should show up at https://slapdash.com/developers in a couple of minutes.

taras-slapdash commented 2 years ago

Here is the permalink of the command https://slapdash.com/commands/convert-hex-to-tailwind

TedisAgolli commented 2 years ago

Nice! Thanks for the help!