Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Additional path levels added to extra CSS and JavaScript #841

Closed
martinbira opened this Issue Aug 6, 2018 · 8 comments

Comments

Projects
None yet
3 participants
@martinbira
Copy link
Contributor

martinbira commented Aug 6, 2018

Description

When building a site using mkdocs build (and a specified output directory), the relative paths to extra JavaScript and CSS have more added levels. This disables the extra JavaScript and CSS on all pages that are not at root level.

Expected behavior

Building a site to the site directory from docs with folders for stylesheets and javascripts placed within docs will produce a structure in the style of:
file:///C:/MKDocs/site/api/index.html
file:///C:/MKDocs/site/stylesheets/extra.css
file:///C:/MKDocs/site/javascripts/extra.js

The source-code of file:///C:/MKDocs/site/api/index.html should include the following:

<link rel="stylesheet" href="../stylesheets/application-custom.palette.css">
<link rel="stylesheet" href="../stylesheets/custom-extra.css">
...
<script>app.initialize({version:"1.0",url:{base:".."}})</script>
<script src="../javascripts/extra.js"></script>

Actual behavior

The source-code of file:///C:/MKDocs/site/api/index.html includes the following:

<link rel="stylesheet" href="../../stylesheets/application-custom.palette.css">
<link rel="stylesheet" href="../../stylesheets/custom-extra.css">
...
<script>app.initialize({version:"1.0",url:{base:".."}})</script>
<script src="../../javascripts/extra.js"></script>

Steps to reproduce the bug

  1. Add CSS and JavaScript files to respective folders placed withing the docs folder.
  2. Have a multi-level page structure.
  3. Build site to desired directory.

Package versions

  • Python: 3.6.1
  • MkDocs: 1.0
  • Material: 3.0.2

Project configuration

site_dir: 'site'
use_directory_urls: true
...
theme: 
    name: 'material'
    palette:
      primary: 'custom'
      accent: 'custom'
...
extra_css:
  - 'stylesheets/application-custom.palette.css'
  - 'stylesheets/extra.css'
extra_javascript:
  - 'javascripts/extra.js'
...
nav:
    - API:
      - Overview: api/index.md
...

System information

  • OS: Win 10
@squidfunk

This comment has been minimized.

Copy link
Owner

squidfunk commented Aug 7, 2018

I tried to reproduce your issue locally, but didn't manage to. Here's a screenshot of Material with another file in extra_css coloring links red:

bildschirmfoto 2018-08-07 um 09 36 30

However, the path with which this CSS was included seems kind of strange (prefixed with ../../../.. as opposed to ../..), so there might be a problem indeed. Material implemented the url filter proposed in MkDocs 1.0 as stated in their docs, so it sounds more like a MkDocs issue here, probably something related to your platform (Windows).

Does this also happen with other themes?

@martinbira

This comment has been minimized.

Copy link
Contributor Author

martinbira commented Aug 7, 2018

I've tried according to the following to see if the build paths to extra_javascript and extra_css are correct:

Default theme, MkDocs version 0.17.5: OK
ReadTheDocs theme, MkDocs version 0.17.5: OK
Material theme version 2.9.4, MkDocs version 0.17.5: OK
Default theme, MkDocs version 1.0: OK
ReadTheDocs theme, MkDocs version 1.0: OK
Material theme version 3.0.2, MkDocs version 1.0: Not OK, path is doubled.

This doubled path is present on our Linux build machines as well.

mkdocs.yml:

site_name: 'DevTest'
site_dir: 'site'
use_directory_urls: true
strict: true

theme: 
    name: 'material'

extra_css:
  - 'stylesheets/extra.css'
extra_javascript:
  - 'javascripts/extra.js'

nav:
  - Root:
    - Home: index.md
    - Level 1:
      - Overview: level-1/index.md
      - Level 2:
        - Introduction: level-1/level-2/index.md
  - Feature 1: 
    - Home: feature-1/index.md
    - Level 1:
      - Overview: feature-1/level-1/index.md

Screenshots from the /level-1/level-2/ page
Default Theme Screenshot w/ v.1.0:
default-mkdocs-v1

ReadTheDocs theme w/ v.1.0:
readthedocs-mkdocs-v1

Material theme w/ v.1.0:
material-mkdocs-v1

@squidfunk

This comment has been minimized.

Copy link
Owner

squidfunk commented Aug 7, 2018

Thanks, that is very strange. I see if I can get some more information.

@squidfunk

This comment has been minimized.

Copy link
Owner

squidfunk commented Aug 7, 2018

Got it - there's a difference between config.extra_css and config["extra_css"] - this seems to be new behavior (@waylan is that intended?). When I use the later notation, everything works as expected. Will issue a bugfix release in a few minutes.

@squidfunk squidfunk closed this in 7f08e28 Aug 7, 2018

@squidfunk squidfunk added bug and removed input needed labels Aug 7, 2018

@squidfunk

This comment has been minimized.

Copy link
Owner

squidfunk commented Aug 7, 2018

Released as part of 3.0.3

@waylan

This comment has been minimized.

Copy link
Contributor

waylan commented Aug 7, 2018

Got it - there's a difference between config.extra_css and config["extra_css"] - this seems to be new behavior (@waylan is that intended?). When I use the later notation, everything works as expected. Will issue a bugfix release in a few minutes.

Not quite. config.extra_css and config["extra_css"] are the same thing, but neither are what you had in you templates. Previously you had extra_css (without any reference to config). And yes, that is a change which is addressed in the release notes:

For the time being, the extra_javascript and extra_css variables continue to work as previously (without the url template filter), but they have been deprecated and the corresponding configuration values (config.extra_javascript and config.extra_css respectively) should be used with the filter instead.

In other words extra_css should not be used with the url filter, but config.extra_css should. So, the change you made is the correct fix for this issue.

@squidfunk

This comment has been minimized.

Copy link
Owner

squidfunk commented Aug 7, 2018

You're right, I'm sorry, I was in a hurry. Thanks for the explanation!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.