DOCS-1300: Highlight modular resource creation (#2075)

assets/js/models.js

@@ -34,7 +34,7 @@ search.addWidgets([
     container: "#hits",
     templates: {
       item: `
-<div class="name"><a href="{{url}}"><code>{{#helpers.highlight}}{ "attribute": "model" }{{/helpers.highlight}}</code></a></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>
 `,
     },
@@ -55,9 +55,9 @@ search.addWidgets([
         let results = '';
 
         if (data.hasManyResults) {
-          results += `Showing ${data.nbHits} results:`;
+          results += `${data.nbHits} results:`;
         } else if (data.hasOneResult) {
-          results += `Showing 1 result:`;
+          results += `1 result:`;
         } else {
           results += ``;
         }

docs/components/arm/_index.md

@@ -47,9 +47,21 @@ Arm drivers are also paired, in the RDK, with JSON files that describe the kinem
 
 - If there is no way for the arm to move to the desired location in a straight line, or if it would self-collide or collide with an obstacle that was passed in as something to avoid, then the `move_to_position` call will fail.
 
-## Configuration
+## Supported Models
 
-For configuration information, click on one of the supported arm models:
+To use your arm with Viam, check whether one of the following [built-in models](#built-in-models) or [modular resources](#modular-resources) supports your arm.
+
+{{< alert title="Add support for other models" color="tip" >}}
+
+If none of the existing models fit your use case, you can [create a modular resource](/modular-resources/) to add support for it.
+
+You can follow [this guide](/modular-resources/examples/custom-arm/) to implement your custom arm as a [modular resource](/modular-resources/).
+
+{{< /alert >}}
+
+### Built-in models
+
+For configuration information, click on the model name:
 
 <!-- prettier-ignore -->
 | Model | Description |
@@ -64,8 +76,6 @@ For configuration information, click on one of the supported arm models:
 
 {{<modular-resources api="rdk:component:arm" type="arm">}}
 
-You can follow [this guide](/modular-resources/examples/custom-arm/) to implement your custom arm as a [modular resource](/modular-resources/).
-
 ## Control your arm with Viam's client SDK libraries
 
 To get started using Viam's SDKs to connect to and control your robot, go to your robot's page on [the Viam app](https://app.viam.com), navigate to the **Code sample** tab, select your preferred programming language, and copy the sample code generated.

docs/components/arm/fake.md

@@ -87,7 +87,7 @@ The following attributes are available for `fake` arms:
 <!-- prettier-ignore -->
 | Name | Type | Inclusion | Description |
 | ---- | ---- | --------- | ----------- |
-| `arm-model` | string | Optional | Model name of the robotic arm model you want your fake arm to act as. See [built-in arm models](../#configuration) for supported model names. |
+| `arm-model` | string | Optional | Model name of the robotic arm model you want your fake arm to act as. See [built-in arm models](../#supported-models) for supported model names. |
 | `model-path` | string | Optional | The path to the [kinematic configuration file](/internals/kinematic-chain-config/) of the arm driver you want your fake arm to act as. This path should point to the exact location where the file is located on your computer running `viam-server`. |
 
 {{% alert title="Important" color="note" %}}

docs/components/base/_index.md

@@ -26,9 +26,15 @@ Most mobile robots with a base need at least the following hardware:
 - A power supply for the actuators.
 - Some sort of chassis to hold everything together.
 
-## Configuration
+## Supported Models
 
-For configuration information, click on one of the supported base models:
+To use your base with Viam, check whether one of the following [built-in models](#built-in-models) or [modular resources](#modular-resources) supports your base.
+
+{{< readfile "/static/include/create-your-own-mr.md" >}}
+
+### Built-in models
+
+For configuration information, click on the model name:
 
 <!-- prettier-ignore -->
 | Model | Description |

docs/components/board/_index.md

@@ -12,29 +12,29 @@ images: ["/icons/components/board.svg"]
 # SMEs: Gautham, Rand
 ---
 
-A _board_ is the signal wire hub of a robot that provides access to general purpose input/output [(GPIO)](https://www.howtogeek.com/787928/what-is-gpio/) pins: a collection of pins on the motherboard of a computer that can receive electrical signals.
+A _board_ component on your robot communicates with the other [components](/components/) of the robot.
 
-You can control the flow of electricity to these pins to change their state between "high" (active) and "low" (inactive), and wire them to send [digital signals](https://en.wikipedia.org/wiki/Digital_signal) to and from other hardware.
+A board can be:
 
-This control is simplified with [`viam-server`](/installation/).
-When Viam's software is running on a computer with GPIO pins accessible to external hardware [components](/components/), it manages GPIO signaling to abstract control to {{< glossary_tooltip term_id="resource" text="resource" >}} APIs.
+- A single-board computer (SBC) with GPIO pins and a CPU capable of running `viam-server`.
+- A GPIO peripheral device that must connect to an external computer.
+- A PWM peripheral device that must connect to an SBC that has a CPU and GPIO pins.
 
-{{% figure src="/components/board/board-comp-options.png" alt="Image showing two board options: First, running viam-server locally and second, running via a peripheral plugged into the USB port of a computer that is running the viam-server." title="Two different board options: a single-board computer with GPIO pins running `viam-server` locally, or a GPIO peripheral plugged into a desktop computer's USB port, with the computer running `viam-server`." %}}
+The board of a robot is also its signal wire hub that provides access to general purpose input/output [(GPIO)](https://www.howtogeek.com/787928/what-is-gpio/) pins: a collection of pins on the motherboard of a computer that can receive electrical signals.
 
-The [RDK](/internals/rdk/) also provides the [`GPIOPin` interface](#gpiopin-api) for direct control and monitoring of the state of GPIO pins.
+Signaling is overseen by a computer running `viam-server` which allows you to control the flow of electricity to these pins to change their state between "high" (active) and "low" (inactive), and wire them to send [digital signals](https://en.wikipedia.org/wiki/Digital_signal) to and from other hardware.
 
-## Configuration
+{{% figure src="/components/board/board-comp-options.png" alt="Image showing two board options: First, running viam-server locally and second, running via a peripheral plugged into the USB port of a computer that is running the viam-server." title="Two different board options: a single-board computer with GPIO pins running `viam-server` locally, or a GPIO peripheral plugged into a desktop computer's USB port, with the computer running `viam-server`." %}}
 
-Configure a _board_ component on your robot to communicate with the other [components](/components/) of the robot.
-Signaling is overseen by a computer running `viam-server`.
+## Supported Models
 
-A board can be:
+To use your base with Viam, check whether one of the following [built-in models](#built-in-models) or [modular resources](#modular-resources) supports your base.
 
-- A single-board computer (SBC) with GPIO pins and a CPU capable of running `viam-server`.
-- A GPIO peripheral device that must connect to an external computer.
-- A PWM peripheral device that must connect to an SBC that has a CPU and GPIO pins.
+{{< readfile "/static/include/create-your-own-mr.md" >}}
+
+### Built-in models
 
-For model-specific configuration information, click on one of the following models:
+For configuration information, click on the model name:
 
 <!-- prettier-ignore -->
 | Model | Description |
@@ -238,7 +238,7 @@ Get a `GPIOPin` by {{< glossary_tooltip term_id="pin-number" text="pin number" >
 **Parameters:**
 
 - `name` [(str)](https://docs.python.org/3/library/stdtypes.html#text-sequence-type-str): Pin number of the GPIO pin you want to retrieve as a `GPIOPin` interface.
-  Refer to the pinout diagram and data sheet of your [board model](#configuration) for {{< glossary_tooltip term_id="pin-number" text="pin numbers" >}}.
+  Refer to the pinout diagram and data sheet of your [board model](#supported-models) for {{< glossary_tooltip term_id="pin-number" text="pin numbers" >}}.
 
 **Returns:**
 
@@ -259,7 +259,7 @@ pin = await my_board.gpio_pin_by_name(name="15")
 **Parameters:**
 
 - `name` [(string)](https://pkg.go.dev/builtin#string): {{< glossary_tooltip term_id="pin-number" text="pin number" >}} of the GPIO pin you want to retrieve as a `GPIOPin` interface.
-  Refer to the pinout diagram and data sheet of your [board model](#configuration) for {{< glossary_tooltip term_id="pin-number" text="pin numbers" >}}.
+  Refer to the pinout diagram and data sheet of your [board model](#supported-models) for {{< glossary_tooltip term_id="pin-number" text="pin numbers" >}}.
 
 **Returns:**
 
@@ -291,7 +291,7 @@ Get the name of every [`AnalogReader`](#analogs) configured and residing on the
 
 **Returns:**
 
-- [(List\[str\])](https://docs.python.org/3/library/stdtypes.html#typesseq-list): An list containing the `"name"` of every analog reader [configured](#configuration) on the board.
+- [(List\[str\])](https://docs.python.org/3/library/stdtypes.html#typesseq-list): A list containing the `"name"` of every analog reader [configured](#supported-models) on the board.
 
 For more information, see the [Python SDK Docs](https://python.viam.dev/autoapi/viam/components/board/index.html#viam.components.board.Board.analog_reader_names).
 
@@ -311,7 +311,7 @@ names = await my_board.analog_reader_names()
 
 **Returns:**
 
-- [([]string)](https://go.dev/tour/moretypes/7): An slice containing the `"name"` of every analog reader [configured](#configuration) on the board.
+- [([]string)](https://go.dev/tour/moretypes/7): A slice containing the `"name"` of every analog reader [configured](#supported-models) on the board.
 
 For more information, see the [Go SDK Docs](https://pkg.go.dev/go.viam.com/rdk/components/board#Board).
 
@@ -338,7 +338,7 @@ Get the name of every [`DigitalInterrupt`](#digital_interrupts) configured on th
 
 **Returns:**
 
-- [(List\[str\])](https://docs.python.org/3/library/stdtypes.html#typesseq-list): A list containing the `"name"` of every interrupt [configured](#configuration) on the board.
+- [(List\[str\])](https://docs.python.org/3/library/stdtypes.html#typesseq-list): A list containing the `"name"` of every interrupt [configured](#supported-models) on the board.
 
 For more information, see the [Python SDK Docs](https://python.viam.dev/autoapi/viam/components/board/index.html#viam.components.board.Board.digital_interrupt_names).
 
@@ -358,7 +358,7 @@ names = await my_board.digital_interrupt_names()
 
 **Returns:**
 
-- [([]string)](https://go.dev/tour/moretypes/7): A slice containing the `"name"` of every interrupt [configured](#configuration) on the board.
+- [([]string)](https://go.dev/tour/moretypes/7): A slice containing the `"name"` of every interrupt [configured](#supported-models) on the board.
 
 For more information, see the [Go SDK Docs](https://pkg.go.dev/go.viam.com/rdk/components/board#Board).
 

docs/components/camera/_index.md

@@ -31,9 +31,15 @@ You can use different models to:
 - Combine streams from multiple cameras into one.
 - Transform and process images.
 
-## Configuration
+## Supported Models
 
-For configuration information, click on one of the supported camera models:
+To use your camera with Viam, check whether one of the following [built-in models](#built-in-models) or [modular resources](#modular-resources) supports your camera.
+
+{{< readfile "/static/include/create-your-own-mr.md" >}}
+
+### Built-in models
+
+For configuration information, click on the model name:
 
 <!-- prettier-ignore -->
 | Model | Description |

docs/components/component/_index.md

@@ -28,9 +28,15 @@ Most robots with a COMPONENT need at least the following hardware (optional):
 - Board
 - ...
 
-## Configuration
+## Supported Models
 
-For configuration information, click on one of the supported COMPONENT models:
+To use your COMPONENT with Viam, check whether one of the following [built-in models](#built-in-models) or [modular resources](#modular-resources) supports your COMPONENT.
+
+{{< readfile "/static/include/create-your-own-mr.md" >}}
+
+### Built-in models
+
+For configuration information, click on the model name:
 
 <!-- prettier-ignore -->
 | Model               | Description                                                         |

docs/components/encoder/_index.md

@@ -31,9 +31,15 @@ Most robots with an encoder need at least the following hardware:
   For example, a Raspberry Pi, or another model of single-board computer with GPIO (general purpose input/output) pins.
 - Some sort of rotary robot part (like a motor, joint or dial) for which you want to measure movement.
 
-## Configuration
+## Supported Models
 
-For configuration information, click on one of the supported encoder models:
+To use your encoder with Viam, check whether one of the following [built-in models](#built-in-models) supports your encoder.
+
+{{< readfile "/static/include/create-your-own-mr.md" >}}
+
+### Built-in models
+
+For configuration information, click on the model name:
 
 <!-- prettier-ignore -->
 | Model | Description |
@@ -48,8 +54,6 @@ For configuration information, click on one of the supported encoder models:
 
 {{<modular-resources api="rdk:component:encoder" type="encoder">}} -->
 
-If none of these models fit your use case, you can create a [modular resource](/modular-resources/) to add support for it.
-
 ## Control your encoder with Viam's client SDK libraries
 
 To get started using Viam's SDKs to connect to and control your robot, go to your robot's page on [the Viam app](https://app.viam.com), navigate to the **Code sample** tab, select your preferred programming language, and copy the sample code generated.

docs/components/gantry/_index.md

@@ -34,9 +34,15 @@ Most robots with a gantry need at least the following hardware:
     Requires setting limit switches in the config of the gantry, or setting offsets in the config of the stepper motor.
 - Limit switches, to attach to the ends of the gantry's axis
 
-## Configuration
+## Supported Models
 
-For configuration information, click on one of the supported gantry models:
+To use your gantry with Viam, check whether one of the following [built-in models](#built-in-models) or [modular resources](#modular-resources) supports your gantry.
+
+{{< readfile "/static/include/create-your-own-mr.md" >}}
+
+### Built-in models
+
+For configuration information, click on the model name:
 
 <!-- prettier-ignore -->
 | Model | Description |

docs/components/generic/_index.md

@@ -27,9 +27,15 @@ If you want to use most of an existing API but need just a few other functions,
 
 {{% /alert %}}
 
-## Configuration
+## Supported Models
 
-For configuration information, click on one of the supported generic models:
+To use your generic component with Viam, check whether one of the following [modular resources](#modular-resources) supports your component.
+
+{{< readfile "/static/include/create-your-own-mr.md" >}}
+
+### Built-in models
+
+For configuration information, click on the model name:
 
 <!-- prettier-ignore -->
 Model | Description

docs/components/gripper/_index.md

@@ -14,9 +14,15 @@ no_list: true
 
 A _gripper_ is a robotic grasping device that can open and close, often attached to the end of an [arm](../arm/) or to a [gantry](../gantry/).
 
-## Configuration
+## Supported Models
 
-For configuration information, click on your gripper's model:
+To use your gripper with Viam, check whether one of the following [built-in models](#built-in-models) or [modular resources](#modular-resources) supports your gripper.
+
+{{< readfile "/static/include/create-your-own-mr.md" >}}
+
+### Built-in models
+
+For configuration information, click on the model name:
 
 <!-- prettier-ignore -->
 Model | Description

docs/components/input-controller/_index.md

@@ -26,11 +26,15 @@ Most robots with an input controller need at least the following hardware:
 - A power supply cable or batteries for the input device and the robot.
 - A component that you can direct the input to control, like an [arm](/components/arm/) or [motor](/components/motor/).
 
-## Configuration
+## Supported Models
 
-Configuration depends on the `model` of your device.
+To use your input controller with Viam, check whether one of the following [built-in models](#built-in-models) supports your input controller.
 
-For configuration information, click on one of the following models:
+{{< readfile "/static/include/create-your-own-mr.md" >}}
+
+### Built-in models
+
+For configuration information, click on the model name:
 
 <!-- prettier-ignore -->
 | Model | Description |
@@ -44,14 +48,14 @@ For configuration information, click on one of the following models:
 <!-- No modular resources yet -->
 <!-- ### Modular Resources
 
-{{<modular-resources api="rdk:component:input_controller" type="input_controller">}} -->
-
-If none of these models fit your use case, you can [create a modular resources](/modular-resources/) to add support for it.
+{{<modular-resources api="rdk:component:input_controller" type="input_controller">}}
 
-Once you've configured your input controller according to model type, you can write code to define how your robot processes the input from the controller.
+{{< readfile "/static/include/create-your-own-mr.md" >}}-->
 
 ## Control your robot with an input controller with Viam's client SDK libraries
 
+Once you've configured your input controller according to model type, you can write code to define how your robot processes the input from the controller.
+
 To get started using Viam's SDKs to connect to and control your robot, go to your robot's page on [the Viam app](https://app.viam.com), navigate to the **Code sample** tab, select your preferred programming language, and copy the sample code generated.
 
 {{% snippet "show-secret.md" %}}

docs/components/motor/_index.md

@@ -26,10 +26,15 @@ Most robots with a motor need at least the following hardware:
 
 [^dmcboard]: The `DMC4000` model does not require a board.
 
-## Configuration
+## Supported Models
 
-How you configure your motor with Viam depends more on the motor driver than on the motor itself.
-Click the model names below for configuration information:
+To use your motor with Viam, check whether one of the following [built-in models](#built-in-models) or [modular resources](#modular-resources) supports your motor.
+
+{{< readfile "/static/include/create-your-own-mr.md" >}}
+
+### Built-in models
+
+For configuration information, click on the model name:
 
 <!-- prettier-ignore -->
 Model | Description <a name="model-table"></a>

docs/components/movement-sensor/_index.md

@@ -23,9 +23,16 @@ Viam also supports generic [sensors](/components/sensor/) and [encoders](/compon
 
 {{% /alert %}}
 
-## Configuration
+## Supported Models
 
-Viam supports several different models of GPS, IMU and accelerometer.
+To use your GPS, IMU, accelerometer, or other movement sensor with Viam, check whether one of the following [built-in models](#built-in-models) or [modular resources](#modular-resources) supports your movement sensor.
+
+{{< readfile "/static/include/create-your-own-mr.md" >}}
+
+### Built-in models
+
+Viam supports several different models of movement sensor.
+For configuration information, click on the model name:
 Click the model names below for configuration information:
 
 <!-- prettier-ignore -->