Add jobs

Author: wkirby

data/jobs.yml

@@ -0,0 +1,22 @@
+- title: "Senor Front-End Developer"
+  active: true
+  salary: $132,000
+  content: |
+    Seeking a skilled Frontend-focused Full Stack Engineer who
+    thrives on building beautiful and functional user interfaces,
+    but still feels comfortable on the server.
+
+    While we're looking for developers with strong technical skills
+    we typically don't hire for experience in a particular framework
+    or technology. We're mostly seeking generalists that enjoy working
+    in new technical stacks and have exceptional communication: because
+    we're a small company, everyone here takes on a lot of roles,
+    and strong relationships with our clients is absolutely essential
+    to our success.
+
+    We offer a 20-hour work week, retirement and health benefits, a
+    competitive salary, an unlimited vacation and parental leave policy.
+    At Apsis, you'll have the opportunity to contribute meaningfully
+    throughout the entire development lifecycle, from initial concept
+    to polished product. We believe in sustainable work practices,
+    detailed on [our mission statement](/mission).

src/lib/posts.ts

@@ -9,7 +9,7 @@ import fg from "fast-glob";
 import { processMarkdown } from "./markdown";
 import yaml from "js-yaml";
 
-import { PostFrontmatter, Post, PostParams, Person } from "lib/types";
+import { PostFrontmatter, Post, PostParams, Person, Job } from "lib/types";
 import _ from "lodash";
 
 const postsDirectory = path.join(process.cwd(), "posts");
@@ -27,7 +27,7 @@ export const getRandomCta = () => {
 export const getPeople = async (): Promise<Record<string, Person>> => {
   const peopleFile = readFileSync(
     path.join(dataDirectory, "people.yml"),
-    "utf8",
+    "utf8"
   );
   return yaml.load(peopleFile);
 };
@@ -36,10 +36,21 @@ export const getCurrentPeople = async (): Promise<Record<string, Person>> => {
   const people = await getPeople();
 
   return Object.fromEntries(
-    Object.entries(people).filter(([_, p]) => p.current),
+    Object.entries(people).filter(([_, p]) => p.current)
   );
 };
 
+export const getJobs = async (): Promise<Record<string, Job>> => {
+  const jobFile = readFileSync(path.join(dataDirectory, "jobs.yml"), "utf8");
+  return yaml.load(jobFile);
+};
+
+export const getActiveJobs = async (): Promise<Record<string, Job>> => {
+  const jobs = await getJobs();
+
+  return Object.fromEntries(Object.entries(jobs).filter(([_, j]) => j.active));
+};
+
 const getPostPaths = () => {
   return fg.sync(path.join(postsDirectory, "**"), { objectMode: true });
 };
@@ -124,7 +135,7 @@ async function getAllPosts(): Promise<Post[]> {
         person: people[matterResult.data.author] ?? null,
         ...matterResult.data,
       };
-    }),
+    })
   );
 }
 
@@ -157,7 +168,7 @@ export async function getPostData({
   const people = await getPeople();
   const fullPath = path.join(
     postsDirectory,
-    `${year}-${month}-${day}-${slug}.md`,
+    `${year}-${month}-${day}-${slug}.md`
   );
   const fileContents = readFileSync(fullPath, "utf8");
   const { content, data } = await parseMatter(fileContents);

src/lib/types.d.ts

@@ -51,3 +51,11 @@ export type Post = Modify<
   },
   FrontmatterData
 >;
+
+
+export type Job = {
+  title: string;
+  content: string;
+  salary: string;
+  active: boolean;
+}

src/pages/jobs.tsx

@@ -0,0 +1,86 @@
+import { ContactForm } from "components/forms/ContactForm";
+import { MarkdownContent } from "components/MarkdownContent";
+import { PageHeader } from "components/PageHeader";
+import { PageMeta } from "components/PageMeta";
+import { SiteLayout } from "components/SiteLayout";
+import { getActiveJobs } from "lib/posts";
+import { Job } from "lib/types";
+import { NextPage } from "next";
+
+export async function getStaticProps() {
+  return {
+    props: {
+      jobs: await getActiveJobs(),
+    },
+  };
+}
+
+const HirePage: NextPage<{ jobs: Record<string, Job> }> = ({ jobs }) => {
+  return (
+    <>
+      <PageMeta
+        title="Join Our Team"
+        description="Sometimes Apsis Labs is hiring. Join us."
+      />
+
+      <SiteLayout contained>
+        <div className="stack gap-lg">
+          <article className="stack gap-md">
+            <PageHeader
+              title={
+                <>
+                  Work <span className="text-muted">@</span>{" "}
+                  <span className="text-primary">Apsis</span>
+                </>
+              }
+              subtitle={<>Sometimes we're hiring. Join us.</>}
+            />
+            <section className="typography">
+              <p className="lead">
+                Apsis Labs is a tightly-knit software agency operating as a
+                fully distributed team. We specialize in crafting bespoke
+                solutions for our clients — ranging from dynamic web
+                applications and mobile experiences to HIPAA compliant data
+                warehouses.
+              </p>
+              <p className="lead">
+                To apply, send your resume to{" "}
+                <a href="mailto:contact@apsis.io">contact@apsis.io</a>.
+              </p>
+            </section>
+            <hr className="divider" />
+            {Object.entries(jobs).length > 0 ? (
+              <section className="typography">
+                {Object.entries(jobs).map(([key, job]) => (
+                  <div key={key} className="stack gap-md">
+                    <header className="stack gap-sm">
+                      <h3 className="text-primary m-0">{job.title}</h3>
+                      <small className="text-muted">
+                        <strong>Salary:</strong> {job.salary}
+                      </small>
+                    </header>
+                    <div className="typography">
+                      <MarkdownContent content={job.content} />
+                      <p>
+                        To apply, send your resume to{" "}
+                        <a href="mailto:contact@apsis.io">contact@apsis.io</a>.
+                      </p>
+                    </div>
+                  </div>
+                ))}
+              </section>
+            ) : (
+              <section className="typography">
+                <div className="alert alert-note">
+                  No jobs at this moment. Check back later!
+                </div>
+              </section>
+            )}
+          </article>
+        </div>
+      </SiteLayout>
+    </>
+  );
+};
+
+export default HirePage;

src/styles/_global.scss

@@ -15,6 +15,10 @@
   }
 }
 
+.m-0 {
+  margin: 0 !important;
+}
+
 .hidden {
   visibility: hidden;
   display: none;