TutorialLayout crashes rendering tutorials without optional featuredImage and authors fields

[hxrshxz]

Most appropriate sections of the p5.js website?

Tutorials

What is your operating system?

Linux

Web browser and version

No response

Actual Behavior

When rendering a tutorial that doesn't include the optional featuredImage or authors fields in its frontmatter, the site crashes with:

The component tries to access .src and .join() on undefined properties without checking if they exist first.

Expected Behavior

Tutorials without optional featuredImage or authors fields should render without errors. The layout should gracefully handle these optional fields being undefined.

Steps to reproduce

1. Create a new tutorial file in en with frontmatter that omits featuredImage and authors:

title: My Tutorial
description: A test tutorial
category: introduction

2. Start the dev server: npm run dev
3. Navigate to /tutorials/my-tutorial/

Expected: Page renders normally
Actual: TypeError crash

Would you like to work on the issue?

Yes

[ksen0]

Thinking about this, though these are technically marked as optional, they are necessary in the tutorials. This is also true for other 'optional' fields like featuredImageAlt - technically marked as optional, but required throughout the website. So, if there's a way to allow quicker initial development with npm run dev, it should still not be possible to pass linting without these fields. (cc @davepagurek who suggested this way of looking at the bug)

@hxrshxz how would you approach this if you still want to work on it?

[hxrshxz]

Hey @ksen0,

I think we can solve this by adding build-time validation using Zod's .refine() method:

Implementation:

// In src/content/tutorials/config.ts
export const tutorialsCollection = defineCollection({
  type: "content",
  schema: ({ image }) =>
    z.object({
      title: z.string(),
      authors: z.array(z.string()).optional(),
      featuredImage: image().optional(),
      featuredImageAlt: z.string().optional(),
      description: z.string().optional(),
      category: z.enum(categories),
      categoryIndex: z.number().optional(),
      authorsNote: z.string().optional(),
      relatedContent: relatedContent().optional(),
    })
    .refine(
      (data) => {
        return (
          data.authors !== undefined &&
          data.authors.length > 0 &&
          data.featuredImage !== undefined &&
          data.featuredImageAlt !== undefined &&
          data.description !== undefined
        );
      },
      {
        message: "Tutorials must include authors, featuredImage, featuredImageAlt, and description for production",
      }
    ),
});

How this works:
so how this works is Fields remain .optional() in the type system (during npm run dev) and .refine() adds validation that runs during npm run check and npm run build
then we will be able to

• run dev server without all fields
  also
  at build time (It can't pass npm run check without required fields)
• Incomplete tutorials cannot be merged or deployed

wdyt ?