Getting Started

Welcome to our project! This documentation provides an overview of key concepts and details to help you get started with using the site and its layout blocks effectively.

Prerequisites

We assume a basic understanding of the following:

  • React
  • Next.js
  • Payload CMS
  • Tailwind CSS
  • shadcn

Payload Website Template

Most of our blocks are aligned to be directly usable with the Payload website template except for some small additions, modifications or file placements.

Modified link and linkGroup Fields

We use slightly modified versions of the link and linkGroup fields. These modifications account for:

  • Optionality
  • Localization

More information, including descriptions and code can be found here:

CMSLink Component

For rendering links, we use the original CMSLink component from the Payload website template which can be found here.

Layout and Design Standards

Container Width and Padding

By default, the site and components are displayed within a container of 1536px width, with 2rem padding on both sides. This ensures a consistent layout across all pages while maintaining flexibility for responsiveness. If you want the same in your project you can extend your Tailwind Config with the following container:

1const tailwindConfig: Config = {
2  content: ['./src/**/*.{js,ts,jsx,tsx,mdx}'],
3  theme: {
4    extend: {
5      container: {
6        center: true,
7        padding: '2rem',
8        screens: {
9          DEFAULT: '100%',
10          '2xl': '1536px',
11        },
12      },
13    },
14  },
15};

Naming Conventions

To maintain clarity and improve autocomplete functionality, we use descriptive names for our block related files and folders. While this is the default structure, you can rename these as needed when copying or downloading the code.

Here's our naming pattern:

  • [Name]: Block and folder name.
  • [Name]BlockConfig: Payload configuration file.
  • [name]BlockConfig: Config slug.
  • [Name]BlockComponent: Component code.
  • [Name]BlockType: Interface name.

For example, if the block name is Hero, the structure would look like this:

1HeroBlock/
2├── HeroBlockConfig.ts (Payload configuration file)
3│   ├── slug: heroBlockConfig
4│   └── interfaceName: HeroBlockType
5└── HeroBlockComponent.tsx (Component code)

When a block has certain variations these will be split in separate blocks and the variation will be appended after Block, resulting in i.e. HeroBlockHorizontal and HeroBlockVertical

Utility Functions

We occasionally use utilities like cn (a combination of clsx and twMerge) which is also provided by shadcn. This helps manage dynamic class names efficiently while merging Tailwind CSS classes. Utilities available in the Payload website template may also be used.

That's it!

With these details in mind, you are ready to explore the components and start building!