Change webassets configuration for relative urls.

Set the ASSET_URL to be relative to the 'theme/' url, which requires to use
{{ SITEURL }}/{{ ASSET_URL }} in the template and make it works with both
relative and absolute urls.

docs/plugins.rst

@@ -139,12 +139,15 @@ more information.
 
 When using with Pelican, `webassets` is configured to process assets in the
 ``OUTPUT_PATH/theme`` directory. You can use `webassets` in your templates by
-including one or more template tags. For example...
+including one or more template tags. The jinja variable ``{{ ASSET_URL }}`` to
+use in the templates is configured to be relative to the ``theme/`` url.
+Hence, it must be used with the ``{{ SITEURL }}`` variable which allows to
+have relative urls. For example...
 
 .. code-block:: jinja
 
     {% assets filters="cssmin", output="css/style.min.css", "css/inuit.css", "css/pygment-monokai.css", "css/main.css" %}
-        <link rel="stylesheet" href="{{ ASSET_URL }}">
+        <link rel="stylesheet" href="{{ SITEURL }}/{{ ASSET_URL }}">
     {% endassets %}
 
 ... will produce a minified css file with a version identifier:
@@ -159,7 +162,7 @@ and minifies the output:
 .. code-block:: jinja
 
     {% assets filters="sass,cssmin", output="css/style.min.css", "css/style.scss" %}
-        <link rel="stylesheet" href="{{ ASSET_URL }}">
+        <link rel="stylesheet" href="{{ SITEURL }}/{{ ASSET_URL }}">
     {% endassets %}
 
 Another example for Javascript:
@@ -167,7 +170,7 @@ Another example for Javascript:
 .. code-block:: jinja
 
     {% assets filters="uglifyjs,gzip", output="js/packed.js", "js/jquery.js", "js/base.js", "js/widgets.js" %}
-        <script src="{{ ASSET_URL }}"></script>
+        <script src="{{ SITEURL }}/{{ ASSET_URL }}"></script>
     {% endassets %}
 
 The above will produce a minified and gzipped JS file:

pelican/plugins/assets.py

@@ -6,20 +6,11 @@ Asset management plugin for Pelican
 This plugin allows you to use the `webassets`_ module to manage assets such as
 CSS and JS files.
 
-Hint for templates: Current version of webassets seems to remove any relative
+The ASSET_URL is set to a relative url to honor Pelican's RELATIVE_URLS
-paths at the beginning of the URL. So, if ``RELATIVE_URLS`` is on,
+setting. This requires the use of SITEURL in the templates::
-``ASSET_URL`` will start with ``theme/``, regardless if we set ``assets_url``
-here to ``./theme/`` or to ``theme/``.
-
-However, this breaks the ``ASSET_URL`` if user navigates to a sub-URL, e.g. if
-he clicks on a category. A workaround for this issue is to use::
 
     <link rel="stylesheet" href="{{ SITEURL }}/{{ ASSET_URL }}">
 
-instead of::
-
-    <link rel="stylesheet" href="{{ ASSET_URL }}">
-
 .. _webassets: https://webassets.readthedocs.org/
 
 """
@@ -41,17 +32,11 @@ def add_jinja2_ext(pelican):
 def create_assets_env(generator):
     """Define the assets environment and pass it to the generator."""
 
-    logger = logging.getLogger(__name__)
+    assets_url = 'theme/'
-
-    # Let ASSET_URL honor Pelican's RELATIVE_URLS setting.
-    if generator.settings.get('RELATIVE_URLS'):
-        assets_url = './theme/'
-    else:
-        assets_url = generator.settings['SITEURL'] + '/theme/'
     assets_src = os.path.join(generator.output_path, 'theme')
-
     generator.env.assets_environment = Environment(assets_src, assets_url)
 
+    logger = logging.getLogger(__name__)
     if logging.getLevelName(logger.getEffectiveLevel()) == "DEBUG":
         generator.env.assets_environment.debug = True
 

tests/test_webassets.py

@@ -81,12 +81,16 @@ class TestWebAssets(unittest.TestCase):
     def test_template(self):
         """Look in the output index.html file for the link tag."""
 
-        css_file = 'theme/gen/style.{0}.min.css'.format(self.version)
+        css_file = './theme/gen/style.{0}.min.css'.format(self.version)
         html_files = ['index.html', 'archives.html',
                       'this-is-an-article-with-category.html']
         for f in html_files:
             self.check_link_tag(css_file, os.path.join(self.temp_path, f))
 
+        self.check_link_tag(
+            '.././theme/gen/style.{0}.min.css'.format(self.version),
+            os.path.join(self.temp_path, 'category/misc.html'))
+
     def test_absolute_url(self):
         """Look in the output index.html file for the link tag with abs url."""
 

tests/themes/assets/templates/base.html

@@ -2,6 +2,6 @@
 
 {% block head %}
   {% assets filters="scss,cssmin", output="gen/style.%(version)s.min.css", "css/style.scss" %}
-    <link rel="stylesheet" href="{{ ASSET_URL }}">
+    <link rel="stylesheet" href="{{ SITEURL }}/{{ ASSET_URL }}">
   {% endassets %}
 {% endblock %}