This thread is meant for feedback on the second beta release of Material 5.0. Please post any issues or errors encountered during setup and/or migration.
The second beta includes several bugfixes and also adds some new features.
The basic idea is: why should we reconstruct the whole page again and again when only the content and navigation changes? When instant loading is enabled, all internal links are intercepted and dispatched via XHR. The resulting document is parsed, injected and all event handlers are automatically rebound. The search index will remain intact in-between loads.
With instant loading enabled, Material effectively behaves like a Single Page Application.
This feature shows the true beauty of the new architecture - everything is observable and automatically updates when new values become available. However, instant loading is _experimental_. It will definitely be part of the next major version, but will remain in an experimental state until we fleshed out the biggest bugs. It will at all times remain opt-in, thus it has to be enabled explicitly:
theme:
feature:
instant: true
The following gifs were recorded on Fast 3G to show the speed advantage of instant loading:


use_directory_urls is set to falseAll fixed in HEAD of refactor/rxjs-typescript
detailstheme.feature.instant configuration optionp / , (previous page) and n / . (next page) hotkeyspip install mkdocs-material>=5.0.0b2
Material 5.0 is mostly downward compatible but includes some breaking changes. Following is a list of changes that need to be made to your mkdocs.yml. Note that you only need to adjust the values if you defined them.
Search is now configured as part of the search plugin configuration.
extra:
search:
language: en, de, ru
tokenizer: [\s\-\.]+
plugins:
- search:
separator: '[\s\-\.]+'
lang:
- en
- de
- ru
Font Awesome was updated to the latest version and is now provided via inline SVGs which reduces the overall footprint. To reference an icon, reference its path from the top-level .fontawesome directory which is distributed with the theme without the .svg at the end.
extra:
social:
- type: github
link: https://github.com/squidfunk
- type: twitter
link: https://twitter.com/squidfunk
- type: linkedin
link: https://www.linkedin.com/in/squidfunk
extra:
social:
- icon: brands/github-alt
link: https://github.com/squidfunk
- icon: brands/twitter
link: https://twitter.com/squidfunk
- icon: brands/linkedin
link: https://www.linkedin.com/in/squidfunk/
Note that mkdocs build will now terminate with an error if an invalid icon is referenced.
Feedback is appreciated!
Hmm, I'm getting some kind of failure with b2 but not b1:
File "/usr/lib/python3.6/runpy.py", line 193, in _run_module_as_main
"__main__", mod_spec)
File "/usr/lib/python3.6/runpy.py", line 85, in _run_code
exec(code, run_globals)
File "/usr/local/lib/python3.6/dist-packages/mkdocs/__main__.py", line 202, in <module>
cli()
File "/usr/local/lib/python3.6/dist-packages/click/core.py", line 764, in __call__
return self.main(*args, **kwargs)
File "/usr/local/lib/python3.6/dist-packages/click/core.py", line 717, in main
rv = self.invoke(ctx)
File "/usr/local/lib/python3.6/dist-packages/click/core.py", line 1137, in invoke
return _process_result(sub_ctx.command.invoke(sub_ctx))
File "/usr/local/lib/python3.6/dist-packages/click/core.py", line 956, in invoke
return ctx.invoke(self.callback, **ctx.params)
File "/usr/local/lib/python3.6/dist-packages/click/core.py", line 555, in invoke
return callback(*args, **kwargs)
File "/usr/local/lib/python3.6/dist-packages/mkdocs/__main__.py", line 134, in serve_command
livereload=livereload
File "/usr/local/lib/python3.6/dist-packages/mkdocs/commands/serve.py", line 119, in serve
config = builder()
File "/usr/local/lib/python3.6/dist-packages/mkdocs/commands/serve.py", line 114, in builder
build(config, live_server=live_server, dirty=dirty)
File "/usr/local/lib/python3.6/dist-packages/mkdocs/commands/build.py", line 288, in build
_build_theme_template(template, env, files, config, nav)
File "/usr/local/lib/python3.6/dist-packages/mkdocs/commands/build.py", line 117, in _build_theme_template
output = _build_template(template_name, template, files, config, nav)
File "/usr/local/lib/python3.6/dist-packages/mkdocs/commands/build.py", line 96, in _build_template
output = template.render(context)
File "/usr/local/lib/python3.6/dist-packages/jinja2/asyncsupport.py", line 76, in render
return original_render(self, *args, **kwargs)
File "/usr/local/lib/python3.6/dist-packages/jinja2/environment.py", line 1008, in render
return self.environment.handle_exception(exc_info, True)
File "/usr/local/lib/python3.6/dist-packages/jinja2/environment.py", line 780, in handle_exception
reraise(exc_type, exc_value, tb)
File "/usr/local/lib/python3.6/dist-packages/jinja2/_compat.py", line 37, in reraise
raise value.with_traceback(tb)
File "/usr/local/lib/python3.6/dist-packages/material/404.html", line 4, in top-level template code
{% extends "base.html" %}
File "/usr/local/lib/python3.6/dist-packages/material/base.html", line 192, in top-level template code
{% block scripts %}
File "/usr/local/lib/python3.6/dist-packages/material/base.html", line 219, in block "scripts"
instant: {{ feature.instant | tojson }}
File "/usr/local/lib/python3.6/dist-packages/mkdocs/utils/filters.py", line 8, in tojson
return jinja2.Markup(json.dumps(obj, **kwargs))
File "/usr/lib/python3.6/json/__init__.py", line 231, in dumps
return _default_encoder.encode(obj)
File "/usr/lib/python3.6/json/encoder.py", line 199, in encode
chunks = self.iterencode(o, _one_shot=True)
File "/usr/lib/python3.6/json/encoder.py", line 257, in iterencode
return _iterencode(o, 0)
File "/usr/lib/python3.6/json/encoder.py", line 180, in default
o.__class__.__name__)
TypeError: Object of type 'Undefined' is not JSON serializable
Did something change in the config?
Seems you must specify instant with something or it fails:
feature:
instant: false
Oops, sorry. Forgot the case when instant is not set. Just prepared 5.0.0b2-1, should be available shortly (my first post-release, yay!)
EDIT: https://pypi.org/project/mkdocs-material/5.0.0b2.post1/
Nice, thanks for the update!
Really looking forward for feedback regarding the instant loading feature. If it works reasonably well, it solves some of the search index problems big time.
This looks fantastic, especially the new brand icons.
For me, search seems to have stopped working, with or without instant on both Chromium and FF on Ubuntu. I don't think there's anything specific in the console, but I do get this on every page:
bundle.bea14a0a.min.js:23 Uncaught TypeError: object null is not iterable (cannot read property Symbol(Symbol.iterator))
at s (bundle.bea14a0a.min.js:23)
at bundle.bea14a0a.min.js:23
at br (bundle.bea14a0a.min.js:23)
at ?query=icon:2
DevTools failed to parse SourceMap: http://127.0.0.1:8889/assets/javascripts/bundle.bea14a0a.min.js.map
DevTools failed to parse SourceMap: http://127.0.0.1:8889/assets/javascripts/worker/search.0a5433f7.min.js.map
Also, is it now possible to use one of the solid icons in a Markdown page? It would be great to have an example in the docs (or maybe I've missed this)?
Thanks for your feedback, Sarah! FontAwesome is now inlined as SVG, so if you want to use it in your Markdown files you probably have to include the icon font via extra_javascript.
Regarding search - that’s odd. Do you have web workers disabled? Could you otherwise maybe narrow down the issue to a reproducible test case? Probably easy to fix then.
Thanks Martin! I don't believe I have web disabled on either browser, so I'll have a go at trying to produce a small example over the next couple of days and get back to you.
You can also include the svg in your project and and then with CSS. That is what pymdown-extensions is doing: https://github.com/facelessuser/pymdown-extensions/tree/master/docs/theme/svg.
Somethings not quite right in regards to search. I have a project here which I tired to convert over to use Material 5 for testing: https://github.com/facelessuser/soupsieve/
I get this:
[E 200221 23:10:39 web:1788] Uncaught exception GET /search/search_index.json (127.0.0.1)
HTTPServerRequest(protocol='http', host='localhost:8000', method='GET', uri='/search/search_index.json', version='H
TTP/1.1', remote_ip='127.0.0.1')
Traceback (most recent call last):
File "C:\Python36\lib\site-packages\tornado\web.py", line 1699, in _execute
result = await result
File "C:\Python36\lib\site-packages\tornado\web.py", line 2649, in get
await self.flush()
File "C:\Python36\lib\site-packages\tornado\web.py", line 1097, in flush
return self.request.connection.write(chunk)
File "C:\Python36\lib\site-packages\tornado\http1connection.py", line 497, in write
self._pending_write = self.stream.write(self._format_chunk(chunk))
File "C:\Python36\lib\site-packages\tornado\http1connection.py", line 474, in _format_chunk "Tried to write more data than Content-Length"
tornado.httputil.HTTPOutputError: Tried to write more data than Content-Length
[E 200221 23:10:39 web:1194] Cannot send error response after headers written
If I remove the largest page, the error goes away.
@facelessuser and it doesn’t happen with Material 4? I’m asking because it originates in the dev server of MkDocs.
You seem to be right. I wonder why this is broken...
It's related to search for sure, but it is not 5 specific
I’ve tested the latest beta with very large indexes, see my comments over at #1465 without any problems. Seems to be some hiccup in mkdocs serve
Did you test large indexes through mkdocs server? It seems the two together are problematic. I'm not saying it's an issue on your end, just trying to understand it.
Yup, I can successfully fetch a 22.5 MB search_index.json:
(venv) squidfunk@squidfunk:~/Desktop/kjv-markdown git:master:+67… > mkdocs serve -a 0.0.0.0:8000
INFO - Building documentation...
INFO - Cleaning site directory
[I 200222 07:45:13 server:296] Serving on http://0.0.0.0:8000
[I 200222 07:45:13 handlers:62] Start watching changes
[I 200222 07:45:13 handlers:64] Start detecting changes
[W 200222 07:45:18 web:2246] 404 GET /assets/images/icon.svg (127.0.0.1) 5.86ms
[W 200222 07:45:18 web:2246] 404 GET /assets/images/icon.svg (127.0.0.1) 2.72ms
[I 200222 07:45:18 handlers:135] Browser Connected: http://localhost:8000/
[W 200222 07:45:18 web:2246] 404 GET /assets/favicon.png (127.0.0.1) 8.38ms
^C[I 200222 07:45:30 server:318] Shutting down...
(venv) squidfunk@squidfunk:~/Desktop/kjv-markdown git:master:+67… > ls -lha site/search
total 50480
drwxr-xr-x 4 squidfunk staff 136B 19 Feb 17:41 .
drwxr-xr-x 74 squidfunk staff 2,5K 19 Feb 17:40 ..
-rw-r--r-- 1 squidfunk staff 23M 19 Feb 17:40 search_index.json
@snim2 I investigated the error you posted (thanks for including it!):
You're running beta 1, as the file in which the error originates is named bundle.bea14a0a.min.js. It's probably related to https://github.com/squidfunk/mkdocs-material/issues/1465#issuecomment-588779992 which would mean that this error was already fixed as part of beta 2 😊Try to make sure you have beta 2 installed:
pip install --force-reinstall mkdocs-material>=5.0.0b2
Yeah, this is really weird then...I'm not understanding how you can push a 20+MB index, but then I'm pushing only a 240KB index, but the server chokes...this is annoying, now I need to figure out what exactly with my specific project or environment is making this happen.
This is going to drive me crazy. Now I'm going to have to try this on other platforms and see if the issue still persists. This is going to be annoying to debug.
The last docs I pushed for the project are working on GitHub docs, so I imagine it may be very specific to mkdocs previewing environment, and not even something that universally wrong 😢 .
OK, I've updated to the latest beta of the theme, and you guys were right, it now works on FF and on Chromium it turns out I had the #enable-service-worker-on-ui flag turned off. No idea why!
I'm still a bit confused about how to include FA icons, various combinations of:
extra_javascript:
- material/assets/images/icons/fontawesome/solid/drafting-compass.svg
don't seem to work, but maybe I've misunderstood?
@snim2 please see the directions in the original post under __Migration > Social Icons__ (can’t link it, in on mobile right now) ⬆️
@snim2 If you need social icons, you just need to do something like this: https://github.com/facelessuser/pymdown-extensions/blob/master/mkdocs.yml#L135
OPTION 1: If you want to make icons available for other general purpose use, you may need to include fontawesome font.
OPTION2: Or you can
include the files locally in your project by putting it into a theme folder: https://github.com/facelessuser/pymdown-extensions/tree/master/docs/theme/assets/pymdownx-extras
Linking your custom directory: https://github.com/facelessuser/pymdown-extensions/blob/master/mkdocs.yml#L14
And then you reference them. I, for instance, reference them in my CSS: https://github.com/facelessuser/pymdown-extensions/blob/master/docs/src/scss/_links.scss#L52. This gets compiled into my theme folder. Then I include my CSS in my mkdocs.yml: https://github.com/facelessuser/pymdown-extensions/blob/master/mkdocs.yml#L140.
Admittedly, this second option is more involved. The first option of just including the font can probably be done with a simple template override: https://squidfunk.github.io/mkdocs-material/customization/#overriding-template-blocks.
Search doesn't work properly for me in Beta 2. Running MkDocs 1.1.
mkdocs serveuncaught exception: AjaxError: ajax error 404 bundle.bd6ef04a.min.js:23:2403
Source-Map-Fehler: Error: request failed with status 404
Ressourcen-Adresse: http://myserver.com/assets/javascripts/bundle.bd6ef04a.min.js
Source-Map-Adresse: bundle.bd6ef04a.min.js.map
Occurs in FF and Chrome. Occurs with prebuild_index set to true or false.
After downgrading to Beta 1, everything works fine.
@wilhelmer Thanks for reporting. When you search and click on the link - what link is it showing? Also, did you enable instant loading?
Just tested facelessuser.github.io/pymdown-extensions which is running the latest beta - no error.
Ah wait, okay, it may be related to MkDocs 1.1. Need to check that.
@wilhelmer I have no problems running the latest Material with MkDocs 1.1. We need more data to debug, a reproducible minimal scenario would be really awesome.
Will do tomorrow when I‘m back at the office. In the meantime, try setting use_directory_urls to false, maybe it’s related to that.
Instant loading was disabled.
@wilhelmer when I set use_directory_urls: false I can reproduce it. Should be easy to fix 😊
Oh great! 👍
Finally found some time to fix search for use_directory_urls: false in 68c9cb6d. There're some other bugs related to this flag which should be fixed shortly.
Awesome. Maybe lunrs advanced search syntax not working is also related to that.
(Did some testing, advanced search always works with MkDocs‘ default theme, but has issues with Material)
Could you provide some examples to reproduce? Also, does it print something like Invalid query: ... in the console?
Tried to reproduce it with a sample project, but couldn’t. Must be something with our large docs project. So nevermind for now.
@squidfunk Upgrading MkDocs to 1.1 breaks our build with:
ofek@ozone ~\Desktop $ ddev docs build
INFO - Cleaning site directory
INFO - Building documentation to directory: C:\Users\ofek\Desktop\code\integrations-core\site
Traceback (most recent call last):
File "c:\users\ofek\appdata\local\programs\python\python38\lib\runpy.py", line 193, in _run_module_as_main
return _run_code(code, main_globals, None,
File "c:\users\ofek\appdata\local\programs\python\python38\lib\runpy.py", line 86, in _run_code
exec(code, run_globals)
File "C:\Users\ofek\Desktop\code\integrations-core\.tox\docs\lib\site-packages\mkdocs\__main__.py", line 199, in <module>
cli()
File "c:\users\ofek\appdata\local\programs\python\python38\lib\site-packages\click\core.py", line 764, in __call__
return self.main(*args, **kwargs)
File "c:\users\ofek\appdata\local\programs\python\python38\lib\site-packages\click\core.py", line 717, in main
rv = self.invoke(ctx)
File "c:\users\ofek\appdata\local\programs\python\python38\lib\site-packages\click\core.py", line 1137, in invoke
return _process_result(sub_ctx.command.invoke(sub_ctx))
File "c:\users\ofek\appdata\local\programs\python\python38\lib\site-packages\click\core.py", line 956, in invoke
return ctx.invoke(self.callback, **ctx.params)
File "c:\users\ofek\appdata\local\programs\python\python38\lib\site-packages\click\core.py", line 555, in invoke
return callback(*args, **kwargs)
File "C:\Users\ofek\Desktop\code\integrations-core\.tox\docs\lib\site-packages\mkdocs\__main__.py", line 159, in build_command
build.build(config.load_config(**kwargs), dirty=not clean)
File "C:\Users\ofek\Desktop\code\integrations-core\.tox\docs\lib\site-packages\mkdocs\commands\build.py", line 288, in build
_build_theme_template(template, env, files, config, nav)
File "C:\Users\ofek\Desktop\code\integrations-core\.tox\docs\lib\site-packages\mkdocs\commands\build.py", line 114, in _build_theme_template
output = _build_template(template_name, template, files, config, nav)
File "C:\Users\ofek\Desktop\code\integrations-core\.tox\docs\lib\site-packages\mkdocs\commands\build.py", line 93, in _build_template
output = template.render(context)
File "c:\users\ofek\appdata\local\programs\python\python38\lib\site-packages\jinja2\environment.py", line 1090, in render
self.environment.handle_exception()
File "c:\users\ofek\appdata\local\programs\python\python38\lib\site-packages\jinja2\environment.py", line 832, in handle_exception
reraise(*rewrite_traceback_stack(source=source))
File "c:\users\ofek\appdata\local\programs\python\python38\lib\site-packages\jinja2\_compat.py", line 28, in reraise
raise value.with_traceback(tb)
File "C:\Users\ofek\Desktop\code\integrations-core\.tox\docs\lib\site-packages\material\404.html", line 4, in top-level template code
{% extends "base.html" %}
File "C:\Users\ofek\Desktop\code\integrations-core\.tox\docs\lib\site-packages\material\base.html", line 104, in top-level template code
{% block header %}
File "C:\Users\ofek\Desktop\code\integrations-core\.tox\docs\lib\site-packages\material\base.html", line 105, in block "header"
{% include "partials/header.html" %}
File "C:\Users\ofek\Desktop\code\integrations-core\.tox\docs\lib\site-packages\material\partials\header.html", line 42, in top-level template code
{% include "partials/source.html" %}
File "C:\Users\ofek\Desktop\code\integrations-core\.tox\docs\lib\site-packages\material\partials\source.html", line 7, in top-level template code
{% include ".icons/" ~ config.theme.icon.repo ~ ".svg" %}
File "c:\users\ofek\appdata\local\programs\python\python38\lib\site-packages\jinja2\loaders.py", line 199, in get_source
raise TemplateNotFound(template)
jinja2.exceptions.TemplateNotFound: .icons/.icons/fontawesome/git-alt.svg
extra:
feature:
tabs: true
social:
- icon: solid/blog
link: https://www.datadoghq.com/blog/engineering/
- icon: brands/github-alt
link: https://github.com/DataDog
- icon: brands/twitter
link: https://twitter.com/datadoghq
- icon: brands/instagram
link: https://www.instagram.com/datadoghq
Huh, every more interesting is the fact that I'm not even using that icon
@ofek, are you using the unreleased tip of the branch instead of beta2? Icons got moved around again and will probably be different for beta3. They were changed so that you can use Material or Fontawesome.
Ah yes indeed, 5.0.0b2.post1 works beautifully! Sorry for the noise 🙂
Hey @squidfunk , thanks for the work once again!
I noticed some unexpected behaviour. On the left hand side I have the list of directories (which can be folded) as well as files. If there are too many files I get a scrollbar.
However, with the beta I cannot scroll down using the mouse wheel (and if I slide the scroll bar I get pulled back to the top). Any idea what could cause this?
@Nelyah thanks for reporting. Could you provide a screen recording which shows the behavior? Also some more information on your environment (browser, OS) might be helpful.
I joined a gif to the explanation (sorry if it's too big/feels slow...). Also I had to crop most of it because these aren't public files. The gif shows me scrolling first with the mouse wheel downward, then dragging the scrollbar downward. The upward scrolling is the undesired behaviour
I tested it using:
mkdocs servemkdocs build then rsync the site/ to the server directory), then accessing it from the macOS. Same behaviour with FF and Chrome
Thanks! I think I know what's causing that.
@Nelyah should be fixed in 301582cc. The problem only manifested on screen layout when tabs were active and the active site was one of the 2nd+ tab. The fix will be part of the next pre-release.
Awesome, thanks!
I may have another issue as well, though on this one I am unsure if it is directly related to mkdocs-material, maybe you will know. It happens only with the beta version, not with the version 4.4.0 I used before.
If there is lag between me and the mkdocs site (i.e. slow VPN connection, long distance), I can sometimes click two links before the first link has loaded.
For the sake of the example, let's say I'm in the page Language-Specific/, which has two links (to subfolders), Mandarin/ and Japanese/. Somtimes when clicking rapidly enough, I get the following output from my test server (I was testing the server with a SimpleHTTPServer with python in this case (see log below)):
10.250.1.102 - - [03/Mar/2020 06:17:30] "GET /assets/javascripts/bundle.bd6ef04a.min.js HTTP/1.1" 200 -
10.250.1.102 - - [03/Mar/2020 06:17:31] "GET /assets/stylesheets/app-palette.3f90c815.min.css HTTP/1.1" 200 -
10.250.1.102 - - [03/Mar/2020 06:17:38] "GET /Language-Specific/Japanese/ HTTP/1.1" 200 -
----------------------------------------
Exception happened during processing of request from ('10.250.1.102', 57745)
Traceback (most recent call last):
File "/opt/rh/rh-python36/root/usr/lib64/python3.6/socketserver.py", line 317, in _handle_request_noblock
self.process_request(request, client_address)
File "/opt/rh/rh-python36/root/usr/lib64/python3.6/socketserver.py", line 348, in process_request
self.finish_request(request, client_address)
File "/opt/rh/rh-python36/root/usr/lib64/python3.6/socketserver.py", line 361, in finish_request
self.RequestHandlerClass(request, client_address, self)
File "/opt/rh/rh-python36/root/usr/lib64/python3.6/socketserver.py", line 696, in __init__
self.handle()
File "/opt/rh/rh-python36/root/usr/lib64/python3.6/http/server.py", line 418, in handle
self.handle_one_request()
File "/opt/rh/rh-python36/root/usr/lib64/python3.6/http/server.py", line 406, in handle_one_request
method()
File "/opt/rh/rh-python36/root/usr/lib64/python3.6/http/server.py", line 639, in do_GET
self.copyfile(f, self.wfile)
File "/opt/rh/rh-python36/root/usr/lib64/python3.6/http/server.py", line 800, in copyfile
shutil.copyfileobj(source, outputfile)
File "/opt/rh/rh-python36/root/usr/lib64/python3.6/shutil.py", line 82, in copyfileobj
fdst.write(buf)
File "/opt/rh/rh-python36/root/usr/lib64/python3.6/socketserver.py", line 775, in write
self._sock.sendall(b)
BrokenPipeError: [Errno 32] Broken pipe
----------------------------------------
10.250.1.102 - - [03/Mar/2020 06:17:38] code 404, message File not found
10.250.1.102 - - [03/Mar/2020 06:17:38] "GET /Language-Specific/Japanese/Mandarin/ HTTP/1.1" 404 -
This is the log from loading the page Language-Specific/ to obtaining the error.
At this point (after the error), my url is hostname:8000/Language-Specific/Japanese/Mandarin/ where it should either be */Language-Specific/Japanese/ or */Language-Specific/Mandarin/. Also, the page itself didn't load to Japanese/ or Mandarin/ (I'm still on Language-Specific/).
The big issue is that now all the links point to a bad URL:
Hovering my mouse over the hyperlink Mandarin/ shows me that it now points to hostname:8000/Language-Specific/Japanese/Mandarin/Mandarin/ instead of hostname:8000/Language-Specific/Mandarin/
This is rather specific and difficult to reproduce (I couldn't with the server built locally, only when I got some lag). Do you think it could come from mkdocs-material?
Thank you again for the awesome work!
edit:
This happens with both FF and Chrome, with and without the instant feature
@Nelyah hmm that's difficult to say. I'll try to reproduce your problem but it could also be already resolved on the tip of the branch. Would wait until the next pre-release.
🎉Beta 3 just landed in #1483 and since we're feature complete, I'm closing this issue. All bugs that were reported here should be fixed. I would encourage everybody to test the latest beta, as it's the last one before the final RC. There's still some cleaning up to do, but there's not much to change after beta 3. The more people test it, the earlier we can roll out a release candidate and finally get v5 out of the door!