Open birkskyum opened 5 months ago
Interesting. I wasn't aware of this behavior especially on anchors. We need the base URL to be able to remove it from the path. Like anchors aside the router needs it. <A>
always added it on. So I'm guessing it removed and adds it again. But the fact this could fix <a>
in these scenarios is interesting.
Was this something we were doing in our Vite plugin though?.. Because I'd be super surprised if this was default behavior. I guess Vite does a transform on the HTML (their whole index.html thing) and we must have been tapping into that. Thanks this makes is easier to at least understand where the gap is.
@ryansolid , seem like i remembered wrong - there was no such behavior of injecting base path in anchors in the past, but it would be big dx improvement to have.
not possible to inject stuff arbitrary outside the html, most of the anchors, imgs, etc are being rendered via the JSX. If they are not A
they are not even javascript code run for them that we can do something on the runtime. If you are app is at a base path not /
, you would need to account for that in your assets/links etc if you're client runtime is not handling it (so for eg. solid's router can do it for A
, but who will do it for a plain img
?)
I don't know how it works, or if JSX is the limiting factor here, but if I look at a project like this Nuxt 3 demo: https://github.com/lucpotage/nuxt-github-pages
It has a baseURL: '/nuxt-github-pages/',
.
The two pages Home and About contain images like this:
<img src="/qingbao-meng-01_igFr7hd4-unsplash.jpg" loading="lazy">
.
When i run npm run generate
, the index.html contains an image tag that suddenly looks like this:
<img src="/nuxt-github-pages/qingbao-meng-01_igFr7hd4-unsplash.jpg" loading="lazy">
<A />
The anchors are written as <NuxtLink to="/about">About</NuxtLink>
, so no <Router base />
wrapper, and after generation it comes out as <a href="/nuxt-github-pages/about" class="">About</a>
It also works if i run npm run build
and node .output/server/index.mjs
instead of the ssg
Lowercase <a />
doesn't get this baseURL appended though.
The only way I could see consistently being able to make that transformation is if the image is being imported and then processed as an asset via vite. That could work as it would move it to the assets location and get that interesting hash rewrite. But I don't think we could just parse some arbitrary string. Is that like Nuxt special image component or something?
Duplicates
Latest version
Summary 💡
I have ported a static docs site from an older solid-start-static to the Vinxi version of SolidStart, and what I found was that it's still necessary to append the baseURL virtually everywhere there is an asset or link.
Current situation:
<img>
or favicon needs to manually have appended ${import.meta.env.SERVER_BASE_URL}<Router base={import.meta.env.SERVER_BASE_URL} />
is needed to make the<A />
work<a>
needs the${import.meta.env.SERVER_BASE_URL}/page
.Suggestion:
/page
or/img.png
would contain the baseURL, so that it wouldn't have to be injected in any of these three cases.Examples 🌈
No response
Motivation 🔦
No response