-- ds.page: ;; content goes here -- end: ds.page
To use the component you have to add the package to your project.
To add the
doc-site package to your project:
-- fastn.dependency: fastn-community.github.io/doc-site
doc-sitepackage in your documents like
-- import: fastn-community.github.io/doc-site as ds
page, you can effortlessly construct web pages by seamlessly integrating various components within this single container.
-- ds.page: You meet me first because I am ~in~ en'titled 🤴 site-name: Ajit site-logo: $assets.files.images.logo.svg logo-width: 50 site-url: https://fastn.com/ Hello, I am the first paragraph in the body area 🖐. And I am the second paragraph 🙆♂️ in the body area of the page component. At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis molestias excepturi sint occaecati cupiditate non provident. -- ds.h1: I'm the tallest in my family 🦕 This is heading level 1 optional body content. -- ds.h2: Damn! I just missed by few pixels 🐪 This is heading level 2 optional body content. -- ds.h3: I get bullied by the above two 🙄 This is heading level 3 optional body content. -- ds.markdown: I don't brag about myself but I am the convenient one 😎. -- end: ds.page
We will learn how to add and change color schemes and typography in the upcoming videos.
Let's view it in the browser. Since we are giving a
site-logo that has a file
from this package, let's first import assets.
This is how the page looks with default color-scheme and typography. We have the site logo and site name at the top left along with the site-url which you can see at the bottom-left, when I hover the mouse pointer on logo.We have the entitled title, along with other data.
From harmonizing color schemes, site logo and name to selecting compelling typography, you can effortlessly infuse your website with a unified and professional look.
To know about this, checkout
How to add meta-data for website optimization.
Page has some properties that easily add meta-data and hence unlocks the
potential of SEO optimization and boost your website's visibility and ranking.
Now imagine, you have a dozen of such documents in your package.
On top of it, imagine displaying your distinctive site logo and site name across the website, creating a unified visual identity that resonates with your brand. It would be a tedious job applying the same properties to all the documents.
Also, in the future, if you add new properties or change one or more values of the properties, then you would need to manually update it on all the pages.
To maintain the consistency and make it easy to update throughout the website with a single change, we can create a custom page component.
To do the same, we will move the component definition in a separate document,
let's call it
-- import: fastn-community.github.io/doc-site as ds -- import: ds-page/assets -- component page: optional caption title: optional body body: children wrapper: -- ds.page: $page.title body: $page.body site-name: Ajit site-logo: $assets.files.images.logo.svg logo-width: 50 site-url: https://fastn.com/ wrapper: $page.wrapper -- end: ds.page -- end: page
ds.page component is wrapped inside this component page.
So now in
index.ftd document we can remove these properties and instead use
the custom page of my-ds document i.e.
doc-site, so we will import
doc-sitehere. But, we are not importing assets here anymore so we can remove it. I have already used it in my-ds.
Any changes in the values of the properties can be done here, sparing us the need to apply them individually to each and every page.Now as we know we are going to use
my-dsin almost all of the documents, therefore we can auto-import it.
-- fastn.auto-import: <package-name>/my-ds as my-ds
Thank you guys, keep watching these videos to learn more about fastn.Support us by giving a star ⭐ on GitHub and join our fastn community on Discord.