When using content.action.view in theme.features with GitLab, how can I make it go to blob/ instead of raw/?

[ryran]

Part of my mkdocs.yml:

repo_url: https://gitlab.example.com/group/project
repo_name: GitLab

# https://www.mkdocs.org/user-guide/configuration/#edit_uri
edit_uri: edit/main/docs/

# doesn't hurt to try...
view_uri: blob/main/docs/

theme:
  features:
    - content.action.edit
    - content.action.view

Out of the box, the edit button works great and takes me straight to the editor; however, the view button takes me to raw/main/docs/{path}, which I do not like.

How might I go about tweaking it to instead go to blob/main/docs/? (Even better would be blob/main/docs/{path}?plain=1.)

[kamilkrzyskow]

Hello @ryran,
in the partials/actions.html Jinja2 template the link gets converted to raw:

mkdocs-material/src/templates/partials/actions.html

Line 46 in 7b83b57

href="{{ page.edit_url | replace(part, 'raw') }}"

from the looks of it, it also has a bug 🤔 as it would convert every edit or blob in the URL to raw even the file name, or perhaps I'm mistaken.

Anyways, you can use customization to replace the template and use an edited partial without the raw conversion:
https://squidfunk.github.io/mkdocs-material/customization/#extending-the-theme

---

Another option would be to change the links after the page was loaded with JavaScript:
in the Gothic Modding Community we're currently using 2 branches main and dev and on the dev site the GitHub repository link and action links get converted from main to dev branch.

You can see the code here and it's executed after the "DOMContentLoaded" event here. We're not using navigation.instant, so you'll probably have to change that if you do.

https://squidfunk.github.io/mkdocs-material/customization/#additional-javascript

[ryran]

Hello @ryran, in the partials/actions.html Jinja2 template the link gets converted to raw:

mkdocs-material/src/templates/partials/actions.html

Line 46 in 7b83b57

href="{{ page.edit_url | replace(part, 'raw') }}"

Ahhh thank you for showing me this. That looks real easy to do, but I'm worried about the long-term maintainability of keeping a modified copy of actions.html around. Reading up on the block-extension syntax... it looks like I can't leverage that since there are no blocks defined in actions.html. Bummer.

Another option would be to change the links after the page was loaded with JavaScript: ...

Thank you! I'll try to leverage your example to go this route. :)

[kamilkrzyskow]

The actions.html isn't such a big partial to worry about maintainability, if a breaking change will happen it should be a quick fix. 🤔
Also typically all breaking changes are reported in the changelog or on the https://squidfunk.github.io/mkdocs-material/upgrade/ page.

Apart of that I wrote a guide about dynamic templates overrides:

• How to dynamically override templates with hooks? #5060

Unfortunately, I can't find the time to edit it for the newest implementation of my hooks and mkdocs-material.
But you can still use the guide as a "reference guide" and use the updated solution, which uses 2 hooks:

• https://github.com/Gothic-Modding-Community/gmc/blob/dev/overrides/.hooks/theme_overrides_manager.py
• https://github.com/Gothic-Modding-Community/gmc/blob/dev/overrides/.hooks/language_flags.py

[ryran]

The actions.html isn't such a big partial to worry about maintainability, if a breaking change will happen it should be a quick fix. 🤔 Also typically all breaking changes are reported in the changelog or on the https://squidfunk.github.io/mkdocs-material/upgrade/ page.

Yeah I totally get that, but we're building our wiki via an automated pipeline and I won't always be around, so it's too much of a risk.

That said, I was able to get it working using your example! For posterity:

# Added to mkdocs.yml:
extra_javascript:
  - javascripts/extra.js

// created docs/javascripts/extra.js with this content:
"use strict";

window.addEventListener("DOMContentLoaded", _ => {
    myModifyViewPageButtonToBlob();
});

const myModifyViewPageButtonToBlob = () => {
    for (const anchor of document.querySelectorAll("a.md-content__button")) {
        anchor.href = anchor.href.replace("/raw/main/", "/blob/main/");
    }
};

Woo hoo that works! Hopefully I didn't do anything too stupid there.

Apart of that I wrote a guide about dynamic templates overrides:

• How to dynamically override templates with hooks? #5060

Wow that's intense. :) I've got what I need for now, but I'll keep that handy.

[kamilkrzyskow]

Great work! The solution only lacks the ?plain=1 part, which you mentioned yourself hehe ✌️

(Even better would be blob/main/docs/{path}?plain=1.)

[kamilkrzyskow]

Yeah I totally get that, but we're building our wiki via an automated pipeline and I won't always be around,

You can pin the version of Python modules to avoid automatic updates and have more control.
On GMC we're using static versions ==, and we once were on mkdocs-material 9.1.21 for months before upgrading to 9.4 or 9.5
mkdocs-material allows for minor patches with ~=