DOCS-3760: Move to tablesteps for complex content

assets/scss/_styles_project.scss

@@ -539,7 +539,7 @@ details[open] > .expand-label {
   border-bottom-left-radius: 4px;
   border-bottom-right-radius: 4px;
   padding: 1rem 1rem;
-  overflow: hidden;
+  overflow: auto;
 }
 
 // First child is the anchor link
@@ -553,8 +553,9 @@ details > div.expand-content > *:last-child {
 }
 
 .expand {
-  padding-bottom: 0.75rem;
   clear: both;
+  margin-bottom: 0.75rem;
+  margin-top: 0.75rem;
 }
 
 .expand i {
@@ -619,6 +620,11 @@ details summary::-webkit-details-marker {
 
 /* START CSS for how-to paths */
 
+.expand.howtoexpand {
+  margin-bottom: 0.5rem;
+  margin-top: 0.5rem;
+}
+
 .expand.howtoexpand summary, .expand.howtoexpand .expand-content {
   background-color: #eaf9fb;
 }
@@ -1112,12 +1118,13 @@ td > ul, td > ol {
 
 /* TAB CSS consistency START */
 
-.nav-tabs {
+.nav.nav-tabs {
   border-bottom: none; // unset from inherited styles
   gap: 1px;
   display: flex;
   flex-direction: row;
   border-bottom: 1px solid #E4E4E6;
+  margin-left: 0rem;
 }
 
 .horizontalheaders > .nav-tabs, .horizontalheaders * .nav-tabs {
@@ -1174,6 +1181,7 @@ td > ul, td > ol {
 
 .horizontalheaders * .nav-tabs > .nav-item, .horizontalheaders > .nav-tabs > .nav-item {
   margin-bottom: 0rem;
+  margin-left: 0rem;
 }
 
 .horizontalheaders > .nav-tabs .nav-item > a {
@@ -1187,12 +1195,14 @@ td > ul, td > ol {
 
 .td-content ol li.nav-item {
   margin-bottom: 0 !important;
+  margin-left: 0 !important;
 }
 
 .tab-content {
   padding: .7rem 0;
   background-color: white;
   border-bottom: 1px solid rgb(215, 215, 217);
+  max-width: 1000px;
 }
 
 .horizontalheaders * .tab-content, .horizontalheaders > .tab-content {
@@ -2080,8 +2090,8 @@ a.ais-Pagination-link:hover {
 
   #sideSearchBar {
     display: unset;
-    margin-right: 0.5rem;
-    margin-left: 0rem;
+    margin-right: 0rem;
+    margin-left: 1rem;
     margin-top: 0.5rem;
   }
 
@@ -2098,30 +2108,23 @@ a.ais-Pagination-link:hover {
 }
 
 #mobile-search {
-  margin-left: 0.5rem;
-  margin-right: 1rem;
+  margin-left: auto;
+  margin-right: auto;
 }
 
 @media (max-width: 768px) {
 
-  #sideSearchBar {
-    padding-right: 0.25rem;
-    margin-left: 1rem;
-  }
 
 
   #mobile-search {
     margin-left: 0rem;
     margin-right: 0rem;
   }
-}
-
-
-@media (max-width: 768px) {
 
   #sideSearchBar {
-    margin-right: 1.0rem;
-    margin-left: 0.75rem;
+    padding-right: 0rem;
+    margin-right: 0.75rem;
+    margin-left: 1.5rem;
   }
 
   .td-sidebar-nav > .td-sidebar-nav__section {
@@ -3262,17 +3265,30 @@ li.active-path.tutorial-heading > a {
   list-style: none;
   counter-reset: item;
   padding-inline-start: 0px;
-  display: table;
   list-style-position: outside;
   margin-bottom: 1rem;
-  width: 100%;
+  width: calc(100% - 2.5rem);;
   margin-left: 2.5rem;
 }
 
 .td-content > ol > li, .td-content > .table * ol > li {
   counter-increment: item;
   margin-bottom: 5px;
-  display: table-row;
+  display: block;
+}
+
+.td-content > ol > li > ul {
+  margin-left: 1rem;
+  margin-bottom: 0.5rem;
+}
+
+.td-content * ul {
+  margin-left: 1rem;
+  padding-left: 0rem;
+}
+
+.td-content * ol * ul > li, .td-content > ol * ul > li {
+  margin-left: 1.5rem;
 }
 
 div.tablestep {
@@ -3334,6 +3350,11 @@ div.tablestep > table td, div.tablestep table td {
   margin-bottom: 0rem;
 }
 
+.td-content > ul li, .td-content > ol li {
+  list-style-position: outside;
+  margin-left: 1.0rem;
+}
+
 .td-content > ul {
   padding-left: 1rem;
 }

docs/data-ai/capture-data/conditional-sync.md

@@ -236,7 +236,7 @@ On your machine's **CONFIGURE** tab, switch to **JSON** mode and add a `selectiv
 
 {{% expand "Click to view a full configuration example" %}}
 
-```json {class="line-numbers linkable-line-numbers" data-line="12-22,25-37,40-45"}
+```json {class="line-numbers linkable-line-numbers" data-line="12-21,25-37,40-45"}
 {
   "components": [
     {

docs/manage/fleet/provision/setup.md

@@ -479,7 +479,7 @@ For a guide you can give to end users for setting up their machine, see [Setup m
 {{< tabs >}}
 {{% tab name="Mobile app" min-height="703px" %}}
 
-{{<video webm_src="/platform/provisioning-demo.webm" mp4_src="/platform/provisioning-demo.mp4" alt="Using the Viam mobile app to provision a new machine with viam-agent." poster="/platform/provisioning-demo.jpg" class="alignright" max-width="400px" style="margin-left: 2rem">}}
+{{<video webm_src="/platform/provisioning-demo.webm" mp4_src="/platform/provisioning-demo.mp4" alt="Using the Viam mobile app to provision a new machine with viam-agent." poster="/platform/provisioning-demo.jpg" class="" max-width="400px" style="margin-left: 2rem">}}
 
 1. Open the app and follow any instructions there until the app directs you to turn on the machine.
 

docs/operate/control/web-app.md

@@ -38,7 +38,7 @@ Refer to the [Viam TypeScript SDK](https://ts.viam.dev/) documentation for avail
 
 The following files create an example TypeScript web app that connects to a machine and displays the latest image from the machine's camera, and the latest sensor readings.
 
-{{<imgproc src="/operate/ts-dashboard.png" resize="x1100" declaredimensions=true alt="A web browser displaying a dashboard with a camera feed and sensor readings." style="max-width:450px" class="imgzoom" >}}
+{{<imgproc src="/operate/ts-dashboard.png" resize="x1100" declaredimensions=true alt="A web browser displaying a dashboard with a camera feed and sensor readings." style="width:450px" class="imgzoom" >}}
 
 {{< tabs >}}
 {{% tab name="main.ts" %}}

docs/operate/get-started/other-hardware/_index.md

@@ -180,21 +180,31 @@ Edit the generated files to add your logic:
 {{< tabs >}}
 {{% tab name="Python" %}}
 
-1. Open <file>/src/models/&lt;model-name&gt;.py</file> and add any necessary imports.
-1. **Edit the `validate_config` function** to do the following:
+{{< table >}}
+{{< tablestep number=1 >}}
+Open <file>/src/models/&lt;model-name&gt;.py</file> and add any necessary imports.
+{{% /tablestep %}}
+{{< tablestep number=2 >}}
+**Edit the `validate_config` function** to do the following:
+
+- Check that the user has configured required attributes and return errors if they are missing.
+- Return a map of any dependencies.
 
-   - Check that the user has configured required attributes and return errors if they are missing.
-   - Return a map of any dependencies.
-     - For more information, see [Module dependencies](/operate/get-started/other-hardware/dependencies/).
+For more information, see [Module dependencies](/operate/get-started/other-hardware/dependencies/).
 
-1. **Edit the `reconfigure` function**, which gets called when the user changes the configuration.
-   This function should do the following:
+{{% /tablestep %}}
+{{< tablestep number=3 >}}
+
+**Edit the `reconfigure` function**, which gets called when the user changes the configuration.
+This function should do the following:
 
-   - If you assigned any configuration attributes to global variables, get the values from the latest `config` object and update the values of the global variables.
-   - Assign default values as necessary to any optional attributes if the user hasn't configured them.
-   - If your module has dependencies, get the dependencies from the `dependencies` map and cast each resource according to which API it implements, as in [this <file>ackermann.py</file> example](https://github.com/mcvella/viam-ackermann-base/blob/main/src/ackermann.py).
+- If you assigned any configuration attributes to global variables, get the values from the latest `config` object and update the values of the global variables.
+- Assign default values as necessary to any optional attributes if the user hasn't configured them.
+- If your module has dependencies, get the dependencies from the `dependencies` map and cast each resource according to which API it implements, as in [this <file>ackermann.py</file> example](https://github.com/mcvella/viam-ackermann-base/blob/main/src/ackermann.py).
+  {{% /tablestep %}}
+  {{< tablestep number=4 >}}
 
-<ol><li style="counter-reset: item 3"><strong>Edit the methods you want to implement</strong>:
+**Edit the methods you want to implement**:
 
 For each method you want to implement, replace the body of the method with your relevant logic.
 Make sure you return the correct type in accordance with the function's return signature.
@@ -323,10 +333,11 @@ if __name__ == "__main__":
 
 You can find more examples by looking at the source code GitHub repos linked from each module in the [Viam Registry](https://app.viam.com/registry).
 
-</li></ol>
+{{% /tablestep %}}
+{{< tablestep number=5 >}}
 
-<ol><li style="counter-reset: item 4"><strong>Add logging</strong> messages as desired.
-   The following log severity levels are available for resource logs:
+**Add logging** messages as desired.
+The following log severity levels are available for resource logs:
 
 ```python {class="line-numbers linkable-line-numbers"}
 # Within some method, log information:
@@ -367,12 +378,14 @@ LOGGER.critical("critical info")
 
 {{< /expand >}}
 
-</li></ol>
+{{% /tablestep %}}
+{{< tablestep number=6 >}}
 
-<ol><li style="counter-reset: item 5"><strong>Edit the generated <file>requirements.txt</file> file</strong> to include any packages that must be installed for the module to run.
-   Depending on your use case, you may not need to add anything here beyond <code>viam-sdk</code> which is auto-populated.
+**Edit the generated <file>requirements.txt</file> file** to include any packages that must be installed for the module to run.
+Depending on your use case, you may not need to add anything here beyond <code>viam-sdk</code> which is auto-populated.
 
-</li></ol>
+{{% /tablestep %}}
+{{< /table >}}
 
 {{% /tab %}}
 {{% tab name="Go" %}}
@@ -382,35 +395,48 @@ LOGGER.critical("critical info")
 This error doesn't exist in the other SDKs, so `AlwaysRebuild` is not supported in those SDKs.
 {{% /hiddencontent %}}
 
-1. Open <file>module.go</file> and add necessary imports.
+{{< table >}}
+{{< tablestep number=1 >}}
+Open <file>module.go</file> and add necessary imports.
+{{% /tablestep %}}
+{{< tablestep number=2 >}}
+**Add any configurable attributes to the `Config` struct.**
+{{% /tablestep %}}
+{{< tablestep number=3 >}}
+**Edit the `Validate` function** to do the following:
 
-1. **Add any configurable attributes to the `Config` struct.**
+- Check that the user has configured required attributes and return errors if they are missing.
+- Return any dependencies.
 
-1. **Edit the `Validate` function** to do the following:
+For more information, see [Module dependencies](/operate/get-started/other-hardware/dependencies/).
+{{% /tablestep %}}
+{{< tablestep number=4 >}}
+
+**(Optional) Create and edit a `Reconfigure` function**:
 
-   - Check that the user has configured required attributes and return errors if they are missing.
-   - Return any dependencies.
-     - For more information, see [Module dependencies](/operate/get-started/other-hardware/dependencies/).<br><br>
+In most cases, you can omit this function and leave `resource.AlwaysRebuild` in the `Config` struct.
+This will cause `viam-server` to fully rebuild the resource each time the user changes the configuration.
 
-1. **(Optional) Create and edit a `Reconfigure` function**:
+If you need to maintain the state of the resource, for example if you are implementing a board and need to keep the software PWM loops running, you should implement this function so that `viam-server` updates the configuration without rebuilding the resource from scratch.
+In this case, your `Reconfigure` function should do the following:
 
-   In most cases, you can omit this function and leave `resource.AlwaysRebuild` in the `Config` struct.
-   This will cause `viam-server` to fully rebuild the resource each time the user changes the configuration.
+- If you assigned any configuration attributes to global variables, get the values from the latest `config` object and update the values of the global variables.
+- Assign default values as necessary to any optional attributes if the user hasn't configured them.
 
-   If you need to maintain the state of the resource, for example if you are implementing a board and need to keep the software PWM loops running, you should implement this function so that `viam-server` updates the configuration without rebuilding the resource from scratch.
-   In this case, your `Reconfigure` function should do the following:
+For an example that implements the `Reconfigure` method, see [<file>mybase.go</file> on GitHub](https://github.com/viamrobotics/rdk/blob/main/examples/customresources/models/mybase/mybase.go).
 
-   - If you assigned any configuration attributes to global variables, get the values from the latest `config` object and update the values of the global variables.
-   - Assign default values as necessary to any optional attributes if the user hasn't configured them.<br><br>
+{{% /tablestep %}}
+{{< tablestep number=5 >}}
 
-   For an example that implements the `Reconfigure` method, see [<file>mybase.go</file> on GitHub](https://github.com/viamrobotics/rdk/blob/main/examples/customresources/models/mybase/mybase.go).
+**Edit the constructor** to do the following:
 
-1. **Edit the constructor** to do the following:
+- If you didn't create a `Reconfigure` function, use the constructor to assign default values as necessary to any optional attributes if the user hasn't configured them.
+- If you created a `Reconfigure` function, make your constructor call `Reconfigure`.
 
-   - If you didn't create a `Reconfigure` function, use the constructor to assign default values as necessary to any optional attributes if the user hasn't configured them.
-   - If you created a `Reconfigure` function, make your constructor call `Reconfigure`.<br><br>
+{{% /tablestep %}}
+{{< tablestep number=6 >}}
 
-<ol><li style="counter-reset: item 4"><strong>Edit the methods you want to implement</strong>:
+**Edit the methods you want to implement**:
 
 For each method you want to implement, replace the body of the method with your relevant logic.
 Make sure you return the correct type in accordance with the function's return signature.
@@ -553,10 +579,9 @@ func (s *helloWorldHelloCamera) Close(context.Context) error {
 {{< /expand >}}
 
 You can find more examples by looking at the source code GitHub repos linked from each module in the [Viam Registry](https://app.viam.com/registry).
-
-</li></ol>
-
-<ol><li style="counter-reset: item 5"><strong>Add logging</strong> messages as desired.
+{{% /tablestep %}}
+{{< tablestep number=7 >}}
+**Add logging** messages as desired.
 
 You can add log messages with various levels of severity:
 
@@ -573,7 +598,8 @@ fn (c *component) someFunction(ctx context.Context, a int) {
 }
 ```
 
-</li></ol>
+{{% /tablestep %}}
+{{< /table >}}
 
 {{% alert title="Note" color="note" %}}
 In order to see debug logs when using your modular resource, you'll need to run `viam-server` with the `-debug` option.
@@ -738,7 +764,7 @@ viam module build local
 Then restart it in your machine's **CONFIGURE** tab in the Viam app.
 In upper right corner of the module's card, click the **...** menu, then click **Restart**.
 
-{{<imgproc src="/registry/restart-module.png" resize="x600" declaredimensions=true alt="Module menu." style="max-width:300px" class="shadow" >}}
+{{<imgproc src="/registry/restart-module.png" resize="x600" declaredimensions=true alt="Module menu." style="width:300px" class="shadow" >}}
 
 {{< /expand >}}
 
@@ -792,7 +818,7 @@ Configure any required attributes using proper JSON syntax.
 Click the **TEST** bar at the bottom of your modular component configuration, and check whether it works as expected.
 For example, if you created a sensor component, check whether readings are displayed.
 
-{{<imgproc src="/how-tos/sensor-test.png" resize="x1100" declaredimensions=true alt="The test section of an example modular sensor, with readings displayed." style="max-width:600px" class="shadow" >}}
+{{<imgproc src="/how-tos/sensor-test.png" resize="x1100" declaredimensions=true alt="The test section of an example modular sensor, with readings displayed." style="width:600px" class="shadow" >}}
 
 {{% /tablestep %}}
 {{% tablestep number=5 %}}
@@ -825,7 +851,7 @@ viam module build local
 Then restart it in your machine's **CONFIGURE** tab in the Viam app.
 In upper right corner of the module's card, click **...** menu, then click **Restart**.
 
-{{<imgproc src="/registry/restart-module.png" resize="x600" declaredimensions=true alt="Module menu." style="max-width:300px" class="shadow" >}}
+{{<imgproc src="/registry/restart-module.png" resize="x600" declaredimensions=true alt="Module menu." style="width:300px" class="shadow" >}}
 
 {{% /tab %}}
 {{% tab name="Go" %}}