Hi

Howcan one add CSS and JS to vibe.d templates? Here is my setup (vibe.d project initiated with dub using dub init myproject vibe.d):

./public:
main.css main.js

./source:
app.d

./views:
auth2fa.dt fail.dt login.dt pair.dt passfail.dt userfail.dt

I am trying to add a css file using link(rel="stylesheet", type="text/css", href="main.css") in the diet templates, but it has no effect. I took the files from here: https://codepen.io/ricardoolivaalonso/pen/YzyaRPN

Note that (as discussed in my previous post by Steven Schveighoffer) , there are some errors in the jade/pug template file. But even if we correct them, and then I try to use the setup, I do not get the styles. (Of course, i can't point my browser to www.my.server/main.css or so, because those endpoints are not defined. However, as I understood, all non-defined endpoints should anyway be redirected to public)

Thank you.

On 1/19/23 11:44 PM, seany wrote:

Keep in mind, this literally translates to a link tag in the HTML. So here is what happens:

1. your vibe project is running, and passes out the compiled template to the browser.
2. The browser sees the link tag, and attempts to ask the server for the file "main.css"
3. The vibe project tries to match that to its routes, and cannot find it, and so returns an error.

So this takes 2 steps to remedy:

1. Register a serveStaticFiles route with the glob public/*. See the docs here: https://vibed.org/api/vibe.http.fileserver/serveStaticFiles
2. Change your link to refer to public/main.css, instead of just main.css.

This is how it looks in my code:

 router.get("/public/*", serveStaticFiles(""));

And the links look like:

link(rel="stylesheet",href="/public/css/flatpickr.min.css")

as an example. Note that I put my css files into a css subdirectory under public, and my javascript files under a js subdirectory. It all depends on how you want to set it up.

-Steve