Fix site-nav.css not being added when layout contains site nav - #841

Merged
yamgent merged 1 commit into
MarkBind:masterfrom
marvinchin:fix-layout-site-nav
Apr 18, 2019
Merged

Fix site-nav.css not being added when layout contains site nav#841
yamgent merged 1 commit into
MarkBind:masterfrom
marvinchin:fix-layout-site-nav

Conversation

@marvinchin

@marvinchinmarvinchin commented Apr 15, 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

Fixes#528.

What is the rationale for this request?

When a page has a site nav specified in the layout, but not in the frontmatter, the site-nav.css file is not added to the site. This causes the styling of the side nav to break.

What changes did you make? (Give an overview)

  • Abstract method to get the path to the site nav file from insertSiteNav
  • Use abstracted method getSiteNavPath to check if a site nav is specified in either layout or frontmatter when preparing template data

Is there anything you'd like reviewers to focus on?

By default, the default layout contains a blank navigation.md file. The site-nav.css file is thus added even though the navigation.md file is empty - is this behaviour okay?

After updating the logic to use a flag instead, we are able to avoid this issue as we only update the flag after checking that the file is not empty.

Testing instructions:

See instructions in #739. The site nav should be styled correctly.

Proposed commit message: (wrap lines at 72 characters)

When passing data to the page template, the siteNav variable only checks
for the existence of the site nav specified in the frontmatter. The
site-nav.css file is thus only added when the site nav is specified in
the frontmatter.

When a page has a layout with a site nav, but no site nav is specified
in the frontmatter, the site-nav.css file is not added, which causes the
styling of the site nav to break.

Let's update the logic when forming template data to check for the
existence of a site nav in the template when determining the value of
the siteNav variable.

@Chng-Zhi-Xuan
Chng-Zhi-Xuan self-requested a review April 15, 2019 06:50
@Chng-Zhi-Xuan

Chng-Zhi-Xuan commented Apr 15, 2019

Copy link
Copy Markdown
Contributor

I briefly looked through, here are some comments

By default, the default layout contains a blank navigation.md file. The site-nav.css file is thus added even though the navigation.md file is empty - is this behaviour okay?

In my opinion, if the user has a navigation.md file in the layouts, we should expect that the user intends to use the site-nav. Although we can make it more user friendly by using a better initial template rather than a blank file.

We might also want to insert notes / tips into the Layouts section to inform users to delete certain files if you do not want to use them.

Implementation comments

  • Your implementation would require 2 calls to this.getSiteNavPath() when generating a page. One during insertSiteNav and another at prepareTemplateData.

To streamline this, would it be better if you change a global boolean variable after this.getSiteNavPath() is called, then use the same variable for the siteNav value within prepareTemplateData ?

This will only require you to call this.getSitenavPath() once, removing some overhead.

@marvinchin

Copy link
Copy Markdown
ContributorAuthor

Thanks for pointing that out!

I was trying to avoid the use of a global flag because it introduces some coupling between places that modify the flag, and those that read it (in this case, between insertSiteNav and prepareTemplateData).

As getSiteNavPath involves a (comparatively more costly) fs operation, and I don't forsee any other places where the flag would be modified, it might be more efficient to use a global flag as you suggested. I'll make the changes in a bit! 🙂

@marvinchin

Copy link
Copy Markdown
ContributorAuthor

By default, the default layout contains a blank navigation.md file. The site-nav.css file is thus added even though the navigation.md file is empty - is this behaviour okay?

After updating the logic to use a flag instead, we are able to avoid this issue as we only update the flag after checking that the file is not empty.

@yamgentyamgent modified the milestones: v2.2.0, v2.2.1Apr 15, 2019

@Chng-Zhi-XuanChng-Zhi-Xuan left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

After updating the logic to use a flag instead, we are able to avoid this issue as we only update the flag after checking that the file is not empty.

👍 , just have a few comments below.

Comment threadsrc/Page.js
if (siteNavContent === '') {
return pageData;
}
this.hasSiteNav = true;

@Chng-Zhi-XuanChng-Zhi-XuanApr 16, 2019

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Since you only modify the flag to be true at this point. If you delete the navigation.md (Or blank the contents) from the layouts folder, the site-nav will still appear in the markbind serve preview. Even though MarkBind correctly detected navigation.md has changed.

The only correct behaviour in this code is changing navigation.md slightly and the changes will reflect in the markbind serve preview.

Suggestion
Explicitly set the flag to false in the if statements above for it to be properly removed when navigation.md is deleted / blanked in preview mode.

Comment threadsrc/Page.js Outdated
this.navigableHeadings = {};
this.pageSectionsHtml = {};

// flag to indicate whether this page has a site nav

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

A quick search shows majority of inline comments have capitalised starting character (although not all).

@yamgentyamgent removed this from the v2.2.1 milestone Apr 16, 2019
When passing data to the page template, the siteNav variable only checks
for the existence of the site nav specified in the frontmatter. The
site-nav.css file is thus only added when the site nav is specified in
the frontmatter.
When a page has a layout with a site nav, but no site nav is specified
in the frontmatter, the site-nav.css file is not added, which causes the
styling of the site nav to break.
Let's update the logic when forming template data to check for the
existence of a site nav in the template when determining the value of
the siteNav variable.
@marvinchin

Copy link
Copy Markdown
ContributorAuthor

@Chng-Zhi-Xuan I've made the requested changes!

@Chng-Zhi-XuanChng-Zhi-Xuan left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

LGTM 👍

@yamgentyamgent added this to the v2.2.1 milestone Apr 17, 2019
@yamgent
yamgent merged commit d65e347 into MarkBind:masterApr 18, 2019
@damithc

Copy link
Copy Markdown
Contributor

Seems to be working. Good work!

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.

Specifying layouts in a Page's front matter do not insert required CSS files for site navigation

4 participants

@marvinchin@Chng-Zhi-Xuan@damithc@yamgent
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Add copy buttons to all
 blocks\n(function() {\n function addCopyButtons() {\n document.querySelectorAll('pre code').forEach(function(codeBlock) {\n if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;\n codeBlock.parentElement.setAttribute('data-copy-added', 'true');\n \n var btn = document.createElement('button');\n btn.textContent = 'Copy';\n 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;';\n btn.onmouseover = function() { this.style.opacity = '1'; };\n btn.onmouseout = function() { this.style.opacity = '0.7'; };\n btn.onclick = function() {\n navigator.clipboard.writeText(codeBlock.textContent).then(function() {\n btn.textContent = 'Copied!';\n setTimeout(function() { btn.textContent = 'Copy'; }, 1500);\n });\n };\n codeBlock.parentElement.style.position = 'relative';\n codeBlock.parentElement.appendChild(btn);\n });\n }\n \n addCopyButtons();\n \n // Re-run on dynamic content\n var observer = new MutationObserver(addCopyButtons);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Add Copy Buttons to Code Blocks");
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '
Skip to content

Fix site-nav.css not being added when layout contains site nav - #841

Merged
yamgent merged 1 commit into
MarkBind:masterfrom
marvinchin:fix-layout-site-nav
Apr 18, 2019
Merged

Fix site-nav.css not being added when layout contains site nav#841
yamgent merged 1 commit into
MarkBind:masterfrom
marvinchin:fix-layout-site-nav

Conversation

@marvinchin

@marvinchinmarvinchin commented Apr 15, 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

Fixes#528.

What is the rationale for this request?

When a page has a site nav specified in the layout, but not in the frontmatter, the site-nav.css file is not added to the site. This causes the styling of the side nav to break.

What changes did you make? (Give an overview)

  • Abstract method to get the path to the site nav file from insertSiteNav
  • Use abstracted method getSiteNavPath to check if a site nav is specified in either layout or frontmatter when preparing template data

Is there anything you'd like reviewers to focus on?

By default, the default layout contains a blank navigation.md file. The site-nav.css file is thus added even though the navigation.md file is empty - is this behaviour okay?

After updating the logic to use a flag instead, we are able to avoid this issue as we only update the flag after checking that the file is not empty.

Testing instructions:

See instructions in #739. The site nav should be styled correctly.

Proposed commit message: (wrap lines at 72 characters)

When passing data to the page template, the siteNav variable only checks
for the existence of the site nav specified in the frontmatter. The
site-nav.css file is thus only added when the site nav is specified in
the frontmatter.

When a page has a layout with a site nav, but no site nav is specified
in the frontmatter, the site-nav.css file is not added, which causes the
styling of the site nav to break.

Let's update the logic when forming template data to check for the
existence of a site nav in the template when determining the value of
the siteNav variable.

@Chng-Zhi-Xuan
Chng-Zhi-Xuan self-requested a review April 15, 2019 06:50
@Chng-Zhi-Xuan

Chng-Zhi-Xuan commented Apr 15, 2019

Copy link
Copy Markdown
Contributor

I briefly looked through, here are some comments

By default, the default layout contains a blank navigation.md file. The site-nav.css file is thus added even though the navigation.md file is empty - is this behaviour okay?

In my opinion, if the user has a navigation.md file in the layouts, we should expect that the user intends to use the site-nav. Although we can make it more user friendly by using a better initial template rather than a blank file.

We might also want to insert notes / tips into the Layouts section to inform users to delete certain files if you do not want to use them.

Implementation comments

  • Your implementation would require 2 calls to this.getSiteNavPath() when generating a page. One during insertSiteNav and another at prepareTemplateData.

To streamline this, would it be better if you change a global boolean variable after this.getSiteNavPath() is called, then use the same variable for the siteNav value within prepareTemplateData ?

This will only require you to call this.getSitenavPath() once, removing some overhead.

@marvinchin

Copy link
Copy Markdown
ContributorAuthor

Thanks for pointing that out!

I was trying to avoid the use of a global flag because it introduces some coupling between places that modify the flag, and those that read it (in this case, between insertSiteNav and prepareTemplateData).

As getSiteNavPath involves a (comparatively more costly) fs operation, and I don't forsee any other places where the flag would be modified, it might be more efficient to use a global flag as you suggested. I'll make the changes in a bit! 🙂

@marvinchin

Copy link
Copy Markdown
ContributorAuthor

By default, the default layout contains a blank navigation.md file. The site-nav.css file is thus added even though the navigation.md file is empty - is this behaviour okay?

After updating the logic to use a flag instead, we are able to avoid this issue as we only update the flag after checking that the file is not empty.

@yamgentyamgent modified the milestones: v2.2.0, v2.2.1Apr 15, 2019

@Chng-Zhi-XuanChng-Zhi-Xuan left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

After updating the logic to use a flag instead, we are able to avoid this issue as we only update the flag after checking that the file is not empty.

👍 , just have a few comments below.

Comment threadsrc/Page.js
if (siteNavContent === '') {
return pageData;
}
this.hasSiteNav = true;

@Chng-Zhi-XuanChng-Zhi-XuanApr 16, 2019

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Since you only modify the flag to be true at this point. If you delete the navigation.md (Or blank the contents) from the layouts folder, the site-nav will still appear in the markbind serve preview. Even though MarkBind correctly detected navigation.md has changed.

The only correct behaviour in this code is changing navigation.md slightly and the changes will reflect in the markbind serve preview.

Suggestion
Explicitly set the flag to false in the if statements above for it to be properly removed when navigation.md is deleted / blanked in preview mode.

Comment threadsrc/Page.js Outdated
this.navigableHeadings = {};
this.pageSectionsHtml = {};

// flag to indicate whether this page has a site nav

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

A quick search shows majority of inline comments have capitalised starting character (although not all).

@yamgentyamgent removed this from the v2.2.1 milestone Apr 16, 2019
When passing data to the page template, the siteNav variable only checks
for the existence of the site nav specified in the frontmatter. The
site-nav.css file is thus only added when the site nav is specified in
the frontmatter.
When a page has a layout with a site nav, but no site nav is specified
in the frontmatter, the site-nav.css file is not added, which causes the
styling of the site nav to break.
Let's update the logic when forming template data to check for the
existence of a site nav in the template when determining the value of
the siteNav variable.
@marvinchin

Copy link
Copy Markdown
ContributorAuthor

@Chng-Zhi-Xuan I've made the requested changes!

@Chng-Zhi-XuanChng-Zhi-Xuan left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

LGTM 👍

@yamgentyamgent added this to the v2.2.1 milestone Apr 17, 2019
@yamgent
yamgent merged commit d65e347 into MarkBind:masterApr 18, 2019
@damithc

Copy link
Copy Markdown
Contributor

Seems to be working. Good work!

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.

Specifying layouts in a Page's front matter do not insert required CSS files for site navigation

4 participants

@marvinchin@Chng-Zhi-Xuan@damithc@yamgent
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Force GitHub README to respect dark mode\n(function() {\n var style = document.createElement('style');\n style.textContent = '\n .markdown-body {\n color-scheme: dark light;\n }\n .markdown-body pre { background: #161b22 !important; }\n .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }\n .markdown-body table th, .markdown-body table td { border-color: #30363d !important; }\n .markdown-body img { background: #0d1117; }\n .markdown-body blockquote { border-left-color: #8b949e; }\n .markdown-body hr { border-color: #30363d; }\n ';\n document.head.appendChild(style);\n})();", "GitHub Dark Mode README Fix"); } } catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
Skip to content

Fix site-nav.css not being added when layout contains site nav - #841

Merged
yamgent merged 1 commit into
MarkBind:masterfrom
marvinchin:fix-layout-site-nav
Apr 18, 2019
Merged

Fix site-nav.css not being added when layout contains site nav#841
yamgent merged 1 commit into
MarkBind:masterfrom
marvinchin:fix-layout-site-nav

Conversation

@marvinchin

@marvinchinmarvinchin commented Apr 15, 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

Fixes#528.

What is the rationale for this request?

When a page has a site nav specified in the layout, but not in the frontmatter, the site-nav.css file is not added to the site. This causes the styling of the side nav to break.

What changes did you make? (Give an overview)

  • Abstract method to get the path to the site nav file from insertSiteNav
  • Use abstracted method getSiteNavPath to check if a site nav is specified in either layout or frontmatter when preparing template data

Is there anything you'd like reviewers to focus on?

By default, the default layout contains a blank navigation.md file. The site-nav.css file is thus added even though the navigation.md file is empty - is this behaviour okay?

After updating the logic to use a flag instead, we are able to avoid this issue as we only update the flag after checking that the file is not empty.

Testing instructions:

See instructions in #739. The site nav should be styled correctly.

Proposed commit message: (wrap lines at 72 characters)

When passing data to the page template, the siteNav variable only checks
for the existence of the site nav specified in the frontmatter. The
site-nav.css file is thus only added when the site nav is specified in
the frontmatter.

When a page has a layout with a site nav, but no site nav is specified
in the frontmatter, the site-nav.css file is not added, which causes the
styling of the site nav to break.

Let's update the logic when forming template data to check for the
existence of a site nav in the template when determining the value of
the siteNav variable.

@Chng-Zhi-Xuan
Chng-Zhi-Xuan self-requested a review April 15, 2019 06:50
@Chng-Zhi-Xuan

Chng-Zhi-Xuan commented Apr 15, 2019

Copy link
Copy Markdown
Contributor

I briefly looked through, here are some comments

By default, the default layout contains a blank navigation.md file. The site-nav.css file is thus added even though the navigation.md file is empty - is this behaviour okay?

In my opinion, if the user has a navigation.md file in the layouts, we should expect that the user intends to use the site-nav. Although we can make it more user friendly by using a better initial template rather than a blank file.

We might also want to insert notes / tips into the Layouts section to inform users to delete certain files if you do not want to use them.

Implementation comments

  • Your implementation would require 2 calls to this.getSiteNavPath() when generating a page. One during insertSiteNav and another at prepareTemplateData.

To streamline this, would it be better if you change a global boolean variable after this.getSiteNavPath() is called, then use the same variable for the siteNav value within prepareTemplateData ?

This will only require you to call this.getSitenavPath() once, removing some overhead.

@marvinchin

Copy link
Copy Markdown
ContributorAuthor

Thanks for pointing that out!

I was trying to avoid the use of a global flag because it introduces some coupling between places that modify the flag, and those that read it (in this case, between insertSiteNav and prepareTemplateData).

As getSiteNavPath involves a (comparatively more costly) fs operation, and I don't forsee any other places where the flag would be modified, it might be more efficient to use a global flag as you suggested. I'll make the changes in a bit! 🙂

@marvinchin

Copy link
Copy Markdown
ContributorAuthor

By default, the default layout contains a blank navigation.md file. The site-nav.css file is thus added even though the navigation.md file is empty - is this behaviour okay?

After updating the logic to use a flag instead, we are able to avoid this issue as we only update the flag after checking that the file is not empty.

@yamgentyamgent modified the milestones: v2.2.0, v2.2.1Apr 15, 2019

@Chng-Zhi-XuanChng-Zhi-Xuan left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

After updating the logic to use a flag instead, we are able to avoid this issue as we only update the flag after checking that the file is not empty.

👍 , just have a few comments below.

Comment threadsrc/Page.js
if (siteNavContent === '') {
return pageData;
}
this.hasSiteNav = true;

@Chng-Zhi-XuanChng-Zhi-XuanApr 16, 2019

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Since you only modify the flag to be true at this point. If you delete the navigation.md (Or blank the contents) from the layouts folder, the site-nav will still appear in the markbind serve preview. Even though MarkBind correctly detected navigation.md has changed.

The only correct behaviour in this code is changing navigation.md slightly and the changes will reflect in the markbind serve preview.

Suggestion
Explicitly set the flag to false in the if statements above for it to be properly removed when navigation.md is deleted / blanked in preview mode.

Comment threadsrc/Page.js Outdated
this.navigableHeadings = {};
this.pageSectionsHtml = {};

// flag to indicate whether this page has a site nav

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

A quick search shows majority of inline comments have capitalised starting character (although not all).

@yamgentyamgent removed this from the v2.2.1 milestone Apr 16, 2019
When passing data to the page template, the siteNav variable only checks
for the existence of the site nav specified in the frontmatter. The
site-nav.css file is thus only added when the site nav is specified in
the frontmatter.
When a page has a layout with a site nav, but no site nav is specified
in the frontmatter, the site-nav.css file is not added, which causes the
styling of the site nav to break.
Let's update the logic when forming template data to check for the
existence of a site nav in the template when determining the value of
the siteNav variable.
@marvinchin

Copy link
Copy Markdown
ContributorAuthor

@Chng-Zhi-Xuan I've made the requested changes!

@Chng-Zhi-XuanChng-Zhi-Xuan left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

LGTM 👍

@yamgentyamgent added this to the v2.2.1 milestone Apr 17, 2019
@yamgent
yamgent merged commit d65e347 into MarkBind:masterApr 18, 2019
@damithc

Copy link
Copy Markdown
Contributor

Seems to be working. Good work!

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.

Specifying layouts in a Page's front matter do not insert required CSS files for site navigation

4 participants

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

Fix site-nav.css not being added when layout contains site nav - #841

Merged
yamgent merged 1 commit into
MarkBind:masterfrom
marvinchin:fix-layout-site-nav
Apr 18, 2019
Merged

Fix site-nav.css not being added when layout contains site nav#841
yamgent merged 1 commit into
MarkBind:masterfrom
marvinchin:fix-layout-site-nav

Conversation

@marvinchin

@marvinchinmarvinchin commented Apr 15, 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

Fixes#528.

What is the rationale for this request?

When a page has a site nav specified in the layout, but not in the frontmatter, the site-nav.css file is not added to the site. This causes the styling of the side nav to break.

What changes did you make? (Give an overview)

  • Abstract method to get the path to the site nav file from insertSiteNav
  • Use abstracted method getSiteNavPath to check if a site nav is specified in either layout or frontmatter when preparing template data

Is there anything you'd like reviewers to focus on?

By default, the default layout contains a blank navigation.md file. The site-nav.css file is thus added even though the navigation.md file is empty - is this behaviour okay?

After updating the logic to use a flag instead, we are able to avoid this issue as we only update the flag after checking that the file is not empty.

Testing instructions:

See instructions in #739. The site nav should be styled correctly.

Proposed commit message: (wrap lines at 72 characters)

When passing data to the page template, the siteNav variable only checks
for the existence of the site nav specified in the frontmatter. The
site-nav.css file is thus only added when the site nav is specified in
the frontmatter.

When a page has a layout with a site nav, but no site nav is specified
in the frontmatter, the site-nav.css file is not added, which causes the
styling of the site nav to break.

Let's update the logic when forming template data to check for the
existence of a site nav in the template when determining the value of
the siteNav variable.

@Chng-Zhi-Xuan
Chng-Zhi-Xuan self-requested a review April 15, 2019 06:50
@Chng-Zhi-Xuan

Chng-Zhi-Xuan commented Apr 15, 2019

Copy link
Copy Markdown
Contributor

I briefly looked through, here are some comments

By default, the default layout contains a blank navigation.md file. The site-nav.css file is thus added even though the navigation.md file is empty - is this behaviour okay?

In my opinion, if the user has a navigation.md file in the layouts, we should expect that the user intends to use the site-nav. Although we can make it more user friendly by using a better initial template rather than a blank file.

We might also want to insert notes / tips into the Layouts section to inform users to delete certain files if you do not want to use them.

Implementation comments

  • Your implementation would require 2 calls to this.getSiteNavPath() when generating a page. One during insertSiteNav and another at prepareTemplateData.

To streamline this, would it be better if you change a global boolean variable after this.getSiteNavPath() is called, then use the same variable for the siteNav value within prepareTemplateData ?

This will only require you to call this.getSitenavPath() once, removing some overhead.

@marvinchin

Copy link
Copy Markdown
ContributorAuthor

Thanks for pointing that out!

I was trying to avoid the use of a global flag because it introduces some coupling between places that modify the flag, and those that read it (in this case, between insertSiteNav and prepareTemplateData).

As getSiteNavPath involves a (comparatively more costly) fs operation, and I don't forsee any other places where the flag would be modified, it might be more efficient to use a global flag as you suggested. I'll make the changes in a bit! 🙂

@marvinchin

Copy link
Copy Markdown
ContributorAuthor

By default, the default layout contains a blank navigation.md file. The site-nav.css file is thus added even though the navigation.md file is empty - is this behaviour okay?

After updating the logic to use a flag instead, we are able to avoid this issue as we only update the flag after checking that the file is not empty.

@yamgentyamgent modified the milestones: v2.2.0, v2.2.1Apr 15, 2019

@Chng-Zhi-XuanChng-Zhi-Xuan left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

After updating the logic to use a flag instead, we are able to avoid this issue as we only update the flag after checking that the file is not empty.

👍 , just have a few comments below.

Comment threadsrc/Page.js
if (siteNavContent === '') {
return pageData;
}
this.hasSiteNav = true;

@Chng-Zhi-XuanChng-Zhi-XuanApr 16, 2019

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Since you only modify the flag to be true at this point. If you delete the navigation.md (Or blank the contents) from the layouts folder, the site-nav will still appear in the markbind serve preview. Even though MarkBind correctly detected navigation.md has changed.

The only correct behaviour in this code is changing navigation.md slightly and the changes will reflect in the markbind serve preview.

Suggestion
Explicitly set the flag to false in the if statements above for it to be properly removed when navigation.md is deleted / blanked in preview mode.

Comment threadsrc/Page.js Outdated
this.navigableHeadings = {};
this.pageSectionsHtml = {};

// flag to indicate whether this page has a site nav

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

A quick search shows majority of inline comments have capitalised starting character (although not all).

@yamgentyamgent removed this from the v2.2.1 milestone Apr 16, 2019
When passing data to the page template, the siteNav variable only checks
for the existence of the site nav specified in the frontmatter. The
site-nav.css file is thus only added when the site nav is specified in
the frontmatter.
When a page has a layout with a site nav, but no site nav is specified
in the frontmatter, the site-nav.css file is not added, which causes the
styling of the site nav to break.
Let's update the logic when forming template data to check for the
existence of a site nav in the template when determining the value of
the siteNav variable.
@marvinchin

Copy link
Copy Markdown
ContributorAuthor

@Chng-Zhi-Xuan I've made the requested changes!

@Chng-Zhi-XuanChng-Zhi-Xuan left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

LGTM 👍

@yamgentyamgent added this to the v2.2.1 milestone Apr 17, 2019
@yamgent
yamgent merged commit d65e347 into MarkBind:masterApr 18, 2019
@damithc

Copy link
Copy Markdown
Contributor

Seems to be working. Good work!

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.

Specifying layouts in a Page's front matter do not insert required CSS files for site navigation

4 participants

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

Fix site-nav.css not being added when layout contains site nav - #841

Merged
yamgent merged 1 commit into
MarkBind:masterfrom
marvinchin:fix-layout-site-nav
Apr 18, 2019
Merged

Fix site-nav.css not being added when layout contains site nav#841
yamgent merged 1 commit into
MarkBind:masterfrom
marvinchin:fix-layout-site-nav

Conversation

@marvinchin

@marvinchinmarvinchin commented Apr 15, 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

Fixes#528.

What is the rationale for this request?

When a page has a site nav specified in the layout, but not in the frontmatter, the site-nav.css file is not added to the site. This causes the styling of the side nav to break.

What changes did you make? (Give an overview)

  • Abstract method to get the path to the site nav file from insertSiteNav
  • Use abstracted method getSiteNavPath to check if a site nav is specified in either layout or frontmatter when preparing template data

Is there anything you'd like reviewers to focus on?

By default, the default layout contains a blank navigation.md file. The site-nav.css file is thus added even though the navigation.md file is empty - is this behaviour okay?

After updating the logic to use a flag instead, we are able to avoid this issue as we only update the flag after checking that the file is not empty.

Testing instructions:

See instructions in #739. The site nav should be styled correctly.

Proposed commit message: (wrap lines at 72 characters)

When passing data to the page template, the siteNav variable only checks
for the existence of the site nav specified in the frontmatter. The
site-nav.css file is thus only added when the site nav is specified in
the frontmatter.

When a page has a layout with a site nav, but no site nav is specified
in the frontmatter, the site-nav.css file is not added, which causes the
styling of the site nav to break.

Let's update the logic when forming template data to check for the
existence of a site nav in the template when determining the value of
the siteNav variable.

@Chng-Zhi-Xuan
Chng-Zhi-Xuan self-requested a review April 15, 2019 06:50
@Chng-Zhi-Xuan

Chng-Zhi-Xuan commented Apr 15, 2019

Copy link
Copy Markdown
Contributor

I briefly looked through, here are some comments

By default, the default layout contains a blank navigation.md file. The site-nav.css file is thus added even though the navigation.md file is empty - is this behaviour okay?

In my opinion, if the user has a navigation.md file in the layouts, we should expect that the user intends to use the site-nav. Although we can make it more user friendly by using a better initial template rather than a blank file.

We might also want to insert notes / tips into the Layouts section to inform users to delete certain files if you do not want to use them.

Implementation comments

  • Your implementation would require 2 calls to this.getSiteNavPath() when generating a page. One during insertSiteNav and another at prepareTemplateData.

To streamline this, would it be better if you change a global boolean variable after this.getSiteNavPath() is called, then use the same variable for the siteNav value within prepareTemplateData ?

This will only require you to call this.getSitenavPath() once, removing some overhead.

@marvinchin

Copy link
Copy Markdown
ContributorAuthor

Thanks for pointing that out!

I was trying to avoid the use of a global flag because it introduces some coupling between places that modify the flag, and those that read it (in this case, between insertSiteNav and prepareTemplateData).

As getSiteNavPath involves a (comparatively more costly) fs operation, and I don't forsee any other places where the flag would be modified, it might be more efficient to use a global flag as you suggested. I'll make the changes in a bit! 🙂

@marvinchin

Copy link
Copy Markdown
ContributorAuthor

By default, the default layout contains a blank navigation.md file. The site-nav.css file is thus added even though the navigation.md file is empty - is this behaviour okay?

After updating the logic to use a flag instead, we are able to avoid this issue as we only update the flag after checking that the file is not empty.

@yamgentyamgent modified the milestones: v2.2.0, v2.2.1Apr 15, 2019

@Chng-Zhi-XuanChng-Zhi-Xuan left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

After updating the logic to use a flag instead, we are able to avoid this issue as we only update the flag after checking that the file is not empty.

👍 , just have a few comments below.

Comment threadsrc/Page.js
if (siteNavContent === '') {
return pageData;
}
this.hasSiteNav = true;

@Chng-Zhi-XuanChng-Zhi-XuanApr 16, 2019

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Since you only modify the flag to be true at this point. If you delete the navigation.md (Or blank the contents) from the layouts folder, the site-nav will still appear in the markbind serve preview. Even though MarkBind correctly detected navigation.md has changed.

The only correct behaviour in this code is changing navigation.md slightly and the changes will reflect in the markbind serve preview.

Suggestion
Explicitly set the flag to false in the if statements above for it to be properly removed when navigation.md is deleted / blanked in preview mode.

Comment threadsrc/Page.js Outdated
this.navigableHeadings = {};
this.pageSectionsHtml = {};

// flag to indicate whether this page has a site nav

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

A quick search shows majority of inline comments have capitalised starting character (although not all).

@yamgentyamgent removed this from the v2.2.1 milestone Apr 16, 2019
When passing data to the page template, the siteNav variable only checks
for the existence of the site nav specified in the frontmatter. The
site-nav.css file is thus only added when the site nav is specified in
the frontmatter.
When a page has a layout with a site nav, but no site nav is specified
in the frontmatter, the site-nav.css file is not added, which causes the
styling of the site nav to break.
Let's update the logic when forming template data to check for the
existence of a site nav in the template when determining the value of
the siteNav variable.
@marvinchin

Copy link
Copy Markdown
ContributorAuthor

@Chng-Zhi-Xuan I've made the requested changes!

@Chng-Zhi-XuanChng-Zhi-Xuan left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

LGTM 👍

@yamgentyamgent added this to the v2.2.1 milestone Apr 17, 2019
@yamgent
yamgent merged commit d65e347 into MarkBind:masterApr 18, 2019
@damithc

Copy link
Copy Markdown
Contributor

Seems to be working. Good work!

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.

Specifying layouts in a Page's front matter do not insert required CSS files for site navigation

4 participants

@marvinchin@Chng-Zhi-Xuan@damithc@yamgent
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Auto-enable theater mode on YouTube\n(function() {\n function tryTheater() {\n var btn = document.querySelector('button[aria-label=\"Theater mode\"], ytd-player #player button[title=\"Theater mode\"]');\n if (btn && !btn.classList.contains('activated')) {\n btn.click();\n }\n }\n \n // Try immediately\n tryTheater();\n \n // Try after navigation (SPA)\n var lastUrl = location.href;\n setInterval(function() {\n if (location.href !== lastUrl) {\n lastUrl = location.href;\n setTimeout(tryTheater, 500);\n }\n }, 1000);\n \n // Also try on player load\n var observer = new MutationObserver(tryTheater);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "YouTube Theater Mode Default"); } } catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
Skip to content

Fix site-nav.css not being added when layout contains site nav - #841

Merged
yamgent merged 1 commit into
MarkBind:masterfrom
marvinchin:fix-layout-site-nav
Apr 18, 2019
Merged

Fix site-nav.css not being added when layout contains site nav#841
yamgent merged 1 commit into
MarkBind:masterfrom
marvinchin:fix-layout-site-nav

Conversation

@marvinchin

@marvinchinmarvinchin commented Apr 15, 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

Fixes#528.

What is the rationale for this request?

When a page has a site nav specified in the layout, but not in the frontmatter, the site-nav.css file is not added to the site. This causes the styling of the side nav to break.

What changes did you make? (Give an overview)

  • Abstract method to get the path to the site nav file from insertSiteNav
  • Use abstracted method getSiteNavPath to check if a site nav is specified in either layout or frontmatter when preparing template data

Is there anything you'd like reviewers to focus on?

By default, the default layout contains a blank navigation.md file. The site-nav.css file is thus added even though the navigation.md file is empty - is this behaviour okay?

After updating the logic to use a flag instead, we are able to avoid this issue as we only update the flag after checking that the file is not empty.

Testing instructions:

See instructions in #739. The site nav should be styled correctly.

Proposed commit message: (wrap lines at 72 characters)

When passing data to the page template, the siteNav variable only checks
for the existence of the site nav specified in the frontmatter. The
site-nav.css file is thus only added when the site nav is specified in
the frontmatter.

When a page has a layout with a site nav, but no site nav is specified
in the frontmatter, the site-nav.css file is not added, which causes the
styling of the site nav to break.

Let's update the logic when forming template data to check for the
existence of a site nav in the template when determining the value of
the siteNav variable.

@Chng-Zhi-Xuan
Chng-Zhi-Xuan self-requested a review April 15, 2019 06:50
@Chng-Zhi-Xuan

Chng-Zhi-Xuan commented Apr 15, 2019

Copy link
Copy Markdown
Contributor

I briefly looked through, here are some comments

By default, the default layout contains a blank navigation.md file. The site-nav.css file is thus added even though the navigation.md file is empty - is this behaviour okay?

In my opinion, if the user has a navigation.md file in the layouts, we should expect that the user intends to use the site-nav. Although we can make it more user friendly by using a better initial template rather than a blank file.

We might also want to insert notes / tips into the Layouts section to inform users to delete certain files if you do not want to use them.

Implementation comments

  • Your implementation would require 2 calls to this.getSiteNavPath() when generating a page. One during insertSiteNav and another at prepareTemplateData.

To streamline this, would it be better if you change a global boolean variable after this.getSiteNavPath() is called, then use the same variable for the siteNav value within prepareTemplateData ?

This will only require you to call this.getSitenavPath() once, removing some overhead.

@marvinchin

Copy link
Copy Markdown
ContributorAuthor

Thanks for pointing that out!

I was trying to avoid the use of a global flag because it introduces some coupling between places that modify the flag, and those that read it (in this case, between insertSiteNav and prepareTemplateData).

As getSiteNavPath involves a (comparatively more costly) fs operation, and I don't forsee any other places where the flag would be modified, it might be more efficient to use a global flag as you suggested. I'll make the changes in a bit! 🙂

@marvinchin

Copy link
Copy Markdown
ContributorAuthor

By default, the default layout contains a blank navigation.md file. The site-nav.css file is thus added even though the navigation.md file is empty - is this behaviour okay?

After updating the logic to use a flag instead, we are able to avoid this issue as we only update the flag after checking that the file is not empty.

@yamgentyamgent modified the milestones: v2.2.0, v2.2.1Apr 15, 2019

@Chng-Zhi-XuanChng-Zhi-Xuan left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

After updating the logic to use a flag instead, we are able to avoid this issue as we only update the flag after checking that the file is not empty.

👍 , just have a few comments below.

Comment threadsrc/Page.js
if (siteNavContent === '') {
return pageData;
}
this.hasSiteNav = true;

@Chng-Zhi-XuanChng-Zhi-XuanApr 16, 2019

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Since you only modify the flag to be true at this point. If you delete the navigation.md (Or blank the contents) from the layouts folder, the site-nav will still appear in the markbind serve preview. Even though MarkBind correctly detected navigation.md has changed.

The only correct behaviour in this code is changing navigation.md slightly and the changes will reflect in the markbind serve preview.

Suggestion
Explicitly set the flag to false in the if statements above for it to be properly removed when navigation.md is deleted / blanked in preview mode.

Comment threadsrc/Page.js Outdated
this.navigableHeadings = {};
this.pageSectionsHtml = {};

// flag to indicate whether this page has a site nav

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

A quick search shows majority of inline comments have capitalised starting character (although not all).

@yamgentyamgent removed this from the v2.2.1 milestone Apr 16, 2019
When passing data to the page template, the siteNav variable only checks
for the existence of the site nav specified in the frontmatter. The
site-nav.css file is thus only added when the site nav is specified in
the frontmatter.
When a page has a layout with a site nav, but no site nav is specified
in the frontmatter, the site-nav.css file is not added, which causes the
styling of the site nav to break.
Let's update the logic when forming template data to check for the
existence of a site nav in the template when determining the value of
the siteNav variable.
@marvinchin

Copy link
Copy Markdown
ContributorAuthor

@Chng-Zhi-Xuan I've made the requested changes!

@Chng-Zhi-XuanChng-Zhi-Xuan left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

LGTM 👍

@yamgentyamgent added this to the v2.2.1 milestone Apr 17, 2019
@yamgent
yamgent merged commit d65e347 into MarkBind:masterApr 18, 2019
@damithc

Copy link
Copy Markdown
Contributor

Seems to be working. Good work!

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.

Specifying layouts in a Page's front matter do not insert required CSS files for site navigation

4 participants

@marvinchin@Chng-Zhi-Xuan@damithc@yamgent
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Remove or un-stick sticky/fixed headers that block content\n(function() {\n function unstick() {\n document.querySelectorAll('header, nav, [role=\"banner\"], .header, .navbar, .sticky, .fixed-top, [style*=\"position: fixed\"], [style*=\"position:sticky\"]').forEach(function(el) {\n if (el.style.position === 'fixed' || el.style.position === 'sticky' || \n getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {\n el.style.position = 'static';\n el.style.top = 'auto';\n el.style.zIndex = 'auto';\n }\n });\n }\n \n unstick();\n \n var observer = new MutationObserver(unstick);\n observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });\n})();", "Kill Sticky Headers"); } } catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
Skip to content

Fix site-nav.css not being added when layout contains site nav - #841

Merged
yamgent merged 1 commit into
MarkBind:masterfrom
marvinchin:fix-layout-site-nav
Apr 18, 2019
Merged

Fix site-nav.css not being added when layout contains site nav#841
yamgent merged 1 commit into
MarkBind:masterfrom
marvinchin:fix-layout-site-nav

Conversation

@marvinchin

@marvinchinmarvinchin commented Apr 15, 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

Fixes#528.

What is the rationale for this request?

When a page has a site nav specified in the layout, but not in the frontmatter, the site-nav.css file is not added to the site. This causes the styling of the side nav to break.

What changes did you make? (Give an overview)

  • Abstract method to get the path to the site nav file from insertSiteNav
  • Use abstracted method getSiteNavPath to check if a site nav is specified in either layout or frontmatter when preparing template data

Is there anything you'd like reviewers to focus on?

By default, the default layout contains a blank navigation.md file. The site-nav.css file is thus added even though the navigation.md file is empty - is this behaviour okay?

After updating the logic to use a flag instead, we are able to avoid this issue as we only update the flag after checking that the file is not empty.

Testing instructions:

See instructions in #739. The site nav should be styled correctly.

Proposed commit message: (wrap lines at 72 characters)

When passing data to the page template, the siteNav variable only checks
for the existence of the site nav specified in the frontmatter. The
site-nav.css file is thus only added when the site nav is specified in
the frontmatter.

When a page has a layout with a site nav, but no site nav is specified
in the frontmatter, the site-nav.css file is not added, which causes the
styling of the site nav to break.

Let's update the logic when forming template data to check for the
existence of a site nav in the template when determining the value of
the siteNav variable.

@Chng-Zhi-Xuan
Chng-Zhi-Xuan self-requested a review April 15, 2019 06:50
@Chng-Zhi-Xuan

Chng-Zhi-Xuan commented Apr 15, 2019

Copy link
Copy Markdown
Contributor

I briefly looked through, here are some comments

By default, the default layout contains a blank navigation.md file. The site-nav.css file is thus added even though the navigation.md file is empty - is this behaviour okay?

In my opinion, if the user has a navigation.md file in the layouts, we should expect that the user intends to use the site-nav. Although we can make it more user friendly by using a better initial template rather than a blank file.

We might also want to insert notes / tips into the Layouts section to inform users to delete certain files if you do not want to use them.

Implementation comments

  • Your implementation would require 2 calls to this.getSiteNavPath() when generating a page. One during insertSiteNav and another at prepareTemplateData.

To streamline this, would it be better if you change a global boolean variable after this.getSiteNavPath() is called, then use the same variable for the siteNav value within prepareTemplateData ?

This will only require you to call this.getSitenavPath() once, removing some overhead.

@marvinchin

Copy link
Copy Markdown
ContributorAuthor

Thanks for pointing that out!

I was trying to avoid the use of a global flag because it introduces some coupling between places that modify the flag, and those that read it (in this case, between insertSiteNav and prepareTemplateData).

As getSiteNavPath involves a (comparatively more costly) fs operation, and I don't forsee any other places where the flag would be modified, it might be more efficient to use a global flag as you suggested. I'll make the changes in a bit! 🙂

@marvinchin

Copy link
Copy Markdown
ContributorAuthor

By default, the default layout contains a blank navigation.md file. The site-nav.css file is thus added even though the navigation.md file is empty - is this behaviour okay?

After updating the logic to use a flag instead, we are able to avoid this issue as we only update the flag after checking that the file is not empty.

@yamgentyamgent modified the milestones: v2.2.0, v2.2.1Apr 15, 2019

@Chng-Zhi-XuanChng-Zhi-Xuan left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

After updating the logic to use a flag instead, we are able to avoid this issue as we only update the flag after checking that the file is not empty.

👍 , just have a few comments below.

Comment threadsrc/Page.js
if (siteNavContent === '') {
return pageData;
}
this.hasSiteNav = true;

@Chng-Zhi-XuanChng-Zhi-XuanApr 16, 2019

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Since you only modify the flag to be true at this point. If you delete the navigation.md (Or blank the contents) from the layouts folder, the site-nav will still appear in the markbind serve preview. Even though MarkBind correctly detected navigation.md has changed.

The only correct behaviour in this code is changing navigation.md slightly and the changes will reflect in the markbind serve preview.

Suggestion
Explicitly set the flag to false in the if statements above for it to be properly removed when navigation.md is deleted / blanked in preview mode.

Comment threadsrc/Page.js Outdated
this.navigableHeadings = {};
this.pageSectionsHtml = {};

// flag to indicate whether this page has a site nav

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

A quick search shows majority of inline comments have capitalised starting character (although not all).

@yamgentyamgent removed this from the v2.2.1 milestone Apr 16, 2019
When passing data to the page template, the siteNav variable only checks
for the existence of the site nav specified in the frontmatter. The
site-nav.css file is thus only added when the site nav is specified in
the frontmatter.
When a page has a layout with a site nav, but no site nav is specified
in the frontmatter, the site-nav.css file is not added, which causes the
styling of the site nav to break.
Let's update the logic when forming template data to check for the
existence of a site nav in the template when determining the value of
the siteNav variable.
@marvinchin

Copy link
Copy Markdown
ContributorAuthor

@Chng-Zhi-Xuan I've made the requested changes!

@Chng-Zhi-XuanChng-Zhi-Xuan left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

LGTM 👍

@yamgentyamgent added this to the v2.2.1 milestone Apr 17, 2019
@yamgent
yamgent merged commit d65e347 into MarkBind:masterApr 18, 2019
@damithc

Copy link
Copy Markdown
Contributor

Seems to be working. Good work!

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.

Specifying layouts in a Page's front matter do not insert required CSS files for site navigation

4 participants

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

Fix site-nav.css not being added when layout contains site nav - #841

Merged
yamgent merged 1 commit into
MarkBind:masterfrom
marvinchin:fix-layout-site-nav
Apr 18, 2019
Merged

Fix site-nav.css not being added when layout contains site nav#841
yamgent merged 1 commit into
MarkBind:masterfrom
marvinchin:fix-layout-site-nav

Conversation

@marvinchin

@marvinchinmarvinchin commented Apr 15, 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

Fixes#528.

What is the rationale for this request?

When a page has a site nav specified in the layout, but not in the frontmatter, the site-nav.css file is not added to the site. This causes the styling of the side nav to break.

What changes did you make? (Give an overview)

  • Abstract method to get the path to the site nav file from insertSiteNav
  • Use abstracted method getSiteNavPath to check if a site nav is specified in either layout or frontmatter when preparing template data

Is there anything you'd like reviewers to focus on?

By default, the default layout contains a blank navigation.md file. The site-nav.css file is thus added even though the navigation.md file is empty - is this behaviour okay?

After updating the logic to use a flag instead, we are able to avoid this issue as we only update the flag after checking that the file is not empty.

Testing instructions:

See instructions in #739. The site nav should be styled correctly.

Proposed commit message: (wrap lines at 72 characters)

When passing data to the page template, the siteNav variable only checks
for the existence of the site nav specified in the frontmatter. The
site-nav.css file is thus only added when the site nav is specified in
the frontmatter.

When a page has a layout with a site nav, but no site nav is specified
in the frontmatter, the site-nav.css file is not added, which causes the
styling of the site nav to break.

Let's update the logic when forming template data to check for the
existence of a site nav in the template when determining the value of
the siteNav variable.

@Chng-Zhi-Xuan
Chng-Zhi-Xuan self-requested a review April 15, 2019 06:50
@Chng-Zhi-Xuan

Chng-Zhi-Xuan commented Apr 15, 2019

Copy link
Copy Markdown
Contributor

I briefly looked through, here are some comments

By default, the default layout contains a blank navigation.md file. The site-nav.css file is thus added even though the navigation.md file is empty - is this behaviour okay?

In my opinion, if the user has a navigation.md file in the layouts, we should expect that the user intends to use the site-nav. Although we can make it more user friendly by using a better initial template rather than a blank file.

We might also want to insert notes / tips into the Layouts section to inform users to delete certain files if you do not want to use them.

Implementation comments

  • Your implementation would require 2 calls to this.getSiteNavPath() when generating a page. One during insertSiteNav and another at prepareTemplateData.

To streamline this, would it be better if you change a global boolean variable after this.getSiteNavPath() is called, then use the same variable for the siteNav value within prepareTemplateData ?

This will only require you to call this.getSitenavPath() once, removing some overhead.

@marvinchin

Copy link
Copy Markdown
ContributorAuthor

Thanks for pointing that out!

I was trying to avoid the use of a global flag because it introduces some coupling between places that modify the flag, and those that read it (in this case, between insertSiteNav and prepareTemplateData).

As getSiteNavPath involves a (comparatively more costly) fs operation, and I don't forsee any other places where the flag would be modified, it might be more efficient to use a global flag as you suggested. I'll make the changes in a bit! 🙂

@marvinchin

Copy link
Copy Markdown
ContributorAuthor

By default, the default layout contains a blank navigation.md file. The site-nav.css file is thus added even though the navigation.md file is empty - is this behaviour okay?

After updating the logic to use a flag instead, we are able to avoid this issue as we only update the flag after checking that the file is not empty.

@yamgentyamgent modified the milestones: v2.2.0, v2.2.1Apr 15, 2019

@Chng-Zhi-XuanChng-Zhi-Xuan left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

After updating the logic to use a flag instead, we are able to avoid this issue as we only update the flag after checking that the file is not empty.

👍 , just have a few comments below.

Comment threadsrc/Page.js
if (siteNavContent === '') {
return pageData;
}
this.hasSiteNav = true;

@Chng-Zhi-XuanChng-Zhi-XuanApr 16, 2019

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Since you only modify the flag to be true at this point. If you delete the navigation.md (Or blank the contents) from the layouts folder, the site-nav will still appear in the markbind serve preview. Even though MarkBind correctly detected navigation.md has changed.

The only correct behaviour in this code is changing navigation.md slightly and the changes will reflect in the markbind serve preview.

Suggestion
Explicitly set the flag to false in the if statements above for it to be properly removed when navigation.md is deleted / blanked in preview mode.

Comment threadsrc/Page.js Outdated
this.navigableHeadings = {};
this.pageSectionsHtml = {};

// flag to indicate whether this page has a site nav

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

A quick search shows majority of inline comments have capitalised starting character (although not all).

@yamgentyamgent removed this from the v2.2.1 milestone Apr 16, 2019
When passing data to the page template, the siteNav variable only checks
for the existence of the site nav specified in the frontmatter. The
site-nav.css file is thus only added when the site nav is specified in
the frontmatter.
When a page has a layout with a site nav, but no site nav is specified
in the frontmatter, the site-nav.css file is not added, which causes the
styling of the site nav to break.
Let's update the logic when forming template data to check for the
existence of a site nav in the template when determining the value of
the siteNav variable.
@marvinchin

Copy link
Copy Markdown
ContributorAuthor

@Chng-Zhi-Xuan I've made the requested changes!

@Chng-Zhi-XuanChng-Zhi-Xuan left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

LGTM 👍

@yamgentyamgent added this to the v2.2.1 milestone Apr 17, 2019
@yamgent
yamgent merged commit d65e347 into MarkBind:masterApr 18, 2019
@damithc

Copy link
Copy Markdown
Contributor

Seems to be working. Good work!

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.

Specifying layouts in a Page's front matter do not insert required CSS files for site navigation

4 participants

@marvinchin@Chng-Zhi-Xuan@damithc@yamgent