conflict resolved

src/App.svelte

@@ -15,9 +15,13 @@
     import { SearchIcon } from "@rgossiaux/svelte-heroicons/outline";
 
     let currentView = "/topics";
+    let randomItemId;
 
-    function handleTabChanged(event) {
+    function getRandomItemId(){
-        currentView = event.detail.tab;
+        fetch('/learn.json?_shape=array&sql=select+rowid+from+items+order+by+random()+limit+1').then(r => r.json())
+        .then(data => {
+            randomItemId = data[0].rowid;
+        });
     }
 
 	async function hashchange() {
@@ -32,8 +36,11 @@
 		}
 	}
 
+    onMount(getRandomItemId);
 	onMount(hashchange);
     
+
+    
 </script>
 
 
@@ -57,6 +64,8 @@
             <CourseList/>
         {:else if currentView.startsWith("/item/")}
             <ItemDetail itemid={currentView.split("/")[2]}/>
+        {:else if currentView == "/random"}
+            {#if randomItemId}<ItemDetail itemid={randomItemId}/>{/if}
         {:else if currentView === "/search"}
             <AdvancedSearch/>
         {:else if currentView === "/wanttolearn"}
@@ -75,7 +84,7 @@
             <SearchIcon class="mr-4 flex-shrink-0 h-6 w-6 text-indigo-300"/>
             Formats
         </a>
-        <a href="#/item/1" class="text-indigo-100 hover:bg-gray-900 w-full group flex items-center px-2 py-2 text-sm font-medium rounded-md">
+        <a href="#/random" on:click={getRandomItemId} class="text-indigo-100 hover:bg-indigo-600 w-full group flex items-center px-2 py-2 text-sm font-medium rounded-md">
             <SearchIcon class="mr-4 flex-shrink-0 h-6 w-6 text-indigo-300"/>
             Random Item
         </a>

src/ItemDetail.svelte

@@ -5,12 +5,19 @@
 
     export let itemid;
     let item;
+    let reviews = [];
 
     $: fetch(`/learn/items/${itemid}.json?_shape=object`)
         .then(r => r.json())
         .then(data => {
             item = data[itemid];
         });
+    
+    $: fetch(`/learn/reviews.json?_shape=array&item_id__exact=${itemid}`)
+      .then(r => r.json())
+      .then(data => {
+          reviews = data;
+    });
 
     function saveStatusToLocalStorage(event){
       // console.log($bookmarks)
@@ -184,28 +191,18 @@
         <h2 class="text-base font-bold text-gray-100">Reviews</h2>
       </div>
       
-      <div class="flex flex-col md:flex-row md:overflow-x-auto md:pb-5 mt-3 gap-2 scroll">
+      <div class="flex flex-col md:flex-row md:overflow-x-auto md:pb-5 mt-3 gap-2">
-        {#each reviews as review}
+      {#each reviews as review}
-          <article class="px-3 pt-4 bg-gray-800 rounded-lg text-sm shrink-0 w-full lg:w-1/2 flex flex-col justify-between h-48">
+        <article class="px-3 py-4 bg-gray-200 rounded-lg text-xs w-48 max-w-sm shrink-0">
-            <div>
+          <h3 class="font-semibold">{review.blurb.toString().slice(0,10)}...</h3>
-              <h3 class="font-semibold truncate text-gray-50">{review.heading}</h3>
+          <p class="mt-2">{review.blurb}</p>
-              <p class="mt-2 line-clamp text-gray-200">{review.details}</p>
+          <div class="mt-3">
-            </div>
+            <sl-rating value={review.rating}></sl-rating>
-            <div class="mt-4">
+            <span class="ml-2">...{review.by}</span>
-              <div class="flex justify-start items-center">
+          </div>
-                <img src={review.image} class="rounded-full w-10 h-10" alt="user avatar"/>
+        </article>
-                <div class="flex flex-col items-start ml-2 overflow-hidden text-xs text-gray-300">
+      {/each}
-                  <p class="truncate pr-2">By {review.by}</p>
+  
-                  <span class="">{review.date}</span>  
-                </div>
-              </div>
-              <div class="ml-10 mt-1">
-                <sl-rating style="--symbol-size: 1rem" readonly precision="0.1" value={review.rating}></sl-rating>
-              </div>
-              
-            </div>
-          </article>
-        {/each}  
       </div>
     </section>
     <!-- more books by same author  -->

src/VideoCard.svelte

@@ -11,8 +11,6 @@
 
   let ytid = youtubeurl && youtube_parser(youtubeurl);
   let thumbnail_image_url  = ytid && `https://img.youtube.com/vi/${ytid}/mqdefault.jpg`
-
-  let vimeo = GET https://vimeo.com/api/oembed.json?url={video_url}
 </script>