changed queries and loads etc. Learned html basics

This commit is contained in:
ChrQR 2024-04-28 13:05:57 +02:00
parent 77f65c1287
commit eead28f05a
6 changed files with 58 additions and 37 deletions

View File

View File

@ -2,7 +2,10 @@
* Example of how you could re-use GROQ queries across different contexts with Javascript. * 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. * 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"] { return `*[_type == "post"] {
_id, _id,
_type, _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
`

View File

@ -5,8 +5,10 @@
import '../app.css'; import '../app.css';
// Navigation links are generated based on this object /* Navigation links are generated based on this object.
const nav = [ 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", name: "index",
subPages: [], subPages: [],
@ -40,7 +42,7 @@
{#each nav as main,i} {#each nav as main,i}
{#if i != 0} {#if i != 0}
{#if !nav[i].subPages[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} {: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> <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} {/if}
@ -51,12 +53,12 @@
{#key selected} {#key selected}
<ul in:blur={{ delay: 250 }} out:blur={{ duration: 250 }} class="text-center h-4 my-1"> <ul in:blur={{ delay: 250 }} out:blur={{ duration: 250 }} class="text-center h-4 my-1">
{#each selected.subPages as subPage} {#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} {/each}
</ul> </ul>
{/key} {/key}
<li><ThemeSwitch class=""/></li> <li><ThemeSwitch/></li>
</nav> </nav>
<div class="container text-center w-3/4 mx-auto"> <div class="container text-center w-3/4 mx-auto">
<slot /> <slot />

View File

@ -1,20 +1,43 @@
import { client } from '$lib/sanity/client.js' 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 // // Fetch all valid posts & authors to display in the homepage
export async function load() { // export async function load() {
const data = await client.fetch(/* groq */ `{ // const data = await client.fetch(/* groq */ `{
"posts": ${getPostsQuery()}, // "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) { if (data) {
return { return {
status: 200, posts: data
body: data };
}
} }
return { return {
status: 404 status: 500,
} body: new Error("Internal Server Error")
};
} }

View File

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

View File

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