How can I link (non CSS/JS/font) asset files from within templates / snippets?

Question

How can I link (non CSS/JS/font) asset files from within templates / snippets?

trych opened this issue 2 years ago · comments

Hi there!

Thanks for this great kit, which is working great for me generally!

I have one little issue though, I repeatedly tried to use .svg assets in my code and could not get them to work. Kirby's svg helper does not output anything at all (I guess it's unable to find the file in question) and I failed to link them manually.

Now I wanted to link an svg as a favicon which I cannot do inline apparently, so I wanted to ask, how those assets can be linked so that they will be detected by the bundler and put into the correct place.

in my site/snippets/header.php, I have something like this:

  <link rel="shortcut icon" type="image/svg+xml" sizes="32x32" href="../../src/assets/icons/favicon.svg">

which obviously does not work. Is there any way to make this work and to link to asset files?

Thanks!

Arno Schlipf · Answer 1 · Wed Oct 19 2022 21:15:27 GMT+0800 (China Standard Time)

Glad you like the kit!
Vite only discovers assets that are referenced from js oder css files. If you only use an asset in php I wouldn't place it in the src folder (as a website should work without the src folder once it is in production mode und vite won't copy thoses assets in the dist folder if they aren't referenced from js/css). What I've been doing in such cases is placing the php-only assets in kirby's normal assets folder (in this kit this would be public/assets) and use them like this:

<link rel="shortcut icon" type="image/svg+xml" sizes="32x32" href="<?= asset('assets/icons/favicon.svg')->url() ?>">

Hope this helps!

trych · Answer 2 · Wed Oct 19 2022 21:32:23 GMT+0800 (China Standard Time)

What I've been doing in such cases is placing the php-only assets in kirby's normal assets folder (in this kit this would be public/assets) and use them like this:

Ok, but I cannot create a local assets folder there, as there is already the symlink assets in place that links to the src folder. I realize, I can just create an arbitrarily named folder instead, just want to make sure first, that I'm not misunderstanding you.

Arno Schlipf · Answer 3 · Wed Oct 19 2022 21:42:19 GMT+0800 (China Standard Time)

Ah you're right!
Since version v3.0.0 the symlink isn't needed any more, I forgot to remove it in this kit.

trych · Answer 4 · Wed Oct 19 2022 21:52:12 GMT+0800 (China Standard Time)

Ah, I didn't realize. I was also confused, because even if I did not copy it over to the server, everything kept working. :) But great, I got it to work with an arbitrarily named folder, thanks a lot!

trych · Answer 5 · Fri Oct 21 2022 02:19:32 GMT+0800 (China Standard Time)

Hi again, @arnoson,

it seems that after removing the assets symlink (and putting a normal assets folder link there instead with icons and such), the hot module replacement is broken. Is that possible? Would I need to change something else to make this work again?

Thanks!

Arno Schlipf · Answer 6 · Fri Oct 21 2022 02:40:26 GMT+0800 (China Standard Time)

Thats strange, if you are using the latest version of this kit (with kirby-vite ^3.0.0 and vite-plugin-kirby in your vite config) everything should work. Is every hot reload broken?

trych · Answer 7 · Fri Oct 21 2022 02:52:40 GMT+0800 (China Standard Time)

Is every hot reload broken?

It seems like it.
I used the version that was available before yesterday's update. Then yesterday I manually deleted the assets symlink and created an actualy symlink folder. I also updated Kirby from 3.7 to 3.8. Not sure what now caused the HMR to not work anymore ... Any way I can debug this?

Arno Schlipf · Answer 8 · Fri Oct 21 2022 04:03:40 GMT+0800 (China Standard Time)

With HMR broken, do you mean if you change a css file it won't update anymore? Or do you mean there is no reload when you change an icon in the public/assets folder?

trych · Answer 9 · Fri Oct 21 2022 04:37:57 GMT+0800 (China Standard Time)

do you mean if you change a css file it won't update anymore?

Yes, that's what I mean. I just did some testing and now I realize, it does work under localhost:8888, but it does not work under my laravel valet test domain (http://foo.test) anymore as it used to do. There I can only see the changes once I run npm run build. Does the valet setup need this assets folder for some reason?

Or was there maybe another change? I also ran composer update yesterday and it updated some packages. Might this be related?

trych · Answer 10 · Fri Oct 21 2022 05:37:34 GMT+0800 (China Standard Time)

I gave this a try with a new project, and there everything works, even on laravel valet, even after composer update etc. Hm, now I am a bit clueless what broke it in my current project. But I guess I can use localhost:8888 for this project ...

Arno Schlipf · Answer 11 · Fri Oct 21 2022 15:45:22 GMT+0800 (China Standard Time)

Maybe you can clear node modules and composer vendors and install it again? Or start with a new kit and copy all files from your current project. But I also have no idea what could have caused this issue.