Starter Kits
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.
View Demo
Explore the live demo site.
Contento Library
Deploy this kit in Contento.
GitHub Repo
Clone the repo on GitHub.
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
About the code
The Marketing Website Starter Kit uses the App Router and the dynamic routing folder structure provided by Next.js.
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.