added pocket text package to unpack sanity blocks

This commit is contained in:
ChrQR 2024-04-28 23:00:50 +02:00
parent c2c2ad29eb
commit 55f4db0054
4 changed files with 50 additions and 11 deletions

34
package-lock.json generated
View File

@ -12,6 +12,7 @@
"@sveltejs/adapter-node": "^5.0.1"
},
"devDependencies": {
"@portabletext/svelte": "^2.1.11",
"@sveltejs/adapter-auto": "^3.0.0",
"@sveltejs/kit": "^2.0.0",
"@sveltejs/vite-plugin-svelte": "^3.0.0",
@ -623,6 +624,39 @@
"resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.25.tgz",
"integrity": "sha512-j7P6Rgr3mmtdkeDGTe0E/aYyWEWVtc5yFXtHCRHs28/jptDEWfaVOc5T7cblqy1XKPPfCxJc/8DwQ5YgLOZOVQ=="
},
"node_modules/@portabletext/svelte": {
"version": "2.1.11",
"resolved": "https://registry.npmjs.org/@portabletext/svelte/-/svelte-2.1.11.tgz",
"integrity": "sha512-ecatiEd80Mw72XXya1swRnzZePuMnrbRf3OGgjTFe1iePcyQ89n8PMpfO3Dpn6bXvjMkIq9yvqB4b9oLLlGOfA==",
"dev": true,
"dependencies": {
"@portabletext/toolkit": "^2.0.15"
},
"peerDependencies": {
"svelte": ">=3.47.0 <5.0.0"
}
},
"node_modules/@portabletext/toolkit": {
"version": "2.0.15",
"resolved": "https://registry.npmjs.org/@portabletext/toolkit/-/toolkit-2.0.15.tgz",
"integrity": "sha512-KRNEUAd6eOxE9y591qC0sE24ZG2q27OHXe0dsPclj4IoEzf8aEuDcHR64wfFtB0aHq9Wdx3pIinmhZZcl35/vg==",
"dev": true,
"dependencies": {
"@portabletext/types": "^2.0.13"
},
"engines": {
"node": "^14.13.1 || >=16.0.0"
}
},
"node_modules/@portabletext/types": {
"version": "2.0.13",
"resolved": "https://registry.npmjs.org/@portabletext/types/-/types-2.0.13.tgz",
"integrity": "sha512-5xk5MSyQU9CrDho3Rsguj38jhijhD36Mk8S6mZo3huv6PM+t4M/5kJN2KFIxgvt4ONpvOEs1pVIZAV0cL0Vi+Q==",
"dev": true,
"engines": {
"node": "^14.13.1 || >=16.0.0 || >=18.0.0"
}
},
"node_modules/@rollup/plugin-commonjs": {
"version": "25.0.7",
"resolved": "https://registry.npmjs.org/@rollup/plugin-commonjs/-/plugin-commonjs-25.0.7.tgz",

View File

@ -10,6 +10,7 @@
"format": "prettier --write ."
},
"devDependencies": {
"@portabletext/svelte": "^2.1.11",
"@sveltejs/adapter-auto": "^3.0.0",
"@sveltejs/kit": "^2.0.0",
"@sveltejs/vite-plugin-svelte": "^3.0.0",

View File

@ -4,6 +4,7 @@ export async function load({ params }) {
const data = await client.fetch(`*[_type == "post"] {
title,
slug,
_createdAt,
coverImage {
...,
asset->

View File

@ -1,17 +1,20 @@
<script>
import { text } from "@sveltejs/kit";
import {PortableText} from '@portabletext/svelte'
export let data;
function setElement(style, text) {
const targetElement =
}
</script>
{#each data.posts as post}
<h2>{post.title}</h2>
{#each post.body as block, i}
<p id="post-text-{i}">{setElement(block.style, block.children[0].text)}</p>
{/each}
<img src="{post.coverImage.asset.url}" alt="yes">
<a href="/learnings/{post.slug.current}">read more...</a>
<div class="border-2 border-slate-500 rounded my-2 text-l p-4">
<img class="max-h-32 mx-auto" src={post.coverImage.asset.url} alt={post.title}>
<h2 class="text-xl">{post.title}</h2>
{#each post.body as block}
<PortableText
value={[
block
]}
/>
{/each}
<p>{post._createdAt}</p>
</div>
{/each}