Skip to content
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

Add separate on-page navigation sidebar #475

Merged
merged 5 commits into from
Mar 4, 2018
Merged

Add separate on-page navigation sidebar #475

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
4d383ed
Add function to generate TOC from document headings
microbouji Feb 27, 2018
d6a0566
Add separate on-page navigation sidebar
microbouji Feb 27, 2018
47a34e3
Fix css position sticky support
microbouji Mar 1, 2018
760f743
Add license header
JoelMarcey Mar 4, 2018
ce0efd9
Merge branch 'master' into on-page-nav-separate
JoelMarcey Mar 4, 2018
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
8 changes: 7 additions & 1 deletion lib/core/DocsLayout.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ const React = require('react');
const Container = require('./Container.js');
const Doc = require('./Doc.js');
const DocsSidebar = require('./DocsSidebar.js');
const OnPageNav = require('./nav/OnPageNav.js');
const Site = require('./Site.js');
const translation = require('../server/translation.js');

Expand All @@ -25,7 +26,7 @@ class DocsLayout extends React.Component {
return (
<Site
config={this.props.config}
className="sideNavVisible"
className="sideNavVisible doc"
title={
i18n
? translation[this.props.metadata.language]['localized-strings'][
Expand Down Expand Up @@ -90,6 +91,11 @@ class DocsLayout extends React.Component {
)}
</div>
</Container>
{this.props.config.onPageNav == 'separate' && (
<nav className="onPageNav">
<OnPageNav rawContent={this.props.children} />
</nav>
)}
</div>
</Site>
);
Expand Down
7 changes: 6 additions & 1 deletion lib/core/Site.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ const HeaderNav = require('./nav/HeaderNav.js');
const Head = require('./Head.js');
const Footer = require(process.cwd() + '/core/Footer.js');
const translation = require('../server/translation.js');
const classNames = require('classnames');

const CWD = process.cwd();

Expand Down Expand Up @@ -63,7 +64,11 @@ class Site extends React.Component {
title={title}
url={url}
/>
<body className={this.props.className}>
<body
className={classNames({
[this.props.className]: true,
separateOnPageNav: this.props.config.onPageNav == 'separate',
})}>
<HeaderNav
config={this.props.config}
baseUrl={this.props.config.baseUrl}
Expand Down
7 changes: 7 additions & 0 deletions lib/core/getTOC.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,10 @@
/**
* Copyright (c) 2017-present, Facebook, Inc.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/

const Remarkable = require('remarkable');
const toSlug = require('./toSlug');

Expand Down
40 changes: 40 additions & 0 deletions lib/core/nav/OnPageNav.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
/**
* Copyright (c) 2017-present, Facebook, Inc.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/

const React = require('react');

const siteConfig = require(process.cwd() + '/siteConfig.js');
const getTOC = require('../getTOC');

const Link = ({hashLink, text}) => <a href={`#${hashLink}`}>{text}</a>;

const Headings = ({headings}) => {
if (!headings.length) return null;
return (
<ul className="toc-headings">
{headings.map((heading, i) => (
<li key={i}>
<Link hashLink={heading.hashLink} text={heading.text} />
<Headings headings={heading.children} />
</li>
))}
</ul>
);
};

class OnPageNav extends React.Component {
render() {
const customTags = siteConfig.onPageNavHeadings;
const headings = customTags
? getTOC(this.props.rawContent, customTags.topLevel, customTags.sub)
: getTOC(this.props.rawContent);

return <Headings headings={headings} />;
}
}

module.exports = OnPageNav;
67 changes: 67 additions & 0 deletions lib/static/css/main.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1494,6 +1494,73 @@ nav.toc .toggleNav .navBreadcrumb h2 {
padding: 0 10px;
}
}

.onPageNav {
display: none;
}
.onPageNav::-webkit-scrollbar {
display: none;
}

@supports(position: sticky) {
@media only screen and (min-width: 1024px) {
.separateOnPageNav.doc .wrapper,
.separateOnPageNav .headerWrapper.wrapper {
max-width: 1400px;
}

.doc.separateOnPageNav .docsNavContainer {
flex: 0 0 240px;
margin: 40px 0 0;
}

.doc.separateOnPageNav nav.toc:last-child {
padding-bottom: 0;
width: auto;
}

.doc.separateOnPageNav.sideNavVisible .navPusher .mainContainer {
max-width: 100%;
flex: 1 auto;
padding: 0 40px 50px;
min-width: 0;
}

.onPageNav {
display: block;
position: -webkit-sticky;
position: sticky;
top: 110px;
flex: 0 0 240px;
overflow-y: auto;
max-height: calc(100vh - 110px);
}

.onPageNav > ul {
border-left: 1px solid #e0e0e0;
padding: 10px 0 2px 15px;
}

.onPageNav a {
color: #717171;
}

.onPageNav ul li {
font-size: 12px;
line-height: 14px;
padding-bottom: 12px;
}

.onPageNav ul ul {
padding: 8px 0 0 20px;
}

.onPageNav ul ul li {
padding-bottom: 8px;
}
}
}

table {
background: #F8F8F8;
border: 1px solid #B0B0B0;
Expand Down