Improving the experience of adding snippets

[Mathys-Gasnier]

Adding each snippet line by line to the json file is really not ideal...
Would there be something against moving to a system where lines are not split ?
Even generating the snippet with a command line or something like this...

Two options are a script, to which we could pass the language, the category and the code of the snippet (code passed from a file maybe ?)
The other option would be to modify the storage and use something else than json, something more adapted to multiline string value.

I would like feedback on this before proposing a PR with an implementation.

[technoph1le]

@Mathys-Gasnier Before starting the project, I did research on how to approach saving snippets.

Storing in JSON file was inspired by other open-source projects, like one from FreeCodeCamp. I thought it would be easy to understand and add snippets.

Initially, adding code was a single-line string.

{
  "code": "def reverse_string(s):\n   return s[::-1]"
}

It was difficult to read and understand, yet compact. Then, I switched to array like format (current format).

I'm open to ideas on improving the experience further. Also, one of my viewers on YouTube suggested using interactive form as well.

[technoph1le]

Let's leave this issue open and gather ideas. Once we decide on an effective and easy approach, we will start implementing it. Let me know your thoughts.

[Mathys-Gasnier]

I like the idea of the online form, but i think it will greatly increase the code complexity... And forces someone to handle whats added and whats not, and it's not as interactive as pull requests
Maybe storing examples in files of the right extension would be an option, we can then generate everything using a script like you already have, to create the json

[psychlone77]

We could maybe add a 'dev' feature that won't be available when deployed. Using process.env.NODE_ENV, we could check if the app is in development mode and then show an interactive form/panel to which contributors can use to add new snippets, and then a script will edit the JSON file for them. This could also be used to edit existing snippets if needed also.

This way, adding snippets still requires you fork/clone and run the application, but provides a much easier interface to add snippets quickly which might be more beginner friendly. Also, since more and more snippets are added, trying to edit a file even for a single language might get harder, so having fixed interface to add/edit snippets will be useful for everyone. And finally, the new snippets will still have to pass the pull request checks and reviews.

[Mathys-Gasnier]

This could be an option, but would make the project heavier in term of front end to maintain.
I have also no clue if it's possible to remove some component at build time a certain env is set.
Building this tool in prod would be a waste of server time and would, and could in the long run be an issue.

[psychlone77]

I initially got this idea from libraries I have used, like Devtools in Tanstack Query. Tanstack Query Devtools Documentation.

Here is a screenshot from a sample project.

They provide a Devtools panel for developers to go through and check queries happening in the application during development. They confirm that this component is not included in the production build due to 'tree shaking' in modern bundlers like ESBuild which is used in Vite.

This means in specifically Vite import.meta.env.MODE will be dynamically replaced with the string 'production', when running vite build, which creates dead code if we conditionally render a component depending on that env variable. For example:

if (import.meta.env.MODE === 'development') {
  <SnippetAdderDev/>
}

//during building it becomes
if ('production' === 'development') { 
  //this is now unreachable, therefore excluded
  <SnippetAdderDev/>
}

Therefore, that component will be excluded from the final bundle during production.

Here is the implementation in Tanstack Query (React Query)

StackOverFlow question related to this: Link

Regarding it being heavy to maintain. I believe it can be achieved with a simple form and button tied to a script to add the snippet to the respective JSON file which will anyway be needed as well.

I'm also in process of learning most of these, so feel free to correct me if I'm wrong 😅

[Mathys-Gasnier]

Sounds good to me, i can implement it if no one else wants to do it

[psychlone77]

Nice @Mathys-Gasnier , you can start the foundation for this feature, and we can collaborate once you make the PR.

[Mathys-Gasnier]

I just realised what we are trying to do is not possible... There is no server, and the client can't edit files and save data to them...

[GreenMan36]

In essence, we just want to have a page where we can input our code, and get the correct format out.
A simple manual copy paste will then suffice.
This tool can be implemented inside of the website without much hassle.

People can make their own commit and pr, this saves the need for making the site non-static as we still won't need a server.

[GreenMan36]

Something like this perhaps?

Just in a modal somewhere should be fine, maybe the code preview can be used to pretty print stuff.

const generateJson = () => {
    // Split code into array of lines and remove empty lines at start/end
    const codeArray = formData.code
      .split('\n')
      .map(line => line.replace(/\r$/, ''));

    // Split tags and trim whitespace
    const tagsArray = formData.tags
      .split(',')
      .map(tag => tag.trim())
      .filter(tag => tag); // Remove empty tags

    const snippet = {
      title: formData.title,
      description: formData.description,
      code: codeArray,
      tags: tagsArray,
      author: formData.author
    };

    // Generate the full structure
    const fullStructure = {
      language: formData.language.toLowerCase(),
      categoryName: formData.categoryName,
      snippets: [snippet]
    };

    setOutput(JSON.stringify(fullStructure, null, 2));
  };

[psychlone77]

@GreenMan36 Yes, we can include something like this as a tool in development mode 👍.
I was thinking like a floating (+) button in the bottom right corner which would bring up a modal as you said.