Revision date doesn't work with Instant loading

[ghost]

I checked that...

• ... the documentation does not mention anything about my problem
• ... the problem doesn't occur with the default MkDocs template
• ... the problem is not in any of my customizations (CSS, JS, template)
• ... there are no open or closed issues that are related to my problem

Description

When I set the instant feature along with the git-revision-date-localized plugin and click in any page from within the site, the XHR reload shows the new page fast, but the revision date won't appear at the end. I can only see it by refresing the site.
This bug doesn't happen when I follow a link to the site; only when I navigate through pages from within the site (XHR reloads).

Expected behavior

Go to another page, displayed by XHR, and see the revision date at the end.

Actual behavior

Go to another page, displayed by XHR, and only see "Last update:", without any date.

Steps to reproduce the bug

1. Enable instant and git-revision-date-localized:

   plugins:
   - search
   - git-revision-date-localized:
       type: timeago
       fallback_to_build_date: true

2. Go to any page of your site following an URL from the outside. Revision date shows.
3. Go to any page from within the site (sidebar, prev/next page buttons, etc). Revision date doesn't show.
4. Refresh the site. Revision date shows again.

Package versions

• Python: 3.8.5
• MkDocs: 1.1.2
• Material: 5.5.12+insiders.1.4.1
  (although it also happened before using Insider builds)

Project configuration

# Appearance
theme:
  name: material
  custom_dir: theme
  logo: assets/img/logo.png
  favicon: assets/img/favicon.png
  font:
    text: PT Sans
    code: PT Mono
  palette:
    - scheme: slate
      primary: deep purple
      accent: deep purple
      toggle:
        icon: material/weather-night
        name: Switch to dark mode
    - scheme: default
      primary: deep purple
      accent: deep purple
      toggle:
        icon: material/weather-sunny
        name: Switch to light mode
  features:
    - instant
    - tabs
    - header.hide # Insiders
    - search.highlight # Insiders

# Plugins
plugins:
  - search
  - minify:
      minify_html: true
  - git-revision-date-localized:
      type: timeago
      fallback_to_build_date: true

# Extensions
markdown_extensions:
  - admonition
  - def_list
  - meta
  - pymdownx.details
  - pymdownx.emoji
  - pymdownx.extra
  - pymdownx.highlight
  - pymdownx.inlinehilite
  - pymdownx.keys:
      separator: ' + '
  - pymdownx.mark
  - pymdownx.smartsymbols
  - pymdownx.striphtml
  - pymdownx.superfences
  - pymdownx.tabbed
  - pymdownx.tasklist:
      custom_checkbox: true
  - toc:
      separator: "-"
      permalink: '#'
      toc_depth: 3

# Customization
extra_css:
  - assets/css/tasklist.css
  - assets/css/tabbed.css
  - assets/css/critic.css
  - assets/css/2t1.css
extra_javascript:
  - assets/js/details.js
  - assets/js/tables.js
  - assets/js/2t1.js
  - https://cdnjs.cloudflare.com/ajax/libs/tablesort/5.2.1/tablesort.min.js

System information

• OS: Windows 10 20H1
• Browser: Firefox 80.0.1

[squidfunk]

Thanks for reporting! Might I ask you to test whether this also happens with the non-localized version of revision date?

[ghost]

Sorry for the delay @squidfunk, I've been outside for the whole day. I've just tested the non-localized version, and it works just fine. The problem seems to appear only in the localized version.

[squidfunk]

No worries. Thanks for your efforts! I'm going to CC @timvink here, as he's the author of the extension. Does the extension inject any JavaScript when timeago is used? As the non-localized version works, this is likely not a bug with instant loading but with the plugin.

[timvink]

Does the extension inject any JavaScript when timeago is used?

Yes, it includes timeago.js and some CSS to enable dynamically updating the timeago. (see https://github.com/timvink/mkdocs-git-revision-date-localized-plugin/blob/master/mkdocs_git_revision_date_localized_plugin/plugin.py#L112-L126)

this is likely not a bug with instant loading but with the plugin.

I'm aware of this behaviour. I actually have a similar issue with instant loading not working for another plugin I wrote (mkdocs-print-site-plugin) that also injects some javascript. I'm not sure if making that work with instant loading is a bug, or something that's just not possible. @squidfunk Any advice on how to include javascript that will be compatible with instant loading? I would be happy to work on a fix but I'm not very experienced with javascript so I need some pointers..

[squidfunk]

@timvink thanks for your input! It's not hard to get it working with instant loading. The documentation describes how to integrate tablesort, an external library, with instant loading:

mkdocs.yml:

extra_javascript:
  - https://cdnjs.cloudflare.com/ajax/libs/tablesort/5.2.1/tablesort.min.js
  - javascripts/tables.js

javascripts/tables.js:

app.document$.subscribe(function() {
  var tables = document.querySelectorAll("article table")
  tables.forEach(function(table) {
    new Tablesort(table)
  })
})

As instant loading is a Material-specific feature, you'd have to detect Material. The app.document$ observable is exposed no matter if instant loading is enabled or not, and will run on the initial document load and on every document load triggered by instant loading, so maybe you could detect Material like this:

if (
  typeof app !== "undefined" && 
  typeof app.document$ !== "undefined"
) {
  app.document$.subscribe(function() {
    // custom logic
  })
}
...

Other than that, you may also use the generator meta tag to detect Material:

if (document.querySelector("meta[name=generator][content*=mkdocs-material]")) {
  // custom logic
}

[squidfunk]

I'm closing this issue, as it's a problem originating from the revision date plugin, not Material for MkDocs itself. If you need further assistance, feel free to come back to this issue.

[timvink]

Sweet thanks for the help @squidfunk, and thanks for the detailed report @danierutu !

I just released mkdocs-git-revision-date-localized-plugin v0.7.1 which adds support for instant loading.