Marketing Website

This starter kit is a styled template, built with sample branding for a fictional company called Salamander. You can easily add your own branding to this template to help you get a simple website up and running quickly.

All our starter kits follow a similar setup, so if you've followed the setup guide using the Minimal kit so far, the only configuration difference you need to be aware of is that the Marketing Website doesn't have Navigation ID's (SITE_MAIN_NAV_ID & SITE_FOOTER_NAV_ID) in the .env file as the navs are rendered slightly differently.

This kit comes with various landing pages, a collection of composable content blocks and a blog.

General pages

The general pages in this kit are set up using the general_page content type such as the Home page and Developers Page.

Info pages

You will also find an info_page content type. This is a stripped back layout designed for text only pages such as Terms and Conditions.

Blocks

Many pages have a collection of blocks available for use within the general content area of a given layout. These blocks use our <BlockMatcher /> component. We will go through the Image and Text block as an example.

Front-end

Content editor

The fields for the editor are split into two tabs, Content and Settings. The Content tab has all the fields for the primary content of the block.

The Settings tab allows the editor to choose which side they would like to display the image on, add a skip link ID if required and also turn on or off the border-radius styling on the image.

Whilst its normally not an excellent way to control presentation in this way, sometimes its needed and tucking those settings away in a secondary tab can help authors focus on content first and layout second.

Editing the content type

The Content and Settings tabs on this block are created by using Field Groups to organise the fields. You can see that some fields are required and marked with a *. This is an option you can turn on and off for each field in the field settings, but for optional fields make sure to write your template code defensively.

For more information on Field Types check out the fields section of the Content API Object Reference.

The blog

This kit comes with a basic blog setup using the blog_landing_page and blog_page content types. It also includes the ability to filter the content using the category and author content types.

Categories

Categories can be filtered by the category pills or the category on the post summary. They take you to the url with blog content for that category e.g /category/productivity.

Authors

The blog authors content is linked to via the author name and image at the bottom of each post summary or the author card found on the blog post pages. Similar to categories they take you to the url for the authors content e.g. /blog/author/emmanuel-evans.

Dynamic routing

Routes

You will find the following routes within this Starter Kit:

• /{slug}
• /blog/{slug}
• /blog/category/{slug}
• /blog/author/{slug}

Folder structure

Within the app folder you will find a corresponding folder for each different route e.g. the blog folder for the /blog route.

There is also a page.tsx file in each route folder. The page.tsx file is used to control what will be rendered in each different route. For example the page.tsx file in app > [slug] renders both general_page and info_page content types that match the url structure /{slug}.

It uses the page function to make a call to the API using the createClient helper function from the /lib/contento.ts file. The getContent helper function from the Contento SDK is then used to filter what type of content we want back in the API response.

In this case we are wanting content that matches a content_type of general_page or info_page, with the limit of 1. So for each page that is found a new <Default /> component will be rendered.

export default async function page({ params }: Props) {
  const response = await createClient(draftMode().isEnabled)
    .getContent({
      params: {
        content_type: ['general_page', 'info_page'],
        slug: params.slug,
        limit: '1',
      },
    })
    .catch(() => {
      notFound()
    })

  const content = response.content[0]

  return <Default initialContent={content} />
}

Other Info

Types

There is an index.ts file in the types folder if you need to create any additional Typescript interfaces for new components.

SEO

The SEO for each page type is created within the page.tsx file for the corresponding route within the generateMetadata function. This function uses the generateSeo helper function from the /lib/contento.ts file to create SEO for each page.