Add Info About VS Code Extension (#255)

iterative · Jun 14, 2022 · acb5945 · acb5945
1 parent d05bd08
commit acb5945
Show file tree

Hide file tree

Showing 7 changed files with 171 additions and 24 deletions.
diff --git a/src/components/molecules/HamburgerMenu/index.tsx b/src/components/molecules/HamburgerMenu/index.tsx
@@ -191,6 +191,19 @@ export const HamburgerMenu: React.FC<
                 <span className={styles.subSectionLinkTitle}>MLEM</span>
               </Link>
             </li>
+            <li className={styles.subSection}>
+              <Link
+                href="https://marketplace.visualstudio.com/items?itemName=Iterative.dvc"
+                className={styles.subSectionLink}
+              >
+                <div
+                  className={cn(styles.subSectionLinkImage, styles.bgImgDvc)}
+                />
+                <span className={styles.subSectionLinkTitle}>
+                  VS Code Extension
+                </span>
+              </Link>
+            </li>
           </ul>
         </li>
       </ul>

diff --git a/src/components/organisms/SiteFooter/index.tsx b/src/components/organisms/SiteFooter/index.tsx
@@ -83,13 +83,11 @@ const footerLists: Array<IFooterListPopupProps> = [
       {
         text: 'DVC',
         icon: <Box as="span" sx={{ backgroundImage: `url("${dvcIcon}")` }} />,
-
         url: 'https://dvc.org/'
       },
       {
         text: 'CML',
         icon: <Box as="span" sx={{ backgroundImage: `url("${cmlIcon}")` }} />,
-
         url: '/'
       },
       {
@@ -115,6 +113,11 @@ const footerLists: Array<IFooterListPopupProps> = [
           />
         ),
         url: 'https://mlem.ai/'
+      },
+      {
+        text: 'VS Code Extension',
+        icon: <Box as="span" sx={{ backgroundImage: `url("${dvcIcon}")` }} />,
+        url: 'https://marketplace.visualstudio.com/items?itemName=Iterative.dvc'
       }
     ]
   }

diff --git a/src/components/organisms/SiteHeader/Alert/index.tsx b/src/components/organisms/SiteHeader/Alert/index.tsx
@@ -0,0 +1,21 @@
+import React from 'react'
+import SmartLink from '../../../atoms/SmartLink'
+import { ReactComponent as VsCodeIcon } from '@media/icons/vscode.svg'
+import * as styles from './styles.module.css'
+
+const Alert: React.FC = () => (
+  <div className={styles.alert}>
+    <div className={styles.text}>
+      <VsCodeIcon className={styles.textSvg} width="14" height="14" />
+      <p>
+        Check out our{' '}
+        <SmartLink href="https://marketplace.visualstudio.com/items?itemName=Iterative.dvc">
+          new VS Code extension
+        </SmartLink>{' '}
+        for experiment tracking and model development
+      </p>
+    </div>
+  </div>
+)
+
+export default Alert
diff --git a/src/components/organisms/SiteHeader/Alert/styles.module.css b/src/components/organisms/SiteHeader/Alert/styles.module.css
@@ -0,0 +1,48 @@
+.alert {
+  height: var(--layout-alert-height);
+  line-height: var(--layout-alert-height);
+  font-size: 18px;
+  text-align: center;
+  background-color: #fff;
+  color: rgba(58 45 76 / 70%);
+  width: 100%;
+  transition: 0.5s all, 0s width;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  padding: 0 16px;
+  flex: 0 0 var(--layout-alert-height);
+
+  .text {
+    display: flex;
+    align-items: center;
+    padding: 0 16px;
+    overflow: hidden;
+    justify-content: center;
+  }
+
+  p {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    margin: 0;
+  }
+
+  .textSvg {
+    width: 22px;
+    height: 22px;
+    min-width: 22px;
+    min-height: 22px;
+    margin-right: 8px;
+  }
+
+  a {
+    color: rgba(58 45 76 / 70%);
+    text-decoration: underline;
+
+    &:hover {
+      color: rgba(58 45 76 / 70%);
+      opacity: 0.7;
+    }
+  }
+}
diff --git a/src/components/organisms/SiteHeader/index.tsx b/src/components/organisms/SiteHeader/index.tsx
@@ -3,6 +3,7 @@ import { Flex, Box, Container, Button } from '@theme-ui/components'
 import InstallPopup from '../../molecules/InstallPopup'
 import SmartLink from '../../atoms/SmartLink'
 import SiteLogo from '../../molecules/SiteLogo'
+import Alert from './Alert'
 
 import { ReactComponent as DiscordIcon } from '@media/icons/discord.svg'
 import { ReactComponent as GithubIcon } from '@media/icons/github.svg'
@@ -13,6 +14,7 @@ import { ReactComponent as DvcIcon } from '@media/icons/dvc.svg'
 import { ReactComponent as StudioIcon } from '@media/icons/studio.svg'
 import { ReactComponent as MlemIcon } from '@media/icons/mlem.svg'
 import { ReactComponent as ExternalLinkIcon } from '@media/icons/external-link.svg'
+import { ReactComponent as VsCodeIcon } from '@media/icons/vscode.svg'
 
 import {
   HamburgerMenu,
@@ -29,6 +31,7 @@ interface IHeaderProps {
 }
 interface IOtherToolsItem {
   title: string
+  titleIcon?: JSX.Element
   icon: JSX.Element
   description: string
   href: string
@@ -75,6 +78,13 @@ const otherToolsItems: Array<IOtherToolsItem> = [
     description: 'Open-source version control system for ML projects',
     href: 'https://dvc.org/'
   },
+  {
+    title: 'VS Code Extension',
+    titleIcon: <VsCodeIcon className="title-icon" width="14" height="14" />,
+    icon: <div></div>,
+    description: 'Local ML model development and experiment tracking',
+    href: 'https://marketplace.visualstudio.com/items?itemName=Iterative.dvc'
+  },
   {
     title: 'CML',
     icon: <CmlIcon width="24" height="24" />,
@@ -96,29 +106,32 @@ const OtherToolsPopup: React.FC<IOtherToolsPopupProps> = ({ list, isOpen }) => {
       variant="layout.Header.Nav.OtherToolsPopup"
       sx={isOpen ? { variant: 'layout.Header.Nav.OtherToolsPopup.Open' } : {}}
     >
-      {list.map(({ title, icon, description, href }, i) => (
-        <SmartLink
-          href={href}
-          key={i}
-          variant="layout.Header.Nav.OtherToolsPopup.Link"
-        >
-          <Box variant="layout.Header.Nav.OtherToolsPopup.Link.Icon">
-            {icon}
-          </Box>
-          <Box as="h2" variant="layout.Header.Nav.OtherToolsPopup.Link.Title">
-            {title}
-            {href.match(/^https?:\/\//) && (
-              <ExternalLinkIcon width="16" height="16" />
-            )}
-          </Box>
-          <Box
-            as="p"
-            variant="layout.Header.Nav.OtherToolsPopup.Link.Description"
+      {list.map(
+        ({ title, icon, description, href, titleIcon: TitleIcon }, i) => (
+          <SmartLink
+            href={href}
+            key={i}
+            variant="layout.Header.Nav.OtherToolsPopup.Link"
           >
-            {description}
-          </Box>
-        </SmartLink>
-      ))}
+            <Box variant="layout.Header.Nav.OtherToolsPopup.Link.Icon">
+              {icon}
+            </Box>
+            <Box as="h2" variant="layout.Header.Nav.OtherToolsPopup.Link.Title">
+              {title}
+              {TitleIcon && TitleIcon}
+              {href.match(/^https?:\/\//) && (
+                <ExternalLinkIcon width="16" height="16" />
+              )}
+            </Box>
+            <Box
+              as="p"
+              variant="layout.Header.Nav.OtherToolsPopup.Link.Description"
+            >
+              {description}
+            </Box>
+          </SmartLink>
+        )
+      )}
     </Flex>
   )
 }
@@ -141,6 +154,7 @@ const Header: React.FC<IHeaderProps> = ({ isMain }) => {
           isMain ? { backgroundColor: 'transparent' } : { position: 'sticky' }
         }
       >
+        {isMain && <Alert />}
         <Container variant="layout.Header.Inner">
           <Box as="nav" variant="layout.Header.Nav">
             <SiteLogo variant="layout.Header.Nav.Logo" />

diff --git a/src/gatsby-plugin-theme-ui/index.js b/src/gatsby-plugin-theme-ui/index.js
@@ -257,6 +257,13 @@ export default {
             '&:first-of-type': {
               mt: 0
             },
+            'svg.title-icon': {
+              marginLeft: '4px',
+              marginBottom: '2px',
+              width: '14px',
+              height: '14px',
+              opacity: 1
+            },
             '&:hover': {
               backgroundColor: 'rgba(255, 255, 255, 0.1)',
               svg: {

diff --git a/src/media/icons/vscode.svg b/src/media/icons/vscode.svg