Carrers page (#99)

* filter out archived jobs * change footer to careers * enable careers page * change copy * hyperlink email * align product and solution nav with logo * filter archived from directus
pluralsh · Jul 16, 2024 · ee90b80 · ee90b80
1 parent 359782b
commit ee90b80
Show file tree

Hide file tree

Showing 12 changed files with 118 additions and 90 deletions.
diff --git a/pages/careers/index.tsx b/pages/careers/index.tsx
@@ -4,6 +4,8 @@ import { ColorModeProvider } from '@pluralsh/design-system'
 import Head from 'next/head'
 import Script from 'next/script'
 
+import { useTheme } from 'styled-components'
+
 import { ResponsiveAspectRatioSC } from '@src/components/AspectRatio'
 import { BenefitCard } from '@src/components/BenefitCard'
 import { FooterVariant } from '@src/components/FooterFull'
@@ -83,6 +85,8 @@ function Photo({
 }
 
 export default function Index({ jobs }: { jobs: MinJobListingFragment[] }) {
+  const theme = useTheme()
+
   return (
     <>
       <Head>
@@ -263,9 +267,15 @@ export default function Index({ jobs }: { jobs: MinJobListingFragment[] }) {
               heading="Open positions"
               intro={
                 <p>
-                  We’re actively seeking passionate individuals to join our team
-                  and contribute to our mission. Explore our open positions and
-                  unlock exciting opportunities to make a meaningful impact.
+                  We are not actively hiring for new positions right now, but
+                  we’re always interested and receiving general applications to
+                  &nbsp;
+                  <a
+                    style={{ ...theme.partials.marketingText.inlineLink }}
+                    href="mailto:[email protected]"
+                  >
+                    [email protected]
+                  </a>
                 </p>
               }
               className={classNames(

diff --git a/src/components/FooterNav.tsx b/src/components/FooterNav.tsx
@@ -48,7 +48,7 @@ const navItems = [
         href: '/about',
       },
       {
-        children: 'Join the team',
+        children: 'Careers',
         href: '/careers',
       },
       {

diff --git a/src/components/NavigationDesktop.tsx b/src/components/NavigationDesktop.tsx
@@ -1,13 +1,9 @@
-import { type ComponentProps, useMemo } from 'react'
+import { useMemo } from 'react'
 
 import { ColorModeProvider } from '@pluralsh/design-system'
 
-import styled from 'styled-components'
-
 import { type NavData, useNavData } from '@src/contexts/NavDataContext'
 
-import { mqs } from '../breakpoints'
-
 import { ProductTopNavMenu } from './menu/ProductNav'
 import { SolutionTopNavMenu } from './menu/SolutionNav'
 import { TopNavMenu } from './menu/TopNavMenu'
@@ -33,59 +29,54 @@ function flattenNavData(navData: NavData): NavData {
   return ret
 }
 
-export const NavigationDesktop = styled(
-  ({ ...props }: ComponentProps<'div'>) => {
-    const navData = useNavData()
-    const flatNav = useMemo(() => flattenNavData(navData), [navData])
+export function NavigationDesktop({ logoRef }) {
+  const navData = useNavData()
+  const flatNav = useMemo(() => flattenNavData(navData), [navData])
+  const logoLeft = logoRef?.current?.getBoundingClientRect()?.left
 
-    return (
-      <ColorModeProvider mode="dark">
-        <div {...props}>
-          {flatNav?.map((navItem, i) => {
-            if (navItem?.mobile_only) {
-              return null
+  return (
+    <ColorModeProvider mode="dark">
+      <div className="hidden gap-xsmall lg:flex">
+        {flatNav?.map((navItem, i) => {
+          if (navItem?.mobile_only) {
+            return null
+          }
+          if (navItem?.subnav) {
+            if (!i) {
+              return (
+                <ProductTopNavMenu
+                  key={navItem.id}
+                  navItem={navItem}
+                  left={logoLeft}
+                />
+              )
             }
-            if (navItem?.subnav) {
-              if (!i) {
-                return (
-                  <ProductTopNavMenu
-                    key={navItem.id}
-                    navItem={navItem}
-                  />
-                )
-              }
-              if (i === 1) {
-                return (
-                  <SolutionTopNavMenu
-                    key={navItem.id}
-                    navItem={navItem}
-                  />
-                )
-              }
-
+            if (i === 1) {
               return (
-                <TopNavMenu
+                <SolutionTopNavMenu
                   key={navItem.id}
                   navItem={navItem}
+                  left={logoLeft}
                 />
               )
             }
 
             return (
-              <NavItemLink
-                key={navItem?.id}
+              <TopNavMenu
+                key={navItem.id}
                 navItem={navItem}
               />
             )
-          })}
-        </div>
-      </ColorModeProvider>
-    )
-  }
-)(({ theme }) => ({
-  display: 'none',
-  [mqs.fullHeader]: {
-    display: 'flex',
-    gap: theme.spacing.xsmall,
-  },
-}))
+          }
+
+          return (
+            <NavItemLink
+              key={navItem?.id}
+              navItem={navItem}
+            />
+          )
+        })}
+      </div>
+    </ColorModeProvider>
+  )
+}
diff --git a/src/components/PageHeader.tsx b/src/components/PageHeader.tsx
@@ -1,4 +1,10 @@
-import { type ComponentProps, type ReactNode, useEffect, useState } from 'react'
+import {
+  type ComponentProps,
+  type ReactNode,
+  useEffect,
+  useRef,
+  useState,
+} from 'react'
 
 import { Button, PluralLogoFull, usePrevious } from '@pluralsh/design-system'
 import NextLink from 'next/link'
@@ -58,6 +64,7 @@ export function PageHeader({
   useKey(['Escape'], () => {
     setMenuIsOpen(false)
   })
+  const logoRef = useRef(null)
 
   return (
     <HeaderWrap
@@ -75,6 +82,7 @@ export function PageHeader({
             className="logoLink flex flex-shrink-0"
             passHref
             aria-label="Go to Plural homepage"
+            ref={logoRef}
           >
             <PluralLogoFull
               color={
@@ -84,7 +92,7 @@ export function PageHeader({
               }
             />
           </NextLink>
-          <NavigationDesktop />
+          <NavigationDesktop logoRef={logoRef} />
         </nav>
         <Filler />
         <section className="rightSection">

diff --git a/src/components/menu/ProductNav.tsx b/src/components/menu/ProductNav.tsx
@@ -4,7 +4,7 @@ import { useNavigationContext } from '@pluralsh/design-system'
 
 import { useMenuItem } from 'react-aria'
 import { Item } from 'react-stately'
-import styled, { useTheme } from 'styled-components'
+import styled from 'styled-components'
 
 import { type NavList } from '@src/contexts/NavDataContext'
 
@@ -43,9 +43,14 @@ function ProductTopNavMenuItem<T extends NavList>({
 
 const TopNavMenuItemWrapper = styled.li((_) => ({}))
 
-export function ProductTopNavMenu({ navItem }: { navItem: NavList }) {
+export function ProductTopNavMenu({
+  navItem,
+  left,
+}: {
+  navItem: NavList
+  left?: number
+}) {
   const navigate = useNavigationContext().useNavigate()
-  const theme = useTheme()
   const items = useMemo(
     () => navItem?.subnav?.filter((item): item is NavList => !!item),
     [navItem.subnav]
@@ -61,7 +66,7 @@ export function ProductTopNavMenu({ navItem }: { navItem: NavList }) {
       items={items}
       itemRenderer={ProductTopNavMenuItem}
       kind="product"
-      left={theme.spacing.large}
+      left={left}
       onAction={(key) => {
         const item = navItem.subnav?.find((item) => item?.id === key)
         const url = item?.link?.url

diff --git a/src/components/menu/SolutionNav.tsx b/src/components/menu/SolutionNav.tsx
@@ -4,7 +4,7 @@ import { useNavigationContext } from '@pluralsh/design-system'
 
 import { useMenuItem } from 'react-aria'
 import { Item } from 'react-stately'
-import styled, { useTheme } from 'styled-components'
+import styled from 'styled-components'
 
 import { type NavList } from '@src/contexts/NavDataContext'
 
@@ -43,9 +43,14 @@ function SolutionTopNavMenuItem<T extends NavList>({
 
 const TopNavMenuItemWrapper = styled.li((_) => ({}))
 
-export function SolutionTopNavMenu({ navItem }: { navItem: NavList }) {
+export function SolutionTopNavMenu({
+  navItem,
+  left,
+}: {
+  navItem: NavList
+  left?: number
+}) {
   const navigate = useNavigationContext().useNavigate()
-  const theme = useTheme()
   const items = useMemo(
     () => navItem?.subnav?.filter((item): item is NavList => !!item),
     [navItem.subnav]
@@ -61,7 +66,7 @@ export function SolutionTopNavMenu({ navItem }: { navItem: NavList }) {
       items={items}
       itemRenderer={SolutionTopNavMenuItem}
       kind="solution"
-      left={theme.spacing.large}
+      left={left}
       onAction={(key) => {
         const item = navItem.subnav?.find((item) => item?.id === key)
         const url = item?.link?.url

diff --git a/src/data/getSiteSettings.tsx b/src/data/getSiteSettings.tsx
@@ -158,14 +158,14 @@ export const getSiteSettings = (solutions?: Solution[]) => ({
               url: '/about',
             },
           },
-          //   {
-          //     id: '6-3',
-          //     link: {
-          //       id: '6-3',
-          //       title: 'Careers',
-          //       url: '/careers',
-          //     },
-          //   },
+          {
+            id: '6-3',
+            link: {
+              id: '6-3',
+              title: 'Careers',
+              url: '/careers',
+            },
+          },
           {
             id: '6-4',
             link: {

diff --git a/src/generated/graphqlDirectus.ts b/src/generated/graphqlDirectus.ts
@@ -8296,21 +8296,21 @@ export type SolutionsQueryVariables = Exact<{
 
 export type SolutionsQuery = { __typename?: 'Query', solutions_pages: Array<{ __typename?: 'solutions_pages', id: string, slug: string, title?: string | null, description?: string | null, upper_features_title?: string | null, lower_features_title?: string | null, download_section_title?: string | null, download_section_description?: string | null, upper_features?: Array<{ __typename?: 'solution_features', id: string, title?: string | null, description?: string | null, icon?: string | null, link_title?: string | null, link_url?: string | null } | null> | null, lower_features?: Array<{ __typename?: 'solution_features', id: string, title?: string | null, description?: string | null, icon?: string | null, link_title?: string | null, link_url?: string | null } | null> | null, problems?: Array<{ __typename?: 'solution_problems', id: string, title?: string | null, subtitle?: string | null, problem?: string | null, solution?: string | null } | null> | null, featured_quote?: { __typename?: 'quotes', id: string, quote?: string | null, name?: string | null, title?: string | null, company?: string | null, portrait?: { __typename?: 'directus_files', id: string, title?: string | null, description?: string | null, tags?: any | null, filename_disk?: string | null, filename_download: string, metadata?: any | null, type?: string | null, filesize?: any | null } | null, logo?: { __typename?: 'directus_files', id: string, title?: string | null, description?: string | null, tags?: any | null, filename_disk?: string | null, filename_download: string, metadata?: any | null, type?: string | null, filesize?: any | null } | null } | null }> };
 
-export type MinJobListingFragment = { __typename?: 'job_listings', id: string, slug: string, job_title?: string | null, department?: string | null, tags?: any | null, location?: string | null };
+export type MinJobListingFragment = { __typename?: 'job_listings', id: string, slug: string, job_title?: string | null, department?: string | null, tags?: any | null, location?: string | null, status?: string | null };
 
-export type FullJobListingFragment = { __typename?: 'job_listings', content?: string | null, id: string, slug: string, job_title?: string | null, department?: string | null, tags?: any | null, location?: string | null };
+export type FullJobListingFragment = { __typename?: 'job_listings', content?: string | null, id: string, slug: string, job_title?: string | null, department?: string | null, tags?: any | null, location?: string | null, status?: string | null };
 
 export type JobListingsQueryVariables = Exact<{ [key: string]: never; }>;
 
 
-export type JobListingsQuery = { __typename?: 'Query', job_listings: Array<{ __typename?: 'job_listings', id: string, slug: string, job_title?: string | null, department?: string | null, tags?: any | null, location?: string | null }> };
+export type JobListingsQuery = { __typename?: 'Query', job_listings: Array<{ __typename?: 'job_listings', id: string, slug: string, job_title?: string | null, department?: string | null, tags?: any | null, location?: string | null, status?: string | null }> };
 
 export type JobListingQueryVariables = Exact<{
   slug?: InputMaybe<Scalars['String']['input']>;
 }>;
 
 
-export type JobListingQuery = { __typename?: 'Query', job_listings: Array<{ __typename?: 'job_listings', content?: string | null, id: string, slug: string, job_title?: string | null, department?: string | null, tags?: any | null, location?: string | null }> };
+export type JobListingQuery = { __typename?: 'Query', job_listings: Array<{ __typename?: 'job_listings', content?: string | null, id: string, slug: string, job_title?: string | null, department?: string | null, tags?: any | null, location?: string | null, status?: string | null }> };
 
 export type JobListingSlugsQueryVariables = Exact<{ [key: string]: never; }>;
 
@@ -8588,6 +8588,7 @@ export const MinJobListingFragmentDoc = gql`
   department
   tags
   location
+  status
 }
     `;
 export const FullJobListingFragmentDoc = gql`
@@ -8974,7 +8975,7 @@ export type SolutionsLazyQueryHookResult = ReturnType<typeof useSolutionsLazyQue
 export type SolutionsQueryResult = Apollo.QueryResult<SolutionsQuery, SolutionsQueryVariables>;
 export const JobListingsDocument = gql`
     query JobListings {
-  job_listings {
+  job_listings(filter: {status: {_neq: "archived"}}) {
     ...MinJobListing
   }
 }
@@ -9008,7 +9009,7 @@ export type JobListingsLazyQueryHookResult = ReturnType<typeof useJobListingsLaz
 export type JobListingsQueryResult = Apollo.QueryResult<JobListingsQuery, JobListingsQueryVariables>;
 export const JobListingDocument = gql`
     query JobListing($slug: String) {
-  job_listings(filter: {slug: {_eq: $slug}}) {
+  job_listings(filter: {slug: {_eq: $slug}, status: {_neq: "archived"}}) {
     ...FullJobListing
   }
 }

diff --git a/src/generated/pages.json b/src/generated/pages.json
@@ -5,6 +5,9 @@
   {
     "path": "/careers"
   },
+  {
+    "path": "/community"
+  },
   {
     "path": "/contact-sales"
   },
-Original file line number
+Diff line change
@@ Expand Up / @@ -5,6 +5,9 @@ @@
       {
         "path": "/careers"
       },
+      {
+        "path": "/community"
+      },
       {
         "path": "/contact-sales"
       },
@@ Expand Down @@