-
-
Notifications
You must be signed in to change notification settings - Fork 3.7k
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
⚡️ New: Instant Previews #6704
Comments
Thanks for testing! If you could craft a minimal reproduction with steps how you reach that state, it would be amazing, because I cannot observe it. Happy to fix it asap! |
It seems that you're using the sitemap to determine if an instant preview is available: https://github.com/squidfunk/mkdocs-material-insiders/blob/64b0e363e7e7c70c1f99a785d89f31f54c611f45/src/templates/assets/javascripts/components/content/link/index.ts#L149-L150 Is there any plan to remove reliance on the sitemap? We ship our docs as part of our on-prem software, so we can't know the Aside from that, it also looks like Material for MkDocs is now rewriting relative URLs to absolute URLs based on the page's origin. We had some CSS to style external links, but now that's now a bit more difficult with the URLs being converted. But, this does look amazing! As always, thanks for adding such nice features :) |
Excellent question. Yes, instant navigation, multi-language support, and versioning all need to rely on Thus,
That is correct. We had to do that to fix bugs in instant navigation. I explained the necessary changes in detail in #2318 (comment). Among other options discussed in this issue, the easiest and canonical way to do add an external icon to each link is to use the privacy' plugins external links feature (currently sponsors only): plugins:
- privacy:
links_attr_map:
rel: external Then, add the following CSS: .md-content [rel=external] {
/* Your styles */
} Sometimes, changes that break customizations are necessary to fix bugs that are otherwise not fixable. Instant navigation has so many edge cases, that we found this to be the only way forward. Of course, this sometimes upsets users, but you know how it is: change is hard. However, we need it to keep this project fresh and awesome. Happy to receive more feedback on instant previews! |
Thank you for the detailed response, Martin. I love breaking changes because that usually means great new features are being added :) Is the sitemap.xml really the only way to know what documentation pages are being built? I'm not familiar with the MkDocs build process, but I'm very surprised there's not some way to retrieve a list of files being built. To clarify, I do set site_url, but it points to our own hosted version of the docs. So, a customer might be hosting a copy of our products (and our docs) at I believe there was some limitation/reason why we weren't using that feature of the privacy plugin; I'll give it another shot. |
Instant navigation and instant previews are pure post-build in-browser features, so yes, it is the only source of truth. Only those pages can be accurately replaced/injected dynamically, because we can rely on the correct structure being present. You could, in theory, also inject external pages, but the results will not be consistent due to varying markup.
I'd say when you do this, you're in "undefined behavior" land. Note that
Happy to learn about that, and check if we can fix it. |
One more addition:
The URL which is prefixing the entries in mkdocs-material/src/templates/assets/javascripts/integrations/sitemap/index.ts Lines 49 to 66 in 02bf848
|
Cards actually do work for us! Our a site that has a sitemap that points to I understand that this is incredibly hacky, but to some extent it gives us desired behavior. We would rather search engines not list customer's deployments of our docs and instead point to our official docs site.
I gave this a shot today and it worked great. I would love to see this capability added to the privacy documentation!
I confirmed today that this doesn't work. The anchor tags don't have the mouse enter/exit event handlers that appear on properly configured sites. |
I'm not sure what you mean. What should we add to the documentation of the privacy plugin / guide?
Could you provide a minimal reproduction with exact steps and expectations? |
Maybe it's too specific, but I would have found it useful if the privacy section mentioned that you can use it to apply CSS to external links. It's one of those things that I didn't realize CSS could do using the
To clarify, this feature works fine when the |
You can attach a minimal reproduction to this issue so we can check if we can fix it, even though |
I've investigated and know why instant previews do not work when
By the way, I'm pretty sure, instant previews should work for you when you use |
Sorry, I haven't spent the time on making a reproduction yet, but I will note that the e.g. this site: https://solo.rstudiopm.com/__docs__/admin/ has the site url set to |
Really nice feature. Congrats and thanks again! |
Affiche un aperçu de la page au survol d'un lien interne : squidfunk/mkdocs-material#6704
I have been eager to test this out since the prototype was teased back in 2021 (?). I am glad to see it finally arrive 🎉. As always, thanks for your hard work! Since I only have very little time at the moment, I just tried adding the I have, of course, checked the sitemap.xml and ensured the site_url is set correctly. Additionally, I am wondering if there are plans to make this feature compatible with the |
@lampensau are you sure you're running Insiders? If the link is internal, it should work out of the box without any extra configuration. You can try to enable
There are no known incompatibilities and no necessary changes to be made to
We're open to exploring different directions. The projects plugin is definitely a prime candidate, and other external material-built sites are also something that could be added support for, and it shouldn't be too hard. We'd like to receive some more feedback however, before we go down further paths, so at first, instant previews are limited to the containing site. |
Hi @squidfunk, From https://squidfunk.github.io/mkdocs-material/setup/setting-up-navigation/?h=instant+previews#instant-previews, clicking on the "Using annotations" (see screenshot) will go to https://squidfunk.github.io/reference/annotations/#usage rather than https://squidfunk.github.io/mkdocs-material/reference/annotations/#usage Probably a bug due to the fact that anchors are not processed by the instant preview. Hope that helps! |
@remi-preghenella Fixed in @pawamoy Additionally, |
Both fixes were just released as part of 9.5.10+insiders-4.52.3. |
Are Instants Preview supposed to work on tags located at the top the page? I'm just asking because at the beginning, I found that a bit excessing since it's not really an internal link. Then, after a few feedback with end-users about it, they found it pretty convenient. Should it be an option? |
All internals links that are part of the main content are transformed into links if you enable In general I think it doesn't make sense to add instant previews everywhere, but it is quite impossible for us to decide where. Feature flags cannot take options, so this would need to be implemented outside of the On a more general note, please know that this feature is experimental. We're still in gravitation stage – learning what works for our users and what makes sense to add or remove. Happy for any feedback, good or bad. |
@squidfunk Thanks, it's really valuable to have opportunity to discuss a feature publicly. I get it's not recommended to enable it at website scale but I can't expect from writers to manage attribute lists on hyperlinks! I tried it hardly before (alignment on images, tooltip on hyperlinks...) and it's too complicated for someone who just come to share some technical stuff on our website. People has no "available brain time" to dive into every feature/syntaxe that Markdown and upper-layers introduce! Some ideas maybe to make this feature even more customizable?
|
Please keep in mind that instant previews are not a plugin, but a frontend feature. It is specifically designed so that you can easily write a hook or plugin to add classes automatically where necessary. We'll be exploring whether we can provide a Markdown extension that can be configured to add those links automatically on specific elements shortly
You can always open a discussion to discuss features! However, with the newest "flagship" features, we try to involve sponsors, so they can influence the direction it takes. Another great reason for sponsoring 😅 |
I've prototyped a new extension that I already pushed to Insiders in markdown_extensions:
- material.extensions.preview:
targets:
include:
- changelog/index.md
- customization.md
- insiders/changelog/*
- setup/extensions/* The above configuration means: render instant previews for all links that point to the changelog, the customization page, the Insiders changelog, as well as all Markdown extensions. Render links from all pages, which is why We activated it on our documentation, so you can check it out already! It is yet undocumented, but it follows the same logic as the inclusion/exclusion patterns for other plugins, like the social plugin. In general, only Again, this extension is highly experimental (I just prototyped it today), so use at your own risk. However, it should already be quite safe to use, since it only adds attributes when a pattern matches, and doesn't do any other alterations. Happy for any feedback, good or bad! |
You're right. I gave the glightbox example because I had it in mind but it could be obviously be a markdown extension.
Just in case, I'd like to point out that I'm a sponsor (via an organization I admin and finance) despite the absence of a badge.
Really nice! I'll try to test your changes in next days. |
That was meant as a general note that sponsors can influence the direction of features, exactly as you did in this conversation. We're very aware of your continued support and very thankful ❤️
I deliberately decided to put this into an extension, as it's transforming the parsed AST, thus more lightweight than a plugin, and a plugin is not necessary at this point since we're only patching links. We'll be moving several parts of plugins to extensions in the future. I've only begun to write Markdown extensions, which is why up to now, most part is implemented as part of plugins. It's a journey for me as well. |
The new Markdown extension has been released as part of 9.5.11+insiders-4.53.0. Additionally, I've updated our documentation how to configure automatic instant previews. 4.53.0 also brings pinning of blog posts 🤫 |
Hiya! Possible bug? It looks like at present you can't have both sources and targets? For example, this works:
As does this:
However this results in only the
I've attached a reproduction: 9.5.13+insiders.4.53.1-instant-preview-issue.zip If this isn't a bug, is there any chance of it being fixed anyway? It would be great to be able to set it up so all links in our release notes get previews, but for the site as a whole, we probably only want automatic previews pointing to one section. |
Thanks for the reproduction. Yes, sounds like a possible bug from what you're describing. I'll look into it! |
@StarfallProjects I've looked into it and everything is working as intended. Your configuration is: markdown_extensions:
- material.extensions.preview:
sources:
include:
- index.md
targets:
include:
- other-file.md This means:
On another note, all of those are set operations. If an If you change the setting, the secondary file will also be rendered with a preview: markdown_extensions:
- material.extensions.preview:
sources:
include:
- index.md
targets:
include:
- other-file.md
- secondary-file.md The aim of the extension to give maximum control over where instant previews are rendered while making it as comfortable as possible at the same time. If you specify settings, those settings must be very explicit. We might add further filtering capabilities in the future if it makes, sense, but in general, the source and target is the most sensical one. |
Re-reading your case, I think we could think about extending support to allow for multiple filter configurations, adding one more level of indirection. I haven't thought about such complex setups, but that's also why we're still considering this feature highly experimental. So, in essence, if I understand correctly, something like this (concept): - material.extensions.preview:
configurations:
# Preview all outgoing links in release notes
- sources:
include: [release-notes.md]
# Preview all links on the entire site that point to log streaming
- targets:
include: [log-streaming.md] |
@squidfunk thanks for clarifying. And yup, something like what you describe would be perfect. |
@StarfallProjects implemented in markdown_extensions:
- material.extensions.preview:
configurations:
# Preview all outgoing links in release notes
- sources:
include: [release-notes.md]
# Preview all links on the entire site that point to log streaming
- targets:
include: [log-streaming.md] |
@squidfunk amazing, I'll test this Monday |
@squidfunk realised my usual method of testing updates of course won't work as this isn't released yet. I had a quick look at the readme and contributing guide and can't see any guidance on building and testing the project? Do you have a link? However, the behaviour you've described sounds exactly like what we're looking for. |
I'm not sure what your usual method is, but you just need to install the
After testing, you can go back to any tag, e.g. the latest
We haven't released or documented this yet, as I'm waiting for feedback, but once you confirm that this solves your problem, we're going to refactor the Markdown extension and make this the new default as it's more powerful. |
Sorry for the confusion. I usually install it as a submodule, which I updated this morning. When it wasn't working I assumed it was picking up the latest release from the submodule rather than master . . . however I've now tried installing as normal using the GH token, and having the same issue. To be safe I created a fresh virtual environment, and the problem persisted. My source is working - all links preview. |
@StarfallProjects thanks for the reproduction. It turned out to be a one-line fix – I messed up ![]() |
Awesome! |
I'm archiving this announcement. If you experience any problems with instant previews, or have feedback to share with us, please create a new issue in case of bugs or discussion in case of questions and feedback |
Hey! I am getting this error when adding the extension to the configuration:
my configuration is:
Am I doing something wrong? I thought I had to install something but I didn't not find what. |
@susuhahnml are you using Insiders, i.e., are you actively sponsoring the project? Instant previews are currently reserved to sponsors. |
That you so much for the quick reply! I didn't notice that it was a reserved feature. Apologies for that! We are trying to move the docs for our systems to mkdocs with material and create a plug in for our open source software. I will check with the rest of the team if becoming sponsors is doable 😄 . Thanks for all your nice work! |
Instant Previews are finally here 😎 insiders-4.52.0 ships a new experimental feature that allows the user to preview another documentation page when hovering or focusing a link. You can test it on our documentation! Here's how it looks:
Ohne.Titel.mp4
Sponsors can start using it right now! Why should I sponsor?
Instant previews can either be enabled globally, or for an individual link. Note that this feature is experimental. You can help us test it, so we can find the ideal mode of operation together, pushing it into a stable state. We've enabled it on selected links on our documentation in the reference guide, as well as on all version classifiers.
Usage
Per target page or section (recommended)
The
master
of Insiders contains a brand new Markdown extension that allows to scope instant previews to specific link targets, which can be pages or entire sections. This is explained in more detail in #6704 (comment):Per link
Make sure to enable Attribute Lists, and add the
data-preview
attribute to any internal link:Globally
Add the following line to
mkdocs.yml
:Note that this is not recommended, because it adds an instant preview to each and every link, which can be quite overwhelming. This option is essentially only provided for debugging instant previews themselves.
What's coming next
With your feedback, we will iterate on this feature, quickly pushing it into a stable state, before we will start working on the next big plugin that will come to Material for MkDocs: the glossary plugin. This plugin will allow you to create rich glossaries that go far beyond the rudimentary glossary functionality provided by Material for MkDocs, which will make your documentation more interactive and lift your documentation to the next level ⬆️
As always, we're happy for any feedback we receive from you, as it allows us to build the best possible version of this.
The text was updated successfully, but these errors were encountered: