Adding Favicon

Adding Logo & Sitename

Changing Color Scheme

Changing Typography

Creating A Page

Adding a image

Adding Assets

Markdown Primer

Understanding Sitemap

Adding Site-logo and Site-name

In this section, we will learn about adding site-logo and site-name to your fastn web site.

`site-logo` and `site-name` logic

misty-gray has the provision of adding site-logo and site-name.

Below is the logic for adding a logo and site name:

if you add site-name: NULL and site-logo: <your-logo-image-file-path> properties to the -- ds.page component then it shows the logo only.
if you add the site-name: Your Site Name property to the -- ds.page component then shows site-name only.

Adding logo or site-name

page component has site-logo and site-name properties. You can pass these properties to -- ds.page component.

Adding site-logo

-- import: fastn-community.github.io/misty-gray as ds

-- ds.page: Page title
site-logo: $assets.files.assets.ipsum-logo.svg
site-name: NULL

Some body content of the page.

-- end: ds.page

-- import: fastn-community.github.io/misty-gray as ds

-- ds.page: Page title
site-logo: $assets.files.assets.ipsum-logo.svg
site-name: NULL

Some body content of the page.

-- end: ds.page

Lang:

ftd

Adding site-name

-- import: fastn-community.github.io/misty-gray as ds

-- ds.page: Page title
site-name: fastn

Some body content of the page.

-- end: ds.page

-- import: fastn-community.github.io/misty-gray as ds

-- ds.page: Page title
site-name: fastn

Some body content of the page.

-- end: ds.page

Lang:

ftd

We recommend creating a global module that helps you to keep all your global properties and configurations in one .ftd file.

Let’s learn how to create a global module:

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

Here’s what your ds.ftd module would look like:

ds.ftd module with logo only

-- 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: $assets.files.assets.ipsum-logo.svg
site-name: NULL
body: $page.body

-- 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: $assets.files.assets.ipsum-logo.svg
site-name: NULL
body: $page.body

-- 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.

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

logo.ftd

Lang:

ftd

Click on the download icon of the above code-block. logo.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/logo/ you will see the page with the logo.

Change site-name with your site-name into the ds.ftd file string site-name: my fastn site and refresh e.g.http://127.0.0.1:8000/logo/ page, you will see site-name only.

On this page

site-logo and site-name logic

Adding logo or site-name

Home

Blog

Landing

Fastn

Adding Logo & Sitename

Adding Site-logo and Site-name

In this section, we will learn about adding site-logo and site-name to your fastn web site.

`site-logo` and `site-name` logic

misty-gray has the provision of adding site-logo and site-name.

Below is the logic for adding a logo and site name:

if you add site-name: NULL and site-logo: <your-logo-image-file-path> properties to the -- ds.page component then it shows the logo only.
if you add the site-name: Your Site Name property to the -- ds.page component then shows site-name only.

Adding logo or site-name

page component has site-logo and site-name properties. You can pass these properties to -- ds.page component.

Adding site-logo

-- import: fastn-community.github.io/misty-gray as ds

-- ds.page: Page title
site-logo: $assets.files.assets.ipsum-logo.svg
site-name: NULL

Some body content of the page.

-- end: ds.page

-- import: fastn-community.github.io/misty-gray as ds

-- ds.page: Page title
site-logo: $assets.files.assets.ipsum-logo.svg
site-name: NULL

Some body content of the page.

-- end: ds.page

Lang:

ftd

Adding site-name

-- import: fastn-community.github.io/misty-gray as ds

-- ds.page: Page title
site-name: fastn

Some body content of the page.

-- end: ds.page

-- import: fastn-community.github.io/misty-gray as ds

-- ds.page: Page title
site-name: fastn

Some body content of the page.

-- end: ds.page

Lang:

ftd

We recommend creating a global module that helps you to keep all your global properties and configurations in one .ftd file.

Let’s learn how to create a global module:

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

Here’s what your ds.ftd module would look like:

ds.ftd module with logo only

-- 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: $assets.files.assets.ipsum-logo.svg
site-name: NULL
body: $page.body

-- 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: $assets.files.assets.ipsum-logo.svg
site-name: NULL
body: $page.body

-- 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.

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

logo.ftd

Lang:

ftd

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

Change site-name with your site-name into the ds.ftd file string site-name: my fastn site and refresh e.g.http://127.0.0.1:8000/logo/ page, you will see site-name only.