Improved search functionality and added tags to the search.

Change-Id: I08d8e6dab1268cfaccbd0aa9268d5c3209c263aa

Author: dmalby

_config.yml

@@ -53,6 +53,8 @@ collections:
       - cloud starter
       - launching
       - dashboard
+      - create instances
+      - creating instances
     difficulty: 1
     duration: 25
     status: draft

_includes/nav.html

@@ -20,7 +20,6 @@
                         <a class="nav-link" href="https://ardc.edu.au/contact-us/">Contact Us</a>
                     </li>
                     <li class="nav-item d-flex align-items-center">
-                        <a class="nav-icon icon-x ms-2" href="https://x.com/ARDC_AU"><i class="fab fa-x-twitter"></i></a>
                         <a class="nav-icon icon-linkedin ms-2" href="https://www.linkedin.com/company/australian-research-data-commons/"><i class="fab fa-linkedin-in"></i></a>
                         <a class="nav-icon icon-youtube ms-2" href="https://www.youtube.com/c/ARDC_AU"><i class="fab fa-youtube"></i></a>
                         <a class="nav-icon icon-contact ms-2" href="https://ardc.edu.au/contact-us"><i class="fa fa-envelope"></i></a>

_layouts/tutorial.html

@@ -45,11 +45,11 @@ <h1 class="display-4">{{ collection.title }}</h1>
             <div class="p-2">
               <p class="mb-1"><i class="fa fa-info-circle"></i> This tutorial is part of the {{ collection.curriculum }} Series.</p>
               {% if collection.curriculum == "Cloud Starter" %}
-                <a class="btn btn-link btn-sm p-0" href="{{ '/cloud-starter/02-tutorials' | prepend: site.baseurl }}"><i class="fa fa-arrow-left"></i> Back to Cloud Starter</a>
+                <a class="btn btn-back btn-sm p-0" href="{{ '/cloud-starter/02-tutorials' | prepend: site.baseurl }}">Back to Cloud Starter</a>
               {% elsif collection.curriculum == "Cloud Two" %}
-                <a class="btn btn-link btn-sm p-0" href="{{ '/cloud-two/02-tutorials' | prepend: site.baseurl }}"><i class="fa fa-arrow-left"></i> Back to Cloud Two</a>
+                <a class="btn btn-back btn-sm p-0" href="{{ '/cloud-two/02-tutorials' | prepend: site.baseurl }}">Back to Cloud Two</a>
               {% elsif collection.curriculum == "Cloud Expert" %}
-                <a class="btn btn-link btn-sm p-0" href="{{ '/cloud-expert/02-tutorials' | prepend: site.baseurl }}"><i class="fa fa-arrow-left"></i> Back to Cloud Expert</a>
+                <a class="btn btn-back btn-sm p-0" href="{{ '/cloud-expert/02-tutorials' | prepend: site.baseurl }}">Back to Cloud Expert</a>
               {% endif %}
             </div>
           {% endif %}

_sass/_theme.scss

@@ -178,6 +178,54 @@ ul.list-bullet {
   }
 }
 
+.btn-back {
+  color: $gray-900;
+  font-weight: 600;
+  text-decoration: none;
+  position: relative;
+  padding: 0;
+  display: inline-block;
+  &:after {
+    content: "";
+    position: absolute;
+    bottom: -1px;
+    left: 20px;
+    height: 1px;
+    width: 0;
+    background-color: $ardc-purple;
+    transition: all 0.3s ease-in-out 0s;
+  }
+  &:before {
+    color: $ardc-blue;
+    margin-right: 10px;
+    vertical-align: initial;
+    text-rendering: auto;
+    font-family: 'Font Awesome 6 Free';
+    content: "\f053";
+    font-weight: 900;
+    -webkit-font-smoothing: antialiased;
+    transition: all 0.15s ease-in-out 0s;
+  }
+  &:hover {
+    color: $gray-900;
+    font-weight: 600;
+    text-decoration: none;
+    &:after {
+      width: calc(100% - 20px);
+    }
+    &:before {
+      color: $ardc-purple;
+      margin-right: 12px;
+      vertical-align: initial;
+      text-rendering: auto;
+      font-family: 'Font Awesome 6 Free';
+      content: "\f053";
+      font-weight: 900;
+      -webkit-font-smoothing: antialiased;
+    }
+  }
+}
+
 .btn-primary {
   color: $black;
   background-color: $yellow;

_sass/_variables.scss

@@ -106,7 +106,7 @@ $grid-gutter-width:           1.5rem;
 $border-width:                1px;
 $border-color:                $gray-300;
 
-$border-radius:               .25rem;
+$border-radius:               0;
 $border-radius-sm:            .2rem;
 $border-radius-lg:            .3rem;
 $border-radius-pill:          50rem;

assets/javascript/main.js

@@ -18,7 +18,17 @@ $(function() {
 
 $(function() {
   var tutorials = new Bloodhound({
-    datumTokenizer: Bloodhound.tokenizers.obj.whitespace('title', 'summary'),
+    datumTokenizer: function(datum) {
+      var tokens = [];
+      if (datum.title) tokens = tokens.concat(Bloodhound.tokenizers.whitespace(datum.title));
+      if (datum.summary) tokens = tokens.concat(Bloodhound.tokenizers.whitespace(datum.summary));
+      if (datum.tags && Array.isArray(datum.tags)) {
+        datum.tags.forEach(function(tag) {
+          tokens = tokens.concat(Bloodhound.tokenizers.whitespace(tag));
+        });
+      }
+      return tokens;
+    },
     queryTokenizer: Bloodhound.tokenizers.whitespace,
     prefetch: baseurl + '/search.json?q=' + Date.now(), /* remove Date for production caching */
   });

assets/main.scss

@@ -36,7 +36,7 @@ section.banner {
   &.bg-image {
     background-image: url($baseurl + "/assets/images/tutorials-banner-bg.jpg");
     background-size: cover;
-}
+  }
 }
 
 .banner-hero-card {
@@ -55,6 +55,10 @@ section.banner {
   margin-bottom: -250px;
 }
 
+#tutorial-page img {
+  max-width: 100%;
+}
+
 /*
  * Sidebar
  */
@@ -204,8 +208,9 @@ code {
     color: #fff;
     background: $success;
     border-radius: 12px;
-    &:after {
-      font-family: 'Font Awesome 5 Free';
+    &::before {
+      font-family: "Font Awesome 6 Free";
+      font-weight: 900;
       content: "\f00c";
     }
   }

search.json

@@ -9,7 +9,7 @@ layout: none
     "summary": "{{ collection.summary }}",
     "category": "{{ collection.category }}",
     "level": "{{ collection.level }}",
-    "tags": {{ collection.tags | jsonify }},
+    "tags": [{% for tag in collection.tags %}"{{ tag }}"{% unless forloop.last %}, {% endunless %}{% endfor %}],
     "difficulty": {{ collection.difficulty }},
     "duration": "{{ collection.duration }} minutes",
     "status": "{{ collection.status }}",