[2.0] docs site redesign!

packages/core/src/common/_flex.scss

@@ -14,11 +14,13 @@
   flex-direction: $direction;
 
   > * {
-    flex: 0 0 auto;
+    flex-grow: 0;
+    flex-shrink: 0;
   }
 
   > #{$fill} {
-    flex: 1 1 auto;
+    flex-grow: 1;
+    flex-shrink: 1;
   }
 
   @if $margin != none {

packages/core/src/components/forms/_label.scss

@@ -10,14 +10,14 @@ Markup:
 <label class="pt-label {{.modifier}}">
   Label A
   <span class="pt-text-muted">(required)</span>
-  <input class="pt-input" style="width: 200px;" type="text" placeholder="Text input" dir="auto" />
+  <input class="pt-input" style="width: 180px;" type="text" placeholder="Text input" dir="auto" />
 </label>
 <label class="pt-label {{.modifier}}">
   Label B
   <span class="pt-text-muted">(optional)</span>
   <div class="pt-input-group">
     <span class="pt-icon pt-icon-calendar"></span>
-    <input class="pt-input" style="width: 200px;" type="text" placeholder="Input group" dir="auto" />
+    <input class="pt-input" style="width: 180px;" type="text" placeholder="Input group" dir="auto" />
   </div>
 </label>
 

packages/docs-app/src/components/blueprintDocs.tsx

@@ -4,12 +4,14 @@
  * Licensed under the terms of the LICENSE file distributed with this project.
  */
 
-import { Icon, Menu, MenuItem, Popover, Position, setHotkeysDialogProps } from "@blueprintjs/core";
+import { Classes, setHotkeysDialogProps } from "@blueprintjs/core";
 import { IPackageInfo } from "@blueprintjs/docs-data";
-import { Banner, Documentation, IDocumentationProps } from "@blueprintjs/docs-theme";
-import { ITsDocBase } from "documentalist/dist/client";
+import { Banner, Documentation, IDocumentationProps, INavMenuItemProps, NavMenuItem } from "@blueprintjs/docs-theme";
+import classNames from "classnames";
+import { isPageNode, ITsDocBase } from "documentalist/dist/client";
 import * as React from "react";
-import { NavbarActions } from "./navbarActions";
+import { NavHeader } from "./navHeader";
+import { NavIcon } from "./navIcons";
 
 const DARK_THEME = "pt-dark";
 const LIGHT_THEME = "";
@@ -34,62 +36,55 @@ export class BlueprintDocs extends React.Component<IBlueprintDocsProps, { themeN
     public state = { themeName: getTheme() };
 
     public render() {
-        const navbarLeft = [
-            <a className="docs-logo" href="/" key="_logo" />,
-            <div className="pt-navbar-heading docs-heading" key="_title">
-                Blueprint
-            </div>,
-            this.renderVersionsMenu(),
-        ];
-        const navbarRight = (
-            <NavbarActions
+        const banner = (
+            <Banner href="http://blueprintjs.com/docs/v1/">
+                This documentation is for Blueprint v2, which is currently under development. Click here to go to the v1
+                docs.
+            </Banner>
+        );
+        const header = (
+            <NavHeader
                 onToggleDark={this.handleToggleDark}
-                releases={this.props.releases}
                 useDarkTheme={this.state.themeName === DARK_THEME}
+                versions={this.props.versions}
             />
         );
         return (
-            <>
-                <Banner href="http://blueprintjs.com/docs/v1/">
-                    This documentation is for Blueprint v2, which is currently under development. Click here to go to
-                    the v1 docs.
-                </Banner>
-                <Documentation
-                    {...this.props}
-                    className={this.state.themeName}
-                    navbarLeft={navbarLeft}
-                    navbarRight={navbarRight}
-                    onComponentUpdate={this.handleComponentUpdate}
-                    renderViewSourceLinkText={this.renderViewSourceLinkText}
-                />
-            </>
+            <Documentation
+                {...this.props}
+                banner={banner}
+                className={this.state.themeName}
+                header={header}
+                onComponentUpdate={this.handleComponentUpdate}
+                renderNavMenuItem={this.renderNavMenuItem}
+                renderViewSourceLinkText={this.renderViewSourceLinkText}
+            />
         );
     }
 
-    private renderVersionsMenu() {
-        const { versions } = this.props;
-        if (versions.length === 1) {
+    private renderNavMenuItem = (props: INavMenuItemProps) => {
+        if (isPageNode(props.section) && props.section.level === 1) {
+            const pkg = this.props.releases.find(p => p.name === `@blueprintjs/${props.section.route}`);
             return (
-                <div className="pt-text-muted" key="_versions">
-                    v{versions[0].version}
+                <div className={classNames("docs-nav-package", props.className)} data-route={props.section.route}>
+                    <a className="pt-menu-item" href={props.href} onClick={props.onClick}>
+                        <NavIcon route={props.section.route} />
+                        <span>{props.section.title}</span>
+                    </a>
+                    {pkg && (
+                        <a className={Classes.TEXT_MUTED} href={pkg.url} target="_blank">
+                            <small>{pkg.version}</small>
+                        </a>
+                    )}
                 </div>
             );
         }
-
-        const match = /docs\/v([0-9]+)/.exec(location.href);
-        // default to latest release if we can't find a major version in the URL
-        const currentRelease = match == null ? versions[versions.length - 1].version : match[1];
-        const releaseItems = versions.map((rel, i) => <MenuItem key={i} href={rel.url} text={rel.version} />);
-        const menu = <Menu className="docs-version-list">{releaseItems}</Menu>;
-
-        return (
-            <Popover content={menu} position={Position.BOTTOM} key="_versions">
-                <button className="docs-version-selector pt-text-muted">
-                    v{currentRelease} <Icon icon="caret-down" />
-                </button>
-            </Popover>
-        );
-    }
+        if (props.section.title === "Components") {
+            // non-interactive header that expands its menu
+            return <div className="docs-nav-section docs-nav-expanded">{props.section.title}</div>;
+        }
+        return <NavMenuItem {...props} />;
+    };
 
     private renderViewSourceLinkText(entry: ITsDocBase) {
         return `@blueprintjs/${entry.fileName.split("/", 2)[1]}`;
@@ -105,9 +100,9 @@ export class BlueprintDocs extends React.Component<IBlueprintDocsProps, { themeN
     };
 
     private handleToggleDark = (useDark: boolean) => {
-        const themeName = useDark ? DARK_THEME : LIGHT_THEME;
-        setTheme(themeName);
-        setHotkeysDialogProps({ className: this.state.themeName });
-        this.setState({ themeName });
+        const nextThemeName = useDark ? DARK_THEME : LIGHT_THEME;
+        setTheme(nextThemeName);
+        setHotkeysDialogProps({ className: nextThemeName });
+        this.setState({ themeName: nextThemeName });
     };
 }

packages/docs-app/src/components/logo.tsx

@@ -0,0 +1,21 @@
+/*
+ * Copyright 2015 Palantir Technologies, Inc. All rights reserved.
+ *
+ * Licensed under the terms of the LICENSE file distributed with this project.
+ */
+
+import * as React from "react";
+
+export const Logo: React.SFC = () => (
+    <svg width="65" height="76" xmlns="http://www.w3.org/2000/svg">
+        <g fillRule="nonzero">
+            <path d="M28.795 2.421l2.177-1.254a4 4 0 0 1 4.039.027l28.032 16.643A4 4 0 0 1 65 21.277v33.446a4 4 0 0 1-1.958 3.44l-28.03 16.644a4 4 0 0 1-4.039.027L2.004 58.154A4 4 0 0 1 0 54.687V21.313a4 4 0 0 1 2.004-3.467l26.79-15.425zm3.175.48l-.499-.867v-1h3.742L32.01 2.878a2.008 2.008 0 0 0-.04.023zM3.002 19.58A2 2 0 0 0 2 21.313v33.374a2 2 0 0 0 1.002 1.733l28.97 16.68a2 2 0 0 0 2.018-.013l28.03-16.644a2 2 0 0 0 .98-1.72V21.277a2 2 0 0 0-.979-1.72L33.99 2.914a2 2 0 0 0-1.98-.036L3.003 19.58z" />
+            <path d="M34.512 19.74L49 28.435v20.132l-15.984 9.59-.506-.284-14.98-8.427A3 3 0 0 1 16 46.83V28.415l15.497-8.717a3 3 0 0 1 3.015.043zM47 29.567l-13.518-8.11a1 1 0 0 0-1.005-.015L18 29.585V46.83a1 1 0 0 0 .51.871l14.474 8.143L47 47.434V29.566z" />
+            <path d="M.396 21.602l.97-1.749 26.238 14.545-.97 1.749z" />
+            <path d="M23.396 34.602l.97-1.749 26.238 14.545-.97 1.749z" />
+            <path d="M33 20l-16 9v19l16-9V20zm30 0l-16 9v20l16-9V20z" />
+            <path d="M63 39l-16 9v19l16-9z" />
+            <path d="M49 47l-16 9v19l16-9z" />
+        </g>
+    </svg>
+);

packages/docs-app/src/components/navHeader.tsx

@@ -0,0 +1,103 @@
+/*
+ * Copyright 2017 Palantir Technologies, Inc. All rights reserved.
+ *
+ * Licensed under the terms of the LICENSE file distributed with this project.
+ */
+
+import {
+    Classes,
+    Hotkey,
+    Hotkeys,
+    HotkeysTarget,
+    Icon,
+    Menu,
+    MenuItem,
+    NavbarHeading,
+    Popover,
+    Position,
+    Tag,
+} from "@blueprintjs/core";
+import { IPackageInfo } from "@blueprintjs/docs-data";
+import { NavButton } from "@blueprintjs/docs-theme";
+import classNames from "classnames";
+import * as React from "react";
+import { Logo } from "./logo";
+
+export interface INavHeaderProps {
+    onToggleDark: (useDark: boolean) => void;
+    useDarkTheme: boolean;
+    versions: IPackageInfo[];
+}
+
+@HotkeysTarget
+export class NavHeader extends React.PureComponent<INavHeaderProps, {}> {
+    public render() {
+        const { useDarkTheme } = this.props;
+        return (
+            <>
+                <div className="docs-nav-title">
+                    <a className="docs-logo" href="/">
+                        <Logo />
+                    </a>
+                    <div>
+                        <NavbarHeading className="docs-heading">
+                            <span>Blueprint</span> {this.renderVersionsMenu()}
+                        </NavbarHeading>
+                        <a className={Classes.TEXT_MUTED} href="https://github.com/palantir/blueprint" target="_blank">
+                            <small>View on GitHub</small>
+                        </a>
+                    </div>
+                </div>
+                <div className="docs-nav-divider" />
+                <NavButton
+                    icon={useDarkTheme ? "flash" : "moon"}
+                    hotkey="shift + d"
+                    text={useDarkTheme ? "Light theme" : "Dark theme"}
+                    onClick={this.handleDarkSwitchChange}
+                />
+            </>
+        );
+    }
+
+    public renderHotkeys() {
+        return (
+            <Hotkeys>
+                <Hotkey
+                    global={true}
+                    combo="shift + d"
+                    label="Toggle dark theme"
+                    onKeyDown={this.handleDarkSwitchChange}
+                />
+            </Hotkeys>
+        );
+    }
+
+    private renderVersionsMenu() {
+        const { versions } = this.props;
+        if (versions.length === 1) {
+            return (
+                <div className="pt-text-muted" key="_versions">
+                    v{versions[0].version}
+                </div>
+            );
+        }
+
+        const match = /docs\/v([0-9]+)/.exec(location.href);
+        // default to latest release if we can't find a major version in the URL
+        const currentRelease = match == null ? versions[versions.length - 1].version : match[1];
+        const releaseItems = versions.map((rel, i) => <MenuItem key={i} href={rel.url} text={rel.version} />);
+        const menu = <Menu className="docs-version-list">{releaseItems}</Menu>;
+
+        return (
+            <Popover content={menu} position={Position.BOTTOM} key="_versions">
+                <Tag className={classNames(Classes.INTERACTIVE, Classes.MINIMAL, Classes.ROUND)}>
+                    v{currentRelease.split(".", 1)} <Icon icon="caret-down" />
+                </Tag>
+            </Popover>
+        );
+    }
+
+    private handleDarkSwitchChange = () => {
+        this.props.onToggleDark(!this.props.useDarkTheme);
+    };
+}