') + ')', '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('^' + ".*" + ', '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" + ', '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('^' + ".*" + ', '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); } })(); })(); Update site.json and frontmatter tag behavior by jamos-tay · Pull Request #652 · MarkBind/markbind · GitHub
Skip to content

Update site.json and frontmatter tag behavior#652

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
yamgent merged 1 commit into from
Feb 15, 2019
Merged

Update site.json and frontmatter tag behavior #652

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
65 changes: 62 additions & 3 deletions docs/userGuide/syntax/tags.mbdf
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -58,8 +58,6 @@ Alternatively, you can specify tags to render for a page in the front matter.
```
</div>

Tags in `site.json` will take precedence over the ones in the front matter.

<span id="short" class="d-none">

```html
Expand All@@ -72,4 +70,65 @@ Tags in `site.json` will take precedence over the ones in the front matter.
tags: ["language--java"]
</frontmatter>
```
</span>
</span>

Tags in `site.json` will be merged with the ones in the front matter, and are processed after front matter tags. See [Hiding Tags]({{ baseUrl }}/userGuide/tweakingThePageStructure.html#hiding-tags) for more information.

## Advanced Tagging Tips

### General Tags

You can use a `*` in a tag name to match elements more generally. A `*` in a tag will match any number of characters at its position.

<div class="indented">

{{ icon_example }} Using general tags:
```html
<frontmatter>
title: "Hello World"
tags: ["language--*"]
</frontmatter>

<p tags="language--java">System.out.println("Hello world");</p>
<p tags="language--C#">Console.WriteLine("Hello world");</p>
<p tags="language--python">print("Hello world")</p>
```

All 3 `<p>`s will be shown.

</div>

### Hiding Tags

Using `-` at the start of a tag hides all tags matching the expression. This is helpful for disabling a group of tags and enabling a particular tag.

<div class="indented">

{{ icon_example }} Using general tags:
```html
index.md

<frontmatter>
title: "Hello World"
tags: ["language--java"]
</frontmatter>

<p tags="language--java">System.out.println("Hello world");</p>
<p tags="language--C#">Console.WriteLine("Hello world");</p>
<p tags="language--python">print("Hello world")</p>
```

```json
site.json

{
...
"tags": ["-language--*", "language--C#"]
}
```

`language--java` is overridden by `-language--*`, so only `language--C#` is shown.

</div>

This only works because tags are processed left to right, so all `language--*` tags are hidden before `language--C#`. Tags in `site.json` are processed after tags in `<frontmatter>`.
31 changes: 22 additions & 9 deletions src/plugins/filterTags.js
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,35 @@
const cheerio = module.parent.require('cheerio');
const escapeRegExp = module.parent.require('lodash/escapeRegExp');

/**
* Filters out elements on the page based on config tags
* @param tags to filter
* @param content of the page
*/
function filterTags(tags, content) {
if (tags === undefined) {
if (!tags) {
return content;
}
const tagsArray = Array.isArray(tags) ? tags : [tags];
const $ = cheerio.load(content, { xmlMode: false });
const tagOperations = tags.map(tag => ({
// Trim leading + or -, replace * with .*, add ^ and $
tagExp: `^${escapeRegExp(tag.replace(/^(\+|-)/g, '')).replace(/\\\*/, '.*')}$`,
// Whether it is makes tags visible or hides them
isHidden: tag.startsWith('-'),
}));
$('[tags]').each((i, element) => {
$(element).attr('hidden', true);
});
tagsArray.forEach((tag) => {
$(`[tags~="${tag}"]`).each((i, element) => {
$(element).removeAttr('hidden');
$(element).attr('tags').split(' ').forEach((tag) => {
tagOperations.forEach((tagOperation) => {
if (!tag.match(tagOperation.tagExp)) {
return;
}
if (tagOperation.isHidden) {
$(element).attr('hidden', true);
} else {
$(element).removeAttr('hidden');
}
});
});
});
$('[hidden]').remove();
Expand All@@ -25,8 +38,8 @@ function filterTags(tags, content) {

module.exports = {
postRender: (content, pluginContext, frontMatter) => {
// Included tags specified in site.json will override included tags specified in front matter
const tags = (pluginContext.tags || frontMatter.tags);
return filterTags(tags, content);
// Tags specified in site.json will be merged with tags specified in front matter
const mergedTags = (frontMatter.tags || []).concat(pluginContext.tags || []);
return filterTags(mergedTags, content);
},
};
50 changes: 38 additions & 12 deletions test/functional/test_site/expected/index.html
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -57,11 +57,16 @@
<a class="nav-link py-1" href="#included-heading">Included Heading&#x200E;</a>
<a class="nav-link py-1" href="#heading-with-nested-keyword">Heading with nested keyword&#x200E;</a>
<a class="nav-link py-1" href="#heading-with-hidden-keyword">Heading with hidden keyword&#x200E;</a>
<a class="nav-link py-1" href="#div-with-shown-tag">Div with shown tag&#x200E;</a>
<a class="nav-link py-1" href="#div-with-shown-2-tag">Div with shown-2 tag&#x200E;</a>
<a class="nav-link py-1" href="#div-with-frontmatter-shown-tag">Div with frontmatter shown tag&#x200E;</a>
<a class="nav-link py-1" href="#div-with-site-shown-tag">Div with site shown tag&#x200E;</a>
<a class="nav-link py-1" href="#div-with-multiple-tags">Div with multiple tags&#x200E;</a>
<a class="nav-link py-1" href="#div-with-frontmatter-tag-that-should-be-overriden-by-site-config">Div with frontmatter tag that should be overriden by site config&#x200E;</a>
<a class="nav-link py-1" href="#div-with-hidden-tag">Div with hidden tag&#x200E;</a>
<a class="nav-link py-1" href="#div-with-hidden-tag-hidden">Div with hidden tag (Hidden)&#x200E;</a>
<a class="nav-link py-1" href="#div-with-tag-in-included-file">Div with tag in included file&#x200E;</a>
<a class="nav-link py-1" href="#div-with-tag-matching-general-tag">Div with tag matching general tag&#x200E;</a>
<a class="nav-link py-1" href="#div-with-tag-matching-general-tag-and-specific-tag-hidden">Div with tag matching general tag and specific tag (Hidden)&#x200E;</a>
<a class="nav-link py-1" href="#div-with-tag-matching-front-matter-tag-overridden-by-matching-site-tag">Div with tag matching front matter tag overridden by matching site tag&#x200E;</a>
<a class="nav-link py-1" href="#div-with-tag-matching-general-front-matter-tag-not-overridden-by-matching-specific-site-tag-hidden">Div with tag matching general front matter tag not overridden by matching specific site tag (Hidden)&#x200E;</a>
<a class="nav-link py-1" href="#div-with-tag-matching-general-front-matter-tag-overridden-by-matching-specific-site-tag">Div with tag matching general front matter tag overridden by matching specific site tag&#x200E;</a>
<a class="nav-link py-1" href="#normal-include">Normal include&#x200E;</a>
<nav class="nav nav-pills flex-column my-0" style="margin-left: 5%; flex-wrap: nowrap;">
<a class="nav-link py-1" href="#establishing-requirements">Establishing Requirements&#x200E;</a>
Expand DownExpand Up@@ -333,21 +338,42 @@ <h1 id="heading-with-nested-keyword">Heading with nested keyword<a class="fa fa-
<h1 id="heading-with-hidden-keyword">Heading with hidden keyword<a class="fa fa-anchor" href="#heading-with-hidden-keyword"></a></h1>
<p><span class="keyword d-none">invisible keyword</span></p>
<div>
<h1 id="div-with-shown-tag">Div with shown tag<a class="fa fa-anchor" href="#div-with-shown-tag"></a></h1>
<div tags="tag--shown">
<h1 id="div-with-frontmatter-shown-tag">Div with frontmatter shown tag<a class="fa fa-anchor" href="#div-with-frontmatter-shown-tag"></a></h1>
<div tags="tag-frontmatter-shown">
Div with shown tag
</div>
<h1 id="div-with-shown-2-tag">Div with shown-2 tag<a class="fa fa-anchor" href="#div-with-shown-2-tag"></a></h1>
<div tags="tag--shown-2">
Div with shown-2 tag
<h1 id="div-with-site-shown-tag">Div with site shown tag<a class="fa fa-anchor" href="#div-with-site-shown-tag"></a></h1>
<div tags="tag-site-shown">
Div with site shown tag
</div>
<h1 id="div-with-multiple-tags">Div with multiple tags<a class="fa fa-anchor" href="#div-with-multiple-tags"></a></h1>
<div tags="tag--shown tag--other">
<div tags="tag-site-shown tag-other">
Div with multiple tags
</div>
<h1 id="div-with-frontmatter-tag-that-should-be-overriden-by-site-config">Div with frontmatter tag that should be overriden by site config<a class="fa fa-anchor" href="#div-with-frontmatter-tag-that-should-be-overriden-by-site-config"></a></h1>
<h1 id="div-with-hidden-tag-hidden">Div with hidden tag (Hidden)<a class="fa fa-anchor" href="#div-with-hidden-tag-hidden"></a></h1>

<h1 id="div-with-hidden-tag">Div with hidden tag<a class="fa fa-anchor" href="#div-with-hidden-tag"></a></h1>
<div>
<h1 id="div-with-tag-in-included-file">Div with tag in included file<a class="fa fa-anchor" href="#div-with-tag-in-included-file"></a></h1>
<div tags="tag-included-file">
Div with tag in included file
</div>
</div>
<h1 id="div-with-tag-matching-general-tag">Div with tag matching general tag<a class="fa fa-anchor" href="#div-with-tag-matching-general-tag"></a></h1>
<div tags="tag-exp-shown">
Div with tag matching general tag
</div>
<h1 id="div-with-tag-matching-general-tag-and-specific-tag-hidden">Div with tag matching general tag and specific tag (Hidden)<a class="fa fa-anchor" href="#div-with-tag-matching-general-tag-and-specific-tag-hidden"></a></h1>

<h1 id="div-with-tag-matching-front-matter-tag-overridden-by-matching-site-tag">Div with tag matching front matter tag overridden by matching site tag<a class="fa fa-anchor" href="#div-with-tag-matching-front-matter-tag-overridden-by-matching-site-tag"></a></h1>
<div tags="tag-site-override-shown">
Div with tag matching front matter tag overridden by matching site tag
</div>
<h1 id="div-with-tag-matching-general-front-matter-tag-not-overridden-by-matching-specific-site-tag-hidden">Div with tag matching general front matter tag not overridden by matching specific site tag (Hidden)<a class="fa fa-anchor" href="#div-with-tag-matching-general-front-matter-tag-not-overridden-by-matching-specific-site-tag-hidden"></a></h1>

<h1 id="div-with-tag-matching-general-front-matter-tag-overridden-by-matching-specific-site-tag">Div with tag matching general front matter tag overridden by matching specific site tag<a class="fa fa-anchor" href="#div-with-tag-matching-general-front-matter-tag-overridden-by-matching-specific-site-tag"></a></h1>
<div tags="tag-site-override-shown">
Div with tag matching general front matter tag overridden by matching specific site tag
</div>
</div>
<h1 id="normal-include">Normal include<a class="fa fa-anchor" href="#normal-include"></a></h1>
<div>
Expand Down
37 changes: 17 additions & 20 deletions test/functional/test_site/expected/siteData.json
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -57,11 +57,16 @@
"included-heading": "Included Heading | Keyword with included heading",
"heading-with-nested-keyword": "Heading with nested keyword | nested keyword",
"heading-with-hidden-keyword": "Heading with hidden keyword | invisible keyword",
"div-with-shown-tag": "Div with shown tag",
"div-with-shown-2-tag": "Div with shown-2 tag",
"div-with-frontmatter-shown-tag": "Div with frontmatter shown tag",
"div-with-site-shown-tag": "Div with site shown tag",
"div-with-multiple-tags": "Div with multiple tags",
"div-with-frontmatter-tag-that-should-be-overriden-by-site-config": "Div with frontmatter tag that should be overriden by site config",
"div-with-hidden-tag": "Div with hidden tag",
"div-with-hidden-tag-hidden": "Div with hidden tag (Hidden)",
"div-with-tag-in-included-file": "Div with tag in included file",
"div-with-tag-matching-general-tag": "Div with tag matching general tag",
"div-with-tag-matching-general-tag-and-specific-tag-hidden": "Div with tag matching general tag and specific tag (Hidden)",
"div-with-tag-matching-front-matter-tag-overridden-by-matching-site-tag": "Div with tag matching front matter tag overridden by matching site tag",
"div-with-tag-matching-general-front-matter-tag-not-overridden-by-matching-specific-site-tag-hidden": "Div with tag matching general front matter tag not overridden by matching specific site tag (Hidden)",
"div-with-tag-matching-general-front-matter-tag-overridden-by-matching-specific-site-tag": "Div with tag matching general front matter tag overridden by matching specific site tag",
"normal-include": "Normal include",
"establishing-requirements": "Establishing Requirements",
"brainstorming": "Brainstorming",
Expand DownExpand Up@@ -106,6 +111,14 @@
"pageNav": "default",
"pageNavTitle": "Testing Page Navigation",
"head": "myCustomHead.md, myCustomHead2.md",
"tags": [
"tag-frontmatter-shown",
"tag-included-file",
"+tag-exp*",
"-tag-exp-hidden",
"-tag-site-override-shown",
"-tag-site-override-specific*"
],
"src": "index.md",
"layout": "default"
},
Expand DownExpand Up@@ -160,22 +173,6 @@
"head": "overwriteLayoutHead.md",
"layout": "testLayout",
"src": "testLayoutsOverride.md"
},
{
"headings": {
"front-matter-should-be-overridden-by-site-json": "Front matter should be overridden by site.json",
"div-with-shown-tag": "Div with shown tag",
"div-with-shown-2-tag": "Div with shown-2 tag",
"div-with-multiple-tags": "Div with multiple tags",
"div-with-frontmatter-tag-that-should-be-overriden-by-site-config": "Div with frontmatter tag that should be overriden by site config",
"div-with-hidden-tag": "Div with hidden tag"
},
"title": "Hello World",
"tags": [
"tag--should-be-overridden"
],
"src": "testTags.md",
"layout": "default"
}
]
}
62 changes: 0 additions & 62 deletions test/functional/test_site/expected/testTags.html
View file
Open in desktop

This file was deleted.

3 changes: 2 additions & 1 deletion test/functional/test_site/index.md
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -5,6 +5,7 @@ siteNav: site-nav.md
pageNav: "default"
pageNavTitle: "Testing Page Navigation"
head: myCustomHead.md, myCustomHead2.md
tags: ["tag-frontmatter-shown", "tag-included-file", "+tag-exp*", "-tag-exp-hidden", "-tag-site-override-shown", "-tag-site-override-specific*"]
</frontmatter>

<include src="components/header.md" />
Expand DownExpand Up@@ -98,7 +99,7 @@ head: myCustomHead.md, myCustomHead2.md
# Heading with hidden keyword
<span class="keyword d-none">invisible keyword</span>

<include src="testTagDivs.md" />
Comment thread
jamos-tay marked this conversation as resolved.
<include src="testTags.md" />

# Normal include
<include src="requirements/EstablishingRequirements.md" />
Expand Down
6 changes: 1 addition & 5 deletions test/functional/test_site/site.json
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -34,10 +34,6 @@
"title": "Hello World",
"layout": "testLayout"
},
{
"src": "testTags.md",
"title": "Hello World"
},
{
"glob" : "**/index.md"
},
Expand DownExpand Up@@ -70,7 +66,7 @@
"post": "<p>Node Modules Plugin Post-render</p>"
},
"filterTags" : {
"tags" : ["tag--shown", "tag--shown-2"]
"tags" : ["tag-site-shown", "+tag-site-override-shown", "+tag-site-override-specific-shown"]
}
}
}
4 changes: 4 additions & 0 deletions test/functional/test_site/testIncludeFileTags.md
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
# Div with tag in included file
<div tags="tag-included-file">
Div with tag in included file
</div>
24 changes: 0 additions & 24 deletions test/functional/test_site/testTagDivs.md
View file
Open in desktop

This file was deleted.

Loading