feat: datachain release banner and updates (#5284)

src/components/Home/Alert/index.tsx

@@ -1,20 +1,21 @@
 import Link from '@dvcorg/gatsby-theme-iterative/src/components/Link'
 import { cn } from '../../../utils'
+import { githubDatachainUrl } from '../../../utils/externalUrls'
+import { ReactComponent as GithubSVG } from '@dvcorg/gatsby-theme-iterative/src/components/SocialIcon/github.svg'
 
 const banner = {
-  title:
-    'DataChain Open-Source Release - A New Way to Manage your Unstructured Data',
-  subtitle: 'Webinar | Wednesday, July 24th | 11 am ET',
-  link: 'https://www.linkedin.com/events/7217199578704445442/about/'
+  title: 'DataChain Open-Source Release',
+  subtitle: 'A New Way to Manage your Unstructured Data',
+  link: githubDatachainUrl
 }
 
 const Alert = () => (
   <>
     <div className={cn('py-2', 'bg-orange text-white', `w-full`)}>
       <div className="flex items-center gap-3 justify-center">
         <div className="text-right">
-          <strong>{banner.title}</strong>
-          <div>{banner.subtitle}</div>
+          <strong className="font-medium text-xl">{banner.title}</strong>
+          <div className="text-sm">{banner.subtitle}</div>
         </div>
         <div>
           <Link
@@ -26,10 +27,12 @@ const Alert = () => (
               'font-medium',
               'whitespace-nowrap',
               'bg-orange-50 text-orange-700',
-              'hover:bg-white'
+              'hover:bg-white',
+              'flex items-center'
             )}
           >
-            Register Now
+            Star us on GitHub{' '}
+            <GithubSVG className="h-5 w-5 inline-block text-orange" />
           </Link>
         </div>
       </div>

src/components/Home/Hero/GetStarted/GetStartedWithDatachain.tsx

@@ -1,7 +1,11 @@
 import HeroContainer from '../../../HeroContainer'
 import { cn } from '../../../../utils'
 import DatachainSlides from '../../LandingHero/DatachainSlides'
-import GetOnTheWaitlistForm from '../GetOnTheWaitlist/Form'
+import { ReactComponent as GithubSVG } from '@dvcorg/gatsby-theme-iterative/src/components/SocialIcon/github.svg'
+
+import { CTAButton } from '../HeroSection'
+import { githubDatachainUrl } from '../../../../utils/externalUrls'
+import { navigateLink } from '../../../../utils/urls'
 
 const GetStartedWithDatachain = () => {
   return (
@@ -12,7 +16,22 @@ const GetStartedWithDatachain = () => {
       </div>
       <DatachainSlides />
       <div className={cn('flex flex-col items-center justify-center w-full')}>
-        <GetOnTheWaitlistForm />
+        <CTAButton
+          className={cn(
+            'bg-purple hover:bg-[var(--color-purple-hover)] text-light',
+            'text-center',
+            'min-w-max',
+            'justify-center',
+            'min-h-[3rem]',
+            'disabled:bg-gray-400 disabled:cursor-not-allowed'
+          )}
+          type="button"
+          onClick={() => {
+            navigateLink(githubDatachainUrl)
+          }}
+        >
+          Star us on Github <GithubSVG className="h-6 w-6 inline-block" />
+        </CTAButton>
       </div>
     </HeroContainer>
   )

src/components/Home/Hero/HeroSection.tsx

@@ -9,6 +9,7 @@ import useStars from '../../../gatsby/hooks/stars'
 import Link from '@dvcorg/gatsby-theme-iterative/src/components/Link'
 import { navigate } from 'gatsby'
 import { StaticImage } from 'gatsby-plugin-image'
+import { githubDatachainUrl, githubDvcUrl } from '../../../utils/externalUrls'
 
 interface ISectionProps {
   className?: string
@@ -90,6 +91,7 @@ export const CTAButton = ({
 
 const HeroSection = () => {
   const stars = useStars()
+  const datachainStars = useStars('datachain')
 
   return (
     <div className="md:border-y-2 md:border-solid md:border-y-light">
@@ -106,7 +108,23 @@ const HeroSection = () => {
             <h2 className="text-2xl md:text-3xl font-medium">
               GenAI data chain
             </h2>
-            <Badge className="bg-dark text-light">Coming soon</Badge>
+            <Link
+              href={githubDatachainUrl}
+              className="no-underline hover:opacity-80"
+            >
+              <Badge className="bg-dark text-light">
+                {datachainStars ? (
+                  shortenNumber(datachainStars, 1)
+                ) : (
+                  <span className="animate-pulse">---</span>
+                )}
+                <img
+                  src="/img/landing/github.svg"
+                  alt="Github Logo"
+                  className="h-5 w-5"
+                />
+              </Badge>
+            </Link>
           </div>
         </Section>
         <Section>
@@ -117,10 +135,7 @@ const HeroSection = () => {
             <h2 className="text-2xl md:text-3xl font-medium">
               Data and model versioning
             </h2>
-            <Link
-              href="https://github.com/iterative/dvc"
-              className="no-underline hover:opacity-80"
-            >
+            <Link href={githubDvcUrl} className="no-underline hover:opacity-80">
               <Badge className={cn('bg-dark text-light')}>
                 {stars ? (
                   shortenNumber(stars, 1)

src/gatsby/hooks/stars.ts

@@ -3,7 +3,7 @@ import { useStaticQuery, graphql } from 'gatsby'
 import fetch from 'isomorphic-fetch'
 import * as Sentry from '@sentry/gatsby'
 
-export default function useStars(): number | null {
+export default function useStars(repo = 'dvc'): number | null {
   // Get the amount of stars from build time
   const staticStars = useStaticQuery(graphql`
     query GithubStarsQuery {
@@ -13,14 +13,15 @@ export default function useStars(): number | null {
     }
   `).staticGithubData.stars
 
+  const defaultStars = repo === 'dvc' ? staticStars : null
   // Maintain an updatable state so we can update stars on delivery
-  const [stars, setStars] = useState(staticStars)
+  const [stars, setStars] = useState(defaultStars)
 
   // Run an IIFE to update from the server on the client side.
   useEffect(() => {
     ;(async (): Promise<void> => {
       try {
-        const res = await fetch(`/api/github/stars?repo=dvc`)
+        const res = await fetch(`/api/github/stars?repo=${repo}`)
 
         if (res.status === 200) {
           const json = await res.json()
@@ -29,11 +30,11 @@ export default function useStars(): number | null {
           Sentry.captureMessage(
             `Stars update response status was ${res.status}! Using static value.`
           )
-          setStars(staticStars)
+          setStars(defaultStars)
         }
       } catch (error) {
         Sentry.captureException(error)
-        setStars(staticStars)
+        setStars(defaultStars)
       }
     })()
   }, [])

src/utils/externalUrls.ts

@@ -10,6 +10,10 @@ export const studioUrl = 'https://studio.iterative.ai'
 // export const cloudUrl = 'https://cloud.dvc.ai'
 export const cloudUrl = studioUrl
 
+// Github Urls
+export const githubDatachainUrl = `https://github.com/iterative/datachain`
+export const githubDvcUrl = `https://github.com/iterative/dvc`
+
 // HubSpot Forms
 interface IHubSpotFormUrlOptions {
   portalId?: string

src/utils/urls.ts

@@ -0,0 +1,13 @@
+import { navigate } from 'gatsby'
+
+export function isExternalLink(url: string) {
+  return /^https?:\/\//.test(url)
+}
+
+export const navigateLink = (link: string) => {
+  if (isExternalLink(link)) {
+    return window.open(link, `_blank`, `noreferrer`)
+  } else {
+    navigate(link)
+  }
+}