Added README and CONTRIBUTING files

technoph1le · technoph1le · commit 71d65fd176ca · 2024-12-16T17:33:13.000+02:00
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -0,0 +1,129 @@
+# Contributing to QuickSnip
+
+Hey there! 👋 First off, thanks for taking the time to contribute! ❤️
+
+You can contribute in two main ways:
+
+- **Improving the code** (like fixing bugs or adding cool new features)
+- **Adding new code snippets** (or improving the existing ones!)
+
+---
+
+## Improving the code
+
+If you have a feature request or want to fix a bug, feel free to:
+
+- [Open an Issue](https://github.com/dostonnabotov/sass-template/issues) to let me know what’s up.
+- [Send a pull request](https://github.com/dostonnabotov/sass-template/pulls) with your changes.
+
+---
+
+## Adding Snippets
+
+### Adding to an Existing Category
+
+1. **Find the language file:**
+
+Head over to the `/public/data` folder and locate the language file you need, like javascript.json or python.json
+
+2. **Find the category:** 
+
+Look for the categoryName where your snippet belongs.
+
+3. **Add your snippet** in this format:
+
+```json
+{
+  "title": "Name of the snippet",
+  "description": "A short explanation of what the snippet does",
+  "code": "your code goes here",
+  "tags": ["tag1", "tag2", "tag3"],
+  "author": "your_github_username"
+}
+```
+
+Here’s an example for JavaScript:
+
+```json
+// javascript.json
+[
+  {
+    "categoryName": "Date and Time",
+    "snippets": [
+      {
+        "title": "Format Date",
+        "description": "Formats a date in 'YYYY-MM-DD' format.",
+        "code": "const formatDate = (date) => date.toISOString().split('T')[0];\n\n// Usage:\nconsole.log(formatDate(new Date())); // Output: '2024-12-10'",
+        "tags": ["javascript", "date", "format"],
+        "author": "technoph1le"
+      }
+    ]
+  }
+]
+```
+
+### Adding a New Category
+
+If your snippet doesn’t fit into any existing category, you can create a new one! Just make sure it’s unique and doesn’t overlap with others (e.g., don’t create separate categories for “Date” and “Time” when “Date and Time” works).
+
+Use this format:
+
+```json
+[
+  {
+    "categoryName": "New Category Name",
+    "snippets": [
+      {
+        "title": "Name of the snippet",
+        "description": "A short explanation of what it does",
+        "code": "your code goes here",
+        "tags": ["tag1", "tag2", "tag3"],
+        "author": "your_github_username"
+      }
+    ]
+  }
+]
+```
+
+### Adding a New Language
+
+Want to include a new programming language? Here's what to do:
+
+1. **Create a new file:**
+
+In the `/public/data` folder, create a file named after the language (e.g., `go.json`).
+
+2. **Add categories and snippets:**
+
+Follow the formats explained above.
+
+3. **Update the `_index.json`:**
+
+Add your new language like this:
+
+```json
+[
+  {
+    "lang": "Go",
+    "icon": "/icons/go.svg"
+  }
+]
+```
+
+4. **Include an icon:**
+
+Upload a logo for your language into the `/public/icons` folder. Make sure the filename matches the one you used in `_index.json`. Icons should be 50x50px in `.svg` format.
+
+5. **Double-check your work:**
+
+Test on your side and confirm if it works properly. 
+
+---
+
+## Final Notes
+
+Whether you’re fixing a tiny typo, writing a new snippet, or dreaming up big features, every bit counts! 🛠️
+
+If you have any questions or need help, feel free to open an issue or tag me.
+
+Happy coding! 💻✨
diff --git a/README.md b/README.md
@@ -1,50 +1,50 @@
-# React + TypeScript + Vite
+# QuickSnip
 
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+An open-source project that categorizes handy code snippets across various programming languages. Built with love and powered by an awesome community. 🚀
 
-Currently, two official plugins are available:
+## How to contribute
 
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+Want to help make QuickSnip even better? You can contribute by:
 
-## Expanding the ESLint configuration
+- **Improving the Code**: Fix bugs, suggest new features, or optimize the project.
+- **Adding New Snippets**: Share your favorite snippets to grow the database.
+Be sure to check out the [CONTRIBUTING.md](/CONTRIBUTING.md) file for detailed guidelines.
 
-If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
+### Improving the code
 
-- Configure the top-level `parserOptions` property like this:
+Got a feature idea or bug fix? Here's how you can contribute:
 
-```js
-export default tseslint.config({
-  languageOptions: {
-    // other options...
-    parserOptions: {
-      project: ['./tsconfig.node.json', './tsconfig.app.json'],
-      tsconfigRootDir: import.meta.dirname,
-    },
-  },
-})
-```
+- [Open an issue](https://github.com/dostonnabotov/sass-template/issues) to share your ideas or report a bug.
+- [Send a pull request](https://github.com/dostonnabotov/sass-template/pulls) with your changes.
+
+### Adding a Snippet
+
+The snippets database is located in the `/public/data` folder.
 
-- Replace `tseslint.configs.recommended` to `tseslint.configs.recommendedTypeChecked` or `tseslint.configs.strictTypeChecked`
-- Optionally add `...tseslint.configs.stylisticTypeChecked`
-- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and update the config:
-
-```js
-// eslint.config.js
-import react from 'eslint-plugin-react'
-
-export default tseslint.config({
-  // Set the react version
-  settings: { react: { version: '18.3' } },
-  plugins: {
-    // Add the react plugin
-    react,
-  },
-  rules: {
-    // other rules...
-    // Enable its recommended rules
-    ...react.configs.recommended.rules,
-    ...react.configs['jsx-runtime'].rules,
-  },
-})
+If you’d like to add a snippet for an **existing language** and **category**, use the following format:
+
+```json
+{
+  "title": "Name of the snippet",
+  "description": "A brief description of what it does",
+  "code": "code goes here",
+  "tags": ["tag1", "tag2", "tag3"],
+  "author": "your_github_username"
+}
 ```
+
+For details about adding new categories or programming languages, check out the [CONTRIBUTING.md](/CONTRIBUTING.md) file.
+
+## Guidelines for Contributions
+
+To keep things smooth and consistent, please:
+
+- Use proper JSON formatting.
+- Include all mandatory fields in the snippet.
+- Test your snippet to ensure it works as expected.
+
+Following these guidelines helps me (and everyone else) review and merge your contributions faster.
+
+## License
+
+QuickSnip is licensed under the [MIT License](/LICENSE). Feel free to use and share it as you like.
diff --git a/public/data/_index.json b/public/data/_index.json
diff --git a/src/hooks/useLanguages.ts b/src/hooks/useLanguages.ts
@@ -2,7 +2,8 @@ import { LanguageType } from "../types";
 import { useFetch } from "./useFetch";
 
 export const useLanguages = () => {
-  const { data, loading, error } = useFetch<LanguageType[]>("/data/index.json");
+  const { data, loading, error } =
+    useFetch<LanguageType[]>("/data/_index.json");
 
   return { fetchedLanguages: data || [], loading, error };
 };
