Rocket Logo Rocket Docs Themes Tools Blog

Assets

One of the best aspects of Rocket is it is pretty much HTML, CSS, Markdown, and JS. This means using assets (images, videos, CSS files, GIFs, etc.) is as easy as it normally is in the "vanilla" context of each of those languages.

During development Rocket does not move any of your assets around but it changes the paths in the output HTML to reference to the original assets location. This means that relative paths within assets (like css, js) will always work.

Source Assets

HTML

<img src="../path/to/your/image.jpg" alt="My Image" />

CSS

.my-class {
  background-image: url('../path/to/your/image.jpg');
}

Markdown

![My Image](../path/to/your/image.jpg)

Javascript

This would be similar to HTML since it would be inside of an html template literal

export default () => html`<img src="../path/to/your/image.jpg" alt="My Image" />`;

Static Assets

Oftentimes, you have files such as robots.txt, .htaccess (redirects), favicons, etc. that do not need to be in your src/ directory. For these types of files that simply need to be copied to the built site you will want to place them in your site/public/ folder. Anything in this folder will be copied over into the built site completely untouched.

Note: Since these files are simply copied over during the build process, anything you place in the site/public/ directory will not be optimized, bundled, or minified by Rocket.

The :resolve Function

Rocket includes a special :resolve function that will resolve npm imports for assets. This means any npm package, script, image, video, css file, etc. can be used as the value of the src attribute.

Here is an example of css file being imported using the :resolve function

<img src="resolve:@rocket/engine/assets/logo.svg" alt="Rocket Logo" />

<link rel="stylesheet" href="resolve:@example/blog/styles/blog.css" />

Node exports

If your package is "type": "module" then you can also add exports.

👉 package.json

{
  "name": "my-package",
  "type": "module",
  "exports": {
    ".": "./src/index.js",
    "./assets/*": "./src/assets/*"
  }
}

Once you have an export it also enables you to "self" reference your package. Combine this with the :resolve function means that you can reference assets always with the same path. Completely unrelated to the path of the file itself.

👉 site/pages/index.rocket.md

![Logo](resolve:my-package/assets/logo.svg)

👉 site/pages/about/index.rocket.md

![Logo](resolve:my-package/assets/logo.svg)