Adding Site logo & Site name

site-logo and site-name logic

doc-site 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-logo: <your-logo-image-file-path> properties to the -- component then it shows the logo only.
  • if you add the site-name: Your Site Name property to the -- component then shows site-name only.
  • if you add both site-logo and site-name into your component then it shows both.
Modify FASTN/ds.ftd module site-name & site-logo properties value with your site name and logo image asset.
Scroll down to view full code, click on download icon to download this code
-- import:
-- import:
-- import: as typo
-- import:
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: false
optional string document-title:
optional string document-description:
optional ftd.raw-image-src document-image:
optional string site-name: Your site name
optional ftd.image-src site-logo: $asset.files.assets.logo-image.png
boolean github-icon: true
optional string github-url:
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: false
ftd.ui list right-sidebar:
ftd.ui list banner: apps: $common.apps
boolean login-button: $common.login-button
string site-url: $

-- ftd.ui list page.footer:

-- footer.fastn-footer:
copyright: Copyright © 2023 - [FifthTry](
site-logo: $common.fastn-logo
powered-by-text: Powered by

-- end: page.footer

-- $page.title
site-logo: $
body: $page.body
colors: $page.colors
sidebar: $page.sidebar
full-width: $page.full-width
types: $page.types
show-banner: $
show-footer: $
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: $

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

-- end: ftd.column

-- end:

-- end: page
Change site-name and site-logo as per your need. Then deploy or run fastn serve on your localhost. Access your localhost in the browser e.g.
Copyright © 2023 - FifthTry