Terminando la integración

Clase 25 de 35 • Curso de Desarrollo Web con Svelte y Sapper

Diego Artiles

student•

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>

Nelo Puchades Bresó

student•

Muchísimas gracias por el aporte :)

Terminando la integración

Herramientas para trabajar con Svelte profesionalmente

Proyecto del curso y estado del arte de Svelte

Setup inicial con Sapper

Estructura de un proyecto en Sapper

Estructura de rutas con Sapper

Sistema de rutas y rutas dinámicas en Sapper

Layout y estructura principal de nuestro blog

Ruta 404 con animaciones

Rutas principales del blog: about, contact y tags

Construye el Layout y Newsletter del blog

Diseño y maquetación del Header

Diseño y maquetación del Nav

Diseño y maquetación del Sidebar y Footer

Construye un Newsletter para el blog

Estructura de los blogposts

Sección principal del blog y blogposts

Integración de analytics, comentarios y tiempo de lectura en tu blog

Integración con Google Analytics

Calcula el tiempo de lectura de cada blogpost

Muestra un emoji aleatorio en cada blogpost

Manejo de fechas dentro del blog con JavaScript Vainilla

Estructura del blogpost con comentarios

Integración con Disqus para agregar comentarios

Construye tu API usando Ghost CMS

Instalación de Ghost

Configuración de Ghost en Heroku

Ghost Core API

Integra la API de Ghost en tu blog con Svelte

Guardando la información de nuestros blogposts

Terminando la integración

Despliega tu aplicación

Compra de un dominio y manejo del DNS con Cloudflare

Deploy a Netlify

Deploy a Heroku

SEO y optimización de tu sitio web

Metadatos y optimización del SEO

Transforma tu blog en una PWA

RSS

Terminando el RSS

Sitemap

Agrega pruebas de integración con Cypress

Cómo continúa tu camino profesional con Svelte

Siguientes pasos con Svelte