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

@marvinchin marvinchin 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
Contributor Author

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 marvinchin force-pushed the fix-layout-site-nav branch from eb3d908 to f16e9b5 Compare April 15, 2019 09:31
@marvinchin

Copy link
Copy Markdown
Contributor Author

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.

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

@Chng-Zhi-Xuan Chng-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 thread src/Page.js
if (siteNavContent === '') {
return pageData;
}
this.hasSiteNav = true;

@Chng-Zhi-Xuan Chng-Zhi-Xuan Apr 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 thread src/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).

@yamgent yamgent 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 marvinchin force-pushed the fix-layout-site-nav branch from f16e9b5 to 2f3a48c Compare April 16, 2019 17:21
@marvinchin

Copy link
Copy Markdown
Contributor Author

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

@Chng-Zhi-Xuan Chng-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 👍

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

damithc commented Apr 23, 2019

Copy link
Copy Markdown
Contributor

Seems to be working. Good work!

Sign up for free to 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