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.
tip
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)