Herramientas para trabajar con Svelte profesionalmente

1

Proyecto del curso y estado del arte de Svelte

2

Setup inicial con Sapper

3

Estructura de un proyecto en Sapper

Estructura de rutas con Sapper

4

Sistema de rutas y rutas din谩micas en Sapper

5

Layout y estructura principal de nuestro blog

6

Ruta 404 con animaciones

7

Rutas principales del blog: about, contact y tags

Construye el Layout y Newsletter del blog

8

Dise帽o y maquetaci贸n del Header

9

Dise帽o y maquetaci贸n del Nav

10

Dise帽o y maquetaci贸n del Sidebar y Footer

11

Construye un Newsletter para el blog

12

Estructura de los blogposts

13

Secci贸n principal del blog y blogposts

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

14

Integraci贸n con Google Analytics

15

Calcula el tiempo de lectura de cada blogpost

16

Muestra un emoji aleatorio en cada blogpost

17

Manejo de fechas dentro del blog con JavaScript Vainilla

18

Estructura del blogpost con comentarios

19

Integraci贸n con Disqus para agregar comentarios

Construye tu API usando Ghost CMS

20

Instalaci贸n de Ghost

21

Configuraci贸n de Ghost en Heroku

22

Ghost Core API

23

Integra la API de Ghost en tu blog con Svelte

24

Guardando la informaci贸n de nuestros blogposts

25

Terminando la integraci贸n

Despliega tu aplicaci贸n

26

Compra de un dominio y manejo del DNS con Cloudflare

27

Deploy a Netlify

28

Deploy a Heroku

SEO y optimizaci贸n de tu sitio web

29

Metadatos y optimizaci贸n del SEO

30

Transforma tu blog en una PWA

31

RSS

32

Terminando el RSS

33

Sitemap

34

Agrega pruebas de integraci贸n con Cypress

C贸mo contin煤a tu camino profesional con Svelte

35

Siguientes pasos con Svelte

No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Terminando la integraci贸n

25/35
Recursos

Aportes 8

Preguntas 1

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Reg铆strate o inicia sesi贸n para participar.

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 鈥渢ags鈥.
.
Esto nos devolver谩 dos nuevos keys en la lista de posts, 鈥渢ags鈥 y 鈥減rimary_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 鈥溾ost鈥
.
.

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.