Placeholder Logos

package-lock.json

@@ -15,11 +15,15 @@
         "@types/node": "^16.11.36",
         "@types/react": "^18.0.9",
         "@types/react-dom": "^18.0.4",
+        "color-hash": "^2.0.1",
         "react": "^18.1.0",
         "react-dom": "^18.1.0",
         "react-scripts": "5.0.1",
         "typescript": "^4.6.4",
         "web-vitals": "^2.1.4"
+      },
+      "devDependencies": {
+        "@types/color-hash": "^1.0.2"
       }
     },
     "node_modules/@ampproject/remapping": {
@@ -3554,6 +3558,12 @@
         "@types/node": "*"
       }
     },
+    "node_modules/@types/color-hash": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@types/color-hash/-/color-hash-1.0.2.tgz",
+      "integrity": "sha512-QJCVXSVRse+mMvzWQ8vH6AcKxtqCgHPHf5abAdGn86DEeQdUpSJnKAeCa1+hZuohaUF3l4RhigC9akRx82Bwig==",
+      "dev": true
+    },
     "node_modules/@types/connect": {
       "version": "3.4.35",
       "resolved": "https://registry.npmjs.org/@types/connect/-/connect-3.4.35.tgz",
@@ -5326,6 +5336,11 @@
         "color-name": "1.1.3"
       }
     },
+    "node_modules/color-hash": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-hash/-/color-hash-2.0.1.tgz",
+      "integrity": "sha512-/wIYAQ3xL9ruURLmDbxAsXEsivaOfwWDUVy+zbWJZL3bnNQIDNSmmqbkNzeTOQvDdiz11Kb010UlJN7hUXLg/w=="
+    },
     "node_modules/color-name": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
@@ -18735,6 +18750,12 @@
         "@types/node": "*"
       }
     },
+    "@types/color-hash": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@types/color-hash/-/color-hash-1.0.2.tgz",
+      "integrity": "sha512-QJCVXSVRse+mMvzWQ8vH6AcKxtqCgHPHf5abAdGn86DEeQdUpSJnKAeCa1+hZuohaUF3l4RhigC9akRx82Bwig==",
+      "dev": true
+    },
     "@types/connect": {
       "version": "3.4.35",
       "resolved": "https://registry.npmjs.org/@types/connect/-/connect-3.4.35.tgz",
@@ -20097,6 +20118,11 @@
         "color-name": "1.1.3"
       }
     },
+    "color-hash": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-hash/-/color-hash-2.0.1.tgz",
+      "integrity": "sha512-/wIYAQ3xL9ruURLmDbxAsXEsivaOfwWDUVy+zbWJZL3bnNQIDNSmmqbkNzeTOQvDdiz11Kb010UlJN7hUXLg/w=="
+    },
     "color-name": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",

package.json

@@ -10,6 +10,7 @@
     "@types/node": "^16.11.36",
     "@types/react": "^18.0.9",
     "@types/react-dom": "^18.0.4",
+    "color-hash": "^2.0.1",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
     "react-scripts": "5.0.1",
@@ -39,5 +40,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "@types/color-hash": "^1.0.2"
   }
 }

src/ProjectCard.tsx

@@ -3,10 +3,12 @@ import github from './images/github.svg';
 import discord from './images/discord.svg';
 import twitter from './images/twitter.svg';
 import telegram from './images/telegram.svg';
-import './ProjectCard.css'
+import './ProjectCard.css';
+import ColorHash from 'color-hash'
 
 export interface ProjectProps {
   name: string;
+  short_name?: string;
   description: string;
   image?: string;
   links?: Links[];
@@ -22,7 +24,7 @@ interface Links {
 
 function renderLink(url: string, source: string, icon: string): any {
   return (
-    <div className="link" key={url} >
+    <div className="link" key={url}>
       <a href={url} target="_blank" rel="noopener noreferrer">
         <img className="icon" src={icon} alt={source} />
         <div className="link-title">{source}</div>
@@ -31,33 +33,47 @@ function renderLink(url: string, source: string, icon: string): any {
   );
 }
 
+function renderImage(name: string): any {
+  let hueRange = { min: 45, max: 360 }
+  let colorHashText = new ColorHash({hue: hueRange, lightness: [0.8, 0.9]}).hex(name);
+  let colorHashBG = new ColorHash({hue: hueRange, lightness: [0.35, 0.4], saturation: [0.65, 0.85, 1]}).hex(name);
+  return (
+    <svg height="150px" width="350px" style={{backgroundColor: colorHashBG}} className="card-img-top">
+      <text text-anchor="middle" x="175px" y="85px" fill={colorHashText} style={{ fontSize: "2.5rem", fontStyle: "italic"}}>{name}</text>
+    </svg>
+  );
+}
+
 function ProjectCard(props: ProjectProps) {
-  let links = props.links ? props.links.map((link) => {
+  let links = props.links
-    if (link.github) {
+    ? props.links.map((link) => {
-      return renderLink(link.github, 'github', github);
+        if (link.github) {
-    } else if (link.website) {
+          return renderLink(link.github, 'github', github);
-      return renderLink(link.website, 'website', globe);
+        } else if (link.website) {
-    } else if (link.discord) {
+          return renderLink(link.website, 'website', globe);
-      return renderLink(link.discord, 'discord', discord);
+        } else if (link.discord) {
-    } else if (link.twitter) {
+          return renderLink(link.discord, 'discord', discord);
-      return renderLink(link.twitter, 'twitter', twitter);
+        } else if (link.twitter) {
-    } else if (link.telegram) {
+          return renderLink(link.twitter, 'twitter', twitter);
-      return renderLink(link.telegram, 'telegram', telegram);
+        } else if (link.telegram) {
-    } else {
+          return renderLink(link.telegram, 'telegram', telegram);
-      return null;
+        } else {
-    }
+          return null;
-  }) : null;
+        }
+      })
+    : null;
 
   let img = (() => {
     try {
       if (props.image) {
-        return (<img className="card-img-top" src={require(`./images/${props.image}`)} alt={props.name} />);
+        return (
-      }
+          <img className="card-img-top" src={require(`./images/${props.image}`)} alt={props.name} />
-      else {
+        );
-        return null;
+      } else {
+        return renderImage(props.short_name || props.name);
       }
     } catch (e) {
-      return null;
+      return renderImage(props.short_name || props.name);
     }
   })();
 

src/Projects.json

@@ -40,6 +40,7 @@
   },
   {
     "name": "MACI (Minimal Anti-Collusion Infrastructure)",
+    "short_name": "MACI",
     "description": "MACI uses zero knowledge proofs for collusion resistance in blockchain voting (such as quadratic funding mechanisms) by making it impossible for anyone other than the vote coordinator to verify how a specific user voted. MACI also ensures correct execution of the votes, allowing anyone to verify the results.",
     "links": [
       {
@@ -95,6 +96,7 @@
   },
   {
     "name": "Clr.fund for Everyone",
+    "short_name": "Clr.fund",
     "description": "Infrastructure to make it easy for any community to run their own CLR round with clr.fund.",
     "links": [
       {