changed queries and loads etc. Learned html basics

src/lib/queries.js

@@ -2,7 +2,10 @@
  * Example of how you could re-use GROQ queries across different contexts with Javascript.
  * As your schema evolves, this pattern will be useful to keep your data in sync across all surfaces.
  */
-export function getPostsQuery(extraFilter) {
+export function getPostsQuery() {
+
+
+  
     return `*[_type == "post"] {
       _id,
       _type,
@@ -26,17 +29,3 @@ export function getPostsQuery(extraFilter) {
   }
 
   
-  // Insert the return component calling `getContent()` below
-  /**
-   * You can also re-use parts of projections as fragments.
-   * In this case, we're defining that, to render an author card, we need their name, slug & image.
-   */
-  export const POST_CARD_FRAGMENT = `
-  _id,
-  _type,
-  _createdAt,
-  _updatedAt,
-  title,
-  slug,
-  coverImage
-  `

src/routes/+layout.svelte

@@ -5,8 +5,10 @@
     import '../app.css';
 
 
-    // Navigation links are generated based on this object
-    const nav = [
+/*  Navigation links are generated based on this object.
+    Nav items are added by adding and object to the nav array.
+    Underscore _ should be added instead of whitespace, and it is then removed when the nav item is instantiated.
+ */    const nav = [
         {
             name: "index",
             subPages: [],
@@ -40,7 +42,7 @@
         {#each nav as main,i}
             {#if i != 0}
                 {#if !nav[i].subPages[0]}
-                    <li class="nav-item font-jose inline-block"><a href={main.name} class={selected==nav[i] ? "nav-link text-2xl p-3" : "nav link text-2xl p-3"} on:click={changeComponent} id={i} >{main.name}</a></li>
+                    <li class="nav-item font-jose inline-block"><a href="/{main.name}" class={selected==nav[i] ? "nav-link text-2xl p-3" : "nav link text-2xl p-3"} on:click={changeComponent} id={i} >{main.name}</a></li>
                 {:else}
                     <li class="nav-item font-jose inline-block"><button class={selected==nav[i] ? "nav-link text-2xl p-3" : "nav link text-2xl p-3"} on:click={changeComponent} id={i} >{main.name}</button></li>
                 {/if}
@@ -51,12 +53,12 @@
     {#key selected}
         <ul in:blur={{ delay: 250 }} out:blur={{ duration: 250 }} class="text-center h-4 my-1">
             {#each selected.subPages as subPage}
-                <li class="sub-nav-item inline-block  font-jose"><a class="sub-nav-link text-xl p-2"href={(subPage)}>{subPage.replace(/_/g, ' ')}</a></li>   
+                <li class="sub-nav-item inline-block  font-jose"><a class="sub-nav-link text-xl p-2"href="/{(subPage)}">{subPage.replace(/_/g, ' ')}</a></li>   
             {/each}
 
         </ul>
     {/key}
-    <li><ThemeSwitch class=""/></li>
+    <li><ThemeSwitch/></li>
 </nav>
 <div class="container text-center w-3/4 mx-auto">
     <slot />

src/routes/learnings/+page.server.js

@@ -1,20 +1,43 @@
 import { client } from '$lib/sanity/client.js'
-import { POST_CARD_FRAGMENT, getPostsQuery } from '$lib/queries.js'
+// import { getPostsQuery } from '$lib/queries.js'
 
-// Fetch all valid posts & authors to display in the homepage
-export async function load() {
-  const data = await client.fetch(/* groq */ `{
-		"posts": ${getPostsQuery()},
-  }`)
+// // Fetch all valid posts & authors to display in the homepage
+// export async function load() {
+//   const data = await client.fetch(/* groq */ `{
+// 		"posts": ${getPostsQuery()},
+//   }`)
+
+//   if (data) {
+//     return {
+//       status: 200,
+//       body: data
+//     }
+//   }
+
+//   return {
+//     status: 404
+//   }
+// }
+
+
+export async function load({ params }) {
+  const data = await client.fetch(`*[_type == "post"] {
+    title,
+    slug,
+    coverImage {
+      ...,
+      asset->
+    },
+    body,
+  }`);
 
   if (data) {
     return {
-      status: 200,
-      body: data
-    }
+      posts: data
+    };
   }
-
   return {
-    status: 404
-  }
+    status: 500,
+    body: new Error("Internal Server Error")
+  };
 }

src/routes/learnings/+page.svelte

@@ -1,11 +1,16 @@
 <script>
-	import { getAllContexts } from "svelte";
-
     export let data;
 </script>
 
-{#each data.body.posts as post }
+{#each data.posts as post}
     <h2>{post.title}</h2>
-    <p>{post.body}</p>
-    <img src="{post.coverImage.url}" alt="yes">
+    {#each post.body as block}
+        {#if }
+            
+        {/if}
+        <>{block}</p>
+    {/each}
+
+    <img src="{post.coverImage.asset.url}" alt="yes">
+    <a href="/learnings/{post.slug.current}">read more...</a>
 {/each}

src/routes/learnings/[slug]/+page.svelte

@@ -0,0 +1,2 @@
+<h1>hello</h1>
+<p>why is this being weird</p>