Add mission page

apsislabs · Dec 10, 2024 · 4d3eac4 · 4d3eac4
1 parent 65ad005
commit 4d3eac4
Show file tree

Hide file tree

Showing 7 changed files with 123 additions and 20 deletions.
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
@@ -1,10 +1,12 @@
 import styles from "styles/components/Navbar.module.scss";
+import clsx from "clsx";
 import Link from "next/link";
 import { LogoType } from "components/LogoType";
 
 const NAV_ITEMS = [
-  { href: "/", label: "Home" },
-  { href: "/team", label: "Our Team" },
+  { href: "/", label: "Home", hideMobile: true },
+  { href: "/team", label: "Team" },
+  { href: "/mission", label: "Mission" },
   {
     href: "/blog",
     label: "Blog",
@@ -27,7 +29,10 @@ export const Navbar: React.FC<{
             <Link
               key={n.href}
               href={n.href}
-              className={styles.navbar__nav_item}
+              className={clsx(
+                styles.navbar__nav_item,
+                n.hideMobile && styles["navbar__nav_item--hide_mobile"],
+              )}
             >
               {n.label}
             </Link>

diff --git a/src/components/blog/PostHeader.tsx b/src/components/blog/PostHeader.tsx
@@ -2,6 +2,7 @@ import Link from "next/link";
 import { Post } from "lib/types";
 import styles from "styles/components/blog/Post.module.scss";
 import { PostMeta } from "./PostMeta";
+import { PostImage } from "./PostImage";
 
 export const PostHeader: React.FC<{
   post: Post;
@@ -20,22 +21,7 @@ export const PostHeader: React.FC<{
         <PostMeta post={post} />
       </div>
 
-      {post.image && !hideImage && (
-        <div className={styles["post__image-wrapper"]}>
-          <img
-            src={post.image}
-            alt={post.title}
-            className={styles["post__image"]}
-            data-action="zoom"
-          />
-
-          {post.credit && (
-            <small className={styles["post__photo-credit"]}>
-              Image by {post.credit}
-            </small>
-          )}
-        </div>
-      )}
+      {post.image && !hideImage && <PostImage post={post} />}
     </header>
   );
 };
diff --git a/src/components/blog/PostImage.tsx b/src/components/blog/PostImage.tsx
@@ -0,0 +1,21 @@
+import { Post } from "lib/types";
+import styles from "styles/components/blog/Post.module.scss";
+
+export const PostImage: React.FC<{ post: Post }> = ({ post }) => {
+  return (
+    <div className={styles["post__image-wrapper"]}>
+      <img
+        src={post.image}
+        alt={post.title}
+        className={styles["post__image"]}
+        data-action="zoom"
+      />
+
+      {post.credit && (
+        <small className={styles["post__photo-credit"]}>
+          Image by {post.credit}
+        </small>
+      )}
+    </div>
+  );
+};
diff --git a/src/pages/mission.tsx b/src/pages/mission.tsx
@@ -0,0 +1,82 @@
+import { PostImage } from "components/blog/PostImage";
+import { CtaProps } from "components/Cta";
+import { MarkdownContent } from "components/MarkdownContent";
+import { PageHeader } from "components/PageHeader";
+import { PageMeta } from "components/PageMeta";
+import { SiteLayout } from "components/SiteLayout";
+import { formattedTitle } from "lib/metadata";
+import { getPostData, getRandomCta } from "lib/posts";
+import { Post } from "lib/types";
+import { NextPage } from "next";
+import Head from "next/head";
+
+const Disclaimer = () => (
+  <MarkdownContent
+    content={`>[!NOTE]\n>This content originally appeared as a [blog post](/blog/2015/04/23/work-sustainably/). We've migrated the content here to make it easier to find, and reaffirm our commitment to this mission even a decade on.`}
+  />
+);
+
+export async function getStaticProps() {
+  const content = await getPostData({
+    year: "2015",
+    month: "04",
+    day: "23",
+    slug: "work-sustainably",
+  });
+
+  return {
+    props: {
+      content,
+      cta: await getRandomCta(),
+    },
+  };
+}
+
+const MissionPage: NextPage<{ cta: CtaProps; content: Post }> = ({
+  cta,
+  content,
+}) => {
+  const title = formattedTitle("Our Mission");
+
+  return (
+    <>
+      <Head>
+        <title>{title}</title>
+        <PageMeta
+          title={title}
+          description="Our mission: work sustainably. Build cool things with interesting people, but always, always, find time to live life."
+        />
+      </Head>
+
+      <SiteLayout contained cta={cta}>
+        <div className="stack gap-lg">
+          <article>
+            <PageHeader
+              title="Our Mission"
+              subtitle={
+                <>
+                  Work <s>hard</s>{" "}
+                  <span className="text-primary">sustainably</span>.
+                </>
+              }
+            />
+
+            <div className="stack gap-lg">
+              <PostImage post={content} />
+
+              <section className="typography">
+                <MarkdownContent content={content.contentHtml} />
+              </section>
+            </div>
+          </article>
+
+          <hr className="divider" />
+
+          <Disclaimer />
+        </div>
+      </SiteLayout>
+    </>
+  );
+};
+
+export default MissionPage;
diff --git a/src/styles/_global.scss b/src/styles/_global.scss
@@ -237,4 +237,8 @@
     max-width: 80%;
     margin: 0 auto;
   }
+
+  #footnote-label {
+    font-size: var(--font_size_lg);
+  }
 }
diff --git a/src/styles/components/Navbar.module.scss b/src/styles/components/Navbar.module.scss
@@ -76,6 +76,12 @@
       background-color var(--easing) var(--timing_sm),
       opacity var(--easing) var(--timing_sm);
 
+    &--hide_mobile {
+      @media (max-width: vars.$mobile) {
+        display: none;
+      }
+    }
+
     @media screen and (prefers-reduced-motion: reduce) {
       transition: none;
     }

diff --git a/src/styles/components/PageHeader.module.scss b/src/styles/components/PageHeader.module.scss
@@ -4,7 +4,6 @@
   display: flex;
   flex-direction: column;
   gap: var(--spacing);
-  margin-bottom: var(--spacing_lg);
 
   &__title {
     margin: 0;