Terminando la integración

En la versión 3 de Ghost no está llegando los tags de cada post, para solucionar esto debemos adicionar un segundo parametro a la URL base llamado include y pasar “tags”.
.
Esto nos devolverá dos nuevos keys en la lista de posts, “tags” y “primary_tag” los cuales son un arreglo y un objeto respectivamente.
.

.
Entonces para poder tener disponible estos nuevos keys en nuestra respuesta lo que tendremos que hacer es agregarlo en la variable de entorno GHOST_API, tal cual como se puede ver en la imagen anterior donde está el link en Postman.
.
Luego de tener nuestra variable actualizada, hay que tocar algunos archivos, el primero es: bin/index.js
En la parte de donde obtenemos los posts, yo lo que hice fue agregar en nuestro objeto todo lo que ghost nos ofrece con el “…post”
.
.

const posts = await data.posts.map(post => ({
        ...post,
        title: post.title,
        html: post.html,
        slug: post.slug,
        createdAt: post.created_at,
        id: post.id,
        desc: post.excerpt,
        image: post.feature_image,
    }))

.
Lo mismo aplica para el archivo routes/blog/index.json.js
.

const contents = JSON.stringify(posts.map(post => ({
		...post,
		title: post.title,
		slug: post.slug,
		desc: post.desc,
		createdAt: post.createdAt,
		html: post.html,
		image: post.image,
		id: post.id
})));

Luego de hacer estos cambios, la condición que usamos en el filter para generar cambia ligeramente:
.

<script>
    import Post from '../components/Post.svelte'
    export let posts;
    const filterPost = posts.filter(({primary_tag}) => primary_tag && primary_tag.name === 'general')
</script>

Aquí va mi blog, excelente curso para personalizar al nivel que se desee y administrable con Ghost Gratis 🤯

general.svelte

<script context="module">
  export function preload() {
    return this.fetch(`blog.json`)
      .then((r) => r.json())
      .then((posts) => {
        return { posts };
      });
  }
</script>

<script>
  import Post from './../components/Post';
  export let posts;
  const filterPost = posts.filter(post => post.tag === 'general');
</script>

<svelte:head>
  <title>General</title>
</svelte:head>

<div class="General">
  <h1>General</h1>
  <div class="Posts">
    {#if filterPost.length >= 1}
      {#each filterPost as post}
         <Post {post} />
      {/each}
    {:else}
      <p>Sin resultados...</p>
    {/if}
  </div>
</div>


<style>
  .Posts {
    display: grid;
    justify-content: space-between;
    gap: 30px;
    grid-template-columns: 1fr;
  }
</style>

Reto de la clase
.
Me cree un archivo en utils, que contiene una función como esta:

export const filterByTags = (post, primaryTag = '', otherTags) => {
    const { primary_tag, tags } = post
    return primary_tag && primary_tag.slug === primaryTag 
        || otherTags && otherTags.every(tag => tags.some((_tag) => _tag && _tag.slug === tag))
}

Esta función recibe 2 parámetros:

1. post: es un objeto que contiene la información del post
2. tags: es un arreglo de strings que contiene TODAS las etiquetas por la cual queremos filtrar (si alguna de ellas no se encuentra, esta función retornará false, es decir, no filtrará el post)
   .

EJEMPLOS

    // Obtenemos los posts que tengan como categoría "general"
    const filterPost = posts.filter(post => filterByTags(post, ['general']))

    // Obtenemos los posts que tengan TODAS las categorías "general" y "getting-started"
    const filterPost = posts.filter(post => filterByTags(post, ['getting-started', 'general']))

Realizre la lectura de los tags y como use el servicio de wordpress para el backen en vez de ghost me trae mucha informacion util y asi quedo

Asi va mi blog, tengo varios temas con Ghost 😦 no se si no es estable o heroku no lo es 😦

👌

Excelente, todo genial, ahora toca realizar mi propia personalización del blog.