Merge pull request #63 from pluralsh/klink/cd-launch

feat: CD Launch changes

package.json

@@ -2,7 +2,7 @@
   "name": "plural-marketing-site",
   "private": true,
   "engines": {
-    "node": "18.12.1"
+    "node": "18.18.2"
   },
   "scripts": {
     "dev": "run-s generate:pageindex dev:watch",
@@ -89,37 +89,37 @@
     "usehooks-ts": "2.9.1"
   },
   "devDependencies": {
-    "@graphql-codegen/cli": "4.0.1",
-    "@graphql-codegen/client-preset": "4.0.1",
+    "@graphql-codegen/cli": "5.0.0",
+    "@graphql-codegen/client-preset": "4.1.0",
     "@next/bundle-analyzer": "13.4.12",
     "@pluralsh/eslint-config-typescript": "2.5.56",
     "@pluralsh/stylelint-config": "2.0.5",
     "@types/node": "20.4.2",
     "@types/react-dom": "18.2.7",
-    "@types/styled-components": "5.1.26",
+    "@types/styled-components": "5.1.30",
     "@typescript-eslint/eslint-plugin": "5.62.0",
     "autoprefixer": "10.4.14",
     "concurrently": "8.2.0",
     "cross-env": "7.0.3",
-    "eslint": "8.46.0",
-    "eslint-config-next": "13.4.10",
-    "eslint-config-prettier": "8.8.0",
-    "eslint-import-resolver-typescript": "3.5.5",
-    "eslint-plugin-import": "2.27.5",
+    "eslint": "8.53.0",
+    "eslint-config-next": "14.0.2",
+    "eslint-config-prettier": "9.0.0",
+    "eslint-import-resolver-typescript": "3.6.1",
+    "eslint-plugin-import": "2.29.0",
     "eslint-plugin-import-newlines": "1.3.4",
-    "eslint-plugin-jsx-a11y": "6.7.1",
-    "eslint-plugin-react": "7.32.2",
+    "eslint-plugin-jsx-a11y": "6.8.0",
+    "eslint-plugin-react": "7.33.2",
     "eslint-plugin-react-hooks": "4.6.0",
     "husky": "8.0.3",
-    "lint-staged": "13.2.3",
+    "lint-staged": "15.0.2",
     "npm-run-all": "4.1.5",
     "postcss": "8.4.27",
-    "prettier": "2.8.8",
+    "prettier": "3.0.3",
     "react-hooks": "1.0.1",
     "stylelint": "15.10.1",
     "stylelint-config-prettier": "9.0.5",
     "tailwindcss": "3.3.3",
-    "typescript": "4.9.5"
+    "typescript": "5.2.2"
   },
   "packageManager": "[email protected]",
   "lint-staged": {

pages/_app.tsx

@@ -15,7 +15,6 @@ import NextLink from 'next/link'
 import { useRouter } from 'next/router'
 
 import { MarkdocContextProvider } from '@pluralsh/design-system/dist/markdoc'
-import { SSRProvider } from 'react-aria'
 import { ThemeProvider as StyledThemeProvider } from 'styled-components'
 import { SWRConfig } from 'swr'
 
@@ -103,21 +102,19 @@ function App({ Component, pageProps }: MyAppProps) {
   )
 
   return (
-    <SSRProvider>
-      <MarkdocContextProvider value={{ variant: 'docs' }}>
-        <NavigationContextProvider value={navContextVal}>
-          <SWRConfig value={gProps.swrConfig}>
-            <BreakpointProvider>
-              <ThemeProvider theme={honorableTheme}>
-                <StyledThemeProvider theme={styledTheme}>
-                  <FillLevelProvider value={0}>{app}</FillLevelProvider>
-                </StyledThemeProvider>
-              </ThemeProvider>
-            </BreakpointProvider>
-          </SWRConfig>
-        </NavigationContextProvider>
-      </MarkdocContextProvider>
-    </SSRProvider>
+    <MarkdocContextProvider value={{ variant: 'docs' }}>
+      <NavigationContextProvider value={navContextVal}>
+        <SWRConfig value={gProps.swrConfig}>
+          <BreakpointProvider>
+            <ThemeProvider theme={honorableTheme}>
+              <StyledThemeProvider theme={styledTheme}>
+                <FillLevelProvider value={0}>{app}</FillLevelProvider>
+              </StyledThemeProvider>
+            </ThemeProvider>
+          </BreakpointProvider>
+        </SWRConfig>
+      </NavigationContextProvider>
+    </MarkdocContextProvider>
   )
 }
 

pages/applications/[repo].tsx

@@ -170,7 +170,8 @@ export default function App({
       key: recipe.name,
       label:
         providerToProviderName[recipe?.provider?.toUpperCase() || ''] ||
-        recipe.provider,
+        recipe.provider ||
+        '',
       language: 'shell',
       content: `plural bundle install ${repo?.name} ${recipe.name}`,
       iconLight: getProviderIcon({ provider: recipe?.provider, mode: 'light' }),
@@ -398,7 +399,7 @@ const normalizeAppExtras = (extras: AppExtrasQuery) =>
     ...Object.fromEntries(
       Object.entries(extras.apps?.[0] || {}).filter(([_, val]) => !!val)
     ),
-  } as MergeDeep<AppDefaultsFragment, AppExtrasFragment>)
+  }) as MergeDeep<AppDefaultsFragment, AppExtrasFragment>
 
 export const getStaticProps: GetStaticProps<AppPageProps> = async (context) => {
   const repoName = context?.params?.repo

pages/continuous-deployment.tsx

@@ -1,11 +1,7 @@
-import { ColorModeProvider } from '@pluralsh/design-system'
 import { type InferGetStaticPropsType } from 'next'
 
 import { ArticleCard } from '@src/components/ArticleCard'
-import Embed from '@src/components/Embed'
 import { FooterVariant } from '@src/components/FooterFull'
-import { HubspotForm } from '@src/components/HubspotForm'
-import { Columns, EqualColumn } from '@src/components/layout/Columns'
 import { GradientBG } from '@src/components/layout/GradientBG'
 import {
   StandardPageSection,
@@ -16,43 +12,11 @@ import {
   CenteredSectionHead,
   SubsectionHead,
 } from '@src/components/SectionHeads'
-import { BasicUl, Body1, Body2, InlineLink } from '@src/components/Typography'
+import { BasicUl, Body2, InlineLink } from '@src/components/Typography'
 import { propsWithGlobalSettings } from '@src/utils/getGlobalProps'
 
 import { HeaderPad } from '../src/components/layout/HeaderPad'
 
-function SignUpSection({ containerId }: { containerId: string }) {
-  return (
-    <ColorModeProvider
-      mode="light"
-      className="bg-fill-zero"
-    >
-      <StandardPageSection className="">
-        <StandardPageWidth>
-          <Columns>
-            <EqualColumn className="flex flex-col gap-y-large">
-              <SubsectionHead
-                heading="Sign up for continuous deployment early access"
-                headingProps={{ as: 'h1' }}
-              />
-              <Body1 className="[text-wrap:balance]">
-                An end-to-end solution for managing Kubernetes clusters and
-                application deployment. Join our early access community today.
-              </Body1>
-            </EqualColumn>
-            <EqualColumn>
-              <HubspotForm
-                uniqueKey={containerId}
-                formId="48ee95b2-8ce1-41cb-86bd-b9ae7a9f7fb6"
-              />
-            </EqualColumn>
-          </Columns>
-        </StandardPageWidth>
-      </StandardPageSection>
-    </ColorModeProvider>
-  )
-}
-
 export default function Legal(
   _props: InferGetStaticPropsType<typeof getStaticProps>
 ) {
@@ -64,58 +28,26 @@ export default function Legal(
         position="top middle"
         image="/images/gradients/gradient-bg-1.jpg"
       >
-        {/* <HomePageHero
-          padBottom={false}
-          heading={metaTitle}
-          description={
-            <div className="[text-wrap:balance]">
-              An end-to-end solution for managing Kubernetes clusters and
-              application deployment. Join our early access community today.
-            </div>
-          }
-        /> */}
         <img
           className=" "
           src="/images/cont-deploy/deployments-hero.png"
           alt=""
         />
       </HeaderPad>
-
-      <SignUpSection containerId="1" />
-
       <StandardPageSection className="bg-fill-zero">
         <StandardPageWidth>
           <div className="flex flex-col gap-y-xxxxlarge md:gap-y-xxxxxlarge xxl:gap-y-xxxxxxlarge">
-            <div className="mx-auto max-w-[960px]">
-              <ArticleCard
-                preHeading="Whitepaper"
-                heading="Accelerate Kubernetes adoption with Plural Continuous Deployment"
-                ctas={[
-                  {
-                    label: 'Read the whitepaper',
-                    url: '/downloads/Whitepaper%20-%20Accelerate%20Kubernetes%20Adoption%20with%20Plural%20Continuous%20Deployment.pdf',
-                    // download: true,
-                  },
-                ]}
-                thumbnail="/images/cont-deploy/whitepaper.png"
-              />
-            </div>
-
             <div className="flex flex-col gap-y-xxlarge">
               <CenteredSectionHead
-                heading="Plural Continuous Deployment"
+                heading="Plural deployments"
                 intro={
-                  <>
-                    Deploy and manage your software with Plural Continuous
-                    Deployment. An end-to-end solution for managing Kubernetes
-                    clusters and application deployment on your cloud.
-                  </>
+                  <>Deploy and manage your software with Plural on your cloud</>
                 }
               />
               <div>
                 <img
                   className="block w-full"
-                  src="/images/cont-deploy/diagram.png"
+                  src="/images/cont-deploy/architecture.png"
                   aria-describedby="cd-diagram-content"
                 />
                 <div
@@ -153,10 +85,10 @@ export default function Legal(
               <BasicUl>
                 <li>
                   Rapidly create new Kubernetes environments across any cloud
-                  without ever having to write code
+                  without ever having to write terraform
                 </li>
                 <li>
-                  Managed, zero downtime upgrades with cluster api
+                  Managed, zero-downtime upgrades with cluster api
                   reconciliation loops, don’t worry about sloppy and fragile
                   terraform rollouts
                 </li>
@@ -193,7 +125,7 @@ export default function Legal(
             <div className="flex flex-col gap-y-xxlarge">
               <div className="flex flex-col gap-y-xlarge text-center">
                 <SubsectionHead
-                  heading="Move code to production with powerful pipelines"
+                  heading="Move Code to Production with Powerful Pipelines"
                   headingProps={{ className: 'text-center' }}
                 />
                 <Body2 as="p">
@@ -227,17 +159,24 @@ export default function Legal(
                 />
               </div>
             </div>
-            {/* <div className="mx-auto max-w-[960px]"> */}
-            <Embed
-              url="https://www.youtube.com/watch?v=yh9DMwjtOhQ"
-              aspectRatio="16 / 9"
-            />
-            {/* </div> */}
+
+            <div>
+              <ArticleCard
+                preHeading="Whitepaper"
+                heading="Accelerate Kubernetes adoption with Plural Continuous Deployment"
+                ctas={[
+                  {
+                    label: 'Read the whitepaper',
+                    url: '/downloads/Whitepaper%20-%20Accelerate%20Kubernetes%20Adoption%20with%20Plural%20Continuous%20Deployment.pdf',
+                    // download: true,
+                  },
+                ]}
+                thumbnail="/images/cont-deploy/whitepaper.png"
+              />
+            </div>
           </div>
         </StandardPageWidth>
       </StandardPageSection>
-
-      <SignUpSection containerId="2" />
     </>
   )
 }