Which JS for index.blade page?

[matteo_maria_ambrogi]

hello,

wondering which should be the correct filename of the javascript to have It loaded in index.blade section.

i figured It out that the SCSS is simply posts.scss, so tried both posts.js and index.js but neither of them is loaded (even if correctly updated in the router)

any hint?

ty

[Jacek]

Javascript routing based on the body classes names.
So if in your body class you have for example: about-me the correct routing will be aboutMe,
for blog will be blog etc.
Keep in mind that, you have to create new file for new route and add it in main.js.
As examples home and about in Sage.
This is no matter that is index or any other page template.

Link to documentation
https://roots.io/docs/sage/9.x/compiling-assets/#javascript-dom-based-routing

[matteo_maria_ambrogi]

So being index.blade the archive page, and being “archive” class added, I should rename the js file to archive.js?

[Jacek]

If you not add new classes to archive page and you have set some page as Post Page, open inspector and check body classes for Post Page should be “blog” so add new js file in routes folder blog.js

add:

export default {
  init() {
    // JavaScript to be fired on the archive page
    console.log('Test archive route');
  },
};

in main js import new route:

import blog from './routes/blog';

/** Populate Router instance with DOM routes */
const routes = new Router({
  // All pages
  common,
  // Home page
  home,
  // Archive
  blog,
});

Now if you open your post page in console you should see above “Test archive route”