Quick Visual Improvements

public/consolidated/cpp.json

@@ -32,6 +32,23 @@
             }
         ]
     },
+    {
+        "categoryName": "Debuging",
+        "snippets": [
+            {
+                "title": "Vector Print",
+                "description": "Overloads the << operator to print the contents of a vector just like in python.",
+                "author": "Mohamed-faaris",
+                "tags": [
+                    "printing",
+                    "debuging",
+                    "vector"
+                ],
+                "contributors": [],
+                "code": "#include <iostream> \n#include <vector>   \n\ntemplate <typename T>\nstd::ostream& operator<<(std::ostream& os, const std::vector<T>& vec) {\n    os << \"[\"; \n    for (size_t i = 0; i < vec.size(); ++i) {\n        os << vec[i]; // Print each vector element\n        if (i != vec.size() - 1) {\n            os << \", \"; // Add separator\n        }\n    }\n    os << \"]\"; \n    return os; // Return the stream\n}\n\n// Usage:\nstd::vector<int> numbers = {1, 2, 3, 4, 5};\nstd::cout << numbers << std::endl; // Outputs: [1, 2, 3, 4, 5]\n\n"
+            }
+        ]
+    },
     {
         "categoryName": "Math And Numbers",
         "snippets": [

public/consolidated/javascript.json

@@ -85,10 +85,8 @@
                 "description": "Converts RGB color values to hexadecimal color code.",
                 "author": "jjcantu",
                 "tags": [
-                    "javascript",
                     "color",
-                    "conversion",
-                    "utility"
+                    "conversion"
                 ],
                 "contributors": [],
                 "code": "function rgbToHex(r, g, b) {\n  const toHex = (n) => {\n    const hex = n.toString(16);\n    return hex.length === 1 ? '0' + hex : hex;\n  };\n  \n  return '#' + toHex(r) + toHex(g) + toHex(b);\n}\n\n// Usage:\nconsole.log(rgbToHex(255, 128, 0)); // Output: \"#ff8000\"\nconsole.log(rgbToHex(0, 255, 0)); // Output: \"#00ff00\"\n"
@@ -407,10 +405,8 @@
                 "description": "Converts bytes into human-readable file size format.",
                 "author": "jjcantu",
                 "tags": [
-                    "javascript",
                     "format",
-                    "size",
-                    "utility"
+                    "size"
                 ],
                 "contributors": [],
                 "code": "function formatFileSize(bytes) {\n  if (bytes === 0) return '0 Bytes';\n  \n  const k = 1024;\n  const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];\n  const i = Math.floor(Math.log(bytes) / Math.log(k));\n  \n  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];\n}\n\n// Usage:\nconsole.log(formatFileSize(1234)); // Output: \"1.21 KB\"\nconsole.log(formatFileSize(1234567)); // Output: \"1.18 MB\"\n"
@@ -506,13 +502,11 @@
                 "description": "Creates a deep copy of an object or array without reference.",
                 "author": "jjcantu",
                 "tags": [
-                    "javascript",
                     "object",
-                    "clone",
-                    "utility"
+                    "clone"
                 ],
                 "contributors": [],
-                "code": "function deepClone(obj) {\n  if (obj === null || typeof obj !== 'object') return obj;\n  \n  const clone = Array.isArray(obj) ? [] : {};\n  \n  for (let key in obj) {\n    if (Object.prototype.hasOwnProperty.call(obj, key)) {\n      clone[key] = deepClone(obj[key]);\n    }\n  }\n  \n  return clone;\n}\n\n// Usage:\nconst original = { a: 1, b: { c: 2 }, d: [1, 2, 3] };\nconst cloned = deepClone(original);\nconsole.log(cloned); // Output: { a: 1, b: { c: 2 }, d: [1, 2, 3] }\n"
+                "code": "function deepClone(obj) {\n  if (obj === null || typeof obj !== 'object') return obj;\n  \n  const clone = Array.isArray(obj) ? [] : {};\n  \n  for (let key in obj) {\n    if (Object.prototype.hasOwnProperty.call(obj, key)) {\n      clone[key] = deepClone(obj[key]);\n    }\n  }\n  \n  return clone;\n}\n\n// Usage:\nconst original = { a: 1, b: { c: 2 }, d: [1, 2, 3] };\nconst cloned = deepClone(original);\nconsole.log(cloned); // Output: 'original' but cloned\n"
             },
             {
                 "title": "Filter Object",
@@ -758,9 +752,9 @@
                 "description": "Generates a UUID (v4) string.",
                 "author": "jjcantu",
                 "tags": [
-                    "javascript",
                     "uuid",
-                    "utility"
+                    "generate",
+                    "string"
                 ],
                 "contributors": [],
                 "code": "function generateUUID() {\n  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {\n    const r = Math.random() * 16 | 0;\n    const v = c === 'x' ? r : (r & 0x3 | 0x8);\n    return v.toString(16);\n  });\n}\n\n// Usage:\nconsole.log(generateUUID()); // Output: \"a1b2c3d4-e5f6-4g7h-8i9j-k0l1m2n3o4p5\"\n"

src/components/CodePreview.tsx

@@ -40,7 +40,7 @@ const CodePreview = ({ language = "markdown", code }: Props) => {
         language={language}
         style={theme === "dark" ? oneDark : oneLight}
         wrapLines={true}
-        customStyle={{ margin: "0", maxHeight: "20rem" }}
+        customStyle={{ margin: "0", maxHeight: "32rem" }}
       >
         {code}
       </SyntaxHighlighter>

src/components/SnippetModal.tsx

@@ -58,29 +58,31 @@ const SnippetModal: React.FC<Props> = ({
             <CloseIcon />
           </Button>
         </div>
-        <CodePreview language={slugify(language)} code={snippet.code} />
-        <p>
-          <b>Description: </b>
-          {snippet.description}
-        </p>
-        <p>
-          Contributed by{" "}
-          <a
-            href={`https://github.com/${snippet.author}`}
-            target="_blank"
-            rel="noopener noreferrer"
-            className="styled-link"
-          >
-            @{snippet.author}
-          </a>
-        </p>
-        <ul role="list" className="modal__tags">
-          {snippet.tags.map((tag) => (
-            <li key={tag} className="modal__tag">
-              {tag}
-            </li>
-          ))}
-        </ul>
+        <div className="modal__body | flow">
+          <CodePreview language={slugify(language)} code={snippet.code} />
+          <p>
+            <b>Description: </b>
+            {snippet.description}
+          </p>
+          <p>
+            Contributed by{" "}
+            <a
+              href={`https://github.com/${snippet.author}`}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="styled-link"
+            >
+              @{snippet.author}
+            </a>
+          </p>
+          <ul role="list" className="modal__tags">
+            {snippet.tags.map((tag) => (
+              <li key={tag} className="modal__tag">
+                {tag}
+              </li>
+            ))}
+          </ul>
+        </div>
       </motion.div>
     </motion.div>,
     modalRoot

src/styles/main.css

@@ -550,22 +550,19 @@ abbr {
   border-radius: var(--br-lg);
   padding: 0.75em;
   text-align: start;
-  filter: grayscale(100%);
 
   &:is(:hover, :focus-visible) {
-    outline: 3px solid var(--clr-border-primary);
-    filter: grayscale(0);
+    outline: 2px solid var(--clr-border-primary);
   }
 }
 
 .snippet__preview {
   width: 100%;
   overflow: hidden;
-  aspect-ratio: 10 / 3;
+  aspect-ratio: 9 / 3;
   background-color: var(--clr-bg-secondary);
   /* background-image: var(--gradient-secondary); */
   border: 1px solid var(--clr-border-primary);
-  border-radius: var(--br-md);
   position: relative;
   padding-inline: 1em;
   display: grid;
@@ -599,20 +596,33 @@ body:has(.modal-overlay) {
 
 .modal {
   background-color: var(--clr-bg-secondary);
-  padding: 2rem;
-  width: 90%;
-  max-width: 800px;
+  width: fit-content;
+  max-width: 1000px;
+  max-height: 90%;
   border-radius: var(--br-lg);
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+  gap: 0;
   position: relative;
-  gap: 1rem;
+  overflow: auto;
 }
 
 .modal__header {
+  z-index: 50;
   display: flex;
+  position: sticky;
+  top: 0;
   align-items: center;
   justify-content: space-between;
   gap: 1rem;
+  padding: 1rem 1.5rem;
+  background-color: var(--clr-bg-secondary);
+  border-radius: var(--br-lg);
+}
+
+.modal__body {
+  padding: 1.5rem;
+  padding-top: 0;
+  gap: 1rem;
 }
 
 .code-preview {