Assets

Greenwood provides handling and support for common web formats and conventions. This can include images, fonts, PDFs, whatever you need.

Directory

For convenience, Greenwood supports an assets/ directory wherein anything included in that directory will be automatically copied into the build output directory as is. This can be useful if you have files that are not bundled through CSS or JavaScript (e.g import, @import, <script>, <style> or <link>) and can be referenced anywhere as /assets/path/to/image.png.

Looking at an example:

src/
  assets/
    my-image.webp
    download.pdf

Here is how you would reference it from markdown:

# This is my page

![my-image](/assets/images/my-image.webp)

Or HTML:

<header>
  <h1>Welcome to My Site!</h1>
  <a href="/assets/download.pdf">Download our product catalog</a>
</header>

URL

In your JavaScript, you can also use a combination of new URL and import.meta.url which means you can put the file anywhere in your project and it will will be resolved automatically. For production builds, Greenwood will generate a unique filename for the asset as well, e.g. logo-83bc009f.svg.

Below is an example for reference:

// src/components/header.js
const logo = new URL("./banner.png", import.meta.url);

class HeaderComponent extends HTMLElement {
  connectedCallback() {
    this.innerHTML = `
      <header>
        <h1>Welcome to My Site!</h1>
        <!-- handles nested routes / deeplinking, e.g. https://www.mysite.com/some/page/ -->
        <img src="${logo.pathname.replace(window.location.pathname, "/")}" alt="Greenwood logo"/>
      </header>
    `;
  }
}

customElements.define("x-header", HeaderComponent);

We are looking to improve the developer experience around using new URL + import.meta.url as part of an overall isomorphic asset bundling strategy. You can visit this GitHub issue to follow along.

Meta Files

By default, Greenwood will automatically detect these "meta" files from the top-level of your workspace and automatically copy them over to the root of the build output directory.

Example:

src/
  favicon.ico
  robots.txt
  sitemap.xml

If you need support for more custom copying of static files like this, please check out our docs on creating your own copy plugin.

Edit on GitHub

Introduction

Pages

Resources

Plugins

Content As Data

Reference