Skip to main content

Assets

Sometimes you want to link to assets (for example, docx files, images and so on) directly from topics. docStatic manages this through the static/ folder.

Any content placed in the folder will be available from the root of the published site. For example:

# Your doc
/website/docs/myFeature.mdx

# Some assets you want to use
/website/assets/docstatic-asset-example.docx
/website/img/docstastic-asset-example-banner.png

Images​

docStatic provides two ways to add images to topics. For inline images you can click the Image icon to place an image in a topic. This works best for icons () and small images. Icons should be stored as pre-scaled SVG files. These will be inverted and have their colour space rotated by 180° in dark mode.

Tip

You can use Librsvg to scale SVGs. For example, rsvg-convert example.svg -h 12 -f svg -o example.svg sets a height of 12 points.

For larger images, use the Figure component instead. It adds a caption—also used as alt text for screen readers—resizes to fit the page, and opens at full size in a light box when clicked.

Example​

Figure Example

For more information about the Media Manager, refer to Media Overview in the TinaCMS documentation.

Files​

In the same way you can link to existing assets by using the path from the static/ folder in the URL. For example:

./assets/docstatic-asset-example.docx

For more information, refer to Static assets in the Docusaurus documentation.

Related topics

  • Advanced guides – Advanced docStatic guides.
  • Guides – docStatic guides.
  • Static assets – Static assets are the non-code files that are directly copied to the build output. Learn about how they are handled and the best practices for using static assets.
  • Wikis – Creating wikis in docStatic
  • Figures – Images with captions and lightbox zoom.
  • Blog – Blogging with docStatic.
  • Diagrams – Writing diagrams with Mermaid.