project links tweaks

data/projects.yml

@@ -8,16 +8,25 @@
 
     Initial website in collaboration with [Balance](https://balance.io/). Key visuals in collaboration with [Wojciech Hupert](https://twitter.com/wojciechhupert).
   links:
-    - title: Link
+    - title: oceanprotocol.com
+      type: website
       url: https://oceanprotocol.com
+    - title: docs.oceanprotocol.com
+      type: website
+      url: https://docs.oceanprotocol.com
     - title: Styleguide
       url: https://oceanprotocol.com/art
-    - title: GitHub
+    - title: '@oceanprotocol/art'
+      type: github
       url: https://github.com/oceanprotocol/art
+    - title: '@oceanprotocol/docs'
+      type: github
+      url: https://github.com/oceanprotocol/docs
   techstack:
     - Sketch
     - Affinity Designer
     - React
+    - Gatsby
     - HTML
     - SCSS
     - JavaScript

src/components/Layout.jsx

@@ -7,10 +7,10 @@ import Header from './organisms/Header'
 import Footer from './organisms/Footer'
 import styles from './Layout.module.scss'
 
-if (process.env.NODE_ENV !== 'production') {
-  const { whyDidYouUpdate } = require('why-did-you-update')
-  whyDidYouUpdate(React)
-}
+// if (process.env.NODE_ENV !== 'production') {
+//   const { whyDidYouUpdate } = require('why-did-you-update')
+//   whyDidYouUpdate(React)
+// }
 
 const timeout = 250
 

src/components/molecules/ProjectLinks.jsx

@@ -12,8 +12,27 @@ import { ReactComponent as Dribbble } from '../../images/dribbble.svg'
 import icons from '../atoms/Icons.module.scss'
 import styles from './ProjectLinks.module.scss'
 
-const LinkIcon = props => {
-  switch (props.title) {
+const LinkIcon = ({ title, type, ...props }) => {
+  if (type) {
+    switch (type) {
+      case 'website':
+        return <Link {...props} />
+      case 'github':
+        return <GitHub {...props} />
+      case 'dribbble':
+        return <Dribbble {...props} />
+      case 'info':
+        return <Info {...props} />
+      case 'download':
+        return <Download {...props} />
+      case 'styleguide':
+        return <Styleguide {...props} />
+      default:
+        return null
+    }
+  }
+
+  switch (title) {
     case 'Link':
       return <Link {...props} />
     case 'GitHub':
@@ -39,12 +58,12 @@ const ProjectLinks = ({ links }) => (
 
     <ul>
       {links.map(link => {
-        const { title, url } = link
+        const { title, url, type } = link
 
         return (
           <li key={title}>
             <Button href={url}>
-              <LinkIcon title={title} className={icons.icon} />
+              <LinkIcon title={title} type={type} className={icons.icon} />
               {title}
             </Button>
           </li>

src/components/molecules/ProjectLinks.module.scss

@@ -3,20 +3,20 @@
 .projectLinks {
     ul {
         padding: 0;
-        display: grid;
-        grid-template-columns: 1fr 1fr;
-        grid-gap: $spacer / 2;
     }
 
     li {
         display: flex;
         align-items: center;
-        justify-content: center;
+        white-space: nowrap;
+        margin-bottom: $spacer / 2.1;
     }
 
     a {
         display: block;
         width: 100%;
+        text-transform: none;
+        text-align: left;
     }
 }
 

src/images/link.svg

@@ -1,3 +1,3 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
-  <path d="M10.0010417,0 C4.48541667,0 0,4.48645833 0,10 C0,15.5135417 4.48541667,20 10.0010417,20 C15.5145833,20 20.0010417,15.5135417 20.0010417,10 C20.0010417,4.48645833 15.5145833,0 10.0010417,0 Z M18.5302083,10 C18.5302083,11.9510417 17.8677083,13.75 16.7635417,15.1875 C16.4510417,14.94375 16.11875,14.284375 16.43125,13.6010417 C16.746875,12.9135417 16.8291667,11.321875 16.75625,10.7020833 C16.6875,10.0833333 16.365625,8.59270833 15.4916667,8.578125 C14.61875,8.565625 14.0197917,8.27708333 13.5010417,7.24166667 C12.425,5.0875 15.5208333,4.67395833 14.4447917,3.48229167 C14.14375,3.146875 12.5875,4.859375 12.359375,2.57708333 C12.3447917,2.41354167 12.5,2.16875 12.709375,1.91458333 C16.0885417,3.05 18.5302083,6.24479167 18.5302083,10 Z M8.82916667,1.55520833 C8.625,1.953125 8.08645833,2.11458333 7.759375,2.41354167 C7.046875,3.05833333 6.740625,2.96875 6.35729167,3.5875 C5.97083333,4.20625 4.725,5.096875 4.725,5.54479167 C4.725,5.99270833 5.35416667,6.51979167 5.66875,6.41770833 C5.98333333,6.31354167 6.81354167,6.31979167 7.30104167,6.490625 C7.78958333,6.66354167 11.378125,6.83645833 10.234375,9.86979167 C9.871875,10.834375 8.28333333,10.671875 7.86041667,12.26875 C7.796875,12.503125 7.57708333,13.5041667 7.56354167,13.83125 C7.5375,14.3375 7.921875,16.2458333 7.43333333,16.2458333 C6.94270833,16.2458333 5.62291667,14.5385417 5.62291667,14.2291667 C5.62291667,13.9197917 5.28125,12.8354167 5.28125,11.90625 C5.28125,10.978125 3.7,10.9927083 3.7,9.75833333 C3.7,8.64583333 4.55729167,8.09166667 4.36458333,7.55729167 C4.17604167,7.02604167 2.66979167,7.00833333 2.04166667,6.94270833 C3.13854167,4.09791667 5.71875,1.98645833 8.82916667,1.55520833 Z M7.31770833,18.09375 C7.83020833,17.8229167 7.88229167,17.4729167 8.346875,17.4552083 C8.878125,17.43125 9.31041667,17.2479167 9.909375,17.115625 C10.440625,17 11.3916667,16.4604167 12.228125,16.3916667 C12.934375,16.334375 14.3270833,16.428125 14.7020833,17.109375 C13.353125,18.00625 11.7354167,18.5291667 10,18.5291667 C9.06354167,18.5291667 8.16145833,18.3739583 7.31770833,18.09375 Z"/>
+  <path fill="#000000" d="M4.97671054,15.0242953 C4.97671054,15.0242953 9.67879659,14.3788908 11.6860356,12.3726811 C13.6932746,10.3664715 14.3376498,5.66335605 14.3376498,5.66335605 C14.3376498,5.66335605 9.6345344,6.30876059 7.62832474,8.31497025 C5.62211509,10.3211799 4.97671054,15.0242953 4.97671054,15.0242953 Z M8.64429649,9.32888329 C9.48630752,8.48687226 11.0993042,7.88778862 12.4827551,7.51516271 C12.1111585,8.89655489 11.5100162,10.5208745 10.6710932,11.3567094 C10.1121543,11.9177069 9.20323535,11.9177069 8.64429649,11.3567094 C8.08329892,10.7977705 8.08329892,9.88988086 8.64429649,9.32888329 Z M9.65718017,0.686645508 C4.32314971,0.686645508 0,5.00979522 0,10.3428198 C0,15.6768503 4.32314971,20 9.65718017,20 C14.9891989,20 19.3133545,15.6768503 19.3133545,10.3428198 C19.3133545,5.00979522 14.9891989,0.686645508 9.65718017,0.686645508 Z M9.65613055,18.6525823 C5.06717354,18.6525823 1.34636804,14.9328702 1.34636804,10.3428198 C1.34636804,5.75386282 5.06608015,2.03305732 9.65613055,2.03305732 C14.2450876,2.03305732 17.9669865,5.75276943 17.9669865,10.3428198 C17.9669865,14.9317768 14.2450876,18.6525823 9.65613055,18.6525823 Z M9.65618056,17.8924043 C5.48702185,17.8924043 2.10659604,14.5129719 2.10659604,10.3428198 C2.10659604,6.17366111 5.48602848,2.79323531 9.65618056,2.79323531 C13.8253393,2.79323531 17.2067585,6.17266775 17.2067585,10.3428198 C17.2067585,14.5119785 13.8253393,17.8924043 9.65618056,17.8924043 Z"/>
 </svg>

src/templates/Project.jsx

@@ -84,6 +84,7 @@ export const projectAndProjectsQuery = graphql`
       links {
         title
         url
+        type
       }
       techstack
       img {

src/templates/Project.module.scss

@@ -30,7 +30,7 @@
     grid-gap: $spacer * 2;
 
     @media (min-width: $screen-sm) {
-        grid-template-columns: 1fr 1fr;
+        grid-template-columns: 2fr 3fr;
         grid-gap: $spacer * 2;
     }
 }