diff --git a/src/components/careers/ExpandableJob.tsx b/src/components/careers/ExpandableJob.tsx index b58cff3ac..2c32aee6b 100644 --- a/src/components/careers/ExpandableJob.tsx +++ b/src/components/careers/ExpandableJob.tsx @@ -3,51 +3,52 @@ import React, { useState } from 'react' import styled from '@emotion/styled' import { colors, borders } from '../../styles/variables' import Arrow from '../Arrow' +import GitpodLogo from '../../resources/gitpod-logo-dark.svg' const StyledExpandableJob = styled.div` - position: relative; - padding: 4rem 4rem 4rem 10rem; - background: ${colors.offWhite}; - border: ${borders.light2}; - border-radius: 3px; - - @media(max-width: 600px) { - padding: 4rem 2rem 2rem 8rem; + position: relative; + padding: 4rem 4rem 4rem 10rem; + background: ${colors.offWhite}; + border: ${borders.light2}; + border-radius: 3px; + + @media (max-width: 600px) { + padding: 4rem 2rem 2rem 8rem; + } + + button { + position: absolute; + top: 4rem; + left: 4rem; + border: none; + transform: translateY(-0.6rem); + + @media (max-width: 600px) { + left: 2rem; } - button { - position: absolute; - top: 4rem; - left: 4rem; - border: none; - transform: translateY(-.6rem); - - @media(max-width: 600px) { - left: 2rem; - } - - &:hover { - svg { - fill: ${colors.text}; - } - } + &:hover { + svg { + fill: ${colors.text}; + } } + } - p + p { - margin-top: 2rem; - } + p + p { + margin-top: 2rem; + } - .after { - margin: 5rem 0; - } + .after { + margin: 5rem 0; + } - .btn { - margin-bottom: 5rem; - } + .btn { + margin-bottom: 5rem; + } - h4 { - margin: 5rem 0 2rem; - } + h4 { + margin: 5rem 0 2rem; + } ul { list-style: initial; @@ -66,7 +67,7 @@ const StyledExpandableJob = styled.div` } ` -interface List { +interface Listing { title: string items: string[] } @@ -75,49 +76,116 @@ export interface ExpandableJobProps { title: string intro: string paragraphs: string - lists: List[] + lists: Listing[] textAfterTheLists: string rendered?: boolean + date?: string } -const ExpandableJob = ({ title, intro, paragraphs, lists, textAfterTheLists, rendered }: ExpandableJobProps) => { +const ExpandableJob = ({ title, intro, paragraphs, lists, textAfterTheLists, rendered, date }: ExpandableJobProps) => { const [isRendered, setIsRendered] = useState(rendered || false) const toggleIsRendered = () => { setIsRendered(!isRendered) } + const applicationEmail = `mailto:contact@typefox.io?subject=Application as ${title}` + + const structuredData = { + '@context': 'https://schema.org/', + '@type': 'JobPosting', + title: title, + description: (` +
+

${intro}

+ ${paragraphs.split('\n').map((p) => `

${p}

`).join(' ')} +
+ ${lists.map(({ title, items }: Listing) => ` +

${title}

+
    + ${items.map(item => `
  • ${item}
  • `).join(' ')} +
+ ` ).join(' ')} +

${textAfterTheLists}

+
+
+ `), + datePosted: date, + hiringOrganization: { + '@type': 'Organization', + name: 'Gitpod Inc.', + sameAs: 'https://www.gitpod.io/', + logo: GitpodLogo, + contactPoint: { + '@type': 'ContactPoint', + url: 'https://www.gitpod.io/contact/' + } + }, + // Location: Kiel Office / Germany Remote / France Remote. + // Ref: https://developers.google.com/search/docs/data-types/job-posting#remote-jobs + jobLocation: { + '@type': 'Place', + address: { + '@type': 'PostalAddress', + streetAddress: 'Am Germaniahafen 1', + addressLocality: 'Kiel', + postalCode: '24143', + addressCountry: 'Germany' + } + }, + applicantLocationRequirements: [ + { + '@type': 'Country', + name: 'Germany' + }, + { + '@type': 'Country', + name: 'France' + } + ], + jobLocationType: 'TELECOMMUTE', + employmentType: 'FULL_TIME', + applicationContact: { + '@type': 'ContactPoint', + email: applicationEmail + } + } + return (

{title}

{intro}

- {isRendered ? (<> - {paragraphs.split('\n').map((p, i) =>

{p}

)} - { lists.map((item, i) => ) } -

{textAfterTheLists}

- - Apply Now + { + isRendered ? (<> + {paragraphs.split('\n').map((p, i) =>

{p}

)} + {lists.map((item, i) => )} +

{textAfterTheLists}

+
+ Apply Now - ) : null} - -
+ ) : null + } +