Home
Adding Right Sidebar
Right Sidebar

In this section, we will learn to add the right-sidebar in midnight-storm.

If you want to show the right-sidebar on all pages and the content of your right-sidebar is the same for all pages then, we recommend creating a global module that helps you to keep all your global properties and configurations in one .ftd file.

How to create a global ds page module for midnight-storm?

You can create a ds.ftd module inside your fastn package and create your custom ds page component.

Let's learn how to create a module:

Create a new file let’s say ds.ftd.

Here’s what your ds.ftd module would look like:
ds.ftd module
-- import: fastn-community.github.io/midnight-storm as ds

-- component page:
children wrapper:
optional caption title:
optional body body:

-- ds.page: $page.title
site-logo: $fastn-assets.files.images.fastn.svg
body: $page.body
show-footer: true
sidebar: true

-- ds.page.right-sidebar:

-- ds.h3: Heading in sidebar

You can call any component inside sidebar. 

This right-sidebar will appear on all pages.

-- ds.code:
lang: ftd

-- ftd.text: Hello World

-- end: ds.page.right-sidebar

-- ftd.column:
spacing.fixed.em: 0.8
width: fill-container
children: $page.wrapper

-- end: ftd.column

-- end: ds.page

-- end: page
ds.ftd
Lang:
ftd

Click on the download icon of the above code-block. ds.ftd file will be downloaded. Import this file inside your new .ftd or download below given sidebar.ftd file.

Use ds component to create a new page using it.
-- import: fastn-community.github.io/midnight-storm as ds
-- import: <your fastn package name>/ds

-- ds.page: This is page title

This is body area. It contains multiple paragraphs.

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis
praesentium voluptatum.

-- ds.h1: This is heading level 1

This is heading level 1 optional body content.

-- ds.h2: This is heading level 2

This is heading level 2 optional body content.

-- ds.h3: This is heading level 3

This is heading level 3 optional body content.

-- end: ds.page
sidebar.ftd
Lang:
ftd

Click on the download icon of the above code-block. sidebar.ftd file will be downloaded.

Add this file inside your fastn project and deploy or run fastn serve on your localhost. Access your localhost in the browser e.g.http://127.0.0.1:8000/sidebar/ you will see a page with a right-sidebar.

How to enable right-sidebar without adding ds module?

To enable the right-sidebar add the sidebar: true property to ds.page component.

  • Click on the download icon of the below code-block. right-sidebar.ftd file will be downloaded.

  • Add this file to your fastn project.

  • deploy or run fastn serve on your localhost. Access your localhost in browser e.g.http://127.0.0.1:8000/right-sidebar/. 
-- import: fastn-community.github.io/midnight-storm as ds

-- ds.page: Right Sidebar 👉🏻
sidebar: true

-- ds.page.right-sidebar:

-- ds.h1: This is title 

This is a body of h1 component.

-- ds.markdown: 

You can add any component inside right-sidebar.

-- end: ds.page.right-sidebar

-- ds.page.body:

Add your page body content here.

-- end: ds.page
right-sidebar.ftd
Lang:
ftd
Copyright ©2022. Fastn Inc.