v1.0.0

.github/workflows/docker.yml

@@ -35,7 +35,7 @@ jobs:
           username: ${{ github.actor }}
           password: ${{ secrets.GITHUB_TOKEN }}
       - name: Build and push release
-        uses: docker/build-push-action@v5
+        uses: docker/build-push-action@v6
         with:
           context: .
           secrets: |

_api/draft/route.ts

@@ -23,7 +23,7 @@ export async function GET(request: Request) {
     return new Response("Invalid id", { status: 401 });
   }
 
-  draftMode().enable();
+  (await draftMode()).enable();
 
   return new Response(null, {
     status: 307,

app/[...slug]/page.tsx

@@ -11,11 +11,12 @@ type IParams = {
   readonly slug?: string[];
 };
 
-export async function generateMetadata({
-  params,
-}: {
-  params: IParams;
-}): Promise<Metadata> {
+export async function generateMetadata(
+  props: {
+    params: Promise<IParams>;
+  }
+): Promise<Metadata> {
+  const params = await props.params;
   const data = await getPage(params.slug || ["index"]);
   return {
     title: `${data.title} – ${DEFAULT_TITLE}`,
@@ -28,11 +29,12 @@ const getPageMenu = (screens: IScreen[]): IPageMenuItem[] =>
     .filter(({ item }) => !!item.anchor)
     .map(({ item }) => ({ label: item.name, href: `#${slugify(item.name)}` }));
 
-export default async function SlugPage({
-  params,
-}: {
-  params: { slug: string[] };
-}) {
+export default async function SlugPage(
+  props: {
+    params: Promise<{ slug: string[] }>;
+  }
+) {
+  const params = await props.params;
   if (params.slug.length === 1 && params.slug[0] === "index") {
     return permanentRedirect("/");
   }

app/page.tsx

@@ -7,11 +7,12 @@ type IParams = {
   readonly slug?: string[];
 };
 
-export async function generateMetadata({
-  params,
-}: {
-  params: IParams;
-}): Promise<Metadata> {
+export async function generateMetadata(
+  props: {
+    params: Promise<IParams>;
+  }
+): Promise<Metadata> {
+  const params = await props.params;
   const data = await getPage(params.slug || ["index"]);
   return {
     title: `${data.title} – ${DEFAULT_TITLE}`,

components/Content.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useContext } from "react";
 import { TContent } from "@/lib/types";
 import Image from "next/image";
 import AspectRatio from "@mui/joy/AspectRatio";
@@ -7,16 +7,20 @@ import Stack from "@mui/joy/Stack";
 import Typography from "@mui/joy/Typography";
 import {
   Animation,
+  BACKGROUNDS,
   BLACK,
   Hero,
   MARGINS,
-  WHITE,
+  PageContext,
 } from "@investigativedata/style";
 import { getFileUrl } from "@/lib/directus";
 import Card from "./Card";
+import File from "./File";
+import NewsletterForm from "./NewsletterForm";
 import Project from "./Project";
 
 export default function Content(data: TContent): React.ReactNode {
+  const { currentColor } = useContext(PageContext);
   if (data.collection === "heroes") {
     let action;
     if (!!data.item.mediaSrc) {
@@ -50,7 +54,7 @@ export default function Content(data: TContent): React.ReactNode {
               component="a"
               href={data.item.primaryActionHref}
               sx={{
-                color: WHITE,
+                color: BACKGROUNDS[currentColor],
                 backgroundColor: BLACK,
                 "&:hover": {
                   backgroundColor: BLACK,
@@ -122,8 +126,11 @@ export default function Content(data: TContent): React.ReactNode {
         )}
       </Stack>
     );
+  if (data.collection === "files") return <File {...data.item} />;
   if (data.collection === "projects") return <Project {...data.item} />;
   if (data.collection === "cards") return <Card {...data.item} />;
+  if (data.collection === "newsletters")
+    return <NewsletterForm {...data.item} />;
   if (data.collection === "animations") {
     const { height, width, src, children } = data.item;
     const props = { height, width, src: getFileUrl(src) };

components/File.tsx

@@ -0,0 +1,16 @@
+import { IFileItem } from "@/lib/types";
+import Link from "next/link";
+import { getFileUrl } from "@/lib/directus";
+
+export default function File({
+  file,
+  name,
+  mimetype,
+}: React.PropsWithChildren<IFileItem>) {
+  const url = getFileUrl(file);
+  return (
+    <Link href={url}>
+      {name} ({mimetype.toUpperCase()})
+    </Link>
+  );
+}

components/NewsletterForm.tsx

@@ -0,0 +1,43 @@
+import { useContext } from "react";
+import { INewsletterItem } from "@/lib/types";
+import Button from "@mui/joy/Button";
+import Input from "@mui/joy/Input";
+import Stack from "@mui/joy/Stack";
+import { BACKGROUNDS, BLACK, PageContext } from "@investigativedata/style";
+
+export default function NewsletterForm({
+  action,
+  listUid,
+}: React.PropsWithChildren<INewsletterItem>) {
+  const { currentColor } = useContext(PageContext);
+  return (
+    <form action={action} method="post">
+      <Stack
+        spacing={1}
+        direction="row"
+        // justifyContent="space-between"
+        alignSelf="center"
+        sx={{ w: "100%" }}
+      >
+        <Input placeholder="email@example.org" required name="email" />
+        <input type="hidden" name="l" value={listUid} />
+        <Button
+          color="success"
+          type="submit"
+          sx={{
+            color: BACKGROUNDS[currentColor],
+            backgroundColor: BLACK,
+            "&:hover": {
+              backgroundColor: BLACK,
+            },
+            "&:active": (theme) => ({
+              backgroundColor: theme.colorSchemes.dark.palette.text,
+            }),
+          }}
+        >
+          Subscribe
+        </Button>
+      </Stack>
+    </form>
+  );
+}

lib/directus.tsx

@@ -9,7 +9,7 @@ import {
   DIRECTUS_DEFAULT_PAGE_FILTER,
   DIRECTUS_URL,
 } from "@/config";
-import MDX_COMPONENTS from "./markdown";
+import MDX_COMPONENTS, { MDX_OPTIONS } from "./markdown";
 
 const directus = createDirectus(DIRECTUS_URL)
   .with(rest())
@@ -40,7 +40,11 @@ function serializeMdx(child: TContent): TContent {
   const { collection, item } = cleanProps(child);
   if (collection === "mdx" && item.content) {
     item.renderedContent = (
-      <MDXRemote source={item.content} components={MDX_COMPONENTS} />
+      <MDXRemote
+        source={item.content}
+        components={MDX_COMPONENTS}
+        options={MDX_OPTIONS}
+      />
     );
   }
   if (collection === "heroes" && item.teaser) {
@@ -51,6 +55,7 @@ function serializeMdx(child: TContent): TContent {
           ...MDX_COMPONENTS,
           p: (props: React.PropsWithChildren) => <span>{props.children}</span>,
         }}
+        options={MDX_OPTIONS}
       />
     );
   }
@@ -64,6 +69,7 @@ function serializeMdx(child: TContent): TContent {
             <Typography level="body-md">{props.children}</Typography>
           ),
         }}
+        options={MDX_OPTIONS}
       />
     );
   }
@@ -77,6 +83,7 @@ function serializeMdx(child: TContent): TContent {
             <Typography level="body-sm">{props.children}</Typography>
           ),
         }}
+        options={MDX_OPTIONS}
       />
     );
   }
@@ -90,6 +97,7 @@ function serializeMdx(child: TContent): TContent {
             <Typography level="body-md">{props.children}</Typography>
           ),
         }}
+        options={MDX_OPTIONS}
       />
     );
   }
@@ -98,6 +106,7 @@ function serializeMdx(child: TContent): TContent {
       <MDXRemote
         source={item.content}
         components={{ ...MDX_COMPONENTS, p: (props) => <span {...props} /> }}
+        options={MDX_OPTIONS}
       />
     );
   }

lib/markdown.tsx

@@ -1,6 +1,8 @@
+import remarkGfm from "remark-gfm";
 import { MDXComponents } from "mdx/types";
 import Image, { ImageProps } from "next/image";
 import NLink from "next/link";
+import { Table } from "@mui/joy";
 import Button, { ButtonProps } from "@mui/joy/Button";
 import MLink from "@mui/joy/Link";
 import List, { ListProps } from "@mui/joy/List";
@@ -30,6 +32,9 @@ const MDX_COMPONENTS: MDXComponents = {
   // img: (props: { src: string }) => <Image fill={true} {...props} alt="" />,
   // @ts-ignore
   // a: (props: React.PropsWithChildren<{ href: string }>) => <Link {...props} />,
+  table: (props: React.PropsWithChildren) => (
+    <Table {...{ size: "lg", ...props }} />
+  ),
   ul: (props: React.PropsWithChildren) => <List {...props} />,
   ol: (props: React.PropsWithChildren) => (
     <List component="ol" marker="decimal" {...props} />
@@ -43,3 +48,9 @@ const MDX_COMPONENTS: MDXComponents = {
 };
 
 export default MDX_COMPONENTS;
+
+export const MDX_OPTIONS = {
+  mdxOptions: {
+    remarkPlugins: [remarkGfm],
+  },
+};

lib/types.ts

@@ -2,12 +2,12 @@ import { TypographyProps } from "@mui/joy/Typography";
 import { ColorPaletteProp } from "@mui/joy/styles";
 import {
   IAnimation,
+  ICard,
   IHero,
   IMediaScreen as Style_IMediaScreen,
   IScreen as Style_IScreen,
   TMarginSizes,
 } from "@investigativedata/style";
-import { ICard } from "@investigativedata/style";
 
 // PAGES
 
@@ -54,18 +54,22 @@ export type TCollection =
   | "typography"
   | "mdx"
   | "images"
+  | "files"
   | "cards"
   | "projects"
-  | "animations";
+  | "animations"
+  | "newsletters";
 
 export type TContent =
   | IHeroContent
   | IMdxContent
   | IImageContent
+  | IFileContent
   | ITypographyContent
   | ICardContent
   | IProjectContent
-  | IAnimationContent;
+  | IAnimationContent
+  | INewsletterContent;
 
 interface BaseItem {
   readonly id: string;
@@ -123,6 +127,17 @@ export interface IImageContent {
   };
 }
 
+export interface IFileItem extends BaseItem {
+  readonly name: string;
+  readonly file: string;
+  readonly mimetype: string;
+}
+
+export interface IFileContent {
+  readonly collection: "files";
+  readonly item: IFileItem;
+}
+
 export interface IProjectItem {
   readonly partner: string;
   readonly title: string;
@@ -159,3 +174,12 @@ export interface IAnimationContent {
   readonly collection: "animations";
   readonly item: BaseItem & IAnimationItem;
 }
+export interface INewsletterItem {
+  readonly action: string;
+  readonly listUid: string;
+}
+
+export interface INewsletterContent {
+  readonly collection: "newsletters";
+  readonly item: BaseItem & INewsletterItem;
+}

next.config.js → next.config.mjs

@@ -1,13 +1,8 @@
-const withMDX = require("@next/mdx")();
-
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   output: process.env.EXPORT === "1" ? "export" : "standalone",
   trailingSlash: true,
   transpilePackages: ["next-mdx-remote"], // FIXME: https://github.com/hashicorp/next-mdx-remote/issues/381
-  // Configure `pageExtensions` to include MDX files
-  pageExtensions: ["js", "jsx", "mdx", "ts", "tsx"],
-  // Optionally, add any other Next.js config below
   images: {
     loader: "custom",
     loaderFile: "./image-loader.ts",
@@ -23,4 +18,4 @@ const nextConfig = {
   },
 };
 
-module.exports = withMDX(nextConfig);
+export default nextConfig;