Add docsearch commands for tailwind css, chakra ui, nextjs and clerk

[AnishDe12020]

I have added 4 cloud commands for searching the documentation of TailwindCSS, Next.js, Chakra UI and Clerk

Sorry about the 6 commits, messed up a bit.

P.S. I will continue adding more commands as I develop them

Also, the README.md and screenshot.json files will be added by the Slapdash team right?

[kanevski]

These are great!

Just tweak the names for now if you can (we can tweak those too).

We'll tune the icons & description before merging in.

[AnishDe12020]

These are great!

Just tweak the names for now if you can (we can tweak those too).

We'll tune the icons & description before merging in.

So, I don't get what I have to tweak in the names

[AnishDe12020]

Any update on this?

[taras-slapdash]

Hey @AnishDe12020!

Very cool to see all these commands! They look great!

I'm sorry for the delay here. We'll try to move this PR faster now.

Also, the README.md and screenshot.json files will be added by the Slapdash team right?

Yes, we'll take care of it!

Naming Convention

We [prefer](https://platform.slapdash.com/command-bar-101/publish-co mmand#command.toml) the <Verb> <Noun> format for commands. I suggest renaming the commands to follow this convention, e.g. "Chakra UI Docs" becomes "Search Chakra UI Docs" or even "Search Chakra UI Documentation".

In the command's readme, we tend to give as many details as possible so then people know exactly what the command can do and how it can be used. It's also a good idea to link to services your command is built on top of (e.g. https://tailwindcss.com/).

We can always help you with this so no stress about it.

Commands

While the commands are already quite powerful we can, however, add a bit more magic to them.

I'll use "Chakra UI Docs" as an example but the following comments can be applied to other commands too:

1. Consider using the option's subtitle by adding some useful information about the page/component. If it's possible - show a section that a page belongs to in Chakra UI, e.g. "Aspect Ratio" belongs to "Layout".
2. Would be great to leverage the moveAction property for Options. Now, instead of just opening a page in the browser we can provide more functionality. Looking at "Aspect Ratio", here are a few things that could be useful: Copy URL, Open on NPM. Check out, the Search NPM command to see how moveAction is used there to provide additional functionality.
3. For Cloud Commands, it's important to set the "Access-Control-Allow-Origin" header on the response. Otherwise, we won't be able to run your commands from the browser (https://slapdash.com/). See how it's done for the "Search NPM" command at https://github.com/zuta/slapdash-commands/blob/master/api/slapdash/search-npm.ts#L17.

These are not required but it would be awesome to have them. Let us know if you need any help with these.

[AnishDe12020]

Cool, I will change the names of the packages. Regarding the subtitle part, I have actually done that, just have to update the server with the new code. I have also added more docsearch commands (for slapdash platform docs, apollo, and apollo client) and a util command to copy the current UNIX timestamp. I will add these as well. Regarding the moveAction part, I will try to implement that but if it gets too overcomplicated, I may skip it (copy URL still seems doable but getting the NPM package can be a package and would only work for chakra UI docs). Also, I will add the CORS header.

I will send another message once I am done.

[taras-slapdash]

Sounds good, @AnishDe12020!

It may be best to send one PR per command so then we can ship it faster but it's up to you. Whatever is easier.

[AnishDe12020]

Sounds good, @AnishDe12020!

It may be best to send one PR per command so then we can ship it faster but it's up to you. Whatever is easier.

Hm, I will make the changes for these 4 commands and let this be 1 pr. Then maybe I can created another pr for the rest of the docsearch and one that one utility command. Sounds good?

(btw, migrating to nextjs api routes and vercel, this pr should be complete within the next 24 hours)

[AnishDe12020]

Ok so, I was going through the moveAction docs and found out that I can add a parameter to my command via them. In cloud commands I can access these parameters through req.query but how do I access these params in local commands?

[zuta]

@AnishDe12020 , yeah, that works.

In cloud commands I can access these parameters through req.query but how do I access these params in local commands?

We need to refresh our platform docs to better explain this but for Local Commands we pass parameters as argument to your script:

node command.js --keywords="hello" --foo="bar"

See the Copy Special Character tutorial for more details.

Let us know if you have any issues or questions.

[AnishDe12020]

Hey, I have made the required changes to the command's naming and descriptions. I have also updated the endpoint URLs to a NextJS application hosted on Vercel (I am using API routes here).

Do let me know if everything is fine

[taras-slapdash]

Hey @AnishDe12020!

They look awesome. I think we'll need to tweak a few more things. For instance, command icons need to be adjusted to our recommendations. But don't worry, we'll update these for you.

Thanks for building these commands. I'm sure they will be super useful for others.

[taras-slapdash]

@AnishDe12020 one small comment about subtitle in Options.

You can pass an array of strings and then Slapdash will use a native separator when displaying them in the Command Bar. This way your commands will be even closer to the native commands in Slapdash.

So, instead of:

"subtitle": "Components → Data Display → Badge",

you can do this:

"subtitle": ["Components", "Data Display", "Badge"],

[taras-slapdash]

@AnishDe12020, here is another tip for you.

If options provide monochrome icons Slapdash will replace the main color in them to match the current theme. When the colored icon is used it's possible that it may conflict with the colors in some themes. Monochrome icons don't have this problem.

For instance, it can be applied in the "Search Tailwind CSS Docs" and "Search Next.js Docs" commands where you already have a monochrome SVG. I have updated the icons for these commands with monochrome SVGs – https://github.com/slapdash/platform/blob/main/commands/search-tailwind-css-docs/icon.monochrome.svg and https://github.com/slapdash/platform/blob/main/commands/search-nextjs-docs/icon.monochrome.svg respectively. Feel free to download them and add them to your repo.

In your options you can provide monochrome icons like this:

{
  "view": {
     "type": "list",
     "options": [
         {
             "icon": {
                 "monochrome": "<svg ... </svg>",
             },
             ...
         },
         ...
     ]
  }
}

[AnishDe12020]

I will make these changes in some time

[AnishDe12020]

Hey,

I have made the changes to the subtitle in this commit and to the icons in this commit

P.S. Small feature request, would be cool if we could customize the separator used in the subtitle part (via preferences or via .slapdash)

[taras-slapdash]

Yeah, totally! Good idea!

[taras-slapdash]

@AnishDe12020 by the way, it's totally fine to use "Components → Data Display → Badge" as a subtitle if you want to use a different separator. I just pointed out to you that there is native support for multiple pieces in the option's subtitle. It's up to you what you want to use.

Cheers!

[AnishDe12020]

@AnishDe12020 by the way, it's totally fine to use "Components → Data Display → Badge" as a subtitle if you want to use a different separator. I just pointed out to you that there is native support for multiple pieces in the option's subtitle. It's up to you what you want to use.

Cheers!

Oh, I see, actually in this context the → seperator makes more sense to me and is not also a proper like global separator in many cases (say in the case of Search NPM). I will then change it back to this.