Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

DOCS-1829: Make carousel shortcode and rearrange Build #2634

Merged
merged 4 commits into from
Mar 11, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
28 changes: 17 additions & 11 deletions docs/build/_index.md
Original file line number Diff line number Diff line change
Expand Up @@ -16,40 +16,46 @@ Components drive your hardware, and services provide high-level software functio
Viam's APIs are standardized across all models of a given component or service.
This means you can test and change hardware without changing code.

{{% alert title="Start building" color="tip" %}}
## Step 1: Install

1. To get started, first [install `viam-server`](/get-started/installation/) on your smart machine's computer.
If you are using a microcontroller instead of a 64-bit computer, you can install a [lightweight version of `viam-server`](/build/micro-rdk/).
To get started, first [install `viam-server`](/get-started/installation/) on your smart machine's computer.
If you are using a microcontroller instead of a 64-bit computer, you can install a [lightweight version of `viam-server`](/build/micro-rdk/).
You can install `viam-server` on your personal computer, or on a single-board computer (SBC) such as one of the following:
<br><br>

2. Then pull together the Viam resources you want to use by [configuring your smart machine](/build/configure/).
{{< board-carousel >}}

3. Finally, [program your smart machine](/build/program/) with an SDK in your preferred coding language.
## Step 2: Configure

{{% /alert %}}
Select the Viam {{< glossary_tooltip term_id="resource" text="resources" >}} you want to use and integrate them by [configuring your smart machine](/build/configure/).

<div class="cards max-page">
<div class="row">
<div class="col sectionlist">
<div>
<h2>Components:</h2>
<h3>Components:</h3>
{{<sectionlist section="/components/">}}
</div>
</div>
<div class="col sectionlist">
<div><h2>Services:</h2><ul class="sectionlist"><li><a href="/data/" title="Data Management Service"><div><picture><img src="../services/icons/data-capture.svg" alt="Data Management" loading="lazy"></picture><p>Data Management</p></div></a></li></ul><ul class="sectionlist"><li><a href="/mobility/motion/" title="Motion Service"><div><picture><img src="../services/icons/motion.svg" alt="Motion" loading="lazy"></picture><p>Motion</p></div></a></li></ul><ul class="sectionlist"><li><a href="/mobility/frame-system/" title="The Robot Frame System"><div><picture><img src="../services/icons/frame-system.svg" alt="Frame System" loading="lazy"></picture><p>Frame System</p></div></a></li></ul><ul class="sectionlist"><li><a href="/mobility/base-rc/" title="Base Remote Control Service"><div><picture><img src="../services/icons/base-rc.svg" alt="Base Remote Control" loading="lazy"></picture><p>Base Remote Control</p></div></a></li></ul><ul class="sectionlist"><li><a href="/ml/" title="ML Model Service"><div><picture><img src="../services/icons/ml.svg" alt="ML Model" loading="lazy"></picture><p>ML Model</p></div></a></li></ul><ul class="sectionlist"><li><a href="/mobility/navigation/" title="The Navigation Service"><div><picture><img src="../services/icons/navigation.svg" alt="Navigation" loading="lazy"></picture><p>Navigation</p></div></a></li></ul><ul class="sectionlist"><li><a href="/mobility/slam/" title="SLAM Service"><div><picture><img src="../services/icons/slam.svg" alt="SLAM" loading="lazy"></picture><p>SLAM</p></div></a></li></ul><ul class="sectionlist"><li><a href="/ml/vision/" title="Vision Service"><div><picture><img src="../services/icons/vision.svg" alt="Vision" loading="lazy"></picture><p>Vision</p></div></a></li></ul><ul class="sectionlist"><li><a href="/registry/advanced/generic/" title="Generic Service"><div><picture><img src="../icons/components/generic.svg" alt="Generic" loading="lazy"></picture><p>Generic</p></div></a></li></ul></div>
<div><h3>Services:</h3><ul class="sectionlist"><li><a href="/data/" title="Data Management Service"><div><picture><img src="../services/icons/data-capture.svg" alt="Data Management" loading="lazy"></picture><p>Data Management</p></div></a></li></ul><ul class="sectionlist"><li><a href="/mobility/motion/" title="Motion Service"><div><picture><img src="../services/icons/motion.svg" alt="Motion" loading="lazy"></picture><p>Motion</p></div></a></li></ul><ul class="sectionlist"><li><a href="/mobility/frame-system/" title="The Robot Frame System"><div><picture><img src="../services/icons/frame-system.svg" alt="Frame System" loading="lazy"></picture><p>Frame System</p></div></a></li></ul><ul class="sectionlist"><li><a href="/mobility/base-rc/" title="Base Remote Control Service"><div><picture><img src="../services/icons/base-rc.svg" alt="Base Remote Control" loading="lazy"></picture><p>Base Remote Control</p></div></a></li></ul><ul class="sectionlist"><li><a href="/ml/" title="ML Model Service"><div><picture><img src="../services/icons/ml.svg" alt="ML Model" loading="lazy"></picture><p>ML Model</p></div></a></li></ul><ul class="sectionlist"><li><a href="/mobility/navigation/" title="The Navigation Service"><div><picture><img src="../services/icons/navigation.svg" alt="Navigation" loading="lazy"></picture><p>Navigation</p></div></a></li></ul><ul class="sectionlist"><li><a href="/mobility/slam/" title="SLAM Service"><div><picture><img src="../services/icons/slam.svg" alt="SLAM" loading="lazy"></picture><p>SLAM</p></div></a></li></ul><ul class="sectionlist"><li><a href="/ml/vision/" title="Vision Service"><div><picture><img src="../services/icons/vision.svg" alt="Vision" loading="lazy"></picture><p>Vision</p></div></a></li></ul><ul class="sectionlist"><li><a href="/registry/advanced/generic/" title="Generic Service"><div><picture><img src="../icons/components/generic.svg" alt="Generic" loading="lazy"></picture><p>Generic</p></div></a></li></ul></div>
</div>
</div>
</div>

If a component or service you want to use for your project is not natively supported, see the [modular resource registry](/registry/).
If a component or service you want to use for your project is not natively supported, see whether it is supported as a {{< glossary_tooltip term_id="modular-resource" text="modular resource" >}} in the [registry](/registry/) or build your own modular resource.

## SDKs
## Step 3: Program

Each category of resource has a standardized API that you can access with an SDK (software development kit) in your preferred programming language.
[Program your smart machine](/build/program/) with an SDK in your preferred coding language.

Each category of {{< glossary_tooltip term_id="resource" text="resource" >}} has a standardized API that you can access with an SDK (software development kit) in your preferred programming language.
For example, you can send the same commands to any kind of motor, using any of the following programming languages:

{{<sectionlist section="/sdks">}}

<br><br>

{{< cards >}}
{{% card link="/build/configure/" %}}
{{% card link="/build/program/" %}}
Expand Down
114 changes: 1 addition & 113 deletions docs/get-started/_index.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,119 +7,7 @@ layout: "empty"
empty_node: true
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is actually not an empty node anymore and it should also not have the layout: "empty"

Suggested change
empty_node: true

Copy link
Collaborator Author

@JessamyT JessamyT Mar 11, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah okay I commented out both of those lines temporarily to test it locally but figured you'd had these lines in here for a reason so left as-is! Hmm it seems like this page isn't formatted nicely currently (with the four boxes and then three smaller ones--looks awk)--I will make a ticket to un-empty_node this in a separate PR so that its contents can be reviewed

---

<div id="board-carousel" class="carousel max-page">
<ul tabindex="0">
<li id="c1_slide0">
<a href="get-started/installation/prepare/rpi-setup/">
{{<imgproc src="get-started/installation/thumbnails/raspberry-pi-5-8gb.png" resize="148x120" declaredimensions=true alt="Raspberry Pi 5">}}
<p>Raspberry Pi 5</p>
</a>
</li>
<li id="c1_slide1">
<a href="get-started/installation/prepare/rpi-setup/">
{{<imgproc src="get-started/installation/thumbnails/raspberry-pi-4-b-2gb.png" resize="148x120" declaredimensions=true alt="Raspberry Pi 4b">}}
<p>Raspberry Pi 4</p>
</a>
</li>
<li id="c1_slide2">
<a href="get-started/installation/prepare/jetson-nano-setup/">
{{<imgproc src="get-started/installation/thumbnails/jetson-orin-nano.jpeg" resize="148x120" declaredimensions=true alt="NVIDIA Jetson Orin Nano">}}
<p>NVIDIA Jetson Orin Nano</p>
</a>
</li>
<li id="c1_slide3">
<a href="components/board/upboard/">
{{<imgproc src="get-started/installation/thumbnails/up_4000.png" resize="148x120" declaredimensions=true alt="Intel Up board 4000">}}
<p>Intel UP4000</p>
</a>
</li>
<li id="c1_slide4">
<a href="get-started/installation/prepare/pumpkin/">
{{<imgproc src="get-started/installation/thumbnails/pumpkin.png" resize="148x120" declaredimensions=true alt="Mediatek genio 500 pumpkin">}}
<p>Mediatek Genio 500 Pumpkin</p>
</a>
</li>
<li id="c1_slide5">
<a href="/build/micro-rdk/">
{{<imgproc src="get-started/installation/thumbnails/esp32-espressif.png" resize="148x120" declaredimensions=true alt="E S P 32 - espressif">}}
<p>Espressif ESP32</p>
</a>
</li>
<li id="c1_slide6">
<a href="get-started/installation/prepare/sk-tda4vm/">
{{<imgproc src="get-started/installation/thumbnails/tda4vm.png" resize="148x120" declaredimensions=true alt="S K - T D A 4 V M">}}
<p>Texas Instruments TDA4VM</p>
</a>
</li>
<li id="c1_slide7">
<a href="get-started/installation/prepare/jetson-nano-setup/">
{{<imgproc src="get-started/installation/thumbnails/jetson-nano-dev-kit.png" resize="148x120" declaredimensions=true alt="NVIDIA Jetson Nano">}}
<p>NVIDIA Jetson Nano</p>
</a>
</li>
<li id="c1_slide8">
<a href="get-started/installation/prepare/jetson-agx-orin-setup/">
{{<imgproc src="get-started/installation/thumbnails/jetson-agx-orin-dev-kit.png" alt="Jetson A G X Orin Developer Kit" resize="148x120" declaredimensions=true >}}
<p>NVIDIA Jetson AGX Orin</p>
</a>
</li>
<li id="c1_slide9">
<a href="components/board/jetson/">
{{<imgproc src="get-started/installation/thumbnails/jetson-xavier.png" alt="Jetson Xavier NX Dev Kit" resize="148x120" declaredimensions=true >}}
<p>NVIDIA Jetson Xavier NX</p>
</a>
</li>
<li id="c1_slide10">
<a href="get-started/installation/prepare/rpi-setup/">
{{<imgproc src="get-started/installation/thumbnails/rpi-3.png" alt="Raspberry Pi 3" resize="148x120" declaredimensions=true >}}
<p>Raspberry Pi 3</p>
</a>
</li>
<li id="c1_slide11">
<a href="get-started/installation/prepare/rpi-setup/">
{{<imgproc src="get-started/installation/thumbnails/raspberry-pi-zero-2w.png" alt="Raspberry Pi" resize="148x120" declaredimensions=true >}}
<p>Raspberry Pi Zero 2 W</p>
</a>
</li>
<li id="c1_slide12">
<a href="get-started/installation/prepare/beaglebone-setup/">
{{<imgproc src="get-started/installation/thumbnails/beaglebone.png" resize="148x120" declaredimensions=true alt="BeagleBone A I-64">}}
<p>BeagleBone AI-64</p>
</a>
</li>
<li id="c1_slide13">
<a href="components/board/numato/">
{{<imgproc src="get-started/installation/thumbnails/numato.png" alt="Numato GPIO Modules" resize="148x120" declaredimensions=true >}}
<p>Numato GPIO Modules</p>
</a>
</li>
<li id="c1_slide14">
<a href="components/board/pca9685/">
{{<imgproc src="get-started/installation/thumbnails/pca9685.png" alt="P C A 9685 I 2 C Interface" resize="148x120" declaredimensions=true >}}
<p>PCA9686 I<sup>2</sup>C Interface</p>
</a>
</li>
</ul>
<ol style="visibility: hidden" aria-hidden="true">
<li><a href="#c1_slide0">Raspberry Pi 5</a></li>
<li><a href="#c1_slide1">Raspberry Pi 4</a></li>
<li><a href="#c1_slide2">NVIDIA Jetson Orin Nano</a></li>
<li><a href="#c1_slide3">Intel UP4000</a></li>
<li><a href="#c1_slide4">Mediatek Genio 500 Pumpkin</a></li>
<li><a href="#c1_slide5">Espressif ESP32</a></li>
<li><a href="#c1_slide6">Texas Instruments TDA4VM</a></li>
<li><a href="#c1_slide7">NVIDIA Jetson Nano</a></li>
<li><a href="#c1_slide8">NVIDIA Jetson AGX Orin</a></li>
<li><a href="#c1_slide9">NVIDIA Jetson Xavier NX</a></li>
<li><a href="#c1_slide10">Raspberry Pi 3</a></li>
<li><a href="#c1_slide11">Raspberry Pi Zero 2 W</a></li>
<li><a href="#c1_slide12">BeagleBone AI-64</a></li>
<li><a href="#c1_slide13">Numato GPIO Modules</a></li>
<li><a href="#c1_slide14">PCA9686 I<sup>2</sup>C Interface</a></li>
</ol>
<div class="prev" style="display: block">‹</div>
<div class="next" style="display: block">›</div>
</div>
{{< board-carousel >}}
<br>

<div class="max-page">
Expand Down
4 changes: 4 additions & 0 deletions docs/get-started/viam.md
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,10 @@ Join the [**Viam community**](https://discord.gg/viam) to collaborate during pla

A _smart machine_ in Viam consists of at least one computer, typically a [single-board computer](/get-started/installation/), running `viam-server` and communicating with any hardware connected to it by signaling through digital data pins.
Viam supports devices running **any** 64-bit Linux OS or macOS.
Here are some of the boards Viam supports:

{{< board-carousel >}}
<br>

{{< imgproc src="/viam/board-viam-server.png" alt="A diagram of a single-board computer running viam-server." resize="270x" class="alignleft" style="max-width:270px" >}}

Expand Down
114 changes: 1 addition & 113 deletions docs/platform.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,119 +8,7 @@ type: docs

Viam is a complete software platform for {{< glossary_tooltip term_id="smart-machine" text="smart machines">}} that runs on Linux and macOS and supports a wide variety of popular systems, including:

<div id="board-carousel" class="carousel max-page">
<ul tabindex="0">
<li id="c1_slide0">
<a href="/get-started/installation/prepare/rpi-setup/">
{{<imgproc src="/get-started/installation/thumbnails/raspberry-pi-5-8gb.png" resize="148x120" declaredimensions=true alt="Raspberry Pi 5">}}
<p>Raspberry Pi 5</p>
</a>
</li>
<li id="c1_slide1">
<a href="/get-started/installation/prepare/rpi-setup/">
{{<imgproc src="/get-started/installation/thumbnails/raspberry-pi-4-b-2gb.png" resize="148x120" declaredimensions=true alt="Raspberry Pi 4b">}}
<p>Raspberry Pi 4</p>
</a>
</li>
<li id="c1_slide2">
<a href="/get-started/installation/prepare/jetson-nano-setup/">
{{<imgproc src="/get-started/installation/thumbnails/jetson-orin-nano.jpeg" resize="148x120" declaredimensions=true alt="NVIDIA Jetson Orin Nano">}}
<p>NVIDIA Jetson Orin Nano</p>
</a>
</li>
<li id="c1_slide3">
<a href="/components/board/upboard/">
{{<imgproc src="/get-started/installation/thumbnails/up_4000.png" resize="148x120" declaredimensions=true alt="Intel Up board 4000">}}
<p>Intel UP4000</p>
</a>
</li>
<li id="c1_slide4">
<a href="/get-started/installation/prepare/pumpkin/">
{{<imgproc src="/get-started/installation/thumbnails/pumpkin.png" resize="148x120" declaredimensions=true alt="Mediatek genio 500 pumpkin">}}
<p>Mediatek Genio 500 Pumpkin</p>
</a>
</li>
<li id="c1_slide5">
<a href="/build/micro-rdk/">
{{<imgproc src="/get-started/installation/thumbnails/esp32-espressif.png" resize="148x120" declaredimensions=true alt="E S P 32 - espressif">}}
<p>Espressif ESP32</p>
</a>
</li>
<li id="c1_slide6">
<a href="/get-started/installation/prepare/sk-tda4vm/">
{{<imgproc src="/get-started/installation/thumbnails/tda4vm.png" resize="148x120" declaredimensions=true alt="S K - T D A 4 V M">}}
<p>Texas Instruments TDA4VM</p>
</a>
</li>
<li id="c1_slide7">
<a href="/get-started/installation/prepare/jetson-nano-setup/">
{{<imgproc src="/get-started/installation/thumbnails/jetson-nano-dev-kit.png" resize="148x120" declaredimensions=true alt="NVIDIA Jetson Nano">}}
<p>NVIDIA Jetson Nano</p>
</a>
</li>
<li id="c1_slide8">
<a href="/get-started/installation/prepare/jetson-agx-orin-setup/">
{{<imgproc src="/get-started/installation/thumbnails/jetson-agx-orin-dev-kit.png" alt="Jetson A G X Orin Developer Kit" resize="148x120" declaredimensions=true >}}
<p>NVIDIA Jetson AGX Orin</p>
</a>
</li>
<li id="c1_slide9">
<a href="/components/board/jetson/">
{{<imgproc src="/get-started/installation/thumbnails/jetson-xavier.png" alt="Jetson Xavier NX Dev Kit" resize="148x120" declaredimensions=true >}}
<p>NVIDIA Jetson Xavier NX</p>
</a>
</li>
<li id="c1_slide10">
<a href="/get-started/installation/prepare/rpi-setup/">
{{<imgproc src="/get-started/installation/thumbnails/rpi-3.png" alt="Raspberry Pi 3" resize="148x120" declaredimensions=true >}}
<p>Raspberry Pi 3</p>
</a>
</li>
<li id="c1_slide11">
<a href="/get-started/installation/prepare/rpi-setup/">
{{<imgproc src="/get-started/installation/thumbnails/raspberry-pi-zero-2w.png" alt="Raspberry Pi" resize="148x120" declaredimensions=true >}}
<p>Raspberry Pi Zero 2 W</p>
</a>
</li>
<li id="c1_slide12">
<a href="/get-started/installation/prepare/beaglebone-setup/">
{{<imgproc src="/get-started/installation/thumbnails/beaglebone.png" resize="148x120" declaredimensions=true alt="BeagleBone A I-64">}}
<p>BeagleBone AI-64</p>
</a>
</li>
<li id="c1_slide13">
<a href="/components/board/numato/">
{{<imgproc src="/get-started/installation/thumbnails/numato.png" alt="Numato GPIO Modules" resize="148x120" declaredimensions=true >}}
<p>Numato GPIO Modules</p>
</a>
</li>
<li id="c1_slide14">
<a href="/components/board/pca9685/">
{{<imgproc src="/get-started/installation/thumbnails/pca9685.png" alt="P C A 9685 I 2 C Interface" resize="148x120" declaredimensions=true >}}
<p>PCA9686 I<sup>2</sup>C Interface</p>
</a>
</li>
</ul>
<ol style="visibility: hidden" aria-hidden="true">
<li><a href="#c1_slide0">Raspberry Pi 5</a></li>
<li><a href="#c1_slide1">Raspberry Pi 4</a></li>
<li><a href="#c1_slide2">NVIDIA Jetson Orin Nano</a></li>
<li><a href="#c1_slide3">Intel UP4000</a></li>
<li><a href="#c1_slide4">Mediatek Genio 500 Pumpkin</a></li>
<li><a href="#c1_slide5">Espressif ESP32</a></li>
<li><a href="#c1_slide6">Texas Instruments TDA4VM</a></li>
<li><a href="#c1_slide7">NVIDIA Jetson Nano</a></li>
<li><a href="#c1_slide8">NVIDIA Jetson AGX Orin</a></li>
<li><a href="#c1_slide9">NVIDIA Jetson Xavier NX</a></li>
<li><a href="#c1_slide10">Raspberry Pi 3</a></li>
<li><a href="#c1_slide11">Raspberry Pi Zero 2 W</a></li>
<li><a href="#c1_slide12">BeagleBone AI-64</a></li>
<li><a href="#c1_slide13">Numato GPIO Modules</a></li>
<li><a href="#c1_slide14">PCA9686 I<sup>2</sup>C Interface</a></li>
</ol>
<div class="prev" style="display: block">‹</div>
<div class="next" style="display: block">›</div>
</div>
{{< board-carousel >}}
<br>

Explore the elements of the Viam platform:
Expand Down
2 changes: 1 addition & 1 deletion layouts/partials/scripts.html
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@

{{ $jsCarousel := resources.Get "js/carousel.js" }}
{{ $jsCarousel := $jsCarousel | minify }}
{{ if or (eq .Page.Title "Viam Documentation") (eq .Page.Title "Platform") }}
{{ if or (eq .Page.Title "Viam Documentation") (eq .Page.Title "Platform") (eq .Page.Title "Viam in 3 minutes") (eq .Page.Title "Build Your Machine with Flexible Building Blocks") (eq .Page.Title "Get Started") }}
<script type="text/javascript" src="{{$jsCarousel.RelPermalink}}" crossorigin="anonymous"></script>
{{ end }}

Expand Down
Loading
Loading