[doc] Refactor site content navigation

pwa-devdocs/src/_config.yml

@@ -23,12 +23,18 @@ defaults:
     scope:
       path: "technologies"
     values:
-      toc-group: "technologies"
+      toc-group: "getting-started"
   -
     scope:
       path: "pwa-buildpack"
     values:
-      toc-group: "pwa-buildpack"
+      toc-group: "getting-started"
+
+  -
+    scope:
+      path: "pwa-buildpack/reference"
+    values:
+      toc-group: "buildpack-api"
 
   -
     scope:
@@ -40,18 +46,24 @@ defaults:
     scope:
       path: "peregrine"
     values:
-      toc-group: "peregrine"
+      toc-group: "getting-started"
+
+  -
+    scope:
+      path: "peregrine/reference"
+    values:
+      toc-group: "peregrine-api"
 
   -
     scope:
       path: "venia-pwa-concept"
     values:
-      toc-group: "venia-pwa-concept"
+      toc-group: "getting-started"
   -
     scope:
-      path: "venia-ui"
+      path: "venia-ui/reference"
     values:
-      toc-group: "venia-pwa-concept"
+      toc-group: "venia-api"
   -
     scope:
       path: "tutorials"

pwa-devdocs/src/_data/buildpack-api.yml

@@ -0,0 +1,34 @@
+title: PWA Buildpack API
+entries:
+    - label: Buildpack CLI
+      url: /pwa-buildpack/reference/buildpack-cli/
+      entries:
+          - label: Create custom origin
+            url: /pwa-buildpack/reference/buildpack-cli/create-custom-origin/
+
+          - label: Create environment file
+            url: /pwa-buildpack/reference/buildpack-cli/create-env-file/
+
+          - label: Load environment file
+            url: /pwa-buildpack/reference/buildpack-cli/load-env/
+
+    - label: Configure webpack
+      url: /pwa-buildpack/reference/configure-webpack
+
+    - label: Environment variables
+      url: /pwa-buildpack/reference/environment-variables/
+
+    - label: MagentoResolver
+      url: /pwa-buildpack/reference/magento-resolver/
+
+    - label: MagentoRootComponentsPlugin
+      url: /pwa-buildpack/reference/root-components-plugin/
+
+    - label: Object Types
+      url: /pwa-buildpack/reference/object-types/
+
+    - label: PWADevServer
+      url: /pwa-buildpack/reference/pwa-dev-server/
+
+    - label: ServiceWorkerPlugin
+      url: /pwa-buildpack/reference/serviceworker-plugin/

pwa-devdocs/src/_data/getting-started.yml

@@ -0,0 +1,84 @@
+title: Getting Started
+entries:
+    - label: Overview
+      url: /technologies/overview/
+
+    - label: Tools and libraries
+      url: /technologies/tools-libraries/
+
+    - label: Magento integration
+      entries:
+          - label: Magento compatibility
+            url: /technologies/magento-compatibility/
+
+          - label: Magento theme vs PWA storefront
+            url: /technologies/theme-vs-storefront/
+
+    - label: PWA Storefront architecture
+      url: /technologies/storefront-architecture/
+      entries:
+          - label: Runtime architecture
+            url: /technologies/storefront-architecture/runtime/
+
+          - label: Build-time architecture
+            url: /technologies/storefront-architecture/buildtime/
+
+    - label: Basic concepts
+      url: /technologies/basic-concepts/
+      entries:
+          - label: Application shell
+            url: /technologies/basic-concepts/app-shell/
+
+          - label: CSS modules
+            url: /technologies/basic-concepts/css-modules/
+
+          - label: GraphQL
+            url: /technologies/basic-concepts/graphql/
+
+          - label: Client-side caching
+            url: /technologies/basic-concepts/client-side-caching/
+
+          - label: State management
+            url: /technologies/basic-concepts/state-management/
+
+    - label: PWA Buildpack
+      url: /pwa-buildpack/
+      entries:
+          - label: Configuration management
+            url: /pwa-buildpack/configuration-management/
+
+          - label: Troubleshooting
+            url: /pwa-buildpack/troubleshooting/
+
+    - label: Peregrine
+      url: /peregrine/
+      entries:
+          - label: Routing in PWA Studio
+            url: /peregrine/routing/
+
+    - label: Venia storefront concept
+      url: /venia-pwa-concept/
+      entries:
+          - label: Storefront setup
+            url: /venia-pwa-concept/setup/
+
+          - label: Install Venia sample data
+            url: /venia-pwa-concept/install-sample-data/
+
+          - label: Project structure
+            url: /venia-pwa-concept/project-structure/
+
+          - label: Modular components
+            url: /venia-pwa-concept/features/modular-components/
+
+    - label: UPWARD
+      url: /technologies/upward/
+      entries:
+          - label: Reference implementation
+            url: /technologies/upward/reference-implementation/
+
+    - label: Versioning strategy
+      url: /technologies/versioning/
+
+    - label: Contributing to PWA Studio
+      url: /technologies/contribute/

pwa-devdocs/src/_data/peregrine-api.yml

@@ -0,0 +1,41 @@
+title: Peregrine API
+entries:
+    - label: Components and utilities
+      entries:
+          - label: Item
+            url: /peregrine/reference/item/
+
+          - label: Items
+            url: /peregrine/reference/items/
+
+          - label: List
+            url: /peregrine/reference/list/
+
+          - label: Price
+            url: /peregrine/reference/price/
+
+          - label: Router
+            url: /peregrine/reference/router/
+
+    - label: Custom React hooks
+      entries:
+          - label: useDropdown
+            url: /peregrine/reference/hooks/useDropdown/
+
+          - label: useEventListener
+            url: /peregrine/reference/hooks/useEventListener/
+
+          - label: usePagination
+            url: /peregrine/reference/hooks/usePagination/
+
+          - label: useSearchParam
+            url: /peregrine/reference/hooks/useSearchParam/
+
+          - label: useToasts
+            url: /peregrine/reference/toasts/useToasts/
+
+          - label: useToastContext
+            url: /peregrine/reference/toasts/useToastContext/
+
+          - label: useWindowSize
+            url: /peregrine/reference/hooks/useWindowSize/

pwa-devdocs/src/_data/top-nav.yml

@@ -1,14 +1,37 @@
-- label: Overview
-  url: /technologies/overview/
+- label: Getting Started
+  children:
+      - label: Overview
+        url: /technologies/overview/
+
+      - label: Storefront architecture
+        url: /technologies/storefront-architecture/
+
+      - label: Basic concepts
+        url: /technologies/basic-concepts/
 
-- label: PWA Buildpack
-  url: /pwa-buildpack/
+      - label: PWA Buildpack
+        url: /pwa-buildpack/
 
-- label: Peregrine Components
-  url: /peregrine/
+      - label: Peregrine
+        url: /peregrine/
 
-- label: Venia Storefront
-  url: /venia-pwa-concept/
+      - label: Venia storefront concept
+        url: /venia-pwa-concept/
+
+      - label: UPWARD
+        url: /technologies/upward/
 
 - label: Tutorials
   url: /tutorials/
+
+- label: Reference API
+  children:
+      - label: PWA Buildpack
+        url: /pwa-buildpack/reference/buildpack-cli/
+
+      - label: Peregrine API
+        url: /peregrine/reference/item/
+
+      - label: Venia UI API
+        url: /venia-ui/reference/components/Button/
+

pwa-devdocs/src/_data/tutorials.yml

@@ -3,6 +3,9 @@ entries:
     - label: Overview
       url: /tutorials/
 
+    - label: Magento Cloud deployment
+      url: /tutorials/cloud-deploy/
+
     - label: Hello UPWARD
       entries:
           - label: Creating a simple server
@@ -13,6 +16,3 @@ entries:
 
           - label: Adding React
             url: /tutorials/hello-upward/adding-react/
-
-    - label: Magento Cloud deployment
-      url: /tutorials/cloud-deploy/

pwa-devdocs/src/_data/venia-api.yml

@@ -0,0 +1,26 @@
+title: Venia UI API
+entries:
+
+    - label: Button
+      url: /venia-ui/reference/components/Button/
+
+    - label: ButtonGroup
+      url: /venia-ui/reference/components/ButtonGroup/
+
+    - label: Logo
+      url: /venia-ui/reference/components/Logo/
+
+    - label: Mask
+      url: /venia-ui/reference/components/Mask/
+
+    - label: Modal
+      url: /venia-ui/reference/components/Modal/
+
+    - label: ProductImageCarousel
+      url: /venia-ui/reference/components/ProductImageCarousel/
+
+    - label: ToastContainer
+      url: /venia-ui/reference/components/ToastContainer/
+
+    - label: Trigger
+      url: /venia-ui/reference/components/Trigger/

pwa-devdocs/src/_includes/layout/navigation.html

@@ -1,24 +1,18 @@
 <!-- Main Navigation -->
 <ul class="nav-main" role="menubar">
 {% for entry in site.data.top-nav %}
-  {% if entry.links %}
+  {% if entry.children %}
   <li class="nav-main-item" tabindex="0" role="menuitem" aria-haspopup="true">
     <span href="#" data-proofer-ignore tabindex="-1">{{entry.label}}</span>
-
-    <div class="nav-popup" role="menu" aria-hidden="true">
+    <div class="nav-popup">
       <ul>
-        {% for navLink in entry.links %}
-          {% if navLink.url contains 'http' %}
-            {% assign navUrl = navLink.url %}
-          {% else %}
-            {% assign navUrl = site.baseurl | append: navLink.url %}
-          {% endif %}
-          <li><a href="{{navUrl}}">{{navLink.label}}</a></li>
+        {% for subsection in entry.children %}
+        <li role="menuitem">
+          <a href="{{site.baseurl}}{{subsection.url}}">{{subsection.label}}</a>
+        </li> 
         {% endfor %}
-        </ul>
-
+      </ul>
     </div>
-
   </li>
 
   {% else %}

pwa-devdocs/src/_includes/layout/sidebar-nav-root-item.html

@@ -1,4 +1,17 @@
-{% if page.toc-group == "technologies" %}
+
+{% if page.toc-group == "getting-started" %}
+    {% assign toc = site.data.getting-started %}
+
+{% elsif page.toc-group == "buildpack-api" %}
+    {% assign toc = site.data.buildpack-api %}
+
+{% elsif page.toc-group == "peregrine-api" %}
+    {% assign toc = site.data.peregrine-api %}
+
+{% elsif page.toc-group == "venia-api" %}
+    {% assign toc = site.data.venia-api %}
+
+{% elsif page.toc-group == "technologies" %}
     {% assign toc = site.data.technologies %}
 
 {% elsif page.toc-group == "pwa-buildpack" %}

pwa-devdocs/src/_js/index.js

@@ -1 +1,9 @@
 // Javascript goes here
+window.onload = (event) => {
+    let toc = document.getElementsByClassName('table-of-contents');
+
+    if(toc){
+        let active = document.getElementsByClassName('active')[0];
+        active.scrollIntoView({inline: "center", block: "center", behavior: "smooth"}); 
+    }
+  };