Migrate careers pages (#5)

Add careers page on /careers.

 - Added some reusable components: UnorderedList, OrderedList, TwoColumn Points
 - Added a link to the sitewide header
 - Added a Backend Engineer role

.prettierignore

@@ -2,3 +2,4 @@
 package.json
 package-lock.json
 public
+yarn.lock

package.json

@@ -61,10 +61,10 @@
     "url": "git+https://github.com/RoadieHQ/marketing-site.git"
   },
   "scripts": {
-    "build": "gatsby build",
-    "develop": "gatsby develop",
+    "build": "yarn run clean && gatsby build",
+    "develop": "yarn run clean && gatsby develop",
     "format": "prettier --write \"**/*.{js,jsx,ts,tsx,json,md}\"",
-    "start": "gatsby develop",
+    "start": "yarn run clean && gatsby develop",
     "serve": "gatsby serve",
     "clean": "gatsby clean",
     "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1",

src/components/ButtonLink.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import classnames from 'classnames';
+
+import { useStyles } from './home/Button';
+
+const ButtonLink = ({ text = 'Go', ...props }) => {
+  const classes = useStyles();
+
+  return (
+    <a className={classnames('typography-mono', classes.root)} {...props}>
+      <span>{text}</span>
+    </a>
+  );
+};
+
+export default ButtonLink;

src/components/LayoutControl.js

@@ -11,12 +11,14 @@ const useStyles = createUseStyles(() => ({
 const LayoutControl = ({ children, maxWidthBreakpoint = 'xl' }) => {
   const theme = useTheme();
   const classes = useStyles();
+  const style = { maxWidth: theme.breakpoints.values[maxWidthBreakpoint] };
+
+  if (maxWidthBreakpoint === 'none') {
+    delete style.maxWidth;
+  }
 
   return (
-    <div
-      className={classes.root}
-      style={{ maxWidth: theme.breakpoints.values[maxWidthBreakpoint] }}
-    >
+    <div className={classes.root} style={style}>
       {children}
     </div>
   );

src/components/OrderedList.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import isFunction from 'lodash/isFunction';
+
+const OrderedList = ({ content }) => (
+  <ol>
+    {content.map((point) => (
+      <li key={point} dangerouslySetInnerHTML={{ __html: isFunction(point) ? point() : point }} />
+    ))}
+  </ol>
+);
+
+export default OrderedList;

src/components/SitewideHeader.js

@@ -50,7 +50,7 @@ const useStyles = createUseStyles((theme) => ({
   },
 }));
 
-const SitewideHeader = ({ location }) => {
+const SitewideHeader = () => {
   const classes = useStyles();
   const data = useStaticQuery(query);
 
@@ -64,24 +64,26 @@ const SitewideHeader = ({ location }) => {
         </Link>
       </span>
 
-      <nav className={classes.nav}>
-        {location && !location.pathname.match('\\/backstage\\/plugins\\/?$') && (
-          <span className={classnames('typography-body', classes.textLinkWrapper)}>
+      <nav className={classnames('typography-body', classes.nav)}>
+        <span className={classes.textLinkWrapper}>
+          <span className={classes.leftSpace}>
             <Link to="/backstage/plugins" className={classes.link}>
               Backstage Plugins
             </Link>
           </span>
-        )}
 
-        {location && !location.pathname.includes('/blog') && (
-          <span
-            className={classnames('typography-body', classes.textLinkWrapper, classes.leftSpace)}
-          >
+          <span className={classes.leftSpace}>
+            <Link to="/careers" className={classes.link}>
+              Careers
+            </Link>
+          </span>
+
+          <span className={classes.leftSpace}>
             <Link to="/blog" className={classes.link}>
               Blog
             </Link>
           </span>
-        )}
+        </span>
 
         <span className={classes.leftSpace}>
           <IconLink url={`https://twitter.com/${data.site.siteMetadata.social.twitter}`}>

src/components/TwoColumnPoints.js

@@ -0,0 +1,60 @@
+import React from 'react';
+import classnames from 'classnames';
+import { createUseStyles } from 'react-jss';
+import isFunction from 'lodash/isFunction';
+
+const useStyles = createUseStyles((theme) => ({
+  root: {},
+
+  col: {
+    paddingLeft: 16,
+    paddingEight: 16,
+  },
+
+  strong: {
+    marginTop: 0,
+    lineHeight: '1.75rem',
+  },
+
+  [`@media (min-width: ${theme.breakpoints.values.md}px)`]: {
+    root: {
+      display: 'flex',
+      margin: 'auto',
+    },
+
+    col: {
+      flex: 1,
+    },
+  },
+}));
+
+const Point = ({ title, text, classes }) => {
+  return (
+    <div>
+      <strong className={classes.strong}>{isFunction(title) ? title() : title}</strong>
+      <p>{text}</p>
+    </div>
+  );
+};
+
+const TwoColumnPoints = ({ content = [[], []] }) => {
+  const classes = useStyles();
+
+  return (
+    <div className={classes.root}>
+      <div className={classnames(classes.col, classes.leftCol)}>
+        {content[0].map((props) => (
+          <Point {...props} key={props.title} classes={classes} />
+        ))}
+      </div>
+
+      <div className={classnames(classes.col, classes.rightCol)}>
+        {content[1].map((props) => (
+          <Point {...props} key={props.title} classes={classes} />
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default TwoColumnPoints;

src/components/UnorderedList.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import isFunction from 'lodash/isFunction';
+
+const UnorderedList = ({ content }) => (
+  <ul>
+    {content.map((point) => (
+      <li key={point} dangerouslySetInnerHTML={{ __html: isFunction(point) ? point() : point }} />
+    ))}
+  </ul>
+);
+
+export default UnorderedList;

src/components/blog/PostSummary.js

@@ -3,16 +3,18 @@ import { Link } from 'gatsby';
 import { createUseStyles } from 'react-jss';
 import classnames from 'classnames';
 
-import { postInnerStyles } from '../../templates/BlogPost';
-
 const useStyles = createUseStyles((theme) => ({
   root: {
     marginBottom: '4rem',
   },
 
+  header: {
+    marginBottom: '0.5rem',
+  },
+
   h3: {
     fontSize: '2rem',
-    marginBottom: 0,
+    marginBottom: '0.2rem',
   },
 
   titleLink: {
@@ -31,7 +33,7 @@ const useStyles = createUseStyles((theme) => ({
     marginBottom: 0,
   },
 
-  summary: postInnerStyles(theme),
+  summary: theme.preMadeStyles.content,
 }));
 
 const PostSummary = ({ post }) => {
@@ -41,13 +43,15 @@ const PostSummary = ({ post }) => {
 
   return (
     <article className={classes.root}>
-      <header>
+      <header className={classes.header}>
         <h3 className={classes.h3}>
           <Link to={post.fields.slug} className={classes.titleLink}>
             {title}
           </Link>
         </h3>
-        <small className={classes.date}>{post.frontmatter.date}</small>
+        <small className={classnames('typography-body', classes.date)}>
+          {post.frontmatter.date}
+        </small>
       </header>
       <section className={classnames('typography-content', classes.summary)}>
         <p dangerouslySetInnerHTML={{ __html: summary }} />

src/components/careers/Mission.js

@@ -0,0 +1,23 @@
+import React from 'react';
+
+const Mission = () => (
+  <div>
+    <p>
+      Roadie enables companies to get a grip on their microservices by helping them to adopt{' '}
+      <a href="https://backstage.io" target="__blank">
+        Backstage
+      </a>
+      . Backstage is a service catalog which was created inside Spotify and has been battle-tested
+      in production since 2016. Every day, thousands of Spotify engineers use Backstage to do
+      critical development and operations work.
+    </p>
+
+    <p>
+      We are a talented group of engineers who experienced the problems of microservice sprawl
+      first-hand and decided that there is a better way. By unlocking the power of Backstage, we can
+      make microservice development easier, faster and more enjoyable.
+    </p>
+  </div>
+);
+
+export default Mission;

src/components/home/Button.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { createUseStyles } from 'react-jss';
 import classnames from 'classnames';
 
-const useStyles = createUseStyles((theme) => ({
+export const useStyles = createUseStyles((theme) => ({
   root: {
     display: 'inline-block',
     lineHeight: 1.5,
@@ -12,6 +12,7 @@ const useStyles = createUseStyles((theme) => ({
     userSelect: 'none',
     border: 'none',
     backgroundColor: theme.palette.primary.main,
+    textDecoration: 'none',
 
     // lg
     padding: '0.5rem 1rem',
@@ -38,11 +39,11 @@ const useStyles = createUseStyles((theme) => ({
   },
 }));
 
-const Button = ({ text = 'Submit', type = 'submit', disabled = false }) => {
+const Button = ({ text = 'Submit', ...props }) => {
   const classes = useStyles();
 
   return (
-    <button type={type} className={classnames('typography-mono', classes.root)} disabled={disabled}>
+    <button className={classnames('typography-mono', classes.root)} {...props}>
       <span>{text}</span>
     </button>
   );

src/components/index.js

@@ -1,8 +1,16 @@
 export { default as LayoutControl } from './LayoutControl';
 export { default as SitewideHeader } from './SitewideHeader';
-export { default as SEO } from './seo';
 export { default as SitewideFooter } from './SitewideFooter';
+export { default as StickyFooter } from './layouts/StickyFooter';
+
+export { default as SEO } from './seo';
+
 export { default as Headline } from './Headline';
 export { default as Lead } from './Lead';
 export { default as InterstitialTitle } from './InterstitialTitle';
+
 export { default as CodeBlock } from './CodeBlock';
+export { default as TwoColumnPoints } from './TwoColumnPoints';
+export { default as UnorderedList } from './UnorderedList';
+export { default as OrderedList } from './OrderedList';
+export { default as ButtonLink } from './ButtonLink';