DOCS-1204: Add component service cards (#1959)

Co-authored-by: Naomi Pentrel <[email protected]>
viamrobotics · Oct 31, 2023 · e951146 · e951146
1 parent c57ad40
commit e951146
Show file tree

Hide file tree

Showing 16 changed files with 158 additions and 1 deletion.
diff --git a/assets/scss/_styles_project.scss b/assets/scss/_styles_project.scss
@@ -999,6 +999,32 @@ td > ul, td > ol {
   }
 }
 
+// relatedcard styling
+
+.relatedcard {
+  display: flex;
+  flex-direction: column;
+}
+
+.relatedcard a {
+  width: 8rem;
+  text-decoration: none;
+  padding: 0.75rem;
+  text-align: center;
+}
+
+.relatedcard a:hover {
+  background-color: whitesmoke;
+}
+
+.relatedcard div {
+  margin: auto;
+}
+
+.relatedcard p {
+  vertical-align: middle;
+}
+
 // sectionlist styling
 
 ul.sectionlist {

diff --git a/docs/components/arm/_index.md b/docs/components/arm/_index.md
@@ -47,6 +47,14 @@ 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.
 
+## Related Services
+
+{{< cards >}}
+{{< relatedcard link="/services/motion/" >}}
+{{< relatedcard link="/services/frame-system/" >}}
+{{< relatedcard link="/services/data/" >}}
+{{< /cards >}}
+
 ## Supported 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.
@@ -570,5 +578,4 @@ You can also ask questions on the [Community Discord](https://discord.gg/viam) a
 {{< cards >}}
 {{% card link="/tutorials/services/accessing-and-moving-robot-arm" %}}
 {{% card link="/tutorials/projects/claw-game/" %}}
-{{% card link="/services/motion" %}}
 {{< /cards >}}
diff --git a/docs/components/base/_index.md b/docs/components/base/_index.md
@@ -26,6 +26,14 @@ 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.
 
+## Related Services
+
+{{< cards >}}
+{{< relatedcard link="/services/base-rc/" >}}
+{{< relatedcard link="/services/frame-system/" >}}
+{{< relatedcard link="/services/navigation/" >}}
+{{< /cards >}}
+
 ## Supported 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.

diff --git a/docs/components/board/_index.md b/docs/components/board/_index.md
@@ -26,6 +26,13 @@ Signaling is overseen by a computer running `viam-server` which allows you to co
 
 {{% 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`." %}}
 
+## Related Services
+
+{{< cards >}}
+{{< relatedcard link="/services/frame-system/" >}}
+{{< relatedcard link="/services/ml/" >}}
+{{< /cards >}}
+
 ## Supported 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.

diff --git a/docs/components/camera/_index.md b/docs/components/camera/_index.md
@@ -31,6 +31,16 @@ You can use different models to:
 - Combine streams from multiple cameras into one.
 - Transform and process images.
 
+## Related Services
+
+{{< cards >}}
+{{< relatedcard link="/services/data/" >}}
+{{< relatedcard link="/services/vision/" >}}
+{{< relatedcard link="/services/frame-system/" >}}
+{{< relatedcard link="/services/slam/" >}}
+{{< relatedcard link="/services/ml/" >}}
+{{< /cards >}}
+
 ## Supported 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.

diff --git a/docs/components/component/_index.md b/docs/components/component/_index.md
@@ -28,6 +28,15 @@ Most robots with a COMPONENT need at least the following hardware (optional):
 - Board
 - ...
 
+## Related Services
+
+Add services commonly used with the component.
+
+{{< cards >}}
+{{< relatedcard link="/services/data/" >}}
+{{< relatedcard link="/services/frame-system/" >}}
+{{< /cards >}}
+
 ## Supported 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.

diff --git a/docs/components/encoder/_index.md b/docs/components/encoder/_index.md
@@ -31,6 +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.
 
+## Related Services
+
+{{< cards >}}
+{{< relatedcard link="/services/motion/" >}}
+{{< relatedcard link="/services/navigation/" >}}
+{{< relatedcard link="/services/data/" >}}
+{{< relatedcard link="/services/frame-system/" >}}
+{{< /cards >}}
+
 ## Supported Models
 
 To use your encoder with Viam, check whether one of the following [built-in models](#built-in-models) supports your encoder.

diff --git a/docs/components/gantry/_index.md b/docs/components/gantry/_index.md
@@ -34,6 +34,14 @@ 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
 
+## Related Services
+
+{{< cards >}}
+{{< relatedcard link="/services/navigation/" >}}
+{{< relatedcard link="/services/frame-system/" >}}
+{{< relatedcard link="/services/motion/" >}}
+{{< /cards >}}
+
 ## Supported 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.

diff --git a/docs/components/gripper/_index.md b/docs/components/gripper/_index.md
@@ -14,6 +14,14 @@ 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/).
 
+## Related Services
+
+{{< cards >}}
+{{< relatedcard link="/services/data/" >}}
+{{< relatedcard link="/services/frame-system/" >}}
+{{< relatedcard link="/services/motion/" >}}
+{{< /cards >}}
+
 ## Supported Models
 
 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.

diff --git a/docs/components/input-controller/_index.md b/docs/components/input-controller/_index.md
@@ -26,6 +26,14 @@ 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/).
 
+## Related Services
+
+{{< cards >}}
+{{< relatedcard link="/services/base-rc/" >}}
+{{< relatedcard link="/services/data/" >}}
+{{< relatedcard link="/services/frame-system/" >}}
+{{< /cards >}}
+
 ## Supported Models
 
 To use your input controller with Viam, check whether one of the following [built-in models](#built-in-models) supports your input controller.

diff --git a/docs/components/motor/_index.md b/docs/components/motor/_index.md
@@ -26,6 +26,15 @@ Most robots with a motor need at least the following hardware:
 
 [^dmcboard]: The `DMC4000` model does not require a board.
 
+## Related Services
+
+{{< cards >}}
+{{< relatedcard link="/services/frame-system/" >}}
+{{< relatedcard link="/services/motion/" >}}
+{{< relatedcard link="/services/navigation/" >}}
+{{< relatedcard link="/services/slam/" >}}
+{{< /cards >}}
+
 ## Supported Models
 
 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.

diff --git a/docs/components/movement-sensor/_index.md b/docs/components/movement-sensor/_index.md
@@ -23,6 +23,14 @@ Viam also supports generic [sensors](/components/sensor/) and [encoders](/compon
 
 {{% /alert %}}
 
+## Related Services
+
+{{< cards >}}
+{{< relatedcard link="/services/sensors/" >}}
+{{< relatedcard link="/services/motion/" >}}
+{{< relatedcard link="/services/navigation/" >}}
+{{< /cards >}}
+
 ## Supported Models
 
 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.

diff --git a/docs/components/power-sensor/_index.md b/docs/components/power-sensor/_index.md
@@ -15,6 +15,13 @@ images: ["/icons/components/power-sensor.svg"]
 A power sensor is a device that reports measurements of the voltage, current and power consumption in your robot's system.
 Integrate this component to monitor your power levels.
 
+## Related Services
+
+{{< cards >}}
+{{< relatedcard link="/services/data/" >}}
+{{< relatedcard link="/services/sensors/" >}}
+{{< /cards >}}
+
 ## Supported Models
 
 To use your power sensor with Viam, check whether one of the following [built-in models](#built-in-models) or [modular resources](#modular-resources) supports your power sensor.

diff --git a/docs/components/sensor/_index.md b/docs/components/sensor/_index.md
@@ -29,6 +29,14 @@ Most robots with a sensor need at least the following hardware:
 - A [board](/components/board/)
 - Depending on your sensor's output type (analog or digital), an analog-to-digital converter (ADC) may be necessary to allow the sensor to communicate with the board
 
+## Related Services
+
+{{< cards >}}
+{{< relatedcard link="/services/data/" >}}
+{{< relatedcard link="/services/sensors/" >}}
+{{< relatedcard link="/services/navigation/" >}}
+{{< /cards >}}
+
 ## Supported Models
 
 To use your sensor with Viam, check whether one of the following [built-in models](#built-in-models) or [modular resources](#modular-resources) supports your sensor.

diff --git a/docs/components/servo/_index.md b/docs/components/servo/_index.md
@@ -29,6 +29,13 @@ Most robots with a servo need at least the following hardware:
 - A power supply for the board
 - A power supply for the servo
 
+## Related Services
+
+{{< cards >}}
+{{< relatedcard link="/services/frame-system/" >}}
+{{< relatedcard link="/services/data/" >}}
+{{< /cards >}}
+
 {{% alert title="Tip" color="tip" %}}
 
 The Viam servo component supports [hobby servos](https://learn.adafruit.com/adafruit-motor-selection-guide/rc-servos).

diff --git a/layouts/shortcodes/relatedcard.html b/layouts/shortcodes/relatedcard.html
@@ -0,0 +1,18 @@
+{{ $link := (path.Clean (.Get "link")) }}
+{{ $linkWithSlash := printf "%s/" $link }}
+{{ if site.GetPage ($link | string) }}
+{{ with site.GetPage ($link | string) }}
+<div class="relatedcard">
+  <a href="{{ $linkWithSlash }}" target="_blank" title="{{ .LinkTitle }}">
+    <div>
+      <div>
+        {{ if .Params.icon }}
+            {{ partial "imgproc.html" (dict "src" (.Params.icon) "resize" "10x10" "alt" (.Params.linkTitle) "declaredimensions" "true" "style" "") }}
+        {{ end }}
+      </div>
+      <p>{{ .LinkTitle }}</p>
+    </div>
+  </a>
+</div>
+{{ end }}
+{{ end }}