From 0db10d42451d74429ca8c45bd14d515e7e3daa58 Mon Sep 17 00:00:00 2001
From: Owen Buckley <owenbuckley13@gmail.com>
Date: Fri, 6 Oct 2023 08:56:47 -0400
Subject: [PATCH] clarify docs on new URL usage patterns and general content
 around assets

---
 www/pages/docs/css-and-images.md | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/www/pages/docs/css-and-images.md b/www/pages/docs/css-and-images.md
index 02ffcffe2..26e8acefa 100644
--- a/www/pages/docs/css-and-images.md
+++ b/www/pages/docs/css-and-images.md
@@ -41,7 +41,7 @@ Styles can be done in any standards compliant way that will work in a browser.
 
 ### Assets
 
-For convenience, **Greenwood** does support an "assets" directory wherein anything copied into that will be present in the build output directory.  This is the recommended location for all your local images, fonts, etc.  Effectively anything that is not part of an `import`, `@import`, `<script>`, `<style>` or `<link>` will not be handled by **Greenwood**.
+For convenience, **Greenwood** does support an "assets" directory wherein anything included in that directory will automatically be copied into the build output directory.  This is the recommended location for all your local images, fonts, etc.  At this time, anything that is not referenced through an `import`, `@import`, `<script>`, `<style>` or `<link>` will not be handled by **Greenwood**.
 
 #### Example
 To use an image in a markdown file, you would reference it as so using standard markdown syntax:
@@ -61,7 +61,7 @@ You can do the same in your HTML
 </header>
 ```
 
-Or in your JavaScript use a combination of `new URL` and `import.meta.url`!
+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_.
 
 ```js
 const logo = new URL('../images/logo.svg', import.meta.url);
@@ -71,7 +71,8 @@ class HeaderComponent extends HTMLElement {
     this.innerHTML = `
       <header>
         <h1>Welcome to My Site!</h1>
-        <img alt="logo" src="${logo.pathname}" />
+        <!-- handles nested routes / deeplinking, e.g. https://www.mysite.com/some/page/ -->
+        <img src="${logo.pathname.replace(window.location.pathname, '/')}" alt="Greenwood logo"/>
       </header>
     `;
   }
@@ -95,7 +96,7 @@ customElements.define('x-header', HeaderComponent);
 >       <style>
 >       <header>
 >         <h1>Welcome to My Site!</h1>
->         <img alt="logo" src="${logo.pathname}" />
+>         <img src="${logo.pathname.replace(window.location.pathname, '/')}" alt="Greenwood logo"/>
 >       </header>
 >    `;
 >   }