← Back to Guides

Build a Documentation / Help Center with Typedream CMS

Putri Karunia2022-08-26

Build a Documentation with nested articles with Notion + Typedream

background

Let’s talk about the “Documentations” part for now and the FAQ can follow the same way. We're going to follow how Notion's guide and Intercom's Help Center are structured.

Article Structure

Imagine having this article structure

  1. Getting Started
    1. Add & Edit Content
    2. Hyperlink
    3. Drag and Drop
    4. Resizing Element
  2. Building your website
    1. Templates
    2. Section Templates
    3. Navbar & Buttons
  3. Publishing your website
    1. Light / Dark Mode
    2. Custom Domain
    3. SEO

You’ll need 2 Notion tables:

Guide Directories:

This is a list of guide directories that you want, like that home page of your intercom help center. In the example above we’ll have 3 rows: Getting Started, Building your website, Publishing your website

Have a column called "Directory" here, we'll use it as reference from the "Guide Articles" table.

Guide Articles:

This is a list of all the articles, like “Add & Edit Content”, “Build your Website”, etc.

Have a column called "Directory" here and indicate the directory where this article lives in.

Adding CMS in Typedream

In Typedream, you'll connect both collections using the CMS feature.

Connecting Guide Directories

Type /collection and go through the setup process, select 'Guide Directories' table to connect. You can select any template you like.

We want each item in our Guide Directories to look like this

It has a title and some description, then the list of articles in this directory at the bottom. To do this,

  1. go to the "Guide Directories Items" in your side bar
  2. click Settings
  3. click "Customize Current Template" under Templates

After customizing the guide directories template page as you like, make sure you include the list of Articles at the bottom.

Connecting Guide Articles

Inside the template for the Guide Directories item, go to the bottom to add a collection of articles for that specific directory.

Type /collection and connect the "Guide Articles" table this time.

After selecting the template, click "Edit Collection" on the right toolbar and set up the Filter:

  1. Set it to View All under Max Number of Items,
  2. Add a filter where Directory equals Current Item - Directory

That's it ⚡️

Try previewing one of the guide directory items and see how it looks. It should have a list of articles in that directory at the bottom.

Learn more about CMS →


See More Guides


Typedream

Typedream

Copyright © 2022 Govest, Inc. All rights reserved.

Y Combinator

Funded by Y Combinator

Product Hunt Product of the Month badge

Made in Typedream