Doc Site
Home
Adding Right Sidebar

Right Sidebar 👉🏻

-- ds.page.right-sidebar in a doc-site refers to a vertical column that is typically positioned on the right-hand side of the ds.page content area. It is a common design element used in web layouts to provide additional information, navigation options, or supplementary content alongside the main content.

How to enable right-sidebar on a page?

If you want to add ds.page.right-sidebar inside your page then refer below code snippet.
Scroll down to view full code, click on download icon to download this code
-- ds.page:
sidebar: true

-- ds.page.right-sidebar:

-- ds.h3: Heading in sidebar

You can call any component inside sidebar

-- ds.compact-text: Quick links:

- [Install `fastn`](install/)
- [Create `fastn` package](create-fastn-package/)
- [Expander Crash Course](expander/)

-- ds.compact-text: Join us:

We welcome you to join our [Discord](https://discord.gg/a7eBUeutWD) community today.

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

-- end: ds.page.right-sidebar

-- ds.page.body:

This is body content of your page.

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

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

Then deploy or run fastn serve on your localhost. Access your localhost in the browser and open http://127.0.0.1:8000/page/ url, you will see page with a right-sidebar as seen in 👉🏻 right side of this page.

How to enable right-sidebar on all pages?

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

How to modify FASTN/ds.ftd module of doc-site?

You can modify a FASTN/ds.ftd module which is already added inside your fastn package.

Let's learn how to modify FASTN/ds.ftd module:

  • Edit FASTN/ds.ftd module and enable sidebar: true

  • Then remove ftd.ui list right-sidebar: property from page component and add -- ftd.ui list page.right-sidebar and its content inside your FASTN/ds.ftd file below -- end: page.footer as shown in below code snippet.
Scroll down to view full code, click on download icon to download this code
-- import: fastn-community.github.io/footer
-- import: fastn-community.github.io/doc-site/common
-- import: fastn-community.github.io/roboto-typography as typo
-- import: fastn-community.github.io/doc-site
export: author-bio,code,compact-text,featured-post,h0,h1,h2,h3,iframe,image,image-first,image-in-between,link,link-group,markdown,not-found-1,not-found-2,output,post,posts,rendered,tip,without-image,youtube

-- component page:
children wrapper:
optional caption title:
optional body body:
boolean sidebar: true
optional string document-title:
optional string document-description:
optional ftd.raw-image-src document-image:
optional string site-name: Doc Site
optional ftd.image-src site-logo:
boolean github-icon: true
optional string github-url: https://github.com/fastn-community/doc-site/
boolean full-width: false
ftd.type-data types: $typo.types
ftd.color-scheme colors: $ftd.default-colors
integer logo-width: $common.logo-width
integer logo-height: $common.logo-height
boolean show-footer: true
boolean show-banner: true
ftd.ui list banner:
fastn.app-ui apps: $common.apps
boolean login-button: $common.login-button
string site-url: $common.site-url

-- ftd.ui list page.footer:

-- footer.fastn-footer:
copyright: Copyright © 2023 - [FifthTry](https://www.fifthtry.com/)
site-logo: $common.fastn-logo
powered-by-text: Powered by
powered-by-link: https://fastn.com/

-- end: page.footer

-- ftd.ui list page.right-sidebar:

-- ds.h3: Heading in sidebar

You can call any component inside sidebar

-- ds.compact-text: Quick links:

- [Install `fastn`](install/)
- [Create `fastn` package](create-fastn-package/)
- [Expander Crash Course](expander/)

-- ds.compact-text: Join us:

We welcome you to join our [Discord](https://discord.gg/a7eBUeutWD) community today.

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

-- end: page.right-sidebar

-- doc-site.page: $page.title
site-logo: $page.site-logo
body: $page.body
colors: $page.colors
sidebar: $page.sidebar
full-width: $page.full-width
types: $page.types
show-banner: $page.show-banner
show-footer: $page.show-footer
site-name: $page.site-name
logo-height: $page.logo-height
logo-width: $page.logo-width
github-icon: $page.github-icon
github-url: $page.github-url
right-sidebar: $page.right-sidebar
footer: $page.footer
banner: $page.banner
document-title: $page.document-title
document-description: $page.document-description
document-image: $page.document-image
apps: $page.apps
login-button: $page.login-button
site-url: $page.site-url

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

-- end: ftd.column

-- end: doc-site.page

-- end: page
ds.ftd
Lang:
ftd

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

Replace FASTN/ds.ftd file with this downloaded file inside your fastn project.

Then deploy or run fastn serve on your localhost. Access your localhost in the browser e.g.http://127.0.0.1:8000/ you will see all your pages with a right-sidebar.
Copyright © 2023 - FifthTry
Powered by