[Blog] - 404 for favicon and JS assets #767

New Issue

Closed

opened 2024-01-28 15:10:29 +01:00 by floss4good · 7 comments

floss4good commented

2024-01-28 15:10:29 +01:00

After noticing that the blog is missing a favicon I've checked the browser's console and found out that a 404 error was returned for the following assets:

I'm new to Grav, but after checking Vagrantfile and bootstrap.sh I discovered that although the blog uses a distinct theme, these assets are requested from the main theme (.../themes/disroot/... instead of .../themes/disrootblog/...). This is caused by the fact that {{ theme_url }} variable is most probably returning the relative URL to the main theme, as defined in the Global system configuration file (system.yaml) without taking into account that for blog the theme is set using Themer plugin.
Anyway, by using the theme:// stream as recommended in the Grav Documentation these errors can be fixed.

After noticing that the blog is missing a favicon I've checked the browser's console and found out that a 404 error was returned for the following assets: - https://disroot.org/user/themes/disroot/images/favicon.ico - https://disroot.org/user/themes/disroot/js/flexslider.min.js - https://disroot.org/user/themes/disroot/js/global.js I'm new to Grav, but after checking _[Vagrantfile](/Disroot/Website/src/branch/main/vagrant/Vagrantfile)_ and _[bootstrap.sh](/Disroot/Website/src/branch/main/vagrant/bootstrap.sh)_ I discovered that although the blog uses a distinct theme, these assets are requested from the main theme (`.../themes/disroot/...` instead of `.../themes/disrootblog/...`). This is caused by the fact that `{{ theme_url }}` variable is most probably returning the relative URL to the main theme, as defined in the Global system configuration file (_[system.yaml](/Disroot/Website/src/branch/main/vagrant/provision/var/www/disroot.lan/site/user/config/system.yaml)_) without taking into account that for blog the theme is set using Themer plugin. Anyway, by using the `theme://` stream as [recommended in the Grav Documentation](https://learn.getgrav.org/17/themes/theme-vars#theme-url-variable) these errors can be fixed.

floss4good commented

2024-01-28 15:11:45 +01:00

Author

The favicon

As mentioned above, by changing

      <link rel="icon" type="image/png" href="{{ theme_url }}/images/favicon.ico" />

with

      <link rel="icon" type="image/png" href="{{ url('theme://images/favicon.ico') }}" />

the favicon will be requested from the blog theme (https://disroot.org/user/themes/disrootblog/images/favicon.ico). However, this ico is not Disroot related; it is actually the one included by default in Lingonberry theme.
Of course, the file can be replaced with your favicon.png that is already used for 'disroot' theme.

An alternative quick (but dirty) fix would be to just change the extension from 'ico' to 'png' and this will make the blog request the existing favicon from 'disroot' theme.

From my point of view, the favicon is the kind of asset that should not be linked to a theme but rather included in the Website repository (though, I don't know how it should be according to the Grav way).

Anyway, it's up to you to decide how this should be fixed in the Disroot way.

**The favicon** As mentioned above, by changing ``` <link rel="icon" type="image/png" href="{{ theme_url }}/images/favicon.ico" /> ``` with ``` <link rel="icon" type="image/png" href="{{ url('theme://images/favicon.ico') }}" /> ``` the favicon will be requested from the blog theme (https://disroot.org/user/themes/disrootblog/images/favicon.ico). However, this ico is not Disroot related; it is actually the one included by default in Lingonberry theme. Of course, the file can be replaced with your _favicon.png_ that is already used for 'disroot' theme. An alternative quick (but dirty) fix would be to just change the extension from 'ico' to 'png' and this will make the blog request the existing favicon from 'disroot' theme. From my point of view, the favicon is the kind of asset that should not be linked to a theme but rather included in the Website repository (though, I don't know how it should be according to _the Grav way_). Anyway, it's up to you to decide how this should be fixed in _the Disroot way_.

floss4good commented

2024-01-28 15:12:55 +01:00

Author

BTW: I've also found the following nginx alias configuration within the disroot.lan.conf:

  location /favicon.ico {
    alias /var/www/disroot.lan/site/favicon.png;
  }

I think this is currently wrong.

BTW: I've also found the following nginx alias configuration within the [disroot.lan.conf](/Disroot/Website/src/branch/main/vagrant/provision/etc/nginx/sites-available/disroot.lan.conf): ``` location /favicon.ico { alias /var/www/disroot.lan/site/favicon.png; } ``` I think this is currently wrong.

floss4good commented

2024-01-28 15:13:30 +01:00

Author

JS assets

Again, replacing

  <script type='text/javascript' src='{{ theme_url }}/js/flexslider.min.js'></script>
  <script type='text/javascript' src='{{ theme_url }}/js/global.js'></script>

with

  {% block bottomscripts %}
    {% do assets.addJs('theme://js/flexslider.min.js', { group: 'bottom' }) %}
    {% do assets.addJs('theme://js/global.js', { group: 'bottom' }) %}
  {% endblock %}

will fix the 404 errors.

However, I don't know if you actually need to load these JavaScript files (since everything seems to work without them, I would assume they are actually not needed).

flexslider.min.js is only needed for blog posts with slideshow and quickly searching the current sources I did not found such a post; however, the theme do support such a feature.

global.js has some functions related to navigation toggle menu, scroll to the top, video resizing and loads the FlexSlider.

**JS assets** Again, replacing ``` <script type='text/javascript' src='{{ theme_url }}/js/flexslider.min.js'></script> <script type='text/javascript' src='{{ theme_url }}/js/global.js'></script> ``` with ``` {% block bottomscripts %} {% do assets.addJs('theme://js/flexslider.min.js', { group: 'bottom' }) %} {% do assets.addJs('theme://js/global.js', { group: 'bottom' }) %} {% endblock %} ``` will fix the 404 errors. However, I don't know if you actually need to load these JavaScript files (since everything seems to work without them, I would assume they are actually not needed). `flexslider.min.js` is only needed for blog posts with slideshow and quickly searching the current sources I did not found such a post; however, the theme do support such a feature. `global.js` has some functions related to navigation toggle menu, scroll to the top, video resizing and loads the FlexSlider.

meaz self-assigned this 2024-02-03 18:22:21 +01:00

meaz added this to the 24.02 - February milestone 2024-02-03 18:22:25 +01:00

meaz referenced this issue from Disroot-themes/grav-theme-disrootblog

2024-02-06 22:48:52 +01:00

404 error on js and favicon not displaying #13

meaz commented

2024-02-06 22:50:29 +01:00

Owner

PR is ready, thanks a lot @floss4good (as for nginx, we don't use that one on prod)

👍 1

meaz closed this issue

2024-02-06 22:50:30 +01:00

floss4good commented

2024-02-16 22:24:50 +01:00

Author

@meaz, on Tuesday I noticed that a fix for this issue was deployed on prod (and the blog is now having a favicon).
What I also noticed is that the blog's favicon.ico does not look the same as the website's favicon.png. I don't know if this was on purpose or not, so I'm mentioning it here.

@meaz, on Tuesday I noticed that a fix for this issue was deployed on prod (and the blog is now having a favicon). What I also noticed is that [the blog's favicon.ico](https://git.disroot.org/Disroot-themes/grav-theme-disrootblog/src/commit/99ed2584bff2de6e2739c5b954f92dbb87c74a10/images/favicon.ico) does not look the same as [the website's favicon.png](https://git.disroot.org/Disroot-themes/grav-theme-disroot/src/commit/920533c1625366ed6a64e0751a59b670cb901058/images/favicon.png). I don't know if this was on purpose or not, so I'm mentioning it here.

meaz commented

2024-02-17 19:15:56 +01:00

Owner

Nice. Thanks. I've updated that, it just needs to be approved by team.

👍 1

floss4good commented

2024-02-17 19:43:28 +01:00

Author

Nice. Thanks. I've updated that, it just needs to be approved by team.

Assuming that the mentioned update was pushed through blog theme PR 14, please note that you have updated the disroot_logo.png (that is displayed within the header) and not the favicon.ico (that is displayed by the web browser as tab icon).

The logo from the header was also different, indeed (don't ask me why, but in this case I assumed that it is so by design), but my comment from yesterday was referring to the favicon (again, it was just a remark, I don't know if according to your design the favicon should or should not be the same for both the website and the blog).

Edit:
OK, I see that you created also a PR for website theme in order to update the favicon also there. Sorry for the above.

> Nice. Thanks. I've updated that, it just needs to be approved by team. Assuming that the mentioned update was pushed through [blog theme PR 14](/Disroot-themes/grav-theme-disrootblog/pulls/14), please note that you have updated the `disroot_logo.png` (that is displayed within the header) and not the `favicon.ico` (that is displayed by the web browser as tab icon). The logo from the header was also different, indeed (don't ask me why, but in this case I assumed that it is so _by design_), but my comment from yesterday was referring to the favicon (again, it was just a remark, I don't know if according to your design the favicon should or should not be the same for both the website and the blog). --- Edit: OK, I see that you created also a [PR for website theme](/Disroot-themes/grav-theme-disroot/pulls/82) in order to update the favicon also there. Sorry for the above.