Load CSS/JS assets with theme_url or do assets.JS/CSS

Hello there.

I'm trying to customize the Future Imperfect theme, by HTML5Up to Grav, and the following happens to me:

If I use OPTION 1 ...

{% block stylesheets %}
  {% do assets.addCss('theme://assets/css/main.css') %}
{% endblock %}

and the same happens with JS:

{% block javascripts %}
  {% do assets.addJs('theme://assets/js/main.js', {group:'bottom'}) %}
  {% do assets.addJs('theme://assets/js/breakpoints.min.js', {group:'bottom'}) %}
  {% do assets.addJs('theme://assets/js/browser.min.js', {group:'bottom'}) %}
  {% do assets.addJs('theme://assets/js/jquery.min.js', {group:'bottom'}) %}
  {% do assets.addJs('theme://assets/js/util.js', {group:'bottom'}) %}
{% endblock %} #}

The open menu effect with this option not working.

If I use OPTION 2 ...

<link rel="stylesheet" href="{{theme_url}}/assets/css/main.css" />
<script src="{{theme_url}}/assets/js/jquery.min.js"></script>
<script src="{{theme_url}}/assets/js/browser.min.js"></script>
<script src="{{theme_url}}/assets/js/breakpoints.min.js"></script>
<script src="{{theme_url}}/assets/js/util.js"></script>
<script src="{{theme_url}}/assets/js/main.js"></script>

All works fine.

Moreover, if I inspect the code in Chrome or Firefox, the routes are same (\<link href="/grav-admin2/user/themes/future2/assets/css/main.css" rel="stylesheet">, for example)

Why is this happening? What should I change?

Thanks in advance

Note: I'm making port of Future Theme from scratch, I'm not using the Grav theme in repository. Original theme where you can open menu effect https://html5up.net/uploads/demos/future-imperfect/

@pmoreno , Are you working on a fresh install of the latest Grav v1.7.0-rc.20?

If so, did you add the |raw filter to the output of assets, like {{ assets.js('bottom') | raw }}?

Since Grav v1.7.0-rc.20 all output is auto-escaped for security reasons. When using |raw you are telling Twig the output is safe and should not be auto-escaped. This escaped code may look OK-ish in de dev console of the browser, but isn't....

This is what is printed without the |raw filter:

<script src="/user/themes/future/assets/js/skel.min.js"></script>
<script src="/user/themes/future/assets/js/util.js"></script>
<script src="/user/themes/future/assets/js/main.js"></script>;

Hi @pamtbaau

I'm working in a Grav v1.6.31 (the latest) and my botton block is:

{% block bottom %}
   {{ assets.js('bottom')|raw }}
{% endblock %}

For example, with {% do assets.addJs('theme://assets/js/main.js', {group:'bottom'}) %}, the result in html is: \<script src="/grav-admin2/user/themes/future2/assets/js/main.js"></script>.

With \<script src="{{theme_url}}/assets/js/main.js"></script>, the result is same: \<script src="/grav-admin2/user/themes/future2/assets/js/main.js)"></script>.

However, with the second options all works fine and the first option doesn't work.
I have not any idea what happens in this case.

I'll continue to investigate this issue.

@pmoreno, Can I have a look at your repo?

I have not repo yet. The theme ported to Grav is still in a very early stage. I will try to create one in the next few days.

Thanks @pamtbaau for you interest.

Thanks so much @pamtbaau.

Your solution works fine.