Merge branch 'main' into DOCS-1054/add-session-management-diagram

.github/workflows/docs.yml

@@ -67,16 +67,10 @@ jobs:
         uses: actions/download-artifact@v3
         with:
           name: tutorials-search-file
-      - name: Write env
-        run: |
-          echo TYPESENSE_API_KEY=${{ secrets.TYPESENSE_API_KEY }} > typesense.env
-          echo TYPESENSE_HOST=cgnvrk0xwyj9576lp-1.a1.typesense.net >> typesense.env
-          echo TYPESENSE_PORT=443 >> typesense.env
-          echo TYPESENSE_PROTOCOL=https >> typesense.env
       - name: Upload tutorials documents
         run: |
           jq -c '.[]' typesense.json > documents.jsonl
-          curl -H "X-TYPESENSE-API-KEY: ${TYPESENSE_API_KEY}" \
+          curl -H "X-TYPESENSE-API-KEY: ${{secrets.TYPESENSE_TUTORIALS_API_KEY}}" \
           -X POST \
           -T documents.jsonl \
           "https://cgnvrk0xwyj9576lp-1.a1.typesense.net/collections/tutorials/documents/import?action=upsert"

static/js/carousel.js → assets/js/carousel.js

@@ -32,8 +32,10 @@ document.addEventListener('DOMContentLoaded', function() {
           });
           const scrolllength = carousel.querySelector('ul li:nth-child(2)').offsetLeft - carousel.querySelector('ul li:nth-child(1)').offsetLeft;
           const nthchild = (Math.round((ele.scrollLeft/scrolllength)+1));
-          carousel.querySelector('ol li:nth-child('+nthchild+')').classList.add('selected');
-          carousel.querySelector('ul li:nth-child('+nthchild+')').classList.add('selected');
+          let ol_elem = carousel.querySelector('ol li:nth-child('+nthchild+')');
+          let ul_elem = carousel.querySelector('ul li:nth-child('+nthchild+')');
+          if (ol_elem) { ol_elem.classList.add('selected'); }
+          if (ul_elem) { ul_elem.classList.add('selected'); }
           if(carousel.parentElement.parentElement.querySelector('.dynamictitle')) {
               const title = carousel.querySelector('ul li:nth-child('+nthchild+') img').getAttribute('title');
               if(title) carousel.parentElement.parentElement.querySelector('.dynamictitle').innerHTML = title;
@@ -97,7 +99,7 @@ document.addEventListener('DOMContentLoaded', function() {
       }
 
   // Add CSS to hide arrows when all elements visible
-  var styles = "@media (min-width:" + (slides.length * 100 + 400) "px) {#board-carousel { padding: 0 !important; }#board-carousel div.prev, #board-carousel div.next {visibility: hidden;}}"
+  var styles = "@media (min-width:" + (slides.length * 100 + 400) + "px) {#board-carousel { padding: 0 !important; }#board-carousel div.prev, #board-carousel div.next {visibility: hidden;}}"
 
   var styleSheet = document.createElement("style")
   styleSheet.innerText = styles

static/js/tutorials.js → assets/js/tutorials.js

@@ -85,7 +85,7 @@ search.addWidgets([
     templates: {
       item: `
 <div class="col tutorial hover-card">
-    <a href="{{permalink}}">
+    <a href="..{{relpermalink}}">
     {{#webm}}
         <div class="hover-card-video">
             <div>
@@ -213,3 +213,13 @@ search.on('render', function() {
 
   observer.observe()
 });
+
+document.body.addEventListener('click', function(event) {
+  let filter_box = document.getElementById('tutorial-filter-items');
+    if (!filter_box.contains(event.target)) {
+      open_elem = filter_box.getElementsByClassName("show");
+      if (open_elem) {
+        open_elem[0].classList.remove("show");
+      }
+    }
+}, true);

assets/scss/_styles_project.scss

@@ -1183,10 +1183,20 @@ ul.sectionlist > li:hover {
 }
 
 .search-facets {
-  width: 100%;
+  width: 540px;
   border: 1px solid black;
   margin: 0.2rem;
   padding: 0.2rem;
+  position: absolute;
+  z-index: 1;
+  background-color: white;
+}
+
+@media (max-width: 800px) {
+.search-facets {
+  max-width: 86%;
+  width: 445px;
+}
 }
 
 .search-facets > ul {
@@ -1272,6 +1282,12 @@ a.ais-Pagination-link:hover {
   text-align: center;
   padding: 0;
 }
+
+// Speed up bootstraps transition animations
+.search-facets.collapsing {
+  transition-duration: 0.000002s;
+}
+
 // Pagination CSS end
 
 // Tutorials page end

docs/_index.md

@@ -216,5 +216,3 @@ sitemap:
     {{< card link="/tutorials/projects/integrating-viam-with-openai/" class="yellow">}}
   </div>
 </div>
-
-<script type="text/javascript" src="js/carousel-min.js"></script>

docs/components/arm/fake.md

@@ -15,10 +15,9 @@ Configure a `fake` arm to test different models of robotic arms without any phys
 {{% tab name="Config Builder" %}}
 
 Navigate to the **Config** tab of your robot's page in [the Viam app](https://app.viam.com).
-Click on the **Components** subtab and navigate to the **Create component** menu.
-Enter a name for your arm, select the type `arm`, and select the `fake` model.
-
-Click **Create component**.
+Click on the **Components** subtab and click **Create component**.
+Select the `arm` type, then select the `fake` model.
+Enter a name for your arm and click **Create**.
 
 ![An example configuration for a fake ur5e arm in the Viam app Config Builder.](/components/arm/fake-arm-ui-config.png)
 

docs/components/arm/ur5e.md

@@ -14,10 +14,9 @@ Configure a `ur5e` arm to add a [Universal Robots UR5e](https://www.universal-ro
 {{% tab name="Config Builder" %}}
 
 Navigate to the **Config** tab of your robot's page in [the Viam app](https://app.viam.com).
-Click on the **Components** subtab and navigate to the **Create component** menu.
-Enter a name for your arm, select the type `arm`, and select the `ur5e` model.
-
-Click **Create component**.
+Click on the **Components** subtab and click **Create component**.
+Select the `arm` type, then select the `ur5e` model.
+Enter a name for your arm and click **Create**.
 
 ![Web UI configuration panel for an arm of model ur5e in the Viam app, with Attributes & Depends On drop-downs and the option to add a frame.](/components/arm/ur5e-ui-config.png)
 

docs/components/arm/xarm6.md

@@ -15,10 +15,9 @@ Configure an `xArm6` arm to integrate a [UFACTORY xArm 6](https://www.ufactory.c
 {{% tab name="Config Builder" %}}
 
 Navigate to the **Config** tab of your robot's page in [the Viam app](https://app.viam.com).
-Click on the **Components** subtab and navigate to the **Create component** menu.
-Enter a name for your arm, select the type `arm`, and select the `xArm6` model.
-
-Click **Create component**.
+Click on the **Components** subtab and click **Create component**.
+Select the `arm` type, then select the `xArm6` model.
+Enter a name for your arm and click **Create**.
 
 ![Web UI configuration panel for an arm of model xArm6 in the Viam app, with Attributes & Depends On drop-downs and the option to add a frame.](/components/arm/xArm6-ui-config.png)
 

docs/components/arm/xarm7.md

@@ -15,10 +15,9 @@ Configure an `xArm7` arm to integrate a [UFACTORY xArm 7](https://www.ufactory.c
 {{% tab name="Config Builder" %}}
 
 Navigate to the **Config** tab of your robot's page in [the Viam app](https://app.viam.com).
-Click on the **Components** subtab and navigate to the **Create component** menu.
-Enter a name for your arm, select the type `arm`, and select the `xArm7` model.
-
-Click **Create component**.
+Click on the **Components** subtab and click **Create component**.
+Select the `arm` type, then select the `xArm7` model.
+Enter a name for your arm and click **Create**.
 
 ![Web UI configuration panel for an arm of model xArm6 in the Viam app, with Attributes & Depends On drop-downs and the option to add a frame.](/components/arm/xArm7-ui-config.png)
 

docs/components/arm/xarmlite.md

@@ -14,10 +14,9 @@ Configure an `xArmLite` arm to add a [UFACTORY Lite 6](https://www.ufactory.cc/p
 {{% tab name="Config Builder" %}}
 
 Navigate to the **Config** tab of your robot's page in [the Viam app](https://app.viam.com).
-Click on the **Components** subtab and navigate to the **Create component** menu.
-Enter a name for your arm, select the type `arm`, and select the `xArmLite` model.
-
-Click **Create component**.
+Click on the **Components** subtab and click **Create component**.
+Select the `arm` type, then select the `xArmLite` model.
+Enter a name for your arm and click **Create**.
 
 ![Web UI configuration panel for an arm of model xArmLite in the Viam app, with Attributes & Depends On drop-downs and the option to add a frame.](/components/arm/xArmLite-ui-config.png)
 

docs/components/arm/yahboom-dofbot.md

@@ -14,10 +14,9 @@ Configure a `yahboom-dofbot` arm to add a [Yahboom DOFBOT](https://category.yahb
 {{% tab name="Config Builder" %}}
 
 Navigate to the **Config** tab of your robot's page in [the Viam app](https://app.viam.com).
-Click on the **Components** subtab and navigate to the **Create component** menu.
-Enter a name for your arm, select the type `arm`, and select the `yahboom-dofbot` model.
-
-Click **Create component**.
+Click on the **Components** subtab and click **Create component**.
+Select the `arm` type, then select the `yahboom-dofbot` model.
+Enter a name for your arm and click **Create**.
 
 ![Web UI configuration panel for an arm of model yahboom-dofbot in the Viam app, with Attributes & Depends On drop-downs and the option to add a frame.](/components/arm/yahboom-dofbot-ui-config.png)
 

docs/components/base/agilex-limo.md

@@ -17,10 +17,9 @@ Configure an `agilex-limo` base as follows:
 {{% tab name="Config Builder" %}}
 
 Navigate to the **Config** tab of your robot's page in [the Viam app](https://app.viam.com).
-Click on the **Components** subtab and navigate to the **Create component** menu.
-Enter a name for your base, select the type `base`, and select the `agilex-limo` model.
-
-Click **Create component**.
+Click on the **Components** subtab and click **Create component**.
+Select the `base` type, then select the `agilex-limo` model.
+Enter a name for your base and click **Create**.
 
 ![An example configuration for a agilex-limo base in the Viam app Config Builder.](/components/base/agilex-limo-ui-config.png)
 

docs/components/base/boat.md

@@ -17,10 +17,11 @@ To configure a `boat` base as a component of your robot, first configure the [bo
 {{% tab name="Config Builder" %}}
 
 Navigate to the **Config** tab of your robot's page in [the Viam app](https://app.viam.com).
-Click on the **Components** subtab and navigate to the **Create component** menu.
-Enter a name for your base, select the type `base`, and select the `boat` model.
+Click on the **Components** subtab and click **Create component**.
+Select the `base` type, then select the `boat` model.
+Enter a name for your base and click **Create**.
 
-Click **Create component** and then fill in the attributes for your model:
+Edit and fill in the attributes as applicable.
 
 {{% /tab %}}
 {{% tab name="JSON Template" %}}

docs/components/base/fake.md

@@ -17,10 +17,9 @@ Configure a `fake` base as follows:
 {{% tab name="Config Builder" %}}
 
 Navigate to the **Config** tab of your robot's page in [the Viam app](https://app.viam.com).
-Click on the **Components** subtab and navigate to the **Create component** menu.
-Enter a name for your base, select the type `base`, and select the `fake` model.
-
-Click **Create component**.
+Click on the **Components** subtab and click **Create component**.
+Select the `base` type, then select the `fake` model.
+Enter a name for your base and click **Create**.
 
 ![An example configuration for a fake base in the Viam app Config Builder.](/components/base/fake-base-ui-config.png)
 

docs/components/base/wheeled.md

@@ -18,10 +18,9 @@ Configure a `wheeled` base as follows:
 {{% tab name="Config Builder" %}}
 
 Navigate to the **Config** tab of your robot's page in [the Viam app](https://app.viam.com).
-Click on the **Components** subtab and navigate to the **Create component** menu.
-Enter a name for your base, select the type `base`, and select the `wheeled` model.
-
-Click **Create component**.
+Click on the **Components** subtab and click **Create component**.
+Select the `base` type, then select the `wheeled` model.
+Enter a name for your arm and click **Create**.
 
 {{< imgproc src="/components/base/wheeled-base-ui-config.png" alt="An example configuration for a wheeled base in the Viam app config builder, with Attributes & Depends On drop-downs and the option to add a frame." resize="600x" >}}
 

docs/components/board/beaglebone.md

@@ -21,10 +21,9 @@ Configure a `beaglebone` board to integrate [BeagleBoard's BeagleBone AI 64](htt
 {{% tab name="Config Builder" %}}
 
 Navigate to the **Config** tab of your robot's page in [the Viam app](https://app.viam.com).
-Click on the **Components** subtab and navigate to the **Create component** menu.
-Enter a name for your board, select the type `board`, and select the `beaglebone` model.
-
-Click **Create component**.
+Click on the **Components** subtab and click **Create component**.
+Select the `board` type, then select the `beaglebone` model.
+Enter a name for your board and click **Create**.
 
 ![An example configuration for a beaglebone board in the Viam app Config Builder.](/components/board/beaglebone-ui-config.png)
 

docs/components/board/fake.md

@@ -15,10 +15,9 @@ Configure a `fake` board to test integrating a board into your robot without phy
 {{% tab name="Config Builder" %}}
 
 Navigate to the **Config** tab of your robot's page in [the Viam app](https://app.viam.com).
-Click on the **Components** subtab and navigate to the **Create component** menu.
-Enter a name for your board, select the type `board`, and select the `fake` model.
-
-Click **Create component**.
+Click on the **Components** subtab and click **Create component**.
+Select the `board` type, then select the `fake` model.
+Enter a name for your board and click **Create**.
 
 ![An example configuration for a fake board in the Viam app Config Builder.](/components/board/fake-ui-config.png)
 

docs/components/board/jetson.md

@@ -13,18 +13,25 @@ tags: ["board", "components"]
 
 Follow one of our Jetson [setup guides](/installation/) to prepare your board for running `viam-server` before configuring a `jetson` board.
 
+If you have a CSI camera, follow [these instructions](/extend/modular-resources/examples/csi/) to configure it using the `viam:camera:csi` model.
+
+{{% /alert %}}
+
+{{% alert title="CAUTION: Use 3.3V inputs and outputs" color="warning" %}}
+
+The jetson's GPIO pins are rated for inputs and outputs at 3.3V. Signals from encoders and sensors at even 5V can cause damage to a pin. We recommend connecting hardware that can operate and send signals at 3.3V or lower. For details, see pages 1-3 of the [Jetson Nano Developer Kit 40-Pin Expansion Header GPIO Usage Considerations Applications Note](https://developer.nvidia.com/jetson-nano-developer-kit-40-pin-expansion-header-gpio-usage-considerations-applications-note)
+
 {{% /alert %}}
 
-Configure a `jetson` board to integrate a [NVIDIA Jetson Orin Module and Developer Kit](https://www.nvidia.com/en-us/autonomous-machines/embedded-systems/jetson-orin/), [NVIDIA Jetson Xavier NX](https://www.nvidia.com/en-us/autonomous-machines/embedded-systems/jetson-agx-xavier/), or [NVIDIA Jetson Nano](https://www.nvidia.com/en-us/autonomous-machines/embedded-systems/jetson-nano/) into your robot:
+Configure a `jetson` board to integrate a [NVIDIA Jetson Orin Module and Developer Kit](https://www.nvidia.com/en-us/autonomous-machines/embedded-systems/jetson-orin/), [NVIDIA Jetson AGX](https://www.nvidia.com/en-us/autonomous-machines/embedded-systems/jetson-agx-xavier/), or [NVIDIA Jetson Nano](https://www.nvidia.com/en-us/autonomous-machines/embedded-systems/jetson-nano/) into your robot:
 
 {{< tabs name="Configure an jetson Board" >}}
 {{% tab name="Config Builder" %}}
 
 Navigate to the **Config** tab of your robot's page in [the Viam app](https://app.viam.com).
-Click on the **Components** subtab and navigate to the **Create component** menu.
-Enter a name for your board, select the type `board`, and select the `jetson` model.
-
-Click **Create component**.
+Click on the **Components** subtab and click **Create component**.
+Select the `board` type, then select the `jetson` model.
+Enter a name for your board and click **Create**.
 
 ![An example configuration for a jetson board in the Viam app Config Builder.](/components/board/jetson-ui-config.png)
 

docs/components/board/numato.md

@@ -16,10 +16,9 @@ Configure a `numato` board to integrate [Numato GPIO Peripheral Modules](https:/
 {{% tab name="Config Builder" %}}
 
 Navigate to the **Config** tab of your robot's page in [the Viam app](https://app.viam.com).
-Click on the **Components** subtab and navigate to the **Create component** menu.
-Enter a name for your board, select the type `board`, and select the `numato` model.
-
-Click **Create component**.
+Click on the **Components** subtab and click **Create component**.
+Select the `board` type, then select the `numato` model.
+Enter a name for your board and click **Create**.
 
 ![An example configuration for a numato board in the Viam app Config Builder.](/components/board/numato-ui-config.png)
 

docs/components/board/pca9685.md

@@ -15,10 +15,9 @@ Configure a `pca9685` board to integrate a [PCA9685 Arduino I<sup>2</sup>C Inter
 {{% tab name="Config Builder" %}}
 
 Navigate to the **Config** tab of your robot's page in [the Viam app](https://app.viam.com).
-Click on the **Components** subtab and navigate to the **Create component** menu.
-Enter a name for your board, select the type `board`, and select the `pca9685` model.
-
-Click **Create component**.
+Click on the **Components** subtab and click **Create component**.
+Select the `board` type, then select the `pca9685` model.
+Enter a name for your board and click **Create**.
 
 ![An example configuration for a pca9685 board in the Viam app Config Builder.](/components/board/pca9685-ui-config.png)
 

docs/components/board/pi.md

@@ -21,10 +21,9 @@ Configure a `pi` board to integrate a [Raspberry Pi 4](https://www.raspberrypi.c
 {{% tab name="Config Builder" %}}
 
 Navigate to the **Config** tab of your robot's page in [the Viam app](https://app.viam.com).
-Click on the **Components** subtab and navigate to the **Create component** menu.
-Enter a name for your board, select the type `board`, and select the `pi` model.
-
-Click **Create component**.
+Click on the **Components** subtab and click **Create component**.
+Select the `board` type, then select the `pi` model.
+Enter a name for your board and click **Create**.
 
 ![An example board configuration in the app builder UI. The name (local), type (board) and model (pi) are shown. No other attributes are configured.](/tutorials/scuttlebot/board-empty-json.png)
 

docs/components/board/ti.md

@@ -21,10 +21,9 @@ Configure a `ti` board to integrate a [Texas Instruments TDA4VM](https://devices
 {{% tab name="Config Builder" %}}
 
 Navigate to the **Config** tab of your robot's page in [the Viam app](https://app.viam.com).
-Click on the **Components** subtab and navigate to the **Create component** menu.
-Enter a name for your board, select the type `board`, and select the `ti` model.
-
-Click **Create component**.
+Click on the **Components** subtab and click **Create component**.
+Select the `board` type, then select the `ti` model.
+Enter a name for your board and click **Create**.
 
 ![An example configuration for a ti board in the Viam app Config Builder.](/components/board/ti-ui-config.png)
 

docs/components/board/upboard.md

@@ -23,20 +23,19 @@ Follow [these instructions](https://ubuntu.com/tutorials/install-ubuntu-server)
 Follow [these instructions](https://github.com/up-division/pinctrl-upboard) to do so.
 This driver stabilizes the [GPIO pin mapping definition](https://github.com/up-board/up-community/wiki/Pinout) on the board to make it identical to that of a [Raspberry Pi](/components/board/pi/).
 
-<!-- 
+{{< tabs name="Configure an upboard Board" >}}
+{{% tab name="Config Builder" %}}
 
 Navigate to the **Config** tab of your robot's page in [the Viam app](https://app.viam.com).
-Click on the **Components** subtab and navigate to the **Create component** menu.
-Enter a name for your board, select the type `board`, and select the `upboard` model.
-
-Click **Create component**.
+Click on the **Components** subtab and click **Create component**.
+Select the `board` type, then select the `upboard` model.
+Enter a name for your board and click **Create**.
 
 ![An example configuration for a upboard board in the Viam app Config Builder.](/components/board/upboard-ui-config.png)
 
 Edit and fill in the attributes as applicable.
- -->
 
-{{< tabs name="Configure an upboard Board" >}}
+{{% /tab %}}
 {{% tab name="JSON Template" %}}
 
 Navigate to the **Config** tab of your robot's page in [the Viam app](https://app.viam.com).