UI and content updated for the Robots (#36)

* UI and File updates * Content updates * GitHub edit button fix * URL changes * Firmware Setup instructions * Syntax and UI fixes * Virtual Robot updates
Pera-Swarm · Jul 19, 2023 · c888a18 · c888a18
1 parent 54bddbb
commit c888a18
Show file tree

Hide file tree

Showing 69 changed files with 1,610 additions and 282 deletions.
diff --git a/_includes/alert.html b/_includes/alert.html
@@ -0,0 +1,5 @@
+<div class="alert {{ include.type}} d-flex align-items-center" role="alert">
+    <div>
+        {{ include.message }}
+    </div>
+</div>
diff --git a/_includes/breadcrumb.html b/_includes/breadcrumb.html
@@ -8,8 +8,10 @@
 {%- if node.has_children -%}
 {%- assign children_list = pages_list | where: "parent", node.title -%}
 {%- for child in children_list -%}
-{%- if page.url == child.url or page.parent == child.title -%}
+{%- if page.url == child.url or page.parent == child.title and page.parent == child.grade_parent -%}
 {%- assign second_level_url = child.url | relative_url -%}
+{%- else -%}
+{%- assign second_level_url = '../' -%}
 {%- endif -%}
 {%- endfor -%}
 {%- endif -%}
@@ -51,10 +53,13 @@
     </ul>
 
     {% if page.gh_link -%}
-    <a class="edit" href="{{ site.gh_edit_repository }}/blob/{{ site.gh_edit_branch }}/{{ page.gh_link }}" title="Edit on GitHub" rel="noreferrer" target="_blank">
-        <i class="fa fa-github fa-13"></i> Edit on GitHub
+    <a class="text-decoration-none"
+        href="{{ site.gh_edit_repository }}/blob/{{ site.gh_edit_branch }}/{{ page.gh_link }}" title="Edit on GitHub"
+        rel="noreferrer" target="_blank">
+
+        <i class="fa fa-github fa-13"></i> Edit <span class="d-none d-md-inline">on GitHub</span>
     </a>
     {% endif -%}
 </div>
 
-{% endunless %}
+{% endunless %}
diff --git a/_includes/head.html b/_includes/head.html
@@ -15,6 +15,8 @@
     <link rel="stylesheet" href="{{ '/assets/css/theme.css' | relative_url }}">
     <link rel="stylesheet" href="{{ '/assets/css/index.css' | relative_url }}">
     <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.5.0/styles/default.min.css" />
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
+        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
 
     {% include google_analytics.html %}
 
@@ -25,6 +27,10 @@
 
     {% seo %}
 
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
+        integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
+        crossorigin="anonymous"></script>
+
     <script type="text/javascript">
         window.ui = {
             title: "jekyll-rtd-theme",
@@ -37,4 +43,4 @@
         };
     </script>
 
-</head>
+</head>
diff --git a/_includes/sidebar.html b/_includes/sidebar.html
@@ -1,6 +1,6 @@
 {% include page_tree_builder.html pages=site.html_pages %}
 
-<div class="sidebar-wrap overflow-hidden">
+<div class="d-none sidebar-wrap overflow-hidden">
     <div class="sidebar height-full overflow-y-scroll overflow-x-hidden">
         <div class="header d-flex flex-column p-3 text-center">
             <div class="title pb-1">
@@ -12,15 +12,16 @@
 
             {% if site.search_enabled -%}
             <form class="search pt-2" action="/search.html" method="get" autocomplete="off">
-                <input class="form-control input-block input-sm" type="text" name="q" placeholder="Search docs..."/>
+                <input class="form-control input-block input-sm" type="text" name="q" placeholder="Search docs..." />
             </form>
             {% endif -%}
         </div>
         <div class="toctree py-2" data-spy="affix" role="navigation" aria-label="main navigation">
             {%- for node in pages_list -%}
             {%- if node.parent == nil -%}
             {%- unless node.nav_exclude -%}
-            <a class="caption d-block text-uppercase no-wrap px-2 py-0 {% if page.url == node.url %} active{% endif %}" href="{{ node.permalink | relative_url }}">
+            <a class="caption d-block text-uppercase no-wrap px-2 py-0 {% if page.url == node.url %} active{% endif %}"
+                href="{{ node.permalink | relative_url }}">
                 {{ node.title }}
             </a>
 
@@ -30,19 +31,24 @@
                 <!-- Secondary Level Links: Parents -->
                 {%- for child in children_list -%}
                 {%- unless child.nav_exclude -%}
-                <li class="toc level-1 {% if page.url == child.url or page.parent == child.title %} active{% endif %}" data-sort="{{ child.nav_order }}" data-level="1">
-                    <a class="d-flex flex-items-baseline {% if page.url == child.url %} active{% endif %}" href="{{ child.url | relative_url }}">
+                <li class="toc level-1 {% if page.url == child.url or page.parent == child.title %} active{% endif %}"
+                    data-sort="{{ child.nav_order }}" data-level="1">
+                    <a class="d-flex flex-items-baseline {% if page.url == child.url %} active{% endif %}"
+                        href="{{ child.url | relative_url }}">
                         {{ child.title }}
                     </a>
 
                     {%- if child.has_children -%}
-                    {%- assign grand_children_list = pages_list | where: "parent", child.title | where: "grand_parent", node.title -%}
+                    {%- assign grand_children_list = pages_list | where: "parent", child.title | where: "grand_parent",
+                    node.title -%}
                     <ul>
                         <!-- Third Level Links: Children -->
                         {%- for grand_child in grand_children_list -%}
                         {%- unless grand_child.nav_exclude -%}
-                        <li class="toc level-2 {% if page.url == grand_child.url %} active{% endif %}" data-sort="1" data-level="2">
-                            <a class="pl-3 d-flex flex-items-baseline {% if page.url == grand_child.url %} active{% endif %}" href="{{ grand_child.url | relative_url }}">
+                        <li class="toc level-2 {% if page.url == grand_child.url %} active{% endif %}" data-sort="1"
+                            data-level="2">
+                            <a class="pl-3 d-flex flex-items-baseline {% if page.url == grand_child.url %} active{% endif %}"
+                                href="{{ grand_child.url | relative_url }}">
                                 {{ grand_child.title }}
                             </a>
                         </li>
@@ -62,3 +68,90 @@
         </div>
     </div>
 </div>
+
+
+<div class="d-flex flex-column align-items-stretch flex-shrink-0 bg-white sidebar-wrap overflow-hidden">
+    <!-- <a href="/" class="d-flex align-items-center flex-shrink-0 p-3 link-dark text-decoration-none border-bottom">
+        <svg class="bi me-2" width="30" height="24">
+            <use xlink:href="#bootstrap" />
+        </svg>
+        <span class="fs-5 fw-semibold">List group</span>
+    </a>
+    <div class="list-group list-group-flush border-bottom scrollarea">
+        <a href="#" class="list-group-item list-group-item-action active py-3 lh-tight" aria-current="true">
+            <div class="d-flex w-100 align-items-center justify-content-between">
+                <strong class="mb-1">List group item heading</strong>
+                <small>Wed</small>
+            </div>
+            <div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div>
+        </a>
+    </div> -->
+
+    <div class="sidebar height-full overflow-y-scroll overflow-x-hidden">
+        <div class="header d-flex flex-column p-3 text-center">
+            <div class="title pb-1">
+                <a class="h4 no-underline py-1 px-2 rounded-1" href="{{ site.baseurl }}/" title="">
+                    <i class="fa fa-home mr-2 fa-13"></i>{{ site.title }}
+                </a>
+            </div>
+            {% if site.search_enabled -%}
+            <form class="search pt-2" action="/search.html" method="get" autocomplete="off">
+                <input class="form-control input-block input-sm" type="text" name="q" placeholder="Search docs..." />
+            </form>
+            {% endif -%}
+        </div>
+        <div class="toctree py-2" data-spy="affix" role="navigation" aria-label="main navigation">
+            {%- for node in pages_list -%}
+            {%- if node.parent == nil -%}
+            {%- unless node.nav_exclude -%}
+            <a class="caption d-block text-uppercase no-wrap px-2 py-0 {% if page.url == node.url %} active{% endif %}"
+                href="{{ node.permalink | relative_url }}">
+                {{ node.title }}
+
+                {%- if node.version != nil -%}<span class="small ms-1 font-monospace">({{node.version}})</span>{%- endif
+                -%}
+            </a>
+
+            {%- if node.has_children -%}
+            {%- assign children_list = pages_list | where: "parent", node.title -%}
+            <ul>
+                <!-- Secondary Level Links: Parents -->
+                {%- for child in children_list -%}
+                {%- unless child.nav_exclude -%}
+                <li class="toc level-1 {% if page.url == child.url or page.parent == child.title %} active{% endif %}"
+                    data-sort="{{ child.nav_order }}" data-level="1">
+                    <a class="d-flex flex-items-baseline {% if page.url == child.url %} active{% endif %}"
+                        href="{{ child.url | relative_url }}">
+                        {{ child.title }}
+                    </a>
+
+                    {%- if child.has_children -%}
+                    {%- assign grand_children_list = pages_list | where: "parent", child.title | where: "grand_parent",
+                    node.title -%}
+                    <ul>
+                        <!-- Third Level Links: Children -->
+                        {%- for grand_child in grand_children_list -%}
+                        {%- unless grand_child.nav_exclude -%}
+                        <li class="toc level-2 {% if page.url == grand_child.url %} active{% endif %}" data-sort="1"
+                            data-level="2">
+                            <a class="pl-3 d-flex flex-items-baseline {% if page.url == grand_child.url %} active{% endif %}"
+                                href="{{ grand_child.url | relative_url }}">
+                                {{ grand_child.title }}
+                            </a>
+                        </li>
+                        {%- endunless -%}
+                        {%- endfor -%}
+                    </ul>
+                    {%- endif -%}
+                </li>
+                {%- endunless -%}
+                {%- endfor -%}
+            </ul>
+            {%- endif -%}
+
+            {%- endunless -%}
+            {%- endif -%}
+            {%- endfor -%}
+        </div>
+    </div>
+</div>
diff --git a/_includes/thumbnail.html b/_includes/thumbnail.html
@@ -0,0 +1,6 @@
+<div class="row pb-4 pt-1">
+    <div class="col-sm-12 col-md-11 col-lg-10 mx-auto">
+        <img class="px-5 py-2 img-fluid img-thumbnail mx-auto d-block mw-100 {{ include.class }}"
+            src="{{ include.src }}" alt="{{include.alt}}">
+    </div>
+</div>
diff --git a/_layouts/default.html b/_layouts/default.html
@@ -6,11 +6,12 @@
 
 <html lang="{{ site.lang | default: 'en-US' }}">
 {% include head.html %}
+
 <body>
     {% include sidebar.html %}
 
     <div class="content-wrap">
-        <div class="header d-flex flex-justify-between p-2 hide-lg hide-xl" aria-label="top navigation">
+        <div class="header d-flex flex-justify-between p-2 d-block d-md-none" aria-label="top navigation">
             <button id="toggle" aria-label="Toggle menu" class="btn-octicon p-2 m-0 text-white" type="button">
                 <i class="fa fa-bars"></i>
             </button>
@@ -23,23 +24,24 @@
             {% include breadcrumb.html %}
             <hr>
 
-            <div class="vh-75 px-3 page pb-5" role="main" itemscope="itemscope" itemtype="https://schema.org/Article">
+            <div class="vh-75 px-3 page pb-1" role="main" itemscope="itemscope" itemtype="https://schema.org/Article">
                 {{ content }}
 
                 {% if page.has_children == true and page.has_toc != false %}
                 <div class="pt-3">
-                    <h2 class="text-delta">Table of contents</h2>
+                    <h5 class="text-delta">Table of contents</h5>
                     <ul>
-                        {%- assign children_list = pages_list | where: "parent", page.title | where: "grand_parent", page.parent -%}
+                        {%- assign children_list = pages_list | where: "parent", page.title | where: "grand_parent",
+                        page.parent -%}
                         {% for child in children_list %}
                         <li>
-                            <a href="{{ child.url | relative_url }}">{{ child.title }}</a>{% if child.summary %} - {{ child.summary }}{% endif %}
+                            <a href="{{ child.url | relative_url }}">{{ child.title }}</a>{% if child.summary %} - {{
+                            child.summary }}{% endif %}
                         </li>
                         {% endfor %}
                     </ul>
                 </div>
                 {% endif %}
-
             </div>
 
             <!-- {% include pagination.html %} -->
@@ -48,9 +50,11 @@ <h2 class="text-delta">Table of contents</h2>
             <div class="copyright text-center text-gray" role="contentinfo">
                 <i class="fa fa-copyright"></i>
                 <span class="time">{{ site.time | date: '%Y' }},</span>
-                <a class="text-gray" href="#" rel="noreferrer" target="_blank">Pera-Swarm - Department of Computer Engineering, University of Peradeniya</a>
-                <br/>
-                <span class="small">Version <a class="text-gray" href="#" rel="noreferrer" target="_blank">{{ site.version }}</a></span>
+                <a class="text-gray" href="#" rel="noreferrer" target="_blank">Pera-Swarm - Department of Computer
+                    Engineering, University of Peradeniya</a>
+                <br />
+                <span class="small">Version <a class="text-gray" href="#" rel="noreferrer" target="_blank">{{
+                        site.version }}</a></span>
             </div>
         </div>
     </div>
@@ -63,16 +67,22 @@ <h2 class="text-delta">Table of contents</h2>
         <div class="addons d-flex flex-column height-full p-2 d-none">
             <dl>
                 <dt>GitHub</dt>
-                <dd><a href="https://github.com/Pera-Swarm/docs" title=""><i class="fa fa-github pr-1"></i> Homepage </a></dd>
-                <dd><a href="https://github.com/Pera-Swarm/docs/issues" title=""><i class="fa fa-question-circle-o pr-1"></i> Issues </a></dd>
-                <dd><a href="https://github.com/Pera-Swarm/docs/release" title=""><i class="fa fa-download pr-1"></i>Download</a></dd>
+                <dd><a href="https://github.com/Pera-Swarm/docs" title=""><i class="fa fa-github pr-1"></i> Homepage
+                    </a></dd>
+                <dd><a href="https://github.com/Pera-Swarm/docs/issues" title=""><i
+                            class="fa fa-question-circle-o pr-1"></i> Issues </a></dd>
+                <dd><a href="https://github.com/Pera-Swarm/docs/release" title=""><i
+                            class="fa fa-download pr-1"></i>Download</a></dd>
             </dl>
             <hr>
-            <div class="license f6 pb-2"><a href="{{ site.baseurl }}/" title="Pera-Swarm">This</a> is under the terms of <a href="https://github.com/Pera-Swarm/docs">MIT License</a>. </div>
+            <div class="license f6 pb-2"><a href="{{ site.baseurl }}/" title="Pera-Swarm">This</a> is under the terms of
+                <a href="https://github.com/Pera-Swarm/docs">MIT License</a>.
+            </div>
         </div>
     </div>
 
     {% include footer_scripts.html %}
 
 </body>
-</html>
+
+</html>
diff --git a/_layouts/table_wrappers.html b/_layouts/table_wrappers.html
@@ -2,9 +2,5 @@
 layout: vendor/compress
 ---
 
-{% assign content_ = content | replace: '<table', '<div class="table-wrapper"><table class="table table-bordered" ' %}
-{% assign content_ = content_ | replace: '</table>', '</table></div>' %}
-
-{% assign content_ = content_ | replace: '<img', '<img class="px-5 py-2 img-fluid img-thumbnail mx-auto d-block mw-100" ' %}
-
-{{ content_ }}
+{%- assign content_ = content | replace: '<table', '<div class="table-wrapper"><table class="table table-bordered" ' -%}
+    {%- assign content_=content_ | replace: '</table>' , '</table></div>' -%} {{ content_ }}
diff --git a/assets/css/index.css b/assets/css/index.css
@@ -28,6 +28,10 @@ code {
     padding: 16px !important;
 }
 
+tr code {
+    padding: 4px !important;
+}
+
 h1,
 h2,
 h3,
@@ -377,4 +381,56 @@ table {
     font-size: 3.5rem;
     font-weight: 300;
     line-height: 1.2;
+}
+
+
+.alert {
+    position: relative;
+    padding: 1rem 1rem;
+    margin-top: 0.75rem;
+    margin-bottom: 1rem;
+    border: 1px solid transparent;
+    border-radius: 0.25rem;
+}
+
+.alert-primary {
+    color: #084298;
+    background-color: #cfe2ff;
+    border-color: #b6d4fe;
+}
+
+.alert-secondary {
+    color: #41464b;
+    background-color: #e2e3e5;
+    border-color: #d3d6d8;
+}
+
+.alert-success {
+    color: #0f5132;
+    background-color: #d1e7dd;
+    border-color: #badbcc;
+}
+
+.alert-danger {
+    color: #842029;
+    background-color: #f8d7da;
+    border-color: #f5c2c7;
+}
+
+.alert-warning {
+    color: #664d03;
+    background-color: #fff3cd;
+    border-color: #ffecb5;
+}
+
+.alert-info {
+    color: #055160;
+    background-color: #cff4fc;
+    border-color: #b6effb;
+}
+
+.alert-dark {
+    color: #141619;
+    background-color: #d3d3d4;
+    border-color: #bcbebf;
 }