[careers] Export structured data for Google Jobs. (#703)

Fixes gitpod-io/website#696

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<boolean>(rendered || false)
 
     const toggleIsRendered = () => {
         setIsRendered(!isRendered)
     }
 
+    const applicationEmail = `mailto:[email protected]?subject=Application as ${title}`
+
+    const structuredData = {
+        '@context': 'https://schema.org/',
+        '@type': 'JobPosting',
+        title: title,
+        description: (`
+        <div>    
+            <p>${intro}</p>
+            ${paragraphs.split('\n').map((p) => `<p>${p}</p>`).join(' ')}
+            <div>
+                ${lists.map(({ title, items }: Listing) => `
+                    <h4>${title}</h4>
+                    <ul>
+                        ${items.map(item => `<li>${item}</li>`).join(' ')}
+                    </ul>
+                ` ).join(' ')}
+                <p>${textAfterTheLists}</p>
+            </div>
+        </div>
+    `),
+        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 (
         <StyledExpandableJob>
             <button onClick={toggleIsRendered}>
-               <Arrow
-                styles={{ transform: isRendered ? 'rotate(-90deg)' : 'rotate(90deg)' }}
-               />
+                <Arrow
+                    styles={{ transform: isRendered ? 'rotate(-90deg)' : 'rotate(90deg)' }}
+                />
             </button>
             <h3>{title}</h3>
             <p>{intro}</p>
-            {isRendered ? (<>
-            {paragraphs.split('\n').map((p, i) => <p key={i+title}>{p}</p>)}
-                { lists.map((item, i) => <List key={i + item.title} {...item} />) }
-                <p className="after">{textAfterTheLists}</p>
-                <a
-                    href={`mailto:[email protected]?subject=Application as ${title}`}
-                    target="_blank"
-                    className="btn btn--cta"
-                >
-                    Apply Now
+            {
+                isRendered ? (<>
+                    {paragraphs.split('\n').map((p, i) => <p key={i + title}>{p}</p>)}
+                    {lists.map((item, i) => <List key={i + item.title} {...item} />)}
+                    <p className="after">{textAfterTheLists}</p>
+                    <a
+                        href={`mailto:[email protected]?subject=Application as ${title}`}
+                        target="_blank"
+                        className="btn btn--cta"
+                    >
+                        Apply Now
                 </a>
-            </>) : null}
-
-        </StyledExpandableJob>
+                </>) : null
+            }
+            <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(structuredData) }} />
+        </StyledExpandableJob >
     )
 }
 
-const List = ({ title, items }: List) => (
+const List = ({ title, items }: Listing) => (
     <div>
         <h4>{title}</h4>
         <ul>
-            {items.map((item, i) => <li key={item + i}>{item}</li>)}
+            {items.map((item, i) => (
+                <li key={item + i}>{item}</li>
+            ))}
         </ul>
     </div>
 )

src/pages/careers.tsx

@@ -207,7 +207,8 @@ const jobs: ExpandableJobProps[] = [
             },
         ],
         textAfterTheLists: 'We celebrate diversity and strive for an equal, inclusive, empathetic and welcoming environment. Bringing diversity to the team is a big plus. If you are part of a marginalised community, and are not sure if you should apply, please get in touch.',
-        rendered: false
+        rendered: false,
+        date: '2021-19-01T19:00:00.000Z'
     },
     {
         title: 'Senior DevOps Engineer',
@@ -246,7 +247,8 @@ Our mission is to make software development fun and remove all tedious friction.
             }
         ],
         textAfterTheLists: 'We celebrate diversity and strive for an equal, inclusive, empathetic and welcoming environment. Bringing diversity to the team is a big plus. If you are part of a marginalised community, and are not sure if you should apply, please get in touch.',
-        rendered: false
+        rendered: false,
+        date: '2020-10-07T19:00:00.000Z'
     },
 ]