Search code examples
javascriptjsontwiggravparticles.js

Pass .json config to external js for a grav theme

I'm currently building a Grav theme, in which a div should have the particle background from particle.js.

As stated by the setup manual, the actual function call in the js to render the particles, requires a config file in .json format

/* particlesJS.load(@dom-id, @path-json, @callback (optional)); */
particlesJS.load('particles-js', 'assets/particles.json', function() {
  console.log('callback - particles.js config loaded');
});

However, I'm unsure how I can provide the path to the json file. When I tried to pass a regular html relative path (like in the example above), the GET command in the console returned a 404 error. When I tried a Static Asset Path using {{ url("theme://assets/particles.json") }}, the GET returned a 403 (Forbidden) error.

How can I provide the path in the external script?

Solution

  • Found the solution myself: Instead of providing a relative path or using the stream functions, you can provide a "semi-relative" path to the theme's asset folder (if you use one): /user/themes/<theme-name>/assets/particles.json

    EDIT: In response to the comment by @motizukilucas, I now had a look back at my code (this has been quite a while back, so I try to be as precise as possible; also I don't know if this is still the correct and most elegant way to do it).

    For the .twig file of the main page that this is used in:

    {% set theme_config = attribute(config.themes, config.system.pages.theme) %}
<!DOCTYPE html>
<html class="h-full" lang="{{ grav.language.getActive ?: theme_config.default_lang }}">
    <head>
    ...
    {% do assets.addJs('theme://js/vendor/particles.js', 80) %}
    {% do assets.addJs('theme://js/frontend_js.js', {'priority':80, 'group':'bottom'}) %}
    </head>
    ...
    {% block bottom %}
        {{ assets.js('bottom') }}
    {% endblock %}

    For the frontend.js file (this is where the relative path goes that I mentioned in my initial answer); in the manual this is called app.js:

    /* particlesJS.load(@dom-id, @path-json, @callback (optional)); */
particlesJS.load('particles-js', '/user/themes/<theme-name>/assets/particles.json', function() {
    console.log('callback - particles.js config loaded');
  });

    Then just place the particles.js in the //js/vendor/ folder in the theme (see relative path in the .twig file above) and your config (particles.json) in the mentioned /user/themes/<theme-name>/assets/ folder.