palantir · giladgray · Mar 15, 2017 · Mar 9, 2017 · Mar 9, 2017 · Mar 9, 2017
diff --git a/gulp/docs.js b/gulp/docs.js
@@ -27,7 +27,7 @@ module.exports = (blueprint, gulp, plugins) => {
 
     gulp.task("docs-json", () => {
         const docs = new dm.Documentalist({ renderer: text.renderer });
-        const contents = docs.documentGlobs("packages/core/src/**/*");
+        const contents = docs.documentGlobs("packages/*/src/**/*");
 
         function nestChildPage(child, parent) {
             const originalRef = child.reference;

diff --git a/packages/core/src/docs/_nav.md b/packages/core/src/docs/_nav.md
diff --git a/packages/core/src/docs/index.md b/packages/core/src/docs/index.md
@@ -0,0 +1,18 @@
+---
+reference: core
+---
+
+@# Core
+
+The __@blueprintjs/core__ NPM package is the basis of any Blueprint app. It includes many (30+)
+React components covering all the basic bases, from buttons to form controls to tooltips and trees.
+It also includes CSS styles for every component and the tools to style your own components and apps
+with Sass and Less variables, an elegant color palette, and 300+ UI icons in two sizes.
+
+@page accessibility
+@page colors
+@page typography
+@page icons
+@page variables
+@page components
+@page resources
diff --git a/packages/datetime/src/dateinput.md b/packages/datetime/src/dateinput.md
@@ -1,4 +1,4 @@
-@## Date input
+@# Date input
 
 The `DateInput` component is an [input group](#components.forms.input-group) with a calendar button
 that shows a [`DatePicker`](#components.datetime.datepicker) in a [`Popover`](#components.popover).
@@ -13,7 +13,7 @@ Use this component in forms where the user must enter a date.
 
 @reactExample DateInputExample
 
-@### JavaScript API
+@## JavaScript API
 
 The `DateInput` component is available in the __@blueprintjs/datetime__ package.
 Make sure to review the [general usage docs for date & time components](#components.datetime).

diff --git a/packages/datetime/src/datepicker.md b/packages/datetime/src/datepicker.md
@@ -1,4 +1,4 @@
-@## Date picker
+@# Date picker
 
 A `DatePicker` shows a monthly calendar and allows the user to choose a single date.
 
@@ -17,7 +17,7 @@ for an example of defining `localeUtils` functions using Moment.js.
 
 @reactExample DatePickerExample
 
-@### JavaScript API
+@## JavaScript API
 
 The `DatePicker` component is available in the __@blueprintjs/datetime__ package.
 Make sure to review the [general usage docs for date & time components](#components.datetime).
@@ -28,7 +28,7 @@ in the [**react-day-picker** documentation](http://www.gpbl.org/react-day-picker
 
 @interface IDatePickerProps
 
-@### Using modifiers
+@## Using modifiers
 
 You can use the `modifiers` prop to conditionally apply styles to days. Modifiers are documented in
 full in the [**react-day-picker** documentation](http://react-day-picker.js.org/Modifiers.html).

diff --git a/packages/datetime/src/index.md b/packages/datetime/src/index.md
@@ -0,0 +1,35 @@
+---
+reference: datetime
+---
+
+@# Datetime
+
+The __@blueprintjs/datetime__ NPM package provides several components for interacting with dates and times:
+
+- [`DatePicker`](#components.datetime.datepicker) for selecting a single date (day, month, year).
+
+- [`DateRangePicker`](#components.datetime.daterangepicker) for selecting date ranges.
+
+- [`TimePicker`](#components.datetime.timepicker) for selecting a time (hour, minute, second,
+  millisecond).
+
+- [`DateTimePicker`](#components.datetime.datetimepicker), which composes `DatePicker` and
+  `TimePicker` to select a date and time together.
+
+- [`DateInput`](#components.datetime.dateinput), which composes a text input with a `DatePicker` in
+  a `Popover`, for use in forms.
+
+They are available in the __@blueprintjs/datetime__ package on
+[NPM](https://www.npmjs.com/package/@blueprintjs/datetime).
+
+Make sure to review the [general usage docs for JS components](#components.usage).
+
+```sh
+npm install --save @blueprintjs/datetime
+```
+
+@page datepicker
+@page daterangepicker
+@page timepicker
+@page datetimepicker
+@page dateinput
diff --git a/packages/docs/src/_nav.md b/packages/docs/src/_nav.md
@@ -0,0 +1,8 @@
+<!--
+This file enumerates the exact order of root pages in the left sidebar.
+-->
+
+@page styleguide
+@page core
+@page datetime
+@page table-js
diff --git a/packages/docs/src/index.tsx b/packages/docs/src/index.tsx
@@ -84,11 +84,9 @@ const updateExamples = () => {
     });
 };
 
-// this is invoked exactly once so there's no penalty for lambdas and they make the code cleaner
-// tslint:disable:jsx-no-lambda
 ReactDOM.render(
     <Styleguide
-        defaultPageId="components"
+        defaultPageId="styleguide"
         layout={docs.layout}
         onUpdate={updateExamples}
         pages={docs.docs}
@@ -98,6 +96,5 @@ ReactDOM.render(
     />,
     document.query("#blueprint-documentation"),
 );
-// tslint:enable:jsx-no-lambda
 
 FocusStyleManager.onlyShowFocusOnTabs();
diff --git a/packages/docs/src/styleguide.md b/packages/docs/src/styleguide.md
@@ -1,3 +1,5 @@
+@# Blueprint
+
 Blueprint is a React-based UI toolkit for the web.
 
 Development and issue tracking occurs in [github.com/palantir/blueprint](https://github.com/palantir/blueprint).
@@ -7,7 +9,6 @@ Releases are tagged and documented [here on GitHub](https://github.com/palantir/
 Use the [__blueprintjs__ tag on Stack Overflow](http://stackoverflow.com/questions/tagged/blueprintjs)
 for support requests.
 
-
 @## Usage
 
 Blueprint is available as a collection of NPM packages under the `@blueprintjs` scope.

diff --git a/packages/table/src/docs.md b/packages/table/src/docs.md
@@ -1,3 +1,7 @@
+---
+reference: table-js
+---
+
 @# Table (React)
 
 A highly interactive table React component.
@@ -16,13 +20,13 @@ A highly interactive table React component.
 * Editable headers and cells
 * Integrated header and context menus
 
-@# Installation
+@## Installation
 
 ```sh
 npm install --save @blueprintjs/core @blueprintjs/table
 ```
 
-@# Making a table
+@## Making a table
 
 To create a table, you must define the rows and columns. Add children to the `Table` to create columns,
 and change the `numRows` prop on the `Table` to set the number of rows.
@@ -55,7 +59,7 @@ const renderCell = (rowIndex: number) => {
 
 @reactExample TableDollarExample
 
-@# Sortable content
+@## Sortable content
 
 Because the table is **data-agnostic**, you can display complex data in the
 table and perform arbitrary operations on it.
@@ -70,7 +74,7 @@ In the table below, try:
 
 @reactExample TableSortableExample
 
-@# Editable content
+@## Editable content
 
 To make your table editable, use the `EditableCell` and
 `EditableName` components to create editable table cells and column names.
@@ -87,7 +91,7 @@ regular expression (`[a-zA-Z]`). If the content is invalid, a
 
 @reactExample TableEditableExample
 
-@# Loading states
+@## Loading states
 
 When fetching or updating data, it may be desirable to show a loading state. The table components
 provide fine-grain loading control of loading row headers, column headers, or individual cells.
@@ -112,15 +116,15 @@ individual column's header and body cells. Try selecting a different column in t
 
 @reactExample ColumnLoadingExample
 
-@# Cells
+@## Cells
 
 `Cell`, `EditableCell`, `ColumnHeaderCell`, and `RowHeaderCell` expose a `loading` prop for granular
 control of which cells should show a loading state. Try selecting a different preset loading
 configuration.
 
 @reactExample CellLoadingExample
 
-@# Formatted content
+@## Formatted content
 
 To display long strings or native JavaScript objects, we provide
 `<TruncatedFormat>` and `<JSONFormat>` components, which are designed to be used
@@ -132,19 +136,19 @@ and a `<JSONFormat>` component to show the timezone info object.
 
 @reactExample TableFormatsExample
 
-@# JavaScript API
+@## JavaScript API
 
 The `Table`, `Column`, `Cell`, `ColumnHeaderCell`, `EditableName`, and `EditableCell`
 components are available in the __@blueprintjs/table__ package.
 
-@## Table
+@### Table
 
 The top-level component of the table is `Table`. You must at least define the
 number of rows (`numRows` prop) as well as a set of `Column` children.
 
 @interface ITableProps
 
-@## Column
+@### Column
 
 `Column` contains props for defining how the header and cells of that column
 are rendered.
@@ -157,14 +161,14 @@ Use the `renderRowHeaderCell` prop of `Table` to define row headers.
 
 @interface IColumnProps
 
-@## Cell
+@### Cell
 
 The `Cell` component renders content in the table body. `Cell`s should be
 returned from the `renderCell` method of each `Column`.
 
 @interface ICellProps
 
-@## ColumnHeaderCell
+@### ColumnHeaderCell
 
 Customize how each column header is displayed.
 
@@ -175,22 +179,22 @@ name, you can supply a `renderName` prop to the `ColumnHeaderCell`.
 
 @interface IColumnHeaderCellProps
 
-@## EditableName
+@### EditableName
 
 Return a `EditableName` component from the `renderName` prop on a
 `ColumnHeaderCell` to enable click-to-edit functionality in the column
 header.
 
 @interface IEditableNameProps
 
-@## EditableCell
+@### EditableCell
 
 Return a `EditableCell` component from the `renderCell` prop on a
 `Column` to enable double-click-to-edit functionality in the table body.
 
 @interface IEditableCellProps
 
-@## TruncatedFormat
+@### TruncatedFormat
 
 Wrap your cell contents with a `TruncatedFormat` component like so:
 
@@ -201,7 +205,7 @@ return <Cell><TruncatedFormat>{content}</TruncatedFormat></Cell>
 
 @interface ITruncatedFormatProps
 
-@## JSONFormat
+@### JSONFormat
 
 Wrap your JavaScript object cell contents with a `JSONFormat` component like so: