Implement Japanese language persistence for internal links in GitLab docs
Goal
Relevant thread: #227 (comment 2529061248)
Internal links within the Japanese docs site pages need to lead to /ja-jp/ so users remain in the Japanese version of the site when navigating between pages.
This is related to the following UX MVP's point: #159
- Links to pages that have Japanese translations will take users to those Japanese pages.
- User will remain in the Japanese docs site and continue to navigate to translated pages, regardless if they land on a temporarily untranslated page.
Finding links
Any page can be checked if there are any internal links that do not lead to the Japanese site by pasting the following Javascript in the console. This will print the URL and the element, which can be moused over to highlight it on the page or right clicked and revealed to scroll to. canonicalJP is set to the Japanese site for https://gitlab-docs-hugo-19c275.gitlab.io/review-mr-30/ja-jp/.
canonicalJP="/review-mr-30/ja-jp/";
Array.from(document.querySelectorAll(`a:not([href^="${canonicalJP}"]):not([href^="http"]):not([href^="#"])`)).forEach(x=>
console.log(x.attributes.href.value, x)
);
As of this writing, there are 28 internal links on the front of https://gitlab-docs-hugo-19c275.gitlab.io/review-mr-30/ja-jp/ that incorrectly lead back to the English site.
Fixing the links
The typical way of fixing links is replacing the relURL in the template with relLangURL.
For example, the GitLab Logo in header.html:
- <a class="header-logo gl-flex lg:gl-mr-5" href="{{ relURL "" }}">
+ <a class="header-logo gl-flex lg:gl-mr-5" href="{{ relLangURL "" }}">