From 12d8926b3824af5d2044e55f0107bce6c346a356 Mon Sep 17 00:00:00 2001 From: Naomi Pentrel <5212232+npentrel@users.noreply.github.com> Date: Tue, 22 Aug 2023 22:58:51 +0100 Subject: [PATCH 01/21] Algolia tutorials page test --- assets/scss/_styles_project.scss | 71 +++++++++++++++++++ config.toml | 12 +++- docs/tutorials/_index.md | 74 +------------------ docs/tutorials/template.md | 5 +- layouts/_default/_markup/render-image.html | 2 +- layouts/_default/list.algolia.json | 37 ++++++++++ layouts/docs/tutorials.html | 49 +++++++++++++ layouts/partials/imgproc.html | 4 +- static/js/tutorials.js | 82 ++++++++++++++++++++++ 9 files changed, 259 insertions(+), 77 deletions(-) create mode 100644 layouts/_default/list.algolia.json create mode 100644 layouts/docs/tutorials.html create mode 100644 static/js/tutorials.js diff --git a/assets/scss/_styles_project.scss b/assets/scss/_styles_project.scss index 40e701aae7..35e70d5f78 100644 --- 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 \ No newline at end of file diff --git a/config.toml b/config.toml index ef69a73780..8d0b9f859b 100644 --- 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 index 858dc3b38f..b210af441d 100644 --- 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 >}} - -
- -Have questions, or want to meet other people working on robots? Join our [Community Discord](https://discord.gg/viam). +--- \ No newline at end of file diff --git a/docs/tutorials/template.md b/docs/tutorials/template.md index 9634710cda..c074392a03 100644 --- 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 index 39bc8e4dfb..eac518bfc2 100644 --- 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 new file mode 100644 index 0000000000..91bc3be6aa --- /dev/null +++ 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 -}} \ No newline at end of file diff --git a/layouts/docs/tutorials.html b/layouts/docs/tutorials.html new file mode 100644 index 0000000000..0d985dc9e9 --- /dev/null +++ b/layouts/docs/tutorials.html @@ -0,0 +1,49 @@ + + + + {{ partial "head.html" . }} + + +
+ {{ partial "navbar.html" . }} +
+
+
+
+ +
+
+

{{ .Title }}

+
+
+ +
+
+
+
+
+ {{ partial "footer.html" . }} +
+ + {{ partial "scripts.html" . }} + + + + + + + + + diff --git a/layouts/partials/imgproc.html b/layouts/partials/imgproc.html index 93ee96e1d9..46ec0ec53a 100644 --- a/layouts/partials/imgproc.html +++ b/layouts/partials/imgproc.html @@ -14,10 +14,10 @@ {{ $imgbackup := $img.Resize .resize }} {{if .declaredimensions}} -{{ .alt }} +{{ .alt }} {{ else }} -{{ .alt }} +{{ .alt }} {{ end }} {{ else }} {{if .declaredimensions}} diff --git a/static/js/tutorials.js b/static/js/tutorials.js new file mode 100644 index 0000000000..a9b2018241 --- /dev/null +++ b/static/js/tutorials.js @@ -0,0 +1,82 @@ +const { algoliasearch, instantsearch } = window; + +const searchClient = algoliasearch('1CE6L976W0', '69b45c725273606d93690c9e89c56ad3'); + +const search = instantsearch({ + indexName: 'tutorials', + searchClient, +}); + +search.addWidgets([ + instantsearch.widgets.hits({ + container: '#hits', + templates: { + item: ` +
+ + {{#webm}} +
+
+ +
+
+ {{/webm}} + {{#image}} +
+ + {{ .alt }} + +
+ {{/image}} +
+
+ {{#helpers.highlight}}{ "attribute": "title" }{{/helpers.highlight}} +
+ {{#languages}}
{{.}}
{{/languages}} + {{#viamcomponents}}
{{.}}
{{/viamcomponents}} + {{#viamservices}}
{{.}}
{{/viamservices}} +
+
+
+ +
+`, + }, + }), + instantsearch.widgets.configure({ + hitsPerPage: 12, + }), + instantsearch.widgets.panel({ + templates: { header: 'Languages' }, + })(instantsearch.widgets.refinementList)({ + container: '#languages-list', + attribute: 'languages', + }), + instantsearch.widgets.panel({ + templates: { header: 'Components' }, + })(instantsearch.widgets.refinementList)({ + container: '#components-list', + attribute: 'viamcomponents', + }), + instantsearch.widgets.panel({ + templates: { header: 'Services' }, + })(instantsearch.widgets.refinementList)({ + container: '#services-list', + attribute: 'viamservices', + }), + instantsearch.widgets.panel({ + templates: { header: 'Approximate cost' }, + })(instantsearch.widgets.rangeInput)({ + container: '#cost-range', + attribute: 'cost', + }), + instantsearch.widgets.pagination({ + container: '#pagination', + }), +]); + +search.start(); From aee5ec95c461da2d2ce323f8dd63394aafd7a661 Mon Sep 17 00:00:00 2001 From: Naomi Pentrel <5212232+npentrel@users.noreply.github.com> Date: Thu, 24 Aug 2023 22:51:55 +0100 Subject: [PATCH 02/21] Move back to typesense --- assets/scss/_styles_project.scss | 4 ++++ layouts/_default/list.algolia.json | 9 +++++++-- layouts/docs/tutorials.html | 8 ++------ static/js/tutorials.js | 32 ++++++++++++++++++++++++++++-- 4 files changed, 43 insertions(+), 10 deletions(-) diff --git a/assets/scss/_styles_project.scss b/assets/scss/_styles_project.scss index 35e70d5f78..202b349a1f 100644 --- a/assets/scss/_styles_project.scss +++ b/assets/scss/_styles_project.scss @@ -1200,4 +1200,8 @@ ul.sectionlist > li:hover { padding: 0; } +label.ais-RefinementList-label { + margin-bottom: 0; +} + // Tutorials page end \ No newline at end of file diff --git a/layouts/_default/list.algolia.json b/layouts/_default/list.algolia.json index 91bc3be6aa..1a2d2a9410 100644 --- a/layouts/_default/list.algolia.json +++ b/layouts/_default/list.algolia.json @@ -2,9 +2,13 @@ {{- $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 -}} + {{ if eq .Section "tutorials" }} + {{- if not (.Params.cost) -}} + {{ errorf "No cost on tutorial: %s" .Title }} + {{- end -}} {{- $.Scratch.Add "index" (dict - "objectID" .File.UniqueID + "id" .File.UniqueID "date" .Date.UTC.Unix "description" .Description "expirydate" .ExpiryDate.UTC.Unix @@ -29,9 +33,10 @@ "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 + "cost" (int (.Params.cost)) "content" ( .Plain | safeHTML | truncate 8000 ) )}} {{- end -}} + {{- end -}} {{- end -}} {{- $.Scratch.Get "index" | jsonify -}} \ No newline at end of file diff --git a/layouts/docs/tutorials.html b/layouts/docs/tutorials.html index 0d985dc9e9..6fc754e051 100644 --- a/layouts/docs/tutorials.html +++ b/layouts/docs/tutorials.html @@ -15,6 +15,7 @@
+
@@ -35,12 +36,7 @@

{{ .Title }}

{{ partial "scripts.html" . }} - - + diff --git a/static/js/tutorials.js b/static/js/tutorials.js index a9b2018241..00d7615db9 100644 --- a/static/js/tutorials.js +++ b/static/js/tutorials.js @@ -1,6 +1,25 @@ -const { algoliasearch, instantsearch } = window; +const { TypesenseInstantSearchAdapter, instantsearch } = window; -const searchClient = algoliasearch('1CE6L976W0', '69b45c725273606d93690c9e89c56ad3'); +const typesenseInstantsearchAdapter = new TypesenseInstantSearchAdapter({ + server: { + apiKey: "oRW875O3vjeV3qX4ENl1iIA0u2IRDbTQ", // Be sure to use an API key that only allows search operations + nodes: [ + { + host: "cgnvrk0xwyj9576lp-1.a1.typesense.net", + port: "443", + protocol: "https", + }, + ], + cacheSearchResultsForSeconds: 2 * 60, // Cache search results from server. Defaults to 2 minutes. Set to 0 to disable caching. + }, + // The following parameters are directly passed to Typesense's search API endpoint. + // So you can pass any parameters supported by the search endpoint below. + // query_by is required. + additionalSearchParameters: { + query_by: "title,description", + }, +}); +const searchClient = typesenseInstantsearchAdapter.searchClient; const search = instantsearch({ indexName: 'tutorials', @@ -61,12 +80,14 @@ search.addWidgets([ })(instantsearch.widgets.refinementList)({ container: '#components-list', attribute: 'viamcomponents', + operator: 'and' }), instantsearch.widgets.panel({ templates: { header: 'Services' }, })(instantsearch.widgets.refinementList)({ container: '#services-list', attribute: 'viamservices', + operator: 'and' }), instantsearch.widgets.panel({ templates: { header: 'Approximate cost' }, @@ -74,6 +95,13 @@ search.addWidgets([ container: '#cost-range', attribute: 'cost', }), + instantsearch.widgets.panel({ + templates: { header: 'Level' }, + })(instantsearch.widgets.refinementList)({ + container: '#level-list', + attribute: 'level', + operator: 'and' + }), instantsearch.widgets.pagination({ container: '#pagination', }), From 384f29bfc6b5be3f0309b977cd2d5371ed1f1e3a Mon Sep 17 00:00:00 2001 From: Naomi Pentrel <5212232+npentrel@users.noreply.github.com> Date: Thu, 24 Aug 2023 23:13:41 +0100 Subject: [PATCH 03/21] Fix lozad --- static/js/tutorials.js | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/static/js/tutorials.js b/static/js/tutorials.js index 00d7615db9..1f41800a0b 100644 --- a/static/js/tutorials.js +++ b/static/js/tutorials.js @@ -1,4 +1,5 @@ const { TypesenseInstantSearchAdapter, instantsearch } = window; +const observer = lozad(); const typesenseInstantsearchAdapter = new TypesenseInstantSearchAdapter({ server: { @@ -37,8 +38,8 @@ search.addWidgets([
@@ -108,3 +109,6 @@ search.addWidgets([ ]); search.start(); +search.on('render', function() { + observer.observe() +}); From 337d342e660911d4bad0ef5eaea53d0e5afba835 Mon Sep 17 00:00:00 2001 From: Naomi Pentrel <5212232+npentrel@users.noreply.github.com> Date: Fri, 25 Aug 2023 00:12:12 +0100 Subject: [PATCH 04/21] Update mobile view --- assets/scss/_styles_project.scss | 18 +++++++++++++++++- layouts/docs/tutorials.html | 4 +++- 2 files changed, 20 insertions(+), 2 deletions(-) diff --git a/assets/scss/_styles_project.scss b/assets/scss/_styles_project.scss index 202b349a1f..2069352c22 100644 --- a/assets/scss/_styles_project.scss +++ b/assets/scss/_styles_project.scss @@ -1204,4 +1204,20 @@ label.ais-RefinementList-label { margin-bottom: 0; } -// Tutorials page end \ No newline at end of file +.td-sidebar__toggle { + float: right; +} + +@include media-breakpoint-up(md) { + .search-panel__filters.show-on-wide { display: block } +} + +// Tutorials page end + +// Search-autocomplete start + +.algolia-autocomplete { + flex-grow: 1; +} + +// Search-autocomplete end \ No newline at end of file diff --git a/layouts/docs/tutorials.html b/layouts/docs/tutorials.html index 6fc754e051..e4dd6f3fc5 100644 --- a/layouts/docs/tutorials.html +++ b/layouts/docs/tutorials.html @@ -11,7 +11,9 @@