search

arnoson / kirby-vite-multi-page-kit

A multi-page Kirby CMS + Vite starter kit
MIT License
37 stars 6 forks source link

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

Closed trych closed 2 years ago

trych commented 2 years ago

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!

arnoson commented 2 years ago

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 commented 2 years ago

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.

arnoson commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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!

arnoson commented 2 years ago

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 commented 2 years ago

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?

arnoson commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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 ...

arnoson commented 2 years ago

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.