Skip to content

Migrating the snippet format to a markdown approach #88

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Conversation

Mathys-Gasnier
Copy link
Collaborator

Description

As we discussed in the discord, contributing and reviewing pull request is becoming harder, largly due to the way snippets are stored.
This PR changes that by introducing a snippets folder at the root of the project, this folder contains folders for each languages and categories, snippets are defined with markdown files with a simple structure.

The most important commit of this PR is the first one, the second one migrates already existing snippets to the snippets folder, the third one re generates the json language files with the new format, and the fourth fixes issue with the code of snippets switching from an array to a continuous string.

So this PR adds three scrips and one util:

  • migrateSnippets.js - Which generates the snippets folder from language files (It can be removed when we this gets merged)
  • snippetParser.js - This is the util, it exposes function that allow for parsing the snippet folder.
  • checkSnippetFormatting.js - Just checks the formating of the snippets using snippetParser.js it does not modify anything (Should be runned on commit/PR)
  • consolidateSnippets.js - Takes all the snippets and generates the language json files under /public/data, also copies the icon in the right places and generates the /public/data/_index.json file.

Checklist

  • I have tested my code and verified it works as expected.
  • My code follows the style and contribution guidelines of this project.
  • Comments are added where necessary for clarity.
  • Documentation has been updated (if applicable).
  • There are no new warnings or errors from my changes.

Copy link

netlify bot commented Jan 1, 2025

Deploy Preview for quicksnip ready!

Name Link
🔨 Latest commit 8d58753
🔍 Latest deploy log https://app.netlify.com/sites/quicksnip/deploys/677557d7e95d5b0008ba4b19
😎 Deploy Preview https://deploy-preview-88--quicksnip.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

@technoph1le
Copy link
Collaborator

Awesome work. 👍

Since dropdown uses _index.json file to show the languages along with the icons, the naming convention is off. I think it's due to slugify and reverseSlugify functions. Let me know your approach on this.

Dropdown open state

@Mathys-Gasnier
Copy link
Collaborator Author

Yeah, at the start i had a config file in each language folder, but it gets messy... And i don't quite like the idea... What is the issue with the current naming ? The fact that things like Css aren't all upper case ?

@Mathys-Gasnier
Copy link
Collaborator Author

One way would be to inverse the process, making the folder have the non-slugified name, and slufifying it later with the consolidate, i'm going to try that

@Mathys-Gasnier
Copy link
Collaborator Author

@dostonnabotov The commit i just pushed should fixed it...
Now the folder is the actual name, and we generate the slug we use from that

@technoph1le
Copy link
Collaborator

One way would be to inverse the process, making the folder have the non-slugified name, and slufifying it later with the consolidate, i'm going to try that

I like the naming convention in language folders, all lowercase. It's more consistent. How about we uppercase all when showing in the website to avoid headaches?

@Mathys-Gasnier
Copy link
Collaborator Author

Yeah i guess that's another way to do it xD

@saminjay
Copy link
Collaborator

saminjay commented Jan 1, 2025

I think markdown code block should specify the language

@Mathys-Gasnier
Copy link
Collaborator Author

Yes, they can, but the migrate script doesn't add them automaticly, i will add that

@saminjay
Copy link
Collaborator

saminjay commented Jan 1, 2025

If you are using bash, you can use this

    sed -i "s/\`\`\`/\`\`\`$1" "$2"

$1 is directory as in language
$2 is filename
you can run it in a loop

@Mathys-Gasnier
Copy link
Collaborator Author

@saminjay I fixed that 👍

import { copyFileSync, mkdirSync, readdirSync, readFileSync, writeFileSync } from 'fs';
import { join } from 'path';

function slugify(string, separator = "-") {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This function is non-reversible, reverseSlugify will work correctly on more complex strings.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's only used to migrate snippets, the script will get removed once the migration is done, so it's ugly, and not really "smart", don't worry about it

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Well, it's also used to create category names from folder name, but it's the only choice we have, avoiding having config files again everywhere, and category files should only contain basic words, so it's reversable

@Mathys-Gasnier Mathys-Gasnier merged commit 84f4571 into quicksnip-dev:main Jan 1, 2025
4 checks passed
@Mathys-Gasnier Mathys-Gasnier deleted the features/migrating-snippet-format branch January 1, 2025 15:06
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants