404 page has an extra slash in the font link in the social section

[jessitron]

Description

The 404 page has a less-than-optimal link in it, in the social section. It uses {{ base_url }} and should use the url filter.

I got an error from HtmlProofer in my site generation because the 404.html page came out with a link like "//assets/stylesheets/font-awesome.css". HtmlProofer sticks http: in front of that because of the double slash and gives an error.

you can see this on your own site, where the 404 page contains:

<link rel="stylesheet" href="/mkdocs-material//assets/fonts/font-awesome.css">

Here, your base-url is longer than '/' so it doesn't look as bad. It still works, but it's not ideal.

Expected behavior

No double slashes in URLs where one will do.

Actual behavior

<link rel="stylesheet" href="/mkdocs-material//assets/fonts/font-awesome.css">

Steps to reproduce the bug

1. Go to https://squidfunk.github.io/mkdocs-material/blah
2. view source
3. see href="/mkdocs-material//assets/fonts/font-awesome.css"

Workaround: override partials/social.html, including this line:

<link rel="stylesheet" href="{{ 'assets/fonts/font-awesome.css' | url }}">

Package versions

• Python: 3.6
• MkDocs: 3.0.4
• Material: 1.0.4

Project configuration

... yours will do ...

System information

• OS: [The operating system you're running]
• Browser: [The browser used, if relevant]

[jessitron]

I wanted to make a PR for this one-line change, but I couldn't get the build process to work.

Just in case it's useful, I'll tell you what happened, but really I'll leave this issue for someone who has their environment set up.

First, after making a virtualenv and running pip install, then npm install worked, but npm run build failed with

Building your customized Modernizr...OK
Error: spawn /Users/jessitron/code/jessitron/mkdocs-material/node_modules/optipng-bin/vendor/optipng ENOENT

So I figure maybe npm ci so I get the package-locked versions, but that fails installing node-gyp (that dependency is always such a pain) with a C precompiler error. I give up.

[max-ci]

Is Xcode required for dev setup? I'm also having problems with npm i.

[squidfunk]

Thanks for reporting. Will fix it as soon as possible.

Regarding the setup: yeah, you probably need the XCode Command Line Tools on macOS for a working C compiler. The environment setup instructions for Material assume that you have a valid Node environment up and running that can compile native extensions, as some of the image optimizations stuff is complied with C libraries (libpng etc.).

EDIT: which version of NPM are you running anyway? The package-lock was introduced with NPM 5. Just make sure you have Node >= 8 installed, that should come with NPM 5.

[max-ci]

I have:
-Node 10.12.0
-npm 6.4.1
-Command Line Tools for macOS

xcode-select: error: tool 'xcodebuild' requires Xcode, but active developer directory '/Library/Developer/CommandLineTools' is a command line tools instance

It seems like whole Xcode is required.

[squidfunk]

Okay, then this is a macOS annoyance. It's been some time since I installed Xcode, so I forgot that I installed all of it.

[squidfunk]

Fixed in 15e604f, will be part of next release.

[squidfunk]

Released as part of 3.0.5.

[max-ci]

For those who have problem with development setup. I changed node to 8.12.0 and it worked. Problem was with Node 10/11.