{% unless page.url == "/" %} - {% if page.parent != nil and page.parent != page.title %} + {% if page.parent %} diff --git a/_sass/navigation.scss b/_sass/navigation.scss index 0a5fb7d..12dedbd 100644 --- a/_sass/navigation.scss +++ b/_sass/navigation.scss @@ -64,6 +64,16 @@ @include mq(md) { @include fs-3; } + + .navigation-list-child-list { + display: none; + } + + &.active { + .navigation-list-child-list { + display: block; + } + } } .navigation-list-link { diff --git a/docs/ui-components/ui-components.md b/docs/ui-components/ui-components.md index 00e34b8..56ecf9e 100644 --- a/docs/ui-components/ui-components.md +++ b/docs/ui-components/ui-components.md @@ -1,10 +1,9 @@ --- layout: default -title: UI Components +title: "UI Components" nav_order: 3 has_children: true -parent: UI Components -permalink: /ui-components +permalink: /docs/ui-components --- # UI Components diff --git a/docs/utilities/layout.md b/docs/utilities/layout.md index 33f4951..a1b564e 100644 --- a/docs/utilities/layout.md +++ b/docs/utilities/layout.md @@ -3,6 +3,7 @@ layout: default title: Layout nav_order: 2 parent: Utilities +has_children: true --- # Layout Utilities diff --git a/docs/utilities/utilities.md b/docs/utilities/utilities.md index 58cdf01..b368337 100644 --- a/docs/utilities/utilities.md +++ b/docs/utilities/utilities.md @@ -2,9 +2,8 @@ layout: default title: Utilities nav_order: 4 -parent: Utilities has_children: true -permalink: /utilities +permalink: docs/utilities --- # Utilities From 74b468058a477612c76f4cbcde7b40a206ea200b Mon Sep 17 00:00:00 2001 From: Patrick Marsceill Date: Mon, 19 Nov 2018 13:29:17 -0500 Subject: [PATCH 20/24] Better breadcrumb alignment --- _sass/navigation.scss | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/_sass/navigation.scss b/_sass/navigation.scss index 12dedbd..364c569 100644 --- a/_sass/navigation.scss +++ b/_sass/navigation.scss @@ -112,6 +112,11 @@ } // Breadcrumb nav +.breadcrumb-nav { + @include mq(md) { + margin-top: -$sp-4; + } +} .breadcrumb-nav-list { padding-left: 0; From 3ecef3be5cd13d04540ae0700f9d12e4539a72b7 Mon Sep 17 00:00:00 2001 From: Patrick Marsceill Date: Mon, 19 Nov 2018 13:37:49 -0500 Subject: [PATCH 21/24] jk --- docs/ui-components/ui-components.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/ui-components/ui-components.md b/docs/ui-components/ui-components.md index 56ecf9e..7d75a69 100644 --- a/docs/ui-components/ui-components.md +++ b/docs/ui-components/ui-components.md @@ -1,6 +1,6 @@ --- layout: default -title: "UI Components" +title: UI Components nav_order: 3 has_children: true permalink: /docs/ui-components From dac6e4545185c262c4f1f5ec11b7ec4a5212f330 Mon Sep 17 00:00:00 2001 From: Patrick Marsceill Date: Mon, 19 Nov 2018 13:50:54 -0500 Subject: [PATCH 22/24] Update docs --- docs/navigation-structure.md | 58 +++++++++++++++++++++++++++++++----- 1 file changed, 51 insertions(+), 7 deletions(-) diff --git a/docs/navigation-structure.md b/docs/navigation-structure.md index eab6e73..9e69384 100644 --- a/docs/navigation-structure.md +++ b/docs/navigation-structure.md @@ -53,7 +53,7 @@ nav_exclude: true ### Pages with children -Sometimes you will want to create a page with many children (a section). To accomplish this you need to a few things. First, it is recommended that you keep pages that are related in a directory together... For example, in these docs, we keep all of the written documentation in the `./docs` directory and each of the sections in subdirectories like `./docs/ui-components` and `./docs/utilities`. This gives is an organization like: +Sometimes you will want to create a page with many children (a section). To accomplish this you need to define a few things. First, it is recommended that you keep pages that are related in a directory together... For example, in these docs, we keep all of the written documentation in the `./docs` directory and each of the sections in subdirectories like `./docs/ui-components` and `./docs/utilities`. This gives is an organization like: ``` +-- .. @@ -82,10 +82,9 @@ Sometimes you will want to create a page with many children (a section). To acco +-- .. ``` -On the parent pages, add 3 YAML front matter variables: +On the parent pages, add 2 YAML front matter variables: - `has_children: true` (tells us that this a parent page) -- `parent: ` set this to the title of the parent page (in this case, it's this page's title) -- `permalink: ` set this to the directory that the contains the pages +- `permalink:` set this to the directories that the contains the pages #### Example {: .no_toc } @@ -96,12 +95,11 @@ layout: default title: UI Components nav_order: 2 has_children: true -parent: UI Components -permalink: /ui-components +permalink: /docs/ui-components --- ``` -Here we're setting up the UI Components landing page that is available at `/ui-components`, has children and is ordered second in the main nav. +Here we're setting up the UI Components landing page that is available at `/docs/ui-components`, has children and is ordered second in the main nav. ### Child pages @@ -120,6 +118,52 @@ nav_order: 2 The Buttons page appears a child of UI Components and appears second in the UI Components section. +### Children with children + +Child pages can also have children (grand children). This is achieved by using a similar pattern on the child and grand child pages. + +1. Add the `has_children` attribute to the child +1. Add the `parent` and `grand_parent` attribute to the grandchild + +#### Example +{: .no_toc } + +```yaml +--- +layout: default +title: Buttons +parent: UI Components +nav_order: 2 +has_children: true +--- +``` + +```yaml +--- +layout: default +title: Buttons Child Page +parent: Buttons +grand_parent: UI Components +nav_order: 1 +--- +``` + +Would create the following navigation structure: + +``` ++-- .. +| +|-- UI Components +| |-- .. +| | +| |-- Buttons +| | |-- Button Child Page +| | +| |-- .. +| ++-- .. +``` + --- ## Breadcrumbs From c20129c32c45bd8b04680250292ec6c0fb0e4155 Mon Sep 17 00:00:00 2001 From: Patrick Marsceill Date: Mon, 19 Nov 2018 16:26:22 -0500 Subject: [PATCH 23/24] update docs for nav / page strucutre --- docs/navigation-structure.md | 42 +++++++++++++++++++++++++----------- 1 file changed, 29 insertions(+), 13 deletions(-) diff --git a/docs/navigation-structure.md b/docs/navigation-structure.md index 9e69384..cd9de43 100644 --- a/docs/navigation-structure.md +++ b/docs/navigation-structure.md @@ -17,13 +17,13 @@ nav_order: 5 ## Main navigation -The main navigation for your Just the Docs site is on the left side of the page at large screens and on the top (behind a tap) on small screens. The main navigation can be structured to accommodate a multi-level menu system (parent pages with children). +The main navigation for your Just the Docs site is on the left side of the page at large screens and on the top (behind a tap) on small screens. The main navigation can be structured to accommodate a multi-level menu system (pages with children and grandchildren). -### Top level pages +By default, all pages will appear as top level pages in the main nav unless a parent page is defined (see [Pages with Children](#pages-with-children)). -By default, all pages will appear as top level pages in the main nav. +--- -### Ordering pages +## Ordering pages To specify a page order, use the `nav_order` variable in your pages' YAML front matter. @@ -37,9 +37,11 @@ nav_order: 4 --- ``` -### Excluding pages +--- -For specific pages that you do not wish to include in the main navigation, e.g. a 404 page. Use the `nav_exclude: true` parameter in the YAML front matter for that page. +## Excluding pages + +For specific pages that you do not wish to include in the main navigation, e.g. a 404 page or a landing page. Use the `nav_exclude: true` parameter in the YAML front matter for that page. #### Example {: .no_toc } @@ -51,9 +53,11 @@ nav_exclude: true --- ``` -### Pages with children +--- -Sometimes you will want to create a page with many children (a section). To accomplish this you need to define a few things. First, it is recommended that you keep pages that are related in a directory together... For example, in these docs, we keep all of the written documentation in the `./docs` directory and each of the sections in subdirectories like `./docs/ui-components` and `./docs/utilities`. This gives is an organization like: +## Pages with children + +Sometimes you will want to create a page with many children (a section). First, it is recommended that you keep pages that are related in a directory together... For example, in these docs, we keep all of the written documentation in the `./docs` directory and each of the sections in subdirectories like `./docs/ui-components` and `./docs/utilities`. This gives is an organization like: ``` +-- .. @@ -69,7 +73,7 @@ Sometimes you will want to create a page with many children (a section). To acco | | +-- typography.md | | | |-- utilities -| | |-- utilities.md (parent page) +| | |-- utilities.md (parent page) | | |-- color.md | | |-- layout.md | | |-- responsive-modifiers.md @@ -84,7 +88,7 @@ Sometimes you will want to create a page with many children (a section). To acco On the parent pages, add 2 YAML front matter variables: - `has_children: true` (tells us that this a parent page) -- `permalink:` set this to the directories that the contains the pages +- `permalink:` set this to the site directories that the contains the pages #### Example {: .no_toc } @@ -99,9 +103,10 @@ permalink: /docs/ui-components --- ``` -Here we're setting up the UI Components landing page that is available at `/docs/ui-components`, has children and is ordered second in the main nav. +Here we're setting up the UI Components landing page that is available at `/docs/ui-components`, it has children and is ordered second in the main nav. ### Child pages +{: .text-gamma } On child pages, simply set the `parent:` YAML front matter to whatever the parent's page title is and set a nav order (this number is now scoped within the section). @@ -119,6 +124,7 @@ nav_order: 2 The Buttons page appears a child of UI Components and appears second in the UI Components section. ### Children with children +{: .text-gamma } Child pages can also have children (grand children). This is achieved by using a similar pattern on the child and grand child pages. @@ -166,9 +172,19 @@ Would create the following navigation structure: --- -## Breadcrumbs +## Auxiliary Navigation -Breadcrumbs are auto generated based on the parent/child structure and the directory structure for the site. In order for breadcrumbs to work correctly for pages children, the URL structure must be the slugified version of the parent page's title. For example, the page UI Components, must use the `/ui-components` directory to house its descendant pages. +To add a auxiliary navigation item to your site (in the upper right on all pages), add it to the `aux_nav` [configuration option]({{ site.baseurl }}{% link docs/configuration.md %}#aux-nav) in your site's `_config.yml` file. + +#### Example +{: .no_toc } + +```yml +# Aux links for the upper right navigation +aux_links: +"Just the Docs on GitHub": + - "//github.com/pmarsceill/just-the-docs" +``` --- From cd55ce008939903b87171cade995812e08d95bea Mon Sep 17 00:00:00 2001 From: Patrick Marsceill Date: Mon, 19 Nov 2018 16:33:25 -0500 Subject: [PATCH 24/24] Bumb version numbers --- just-the-docs.gemspec | 2 +- package.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/just-the-docs.gemspec b/just-the-docs.gemspec index 3d99264..e043037 100644 --- a/just-the-docs.gemspec +++ b/just-the-docs.gemspec @@ -2,7 +2,7 @@ Gem::Specification.new do |spec| spec.name = "just-the-docs" - spec.version = "0.1.6" + spec.version = "0.2.0" spec.authors = ["Patrick Marsceill"] spec.email = ["patrick.marsceill@gmail.com"] diff --git a/package.json b/package.json index beb4433..d1a87bb 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "just-the-docs", - "version": "0.1.6", + "version": "0.2.0", "description": "A Jekyll theme for documentation", "repository": "pmarsceill/just-the-docs", "license": "MIT",