1
1
mirror of https://github.com/go-gitea/gitea synced 2024-12-24 01:24:26 +00:00
gitea/web_src/js/markdown/anchors.js
silverwind 9c54fef17c
Shorten markdown heading anchors links (#11903)
This changes the links on headings like '# Usage' in markdown from

  `https://host/user/repo#user-content-usage`

to just

  `https://host/user/repo#usage`

matching GitHub and GitLab. The linked id elements still have the prefix
and this behaviour matches GitHub and GitLab too, so JS is needed to
scroll to the active anchor. I suspect it's like that to avoid namespace
collission between user-generated content and other page content.
Compatibilty for old links is included so they will continue to work.

Also included are some enhancements to make the clickable area for the
link icon larger and fix its color on arc-green.

Fixes: https://github.com/go-gitea/gitea/issues/11896
Fixes: https://github.com/go-gitea/gitea/issues/12062
2020-06-26 21:04:22 +08:00

33 lines
1.1 KiB
JavaScript

import {svg} from '../utils.js';
const headingSelector = '.markdown h1, .markdown h2, .markdown h3, .markdown h4, .markdown h5, .markdown h6';
function scrollToAnchor() {
if (document.querySelector(':target')) return;
if (!window.location.hash || window.location.hash.length <= 1) return;
const id = window.location.hash.substring(1);
const el = document.getElementById(`user-content-${id}`);
if (el) {
el.scrollIntoView();
} else if (id.startsWith('user-content-')) { // compat for links with old 'user-content-' prefixed hashes
const el = document.getElementById(id);
if (el) el.scrollIntoView();
}
}
export default function initMarkdownAnchors() {
if (!document.querySelector('.markdown')) return;
for (const heading of document.querySelectorAll(headingSelector)) {
const originalId = heading.id.replace(/^user-content-/, '');
const a = document.createElement('a');
a.classList.add('anchor');
a.setAttribute('href', `#${encodeURIComponent(originalId)}`);
a.innerHTML = svg('octicon-link', 16);
heading.prepend(a);
}
scrollToAnchor();
window.addEventListener('hashchange', scrollToAnchor);
}