Initial test comments added. Some original commented code deleted

src/components/vs-input/vs-input.ts

@@ -122,6 +122,8 @@ export default class VsInput extends Vue {
         // this.$emit("clear");
     }
 
+    /* When the search button is clicked or the search input is changed, it updates the value property of the component with the current value of display, 
+    and emits a search-change event with the current value of display as the argument. */
     @Emit("search-change")
     search(): string {
         this.results = [];

src/components/vs-input/vs-input.vue

@@ -1,10 +1,15 @@
 <template>
+    <!-- Parent container with multiple rows -->
     <div class="is-multiline">
-        <!-- <div class="content column is-half is-offset-one-quarter" style="margin-top: 30px; padding-bottom: 0; margin-bottom: 0px"> -->
+        <!-- Search input wrapper -->
         <div class="column is-two-thirds-tablet is-half-desktop is-one-third-widescreen mx-auto">
+
+            <!-- Search box -->
             <div class="search-box mx-auto">
+                <!-- Search field -->
                 <div class="field has-addons main-search-from-bg">
                     <div class="control is-expanded">
+                        <!-- Input field for search query -->
                         <input
                             id="search_query"
                             v-model="display"
@@ -20,24 +25,26 @@
                             @keydown.tab="close"
                             @focus="focus"
                         />
-                        <!-- <p>Display is: {{ display }}</p> -->
-                        <!-- v-on:input="searchChanged" -->
                     </div>
 
+                    <!-- Search button -->
                     <div class="control">
                         <button class="button input is-medium search-button-icon" @click="search()">
-                            <!-- <img src="../../assets/fa/search.svg" style="height: 22px; width: 22px" /> -->
+                            <!-- Search icon -->
                             <i class="fas fa-search text-white"></i>
                         </button>
                     </div>
                 </div>
             </div>
         </div>
-        <!-- <div class="column is-half is-offset-one-quarter"> -->
+
+        <!-- Suggestions list -->
         <div class="column is-two-thirds-tablet is-half-desktop is-one-third-widescreen mx-auto">
             <ul v-show="showResults" class="autocomplete-results pure-u-23-24">
+                <!-- Loading indicator -->
                 <li v-if="isLoading" class="loading">Loading results...</li>
 
+                <!-- Iterating over suggestions -->
                 <li
                     v-for="(result, i) in suggestions"
                     v-else
@@ -47,6 +54,7 @@
                     v-bind:class="{ 'is-active': isSelected(i) }"
                     @click.prevent="select(result)"
                 >
+                    <!-- Displaying suggestion result -->
                     <div class="small-label">
                         <label>{{ result.value }} ({{ result.type }})</label>
                     </div>

src/views/home-view/home-view-component.ts

@@ -11,6 +11,9 @@ import { Suggestion } from "@/models/dataset";
 export default class HomeViewComponent extends Vue {
     public display = "";
 
+    /* This method is called when a search suggestion is selected. It takes a parameter suggestion which can be either a Suggestion object or a string. 
+    If it's a string, the method extracts the term and navigates to the "Search" route with the term as a parameter. If it's a Suggestion object, it extracts 
+    the value and type from the suggestion and navigates to the "Search" route with both parameters.*/
     onSearch(suggestion: Suggestion | string): void {
         let term;
         if (typeof suggestion === "string") {
@@ -22,6 +25,7 @@ export default class HomeViewComponent extends Vue {
         }
     }
 
+    /* This method is called when the user initiates a search. It navigates to the "Search" route with the display property as a parameter. */
     search(): void {
         this.$router.push({ name: "Search", params: { display: this.display } });
     }

src/views/home-view/home-view-component.vue

@@ -18,13 +18,6 @@
             </a>
         </div> -->
 
-        <!-- <div class="column">
-            <div class="col text-center py-3">
-                <h1>Tethys Research Data Repository</h1>
-                <p class="lead">Data Publisher for Geoscience Austria</p>
-                <hr class="center-line" />
-            </div>
-        </div> -->
         <div class="column">
             <div class="col text-center py-3">
                 <h1>Tethys Research Data Repository</h1>
@@ -213,7 +206,7 @@
             <!-- <div class="columns is-mobile partner-logos"> -->
             <div class="columns">
                 <div class="column col-sm">
-                    <div class="card mx-auto" style="width: 18rem; border: 0rem">
+                    <div class="card mx-auto" style="width: 18rem; box-shadow: none; border: 0rem">
                         <div class="card-body">
                             <!-- <h5 class="card-title">About TETHYS</h5> -->
                             <a target="_blank" href="https://www.re3data.org/repository/r3d100013400">
@@ -223,7 +216,7 @@
                     </div>
                 </div>
                 <div class="column col-sm">
-                    <div class="card mx-auto" style="width: 28rem; border: 0rem">
+                    <div class="card mx-auto" style="width: 28rem; box-shadow: none; border: 0rem">
                         <div class="card-body">
                             <a target="_blank" href="http://www.geosphere.at/">
                                 <img src="@/assets/site/img/geosphere-austria-logo.jpg" alt="logo geosphere austria" />
@@ -232,7 +225,7 @@
                     </div>
                 </div>
                 <div class="column col-sm">
-                    <div class="card mx-auto" style="width: 18rem; border: 0rem">
+                    <div class="card mx-auto" style="width: 18rem; box-shadow: none; border: 0rem">
                         <div class="card-body">
                             <a target="_blank" href="https://www.base-search.net/Search/Results?q=coll:fttethysrdr&refid=dctablede">
                                 <img src="@/assets/site/img/base_logo.png" alt="logo base" />