Skip to content

Commit

Permalink
[DM] nav nesting (#899)
Browse files Browse the repository at this point in the history
* documentalist@0.0.6: now with options
use .d.ts files for typescript info, like we used to (shaves about 2s off runtime)
* nav only expands active route, not all pages
  • Loading branch information
giladgray authored Mar 28, 2017
1 parent 9deb01c commit f764510
Show file tree
Hide file tree
Showing 5 changed files with 29 additions and 18 deletions.
20 changes: 14 additions & 6 deletions gulp/docs.js
Original file line number Diff line number Diff line change
Expand Up @@ -25,18 +25,26 @@ module.exports = (blueprint, gulp, plugins) => {
versions: "versions.json",
};

gulp.task("docs-json", () => {
return new dm.Documentalist([], { renderer: text.renderer })
gulp.task("docs-json", () => (
new dm.Documentalist({
markdown: { renderer: text.renderer },
// must mark our @Decorator APIs as reserved so we can use them in code samples
reservedTags: ["ContextMenuTarget", "HotkeysTarget"],
})
.use(".md", new dm.MarkdownPlugin({ navPage: config.navPage }))
.use(/\.tsx?$/, new dm.TypescriptPlugin())
.use(/\.d\.ts$/, new dm.TypescriptPlugin({
excludeNames: [/Factory$/, /^I.+State$/],
excludePaths: ["node_modules/", "core/typings"],
includeDefinitionFiles: true,
}))
.use(".scss", new dm.KssPlugin())
.documentGlobs("packages/*/src/**/*")
.documentGlobs("packages/*/src/**/*", "packages/*/dist/index.d.ts")
.then((docs) => JSON.stringify(docs, null, 2))
.then((content) => (
text.fileStream(filenames.data, content)
.pipe(gulp.dest(config.data))
));
});
))
));

// create a JSON file containing latest released version of each project
gulp.task("docs-releases", () => {
Expand Down
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@
"better-handlebars": "github:wmeldon/better-handlebars",
"chai": "3.5.0",
"del": "2.2.2",
"documentalist": "0.0.5",
"documentalist": "0.0.6",
"enzyme": "2.6.0",
"gulp": "3.9.1",
"gulp-concat": "2.6.0",
Expand Down
14 changes: 9 additions & 5 deletions packages/docs/src/components/navMenu.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -38,11 +38,10 @@ export const NavMenuItem: React.SFC<INavMenuItemProps & { children?: React.React
[Classes.INTENT_PRIMARY]: props.isActive,
});
const handleClick = () => props.onClick(item.route);
const title = props.children ? <strong>{item.title}</strong> : item.title;
return (
<li className={classes} key={item.route}>
<a className={itemClasses} href={"#" + item.route} onClick={handleClick}>
{title}
{item.title}
</a>
{props.children}
</li>
Expand All @@ -53,14 +52,15 @@ NavMenuItem.displayName = "Docs.NavMenuItem";
export const NavMenu: React.SFC<INavMenuProps> = (props) => {
const menu = props.items.map((section) => {
const isActive = props.activeSectionId === section.route;
const isExpanded = isActive || props.activePageId === (section as IPageNode).reference;
const isExpanded = isActive || isParentOfRoute(section.route, props.activeSectionId);
// active section gets selected styles, expanded section shows its children
const menuClasses = classNames({ "docs-nav-expanded": isExpanded });
const classes = classNames({ "docs-nav-expanded": isExpanded });
const childrenMenu = isPageNode(section)
? <NavMenu {...props} className={menuClasses} items={section.children} />
? <NavMenu {...props} items={section.children} />
: undefined;
return (
<NavMenuItem
className={classes}
key={section.route}
item={section}
isActive={isActive}
Expand All @@ -74,3 +74,7 @@ export const NavMenu: React.SFC<INavMenuProps> = (props) => {
return <ul className={classes}>{menu}</ul>;
};
NavMenu.displayName = "Docs.NavMenu";

function isParentOfRoute(parent: string, route: string) {
return route.indexOf(parent + "/") === 0 || route.indexOf(parent + ".") === 0;
}
3 changes: 1 addition & 2 deletions packages/docs/src/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -19,11 +19,10 @@ import { TagRenderer } from "./components/page";
import { PropsTable } from "./components/propsTable";
import { IPackageInfo, Styleguide } from "./components/styleguide";

import { IHeadingTag, IPageNode } from "documentalist/dist/client";
import { IHeadingTag } from "documentalist/dist/client";
import { IKssPluginData, IMarkdownPluginData, ITypescriptPluginData } from "documentalist/dist/plugins";

interface IDocsData extends IKssPluginData, IMarkdownPluginData, ITypescriptPluginData {
layout: IPageNode[];
}

/* tslint:disable:no-var-requires */
Expand Down
8 changes: 4 additions & 4 deletions packages/docs/src/styles/_layout.scss
Original file line number Diff line number Diff line change
Expand Up @@ -85,15 +85,15 @@ Lefthand navigation menu
*/

// nested menus are hidden by default
.docs-nav-menu .docs-menu-item-heading {
.docs-nav-menu .docs-nav-menu {
display: none;
}

.docs-nav-expanded > .docs-menu-item-heading {
.docs-nav-expanded > .docs-nav-menu {
display: block;
}

.docs-nav-expand-all .docs-menu-item-heading {
.docs-nav-expand-all .docs-nav-menu {
// sometimes you need to show all the sections
display: block !important; // stylelint-disable-line declaration-no-important
}
Expand All @@ -115,7 +115,7 @@ Lefthand navigation menu
white-space: initial;
}

@each $depth in (2, 3, 4, 5) {
@each $depth in (2, 3, 4, 5, 6) {
&.depth-#{$depth} > .pt-menu-item {
padding-left: $nav-item-padding + $nav-item-indent * ($depth - 1);
}
Expand Down

0 comments on commit f764510

Please sign in to comment.