Fixed setting first category as default and Introduced new code format

Author: technoph1le

CONTRIBUTING.md

@@ -36,7 +36,10 @@ Look for the categoryName where your snippet belongs.
 {
   "title": "Name of the snippet",
   "description": "A short explanation of what the snippet does",
-  "code": "your code goes here",
+  "code": [
+    "your code goes here",
+    "  this is a newline with a space"
+  ],
   "tags": ["tag1", "tag2", "tag3"],
   "author": "your_github_username"
 }
@@ -53,7 +56,12 @@ Here’s an example for JavaScript:
       {
         "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'",
+        "code": [
+          "const formatDate = (date) => date.toISOString().split('T')[0];",
+          "",
+          "// Usage:",
+          "console.log(formatDate(new Date())); // Output: '2024-12-10'"
+        ],
         "tags": ["javascript", "date", "format"],
         "author": "technoph1le"
       }
@@ -76,7 +84,10 @@ Use this format:
       {
         "title": "Name of the snippet",
         "description": "A short explanation of what it does",
-        "code": "your code goes here",
+        "code": [
+          "your code goes here",
+          "  this is a newline with a space"
+        ],
         "tags": ["tag1", "tag2", "tag3"],
         "author": "your_github_username"
       }

README.md

@@ -26,8 +26,11 @@ If you’d like to add a snippet for an **existing language** and **category**,
 ```json
 {
   "title": "Name of the snippet",
-  "description": "A brief description of what it does",
-  "code": "code goes here",
+  "description": "A short explanation of what the snippet does",
+  "code": [
+    "your code goes here",
+    "  this is a newline with a space"
+  ],
   "tags": ["tag1", "tag2", "tag3"],
   "author": "your_github_username"
 }

public/data/css.json

@@ -5,14 +5,14 @@
       {
         "title": "Responsive Font Sizing",
         "description": "Adjusts font size based on viewport width.",
-        "code": "h1 {\n  font-size: calc(1.5rem + 2vw);\n}",
+        "code": ["h1 {", "  font-size: calc(1.5rem + 2vw);", "}"],
         "tags": ["css", "font", "responsive", "typography"],
         "author": "dostonnabotov"
       },
       {
         "title": "Letter Spacing",
         "description": "Adds space between letters for better readability.",
-        "code": "p {\n  letter-spacing: 0.05em;\n}",
+        "code": ["p {", "  letter-spacing: 0.05em;", "}"],
         "tags": ["css", "typography", "spacing"],
         "author": "dostonnabotov"
       }
@@ -24,14 +24,34 @@
       {
         "title": "Sticky Footer",
         "description": "Ensures the footer always stays at the bottom of the page.",
-        "code": "body {\n  display: flex;\n  flex-direction: column;\n  min-height: 100vh;\n}\n\nfooter {\n  margin-top: auto;\n}",
+        "code": [
+          "body {",
+          "  display: flex;",
+          "  flex-direction: column;",
+          "  min-height: 100vh;",
+          "}",
+          "",
+          "footer {",
+          "  margin-top: auto;",
+          "}"
+        ],
         "tags": ["css", "layout", "footer", "sticky"],
         "author": "dostonnabotov"
       },
       {
         "title": "Equal-Width Columns",
         "description": "Creates columns with equal widths using flexbox.",
-        "code": ".columns {\n  display: flex;\n  justify-content: space-between;\n}\n\n.column {\n  flex: 1;\n  margin: 0 10px;\n}",
+        "code": [
+          ".columns {",
+          "  display: flex;",
+          "  justify-content: space-between;",
+          "}",
+          "",
+          ".column {",
+          "  flex: 1;",
+          "  margin: 0 10px;",
+          "}"
+        ],
         "tags": ["css", "flexbox", "columns", "layout"],
         "author": "dostonnabotov"
       }
@@ -43,14 +63,43 @@
       {
         "title": "Button Hover Effect",
         "description": "Creates a hover effect with a color transition.",
-        "code": ".button {\n  background-color: #007bff;\n  color: white;\n  padding: 10px 20px;\n  border: none;\n  border-radius: 5px;\n  cursor: pointer;\n  transition: background-color 0.3s ease;\n}\n\n.button:hover {\n  background-color: #0056b3;\n}",
+        "code": [
+          ".button {",
+          "  background-color: #007bff;",
+          "  color: white;",
+          "  padding: 10px 20px;",
+          "  border: none;",
+          "  border-radius: 5px;",
+          "  cursor: pointer;",
+          "  transition: background-color 0.3s ease;",
+          "}",
+          "",
+          ".button:hover {",
+          "  background-color: #0056b3;",
+          "}"
+        ],
         "tags": ["css", "button", "hover", "transition"],
         "author": "dostonnabotov"
       },
       {
         "title": "3D Button Effect",
         "description": "Adds a 3D effect to a button when clicked.",
-        "code": ".button {\n  background-color: #28a745;\n  color: white;\n  padding: 10px 20px;\n  border: none;\n  border-radius: 5px;\n  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);\n  transition: transform 0.1s;\n}\n\n.button:active {\n  transform: translateY(2px);\n  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);\n}",
+        "code": [
+          ".button {",
+          "  background-color: #28a745;",
+          "  color: white;",
+          "  padding: 10px 20px;",
+          "  border: none;",
+          "  border-radius: 5px;",
+          "  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);",
+          "  transition: transform 0.1s;",
+          "}",
+          "",
+          ".button:active {",
+          "  transform: translateY(2px);",
+          "  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);",
+          "}"
+        ],
         "tags": ["css", "button", "3D", "effect"],
         "author": "dostonnabotov"
       }
@@ -62,14 +111,30 @@
       {
         "title": "Blur Background",
         "description": "Applies a blur effect to the background of an element.",
-        "code": ".blur-background {\n  backdrop-filter: blur(10px);\n  background: rgba(255, 255, 255, 0.5);\n}",
+        "code": [
+          ".blur-background {",
+          "  backdrop-filter: blur(10px);",
+          "  background: rgba(255, 255, 255, 0.5);",
+          "}"
+        ],
         "tags": ["css", "blur", "background", "effects"],
         "author": "dostonnabotov"
       },
       {
         "title": "Hover Glow Effect",
         "description": "Adds a glowing effect on hover.",
-        "code": ".glow {\n  background-color: #f39c12;\n  padding: 10px 20px;\n  border-radius: 5px;\n  transition: box-shadow 0.3s ease;\n}\n\n.glow:hover {\n  box-shadow: 0 0 15px rgba(243, 156, 18, 0.8);\n}",
+        "code": [
+          ".glow {",
+          "  background-color: #f39c12;",
+          "  padding: 10px 20px;",
+          "  border-radius: 5px;",
+          "  transition: box-shadow 0.3s ease;",
+          "}",
+          "",
+          ".glow:hover {",
+          "  box-shadow: 0 0 15px rgba(243, 156, 18, 0.8);",
+          "}"
+        ],
         "tags": ["css", "hover", "glow", "effects"],
         "author": "dostonnabotov"
       }

public/data/javascript.json

@@ -5,14 +5,26 @@
       {
         "title": "Remove Duplicates",
         "description": "Removes duplicate values from an array.",
-        "code": "const removeDuplicates = (arr) => [...new Set(arr)];\n\n// Usage:\nconst numbers = [1, 2, 2, 3, 4, 4, 5];\nconsole.log(removeDuplicates(numbers)); // Output: [1, 2, 3, 4, 5]",
+        "code": [
+          "const removeDuplicates = (arr) => [...new Set(arr)];",
+          "",
+          "// Usage:",
+          "const numbers = [1, 2, 2, 3, 4, 4, 5];",
+          "console.log(removeDuplicates(numbers)); // Output: [1, 2, 3, 4, 5]"
+        ],
         "tags": ["javascript", "array", "deduplicate", "utility"],
         "author": "dostonnabotov"
       },
       {
         "title": "Flatten Array",
         "description": "Flattens a multi-dimensional array.",
-        "code": "const flattenArray = (arr) => arr.flat(Infinity);\n\n// Usage:\nconst nestedArray = [1, [2, [3, [4]]]];\nconsole.log(flattenArray(nestedArray)); // Output: [1, 2, 3, 4]",
+        "code": [
+          "const flattenArray = (arr) => arr.flat(Infinity);",
+          "",
+          "// Usage:",
+          "const nestedArray = [1, [2, [3, [4]]]];",
+          "console.log(flattenArray(nestedArray)); // Output: [1, 2, 3, 4]"
+        ],
         "tags": ["javascript", "array", "flatten", "utility"],
         "author": "dostonnabotov"
       }
@@ -24,14 +36,24 @@
       {
         "title": "Capitalize String",
         "description": "Capitalizes the first letter of a string.",
-        "code": "const capitalize = (str) => str.charAt(0).toUpperCase() + str.slice(1);\n\n// Usage:\nconsole.log(capitalize('hello')); // Output: 'Hello'",
+        "code": [
+          "const capitalize = (str) => str.charAt(0).toUpperCase() + str.slice(1);",
+          "",
+          "// Usage:",
+          "console.log(capitalize('hello')); // Output: 'Hello'"
+        ],
         "tags": ["javascript", "string", "capitalize", "utility"],
         "author": "dostonnabotov"
       },
       {
         "title": "Reverse String",
         "description": "Reverses the characters in a string.",
-        "code": "const reverseString = (str) => str.split('').reverse().join('');\n\n// Usage:\nconsole.log(reverseString('hello')); // Output: 'olleh'",
+        "code": [
+          "const reverseString = (str) => str.split('').reverse().join('');",
+          "",
+          "// Usage:",
+          "console.log(reverseString('hello')); // Output: 'olleh'"
+        ],
         "tags": ["javascript", "string", "reverse", "utility"],
         "author": "dostonnabotov"
       }
@@ -43,14 +65,29 @@
       {
         "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'",
+        "code": [
+          "const formatDate = (date) => date.toISOString().split('T')[0];",
+          "",
+          "// Usage:",
+          "console.log(formatDate(new Date())); // Output: '2024-12-10'"
+        ],
         "tags": ["javascript", "date", "format", "utility"],
         "author": "dostonnabotov"
       },
       {
         "title": "Get Time Difference",
         "description": "Calculates the time difference in days between two dates.",
-        "code": "const getTimeDifference = (date1, date2) => {\n  const diff = Math.abs(date2 - date1);\n  return Math.ceil(diff / (1000 * 60 * 60 * 24));\n};\n\n// Usage:\nconst date1 = new Date('2024-01-01');\nconst date2 = new Date('2024-12-31');\nconsole.log(getTimeDifference(date1, date2)); // Output: 365",
+        "code": [
+          "const getTimeDifference = (date1, date2) => {",
+          "  const diff = Math.abs(date2 - date1);",
+          "  return Math.ceil(diff / (1000 * 60 * 60 * 24));",
+          "};",
+          "",
+          "// Usage:",
+          "const date1 = new Date('2024-01-01');",
+          "const date2 = new Date('2024-12-31');",
+          "console.log(getTimeDifference(date1, date2)); // Output: 365"
+        ],
         "tags": ["javascript", "date", "time-difference", "utility"],
         "author": "dostonnabotov"
       }
@@ -62,14 +99,48 @@
       {
         "title": "Debounce Function",
         "description": "Delays a function execution until after a specified time.",
-        "code": "const debounce = (func, delay) => {\n  let timeout;\n  return (...args) => {\n    clearTimeout(timeout);\n    timeout = setTimeout(() => func(...args), delay);\n  };\n};\n\n// Usage:\nwindow.addEventListener('resize', debounce(() => console.log('Resized!'), 500));",
+        "code": [
+          "const debounce = (func, delay) => {",
+          "  let timeout;",
+          "  return (...args) => {",
+          "    clearTimeout(timeout);",
+          "    timeout = setTimeout(() => func(...args), delay);",
+          "  };",
+          "};",
+          "",
+          "// Usage:",
+          "window.addEventListener('resize', debounce(() => console.log('Resized!'), 500));"
+        ],
         "tags": ["javascript", "utility", "debounce", "performance"],
         "author": "dostonnabotov"
       },
       {
         "title": "Throttle Function",
         "description": "Limits a function execution to once every specified time interval.",
-        "code": "const throttle = (func, limit) => {\n  let lastFunc;\n  let lastRan;\n  return (...args) => {\n    const context = this;\n    if (!lastRan) {\n      func.apply(context, args);\n      lastRan = Date.now();\n    } else {\n      clearTimeout(lastFunc);\n      lastFunc = setTimeout(() => {\n        if (Date.now() - lastRan >= limit) {\n          func.apply(context, args);\n          lastRan = Date.now();\n        }\n      }, limit - (Date.now() - lastRan));\n    }\n  };\n};\n\n// Usage:\ndocument.addEventListener('scroll', throttle(() => console.log('Scrolled!'), 1000));",
+        "code": [
+          "const throttle = (func, limit) => {",
+          "  let lastFunc;",
+          "  let lastRan;",
+          "  return (...args) => {",
+          "    const context = this;",
+          "    if (!lastRan) {",
+          "      func.apply(context, args);",
+          "      lastRan = Date.now();",
+          "    } else {",
+          "      clearTimeout(lastFunc);",
+          "      lastFunc = setTimeout(() => {",
+          "        if (Date.now() - lastRan >= limit) {",
+          "          func.apply(context, args);",
+          "          lastRan = Date.now();",
+          "        }",
+          "      }, limit - (Date.now() - lastRan));",
+          "    }",
+          "  };",
+          "};",
+          "",
+          "// Usage:",
+          "document.addEventListener('scroll', throttle(() => console.log('Scrolled!'), 1000));"
+        ],
         "tags": ["javascript", "utility", "throttle", "performance"],
         "author": "dostonnabotov"
       }
@@ -81,14 +152,30 @@
       {
         "title": "Toggle Class",
         "description": "Toggles a class on an element.",
-        "code": "const toggleClass = (element, className) => {\n  element.classList.toggle(className);\n};\n\n// Usage:\nconst element = document.querySelector('.my-element');\ntoggleClass(element, 'active');",
+        "code": [
+          "const toggleClass = (element, className) => {",
+          "  element.classList.toggle(className);",
+          "};",
+          "",
+          "// Usage:",
+          "const element = document.querySelector('.my-element');",
+          "toggleClass(element, 'active');"
+        ],
         "tags": ["javascript", "dom", "class", "utility"],
         "author": "dostonnabotov"
       },
       {
         "title": "Smooth Scroll to Element",
         "description": "Scrolls smoothly to a specified element.",
-        "code": "const smoothScroll = (element) => {\n  element.scrollIntoView({ behavior: 'smooth' });\n};\n\n// Usage:\nconst target = document.querySelector('#target');\nsmoothScroll(target);",
+        "code": [
+          "const smoothScroll = (element) => {",
+          "  element.scrollIntoView({ behavior: 'smooth' });",
+          "};",
+          "",
+          "// Usage:",
+          "const target = document.querySelector('#target');",
+          "smoothScroll(target);"
+        ],
         "tags": ["javascript", "dom", "scroll", "ui"],
         "author": "dostonnabotov"
       }

public/data/python.json

@@ -5,14 +5,27 @@
       {
         "title": "Reverse String",
         "description": "Reverses the characters in a string.",
-        "code": "def reverse_string(s):\n    return s[::-1]\n\n# Usage:\nprint(reverse_string('hello'))  # Output: 'olleh'",
+        "code": [
+          "def reverse_string(s):",
+          "    return s[::-1]",
+          "",
+          "# Usage:",
+          "print(reverse_string('hello'))  # Output: 'olleh'"
+        ],
         "tags": ["python", "string", "reverse", "utility"],
         "author": "dostonnabotov"
       },
       {
         "title": "Check Palindrome",
         "description": "Checks if a string is a palindrome.",
-        "code": "def is_palindrome(s):\n    s = s.lower().replace(' ', '')\n    return s == s[::-1]\n\n# Usage:\nprint(is_palindrome('A man a plan a canal Panama'))  # Output: True",
+        "code": [
+          "def is_palindrome(s):",
+          "    s = s.lower().replace(' ', '')",
+          "    return s == s[::-1]",
+          "",
+          "# Usage:",
+          "print(is_palindrome('A man a plan a canal Panama'))  # Output: True"
+        ],
         "tags": ["python", "string", "palindrome", "utility"],
         "author": "dostonnabotov"
       }
@@ -24,14 +37,27 @@
       {
         "title": "Flatten Nested List",
         "description": "Flattens a multi-dimensional list into a single list.",
-        "code": "def flatten_list(lst):\n    return [item for sublist in lst for item in sublist]\n\n# Usage:\nnested_list = [[1, 2], [3, 4], [5]]\nprint(flatten_list(nested_list))  # Output: [1, 2, 3, 4, 5]",
+        "code": [
+          "def flatten_list(lst):",
+          "    return [item for sublist in lst for item in sublist]",
+          "",
+          "# Usage:",
+          "nested_list = [[1, 2], [3, 4], [5]]",
+          "print(flatten_list(nested_list))  # Output: [1, 2, 3, 4, 5]"
+        ],
         "tags": ["python", "list", "flatten", "utility"],
         "author": "dostonnabotov"
       },
       {
         "title": "Remove Duplicates",
         "description": "Removes duplicate elements from a list while maintaining order.",
-        "code": "def remove_duplicates(lst):\n    return list(dict.fromkeys(lst))\n\n# Usage:\nprint(remove_duplicates([1, 2, 2, 3, 4, 4, 5]))  # Output: [1, 2, 3, 4, 5]",
+        "code": [
+          "def remove_duplicates(lst):",
+          "    return list(dict.fromkeys(lst))",
+          "",
+          "# Usage:",
+          "print(remove_duplicates([1, 2, 2, 3, 4, 4, 5]))  # Output: [1, 2, 3, 4, 5]"
+        ],
         "tags": ["python", "list", "duplicates", "utility"],
         "author": "dostonnabotov"
       }
@@ -43,14 +69,29 @@
       {
         "title": "Read File Lines",
         "description": "Reads all lines from a file and returns them as a list.",
-        "code": "def read_file_lines(filepath):\n    with open(filepath, 'r') as file:\n        return file.readlines()\n\n# Usage:\nlines = read_file_lines('example.txt')\nprint(lines)",
+        "code": [
+          "def read_file_lines(filepath):",
+          "    with open(filepath, 'r') as file:",
+          "        return file.readlines()",
+          "",
+          "# Usage:",
+          "lines = read_file_lines('example.txt')",
+          "print(lines)"
+        ],
         "tags": ["python", "file", "read", "utility"],
         "author": "dostonnabotov"
       },
       {
         "title": "Write to File",
         "description": "Writes content to a file.",
-        "code": "def write_to_file(filepath, content):\n    with open(filepath, 'w') as file:\n        file.write(content)\n\n# Usage:\nwrite_to_file('example.txt', 'Hello, World!')",
+        "code": [
+          "def write_to_file(filepath, content):",
+          "    with open(filepath, 'w') as file:",
+          "        file.write(content)",
+          "",
+          "# Usage:",
+          "write_to_file('example.txt', 'Hello, World!')"
+        ],
         "tags": ["python", "file", "write", "utility"],
         "author": "dostonnabotov"
       }
@@ -62,14 +103,33 @@
       {
         "title": "Find Factorial",
         "description": "Calculates the factorial of a number.",
-        "code": "def factorial(n):\n    if n == 0:\n        return 1\n    return n * factorial(n - 1)\n\n# Usage:\nprint(factorial(5))  # Output: 120",
+        "code": [
+          "def factorial(n):",
+          "    if n == 0:",
+          "        return 1",
+          "    return n * factorial(n - 1)",
+          "",
+          "# Usage:",
+          "print(factorial(5))  # Output: 120"
+        ],
         "tags": ["python", "math", "factorial", "utility"],
         "author": "dostonnabotov"
       },
       {
         "title": "Check Prime Number",
         "description": "Checks if a number is a prime number.",
-        "code": "def is_prime(n):\n    if n <= 1:\n        return False\n    for i in range(2, int(n**0.5) + 1):\n        if n % i == 0:\n            return False\n    return True\n\n# Usage:\nprint(is_prime(17))  # Output: True",
+        "code": [
+          "def is_prime(n):",
+          "    if n <= 1:",
+          "        return False",
+          "    for i in range(2, int(n**0.5) + 1):",
+          "        if n % i == 0:",
+          "            return False",
+          "    return True",
+          "",
+          "# Usage:",
+          "print(is_prime(17))  # Output: True"
+        ],
         "tags": ["python", "math", "prime", "check"],
         "author": "dostonnabotov"
       }
@@ -81,14 +141,39 @@
       {
         "title": "Measure Execution Time",
         "description": "Measures the execution time of a code block.",
-        "code": "import time\n\ndef measure_time(func, *args):\n    start = time.time()\n    result = func(*args)\n    end = time.time()\n    print(f'Execution time: {end - start:.6f} seconds')\n    return result\n\n# Usage:\ndef slow_function():\n    time.sleep(2)\n\nmeasure_time(slow_function)",
+        "code": [
+          "import time",
+          "",
+          "def measure_time(func, *args):",
+          "    start = time.time()",
+          "    result = func(*args)",
+          "    end = time.time()",
+          "    print(f'Execution time: {end - start:.6f} seconds')",
+          "    return result",
+          "",
+          "# Usage:",
+          "def slow_function():",
+          "    time.sleep(2)",
+          "",
+          "measure_time(slow_function)"
+        ],
         "tags": ["python", "time", "execution", "utility"],
         "author": "dostonnabotov"
       },
       {
         "title": "Generate Random String",
         "description": "Generates a random alphanumeric string.",
-        "code": "import random\nimport string\n\ndef random_string(length):\n    letters_and_digits = string.ascii_letters + string.digits\n    return ''.join(random.choice(letters_and_digits) for _ in range(length))\n\n# Usage:\nprint(random_string(10))  # Output: Random 10-character string",
+        "code": [
+          "import random",
+          "import string",
+          "",
+          "def random_string(length):",
+          "    letters_and_digits = string.ascii_letters + string.digits",
+          "    return ''.join(random.choice(letters_and_digits) for _ in range(length))",
+          "",
+          "# Usage:",
+          "print(random_string(10))  # Output: Random 10-character string"
+        ],
         "tags": ["python", "random", "string", "utility"],
         "author": "dostonnabotov"
       }

public/data/scss.json

@@ -5,28 +5,57 @@
       {
         "title": "Line Clamp Mixin",
         "description": "A Sass mixin to clamp text to a specific number of lines.",
-        "code": "@mixin line-clamp($number) {\n  display: -webkit-box;\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: $number;\n  overflow: hidden;\n}",
+        "code": [
+          "@mixin line-clamp($number) {",
+          "  display: -webkit-box;",
+          "  -webkit-box-orient: vertical;",
+          "  -webkit-line-clamp: $number;",
+          "  overflow: hidden;",
+          "}"
+        ],
         "tags": ["sass", "mixin", "typography", "css"],
         "author": "dostonnabotov"
       },
       {
         "title": "Text Overflow Ellipsis",
         "description": "Ensures long text is truncated with an ellipsis.",
-        "code": "@mixin text-ellipsis {\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}",
+        "code": [
+          "@mixin text-ellipsis {",
+          "  overflow: hidden;",
+          "  white-space: nowrap;",
+          "  text-overflow: ellipsis;",
+          "}"
+        ],
         "tags": ["sass", "mixin", "text", "css"],
         "author": "dostonnabotov"
       },
       {
         "title": "Font Import Helper",
         "description": "Simplifies importing custom fonts in Sass.",
-        "code": "@mixin import-font($family, $weight: 400, $style: normal) {\n  @font-face {\n    font-family: #{$family};\n    font-weight: #{$weight};\n    font-style: #{$style};\n    src: url('/fonts/#{$family}-#{$weight}.woff2') format('woff2'),\n         url('/fonts/#{$family}-#{$weight}.woff') format('woff');\n  }\n}",
+        "code": [
+          "@mixin import-font($family, $weight: 400, $style: normal) {",
+          "  @font-face {",
+          "    font-family: #{$family};",
+          "    font-weight: #{$weight};",
+          "    font-style: #{$style};",
+          "    src: url('/fonts/#{$family}-#{$weight}.woff2') format('woff2'),",
+          "         url('/fonts/#{$family}-#{$weight}.woff') format('woff');",
+          "  }",
+          "}"
+        ],
         "tags": ["sass", "mixin", "fonts", "css"],
         "author": "dostonnabotov"
       },
       {
         "title": "Text Gradient",
         "description": "Adds a gradient color effect to text.",
-        "code": "@mixin text-gradient($from, $to) {\n  background: linear-gradient(to right, $from, $to);\n  -webkit-background-clip: text;\n  -webkit-text-fill-color: transparent;\n}",
+        "code": [
+          "@mixin text-gradient($from, $to) {",
+          "  background: linear-gradient(to right, $from, $to);",
+          "  -webkit-background-clip: text;",
+          "  -webkit-text-fill-color: transparent;",
+          "}"
+        ],
         "tags": ["sass", "mixin", "gradient", "text", "css"],
         "author": "dostonnabotov"
       }
@@ -38,21 +67,46 @@
       {
         "title": "Grid Container",
         "description": "Creates a responsive grid container with customizable column counts.",
-        "code": "@mixin grid-container($columns: 12, $gap: 1rem) {\n  display: grid;\n  grid-template-columns: repeat($columns, 1fr);\n  gap: $gap;\n}",
+        "code": [
+          "@mixin grid-container($columns: 12, $gap: 1rem) {",
+          "  display: grid;",
+          "  grid-template-columns: repeat($columns, 1fr);",
+          "  gap: $gap;",
+          "}"
+        ],
         "tags": ["scss", "grid", "layout", "css"],
         "author": "dostonnabotov"
       },
       {
         "title": "Flex Center",
         "description": "A mixin to center content using flexbox.",
-        "code": "@mixin flex-center {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}",
+        "code": [
+          "@mixin flex-center {",
+          "  display: flex;",
+          "  justify-content: center;",
+          "  align-items: center;",
+          "}"
+        ],
         "tags": ["scss", "flex", "center", "css"],
         "author": "dostonnabotov"
       },
       {
         "title": "Aspect Ratio",
         "description": "Ensures elements maintain a specific aspect ratio.",
-        "code": "@mixin aspect-ratio($width, $height) {\n  position: relative;\n  width: 100%;\n  padding-top: ($height / $width) * 100%;\n  > * {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n  }\n}",
+        "code": [
+          "@mixin aspect-ratio($width, $height) {",
+          "  position: relative;",
+          "  width: 100%;",
+          "  padding-top: ($height / $width) * 100%;",
+          "  > * {",
+          "    position: absolute;",
+          "    top: 0;",
+          "    left: 0;",
+          "    width: 100%;",
+          "    height: 100%;",
+          "  }",
+          "}"
+        ],
         "tags": ["scss", "aspect-ratio", "layout", "css"],
         "author": "dostonnabotov"
       }
@@ -64,14 +118,40 @@
       {
         "title": "Fade In Animation",
         "description": "Animates the fade-in effect.",
-        "code": "@keyframes fade-in {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n\n@mixin fade-in($duration: 1s, $easing: ease-in-out) {\n  animation: fade-in $duration $easing;\n}",
+        "code": [
+          "@keyframes fade-in {",
+          "  from {",
+          "    opacity: 0;",
+          "  }",
+          "  to {",
+          "    opacity: 1;",
+          "  }",
+          "}",
+          "",
+          "@mixin fade-in($duration: 1s, $easing: ease-in-out) {",
+          "  animation: fade-in $duration $easing;",
+          "}"
+        ],
         "tags": ["scss", "animation", "fade", "css"],
         "author": "dostonnabotov"
       },
       {
         "title": "Slide In From Left",
         "description": "Animates content sliding in from the left.",
-        "code": "@keyframes slide-in-left {\n  from {\n    transform: translateX(-100%);\n  }\n  to {\n    transform: translateX(0);\n  }\n}\n\n@mixin slide-in-left($duration: 0.5s, $easing: ease-out) {\n  animation: slide-in-left $duration $easing;\n}",
+        "code": [
+          "@keyframes slide-in-left {",
+          "  from {",
+          "    transform: translateX(-100%);",
+          "  }",
+          "  to {",
+          "    transform: translateX(0);",
+          "  }",
+          "}",
+          "",
+          "@mixin slide-in-left($duration: 0.5s, $easing: ease-out) {",
+          "  animation: slide-in-left $duration $easing;",
+          "}"
+        ],
         "tags": ["scss", "animation", "slide", "css"],
         "author": "dostonnabotov"
       }
@@ -83,14 +163,34 @@
       {
         "title": "Responsive Breakpoints",
         "description": "Generates media queries for responsive design.",
-        "code": "@mixin breakpoint($breakpoint) {\n  @if $breakpoint == sm {\n    @media (max-width: 576px) { @content; }\n  } @else if $breakpoint == md {\n    @media (max-width: 768px) { @content; }\n  } @else if $breakpoint == lg {\n    @media (max-width: 992px) { @content; }\n  } @else if $breakpoint == xl {\n    @media (max-width: 1200px) { @content; }\n  }\n}",
+        "code": [
+          "@mixin breakpoint($breakpoint) {",
+          "  @if $breakpoint == sm {",
+          "    @media (max-width: 576px) { @content; }",
+          "  } @else if $breakpoint == md {",
+          "    @media (max-width: 768px) { @content; }",
+          "  } @else if $breakpoint == lg {",
+          "    @media (max-width: 992px) { @content; }",
+          "  } @else if $breakpoint == xl {",
+          "    @media (max-width: 1200px) { @content; }",
+          "  }",
+          "}"
+        ],
         "tags": ["scss", "responsive", "media-queries", "css"],
         "author": "dostonnabotov"
       },
       {
         "title": "Clearfix",
         "description": "Provides a clearfix utility for floating elements.",
-        "code": "@mixin clearfix {\n  &::after {\n    content: '';\n    display: block;\n    clear: both;\n  }\n}",
+        "code": [
+          "@mixin clearfix {",
+          "  &::after {",
+          "    content: '';",
+          "    display: block;",
+          "    clear: both;",
+          "  }",
+          "}"
+        ],
         "tags": ["scss", "clearfix", "utility", "css"],
         "author": "dostonnabotov"
       }
@@ -102,14 +202,22 @@
       {
         "title": "Border Radius Helper",
         "description": "Applies a customizable border-radius.",
-        "code": "@mixin border-radius($radius: 4px) {\n  border-radius: $radius;\n}",
+        "code": [
+          "@mixin border-radius($radius: 4px) {",
+          "  border-radius: $radius;",
+          "}"
+        ],
         "tags": ["scss", "border", "radius", "css"],
         "author": "dostonnabotov"
       },
       {
         "title": "Box Shadow Helper",
         "description": "Generates a box shadow with customizable values.",
-        "code": "@mixin box-shadow($x: 0px, $y: 4px, $blur: 10px, $spread: 0px, $color: rgba(0, 0, 0, 0.1)) {\n  box-shadow: $x $y $blur $spread $color;\n}",
+        "code": [
+          "@mixin box-shadow($x: 0px, $y: 4px, $blur: 10px, $spread: 0px, $color: rgba(0, 0, 0, 0.1)) {",
+          "  box-shadow: $x $y $blur $spread $color;",
+          "}"
+        ],
         "tags": ["scss", "box-shadow", "css", "effects"],
         "author": "dostonnabotov"
       }
@@ -121,7 +229,20 @@
       {
         "title": "Primary Button",
         "description": "Generates a styled primary button.",
-        "code": "@mixin primary-button($bg: #007bff, $color: #fff) {\n  background-color: $bg;\n  color: $color;\n  padding: 0.5rem 1rem;\n  border: none;\n  border-radius: 4px;\n  cursor: pointer;\n\n  &:hover {\n    background-color: darken($bg, 10%);\n  }\n}",
+        "code": [
+          "@mixin primary-button($bg: #007bff, $color: #fff) {",
+          "  background-color: $bg;",
+          "  color: $color;",
+          "  padding: 0.5rem 1rem;",
+          "  border: none;",
+          "  border-radius: 4px;",
+          "  cursor: pointer;",
+          "",
+          "  &:hover {",
+          "    background-color: darken($bg, 10%);",
+          "  }",
+          "}"
+        ],
         "tags": ["scss", "button", "primary", "css"],
         "author": "dostonnabotov"
       }

src/components/CategoryList.tsx

@@ -1,6 +1,8 @@
 import { useAppContext } from "../contexts/AppContext";
 import { useCategories } from "../hooks/useCategories";
 
+let oldCategories = [] as string[];
+
 const CategoryList = () => {
   const { category, setCategory } = useAppContext();
   const { fetchedCategories, loading, error } = useCategories();
@@ -9,6 +11,15 @@ const CategoryList = () => {
 
   if (error) return <div>Error occured: {error}</div>;
 
+  // NOTE: set the first element as selected
+  // switching between categories
+  // Just a temporary solution.
+  // If you've better solution, I would appreciate it :)
+  if (oldCategories !== fetchedCategories) {
+    setCategory(fetchedCategories[0]);
+    oldCategories = fetchedCategories;
+  }
+
   return (
     <ul role="list" className="categories">
       {fetchedCategories.map((name, idx) => (

src/components/CodePreview.tsx

@@ -4,20 +4,22 @@ import CopyToClipboard from "./CopyToClipboard";
 
 type Props = {
   language: string;
-  children: string;
+  children: string[];
 };
 
 const CodePreview = ({ language = "markdown", children }: Props) => {
+  const codeString = children.join("\n");
+
   return (
     <div className="code-preview">
-      <CopyToClipboard text={children} className="modal__copy" />
+      <CopyToClipboard text={codeString} className="modal__copy" />
       <SyntaxHighlighter
         language={language}
         style={oneDark}
         wrapLines={true}
         customStyle={{ margin: "0" }}
       >
-        {children}
+        {codeString}
       </SyntaxHighlighter>
     </div>
   );

src/hooks/useCategories.ts

@@ -2,6 +2,7 @@ import { useFetch } from "./useFetch";
 import { useAppContext } from "../contexts/AppContext";
 import { SnippetType } from "../types";
 import slugify from "../utils/slugify";
+import { useMemo } from "react";
 
 type CategoryData = {
   categoryName: string;
@@ -14,7 +15,9 @@ export const useCategories = () => {
     `/data/${slugify(language.lang)}.json`
   );
 
-  const fetchedCategories = data ? data.map((item) => item.categoryName) : [];
+  const fetchedCategories = useMemo(() => {
+    return data ? data.map((item) => item.categoryName) : [];
+  }, [data]);
 
   return { fetchedCategories, loading, error };
 };