222: add contributors field on snippet

Author: jjcantu

public/consolidated/javascript.json

@@ -109,13 +109,18 @@
                 "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"
+                "contributors": [
+                    "jjcantu",
+                    "jjcantu",
+                    "jjcantu",
+                    "jjcantu",
+                    "jjcantu",
+                    "jjcantu"
+                ],
+                "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"
             }
         ]
     },
@@ -570,10 +575,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"
@@ -692,13 +695,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",
@@ -979,9 +980,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"

snippets/javascript/color-manipulation/rgb-to-hex.md

@@ -9,10 +9,10 @@ tags: javascript,color,conversion,utility
 function rgbToHex(r, g, b) {
   const toHex = (n) => {
     const hex = n.toString(16);
-    return hex.length === 1 ? '0' + hex : hex;
+    return hex.length === 1 ? "0" + hex : hex;
   };
-  
-  return '#' + toHex(r) + toHex(g) + toHex(b);
+
+  return "#" + toHex(r) + toHex(g) + toHex(b);
 }
 
 // Usage:

src/components/SnippetModal.tsx

@@ -64,7 +64,7 @@ const SnippetModal: React.FC<Props> = ({
           {snippet.description}
         </p>
         <p>
-          Contributed by{" "}
+          Created by{" "}
           <a
             href={`https://github.com/${snippet.author}`}
             target="_blank"
@@ -74,6 +74,30 @@ const SnippetModal: React.FC<Props> = ({
             @{snippet.author}
           </a>
         </p>
+        {(snippet.contributors ?? []).length > 0 && (
+          <div className="contributors">
+            <span>Contributors: </span>
+            {snippet.contributors
+              ?.slice(0, 3)
+              .map((contributor, index, slicedArray) => (
+                <>
+                  <a
+                    key={contributor}
+                    href={`https://github.com/${contributor}`}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="styled-link"
+                  >
+                    @{contributor}
+                  </a>
+                  {index < slicedArray.length - 1 && ", "}
+                </>
+              ))}
+            {(snippet.contributors?.length ?? 0) > 3 && (
+              <span> & {snippet.contributors!.length - 3} more</span>
+            )}
+          </div>
+        )}
         <ul role="list" className="modal__tags">
           {snippet.tags.map((tag) => (
             <li key={tag} className="modal__tag">

src/types/index.ts

@@ -14,6 +14,7 @@ export type SnippetType = {
   code: string;
   tags: string[];
   author: string;
+  contributors?: string[];
 };
 
 export type AppState = {