Right Sidebar

-- import: fastn-community.github.io/misty-gray 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.px: 13
width: fill-container
children: $page.wrapper

-- end: ftd.column

-- end: ds.page

-- end: page

-- import: fastn-community.github.io/misty-gray 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.px: 13
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 my-ds component to create a new page using it.

-- import: fastn-community.github.io/misty-gray as ds
-- import: <your fastn package name>/my-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

-- import: fastn-community.github.io/misty-gray as ds
-- import: <your fastn package name>/my-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 download icon of 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 browser e.g.http://127.0.0.1:8000/sidebar/ you will see page with right-sidebar.

-- import: fastn-community.github.io/misty-gray 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

-- import: fastn-community.github.io/misty-gray 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

On this page

How to create a global my-ds page module for misty-gray?

How to enable right-sidebar without adding my-ds module?

You can call any component inside sidebar

Quick links:

Join us:

We welcome you to join our Discord community today.

We are trying to create the language for human beings and we do not believe it would be possible without your support. We would love to hear from you.

Home

Blog

Landing

Fastn

Adding Right Sidebar

In this section, we will learn how to add right-sidebar in misty-gray.

How to create a global `my-ds` page module for `misty-gray`?

You can create a ds.ftd module inside your fastn package and create your custom my-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/misty-gray 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.px: 13
width: fill-container
children: $page.wrapper

-- end: ftd.column

-- end: ds.page

-- end: page

-- import: fastn-community.github.io/misty-gray 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.px: 13
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 my-ds component to create a new page using it.

-- import: fastn-community.github.io/misty-gray as ds
-- import: <your fastn package name>/my-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

-- import: fastn-community.github.io/misty-gray as ds
-- import: <your fastn package name>/my-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 download icon of above code-block. sidebar.ftd file will be downloaded.

-- import: fastn-community.github.io/misty-gray 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

-- import: fastn-community.github.io/misty-gray 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

How to create a global `my-ds` page module for `misty-gray`?

How to enable right-sidebar without adding `my-ds` module?

Heading in sidebar

Quick links:

Join us:

Right Sidebar

How to create a global `my-ds` page module for `misty-gray`?

How to enable right-sidebar without adding `my-ds` module?