Refactor URLs to generate /job/:jobid pages

Also some tweaks to job rendering, and refactored Page component so
that pages share a common header.

Author: stefanv

gatsby-node.esm.js

@@ -0,0 +1,15 @@
+import jobs from "./src/jobs";
+import path from "path";
+
+export const createPages = async ({ graphql, actions }) => {
+  const { createPage } = actions;
+  jobs.map((job) =>
+    createPage({
+      path: `job/${job.id}`,
+      component: path.resolve('./src/pages/job.jsx'),
+      context: {
+        job
+      }
+    })
+  );
+}

gatsby-node.js

@@ -0,0 +1,2 @@
+require = require('esm')(module)
+module.exports = require('./gatsby-node.esm.js')

package-lock.json

@@ -23,6 +23,7 @@
     "react-hook-form": "^6.11.1"
   },
   "devDependencies": {
+    "esm": "^3.2.25",
     "prettier": "2.1.2"
   },
   "repository": {

package.json

@@ -1,8 +1,10 @@
 import React from "react";
+import { Link } from "gatsby";
 
 import Badge from "./Badge";
 
-const Job = ({ job }) => (
+const Job = ({ job }) => {
+  return (
   <div className="job">
     <div className="badges">
       { job.badges &&
@@ -14,8 +16,10 @@ const Job = ({ job }) => (
         <Badge type="Pure OSS"/>
       }
     </div>
-    <div className="meta">
+    <Link to={`/job/${job.id}`}>
       <div className="title">{ job.entity } / { job.title }</div>
+    </Link>
+    <div className="meta">
       <div className="percentTime">This job is { job.percentTime }% time.</div>
       <div className="percentOSS">
         { job.percentOSS }% of that time is on open source
@@ -31,6 +35,6 @@ const Job = ({ job }) => (
       dangerouslySetInnerHTML={{__html: job.description}}
     />
   </div>
-);
+  )};
 
 export default Job;

src/components/Job.jsx

@@ -0,0 +1,15 @@
+import React from "react";
+import { Link } from "gatsby";
+
+const Page = ({ children }) => (
+  <>
+    <div className="header">
+      <Link to="/">
+        <h1>NumFOCUS Jobs Board</h1>
+      </Link>
+    </div>
+    { children }
+  </>
+);
+
+export default Page;

src/components/Page.jsx

@@ -1,7 +1,13 @@
 const filterJobs = (jobs, filter) => {
+  // Filter out expired jobs.  Use Howland Island timezone to ensure
+  // that everyone sees the job on its last day.
+  const today = new Date();
+  jobs = jobs.filter((job) => new Date(`${job.expires}T23:59:59.999-12:00`) > today);
+
   if (filter.fullTime) {
     jobs = jobs.filter((job) => job.percentTime === 100)
   }
+
   if (filter.ossTimeGt) {
     jobs = jobs.filter((job) => job.percentOSS >= parseInt(filter.ossTimeGt))
   }

src/filter-jobs.js

@@ -0,0 +1,10 @@
+import React from "react";
+
+import Page from "../components/Page";
+import JobsFilter from "../components/JobsFilter";
+
+export default function Home() {
+  return <Page>
+    <JobsFilter/>
+  </Page>
+}

src/pages/index.js

@@ -0,0 +1,19 @@
+import React from "react";
+import { Link } from "gatsby";
+
+import Page from '../components/Page';
+import Job from '../components/Job';
+
+// pageContext comes from createPage in
+// gatsby-node.esm.js
+const job = ({ pageContext }) => {
+  const { job } = pageContext;
+  return (
+    <Page>
+      <Job job={job}/>
+      Return to <Link to="/">jobs listing</Link>.
+    </Page>
+  );
+};
+
+export default job;