Allow adding links to logos (#278)

- based on request
#262 (comment)

cc: @aguschin 

- removed white background (fixes #272 )

Co-authored-by: Alexander Guschin <[email protected]>

src/components/Home/Header/index.module.css

@@ -28,32 +28,51 @@
 
   &__logos {
     grid-area: logos;
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    justify-content: center;
+    /**
+    * User input values.
+    */
+    --grid-layout-gap: 5px;
+    --grid-column-count: 5;
+    --grid-item--min-width: 85px;
+
+    /**
+    * Calculated values.
+    */
+    --gap-count: calc(var(--grid-column-count) - 1);
+    --total-gap-width: calc(var(--gap-count) * var(--grid-layout-gap));
+    --grid-item--max-width: calc(
+      (100% - var(--total-gap-width)) / var(--grid-column-count)
+    );
+
+    display: grid;
+    grid-template-columns: repeat(
+      auto-fill,
+      minmax(max(var(--grid-item--min-width), var(--grid-item--max-width)), 1fr)
+    );
+    grid-gap: var(--grid-layout-gap);
+    display: grid;
+    grid-auto-rows: 1fr;
     padding: 10px;
     list-style: none;
 
     @media screen(md) {
       margin: 34px 0 0;
-      li {
-        flex-basis: 20%;
-      }
     }
 
     @media screen(lg) {
       margin: 12px -40px 0;
     }
   }
 
+  &__list {
+    @apply flex items-center justify-center p-1 rounded-4 md:rounded-6 lg:rounded-8 border border-solid border-transparent;
+  }
+
   &__logo {
     width: var(--width-sm);
-    margin: 12px 16px 0 0;
 
     @media screen(md) {
       width: var(--width-md);
-      margin: 0 auto 10px;
     }
 
     @media screen(lg) {

src/components/Home/Header/index.tsx

@@ -26,12 +26,22 @@ import scikitLearnLogo from '../../../images/logo/scikit-learn.png'
 import streamlitLogo from '../../../images/logo/streamlit.png'
 import tensorflowLogo from '../../../images/logo/tensorflow.png'
 import * as styles from './index.module.css'
+import Link from '@dvcorg/gatsby-theme-iterative/src/components/Link'
 
 interface ITypedRef {
   reset: () => void
   destroy: () => void
 }
 
+interface ILogo {
+  src: string
+  widthSm: number
+  widthMd: number
+  widthLg: number
+  alt: string
+  link?: string
+}
+
 const cliCaptionData: Array<{ bold: string; text: string }> = [
   {
     bold: 'Save your ML model with a Python call.',
@@ -53,54 +63,54 @@ const cliCaptionData: Array<{ bold: string; text: string }> = [
   }
 ]
 
-const logosData: Array<{
-  src: string
-  widthSm: number
-  widthMd: number
-  widthLg: number
-  alt: string
-}> = [
+const logosData: Array<ILogo> = [
   {
-    widthSm: 66,
-    widthMd: 88,
-    widthLg: 136,
+    widthSm: 74,
+    widthMd: 96,
+    widthLg: 144,
     src: fastapiLogo,
-    alt: 'FastAPI logo'
+    alt: 'FastAPI logo',
+    link: '/doc/user-guide/serving/fastapi'
   },
   {
     widthSm: 66,
     widthMd: 88,
     widthLg: 124,
     src: dockerLogo,
-    alt: 'Docker logo'
+    alt: 'Docker logo',
+    link: '/doc/user-guide/building/docker'
   },
   {
     widthSm: 66,
     widthMd: 88,
     widthLg: 124,
     src: streamlitLogo,
-    alt: 'Streamlit logo'
+    alt: 'Streamlit logo',
+    link: '/doc/user-guide/serving/streamlit'
   },
   {
     widthSm: 66,
     widthMd: 88,
     widthLg: 124,
     src: herokuLogo,
-    alt: 'Heroku logo'
+    alt: 'Heroku logo',
+    link: '/doc/user-guide/deploying/heroku'
   },
   {
     widthSm: 55,
     widthMd: 75,
     widthLg: 108,
     src: kubernetesLogo,
-    alt: 'Kubernetes logo'
+    alt: 'Kubernetes logo',
+    link: '/doc/user-guide/deploying/kubernetes'
   },
   {
     widthSm: 66,
     widthMd: 88,
     widthLg: 124,
     src: sagemakerLogo,
-    alt: 'Sagemaker logo'
+    alt: 'Sagemaker logo',
+    link: '/doc/user-guide/deploying/sagemaker'
   },
   {
     widthSm: 66,
@@ -121,14 +131,16 @@ const logosData: Array<{
     widthMd: 88,
     widthLg: 124,
     src: pythonLogo,
-    alt: 'Python logo'
+    alt: 'Python logo',
+    link: '/doc/user-guide/building/pip'
   },
   {
     widthSm: 66,
     widthMd: 78,
     widthLg: 110,
     src: condaLogo,
-    alt: 'Conda logo'
+    alt: 'Conda logo',
+    link: '/doc/user-guide/building/conda'
   },
   {
     widthSm: 66,
@@ -163,7 +175,8 @@ const logosData: Array<{
     widthMd: 50,
     widthLg: 71,
     src: scikitLearnLogo,
-    alt: 'scikit learn logo'
+    alt: 'scikit learn logo',
+    link: '/doc/get-started'
   },
   {
     widthSm: 66,
@@ -191,17 +204,42 @@ const logosData: Array<{
     widthMd: 78,
     widthLg: 120,
     src: numpyLogo,
-    alt: 'Numpy logo'
+    alt: 'Numpy logo',
+    link: '/doc/user-guide/data'
   },
   {
     widthSm: 66,
     widthMd: 78,
     widthLg: 110,
     src: pandasLogo,
-    alt: 'Pandas logo'
+    alt: 'Pandas logo',
+    link: '/doc/user-guide/data'
   }
 ]
 
+const LogoImage = ({
+  widthSm,
+  widthMd,
+  widthLg,
+  src,
+  alt,
+  className
+}: ILogo & { className?: string }) => (
+  <img
+    alt={alt}
+    src={src}
+    className={cn(styles.header__logo, className)}
+    width={widthMd}
+    style={
+      {
+        '--width-sm': `${widthSm}px`,
+        '--width-md': `${widthMd}px`,
+        '--width-lg': `${widthLg}px`
+      } as React.CSSProperties
+    }
+  />
+)
+
 interface ITerminalSlideData {
   allTerminalSlide: {
     nodes: [{ lines: [{ text: string; promptString: string }] }]
@@ -369,24 +407,24 @@ const Header: React.FC = () => {
         </div>
       </div>
       <ul className={styles.header__logos}>
-        {logosData.map(({ widthSm, widthMd, widthLg, src, alt }, i) => (
-          <li key={i}>
-            <img
-              alt={alt}
-              src={src}
-              className={styles.header__logo}
-              width={widthMd}
-              height={35}
-              style={
-                {
-                  '--width-sm': `${widthSm}px`,
-                  '--width-md': `${widthMd}px`,
-                  '--width-lg': `${widthLg}px`
-                } as React.CSSProperties
-              }
-            />
-          </li>
-        ))}
+        {logosData.map((logoDetails, i) =>
+          logoDetails?.link ? (
+            <Link
+              href={logoDetails.link}
+              key={i}
+              className={cn(
+                styles.header__list,
+                'hover:border-purple-800 active:bg-gray-200 transition-colors'
+              )}
+            >
+              <LogoImage {...logoDetails} />
+            </Link>
+          ) : (
+            <li key={i} className={cn(styles.header__list)}>
+              <LogoImage {...logoDetails} />
+            </li>
+          )
+        )}
       </ul>
     </div>
   )