Maybe instead of only checking the env, you could also check the url for dev=true.

The idea of the check is to exclude the component from being build in production mode, but yeah we could just make it an url param... We didn't really discuss much on how it should be handled

If it's not in the main bundle and dynamically loaded, it shouldn't matter. And it adds some flexibility as there wouldn't be a need to run locally. I could be at someone's house, login to GH and make a pr, given I follow the guides.

Yeah you're right, let me try something else for accessing the tool

It doesn't seem right that a tool for one of the more defining feature of this product, adding your own snippet, is in the footer of the page.
Wouldn't it be better to add a button somewhere in the SnippetsList component, or somewhere close to the snippets.
And I think instead of showing the json in the bottom of the model, we can just provide a copy to json button.
And also there should be syntax highlighting in the code editor text area.

It doesn't seem right that a tool for one of the more defining feature of this product, adding your own snippet, is in the footer of the page. Wouldn't it be better to add a button somewhere in the SnippetsList component, or somewhere close to the snippets. And I think instead of showing the json in the bottom of the model, we can just provide a copy to json button. And also there should be syntax highlighting in the code editor text area.

Either we can put a single button in the top right corner in navbar or we could create a huge button before each SnippetList, in which they will not have to enter category and language. I think, first option might be easier to handle and more intuitive.

It doesn't seem right that a tool for one of the more defining feature of this product, adding your own snippet, is in the footer of the page. Wouldn't it be better to add a button somewhere in the SnippetsList component, or somewhere close to the snippets. And I think instead of showing the json in the bottom of the model, we can just provide a copy to json button. And also there should be syntax highlighting in the code editor text area.

Either we acn put a single button in the top right corner in navbar or we could create a huge button before each SnippetList, in which they will not have to enter category and language. I think, first option might be easier to handle and more intuitive.

Note that the user doesn't enter the language or category, the tool only generates the json for a single snippet, it's up to the user to then copy paste it, and create a PR adding it

Note that the user doesn't enter the language or category, the tool only generates the json for a single snippet, it's up to the user to then copy paste it, and create a PR adding it

I see. 👍

They can be openned with a button that replaces the "Add your snippet" button in the header.

I like this idea, too. In DEV mode, link button wouldn't be necessary. So, replacing it with "Open DevTools" button is a great idea.

I made some changes in my fork to the Devtools UI, and used the CodePreview component already available to display the generated snippet, which give the copy to clipboard button as well. I set the styling as plaintext to stop any syntax highlighting, but it could be changed to 'json' as well.

image

I really like what you did, Thanks

They can be openned with a button that replaces the "Add your snippet" button in the header.

I like this idea, too. In DEV mode, link button wouldn't be necessary. So, replacing it with "Open DevTools" button is a great idea.

Shall I move forward with feature?

I think it's a good idea, you can do it

Added the 'Open Snippets Devtools' button in the top right corner but kept the Footer the same. Changed the Devtools modal to a more horizontal layout, to make more use of screen space as most people will be working from PCs. Also, it's more convenient when code snippets are large. I have still kept it responsive for small screen sizes where it will default back to the original column layout.

image

Some more suggested features

• Disable modal close when clicking outside, as I ran into many scenarios where the modal accidentally closed losing the typed inputs. This would mean adding the 'X' or 'Close' button in the corner
• Persisting inputs in localStorage, so even after Devtools is closed, when re-opened the user can get the previous values back. Useful if the user midway wants to check out some added snippets for reference, which I also ran into. (If this is implemented the previous feature won't be neccessary)

Thanks for all the contributions.

I will review it later today or tomorrow morning. If you have additional suggestions or feedback, write here.