Mogul

The Mogul Starter Kit is a styled Next.js website template. It is designed for a media website that focuses on article based content. It comes with a page builder, header and footer navs and a collection of composable content blocks to display and filter articles by author and category, and is styled with Tailwind CSS.

All our starter kits follow a similar setup, so if you've followed the setup guide using the Minimal kit so far, you should have been able to set up this kit in the same way. The differences between the Mogul Starter Kit and the Minimal Starter Kit is that this one has a different routing structure, it's content blocks are focused on diplaying articles and it is also fully styled.

Routing

The Mogul starter kit has the following routes:

/{slug}
/article/{slug}
/category/{slug}
/author/{slug}

Placeholder Routes
/login
/subscribe

Pages

General Page

The General Page in used for pages such as the Homepage. It uses the BlockMatcher function to output the following block options:

• Hero
• Articles by category

Article Page

The Article page is auto generated for each article content type. It outputs the article content plus up to 5 of the latest articles and 5 articles from the same category as the current article.

Category Page

The Category Page is auto generated to display all content for each article category.

Author Page

The Author Page is auto generated to display the authors bio information, up to three popular articles that can be selected in the Author content type and all the remaining articles written by that author.

Info Page

The Info Page is used for pages such as the About and Careers pages. It uses the BlockMatcher function to output an Image and Text block.

Policy Page

The Policy Page is used for text only pages such as the Privacy Policy, Terms and Conditions and Cookie Policy. It has a title field and a long text field.

Entries

Main Navigation

The Main Navigation auto populates a list of Article Categories on both desktop and mobile. The Main Navigation entry contains a block of Nav Links to link out to other pages.

Footer Navigation

The Footer Navigation entry contains a block of Nav Links and a block of Content Links to choose popular article categories. It also auto populates a placeholder subscription sign up form.

Blocks

Hero

The Hero block contains the following:

• Featured Post - A Content Link field that allows you to choose an article to feature.
• Latest Posts - Auto populated, up to 5 articles across all categories.
• Popular Authors - A Content Link field that allows you to select authors to feature.

Articles by Category

The Articles by Category block allows you to select a Content Link for an Article Category that you wish to display the content for. The block displays the latest post for that category as the main article and up to 5 articles from that category.

Image and Text

The Image and Text block contains an image asset field, a title field, a text field and a button block.

Nav Link

The Nav Link block contains a link text field, link url field and open in new tab toggle.

Button

Check out the Button block for more information

Code

There are various filters in place throughout the Mogul template to manipulate the data appropriately for each page and block. You will find inline comments that explain the JavaScript when used throughout the codebase.