agrego autores a páginas de blog y corrijo en página de recursos

Author: basicavisual

src/components/BlogHero.svelte

@@ -6,6 +6,7 @@
 	export let date = '';
 	export let image =
 		'https://images.unsplash.com/photo-1582005450386-52b25f82d9bb?q=80&w=2940&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D';
+  export let authors = '';
 </script>
 
 <a href="/blog/{slug}">
@@ -69,7 +70,11 @@
     "
 	>
 		<div class=" bottom-0">
-			<p class="text-left text-white font-thin">Hector Garrido</p>
+			<p class="text-left text-white font-thin">
+        {#each authors as author, i}
+          <span>{author.authors_id.name || ''}{#if i < (authors.length-1)}, {/if}</span>
+        {/each}
+      </p>
 			<p class="text-left text-gray-300 font-bold">{date}</p>
 		</div>
 	</div>

src/components/Cards/ArticleCard.svelte

@@ -5,7 +5,7 @@
   export let date;
   export let image;
   export let tag;
-  export let author
+  export let authors;
 
 </script>
 
@@ -21,7 +21,11 @@
       {/if}
     </div>
     <h2 class="font-extrabold text-xl">{title}</h2>
-    <p class="text-sm">{author || ''}</p>
+    <p class="text-sm">
+      {#each authors as author, i }
+        <span>{author.authors_id.name || ''}{#if i < (authors.length-1)}, {/if}</span>
+      {/each}
+    </p>
     <p class="text-sm text-gray-400">{date}</p>
   </div>
 </div>

src/components/Cards/RecursosCard.svelte

@@ -9,9 +9,11 @@
     <div>
       <h4 class="text-xl font-bold">{title}</h4>
       {#if authors }
-        {#each authors as author }
-          <p>{author.authors_id.name}</p>
+      <p>
+        {#each authors as author, i }
+            <span>{author.authors_id.name || ''}{#if i < (authors.length-1)}, {/if}</span>
         {/each}
+      </p>
       {/if }
     </div>
     <img src="/flecha-verde.png" alt="Ir al recurso" class="inline h-[20px] w-[20px] self-end">

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

@@ -3,12 +3,15 @@ import { readSingleton, readItems } from '@directus/sdk'
 
 export async function load() {
   const blog = await client.request(readSingleton('blog', {
-    fields: ['*', "highlight_post.*"]
+    fields: ['*', "highlight_post.*", "highlight_post.authors.authors_id.*"],
   }))
 
   // get and sort posts
   const posts = await client.request(readItems('Blog_Posts', {
-    fields: ['*', "user_created.*"],
+    fields: ['*', "user_created.*", {
+        authors: [{authors_id: ['*']}]
+      }
+    ],
     filter: {
 			status: {
         _eq: "published"

src/routes/blog/+page.svelte

@@ -4,31 +4,33 @@
   export let data
   const { blog, posts } = data
 </script>
+<div class="container my-20 mx-auto">
 
-<div class="container m-auto px-3 ">
-  <div class="my-7">
-    <h1 class="text-5xl text-green-400 font-bold">Blog</h1>
-  </div>
-  <BlogHero 
+  <div class="container m-auto px-3">
+    <div class="my-7">
+      <h1 class="text-5xl text-cmxblack font-bold">Blog</h1>
+    </div>
+    <BlogHero 
     slug={blog.highlight_post.slug}
     title={blog.highlight_post.title}
     tag={blog.highlight_post.tags[0]}
     date={new Date(blog.highlight_post.date_created).toLocaleString('es-MX')}
     image={`https://content.codeandomexico.org/assets/${blog.highlight_post.post_image}`}
-  />
-</div>
-<div class="container m-auto p-3">
-  <div class="md:grid grid-cols-3 gap-5">
+    authors={blog.highlight_post.authors}
+    />
+  </div>
+  <div class="container m-auto p-3">
+    <div class="md:grid grid-cols-3 gap-5">
     {#each posts as post}
       <ArticleCard
-        slug={post.slug}
-        title={post.title}
-        tag={post.tags[0]}
-        author={post.user_created.first_name + ' ' + post.user_created.last_name}
-        date={new Date(post.date_created).toLocaleString('es-MX')}
-        image={`https://content.codeandomexico.org/assets/${post.post_image}`}
+      slug={post.slug}
+      title={post.title}
+      tag={post.tags[0]}
+      authors={post.authors}
+      date={new Date(post.date_created).toLocaleString('es-MX')}
+      image={`https://content.codeandomexico.org/assets/${post.post_image}`}
       />
     {/each}
-    
+    </div>
   </div>
 </div>

src/routes/blog/[slug]/+page.server.js

@@ -21,6 +21,7 @@ export async function entries() {
 export async function load({ params }) {
 	const slug = params.slug
 	const data = await client.request(readItems('Blog_Posts', {
+		fields: ['*', 'authors.authors_id.*'],
 		filter: {
 			slug: {
 				_eq: slug

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

@@ -13,6 +13,11 @@
 
 <section class="container m-auto p-3 prose">
   <h1 class="text-center  font-bold">{post.title}</h1>
+  <p class="text-center">Por 
+    {#each post.authors as author, i }
+    <span>{author.authors_id.name || ''}{#if i < (post.authors.length-1)}, {/if}</span>
+    {/each}
+  </p>
   <p class="text-center text-sm text-gray-400">{new Date(post.date_created).toLocaleString('es-MX')}</p>
 </section>
 <img src={`https://content.codeandomexico.org/assets/${post.post_image}`} alt="Imagen de blog" class="w-full max-h-[450px] object-cover" />