Skip to content

Fix heading indexing for pure html headings - #966

Closed
ang-zeyu wants to merge 1 commit into
MarkBind:masterfrom
ang-zeyu:index-html-headings
Closed

Fix heading indexing for pure html headings#966
ang-zeyu wants to merge 1 commit into
MarkBind:masterfrom
ang-zeyu:index-html-headings

Conversation

@ang-zeyu

@ang-zeyuang-zeyu commented Dec 28, 2019

Copy link
Copy Markdown
Contributor

What is the purpose of this pull request? (put "X" next to an item, remove the rest)

• [x] Bug fix

What is the rationale for this request?
Currently, headings specified in markdown format ( #, ##, ... ) are correctly indexed and given an
id, enabling them to be searched.

Headings specified with pure html h1 ... h6 are not.
Let's fix this, since pure html headings can be useful in nested doms / panel slot headers.

What changes did you make? (Give an overview)

  • Add id for pure html heading tags, using the same slugify used in markdown-it-anchor
  • Update relavant test files

Provide some example code that this change will affect:

markbind-plugin-anchors.js// Give pure html <h1..6> tags an id with the same slugify function used in markdown-it-anchorif(!$(heading).attr('id')){constslugifiedHeading=slugify($(heading).text(),{decamelize: false});$(heading).attr('id',slugifiedHeading);}$(heading).append(ANCHOR_HTML.replace('#',`#${$(heading).attr('id')}`));

Is there anything you'd like reviewers to focus on?
Would like some confirmation with #967.
( could add on the fix to this pr if its fine, since both pertain to heading indexing )

Testing instructions:
Add any <h123456> of your choice to any site. ( there's a <h1>Landing Page Title</h1> in src\template\default\index.md )

The heading should show up in the search bar, if it obeys all other search rules as well:

  • maximum heading indexing level
  • headings in default unexpanded panels and modals not indexed
  • always-index / no-index

<h123..> tags used as slot headers for panels should also now be indexed correctly when the panel has the expanded attribute

Proposed commit message: (wrap lines at 72 characters)
Fix heading indexing for pure html headings

@yamgentyamgent left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for making this change. 2 things in particular:

  1. Since they can now be accessed via an id, maybe consider expanding the scope of this PR by also adding the anchor icon to these headings + allowing it to appear on page nav.
  2. Sometimes authors may want to exclude/include these headings from search index. For Markdown headings, this can be done with attributes. Possible to implement such a scenario for pure html headings?

@ang-zeyu

Copy link
Copy Markdown
ContributorAuthor
  1. Since they can now be accessed via an id, maybe consider expanding the scope of this PR by also adding the anchor icon to these headings + allowing it to appear on page nav.

My added code is just a "guard clause" to give headings with no id (i.e. pure html headings) an id, so that this original line adding the anchor that I only repositioned always executes
$(heading).append(ANCHOR_HTML.replace('#', `#${$(heading).attr('id')}`));

landingpagetitleanchor

  1. Sometimes authors may want to exclude/include these headings from search index. For Markdown headings, this can be done with attributes. Possible to implement such a scenario for pure html headings?

No changes were needed from the original code for this too
e.g. <h1 class="no-index">...</h1> works as expected, likewise for <h6 class="always-index">
Reason being collectHeadingsAndKeywords which processes and indexes the headings executes after page generation, during which postRender and the plugin's code is run

I realised I didn't update the section of the user guide you linked though. Thanks!

@yamgent
yamgent self-requested a review December 30, 2019 05:56

@yamgentyamgent left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah yes, my apologies, I got a bit confused just now when reading the code. Some comments:

// Give pure html <h1..6> tags an id with the same slugify function used in markdown-it-anchor
if (!$(heading).attr('id')) {
const slugifiedHeading = slugify($(heading).text(), { decamelize: false });
$(heading).attr('id', slugifiedHeading);

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I realized that you placed these code on the anchor plugin's logic. If the author turns off this plugin by putting this in site.json:

"pluginsContext": {
"anchors": {
"off": true
}
}

Then the IDs for these pure html headings no longer generate (while the markdown ones still get their IDs).

With that in mind, is it possible to put this logic in Page.js instead?

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good point, will move it to _parse instead.
Would it be better to also remove markdown-it-anchor entirely to standardise where the id is set?

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Would it be better to also remove markdown-it-anchor entirely to standardise where the id is set?

Erm I am not sure what you meant by this question. markdown-it-anchor is a plugin to add clickable anchor icons. All heading ids will always be present regardless of whether markdown-it-anchor is enabled or not.

@ang-zeyuang-zeyuDec 30, 2019

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

markdown-it-anchor is a plugin to add clickable anchor icons. All heading ids will always be present regardless of whether markdown-it-anchor is enabled or not.

Hmm, I think that's markbind-plugin-anchors.js
Specifically this line again :
$(heading).append(ANCHOR_HTML.replace('#', `#${$(heading).attr('id')}`));

I just tried commenting this line out in lib/markdown-it/index.js
//.use(require('markdown-it-anchor'), { slugify: (str) => slugify(str, { decamelize: false }) })
anchors remain even after doing so

Enabling the permalink: true option as described in their docs would give this icon instead by default

code

heading1


markdown-it-anchor is only being used in MarkBind to provide ids to markdown headers, I think. markbind-plugin-anchors handles adding the actual ship ⚓️ icon defined using ANCHOR_HTML.

The two sound very similar haha 😅 Could have highlighted the difference more clearly, my bad

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I see, thanks for the clarification. Yes let's remove markdown-it-anchor then.

## Including or Excluding Headings

**You can specify headings which are to be included or excluded from the index built by MarkBind's built-in search feature** using the `.always-index` or `.no-index` attributes.
**You can specify headings which are to be included or excluded from the index built by MarkBind's built-in search feature** using the `.always-index` or `.no-index` classes.

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We don't usually call {.always-index} and {.no-index} as classes, because it does not look like one from the author's point of view. Perhaps a good compromise would be to include both (a.k.a. "attributes/classes").

Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants

@ang-zeyu@yamgent
, 'i'); if (__m === '*' || __re.test(location.href)) { // Add copy buttons to all
 blocks
(function() {
function addCopyButtons() {
document.querySelectorAll('pre code').forEach(function(codeBlock) {
if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;
codeBlock.parentElement.setAttribute('data-copy-added', 'true');
var btn = document.createElement('button');
btn.textContent = 'Copy';
btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';
btn.onmouseover = function() { this.style.opacity = '1'; };
btn.onmouseout = function() { this.style.opacity = '0.7'; };
btn.onclick = function() {
navigator.clipboard.writeText(codeBlock.textContent).then(function() {
btn.textContent = 'Copied!';
setTimeout(function() { btn.textContent = 'Copy'; }, 1500);
});
};
codeBlock.parentElement.style.position = 'relative';
codeBlock.parentElement.appendChild(btn);
});
}
addCopyButtons();
// Re-run on dynamic content
var observer = new MutationObserver(addCopyButtons);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '
Fix heading indexing for pure html headings by ang-zeyu · Pull Request #966 · MarkBind/markbind · GitHub
Skip to content

Fix heading indexing for pure html headings - #966

Closed
ang-zeyu wants to merge 1 commit into
MarkBind:masterfrom
ang-zeyu:index-html-headings
Closed

Fix heading indexing for pure html headings#966
ang-zeyu wants to merge 1 commit into
MarkBind:masterfrom
ang-zeyu:index-html-headings

Conversation

@ang-zeyu

@ang-zeyuang-zeyu commented Dec 28, 2019

Copy link
Copy Markdown
Contributor

What is the purpose of this pull request? (put "X" next to an item, remove the rest)

• [x] Bug fix

What is the rationale for this request?
Currently, headings specified in markdown format ( #, ##, ... ) are correctly indexed and given an
id, enabling them to be searched.

Headings specified with pure html h1 ... h6 are not.
Let's fix this, since pure html headings can be useful in nested doms / panel slot headers.

What changes did you make? (Give an overview)

  • Add id for pure html heading tags, using the same slugify used in markdown-it-anchor
  • Update relavant test files

Provide some example code that this change will affect:

markbind-plugin-anchors.js// Give pure html <h1..6> tags an id with the same slugify function used in markdown-it-anchorif(!$(heading).attr('id')){constslugifiedHeading=slugify($(heading).text(),{decamelize: false});$(heading).attr('id',slugifiedHeading);}$(heading).append(ANCHOR_HTML.replace('#',`#${$(heading).attr('id')}`));

Is there anything you'd like reviewers to focus on?
Would like some confirmation with #967.
( could add on the fix to this pr if its fine, since both pertain to heading indexing )

Testing instructions:
Add any <h123456> of your choice to any site. ( there's a <h1>Landing Page Title</h1> in src\template\default\index.md )

The heading should show up in the search bar, if it obeys all other search rules as well:

  • maximum heading indexing level
  • headings in default unexpanded panels and modals not indexed
  • always-index / no-index

<h123..> tags used as slot headers for panels should also now be indexed correctly when the panel has the expanded attribute

Proposed commit message: (wrap lines at 72 characters)
Fix heading indexing for pure html headings

@yamgentyamgent left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for making this change. 2 things in particular:

  1. Since they can now be accessed via an id, maybe consider expanding the scope of this PR by also adding the anchor icon to these headings + allowing it to appear on page nav.
  2. Sometimes authors may want to exclude/include these headings from search index. For Markdown headings, this can be done with attributes. Possible to implement such a scenario for pure html headings?

@ang-zeyu

Copy link
Copy Markdown
ContributorAuthor
  1. Since they can now be accessed via an id, maybe consider expanding the scope of this PR by also adding the anchor icon to these headings + allowing it to appear on page nav.

My added code is just a "guard clause" to give headings with no id (i.e. pure html headings) an id, so that this original line adding the anchor that I only repositioned always executes
$(heading).append(ANCHOR_HTML.replace('#', `#${$(heading).attr('id')}`));

landingpagetitleanchor

  1. Sometimes authors may want to exclude/include these headings from search index. For Markdown headings, this can be done with attributes. Possible to implement such a scenario for pure html headings?

No changes were needed from the original code for this too
e.g. <h1 class="no-index">...</h1> works as expected, likewise for <h6 class="always-index">
Reason being collectHeadingsAndKeywords which processes and indexes the headings executes after page generation, during which postRender and the plugin's code is run

I realised I didn't update the section of the user guide you linked though. Thanks!

@yamgent
yamgent self-requested a review December 30, 2019 05:56

@yamgentyamgent left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah yes, my apologies, I got a bit confused just now when reading the code. Some comments:

// Give pure html <h1..6> tags an id with the same slugify function used in markdown-it-anchor
if (!$(heading).attr('id')) {
const slugifiedHeading = slugify($(heading).text(), { decamelize: false });
$(heading).attr('id', slugifiedHeading);

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I realized that you placed these code on the anchor plugin's logic. If the author turns off this plugin by putting this in site.json:

"pluginsContext": {
"anchors": {
"off": true
}
}

Then the IDs for these pure html headings no longer generate (while the markdown ones still get their IDs).

With that in mind, is it possible to put this logic in Page.js instead?

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good point, will move it to _parse instead.
Would it be better to also remove markdown-it-anchor entirely to standardise where the id is set?

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Would it be better to also remove markdown-it-anchor entirely to standardise where the id is set?

Erm I am not sure what you meant by this question. markdown-it-anchor is a plugin to add clickable anchor icons. All heading ids will always be present regardless of whether markdown-it-anchor is enabled or not.

@ang-zeyuang-zeyuDec 30, 2019

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

markdown-it-anchor is a plugin to add clickable anchor icons. All heading ids will always be present regardless of whether markdown-it-anchor is enabled or not.

Hmm, I think that's markbind-plugin-anchors.js
Specifically this line again :
$(heading).append(ANCHOR_HTML.replace('#', `#${$(heading).attr('id')}`));

I just tried commenting this line out in lib/markdown-it/index.js
//.use(require('markdown-it-anchor'), { slugify: (str) => slugify(str, { decamelize: false }) })
anchors remain even after doing so

Enabling the permalink: true option as described in their docs would give this icon instead by default

code

heading1


markdown-it-anchor is only being used in MarkBind to provide ids to markdown headers, I think. markbind-plugin-anchors handles adding the actual ship ⚓️ icon defined using ANCHOR_HTML.

The two sound very similar haha 😅 Could have highlighted the difference more clearly, my bad

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I see, thanks for the clarification. Yes let's remove markdown-it-anchor then.

## Including or Excluding Headings

**You can specify headings which are to be included or excluded from the index built by MarkBind's built-in search feature** using the `.always-index` or `.no-index` attributes.
**You can specify headings which are to be included or excluded from the index built by MarkBind's built-in search feature** using the `.always-index` or `.no-index` classes.

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We don't usually call {.always-index} and {.no-index} as classes, because it does not look like one from the author's point of view. Perhaps a good compromise would be to include both (a.k.a. "attributes/classes").

Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants

@ang-zeyu@yamgent
, 'i'); if (__m === '*' || __re.test(location.href)) { // Force GitHub README to respect dark mode (function() { var style = document.createElement('style'); style.textContent = ' .markdown-body { color-scheme: dark light; } .markdown-body pre { background: #161b22 !important; } .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; } .markdown-body table th, .markdown-body table td { border-color: #30363d !important; } .markdown-body img { background: #0d1117; } .markdown-body blockquote { border-left-color: #8b949e; } .markdown-body hr { border-color: #30363d; } '; document.head.appendChild(style); })(); } } catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + ' Fix heading indexing for pure html headings by ang-zeyu · Pull Request #966 · MarkBind/markbind · GitHub
Skip to content

Fix heading indexing for pure html headings - #966

Closed
ang-zeyu wants to merge 1 commit into
MarkBind:masterfrom
ang-zeyu:index-html-headings
Closed

Fix heading indexing for pure html headings#966
ang-zeyu wants to merge 1 commit into
MarkBind:masterfrom
ang-zeyu:index-html-headings

Conversation

@ang-zeyu

@ang-zeyuang-zeyu commented Dec 28, 2019

Copy link
Copy Markdown
Contributor

What is the purpose of this pull request? (put "X" next to an item, remove the rest)

• [x] Bug fix

What is the rationale for this request?
Currently, headings specified in markdown format ( #, ##, ... ) are correctly indexed and given an
id, enabling them to be searched.

Headings specified with pure html h1 ... h6 are not.
Let's fix this, since pure html headings can be useful in nested doms / panel slot headers.

What changes did you make? (Give an overview)

  • Add id for pure html heading tags, using the same slugify used in markdown-it-anchor
  • Update relavant test files

Provide some example code that this change will affect:

markbind-plugin-anchors.js// Give pure html <h1..6> tags an id with the same slugify function used in markdown-it-anchorif(!$(heading).attr('id')){constslugifiedHeading=slugify($(heading).text(),{decamelize: false});$(heading).attr('id',slugifiedHeading);}$(heading).append(ANCHOR_HTML.replace('#',`#${$(heading).attr('id')}`));

Is there anything you'd like reviewers to focus on?
Would like some confirmation with #967.
( could add on the fix to this pr if its fine, since both pertain to heading indexing )

Testing instructions:
Add any <h123456> of your choice to any site. ( there's a <h1>Landing Page Title</h1> in src\template\default\index.md )

The heading should show up in the search bar, if it obeys all other search rules as well:

  • maximum heading indexing level
  • headings in default unexpanded panels and modals not indexed
  • always-index / no-index

<h123..> tags used as slot headers for panels should also now be indexed correctly when the panel has the expanded attribute

Proposed commit message: (wrap lines at 72 characters)
Fix heading indexing for pure html headings

@yamgentyamgent left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for making this change. 2 things in particular:

  1. Since they can now be accessed via an id, maybe consider expanding the scope of this PR by also adding the anchor icon to these headings + allowing it to appear on page nav.
  2. Sometimes authors may want to exclude/include these headings from search index. For Markdown headings, this can be done with attributes. Possible to implement such a scenario for pure html headings?

@ang-zeyu

Copy link
Copy Markdown
ContributorAuthor
  1. Since they can now be accessed via an id, maybe consider expanding the scope of this PR by also adding the anchor icon to these headings + allowing it to appear on page nav.

My added code is just a "guard clause" to give headings with no id (i.e. pure html headings) an id, so that this original line adding the anchor that I only repositioned always executes
$(heading).append(ANCHOR_HTML.replace('#', `#${$(heading).attr('id')}`));

landingpagetitleanchor

  1. Sometimes authors may want to exclude/include these headings from search index. For Markdown headings, this can be done with attributes. Possible to implement such a scenario for pure html headings?

No changes were needed from the original code for this too
e.g. <h1 class="no-index">...</h1> works as expected, likewise for <h6 class="always-index">
Reason being collectHeadingsAndKeywords which processes and indexes the headings executes after page generation, during which postRender and the plugin's code is run

I realised I didn't update the section of the user guide you linked though. Thanks!

@yamgent
yamgent self-requested a review December 30, 2019 05:56

@yamgentyamgent left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah yes, my apologies, I got a bit confused just now when reading the code. Some comments:

// Give pure html <h1..6> tags an id with the same slugify function used in markdown-it-anchor
if (!$(heading).attr('id')) {
const slugifiedHeading = slugify($(heading).text(), { decamelize: false });
$(heading).attr('id', slugifiedHeading);

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I realized that you placed these code on the anchor plugin's logic. If the author turns off this plugin by putting this in site.json:

"pluginsContext": {
"anchors": {
"off": true
}
}

Then the IDs for these pure html headings no longer generate (while the markdown ones still get their IDs).

With that in mind, is it possible to put this logic in Page.js instead?

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good point, will move it to _parse instead.
Would it be better to also remove markdown-it-anchor entirely to standardise where the id is set?

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Would it be better to also remove markdown-it-anchor entirely to standardise where the id is set?

Erm I am not sure what you meant by this question. markdown-it-anchor is a plugin to add clickable anchor icons. All heading ids will always be present regardless of whether markdown-it-anchor is enabled or not.

@ang-zeyuang-zeyuDec 30, 2019

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

markdown-it-anchor is a plugin to add clickable anchor icons. All heading ids will always be present regardless of whether markdown-it-anchor is enabled or not.

Hmm, I think that's markbind-plugin-anchors.js
Specifically this line again :
$(heading).append(ANCHOR_HTML.replace('#', `#${$(heading).attr('id')}`));

I just tried commenting this line out in lib/markdown-it/index.js
//.use(require('markdown-it-anchor'), { slugify: (str) => slugify(str, { decamelize: false }) })
anchors remain even after doing so

Enabling the permalink: true option as described in their docs would give this icon instead by default

code

heading1


markdown-it-anchor is only being used in MarkBind to provide ids to markdown headers, I think. markbind-plugin-anchors handles adding the actual ship ⚓️ icon defined using ANCHOR_HTML.

The two sound very similar haha 😅 Could have highlighted the difference more clearly, my bad

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I see, thanks for the clarification. Yes let's remove markdown-it-anchor then.

## Including or Excluding Headings

**You can specify headings which are to be included or excluded from the index built by MarkBind's built-in search feature** using the `.always-index` or `.no-index` attributes.
**You can specify headings which are to be included or excluded from the index built by MarkBind's built-in search feature** using the `.always-index` or `.no-index` classes.

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We don't usually call {.always-index} and {.no-index} as classes, because it does not look like one from the author's point of view. Perhaps a good compromise would be to include both (a.k.a. "attributes/classes").

Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants

@ang-zeyu@yamgent
, 'i'); if (__m === '*' || __re.test(location.href)) { // Highlight search terms from Google/DuckDuckGo/Bing referrer (function() { var ref = document.referrer; var terms = []; if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) { var url = new URL(ref); var q = url.searchParams.get('q') || url.searchParams.get('p'); if (q) { terms = q.split(/\s+/).filter(function(t) { return t.length > 2; }); } } if (terms.length === 0) return; var style = document.createElement('style'); style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }'; document.head.appendChild(style); function highlight(node) { if (node.nodeType === 3) { // text node var text = node.textContent; var found = false; terms.forEach(function(term) { var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\]\\]/g, '\\') + ')', 'gi'); if (regex.test(text)) { found = true; var frag = document.createDocumentFragment(); var parts = text.split(regex); parts.forEach(function(part, i) { if (i % 2 === 0) { frag.appendChild(document.createTextNode(part)); } else { var span = document.createElement('span'); span.className = 'userscript-highlight'; span.textContent = part; frag.appendChild(span); } }); node.parentNode.replaceChild(frag, node); } }); } else if (node.nodeType === 1 && node.childNodes) { // element var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT']; if (!skipTags.includes(node.tagName)) { Array.from(node.childNodes).forEach(highlight); } } } highlight(document.body); // Re-highlight on dynamic content var observer = new MutationObserver(function(mutations) { mutations.forEach(function(m) { m.addedNodes.forEach(function(node) { if (node.nodeType === 1 || node.nodeType === 3) highlight(node); }); }); }); observer.observe(document.body, { childList: true, subtree: true }); })(); } } catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + ' Fix heading indexing for pure html headings by ang-zeyu · Pull Request #966 · MarkBind/markbind · GitHub
Skip to content

Fix heading indexing for pure html headings - #966

Closed
ang-zeyu wants to merge 1 commit into
MarkBind:masterfrom
ang-zeyu:index-html-headings
Closed

Fix heading indexing for pure html headings#966
ang-zeyu wants to merge 1 commit into
MarkBind:masterfrom
ang-zeyu:index-html-headings

Conversation

@ang-zeyu

@ang-zeyuang-zeyu commented Dec 28, 2019

Copy link
Copy Markdown
Contributor

What is the purpose of this pull request? (put "X" next to an item, remove the rest)

• [x] Bug fix

What is the rationale for this request?
Currently, headings specified in markdown format ( #, ##, ... ) are correctly indexed and given an
id, enabling them to be searched.

Headings specified with pure html h1 ... h6 are not.
Let's fix this, since pure html headings can be useful in nested doms / panel slot headers.

What changes did you make? (Give an overview)

  • Add id for pure html heading tags, using the same slugify used in markdown-it-anchor
  • Update relavant test files

Provide some example code that this change will affect:

markbind-plugin-anchors.js// Give pure html <h1..6> tags an id with the same slugify function used in markdown-it-anchorif(!$(heading).attr('id')){constslugifiedHeading=slugify($(heading).text(),{decamelize: false});$(heading).attr('id',slugifiedHeading);}$(heading).append(ANCHOR_HTML.replace('#',`#${$(heading).attr('id')}`));

Is there anything you'd like reviewers to focus on?
Would like some confirmation with #967.
( could add on the fix to this pr if its fine, since both pertain to heading indexing )

Testing instructions:
Add any <h123456> of your choice to any site. ( there's a <h1>Landing Page Title</h1> in src\template\default\index.md )

The heading should show up in the search bar, if it obeys all other search rules as well:

  • maximum heading indexing level
  • headings in default unexpanded panels and modals not indexed
  • always-index / no-index

<h123..> tags used as slot headers for panels should also now be indexed correctly when the panel has the expanded attribute

Proposed commit message: (wrap lines at 72 characters)
Fix heading indexing for pure html headings

@yamgentyamgent left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for making this change. 2 things in particular:

  1. Since they can now be accessed via an id, maybe consider expanding the scope of this PR by also adding the anchor icon to these headings + allowing it to appear on page nav.
  2. Sometimes authors may want to exclude/include these headings from search index. For Markdown headings, this can be done with attributes. Possible to implement such a scenario for pure html headings?

@ang-zeyu

Copy link
Copy Markdown
ContributorAuthor
  1. Since they can now be accessed via an id, maybe consider expanding the scope of this PR by also adding the anchor icon to these headings + allowing it to appear on page nav.

My added code is just a "guard clause" to give headings with no id (i.e. pure html headings) an id, so that this original line adding the anchor that I only repositioned always executes
$(heading).append(ANCHOR_HTML.replace('#', `#${$(heading).attr('id')}`));

landingpagetitleanchor

  1. Sometimes authors may want to exclude/include these headings from search index. For Markdown headings, this can be done with attributes. Possible to implement such a scenario for pure html headings?

No changes were needed from the original code for this too
e.g. <h1 class="no-index">...</h1> works as expected, likewise for <h6 class="always-index">
Reason being collectHeadingsAndKeywords which processes and indexes the headings executes after page generation, during which postRender and the plugin's code is run

I realised I didn't update the section of the user guide you linked though. Thanks!

@yamgent
yamgent self-requested a review December 30, 2019 05:56

@yamgentyamgent left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah yes, my apologies, I got a bit confused just now when reading the code. Some comments:

// Give pure html <h1..6> tags an id with the same slugify function used in markdown-it-anchor
if (!$(heading).attr('id')) {
const slugifiedHeading = slugify($(heading).text(), { decamelize: false });
$(heading).attr('id', slugifiedHeading);

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I realized that you placed these code on the anchor plugin's logic. If the author turns off this plugin by putting this in site.json:

"pluginsContext": {
"anchors": {
"off": true
}
}

Then the IDs for these pure html headings no longer generate (while the markdown ones still get their IDs).

With that in mind, is it possible to put this logic in Page.js instead?

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good point, will move it to _parse instead.
Would it be better to also remove markdown-it-anchor entirely to standardise where the id is set?

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Would it be better to also remove markdown-it-anchor entirely to standardise where the id is set?

Erm I am not sure what you meant by this question. markdown-it-anchor is a plugin to add clickable anchor icons. All heading ids will always be present regardless of whether markdown-it-anchor is enabled or not.

@ang-zeyuang-zeyuDec 30, 2019

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

markdown-it-anchor is a plugin to add clickable anchor icons. All heading ids will always be present regardless of whether markdown-it-anchor is enabled or not.

Hmm, I think that's markbind-plugin-anchors.js
Specifically this line again :
$(heading).append(ANCHOR_HTML.replace('#', `#${$(heading).attr('id')}`));

I just tried commenting this line out in lib/markdown-it/index.js
//.use(require('markdown-it-anchor'), { slugify: (str) => slugify(str, { decamelize: false }) })
anchors remain even after doing so

Enabling the permalink: true option as described in their docs would give this icon instead by default

code

heading1


markdown-it-anchor is only being used in MarkBind to provide ids to markdown headers, I think. markbind-plugin-anchors handles adding the actual ship ⚓️ icon defined using ANCHOR_HTML.

The two sound very similar haha 😅 Could have highlighted the difference more clearly, my bad

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I see, thanks for the clarification. Yes let's remove markdown-it-anchor then.

## Including or Excluding Headings

**You can specify headings which are to be included or excluded from the index built by MarkBind's built-in search feature** using the `.always-index` or `.no-index` attributes.
**You can specify headings which are to be included or excluded from the index built by MarkBind's built-in search feature** using the `.always-index` or `.no-index` classes.

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We don't usually call {.always-index} and {.no-index} as classes, because it does not look like one from the author's point of view. Perhaps a good compromise would be to include both (a.k.a. "attributes/classes").

Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants

@ang-zeyu@yamgent
, 'i'); if (__m === '*' || __re.test(location.href)) { // Strip utm_, fbclid, gclid, etc. from all links on page (function() { var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content', 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid', 'ref', 'ref_src', 'source', 'medium', 'campaign']; function cleanUrl(url) { try { var u = new URL(url, window.location.origin); var changed = false; trackingParams.forEach(function(p) { if (u.searchParams.has(p)) { u.searchParams.delete(p); changed = true; } }); return changed ? u.toString() : url; } catch (e) { return url; } } function cleanLinks() { document.querySelectorAll('a[href]').forEach(function(a) { var clean = cleanUrl(a.href); if (clean !== a.href) a.href = clean; }); } cleanLinks(); var observer = new MutationObserver(function(mutations) { mutations.forEach(function(m) { m.addedNodes.forEach(function(node) { if (node.nodeType === 1) { if (node.tagName === 'A') cleanLinks(); node.querySelectorAll('a[href]').forEach(function(a) { var clean = cleanUrl(a.href); if (clean !== a.href) a.href = clean; }); } }); }); }); observer.observe(document.body, { childList: true, subtree: true }); })(); } } catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); } })(); (function(){ try { var __m = "youtube.com"; var __re = new RegExp('^' + "youtube\\.com" + ' Fix heading indexing for pure html headings by ang-zeyu · Pull Request #966 · MarkBind/markbind · GitHub
Skip to content

Fix heading indexing for pure html headings - #966

Closed
ang-zeyu wants to merge 1 commit into
MarkBind:masterfrom
ang-zeyu:index-html-headings
Closed

Fix heading indexing for pure html headings#966
ang-zeyu wants to merge 1 commit into
MarkBind:masterfrom
ang-zeyu:index-html-headings

Conversation

@ang-zeyu

@ang-zeyuang-zeyu commented Dec 28, 2019

Copy link
Copy Markdown
Contributor

What is the purpose of this pull request? (put "X" next to an item, remove the rest)

• [x] Bug fix

What is the rationale for this request?
Currently, headings specified in markdown format ( #, ##, ... ) are correctly indexed and given an
id, enabling them to be searched.

Headings specified with pure html h1 ... h6 are not.
Let's fix this, since pure html headings can be useful in nested doms / panel slot headers.

What changes did you make? (Give an overview)

  • Add id for pure html heading tags, using the same slugify used in markdown-it-anchor
  • Update relavant test files

Provide some example code that this change will affect:

markbind-plugin-anchors.js// Give pure html <h1..6> tags an id with the same slugify function used in markdown-it-anchorif(!$(heading).attr('id')){constslugifiedHeading=slugify($(heading).text(),{decamelize: false});$(heading).attr('id',slugifiedHeading);}$(heading).append(ANCHOR_HTML.replace('#',`#${$(heading).attr('id')}`));

Is there anything you'd like reviewers to focus on?
Would like some confirmation with #967.
( could add on the fix to this pr if its fine, since both pertain to heading indexing )

Testing instructions:
Add any <h123456> of your choice to any site. ( there's a <h1>Landing Page Title</h1> in src\template\default\index.md )

The heading should show up in the search bar, if it obeys all other search rules as well:

  • maximum heading indexing level
  • headings in default unexpanded panels and modals not indexed
  • always-index / no-index

<h123..> tags used as slot headers for panels should also now be indexed correctly when the panel has the expanded attribute

Proposed commit message: (wrap lines at 72 characters)
Fix heading indexing for pure html headings

@yamgentyamgent left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for making this change. 2 things in particular:

  1. Since they can now be accessed via an id, maybe consider expanding the scope of this PR by also adding the anchor icon to these headings + allowing it to appear on page nav.
  2. Sometimes authors may want to exclude/include these headings from search index. For Markdown headings, this can be done with attributes. Possible to implement such a scenario for pure html headings?

@ang-zeyu

Copy link
Copy Markdown
ContributorAuthor
  1. Since they can now be accessed via an id, maybe consider expanding the scope of this PR by also adding the anchor icon to these headings + allowing it to appear on page nav.

My added code is just a "guard clause" to give headings with no id (i.e. pure html headings) an id, so that this original line adding the anchor that I only repositioned always executes
$(heading).append(ANCHOR_HTML.replace('#', `#${$(heading).attr('id')}`));

landingpagetitleanchor

  1. Sometimes authors may want to exclude/include these headings from search index. For Markdown headings, this can be done with attributes. Possible to implement such a scenario for pure html headings?

No changes were needed from the original code for this too
e.g. <h1 class="no-index">...</h1> works as expected, likewise for <h6 class="always-index">
Reason being collectHeadingsAndKeywords which processes and indexes the headings executes after page generation, during which postRender and the plugin's code is run

I realised I didn't update the section of the user guide you linked though. Thanks!

@yamgent
yamgent self-requested a review December 30, 2019 05:56

@yamgentyamgent left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah yes, my apologies, I got a bit confused just now when reading the code. Some comments:

// Give pure html <h1..6> tags an id with the same slugify function used in markdown-it-anchor
if (!$(heading).attr('id')) {
const slugifiedHeading = slugify($(heading).text(), { decamelize: false });
$(heading).attr('id', slugifiedHeading);

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I realized that you placed these code on the anchor plugin's logic. If the author turns off this plugin by putting this in site.json:

"pluginsContext": {
"anchors": {
"off": true
}
}

Then the IDs for these pure html headings no longer generate (while the markdown ones still get their IDs).

With that in mind, is it possible to put this logic in Page.js instead?

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good point, will move it to _parse instead.
Would it be better to also remove markdown-it-anchor entirely to standardise where the id is set?

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Would it be better to also remove markdown-it-anchor entirely to standardise where the id is set?

Erm I am not sure what you meant by this question. markdown-it-anchor is a plugin to add clickable anchor icons. All heading ids will always be present regardless of whether markdown-it-anchor is enabled or not.

@ang-zeyuang-zeyuDec 30, 2019

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

markdown-it-anchor is a plugin to add clickable anchor icons. All heading ids will always be present regardless of whether markdown-it-anchor is enabled or not.

Hmm, I think that's markbind-plugin-anchors.js
Specifically this line again :
$(heading).append(ANCHOR_HTML.replace('#', `#${$(heading).attr('id')}`));

I just tried commenting this line out in lib/markdown-it/index.js
//.use(require('markdown-it-anchor'), { slugify: (str) => slugify(str, { decamelize: false }) })
anchors remain even after doing so

Enabling the permalink: true option as described in their docs would give this icon instead by default

code

heading1


markdown-it-anchor is only being used in MarkBind to provide ids to markdown headers, I think. markbind-plugin-anchors handles adding the actual ship ⚓️ icon defined using ANCHOR_HTML.

The two sound very similar haha 😅 Could have highlighted the difference more clearly, my bad

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I see, thanks for the clarification. Yes let's remove markdown-it-anchor then.

## Including or Excluding Headings

**You can specify headings which are to be included or excluded from the index built by MarkBind's built-in search feature** using the `.always-index` or `.no-index` attributes.
**You can specify headings which are to be included or excluded from the index built by MarkBind's built-in search feature** using the `.always-index` or `.no-index` classes.

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We don't usually call {.always-index} and {.no-index} as classes, because it does not look like one from the author's point of view. Perhaps a good compromise would be to include both (a.k.a. "attributes/classes").

Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants

@ang-zeyu@yamgent
, 'i'); if (__m === '*' || __re.test(location.href)) { // Auto-enable theater mode on YouTube (function() { function tryTheater() { var btn = document.querySelector('button[aria-label="Theater mode"], ytd-player #player button[title="Theater mode"]'); if (btn && !btn.classList.contains('activated')) { btn.click(); } } // Try immediately tryTheater(); // Try after navigation (SPA) var lastUrl = location.href; setInterval(function() { if (location.href !== lastUrl) { lastUrl = location.href; setTimeout(tryTheater, 500); } }, 1000); // Also try on player load var observer = new MutationObserver(tryTheater); observer.observe(document.body, { childList: true, subtree: true }); })(); } } catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + ' Fix heading indexing for pure html headings by ang-zeyu · Pull Request #966 · MarkBind/markbind · GitHub
Skip to content

Fix heading indexing for pure html headings - #966

Closed
ang-zeyu wants to merge 1 commit into
MarkBind:masterfrom
ang-zeyu:index-html-headings
Closed

Fix heading indexing for pure html headings#966
ang-zeyu wants to merge 1 commit into
MarkBind:masterfrom
ang-zeyu:index-html-headings

Conversation

@ang-zeyu

@ang-zeyuang-zeyu commented Dec 28, 2019

Copy link
Copy Markdown
Contributor

What is the purpose of this pull request? (put "X" next to an item, remove the rest)

• [x] Bug fix

What is the rationale for this request?
Currently, headings specified in markdown format ( #, ##, ... ) are correctly indexed and given an
id, enabling them to be searched.

Headings specified with pure html h1 ... h6 are not.
Let's fix this, since pure html headings can be useful in nested doms / panel slot headers.

What changes did you make? (Give an overview)

  • Add id for pure html heading tags, using the same slugify used in markdown-it-anchor
  • Update relavant test files

Provide some example code that this change will affect:

markbind-plugin-anchors.js// Give pure html <h1..6> tags an id with the same slugify function used in markdown-it-anchorif(!$(heading).attr('id')){constslugifiedHeading=slugify($(heading).text(),{decamelize: false});$(heading).attr('id',slugifiedHeading);}$(heading).append(ANCHOR_HTML.replace('#',`#${$(heading).attr('id')}`));

Is there anything you'd like reviewers to focus on?
Would like some confirmation with #967.
( could add on the fix to this pr if its fine, since both pertain to heading indexing )

Testing instructions:
Add any <h123456> of your choice to any site. ( there's a <h1>Landing Page Title</h1> in src\template\default\index.md )

The heading should show up in the search bar, if it obeys all other search rules as well:

  • maximum heading indexing level
  • headings in default unexpanded panels and modals not indexed
  • always-index / no-index

<h123..> tags used as slot headers for panels should also now be indexed correctly when the panel has the expanded attribute

Proposed commit message: (wrap lines at 72 characters)
Fix heading indexing for pure html headings

@yamgentyamgent left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for making this change. 2 things in particular:

  1. Since they can now be accessed via an id, maybe consider expanding the scope of this PR by also adding the anchor icon to these headings + allowing it to appear on page nav.
  2. Sometimes authors may want to exclude/include these headings from search index. For Markdown headings, this can be done with attributes. Possible to implement such a scenario for pure html headings?

@ang-zeyu

Copy link
Copy Markdown
ContributorAuthor
  1. Since they can now be accessed via an id, maybe consider expanding the scope of this PR by also adding the anchor icon to these headings + allowing it to appear on page nav.

My added code is just a "guard clause" to give headings with no id (i.e. pure html headings) an id, so that this original line adding the anchor that I only repositioned always executes
$(heading).append(ANCHOR_HTML.replace('#', `#${$(heading).attr('id')}`));

landingpagetitleanchor

  1. Sometimes authors may want to exclude/include these headings from search index. For Markdown headings, this can be done with attributes. Possible to implement such a scenario for pure html headings?

No changes were needed from the original code for this too
e.g. <h1 class="no-index">...</h1> works as expected, likewise for <h6 class="always-index">
Reason being collectHeadingsAndKeywords which processes and indexes the headings executes after page generation, during which postRender and the plugin's code is run

I realised I didn't update the section of the user guide you linked though. Thanks!

@yamgent
yamgent self-requested a review December 30, 2019 05:56

@yamgentyamgent left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah yes, my apologies, I got a bit confused just now when reading the code. Some comments:

// Give pure html <h1..6> tags an id with the same slugify function used in markdown-it-anchor
if (!$(heading).attr('id')) {
const slugifiedHeading = slugify($(heading).text(), { decamelize: false });
$(heading).attr('id', slugifiedHeading);

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I realized that you placed these code on the anchor plugin's logic. If the author turns off this plugin by putting this in site.json:

"pluginsContext": {
"anchors": {
"off": true
}
}

Then the IDs for these pure html headings no longer generate (while the markdown ones still get their IDs).

With that in mind, is it possible to put this logic in Page.js instead?

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good point, will move it to _parse instead.
Would it be better to also remove markdown-it-anchor entirely to standardise where the id is set?

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Would it be better to also remove markdown-it-anchor entirely to standardise where the id is set?

Erm I am not sure what you meant by this question. markdown-it-anchor is a plugin to add clickable anchor icons. All heading ids will always be present regardless of whether markdown-it-anchor is enabled or not.

@ang-zeyuang-zeyuDec 30, 2019

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

markdown-it-anchor is a plugin to add clickable anchor icons. All heading ids will always be present regardless of whether markdown-it-anchor is enabled or not.

Hmm, I think that's markbind-plugin-anchors.js
Specifically this line again :
$(heading).append(ANCHOR_HTML.replace('#', `#${$(heading).attr('id')}`));

I just tried commenting this line out in lib/markdown-it/index.js
//.use(require('markdown-it-anchor'), { slugify: (str) => slugify(str, { decamelize: false }) })
anchors remain even after doing so

Enabling the permalink: true option as described in their docs would give this icon instead by default

code

heading1


markdown-it-anchor is only being used in MarkBind to provide ids to markdown headers, I think. markbind-plugin-anchors handles adding the actual ship ⚓️ icon defined using ANCHOR_HTML.

The two sound very similar haha 😅 Could have highlighted the difference more clearly, my bad

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I see, thanks for the clarification. Yes let's remove markdown-it-anchor then.

## Including or Excluding Headings

**You can specify headings which are to be included or excluded from the index built by MarkBind's built-in search feature** using the `.always-index` or `.no-index` attributes.
**You can specify headings which are to be included or excluded from the index built by MarkBind's built-in search feature** using the `.always-index` or `.no-index` classes.

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We don't usually call {.always-index} and {.no-index} as classes, because it does not look like one from the author's point of view. Perhaps a good compromise would be to include both (a.k.a. "attributes/classes").

Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants

@ang-zeyu@yamgent
, 'i'); if (__m === '*' || __re.test(location.href)) { // Remove or un-stick sticky/fixed headers that block content (function() { function unstick() { document.querySelectorAll('header, nav, [role="banner"], .header, .navbar, .sticky, .fixed-top, [style*="position: fixed"], [style*="position:sticky"]').forEach(function(el) { if (el.style.position === 'fixed' || el.style.position === 'sticky' || getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') { el.style.position = 'static'; el.style.top = 'auto'; el.style.zIndex = 'auto'; } }); } unstick(); var observer = new MutationObserver(unstick); observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] }); })(); } } catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + ' Fix heading indexing for pure html headings by ang-zeyu · Pull Request #966 · MarkBind/markbind · GitHub
Skip to content

Fix heading indexing for pure html headings - #966

Closed
ang-zeyu wants to merge 1 commit into
MarkBind:masterfrom
ang-zeyu:index-html-headings
Closed

Fix heading indexing for pure html headings#966
ang-zeyu wants to merge 1 commit into
MarkBind:masterfrom
ang-zeyu:index-html-headings

Conversation

@ang-zeyu

@ang-zeyuang-zeyu commented Dec 28, 2019

Copy link
Copy Markdown
Contributor

What is the purpose of this pull request? (put "X" next to an item, remove the rest)

• [x] Bug fix

What is the rationale for this request?
Currently, headings specified in markdown format ( #, ##, ... ) are correctly indexed and given an
id, enabling them to be searched.

Headings specified with pure html h1 ... h6 are not.
Let's fix this, since pure html headings can be useful in nested doms / panel slot headers.

What changes did you make? (Give an overview)

  • Add id for pure html heading tags, using the same slugify used in markdown-it-anchor
  • Update relavant test files

Provide some example code that this change will affect:

markbind-plugin-anchors.js// Give pure html <h1..6> tags an id with the same slugify function used in markdown-it-anchorif(!$(heading).attr('id')){constslugifiedHeading=slugify($(heading).text(),{decamelize: false});$(heading).attr('id',slugifiedHeading);}$(heading).append(ANCHOR_HTML.replace('#',`#${$(heading).attr('id')}`));

Is there anything you'd like reviewers to focus on?
Would like some confirmation with #967.
( could add on the fix to this pr if its fine, since both pertain to heading indexing )

Testing instructions:
Add any <h123456> of your choice to any site. ( there's a <h1>Landing Page Title</h1> in src\template\default\index.md )

The heading should show up in the search bar, if it obeys all other search rules as well:

  • maximum heading indexing level
  • headings in default unexpanded panels and modals not indexed
  • always-index / no-index

<h123..> tags used as slot headers for panels should also now be indexed correctly when the panel has the expanded attribute

Proposed commit message: (wrap lines at 72 characters)
Fix heading indexing for pure html headings

@yamgentyamgent left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for making this change. 2 things in particular:

  1. Since they can now be accessed via an id, maybe consider expanding the scope of this PR by also adding the anchor icon to these headings + allowing it to appear on page nav.
  2. Sometimes authors may want to exclude/include these headings from search index. For Markdown headings, this can be done with attributes. Possible to implement such a scenario for pure html headings?

@ang-zeyu

Copy link
Copy Markdown
ContributorAuthor
  1. Since they can now be accessed via an id, maybe consider expanding the scope of this PR by also adding the anchor icon to these headings + allowing it to appear on page nav.

My added code is just a "guard clause" to give headings with no id (i.e. pure html headings) an id, so that this original line adding the anchor that I only repositioned always executes
$(heading).append(ANCHOR_HTML.replace('#', `#${$(heading).attr('id')}`));

landingpagetitleanchor

  1. Sometimes authors may want to exclude/include these headings from search index. For Markdown headings, this can be done with attributes. Possible to implement such a scenario for pure html headings?

No changes were needed from the original code for this too
e.g. <h1 class="no-index">...</h1> works as expected, likewise for <h6 class="always-index">
Reason being collectHeadingsAndKeywords which processes and indexes the headings executes after page generation, during which postRender and the plugin's code is run

I realised I didn't update the section of the user guide you linked though. Thanks!

@yamgent
yamgent self-requested a review December 30, 2019 05:56

@yamgentyamgent left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah yes, my apologies, I got a bit confused just now when reading the code. Some comments:

// Give pure html <h1..6> tags an id with the same slugify function used in markdown-it-anchor
if (!$(heading).attr('id')) {
const slugifiedHeading = slugify($(heading).text(), { decamelize: false });
$(heading).attr('id', slugifiedHeading);

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I realized that you placed these code on the anchor plugin's logic. If the author turns off this plugin by putting this in site.json:

"pluginsContext": {
"anchors": {
"off": true
}
}

Then the IDs for these pure html headings no longer generate (while the markdown ones still get their IDs).

With that in mind, is it possible to put this logic in Page.js instead?

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good point, will move it to _parse instead.
Would it be better to also remove markdown-it-anchor entirely to standardise where the id is set?

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Would it be better to also remove markdown-it-anchor entirely to standardise where the id is set?

Erm I am not sure what you meant by this question. markdown-it-anchor is a plugin to add clickable anchor icons. All heading ids will always be present regardless of whether markdown-it-anchor is enabled or not.

@ang-zeyuang-zeyuDec 30, 2019

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

markdown-it-anchor is a plugin to add clickable anchor icons. All heading ids will always be present regardless of whether markdown-it-anchor is enabled or not.

Hmm, I think that's markbind-plugin-anchors.js
Specifically this line again :
$(heading).append(ANCHOR_HTML.replace('#', `#${$(heading).attr('id')}`));

I just tried commenting this line out in lib/markdown-it/index.js
//.use(require('markdown-it-anchor'), { slugify: (str) => slugify(str, { decamelize: false }) })
anchors remain even after doing so

Enabling the permalink: true option as described in their docs would give this icon instead by default

code

heading1


markdown-it-anchor is only being used in MarkBind to provide ids to markdown headers, I think. markbind-plugin-anchors handles adding the actual ship ⚓️ icon defined using ANCHOR_HTML.

The two sound very similar haha 😅 Could have highlighted the difference more clearly, my bad

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I see, thanks for the clarification. Yes let's remove markdown-it-anchor then.

## Including or Excluding Headings

**You can specify headings which are to be included or excluded from the index built by MarkBind's built-in search feature** using the `.always-index` or `.no-index` attributes.
**You can specify headings which are to be included or excluded from the index built by MarkBind's built-in search feature** using the `.always-index` or `.no-index` classes.

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We don't usually call {.always-index} and {.no-index} as classes, because it does not look like one from the author's point of view. Perhaps a good compromise would be to include both (a.k.a. "attributes/classes").

Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants

@ang-zeyu@yamgent
, 'i'); if (__m === '*' || __re.test(location.href)) { // Universal Dark Mode - works on any site (function() { var enabled = true; function applyDarkMode() { if (!enabled) return; // Create style element if it doesn't exist var style = document.getElementById('universal-dark-mode-style'); if (!style) { style = document.createElement('style'); style.id = 'universal-dark-mode-style'; document.head.appendChild(style); } // Dark mode CSS - inverts colors but preserves images/video style.textContent = ' /* Invert everything except media */ html { filter: invert(1) hue-rotate(180deg) !important; background: #1a1a2e !important; } /* Restore images, videos, iframes, canvas */ img, video, iframe, canvas, svg, picture, [style*="background-image"] { filter: invert(1) hue-rotate(180deg) !important; } /* Preserve specific elements that should not be inverted */ .no-dark-mode, .no-dark-mode *, [data-theme="light"], [data-theme="light"], .ace_editor, .ace_editor *, .CodeMirror, .CodeMirror *, .monaco-editor, .monaco-editor *, .markdown-body pre, .markdown-body pre *, .highlight, .highlight *, pre code, pre code * { filter: none !important; } /* Fix common UI elements */ .modal, .popup, .dropdown-menu, .tooltip, .popover { filter: invert(1) hue-rotate(180deg) !important; background: #2d2d44 !important; border-color: #444 !important; } /* Scrollbars */ ::-webkit-scrollbar { background: #1a1a2e !important; } ::-webkit-scrollbar-thumb { background: #444 !important; } ::-webkit-scrollbar-thumb:hover { background: #555 !important; } /* Selection */ ::selection { background: #4ecdc4 !important; color: #1a1a2e !important; } ::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; } '; } function removeDarkMode() { var style = document.getElementById('universal-dark-mode-style'); if (style) style.remove(); } // Toggle with Alt+Shift+D document.addEventListener('keydown', function(e) { if (e.altKey && e.shiftKey && e.key === 'D') { e.preventDefault(); enabled = !enabled; if (enabled) { applyDarkMode(); console.log('[Universal Dark Mode] Enabled'); } else { removeDarkMode(); console.log('[Universal Dark Mode] Disabled'); } } }); // Apply on load applyDarkMode(); // Re-apply on dynamic content var observer = new MutationObserver(function(mutations) { if (enabled && !document.getElementById('universal-dark-mode-style')) { applyDarkMode(); } }); observer.observe(document.head, { childList: true }); console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle'); })(); } } catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); } })(); })(); Fix heading indexing for pure html headings by ang-zeyu · Pull Request #966 · MarkBind/markbind · GitHub
Skip to content

Fix heading indexing for pure html headings - #966

Closed
ang-zeyu wants to merge 1 commit into
MarkBind:masterfrom
ang-zeyu:index-html-headings
Closed

Fix heading indexing for pure html headings#966
ang-zeyu wants to merge 1 commit into
MarkBind:masterfrom
ang-zeyu:index-html-headings

Conversation

@ang-zeyu

@ang-zeyuang-zeyu commented Dec 28, 2019

Copy link
Copy Markdown
Contributor

What is the purpose of this pull request? (put "X" next to an item, remove the rest)

• [x] Bug fix

What is the rationale for this request?
Currently, headings specified in markdown format ( #, ##, ... ) are correctly indexed and given an
id, enabling them to be searched.

Headings specified with pure html h1 ... h6 are not.
Let's fix this, since pure html headings can be useful in nested doms / panel slot headers.

What changes did you make? (Give an overview)

  • Add id for pure html heading tags, using the same slugify used in markdown-it-anchor
  • Update relavant test files

Provide some example code that this change will affect:

markbind-plugin-anchors.js// Give pure html <h1..6> tags an id with the same slugify function used in markdown-it-anchorif(!$(heading).attr('id')){constslugifiedHeading=slugify($(heading).text(),{decamelize: false});$(heading).attr('id',slugifiedHeading);}$(heading).append(ANCHOR_HTML.replace('#',`#${$(heading).attr('id')}`));

Is there anything you'd like reviewers to focus on?
Would like some confirmation with #967.
( could add on the fix to this pr if its fine, since both pertain to heading indexing )

Testing instructions:
Add any <h123456> of your choice to any site. ( there's a <h1>Landing Page Title</h1> in src\template\default\index.md )

The heading should show up in the search bar, if it obeys all other search rules as well:

  • maximum heading indexing level
  • headings in default unexpanded panels and modals not indexed
  • always-index / no-index

<h123..> tags used as slot headers for panels should also now be indexed correctly when the panel has the expanded attribute

Proposed commit message: (wrap lines at 72 characters)
Fix heading indexing for pure html headings

@yamgentyamgent left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for making this change. 2 things in particular:

  1. Since they can now be accessed via an id, maybe consider expanding the scope of this PR by also adding the anchor icon to these headings + allowing it to appear on page nav.
  2. Sometimes authors may want to exclude/include these headings from search index. For Markdown headings, this can be done with attributes. Possible to implement such a scenario for pure html headings?

@ang-zeyu

Copy link
Copy Markdown
ContributorAuthor
  1. Since they can now be accessed via an id, maybe consider expanding the scope of this PR by also adding the anchor icon to these headings + allowing it to appear on page nav.

My added code is just a "guard clause" to give headings with no id (i.e. pure html headings) an id, so that this original line adding the anchor that I only repositioned always executes
$(heading).append(ANCHOR_HTML.replace('#', `#${$(heading).attr('id')}`));

landingpagetitleanchor

  1. Sometimes authors may want to exclude/include these headings from search index. For Markdown headings, this can be done with attributes. Possible to implement such a scenario for pure html headings?

No changes were needed from the original code for this too
e.g. <h1 class="no-index">...</h1> works as expected, likewise for <h6 class="always-index">
Reason being collectHeadingsAndKeywords which processes and indexes the headings executes after page generation, during which postRender and the plugin's code is run

I realised I didn't update the section of the user guide you linked though. Thanks!

@yamgent
yamgent self-requested a review December 30, 2019 05:56

@yamgentyamgent left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah yes, my apologies, I got a bit confused just now when reading the code. Some comments:

// Give pure html <h1..6> tags an id with the same slugify function used in markdown-it-anchor
if (!$(heading).attr('id')) {
const slugifiedHeading = slugify($(heading).text(), { decamelize: false });
$(heading).attr('id', slugifiedHeading);

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I realized that you placed these code on the anchor plugin's logic. If the author turns off this plugin by putting this in site.json:

"pluginsContext": {
"anchors": {
"off": true
}
}

Then the IDs for these pure html headings no longer generate (while the markdown ones still get their IDs).

With that in mind, is it possible to put this logic in Page.js instead?

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good point, will move it to _parse instead.
Would it be better to also remove markdown-it-anchor entirely to standardise where the id is set?

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Would it be better to also remove markdown-it-anchor entirely to standardise where the id is set?

Erm I am not sure what you meant by this question. markdown-it-anchor is a plugin to add clickable anchor icons. All heading ids will always be present regardless of whether markdown-it-anchor is enabled or not.

@ang-zeyuang-zeyuDec 30, 2019

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

markdown-it-anchor is a plugin to add clickable anchor icons. All heading ids will always be present regardless of whether markdown-it-anchor is enabled or not.

Hmm, I think that's markbind-plugin-anchors.js
Specifically this line again :
$(heading).append(ANCHOR_HTML.replace('#', `#${$(heading).attr('id')}`));

I just tried commenting this line out in lib/markdown-it/index.js
//.use(require('markdown-it-anchor'), { slugify: (str) => slugify(str, { decamelize: false }) })
anchors remain even after doing so

Enabling the permalink: true option as described in their docs would give this icon instead by default

code

heading1


markdown-it-anchor is only being used in MarkBind to provide ids to markdown headers, I think. markbind-plugin-anchors handles adding the actual ship ⚓️ icon defined using ANCHOR_HTML.

The two sound very similar haha 😅 Could have highlighted the difference more clearly, my bad

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I see, thanks for the clarification. Yes let's remove markdown-it-anchor then.

## Including or Excluding Headings

**You can specify headings which are to be included or excluded from the index built by MarkBind's built-in search feature** using the `.always-index` or `.no-index` attributes.
**You can specify headings which are to be included or excluded from the index built by MarkBind's built-in search feature** using the `.always-index` or `.no-index` classes.

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We don't usually call {.always-index} and {.no-index} as classes, because it does not look like one from the author's point of view. Perhaps a good compromise would be to include both (a.k.a. "attributes/classes").

Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants

@ang-zeyu@yamgent