feat: better bookMark handling

script.ts

@@ -0,0 +1,44 @@
+import { create, insertMultiple, search } from 'npm:@orama/orama'
+
+const movieDB = await create({
+  schema: {
+    title: 'string',
+    director: 'string',
+    plot: 'string',
+    year: 'number',
+    isFavorite: 'boolean',
+  },
+})
+
+const docs = [
+  {
+    title: 'The prestige',
+    director: 'Christopher Nolan',
+    plot: 'Two friends and fellow magicians become bitter enemies after a sudden tragedy. As they devote themselves to this rivalry, they make sacrifices that bring them fame but with terrible consequences.',
+    year: 2006,
+    isFavorite: true,
+  },
+  {
+    title: 'Big Fish',
+    director: 'Tim Burton',
+    plot: 'Will Bloom returns home to care for his dying father, who had a penchant for telling unbelievable stories. After he passes away, Will tries to find out if his tales were really true.',
+    year: 2004,
+    isFavorite: true,
+  },
+  {
+    title: 'Harry Potter and the Philosopher\'s Stone',
+    director: 'Chris Columbus',
+    plot: 'Harry Potter, an eleven-year-old orphan, discovers that he is a wizard and is invited to study at Hogwarts. Even as he escapes a dreary life and enters a world of magic, he finds trouble awaiting him.',
+    year: 2001,
+    isFavorite: false,
+  },
+];
+
+// await insertMultiple(movieDB, docs);
+
+
+const searchResult = await search(movieDB, {
+  term: 'Chr',
+})
+
+console.log(searchResult)

src/components/Logo.svelte

@@ -2,6 +2,6 @@
   import { BookIcon } from './icons'
 </script>
 
-<a aria-label="Regresar al inicio" href="/">
-  <BookIcon className="hover:text-blue-400" />
+<a class="hover:text-blue-400" aria-label="Regresar al inicio" href="/">
+  <BookIcon className="" />
 </a>

src/components/Navbar.svelte

@@ -13,6 +13,7 @@
   import { goto } from '$app/navigation'
   import { user } from '@/state/user'
   import Switch from './Switch.svelte'
+  import { goToChapter } from '@/utils/chapter'
 
   let mobileMenu = false
   let showMenu = false
@@ -76,6 +77,7 @@
 <header class="sticky top-0 z-30 h-20 bg-white dark:bg-[#293548] sm:h-28 xl:h-24">
   <div class="mx-auto flex h-full max-w-screen-xl items-center justify-between px-3">
     <ul class="flex items-center gap-4 sm:hidden">
+
       <button
         on:click={() => {
           mobileMenu = !mobileMenu
@@ -99,7 +101,10 @@
             </span>
           </button>
           <button
-            on:click={() => goToPage('/read')}
+            on:click={() => {
+							mobileMenu = false
+							goToChapter()
+						}}
             class="block h-1/4 w-full px-4 py-1 text-xl hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"
           >
             <span class="flex flex-row items-center gap-2 align-middle">
@@ -168,19 +173,27 @@
         </Link>
       {/if}
     </ul>
-    <div class="flex justify-center align-middle">
-      <Switch className="xl:relative xl:left-7 lg:left-20 md:left-16 sm:left-14 max-sm:right-14" />
-      <Logo />
+
+
+
+    <div class="flex justify-center align-middle gap-0">
+			<Switch className="xl:relative xl:left-10 lg:left-20 md:left-16 sm:left-14 max-sm:right-14" />
+			<Logo />
     </div>
-
     <nav class="hidden sm:flex sm:items-center">
+
       <ul class="flex items-center gap-4">
         <Link href="/search" text="Buscar">
           <SearchIcon />
         </Link>
-        <Link href="/read" text="Leer">
-          <BookOpenIcon />
-        </Link>
+        <button
+          on:click={() => goToChapter()}
+          class="block h-1/4 w-full px-4 py-1 text-xlhover:text-[#175d93] text-lg font-semibold tracking-widest transition-colors hover:text-[#2b8ad3]"
+        >
+          <span class="flex flex-row items-center gap-2 align-middle">
+            Leer <BookOpenIcon />
+          </span>
+        </button>
         <Link href="/notes" text="Notas">
           <NoteIcon />
         </Link>

src/components/StudyChapter.svelte

@@ -13,9 +13,6 @@
   import { Stretch } from 'svelte-loading-spinners'
   import { clickOutside } from '@/utils/clickOutside.js'
 
-  /** @type {boolean} */
-  export let wantBookMark = false
-
   /** @type {string} */
   export let version = 'rv1960'
 
@@ -67,18 +64,6 @@
   }
 
   onMount(async () => {
-    if (wantBookMark) {
-      const bkString = localStorage.getItem('bookmark')
-
-      if (bkString) {
-        const bkmark = JSON.parse(bkString)
-
-        book = bkmark.book
-        version = bkmark.version
-        chapter = bkmark.chapter
-      }
-    }
-
     info = await getData()
     chapters = info.num_chapters
   })

src/routes/+page.svelte

@@ -1,5 +1,6 @@
 <script>
   import Button from '@/components/Button.svelte'
+	import { goToChapter } from '@/utils/chapter'
 </script>
 
 <div class="flex h-[100%] flex-col items-center p-0 sm:flex-row sm:p-6">
@@ -14,7 +15,7 @@
 
     <div class="flex items-center gap-10 py-6 text-xl font-bold">
       <Button
-        href="/read"
+        on:click={() => goToChapter()}
         color="blue"
         className="hover:scale-105 hover:text-white transition-transform p-8"
       >

src/utils/chapter.js

@@ -0,0 +1,18 @@
+import { goto } from '$app/navigation'
+
+export function goToChapter() {
+  const bkString = localStorage.getItem('bookmark')
+
+  if (bkString) {
+    const bkmark = JSON.parse(bkString)
+
+    const book = bkmark.book
+    const version = bkmark.version
+    const chapter = bkmark.chapter
+
+    goto(`/chapter/${version}/${book}/${chapter}`)
+    return
+  }
+
+  goto('/chapter/rv1960/Genesis/1')
+}