Algolia tutorials page test

viamrobotics · Aug 22, 2023 · 6d2e6d7 · 6d2e6d7
1 parent 479517c
commit 6d2e6d7
Show file tree

Hide file tree

Showing 9 changed files with 259 additions and 77 deletions.
diff --git a/assets/scss/_styles_project.scss b/assets/scss/_styles_project.scss
@@ -566,6 +566,7 @@ END MARKETING CSS
 
 .hover-card.tutorial > a {
   width: 100%;
+  text-decoration: none;
 }
 
 // Text is black
@@ -1130,3 +1131,73 @@ ul.sectionlist > li:hover {
   padding: 0;
   font-size: 30px;
 }
+
+// Tutorials page start
+
+.search-panel__results.card-container {
+  max-width: 100%;
+}
+
+.ais-Hits-item {
+  display: flex;
+}
+
+#hits .ais-Hits-list {
+  list-style-type: none;
+  display: flex;
+  flex-wrap: wrap;
+  width: 100%;
+}
+
+.ais-Pagination-item {
+  display: inline-block;
+  padding: 0.2rem 1rem;
+  margin: 0 0.2rem;
+  border: 1px solid black;
+}
+
+#pagination {
+  margin: 2rem auto;
+}
+
+.search-panel__filters {
+  margin-top: 2rem;
+}
+
+.ais-RefinementList-item {
+  list-style-type: none;
+}
+
+.ais-RefinementList-list {
+  padding: 0;
+}
+
+.ais-Panel-header {
+  font-size: 1.0625rem !important;
+  line-height: 1.4375em;
+  margin-bottom: 0.5rem;
+}
+
+.ais-RefinementList-count {
+  display: none;
+}
+
+.ais-Hits-list {
+  padding: 0;
+}
+
+.ais-RangeInput-label, .ais-RangeInput-separator {
+  margin-right: 0.1rem;
+}
+
+.ais-Pagination-link {
+  text-decoration: none;
+  color: black
+}
+
+.ais-Pagination-list {
+  text-align: center;
+  padding: 0;
+}
+
+// Tutorials page end
diff --git a/config.toml b/config.toml
@@ -48,7 +48,13 @@ weight = 1
     codeFences = true
 
 [outputs]
-section = ["HTML"]
+section = ["HTML", "Algolia"]
+
+[outputFormats.Algolia]
+baseName = "algolia"
+isPlainText = true
+mediaType = "application/json"
+notAlternative = true
 
 [params]
 copyright = "Viam, Inc. - Documentation is licensed under Creative Commons ShareAlike License. "
@@ -133,6 +139,10 @@ enable = false
   icon = "fa fa-envelope"
   desc = "Ask questions about the Viam SDK"
 
+[params.algolia]
+vars = ["title", "summary", "date", "publishdate", "expirydate", "permalink", "image"]
+params = ["categories", "tags"]
+
 [params.github]
 repository = "viamrobotics/docs"
 branch = "main"

diff --git a/docs/tutorials/_index.md b/docs/tutorials/_index.md
@@ -3,6 +3,7 @@ title: "Tutorials"
 linkTitle: "Tutorials"
 weight: 65
 type: docs
+layout: "tutorials"
 webmSrc: "/tutorials/videos/scuttle-gamepad-preview.webm"
 mp4Src: "/tutorials/videos/scuttle-gamepad-preview.mp4"
 videoAlt: "Drive a Scuttle robot with a Bluetooth gamepad."
@@ -13,75 +14,4 @@ sitemap:
   priority: 1.0
 aliases:
     - "/build/"
----
-
-{{< alert title="Tip" color="tip" >}}
-While following a tutorial may require specific hardware, the hardware only affects the part of a project where you configure your components.
-If you are using different hardware your configuration will be different but you can still use the **same tutorial code**.
-
-For this reason, we list tutorials based on features you may be looking for.
-{{< /alert >}}
-
-## Your first robots
-
-{{< cards >}}
-    {{% tutorialcard link="/tutorials/get-started/try-viam-sdk" %}}
-    {{% tutorialcard link="/tutorials/get-started/blink-an-led/" %}}
-    {{% tutorialcard link="/tutorials/get-started/servo-mousemover/" %}}
-    {{% tutorialcard link="/tutorials/get-started/confetti-bot/" %}}
-    {{% tutorialcard link="/tutorials/get-started/lazy-susan/" %}}
-{{< /cards >}}
-
-## Configuration and Testing
-
-{{< cards >}}
-    {{% tutorialcard link="/tutorials/configure/build-a-mock-robot/" %}}
-    {{% tutorialcard link="/tutorials/configure/scuttlebot/" %}}
-{{< /cards >}}
-
-## Controlling
-
-{{< cards >}}
-    {{% tutorialcard link="/tutorials/control/scuttle-gamepad/" %}}
-    {{% tutorialcard link="/tutorials/control/yahboom-rover/" %}}
-{{< /cards >}}
-
-## Services
-
-{{< cards >}}
-    {{% tutorialcard link="/tutorials/services/accessing-and-moving-robot-arm/" %}}
-    {{% tutorialcard link="/tutorials/services/plan-motion-with-arm-gripper/" %}}
-    {{% tutorialcard link="/tutorials/services/constrain-motion/" %}}
-    {{% tutorialcard link="/tutorials/services/data-management-tutorial/" %}}
-    {{% tutorialcard link="/tutorials/services/try-viam-color-detection" %}}
-    {{% tutorialcard link="/tutorials/services/color-detection-scuttle/" %}}
-    {{% tutorialcard link="/tutorials/services/webcam-line-follower-robot/" %}}
-{{< /cards >}}
-
-## Custom Resources
-
-{{< cards >}}
-    {{% tutorialcard link="/tutorials/custom/custom-base-dog/" %}}
-    {{% tutorialcard link="/tutorials/custom/controlling-an-intermode-rover-canbus/" %}}
-{{< /cards >}}
-
-## Projects
-
-{{< cards >}}
-    {{% tutorialcard link="/tutorials/projects/make-a-plant-watering-robot/" %}}
-    {{% tutorialcard link="/tutorials/projects/foam-dart-launcher/" %}}
-    {{% tutorialcard link="/tutorials/projects/light-up/" %}}
-    {{% tutorialcard link="/tutorials/projects/send-security-photo/" %}}
-    {{% tutorialcard link="/tutorials/projects/guardian/" %}}
-    {{% tutorialcard link="/tutorials/projects/integrating-viam-with-openai/" %}}
-    {{% tutorialcard link="/tutorials/projects/modernize-retro-robot/" %}}
-    {{% tutorialcard link="/tutorials/projects/build-an-outdoor-rover/" %}}
-    {{% tutorialcard link="/tutorials/projects/pet-treat-dispenser/" %}}
-    {{% tutorialcard link="/tutorials/projects/tipsy/" %}}
-    {{% tutorialcard link="/tutorials/projects/claw-game/" %}}
-    {{% tutorialcard link="/tutorials/projects/bedtime-songs-bot/" %}}
-{{< /cards >}}
-
-<br>
-
-Have questions, or want to meet other people working on robots? Join our [Community Discord](https://discord.gg/viam).
+---
diff --git a/docs/tutorials/template.md b/docs/tutorials/template.md
@@ -15,7 +15,10 @@ tags: ["tutorial"]
 draft: true # Change this when you're ready
 authors: [] # Your Name
 languages: [] # Viam SDK programming languages used, if any
-viamresources: [] # Specific components or services used in this tutorial
+viamresources: [
+  "arm", "base", "board", "camera", "encoder", "gantry", "gripper", "input_controller", "motor", "movement_sensor", "sensor", "servo",
+  "data", "motion", "frame_system", "mlmodel", "navigation", "base_rc", "sensors", "slam", "vision"
+] # Specific components or services used in this tutorial
 level: "" # Beginner, Intermediate, Advanced
 # Beginner means: high level of explanation and guidance
 # Intermediate means: commands/concepts you can assume the reader knows do not need to be explained, instead link.

diff --git a/layouts/_default/_markup/render-image.html b/layouts/_default/_markup/render-image.html
@@ -11,7 +11,7 @@
     {{ $image_ext := index $image_type_arr 1 }}
 
     {{ if eq $image_ext "svg" }}
-        {{ warnf "Please use the imgproc shortcode for SVC images: %s" $image.RelPermalink }}
+        {{ warnf "Please use the imgproc shortcode for SVG images: %s" $image.RelPermalink }}
     {{ else }}
         {{ $webpsmall := $image.Resize "480x webp" }}
         {{ $webpmedium := $image.Resize "768x webp" }}

diff --git a/layouts/_default/list.algolia.json b/layouts/_default/list.algolia.json
@@ -0,0 +1,37 @@
+{{- $.Scratch.Add "index" slice -}}
+{{- $section := $.Site.GetPage "section" .Section }}
+      {{- range .Site.AllPages -}}
+            {{- if or (and (.IsDescendant $section) (and (not .Draft) (and (not .Params.private) (not .Params.empty_node)))) $section.IsHome -}}
+                  {{- $.Scratch.Add "index"
+                    (dict
+                        "objectID" .File.UniqueID
+                        "date" .Date.UTC.Unix
+                        "description" .Description
+                        "expirydate" .ExpiryDate.UTC.Unix
+                        "fuzzywordcount" .FuzzyWordCount
+                        "lastmod" .Lastmod.UTC.Unix
+                        "permalink" .Permalink
+                        "publishdate" .PublishDate
+                        "readingtime" .ReadingTime
+                        "relpermalink" .RelPermalink
+                        "title" .Title
+                        "linktitle" .LinkTitle
+                        "weight" .Weight
+                        "wordcount" .WordCount
+                        "section" .Section
+                        "tags" .Params.Tags
+                        "authors" .Params.Authors
+                        "images" .Params.images
+                        "webm" .Params.webmSrc
+                        "mp4" .Params.mp4Src
+                        "image" .Params.image
+                        "languages" .Params.languages
+                        "viamservices" (intersect (.Params.viamresources) (slice "data" "motion" "frame_system" "mlmodel" "navigation" "base_rc" "sensors" "slam" "vision"))
+                        "viamcomponents" (intersect (.Params.viamresources) (slice "arm" "base" "board" "camera" "encoder" "gantry" "gripper" "input_controller" "motor" "movement_sensor" "sensor" "servo"))
+                        "level" .Params.level
+                        "cost" .Params.cost
+                        "content" ( .Plain | safeHTML | truncate 8000 )
+                    )}}
+                  {{- end -}}
+      {{- end -}}
+{{- $.Scratch.Get "index" | jsonify -}}
diff --git a/layouts/docs/tutorials.html b/layouts/docs/tutorials.html
@@ -0,0 +1,49 @@
+<!doctype html>
+<html lang="{{ .Site.Language.Lang }}" class="no-js">
+  <head>
+    {{ partial "head.html" . }}
+  </head>
+  <body class="td-{{ .Kind }}{{ with .Page.Params.body_class }} {{ . }}{{ end }}">
+    <header>
+      {{ partial "navbar.html" . }}
+    </header>
+    <div class="container-fluid td-outer">
+      <div class="td-main">
+        <div class="row flex-xl-nowrap">
+            <aside class="col-12 col-md-3 col-xl-2 td-sidebar d-print-none">
+                <div class="search-panel__filters">
+                    <div id="languages-list"></div>
+                    <div id="components-list"></div>
+                    <div id="services-list"></div>
+                    <div id="cost-range"></div>
+                </div>
+                <!-- {{ partial "sidebar.html" . }} -->
+            </aside>
+            <main class="col-12 col-md-9 col-xl-10 pl-md-5" role="main">
+                <div class="td-content">
+                    <h1>{{ .Title }}</h1>
+                    <div class="search-panel__results card-container">
+                        <div id="hits" class="row-no-margin"></div>
+                        <div id="pagination"></div>
+                    </div>
+                </div>
+            </main>
+        </div>
+      </div>
+      {{ partial "footer.html" . }}
+    </div>
+
+    {{ partial "scripts.html" . }}
+
+    <!-- search only version -->
+    <script
+        src="https://cdn.jsdelivr.net/npm/[email protected]/dist/algoliasearch-lite.umd.js"
+        integrity="sha256-qzlNbRtZWHoUV5I2mI2t9QR7oYXlS9oNctX+0pECXI0="
+        crossorigin="anonymous"
+    ></script>
+
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
+    <script src="../js/tutorials.js"></script>
+
+  </body>
+</html>
diff --git a/layouts/partials/imgproc.html b/layouts/partials/imgproc.html
@@ -14,10 +14,10 @@
   {{ $imgbackup := $img.Resize .resize }}
   {{if .declaredimensions}}
 <source srcset="{{ $imgwebp.RelPermalink }}" type="image/webp" width="{{ $imgwebp.Width }}" height="{{ $imgwebp.Height }}">
-<img src="{{ $imgbackup.RelPermalink }}" width="{{ $imgwebp.Width }}" height="{{ $imgwebp.Height }}" alt="{{ .alt }}" class="{{ .class }}" style="{{ .style }}" loading="lazy">
+<img src="{{ $img.RelPermalink }}" width="{{ $imgwebp.Width }}" height="{{ $imgwebp.Height }}" alt="{{ .alt }}" class="{{ .class }}" style="{{ .style }}" loading="lazy">
   {{ else }}
 <source srcset="{{ $imgwebp.RelPermalink }}" type="image/webp">
-<img src="{{ $imgbackup.RelPermalink }}" alt="{{ .alt }}" class="{{ .class }}" style="{{ .style }}" loading="lazy">
+<img src="{{ $img.RelPermalink }}" alt="{{ .alt }}" class="{{ .class }}" style="{{ .style }}" loading="lazy">
   {{ end }}
 {{ else }}
   {{if .declaredimensions}}