Add new codelabs (#3763)

.codespellignore

@@ -1,4 +1,5 @@
 SME
 AbsoluteY
 DOUT
-tread
+tread
+ToBot

assets/js/tutorials.js

@@ -231,7 +231,6 @@ search.start();
 search.addWidgets([{
   init: function(options) {
     options.helper.toggleRefinement('resource', 'tutorial');
-    options.helper.toggleRefinement('resource', 'blogpost');
   }
 }]);
 search.on("render", function () {
@@ -280,15 +279,15 @@ search.on("render", function () {
     document.getElementById("filter-level").textContent = "Level";
   }
   if (
-    search.helper.state.facetsRefinements.platformarea &&
-    search.helper.state.facetsRefinements.platformarea.length
+    search.helper.state.disjunctiveFacetsRefinements.resource &&
+    search.helper.state.disjunctiveFacetsRefinements.resource.length
   ) {
-    document.getElementById("filter-platformarea").textContent =
-      "Areas (" +
-      search.helper.state.facetsRefinements.platformarea.length +
+    document.getElementById("filter-resources").textContent =
+      "Content Types (" +
+      search.helper.state.disjunctiveFacetsRefinements.resource.length +
       ")";
   } else {
-    document.getElementById("filter-platformarea").textContent = "Platform Areas";
+    document.getElementById("filter-resources").textContent = "Content Types";
   }
   if (
     search.helper.state.facetsRefinements &&

docs/tutorials/projects/apriltag.md

@@ -0,0 +1,20 @@
+---
+title: "Use an AprilTag scanner"
+linkTitle: "Use an AprilTag scanner"
+type: "docs"
+layout: "empty"
+canonical: "https://codelabs.viam.com/guide/apriltag/index.html"
+tags: ["APIs", "python"]
+description: "Learn how to detect and decode AprilTags using a Viam module. We'll leverage the apriltag and OpenCV Python libraries to process images from a camera and extract information encoded in AprilTags."
+images: ["https://codelabs.viam.com/guide/apriltag/img/a5b18406088a80fa.png"]
+imageAlt: "apriltag demo"
+authors: ["Joyce Lin"]
+languages: []
+viamresources: ["camera", "vision"]
+platformarea: ["core"]
+level: "Intermediate"
+date: "2024-12-09"
+updated: "2024-12-09"
+cost: "0"
+resource: "codelab"
+---

docs/tutorials/projects/elastic.md

@@ -0,0 +1,23 @@
+---
+title: "Use Sensor Data with Webhooks and Elastic Cloud"
+linkTitle: "Use Sensor Data with Webhooks and Elastic Cloud"
+type: "docs"
+layout: "empty"
+canonical: "https://codelabs.viam.com/guide/monitoring-automation-elastic/index.html"
+tags: ["APIs", "python"]
+description: "Learn how to continually index sensor data from Viam into Elasticsearch and display an alert in the real world."
+images:
+  [
+    "https://codelabs.viam.com/guide/monitoring-automation-elastic/img/aa78ebe437bc2401.png",
+  ]
+imageAlt: "architecture diagram"
+authors: ["Joyce Lin"]
+languages: []
+viamresources: ["sensor", "board", "movement_sensor", "data_manager"]
+platformarea: ["core"]
+level: "Intermediate"
+date: "2024-12-09"
+updated: "2024-12-09"
+cost: "0"
+resource: "codelab"
+---

docs/tutorials/projects/person-detection-ha.md

@@ -0,0 +1,21 @@
+---
+title: "Set up people detection notifications in Home Assistant"
+linkTitle: "Set up people detection notifications in Home Assistant"
+type: "docs"
+layout: "empty"
+canonical: "https://codelabs.viam.com/guide/home-assistant/index.html"
+tags: ["APIs", "python"]
+description: "Learn how to install the integration through the Home Assistant Community Store (HACS) and use a vision service to detect people from a camera connected to Home Assistant."
+images:
+  ["https://codelabs.viam.com/guide/home-assistant/img/a630d5dcaf9e11c7.png"]
+imageAlt: "person detection"
+authors: ["Nick Hehr"]
+languages: []
+viamresources: ["mlmodel", "vision", "camera"]
+platformarea: ["core"]
+level: "Intermediate"
+date: "2024-12-09"
+updated: "2024-12-09"
+cost: "0"
+resource: "codelab"
+---

docs/tutorials/projects/qr-code.md

@@ -0,0 +1,20 @@
+---
+title: "Use a QR code scanner"
+linkTitle: "Use a QR code scanner"
+type: "docs"
+layout: "empty"
+canonical: "https://codelabs.viam.com/guide/qrcode/index.html"
+tags: ["APIs", "python"]
+description: "Learn how to use a QR code scanner to detect and decode QR codes using a Viam module. We'll leverage the pyzbar and OpenCV Python libraries to process images from a camera and extract information encoded in QR codes."
+images: ["https://codelabs.viam.com/guide/qrcode/img/d26bc88909306225.png"]
+imageAlt: "qr code demo"
+authors: ["Joyce Lin"]
+languages: []
+viamresources: ["camera", "vision"]
+platformarea: ["core"]
+level: "Intermediate"
+date: "2024-12-09"
+updated: "2024-12-09"
+cost: "0"
+resource: "codelab"
+---

docs/tutorials/projects/shana-tobot.md

@@ -0,0 +1,20 @@
+---
+title: "Dip apples in honey with Shana ToBot"
+linkTitle: "Dip apples in honey with Shana ToBot"
+type: "docs"
+layout: "empty"
+canonical: "https://codelabs.viam.com/guide/shana-tobot/index.html"
+tags: ["APIs", "python"]
+description: "This tutorial will walk you through making your own vending machine from scratch, along with a web application that allows you to operate your machine from any device."
+images: ["https://codelabs.viam.com/guide/shana-tobot/img/686d2a32f40cc254.jpg"]
+imageAlt: "sticker machine"
+authors: ["Natalia Jacobowitz"]
+languages: []
+viamresources: ["arm"]
+platformarea: ["core"]
+level: "Intermediate"
+date: "2024-12-09"
+updated: "2024-12-09"
+cost: "0"
+resource: "codelab"
+---

docs/tutorials/projects/sticker-machine.md

@@ -0,0 +1,21 @@
+---
+title: "Make your own sticker vending machine"
+linkTitle: "Make your own sticker vending machine"
+type: "docs"
+layout: "empty"
+canonical: "https://codelabs.viam.com/guide/sticker-wizard/index.html"
+tags: ["APIs", "python"]
+description: "This tutorial will walk you through making your own vending machine from scratch, along with a web application that allows you to operate your machine from any device."
+images:
+  ["https://codelabs.viam.com/guide/sticker-wizard/img/ef0f6732d21efc33.jpeg"]
+imageAlt: "sticker machine"
+authors: ["Nick Hehr"]
+languages: []
+viamresources: ["servo", "motor", "board"]
+platformarea: ["core"]
+level: "Intermediate"
+date: "2024-12-09"
+updated: "2024-12-09"
+cost: "0"
+resource: "codelab"
+---

layouts/docs/tutorials.html

@@ -57,8 +57,7 @@ <h4 class="alert-heading">Missing the filtering UI?</h4>
                                 <div class="filter" id="filter-components" aria-expanded="false" data-toggle="collapse" data-target="#components-list">Components</div>
                                 <div class="filter" id="filter-services" aria-expanded="false" data-toggle="collapse" data-target="#services-list">Services</div>
                                 <div class="filter" id="filter-level" aria-expanded="false" data-toggle="collapse" data-target="#level-list">Level</div>
-                                <div class="filter" id="filter-platformarea" aria-expanded="false" data-toggle="collapse" data-target="#platformarea-list">Platform Areas</div>
-                                <div class="filter" id="filter-resources" aria-expanded="false" data-toggle="collapse" data-target="#resource-list">Content Type</div>
+                                <div class="filter" id="filter-resources" aria-expanded="false" data-toggle="collapse" data-target="#resource-list">Content Types</div>
                             </div>
                             <div class="accordion-group search-panel__filters show-on-wide lozad" id="tutorial-filter-items">
                                 <div id="languages-list" class="search-facets collapse" data-parent="#tutorial-menu"></div>