feat(showcase): new page to display config

src/components/generic-card/index.tsx

@@ -1,25 +1,31 @@
 import { SpacingProp } from "@/types/style";
 import { H2, P } from "../text";
 import s from "./GenericCard.module.css";
+import Image, { ImageProps } from "next/image";
 
 interface GenericCardProps {
   title: string;
+  image?: ImageProps;
   description: string;
   padding?: SpacingProp;
   children?: React.ReactNode;
 }
 
 export default function GenericCard({
   title,
+  image,
   padding = "56px",
   description,
   children,
 }: GenericCardProps) {
   return (
-    <div className={s.genericCard} style={{ padding }}>
-      <H2 className={s.title}>{title}</H2>
-      <P className={s.description}>{description}</P>
-      {children ? <div className={s.children}>{children}</div> : null}
+    <div className={s.genericCard}>
+      {image ? <Image {...image} /> : null}
+      <div style={{ padding }}>
+        <H2 className={s.title}>{title}</H2>
+        <P className={s.description}>{description}</P>
+        {children ? <div className={s.children}>{children}</div> : null}
+      </div>
     </div>
   );
 }

src/pages/showcase/ShowcasePage.module.css

@@ -0,0 +1,32 @@
+.showcasePage {
+
+  & .header {
+    padding: 0 0 28px;
+  }
+
+  & .list {
+    --gap: 24px;
+    --cols: 3;
+
+    @media(max-width: 1100px) {
+      --cols: 2;
+    }
+
+    @media(max-width: 768px) {
+      --cols: 1;
+    }
+
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--gap);
+
+    &>li {
+      --flex-basis: calc((100% / var(--cols)) - (var(--gap) * (var(--cols) - 1)) / var(--cols));
+      flex-basis: var(--flex-basis);
+      max-width: var(--flex-basis);
+    }
+  }
+}

src/pages/showcase/components/list-item/ListItem.module.css

@@ -0,0 +1,6 @@
+.ListItem {
+  & img {
+    width: 100%;
+    height: auto;
+  }
+}

src/pages/showcase/components/list-item/list-item.tsx

@@ -0,0 +1,22 @@
+import GenericCard from "@/components/generic-card";
+import s from "./ListItem.module.css";
+import Button from "@/components/button";
+import { ImageProps } from "next/image";
+
+interface ListItemProps {
+  image: ImageProps;
+}
+export default function ListItem({ image }: ListItemProps) {
+  return (
+    <li className={s.ListItem}>
+      <GenericCard
+        title="title"
+        description="desc"
+        padding="12px 12px 24px"
+        image={image}
+      >
+        <Button theme="brand">View config</Button>
+      </GenericCard>
+    </li>
+  );
+}

src/pages/showcase/index.tsx

@@ -0,0 +1,68 @@
+import { NavTreeNode } from "@/components/nav-tree";
+import { H1, P } from "@/components/text";
+import NavFooterLayout from "@/layouts/nav-footer-layout";
+import { DOCS_DIRECTORY } from "../docs/[...path]";
+import { loadDocsNavTreeData } from "@/lib/fetch-nav";
+import SectionWrapper from "@/components/section-wrapper";
+import s from "./ShowcasePage.module.css";
+import ListItem from "./components/list-item/list-item";
+import { useRouter } from "next/router";
+import { useEffect } from "react";
+
+interface ShowcasePageProps {
+  docsNavTree: NavTreeNode[];
+  isDevelopment: boolean;
+}
+
+export async function getStaticProps(): Promise<{ props: ShowcasePageProps }> {
+  return {
+    props: {
+      isDevelopment: process.env.NODE_ENV === "development",
+      docsNavTree: await loadDocsNavTreeData(DOCS_DIRECTORY, ""),
+    },
+  };
+}
+
+export default function Showcase({
+  docsNavTree,
+  isDevelopment,
+}: ShowcasePageProps) {
+  const router = useRouter();
+
+  //TODO: This is gross, there's probably a better way to hide this route from prod
+  useEffect(() => {
+    if (!isDevelopment) {
+      router.push("/");
+    }
+  });
+
+  return (
+    <NavFooterLayout
+      docsNavTree={docsNavTree}
+      meta={{
+        title: "Ghostty config showcase",
+        description: "A curated list of Ghostty configs from our comminuty",
+      }}
+    >
+      <SectionWrapper className={s.showcasePage}>
+        <header className={s.header}>
+          <H1>Showcase</H1>
+          <P>A curated list of Ghostty configs from our comminuty</P>
+        </header>
+        <ul className={s.list}>
+          {Array.from(Array(12).keys(), (_, index) => (
+            <ListItem
+              key={index}
+              image={{
+                src: "/placeholder.png",
+                alt: "placeholder image",
+                width: 500,
+                height: 300,
+              }}
+            />
+          ))}
+        </ul>
+      </SectionWrapper>
+    </NavFooterLayout>
+  );
+}