.

Author: devmnj

Diff for: .idea/inspectionProfiles/Project_Default.xml

@@ -0,0 +1,39 @@
+<script>
+ export let post= {}
+ $:{
+ console.log(post);}
+</script>
+<!-- {JSON.stringify(post)} -->
+<div class="container bg-gray-700">
+<a
+        href={`/post/${post.sys.id}`}
+        rel="noopener noreferrer"
+        class="max-w-sm mx-auto group hover:no-underline focus:no-underline dark:bg-gray-900"
+      >
+        <img
+          role="presentation"
+          class="object-cover w-full rounded h-44 dark:bg-gray-500"
+          src={post.fields.featuredImage.fields.file.url} alt="posy"
+        />
+        <div class ="flex justify-between ">
+          <span class="mt-3 mx-3 text-gray-600">{post.fields.createdAt}</span>
+          <span class="mt-3 mx-3 text-gray-600">   Reactj       </span>
+        </div>
+
+        <div class ="px-6 py-2 space-y-2 ">
+            <h3 class ="text-2xl font-semibold group-hover:underline group-focus:underline">
+              { post.fields.title || "In usu laoreet repudiare legendos"}
+            </h3>        
+            <p class="align-baseline">{ post.fields.summary}</p>
+          </div>
+       
+      </a>
+    </div>
+
+    <style>
+      .container{
+        width: 300px;
+        height: 300px;
+      }
+      
+      </style>

Diff for: src/components/PostCard.svelte

@@ -0,0 +1,34 @@
+<script>
+	import PostCard from './PostCard.svelte';
+    export /**
+* @type {any[]}
+*/
+     let posts=[];
+</script>
+
+<section class=" dark:bg-gray-800 dark:text-gray-100">       
+    <div class="container max-w-6xl p-6 mx-auto space-y-6 sm:space-y-12">
+      <span class="  ">
+        <!-- <Featured /> -->
+      </span>
+
+      
+        <div class="grid justify-center grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
+          {" "}
+          {#each posts as post}            
+            <PostCard post={post}/>
+          {/each}
+          
+        </div>{" "}
+       
+
+      <div class="flex justify-center">
+        <button
+          type="button"
+          class="px-6 py-3 text-sm rounded-md hover:underline dark:bg-gray-900 dark:text-gray-400"
+        >
+         
+        </button>
+      </div>
+    </div>
+  </section>

Diff for: src/components/postGrid.svelte

@@ -0,0 +1,8 @@
+import {createClient} from 'contentful'
+
+const client=createClient({
+    space:'w591jyzdi2py',
+    accessToken:'DXG7DohnxRncpcxSPtLGr5fR4_fzjyzRzVZAiP9Ussk'
+});
+
+export {client}

Diff for: src/contentful/index.js

@@ -9,8 +9,6 @@
 <script>
     import PostGrid from './../components/postGrid.svelte';
     export let posts;
-    client.getEntries().then(entries => posts = entries)
-
 </script>
 <div>
     <!-- {JSON.stringify(posts.items[0].fields)} -->

Diff for: src/routes/index.svelte

@@ -0,0 +1,70 @@
+<script context="module">
+    import {client} from "../../contentful/index.js";
+    export async function load({params}) {
+        const {slug} = params;
+        const data = await client.getEntry(slug);
+        // console.log(data)
+        return {
+            props: {
+                slug: slug,
+                data: data
+            }
+        };
+    }
+</script>
+
+<script>
+    export let data={};
+    let post
+    $:post = data;
+
+</script>
+
+<div>
+    <!--{JSON.stringify(post)}-->
+    <div class="   dark:bg-gray-800 max-w-6xl px-6 py-16 mx-auto space-y-12">
+        {#await post}
+            <p>Loading</p>
+        {:then post}
+            <!--{JSON.stringify(post.fields.contents) }-->
+
+            <article class="  flex-col space-y-8 dark:bg-gray-800 dark:text-gray-50">
+                <div class="space-y-6">
+                    <h1 class="text-4xl font-bold md:tracking-tight md:text-5xl">
+                        {post.fields.title  }
+                    </h1>
+                    <div>
+                        <p>{post.fields.summary}</p>
+                    </div>
+                    <div
+                            class="flex flex-col items-start justify-between w-full md:flex-row md:items-center dark:text-gray-400"
+                    >
+                        <div class="flex items-center md:space-x-2">
+                            <img
+                                    src="https://source.unsplash.com/random/?face&fit=facearea&facepad=2&w=256&h=256&q=80"
+                                    alt=""
+                                    class="w-12 h-12 border rounded-full dark:bg-gray-500 dark:border-gray-700"
+                            />
+                            <p class="text-sm">Leroy Jenkins • {post.fields.createdAt}</p>
+                        </div>
+                        <p class="flex-shrink-0 mt-3 text-sm md:mt-0">4 min read • 1,570 views</p>
+                    </div>
+                </div>
+                <div>
+                    <img src={post.fields.featuredImage.fields.file.url} alt=" "/>
+                </div>
+                <div class="dark:text-gray-100">
+                    <p>
+                        {#if post.fields.content.content[0].content[0].value}
+                            {  post.fields.content.content[0].content[0].value }
+                        {:else }
+                            Loading
+                        {/if}
+                    </p>
+                </div>
+            </article>
+
+        {/await}
+        <div></div>
+    </div>
+</div>