From ee90b807a2fcc7af3007d4a4971732bd72a5902d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ren=C3=AA=20Boaventura?= Date: Tue, 16 Jul 2024 17:42:10 -0300 Subject: [PATCH] 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 --- pages/careers/index.tsx | 16 ++++- src/components/FooterNav.tsx | 2 +- src/components/NavigationDesktop.tsx | 87 +++++++++++++--------------- src/components/PageHeader.tsx | 12 +++- src/components/menu/ProductNav.tsx | 13 +++-- src/components/menu/SolutionNav.tsx | 13 +++-- src/data/getSiteSettings.tsx | 16 ++--- src/generated/graphqlDirectus.ts | 13 +++-- src/generated/pages.json | 3 + src/graph/directus/cms.graphql | 20 ++++--- src/graph/directus/jobs.graphql | 5 +- src/graph/directus/pages.graphql | 8 +-- 12 files changed, 118 insertions(+), 90 deletions(-) diff --git a/pages/careers/index.tsx b/pages/careers/index.tsx index 892240aa..d19ac20b 100644 --- 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 ( <> @@ -263,9 +267,15 @@ export default function Index({ jobs }: { jobs: MinJobListingFragment[] }) { heading="Open positions" intro={

- 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 +   + + hiring@plural.sh +

} className={classNames( diff --git a/src/components/FooterNav.tsx b/src/components/FooterNav.tsx index 06bf1c06..96c7a826 100644 --- 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 index f61791a2..c8e261ef 100644 --- 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 ( - -
- {flatNav?.map((navItem, i) => { - if (navItem?.mobile_only) { - return null + return ( + +
+ {flatNav?.map((navItem, i) => { + if (navItem?.mobile_only) { + return null + } + if (navItem?.subnav) { + if (!i) { + return ( + + ) } - if (navItem?.subnav) { - if (!i) { - return ( - - ) - } - if (i === 1) { - return ( - - ) - } - + if (i === 1) { return ( - ) } return ( - ) - })} -
- - ) - } -)(({ theme }) => ({ - display: 'none', - [mqs.fullHeader]: { - display: 'flex', - gap: theme.spacing.xsmall, - }, -})) + } + + return ( + + ) + })} +
+ + ) +} diff --git a/src/components/PageHeader.tsx b/src/components/PageHeader.tsx index 6a280fa9..087de372 100644 --- 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 ( - +
diff --git a/src/components/menu/ProductNav.tsx b/src/components/menu/ProductNav.tsx index 1c04e0e4..ca93e931 100644 --- 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({ 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 index 96a1233f..80a73da9 100644 --- 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({ 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 index 1125593e..560c7590 100644 --- 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 index 3d9f25ad..ab956b08 100644 --- 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; }>; -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; export const JobListingsDocument = gql` query JobListings { - job_listings { + job_listings(filter: {status: {_neq: "archived"}}) { ...MinJobListing } } @@ -9008,7 +9009,7 @@ export type JobListingsLazyQueryHookResult = ReturnType; 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 index 91a23619..21b34fba 100644 --- a/src/generated/pages.json +++ b/src/generated/pages.json @@ -5,6 +5,9 @@ { "path": "/careers" }, + { + "path": "/community" + }, { "path": "/contact-sales" }, diff --git a/src/graph/directus/cms.graphql b/src/graph/directus/cms.graphql index b2319639..55ed7beb 100644 --- a/src/graph/directus/cms.graphql +++ b/src/graph/directus/cms.graphql @@ -12,7 +12,7 @@ fragment Event on events { } query Events { - events { + events(filter: { status: { _neq: "archived" } }) { ...Event } } @@ -128,7 +128,7 @@ fragment AppDefaults on app_defaults { } query AppExtras($name: String) { - apps(filter: { name: { _eq: $name } }) { + apps(filter: { name: { _eq: $name }, status: { _neq: "archived" } }) { ...AppExtras } app_defaults { @@ -153,7 +153,7 @@ fragment StackDefaults on stack_defaults { } query StackExtras($name: String) { - stacks(filter: { name: { _eq: $name } }) { + stacks(filter: { name: { _eq: $name, status: { _neq: "archived" } } }) { ...StackExtras } stack_defaults { @@ -185,7 +185,7 @@ fragment TeamMember on team_members { } query TeamMembers { - team_members { + team_members(filter: { status: { _neq: "archived" } }) { ...TeamMember } } @@ -205,7 +205,7 @@ fragment FeaturedContributor on featured_contributors { } query FeaturedContributors { - featured_contributors { + featured_contributors(filter: { status: { _neq: "archived" } }) { ...FeaturedContributor } } @@ -225,7 +225,9 @@ fragment FaqList on collapsible_lists { } query FaqList($slug: String) { - collapsible_lists(filter: { slug: { _eq: $slug } }) { + collapsible_lists( + filter: { slug: { _eq: $slug }, status: { _neq: "archived" } } + ) { ...FaqList } } @@ -271,7 +273,7 @@ fragment Solution on solutions_pages { } query SolutionsSlugs { - solutions_pages { + solutions_pages(filter: { status: { _neq: "archived" } }) { slug nav_title category @@ -279,7 +281,9 @@ query SolutionsSlugs { } query Solutions($slug: String) { - solutions_pages(filter: { slug: { _eq: $slug } }) { + solutions_pages( + filter: { slug: { _eq: $slug }, status: { _neq: "archived" } } + ) { ...Solution } } diff --git a/src/graph/directus/jobs.graphql b/src/graph/directus/jobs.graphql index c644ebdd..5799065d 100644 --- a/src/graph/directus/jobs.graphql +++ b/src/graph/directus/jobs.graphql @@ -5,6 +5,7 @@ fragment MinJobListing on job_listings { department tags location + status } fragment FullJobListing on job_listings { @@ -13,13 +14,13 @@ fragment FullJobListing on job_listings { } query JobListings { - job_listings { + job_listings(filter: { status: { _neq: "archived" } }) { ...MinJobListing } } query JobListing($slug: String) { - job_listings(filter: { slug: { _eq: $slug } }) { + job_listings(filter: { slug: { _eq: $slug }, status: { _neq: "archived" } }) { ...FullJobListing } } diff --git a/src/graph/directus/pages.graphql b/src/graph/directus/pages.graphql index 10839a5f..98b9d7dd 100644 --- a/src/graph/directus/pages.graphql +++ b/src/graph/directus/pages.graphql @@ -14,7 +14,7 @@ fragment PageCommunity on page_community { } query PageCommunity { - page_community { + page_community(filter: { status: { _neq: "archived" } }) { ...PageCommunity } } @@ -29,7 +29,7 @@ fragment PageProduct on page_product { } query PageProduct { - page_product { + page_product(filter: { status: { _neq: "archived" } }) { ...PageProduct } } @@ -49,7 +49,7 @@ fragment PageLegal on page_legal { } query PageLegal { - page_legal { + page_legal(filter: { status: { _neq: "archived" } }) { ...PageLegal } } @@ -89,7 +89,7 @@ fragment PageHomepage on page_homepage { } query PageHomepage { - page_homepage { + page_homepage(filter: { status: { _neq: "archived" } }) { ...PageHomepage } }