DOCS-2961: Add How-to path expanders (#3568)

viamrobotics · Oct 16, 2024 · ef77080 · ef77080
1 parent 5c7de5a
commit ef77080
Show file tree

Hide file tree

Showing 7 changed files with 283 additions and 60 deletions.
diff --git a/assets/js/howtos.js b/assets/js/howtos.js
@@ -90,7 +90,35 @@ const customRefinementList = instantsearch.connectors.connectRefinementList(
   },
 );
 
-search.addWidgets([
+let refinementLists = [customRefinementList({
+  container: "platformarea-list",
+  attribute: "platformarea",
+  operator: "or",
+  sortBy: ["name:asc"],
+  items: [
+    { label: "Data Management", value: "data" },
+    { label: "Machine Learning", value: "ml" },
+    { label: "Core", value: "core" },
+    { label: "Fleet Management", value: "fleet" },
+    { label: "Registry", value: "registry" },
+    { label: "Mobility", value: "mobility" },
+  ],
+}),
+customRefinementList({
+  container: "resource-list",
+  attribute: "resource",
+  operator: "or",
+  sortBy: ["name:asc"],
+  items: [
+    { label: "tutorial" },
+    { label: "how-to" },
+    { label: "quickstart" },
+    { label: "blogpost" },
+    { label: "codelab" },
+  ],
+})]
+
+let searchWidgets = [
   instantsearch.widgets.hits({
     container: "#hits",
     templates: {
@@ -111,48 +139,39 @@ search.addWidgets([
   instantsearch.widgets.configure({
     hitsPerPage: 12,
   }),
-
-  customRefinementList({
-    container: "platformarea-list",
-    attribute: "platformarea",
-    operator: "or",
-    sortBy: ["name:asc"],
-    items: [
-      { label: "Data Management", value: "data" },
-      { label: "Machine Learning", value: "ml" },
-      { label: "Core", value: "core" },
-      { label: "Fleet Management", value: "fleet" },
-      { label: "Registry", value: "registry" },
-      { label: "Mobility", value: "mobility" },
-    ],
-  }),
-  customRefinementList({
-    container: "resource-list",
-    attribute: "resource",
-    operator: "or",
-    sortBy: ["name:asc"],
-    items: [
-      { label: "tutorial" },
-      { label: "how-to" },
-      { label: "quickstart" },
-      { label: "blogpost" },
-      { label: "codelab" },
-    ],
-  }),
   instantsearch.widgets.pagination({
     container: "#pagination",
   }),
-]);
+];
+
+search.addWidgets(refinementLists);
 
 search.start();
-// Only show tutorials and blogposts to begin with
+// Only show guide & howtos
 search.addWidgets([{
   init: function(options) {
     options.helper.toggleRefinement('resource', 'how-to');
     options.helper.toggleRefinement('resource', 'quickstart');
   }
 }]);
+
+let widgetsAdded = true;
+
 search.on("render", function () {
+  if (search.helper.state.disjunctiveFacetsRefinements.platformarea.length) {
+    if (!widgetsAdded) {
+      widgetsAdded = true;
+      // Only show expanders to begin with
+      search.addWidgets(searchWidgets);
+      document.getElementById("how-to-paths").classList.add("isHidden");
+    }
+  } else {
+    if (widgetsAdded) {
+      widgetsAdded = false;
+      search.removeWidgets(searchWidgets);
+      document.getElementById("how-to-paths").classList.remove("isHidden");
+    }
+  }
 
   if (
     search.helper.state.facetsRefinements &&

diff --git a/assets/js/tutorials.js b/assets/js/tutorials.js
@@ -21,15 +21,18 @@ const typesenseInstantsearchAdapter = new TypesenseInstantSearchAdapter({
     sort_by: "featured:asc,date:desc",
   },
 });
+
 const searchClient = typesenseInstantsearchAdapter.searchClient;
 
 const search = instantsearch({
   indexName: "tutorials",
   searchClient,
 });
 
+
 const customRefinementList = instantsearch.connectors.connectRefinementList(
   ({ items, refine, widgetParams }, isFirstRender) => {
+
     const container = document.getElementById(widgetParams.container);
 
     if (isFirstRender) {

diff --git a/assets/scss/_styles_project.scss b/assets/scss/_styles_project.scss
@@ -515,8 +515,67 @@ details summary::-webkit-details-marker {
 
 /* END CSS FOR EXPANDER */
 
+/* START CSS for how-to paths */
 
-/* START card styling */
+.expand.howtoexpand summary, .expand-content {
+  background-color: #eaf9fb;
+}
+
+.howtoexpand .expand-label {
+  padding-top: 1rem;
+  padding-bottom: 0;
+}
+
+.howtoexpand .expand-label > span > div {
+  display: flex;
+  align-items:baseline;
+}
+
+.howtoexpand .expand-label > span > div > div {
+  padding-right: 14px;
+}
+
+.howtoexpand .expand-label i {
+  font-size: x-small;
+}
+
+.howtoexpand .expand-content {
+  padding-top: 0;
+  padding-bottom: 0;
+}
+
+.howtoexpand .expand-content .card-container {
+  margin-bottom: 1rem;
+}
+
+@media (min-width: 691px) {
+  .max-page .howtoexpand > .expand-content > .card-container > div > .hover-card {
+    max-width: 280px !important;
+  }
+  .search-panel__results.guides > #hits .hover-card {
+    max-width: 280px !important;
+  }
+}
+
+[open].howtoexpand .expand-label {
+  border-bottom: unset;
+}
+
+.howtoexpand .hover-card {
+  background-color: #fff;
+}
+
+.howtoexpand #tasks {
+  font-size: .93rem !important;
+}
+
+.howtoexpand .hover-card {
+  margin: .8rem;
+}
+
+/* END CSS for how-to paths */
+
+/* card styling START*/
 
 .hover-card {
   display: flex;
@@ -881,7 +940,7 @@ details summary::-webkit-details-marker {
   max-width: 400px;
 }
 
-// START fit either all 4 cards, 2 by 2 or each card individually
+// fit either all 4 cards, 2 by 2 or each card individually START
 
 // Between 1200 - 1650 we need to restrict the container to 850px to ensure
 // the cards go into 2 x 2 formation
@@ -897,24 +956,24 @@ details summary::-webkit-details-marker {
   }
 }
 
-// END fit either all 4 cards, 2 by 2 or each card individually
+// fit either all 4 cards, 2 by 2 or each card individually END
 
-/* END card styling */
+/* card styling END */
 
 
 .nav-link {
   text-decoration: none;
 }
 
-/* START CSS to ensure lists within columns of markdown aren't indented */
+/* CSS to ensure lists within columns of markdown aren't indented START */
 
 td > ul, td > ol {
   padding-inline-start: 1.5em;
 }
 
-/* END CSS to ensure lists within columns of markdown aren't indented */
+/* CSS to ensure lists within columns of markdown aren't indented END */
 
-/* START TAB CSS consistency */
+/* TAB CSS consistency START */
 
 .nav-tabs {
   border-bottom: none; // unset from inherited styles
@@ -979,9 +1038,9 @@ td > ul, td > ol {
   border: 1px solid rgb(215, 215, 217);
 }
 
-/* END TAB CSS consistency */
+/* TAB CSS consistency END */
 
-/* START scroll to top and github styling */
+/* scroll to top and github styling START */
 
 .docsbutton {
   border: 1px solid black;
@@ -1046,10 +1105,10 @@ td > ul, td > ol {
   }
 }
 
-/* END scroll to top and github styling */
+/* scroll to top and github styling END */
 
 
-/* START cookie consent message */
+/* cookie consent message START*/
 .alert.cookieconsent-optout-marketing {
   border-color: #a51aff;
   display: block;
@@ -1063,9 +1122,9 @@ img.embed-responsive.embed-responsive-16by9 {
   aspect-ratio: 16/9;
   padding: 2rem;
 }
-/* END cookie consent message */
+/* cookie consent message END */
 
-/* START GIFs should have a max width */
+/* GIFs should have a max width START */
 
 .td-content > video {
   max-width: 100%;
@@ -1075,7 +1134,7 @@ img.embed-responsive.embed-responsive-16by9 {
   max-width: 100%;
 }
 
-/* END GIFs should have a max width */
+/* GIFs should have a max width END */
 
 // Other styling
 
@@ -1502,12 +1561,16 @@ ul.sectionlist > li:hover {
 
 .search-panel__results.card-container {
   max-width: 100%;
+  visibility: visible;
+  opacity: 1;
+  transition: opacity 250ms ease-in, visibility 0ms ease-in 0ms;
 }
 
 #tutorial-menu {
   display: flex;
   flex-direction: column;
   max-width: 850px;
+  min-height: 46px;
 }
 
 .pill-explainer {
@@ -2460,3 +2523,8 @@ div.explanation > .explanationvisual > .gif {
 
 // Front page styling END
 
+.isHidden {
+  display: hidden;
+  opacity: 0;
+  transition: opacity 250ms ease-out;
+}
diff --git a/docs/how-tos/_index.md b/docs/how-tos/_index.md
@@ -4,7 +4,7 @@ linkTitle: "How-to Guides"
 weight: 200
 type: "docs"
 images: ["/registry/module-puzzle-piece.svg"]
-layout: "howto"
+#layout: "howto"
 description: "Follow instructions for common tasks and workflows."
 no_list: true
 notoc: true
@@ -14,5 +14,78 @@ sitemap:
 aliases:
   - /use-cases/
 date: "2024-09-17"
+howtojs: true
 # updated: ""  # When the content was last entirely checked
 ---
+
+<div class="max-page">
+<p>
+The guides on this page provide solutions for common tasks and workflows. Browse the guides on this page or filter by product area:
+</p>
+
+<div id="tutorial-menu" class="lozad">
+  <div id="resource-list" style="display:none;"></div>
+  <div id="platformarea-list" data-parent="#tutorial-menu"></div>
+</div>
+<div class="search-panel__results guides card-container lozad">
+    <div id="hits" class="row-no-margin"></div>
+    <div id="pagination"></div>
+</div>
+
+<div id="how-to-paths">
+
+{{< how-to-expand title="Get started with Viam basics" tasks="4" level="BEGINNER-FRIENDLY" >}}
+{{< cards >}}
+{{% card link="/how-tos/drive-rover/" noimage="true" %}}
+{{% card link="/how-tos/control-motor/" noimage="true" %}}
+{{% card link="/how-tos/detect-people/" noimage="true" %}}
+{{% card link="/how-tos/collect-data/" noimage="true" %}}
+{{< /cards >}}
+{{< /how-to-expand >}}
+
+{{< how-to-expand "Configure a fleet, starting with one machine" "4" "BEGINNER-FRIENDLY" >}}
+{{< cards >}}
+{{% card link="/how-tos/configure/" noimage="true" %}}
+{{% card link="/how-tos/one-to-many/" noimage="true" %}}
+{{% card link="/how-tos/provision-setup/" noimage="true" %}}
+{{% card link="/how-tos/provision/" noimage="true" %}}
+{{< /cards >}}
+{{< /how-to-expand >}}
+
+{{< how-to-expand "Work with sensor data" "4" "INTERMEDIATE" >}}
+{{< cards >}}
+{{% card link="/how-tos/collect-sensor-data/" noimage="true" %}}
+{{% card link="/how-tos/sensor-data-visualize/" noimage="true" %}}
+{{% card link="/how-tos/sensor-data-query-sdk/" noimage="true" %}}
+{{% card link="/how-tos/sensor-data-query-with-third-party-tools/" noimage="true" %}}
+{{< /cards >}}
+{{< /how-to-expand >}}
+
+{{< how-to-expand "Collect images and train machine learning models" "3" "INTERMEDIATE" >}}
+{{< cards >}}
+{{% card link="/how-tos/collect-data/" noimage="true" %}}
+{{% card link="/how-tos/deploy-ml/" noimage="true" %}}
+{{% card link="/how-tos/create-custom-training-scripts/" noimage="true" %}}
+{{< /cards >}}
+{{< /how-to-expand >}}
+
+{{< how-to-expand "Manage a large fleet of machines" "2" "INTERMEDIATE" >}}
+{{< cards >}}
+{{% card link="/how-tos/manage-fleet/" noimage="true" %}}
+{{% card link="/how-tos/deploy-packages/" noimage="true" %}}
+{{< /cards >}}
+{{< /how-to-expand >}}
+
+{{< how-to-expand "Create and manage modular resources" "4" "INTERMEDIATE" >}}
+{{< cards >}}
+{{% card link="/how-tos/sensor-module/" noimage="true" %}}
+{{% card link="/how-tos/create-module/" noimage="true" %}}
+{{% card link="/how-tos/upload-module/" noimage="true" %}}
+{{% card link="/how-tos/manage-modules/" noimage="true" %}}
+{{< /cards >}}
+{{< /how-to-expand >}}
+
+</div>
+
+<p>If you're looking for examples of how Viam is being used in the world, have a look at <a href="https://www.viam.com/customers">customer stories</a>, follow our <a href="../tutorials/">step-by-step tutorials</a>, or browse our <a href="https://www.viam.com/blog?categories=Tutorials">blog posts</a>.</p>
+</div>