powered by

assets: A Special Module

Thefastn package has a special module called assets importing which provides access to the variable referring to files and fonts defined in the package.

The file referring variables are foreign variables, while, fonts are simple variable.

Accessing Files

The assets module contains a foreign variable named files that holds references to the package’s files. You can use this variable to get the full path or URL of a file.

Suppose if you want to get the full path of folder-1/folder-2/foo.ftd present in dependency package named other-package. You need to write the following code:
-- import: other-package/assets

-- ftd.text: Link to foo.ftd
link: $assets.files.folder-1.folder-2.foo.ftd

The $assets.files.folder-1.folder-2.foo.ftd reference will return a string with a value like ``-/other-package/folder-1/folder-2/foo.ftd`.

For images, the assets reference returns a ftd.image-src value that includes values for both light and dark modes.

Accessing Image Files

You can define images for both light and dark modes, and the assets reference returns a ftd.image-src type for them.

A Single Image for Both Light and Dark Mode

To use a single image for both light and dark modes, add the image (e.g., logo.png) anywhere in your package (e.g., inside static directory), and use the following code to access it:
-- import: <package-name>/assets

-- ftd.image:
src: $assets.files.static.logo.png
The above code will render the image. The return type of assets.files.static.logo.png is ftd.image-src with a value like this:
-- ftd.image-src assets.files.static.logo.png:
light: -/<package-name>/static/logo.png
dark: -/<package-name>/static/logo.png

Different images for light and dark mode.

If you want a different images for both light and dark mode, then add an image, say logo.png (for light mode) and logo-dark.png (for dark mode), somewhere in your package, say inside static folder.

If you want to use different images for light and dark modes, add the images (e.g., logo.png for light mode and logo-dark.png for dark mode) anywhere in your package (e.g., inside static directory), and use the following code to access them:
-- import: <package-name>/assets

-- ftd.image:
src: $assets.files.static.logo.png
The above code will render the image. The return type of assets.files.static.logo.png is ftd.image-src with a value like this:
-- ftd.image-src assets.files.static.logo.png:
light: -/<package-name>/static/logo.png
dark: -/<package-name>/static/logo-dark.png

Accessing Font

The assets module contains a variable named fonts that holds references to the fonts defined in a package.

You can either create your own font package or add the font package dependency in your current package or define fonts in your current package itself.

Lets say we are using font package fifthtry.github.io/roboto-font (repo) as dependency and lets use it in our module.

Let’s assume that we are using the font package fifthtry.github.io/roboto-font (repo) as a dependency and we want to use it in our module. We can import the assets module of roboto-font package to access its fonts.
-- import: fifthtry.github.io/roboto-font/assets

-- ftd.type dtype:
size.px: 40
weight: 900
font-family: $assets.fonts.Roboto
line-height.px: 65
letter-spacing.px: 5

-- ftd.text: Hello World
role: $dtype
In FASTN.ftd module for fifthtry.github.io/roboto-font package, you can see that the fonts are defined like this:
-- fastn.font: Roboto
style: italic
weight: 100
woff2: -/fifthtry.github.io/roboto-font/static/Roboto-100-italic-cyrillic-ext.woff2
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F

<more fonts>
We have accessed these fonts using fonts variable which contains reference to Roboto ($assets.fonts.Roboto).

Support fastn!

Enjoying fastn? Please consider giving us a star ⭐️ on GitHub to show your support!

Getting Help

Have a question or need help?

Visit our GitHub Q&A discussion to get answers and subscribe to it to stay tuned.

Join our Discord channel and share your thoughts, suggestion, question etc.

Connect with our community!

Found an issue?

If you find some issue, please visit our GitHub issues to tell us about it.

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.

assets: A Special Module

Thefastn package has a special module called assets importing which provides access to the variable referring to files and fonts defined in the package.

The file referring variables are foreign variables, while, fonts are simple variable.

Accessing Files

The assets module contains a foreign variable named files that holds references to the package’s files. You can use this variable to get the full path or URL of a file.

Suppose if you want to get the full path of folder-1/folder-2/foo.ftd present in dependency package named other-package. You need to write the following code:
-- import: other-package/assets

-- ftd.text: Link to foo.ftd
link: $assets.files.folder-1.folder-2.foo.ftd

The $assets.files.folder-1.folder-2.foo.ftd reference will return a string with a value like ``-/other-package/folder-1/folder-2/foo.ftd`.

For images, the assets reference returns a ftd.image-src value that includes values for both light and dark modes.

Accessing Image Files

You can define images for both light and dark modes, and the assets reference returns a ftd.image-src type for them.

A Single Image for Both Light and Dark Mode

To use a single image for both light and dark modes, add the image (e.g., logo.png) anywhere in your package (e.g., inside static directory), and use the following code to access it:
-- import: <package-name>/assets

-- ftd.image:
src: $assets.files.static.logo.png
The above code will render the image. The return type of assets.files.static.logo.png is ftd.image-src with a value like this:
-- ftd.image-src assets.files.static.logo.png:
light: -/<package-name>/static/logo.png
dark: -/<package-name>/static/logo.png

Different images for light and dark mode.

If you want a different images for both light and dark mode, then add an image, say logo.png (for light mode) and logo-dark.png (for dark mode), somewhere in your package, say inside static folder.

If you want to use different images for light and dark modes, add the images (e.g., logo.png for light mode and logo-dark.png for dark mode) anywhere in your package (e.g., inside static directory), and use the following code to access them:
-- import: <package-name>/assets

-- ftd.image:
src: $assets.files.static.logo.png
The above code will render the image. The return type of assets.files.static.logo.png is ftd.image-src with a value like this:
-- ftd.image-src assets.files.static.logo.png:
light: -/<package-name>/static/logo.png
dark: -/<package-name>/static/logo-dark.png

Accessing Font

The assets module contains a variable named fonts that holds references to the fonts defined in a package.

You can either create your own font package or add the font package dependency in your current package or define fonts in your current package itself.

Lets say we are using font package fifthtry.github.io/roboto-font (repo) as dependency and lets use it in our module.

Let’s assume that we are using the font package fifthtry.github.io/roboto-font (repo) as a dependency and we want to use it in our module. We can import the assets module of roboto-font package to access its fonts.
-- import: fifthtry.github.io/roboto-font/assets

-- ftd.type dtype:
size.px: 40
weight: 900
font-family: $assets.fonts.Roboto
line-height.px: 65
letter-spacing.px: 5

-- ftd.text: Hello World
role: $dtype
In FASTN.ftd module for fifthtry.github.io/roboto-font package, you can see that the fonts are defined like this:
-- fastn.font: Roboto
style: italic
weight: 100
woff2: -/fifthtry.github.io/roboto-font/static/Roboto-100-italic-cyrillic-ext.woff2
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F

<more fonts>
We have accessed these fonts using fonts variable which contains reference to Roboto ($assets.fonts.Roboto).

Support fastn!

Enjoying fastn? Please consider giving us a star ⭐️ on GitHub to show your support!

Getting Help

Have a question or need help?

Visit our GitHub Q&A discussion to get answers and subscribe to it to stay tuned.

Join our Discord channel and share your thoughts, suggestion, question etc.

Connect with our community!

Found an issue?

If you find some issue, please visit our GitHub issues to tell us about it.

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.