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

Integración con Disqus para agregar comentarios

19/35
Recursos

Aportes 3

Preguntas 0

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

Algo que me esta pasando es que cuando recargamos la página estando en un blog blog/[slug], no se muestra el disqus porque el evento del documento readyState queda en “interactive” en el momento de la ejecución del Mount de Svelte. Y como esta verificación se hace solo una vez, no se vuelve a verificar cuando el documento este en “complete”
.
Para eso, yo hice lo siguiente:

	const disqus = () => {
			let d = document, s = d.createElement('script');
			s.src = 'https://dartilesdev.disqus.com/embed.js';
			s.setAttribute('data-timestamp', +new Date());
			(d.head || d.body).appendChild(s);
	}

	onMount(async () => {
		// Verificamos que el readyState del documento sea "complete", de no ser así nos suscribimos a un evento que nos permite saber cuando este sea "complete", una vez nos aseguremos de eso ejecutamos el disqus() para mostrar nuestro sistema de comentarios.
		document.readyState === 'complete' ? await disqus() : 
			document.addEventListener('readystatechange', async () => document.readyState === 'complete' && await disqus())
	})

No se, si es la mejor forma de hacer esto, porque también estoy aprendiendo svelte. Yo generalmente acostumbro a usar todo lo que nos ofrezca un framework/librería, pero no encontré forma de hacer esta verificación 100% con las herramientas de svelte si alguno sabe sería genial. 🤗

Me pasó que al actualizar la página el disqus se desaparece, esto me imagino que es porque solo se evalúa el primer estado de document y no si este cambia o no.

Para solucionarlo, agregué un addEventListener para ver si cambia el readyState y si fuera el caso, mandar a llamar la función disqus.

Genial esta herramienta, no la conocía