Skip to content

Commit

Permalink
callout support for isomorphic asset bundling in docs
Browse files Browse the repository at this point in the history
  • Loading branch information
thescientist13 committed Oct 14, 2023
1 parent 6ee0767 commit 99d927a
Showing 1 changed file with 5 additions and 3 deletions.
8 changes: 5 additions & 3 deletions www/pages/docs/css-and-images.md
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,9 @@ You can do the same in your HTML
</header>
```

In your JavaScript use a combination of `new URL` and `import.meta.url` which means you can put the file anywhere in your project, not just the _assets/_ directory and it will be resolved automatically! For production builds, Greenwood will generate a unique filename for the asset as well, e.g. _logo-83bc009f.svg_.
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, not just the _assets/_ directory and it will be resolved automatically! For production builds, Greenwood will generate a unique filename for the asset as well, e.g. _logo-83bc009f.svg_.

> _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](https://github.com/ProjectEvergreen/greenwood/issues/1163) to follow along._
```js
const logo = new URL('../images/logo.svg', import.meta.url);
Expand All @@ -84,15 +86,15 @@ customElements.define('x-header', HeaderComponent);
> If you like an all-the-things-in-JS approach, Greenwood can be extended with [plugins](/plugins/) to support "webpack" like behavior as seen in the below example for CSS:
>
> ```javascript
> import headerCss from './header.css';
> import styles from './header.css';
>
> const logo = new URL('../images/logo.svg', import.meta.url);
>
> class HeaderComponent extends HTMLElement {
> connectedCallback() {
> this.innerHTML = `
> <style>
> ${headerCss}
> ${styles}
> <style>
> <header>
> <h1>Welcome to My Site!</h1>
Expand Down

0 comments on commit 99d927a

Please sign in to comment.