removed jekyll tabs plugin to allow compiling with github pages

cau-se · Sep 1, 2024 · d20a37b · d20a37b
1 parent acdee17
commit d20a37b
Show file tree

Hide file tree

Showing 7 changed files with 163 additions and 153 deletions.
diff --git a/docs/Gemfile b/docs/Gemfile
@@ -32,5 +32,4 @@ gem "wdm", "~> 0.1.1", :platforms => [:mingw, :x64_mingw, :mswin]
 # do not have a Java counterpart.
 gem "http_parser.rb", "~> 0.6.0", :platforms => [:jruby]
 
-gem "webrick", "~> 1.8"
-gem 'jekyll-tabs', group: :jekyll_plugins
+gem "webrick", "~> 1.8"
diff --git a/docs/_config.yml b/docs/_config.yml
@@ -7,9 +7,6 @@ aux_links:
     "ARCHES PiCar-X on GitHub":
       - "//github.com/cau-se/arches-picar-x"
 
-plugins:
-  - jekyll-tabs
-
 exclude:
   - "*.tmpl"
   - Gemfile

diff --git a/docs/assets/css/tabs.css b/docs/assets/css/tabs.css
@@ -0,0 +1,54 @@
+.tab-container {
+    width: 100%;
+    margin-bottom: 200pxpx;
+}
+
+.tab-list {
+    list-style: none;
+    padding: 0 !important;
+    margin: 0 !important;
+    display: flex;
+    cursor: pointer;
+}
+
+.tab {
+    padding: 5px 15px;
+    background: #fff;
+    border: 1px solid #ccc;
+    margin-right: 2px;
+    margin-left: 0px;
+    color: #7253ed;
+    margin: 0px;
+}
+
+.tab.active {
+    background: #f5f6fa;
+    border-bottom: none;
+    font-weight: bold;
+    color: #7253ed;
+}
+
+.tab-content {
+    padding: 0px;
+    display: none;
+    margin: 0px;
+}
+
+.tab-content.active {
+    display: block;
+    width: 100%;
+    margin: 0;
+    padding: 0;
+}
+
+.tab-content.active > * > .sb {
+    color: #000 !important;
+}
+
+.tab.active::before {
+    content: '' !important;
+}
+
+.tab::before {
+    content: '' !important;
+}
diff --git a/docs/assets/js/tabs.js b/docs/assets/js/tabs.js
@@ -0,0 +1,20 @@
+document.addEventListener("DOMContentLoaded", function () {
+    const tabContainers = document.querySelectorAll(".tab-container");
+
+    tabContainers.forEach(container => {
+      const tabs = container.querySelectorAll(".tab");
+      const contents = container.querySelectorAll(".tab-content");
+
+      tabs.forEach(tab => {
+        tab.addEventListener("click", function () {
+          const target = this.getAttribute("data-tab");
+
+          tabs.forEach(tab => tab.classList.remove("active"));
+          this.classList.add("active");
+
+          contents.forEach(content => content.classList.remove("active"));
+          container.querySelector(`#${target}`).classList.add("active");
+        });
+      });
+    });
+  });
diff --git a/docs/getting_started.md b/docs/getting_started.md
@@ -4,16 +4,15 @@ has_children: true
 nav_order: 2
 ---
 
-<link rel="stylesheet" href="{{ site.baseurl }}{% link tabs.css %}">
-<script src="{{ site.baseurl }}{% link tabs.js %}"> </script>
-
+<link rel="stylesheet" href="{{ site.baseurl }}{% link assets/css/tabs.css %}">
+<script src="{{ site.baseurl }}{% link assets/js/tabs.js %}"> </script>
 
 # Getting Started
 This project based on ROS and Docker. Due to the used interfaces on the RPi, we have to use Linux Kernel functions for GPIO and I2C. Before you can start this project you have to activate GPIO and I2C. If you already activated these modules, you can proceed with ##. Otherwise you have to build these modules first.
 
-The PiCar-X by Sunfounder| The digital twi prototype in GAZEBO
---- | ---
-![Physical Twin](./images/picarx-pt.jpg "The PiCar-x by Sunfounder") | ![Digital Twin Prototype](./images/picarx-gazebo.gif "The digital twin prototype of the PiCar-X")
+| The PiCar-X by Sunfounder                                            | The digital twin prototype in GAZEBO                                                               |
+| -------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------- |
+| ![Physical Twin](./images/picarx-pt.jpg "The PiCar-x by Sunfounder") | ![Digital Twin Prototype](./images/picarx-gazebo.gif "The digital twin prototype of the PiCar-X") |
 
 
 ## Clone Repository
@@ -37,88 +36,99 @@ modinfo gpio-mockup
 ## Activate GPIO and I2C on Your System
 If you already have built the modules, you need to activate them via:
 
-{% tabs test %}
-
-{% tab test x64 %}
-```console 
+<div class="tab-container" id="activateinterfaces">
+  <ul class="tab-list">
+    <li class="tab active" data-tab="tab1-1">X64</li>
+    <li class="tab" data-tab="tab1-2">RaspberryPi 3/4</li>
+  </ul>
+  <div class="tab-content active" id="tab1-1">
+  {% highlight console %}
     sudo modprobe gpio-mockup gpio_mockup_ranges=1,41
     sudo modprobe i2c-dev
-    sudo modprobe i2c-stub chip_addr=0x14
-```
-{% endtab %}
+    sudo modprobe i2c-stub chip_addr=0x14 {% endhighlight %}
+  </div>
+  <div class="tab-content" id="tab1-2">
+  {% highlight console %}
+    sudo modprobe i2c-stub chip_addr=0x14 {% endhighlight %}  
+  </div>
 
-{% tab test RaspberryPi 3/4 %}
-```console 
-    sudo modprobe i2c-stub chip_addr=0x14
-```
-{% endtab %}
-
-{% endtabs %}
+</div>
 
 ## Build and Start Docker Containers from Scratch
 
-{% tabs docker %}
-
-{% tab docker x64 %}
-```console 
+<div class="tab-container" id="startdocker">
+  <ul class="tab-list">
+    <li class="tab active" data-tab="tab2-1">X64</li>
+    <li class="tab" data-tab="tab2-2">arm32v7 (RPi3)</li>
+    <li class="tab" data-tab="tab2-3">arm64v8 (RPi4)</li>
+  </ul>
+  <div class="tab-content active" id="tab2-1">
+  {% highlight console %}
     docker compose -f docker-compose-core.yml build 
     docker compose -f docker-compose-dtp.yml build 
-    docker compose -f docker-compose-dtp.yml up 
-```
-{% endtab %}
+    docker compose -f docker-compose-dtp.yml up {% endhighlight %} 
+  </div>
+  <div class="tab-content" id="tab2-2">
+  {% highlight console %}
+    # First copy all content to the RaspberryPi3
+    scp -r ./ <user>@<picarx-ip>:~/
 
-{% tab docker arm32v7 %}
-```console 
     TAG=latest ARCH=arm32v7 docker compose -f docker-compose-core.yml build 
     TAG=latest ARCH=arm32v7 docker compose -f docker-compose-dtp-no-gazebo.yml build 
-    TAG=latest ARCH=arm32v7 docker compose -f docker-compose-dtp-no-gazebo.yml up 
-```
-{% endtab %}
+    TAG=latest ARCH=arm32v7 docker compose -f docker-compose-dtp-no-gazebo.yml up  {% endhighlight %} 
+  </div>
+  <div class="tab-content" id="tab2-3">
+  {% highlight console %}
+    # First copy all content to the RaspberryPi4
+    scp -r ./ <user>@<picarx-ip>:~/
 
-{% tab docker arm64v8 %}
-```console 
     TAG=latest ARCH=arm64v8 docker compose -f docker-compose-core.yml build 
     TAG=latest ARCH=arm64v8 docker compose -f docker-compose-dtp-no-gazebo.yml build 
-    TAG=latest ARCH=arm64v8 docker compose -f docker-compose-dtp-no-gazebo.yml up 
-```
-{% endtab %}
+    TAG=latest ARCH=arm64v8 docker compose -f docker-compose-dtp-no-gazebo.yml up   {% endhighlight %} 
+  </div>
 
-{% endtabs %}
+</div>
 
 
-## Build and start the Physical Twin on a RPi 3/4
+## Build and Start the Physical Twin on a RPi 3/4
 
-
-{% tabs pt %}
-
-{% tab pt arm32v7 %}
-```console 
+<div class="tab-container" id="activaterpi">
+  <ul class="tab-list">
+    <li class="tab active" data-tab="tab3-1">arm32v7 (RPi3)</li>
+    <li class="tab" data-tab="tab3-2">arm64v8 (RPi4)</li>
+  </ul>
+  <div class="tab-content active" id="tab3-1">
+  {% highlight console %}
     TAG=latest ARCH=arm32v7 docker compose -f docker-compose-core.yml build 
     TAG=latest ARCH=arm32v7 docker compose -f docker-compose-pt.yml build 
-    TAG=latest ARCH=arm32v7 docker compose -f docker-compose-pt.yml up 
-```
-{% endtab %}
-
-{% tab pt arm64v8 %}
-```console 
+    TAG=latest ARCH=arm32v7 docker compose -f docker-compose-pt.yml up  {% endhighlight %}
+  </div>
+  <div class="tab-content" id="tab3-2">
+  {% highlight console %}
     TAG=latest ARCH=arm64v8 docker compose -f docker-compose-core.yml build 
     TAG=latest ARCH=arm64v8 docker compose -f docker-compose-pt.yml build 
-    TAG=latest ARCH=arm64v8 docker compose -f docker-compose-pt.yml up 
-```
-{% endtab %}
+    TAG=latest ARCH=arm64v8 docker compose -f docker-compose-pt.yml up  {% endhighlight %}  
+  </div>
 
-{% endtabs %}
+</div>
 
 
-## Let the DTP drive
+## Let the DTP Drive
 
 After you start all Docker containers, you can switch into one of the containers and publish a picarx_msgs/Drive message, which will move the DTP with a certain speed and steering angle.
 
-```console
+
+<div class="tab-container" id="activaterpi">
+  <ul class="tab-list">
+    <li class="tab active" data-tab="tab4-1">Start the Digital Twin Prototype</li>
+    <li class="tab" data-tab="tab4-2">Start the Physical Twin</li>
+  </ul>
+  <div class="tab-content" id="tab4-1">
+  {% highlight console %}
     # SWITCH INTO THE CONTAINER
     docker exec -it picar-x-ackermann_skill-dtp-1 /bin/bash
 
-    # INSIDE CONTAINER:
+    # INSIDE CONTAINER
     source /root/catkin_ws/devel/picarx_ackermann_drive/setup.bash
 
     # PUBLISH A MESSAGE TO TURN RIGHT WITH 50 percent motor speed
@@ -128,5 +138,24 @@ After you start all Docker containers, you can switch into one of the containers
     rostopic pub /picarx/drive/command picarx_msgs/Drive "{speed: 80, angle: -20}"
 
     # PUBLISH A MESSAGE TO TURN THE WHEELS LEFT BUT DRIVE BACKWARD WITH 80 percent motor speed
-    rostopic pub /picarx/drive/command picarx_msgs/Drive "{speed: -80, angle: -20}"
-```
+    rostopic pub /picarx/drive/command picarx_msgs/Drive "{speed: -80, angle: -20}"  {% endhighlight %}  
+  </div>
+  <div class="tab-content active" id="tab4-2">
+  {% highlight console %}
+    # SWITCH INTO THE CONTAINER
+    docker exec -it picar-x-ackermann_skill-pt-1 /bin/bash
+
+    # INSIDE CONTAINER
+    source /root/catkin_ws/devel/picarx_ackermann_drive/setup.bash
+
+    # PUBLISH A MESSAGE TO TURN RIGHT WITH 50 percent motor speed
+    rostopic pub /picarx/drive/command picarx_msgs/Drive "{speed: 50, angle: 20}"
+
+    # PUBLISH A MESSAGE TO TURN LEFT WITH 80 percent motor speed
+    rostopic pub /picarx/drive/command picarx_msgs/Drive "{speed: 80, angle: -20}"
+
+    # PUBLISH A MESSAGE TO TURN THE WHEELS LEFT BUT DRIVE BACKWARD WITH 80 percent motor speed
+    rostopic pub /picarx/drive/command picarx_msgs/Drive "{speed: -80, angle: -20}"  {% endhighlight %}
+  </div>
+
+</div>
diff --git a/docs/tabs.css b/docs/tabs.css
diff --git a/docs/tabs.js b/docs/tabs.js