add board page

apps/cms/src/collections/board/boards.ts

@@ -27,13 +27,6 @@ export const Boards: CollectionConfig = {
       name: "year",
       required: true,
     }),
-    {
-      name: "description",
-      maxLength: 360,
-      type: "textarea",
-      localized: true,
-      required: true,
-    },
     {
       name: "groupPhoto",
       type: "relationship",

apps/cms/src/collections/pages.ts

@@ -94,6 +94,12 @@ export const Pages: CollectionConfig = {
       localized: true,
       required: true,
     },
+    {
+      name: "hideTableOfContents",
+      type: "checkbox",
+      required: true,
+      defaultValue: false,
+    },
     {
       name: "content",
       type: "richText",

apps/cms/src/payload.config.ts

@@ -36,8 +36,8 @@ import { Users } from "./collections/users";
 import { Footer } from "./globals/footer";
 import { LandingPage } from "./globals/landing-page";
 import { MainNavigation } from "./globals/main-navigation";
-import { useCloudStorage } from "./util";
 import { revalidateGlobal } from "./hooks/revalidate-globals";
+import { useCloudStorage } from "./util";
 
 declare module "payload" {
   // eslint-disable-next-line @typescript-eslint/no-empty-interface -- not applicable
@@ -131,10 +131,10 @@ export default buildConfig({
       UnorderedListFeature(),
       OrderedListFeature(),
       LinkFeature({
-        enabledCollections: ["pages"],
+        enabledCollections: [Pages.slug],
       }),
       RelationshipFeature({
-        enabledCollections: ["pages"],
+        enabledCollections: [Pages.slug, Boards.slug],
       }),
       BlockQuoteFeature(),
       UploadFeature({

apps/web/src/app/[lang]/[...path]/page.tsx

@@ -94,7 +94,9 @@ const Page = async ({ params: { path, lang } }: Props) => {
         </header>
 
         <div className="relative m-auto flex max-w-prose flex-col gap-8 p-4 md:p-6">
-          <TableOfContents content={content} />
+          {!page.hideTableOfContents ? (
+            <TableOfContents content={content} />
+          ) : null}
           <p className="shadow-solid max-w-prose rounded-md border-2 border-gray-900 p-4 md:p-6">
             {page.description}
           </p>

apps/web/src/components/board-grid/index.tsx

@@ -0,0 +1,80 @@
+import type { Board, BoardMember, Media } from "@tietokilta/cms-types/payload";
+import { GmailIcon, TelegramIcon } from "@tietokilta/ui";
+import Image from "next/image";
+import TikLogo from "../../assets/TiK-logo.png";
+import { cn } from "../../lib/utils";
+
+function BoardMemberCard({ boardMember }: { boardMember: BoardMember }) {
+  const photo = boardMember.photo as Media | undefined;
+  return (
+    <li className="shadow-solid relative flex gap-4 overflow-hidden rounded-md border-2 border-gray-900 px-4 pb-6 pt-12 font-mono md:px-6">
+      <div className="absolute left-0 top-0 flex w-full justify-between border-b-2 border-gray-900 bg-gray-100 p-2">
+        <div className="flex gap-1">
+          <span className="bg-secondary-600 h-2 w-2 rounded-full border border-gray-900" />
+          <span className="bg-primary-600 h-2 w-2 rounded-full border border-gray-900" />
+        </div>
+      </div>
+      <Image
+        alt={photo?.alt ?? ""}
+        className={cn(
+          "aspect-2/3 max-w-32 border-2 border-gray-900 object-center",
+          photo?.url ? "object-cover" : "object-contain",
+        )}
+        height={photo?.height ?? undefined}
+        src={photo?.url ?? TikLogo}
+        width={photo?.width ?? undefined}
+      />
+      <div className="flex flex-col justify-between gap-4">
+        <p className="flex flex-col">
+          <span className="text-lg font-medium">{boardMember.name}</span>
+          <span>{boardMember.title}</span>
+        </p>
+        <p className="flex flex-col gap-2 text-sm">
+          <a
+            className="flex items-center gap-1"
+            href={`mailto:${boardMember.email}`}
+          >
+            <GmailIcon className="h-6 w-6 shrink-0" />
+            <span className="underline">
+              {boardMember.email.replace("@", "\u200b@")}
+            </span>
+          </a>
+          <a
+            className="flex items-center gap-1"
+            href={`https://t.me/${boardMember.telegram}`}
+            rel="noopener noreferrer"
+            target="_blank"
+          >
+            <TelegramIcon className="h-6 w-6 shrink-0" />
+            <span className="underline">{boardMember.telegram}</span>
+          </a>
+        </p>
+      </div>
+    </li>
+  );
+}
+
+export function BoardGrid({ board }: { board: Board }): JSX.Element {
+  const groupPhoto = board.groupPhoto as Media | undefined;
+  return (
+    <>
+      {groupPhoto ? (
+        <Image
+          alt={groupPhoto.alt}
+          className="rounded-md border-2 border-gray-900"
+          height={groupPhoto.height ?? 0}
+          src={groupPhoto.url ?? "#broke-url"}
+          width={groupPhoto.width ?? 0}
+        />
+      ) : null}
+      <ul className="not-prose grid grid-cols-1 items-center justify-center gap-4 md:-mx-16 md:grid-flow-row-dense md:grid-cols-2 md:gap-6 lg:-mx-32 xl:-mx-48">
+        {board.boardMembers.map(({ boardMember }) => (
+          <BoardMemberCard
+            boardMember={boardMember as BoardMember}
+            key={(boardMember as BoardMember).id}
+          />
+        ))}
+      </ul>
+    </>
+  );
+}

apps/web/src/components/lexical/lexical-serializer.tsx

@@ -1,10 +1,11 @@
 /* eslint-disable react/no-array-index-key -- okay here */
 /* eslint-disable no-bitwise -- lexical nodes are defined bitwise */
-import type { Node, PageRelationshipNode } from "@tietokilta/cms-types/lexical";
+import type { Node, RelationshipNode } from "@tietokilta/cms-types/lexical";
 import { FileIcon } from "@tietokilta/ui";
 import Image from "next/image";
 import Link from "next/link";
 import { cn, lexicalNodeToTextContent, stringToId } from "../../lib/utils";
+import { BoardGrid } from "../board-grid";
 import {
   IS_BOLD,
   IS_CODE,
@@ -207,7 +208,7 @@ export function LexicalSerializer({ nodes }: { nodes: Node[] }): JSX.Element {
   );
 }
 
-function Relationship({ node }: { node: PageRelationshipNode }) {
+function Relationship({ node }: { node: RelationshipNode }) {
   switch (node.relationTo) {
     // TODO: Implement these
     case "pages": {
@@ -227,7 +228,11 @@ function Relationship({ node }: { node: PageRelationshipNode }) {
         </Link>
       );
     }
+    case "boards": {
+      return <BoardGrid board={node.value} />;
+    }
     default: {
+      // @ts-expect-error -- Extra safety for unknown relationTo since we're casting types and there may be some bogus relationships
       // eslint-disable-next-line no-console -- Nice to know if something is missing
       console.warn("Unknown relationTo:", node.relationTo);
       return null;

apps/web/src/lib/api/fetcher.ts

@@ -58,6 +58,8 @@ export function getAll<
         `${process.env.PUBLIC_SERVER_URL}${path}?${qsStringify({
           ...req,
           ...(draft ? { draft: "true" } : {}),
+          depth: 10, // TODO: remove this when we have a better way to handle depth for example with GraphQL
+          // Needs to be bigger than 1 to get media / images
         }).toString()}`,
         {
           method: "GET",

apps/web/tailwind.config.js

@@ -152,6 +152,9 @@ module.exports = {
           },
         },
       }),
+      aspectRatio: {
+        "2/3": "2 / 3",
+      },
     },
   },
   plugins: [