DOCS-1198: Update MR top level page (#2080)

assets/js/models.js

@@ -29,14 +29,35 @@ const search = instantsearch({
   searchClient,
 });
 
+let filters;
+let itemtemplate;
+
+if (api == "") {
+  filters = {
+    hitsPerPage: 5,
+  };
+  itemtemplate = `
+  <div class="type"><p><a href="{{url}}"><code>{{#helpers.highlight}}{ "attribute": "api" }{{/helpers.highlight}}</code></a></p></div>
+  <div class="name"><p><a href="{{url}}"><code>{{#helpers.highlight}}{ "attribute": "model" }{{/helpers.highlight}}</code></a></p></div>
+  <div class="description">{{#helpers.highlight}}{ "attribute": "description" }{{/helpers.highlight}}</div>
+  `;
+} else {
+  filters = {
+    facetFilters: ["api: " + api],
+    hitsPerPage: 5,
+  };
+  itemtemplate = `
+  <div class="name"><p><a href="{{url}}"><code>{{#helpers.highlight}}{ "attribute": "model" }{{/helpers.highlight}}</code></a></p></div>
+  <div class="description">{{#helpers.highlight}}{ "attribute": "description" }{{/helpers.highlight}}</div>
+  `;
+}
+
+
 search.addWidgets([
   instantsearch.widgets.hits({
     container: "#hits",
     templates: {
-      item: `
-<div class="name"><p><a href="{{url}}"><code>{{#helpers.highlight}}{ "attribute": "model" }{{/helpers.highlight}}</code></a></p></div>
-<div class="description">{{#helpers.highlight}}{ "attribute": "description" }{{/helpers.highlight}}</div>
-`,
+      item: itemtemplate,
     },
   }),
   instantsearch.widgets.searchBox({
@@ -66,10 +87,7 @@ search.addWidgets([
       },
     },
   }),
-  instantsearch.widgets.configure({
-    facetFilters: ["api: " + api],
-    hitsPerPage: 5,
-  }),
+  instantsearch.widgets.configure(filters),
   instantsearch.widgets.pagination({
     container: "#pagination",
     scrollTo: false

assets/scss/_styles_project.scss

@@ -1430,7 +1430,7 @@ a.ais-Pagination-link:hover {
   background-color: rgba(0, 0, 0, 0.05);
 }
 
-.modellistheader > .name, .modellist * .name {
+.modellistheader > .name, .modellist * .name, .modellistheader > .type, .modellist * .type {
   min-width: 25%;
   max-width: 25%;
 }

docs/modular-resources/_index.md

@@ -12,84 +12,72 @@ tags:
     "components",
     "services",
   ]
-description: "Use the Viam module system to implement modular resources that can be included in any Viam-powered robot."
+description: "You can use hardware components or services that Viam does not natively support, by adding them through existing modular resources from the Viam Registry or by creating new modular resources."
 no_list: true
 aliases:
   - "/program/extend/modular-resources/"
   - "/extend/modular-resources/"
   - "/extend/"
+  - "/program/extend/modular-resources/key-concepts/"
+  - "/modular-resources/key-concepts/"
 ---
 
-Viam's [Robot Development Kit (RDK)](/internals/rdk/) provides built-in support for a variety of {{< glossary_tooltip term_id="resource" text="resources" >}}:
+Viam provides built-in support for a variety of {{< glossary_tooltip term_id="resource" text="resources" >}}:
 
-- Various types of hardware [components](/components/).
-- High-level functionality exposed as [services](/services/).
+- Various types of hardware {{< glossary_tooltip term_id="component" text="components" >}}.
+- High-level functionality exposed as {{< glossary_tooltip term_id="service" text="services" >}}.
 
-However, if you want to work with a new hardware component that is not already supported by Viam, or want to introduce a new software service or service model to support additional functionality on your smart machine, you can extend Viam by adding a _modular resource_ to your smart machine.
-
-Modular resources are defined in _modules_, which are easy to create and add to your robot.
-A module can provide one or more modular resources.
-
-With modular resources, you can:
-
-- **Implement a custom component:** If your robot has specialty hardware, such as an unsupported [motor](/components/motor/), and you want to control it using Viam, you can write a driver to support your hardware by implementing the corresponding component API.
-
-- **Implement a custom service:** If your robot makes use of a specialty algorithm or data model when working with services such as [SLAM](/services/slam/), [Vision](/services/vision/), or [Motion planning](/services/motion/), you can implement your own algorithm or model against the corresponding service API.
-
-- **Implement fully custom logic:** If your robot runs specialty or proprietary logic, and you want to use Viam to manage and control that logic, such as when managing a software development lifecycle, you can implement your own custom logic by wrapping the [generic API](/components/generic/).
-
-You can add support for modular resources to your robot by adding a module from the Viam registry.
+If the component or service you want to use for your project is not natively supported, you can [use _modular resources_ from the Viam Registry](#the-viam-registry) or [create your own modular resources](#modular-resources).
+You configure and manage modular resources the same way as built-in resources and use the same [standardized APIs](/program/apis/).
 
 ## The Viam Registry
 
-The [Viam registry](https://app.viam.com/registry) allows hardware and software engineers to collaborate on their robotics projects by writing and sharing custom modules with each other.
-You can add a module from the Viam registry directly from your robot's **Configuration** tab in [the Viam app](https://app.viam.com/), using the **+ Create component** button.
-
-The code behind any modular resource can be packaged as a {{< glossary_tooltip term_id="module" text="module" >}} and uploaded to the Viam registry.
-Once the module has been uploaded to the Registry, you can [deploy the module](/modular-resources/configure/) to any robot in your organization from [the Viam app](https://app.viam.com/).
-
-### Uploading to the Viam Registry
-
-After you finish programming your module, you can [upload your module to the Viam registry](/modular-resources/upload/) to make it available for deployment to robots.
-As part of the upload process, you decide whether your module is _private_ (visible only to other members of your [organization](/manage/fleet/organizations/)), or _public_ (visible to all Viam users).
-
+The [Viam registry](https://app.viam.com/registry) is the central place where you can browse modular resources that add capabilities to your smart machine beyond what is built-in to `viam-server`.
 You can see details about each module in the [Viam registry](https://app.viam.com/registry) on its module details page.
-See the [Odrive module](https://app.viam.com/module/viam/odrive) for an example.
-Public modules also display the number of times a module has been deployed to a robot.
-
-When you make changes to your module, you can [uploaded the newer version](/modular-resources/upload/#update-an-existing-module) with a new version number, and the Viam registry will track each version that you upload.
-
-### Deploying to a Robot
-
-Once you [upload a module to the Viam registry](/modular-resources/upload/), you can [deploy the module](/modular-resources/configure/) to any robot in your organization from [the Viam app](https://app.viam.com/).
-Navigate to your robot's **Configuration** tab, click the **+ Create component** button, then start typing the name of the module you would like to deploy.
 
-By default, a newly-created module is _private_, meaning that the module will only appear for users within your [organization](/manage/fleet/organizations/), but you can later [update your module](/modular-resources/upload/#update-an-existing-module) to set it to be _public_, which makes your module available to all Viam users.
+You can search the available modular resources from the Viam Registry here:
 
-When you deploy a module to your robot, you can [choose how to update that module](/modular-resources/configure/#configure-version-update-management-for-a-registry-module) when new versions become available.
+<div id="searchbox"></div>
+<p>
+<div id="searchstats"></div></p>
+<div class="mr-component" id="">
+  <div class="modellistheader">
+    <div class="type">API</div>
+    <div class="name">Model</div>
+    <div>Description</div>
+  </div>
+<div id="hits" class="modellist">
+</div>
+<div id="pagination"></div>
+</div>
 
-## Get Started
+To use a modular resource from the registry, add it from your robot's **Configuration** tab in [the Viam app](https://app.viam.com/), using the **Create component** button.
 
-To get started working with modular resources:
+## Modular resources
 
-- Learn the [key concepts](/modular-resources/key-concepts/) behind Viam's modular resources that make the module system possible.
+If none of the existing modular resources in the Viam registry support your use case, you can also create your own modular resources:
 
-- [Create your own module](/modular-resources/create/) implementing at least one modular resource.
+- **Implement a custom component**: You can write a driver for an unsupported {{< glossary_tooltip term_id="component" text="component" >}} by implementing the corresponding component API.
 
-- [Upload your module to the Viam registry](/modular-resources/upload/) to share with the community, or just to your own organization.
+- **Implement a custom service**: You can implement your own algorithm or {{< glossary_tooltip term_id="model" text="model" >}} against a corresponding service API or use custom algorithm or data models when working with services such as [SLAM](/services/slam/), [vision](/services/vision/), or [motion planning](/services/motion/).
 
-- Browse the [Viam registry](https://app.viam.com/registry) to see modules uploaded by other users.
+- **Implement fully custom logic**: If your robot runs specialty or proprietary logic, and you want to use Viam to manage and control that logic, such as when managing a software development lifecycle, you can implement your own custom logic by wrapping the [generic API](/components/generic/).
 
-- [Deploy a module](/modular-resources/configure/) to your robot from the Registry.
+To create a new modular resource:
 
-- Browse the [modular resources tutorials](/modular-resources/examples/) for examples of deploying and using custom modular resources on your robot.
+1. [Code a new resource model](/modular-resources/create/) by implementing all methods for the component's or services's [standardized APIs](/program/apis/).
+1. Package your modular resource or modular resources as a {{< glossary_tooltip term_id="module" text="module" >}} and [upload the module to the Viam registry](/modular-resources/upload/) to make it available for deployment to robots.
+   You can upload _private_ modules for your [organization](/manage/fleet/organizations/) or _public_ modules.
+1. Once you have uploaded your module to the registry, you can [deploy and configure the module](/modular-resources/configure/) from [the Viam app](https://app.viam.com/).
+   If the added resource is a component, you can then test it using the [Control tab](/manage/fleet/#remote-control) and [program](/program/) it with Viam's Go or Python SDKs.
 
-Once you have deployed a modular resource, you can test the custom resource using the [Control tab](/manage/fleet/#remote-control) and [program](/program/) it with Viam's Go or Python SDKs.
+Some use cases may require you to extend the standardized API definitions or deploy custom components using a server on a remote part.
+For more information, see [Advanced Modular Resources](/modular-resources/advanced/).
 
 ## Related tutorials
 
 {{< cards >}}
-{{% card link="/modular-resources/examples/rplidar" %}}
-{{% card link="/modular-resources/examples/odrive" %}}
+{{% card link="/tutorials/projects/make-a-plant-watering-robot/" %}}
 {{% card link="/tutorials/custom/custom-base-dog/" %}}
+{{% card link="/modular-resources/examples/custom-arm/" %}}
 {{< /cards >}}

layouts/partials/scripts.html

@@ -6,7 +6,8 @@
 {{ end }}
 
 <!-- JS for listing models from modules -->
-{{ if or (eq .Section "components") (eq .Section "services") }}
+{{ if or ( or (eq .Section "components") (eq .Section "services")) (eq .Page.Title "Extend Viam with Modular Resources") }}
+
 <script src="https://cdn.jsdelivr.net/npm/typesense-instantsearch-adapter@2/dist/typesense-instantsearch-adapter.min.js"></script>
 
 <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>