¡Hola! ¿Quieres ver cómo automatizo la creación de artículos Mardown para mi blog leyendo desde un feed RSS?
Y para hacerlo vamos a utilizar Node.js y vamos a ver cómo podemos crear archivos utilizando el file system de Node,
vamos a ver cómo podemos limpiar el HTML de un stream para dejarlo bien limpio, vamos a ver cómo utilizar a SyncAwait y muchas cosas más muy interesantes.
Que todo esto viene porque tengo un podcast y antes tenía que crear todos los artículos de forma manual para cada episodio,
así que decidí grabarme para obligarme a hacerlo de una vez por todas.
Y como creo que ha quedado bastante bien y didáctico, pues me he animado a subirlo.
Si te gusta, si te gusta este tipo de vídeos, dale like para que lo sepa y me anime a hacer más vídeos de este tipo.
Así que ahora sí, disfruta del vídeo.
Bueno, pues este es mi blog y lo que quiero es que esta sección de aquí, de podcast, todo lo que tengo por aquí,
se genere automáticamente desde el RSS que tengo, porque ahora es totalmente manual y es un poquito problemático
cuando estoy publicando un nuevo podcast, lo que voy a hacer es crear un script en Node.js.
Y el RSS que tengo que leer es el que tengo aquí en Anchor, lo tengo aquí en este RSS feed,
así que esta será un poquito la URL donde tendré que extraer toda la información
y lo voy a hacer desde cero sin prepararme nada.
Vamos a ir a saco para generar este script Node de Node.js que nos va a leer este feed
y nos va a generar un poco esta sección que tenemos aquí, incluso también los archivos que tenemos dentro.
O sea, los enlaces y cuando vamos al enlace, vale, eso era la intro del podcast,
pues que me genere también el contenido.
El contenido, esto va a ser más complicado lo del vídeo porque hay veces que no tengo vídeo,
o sea que esto supongo que lo voy a perder y lo tendría que editar cuando sea,
pero por ahora pues al menos vamos a hacer que esto se genere automáticamente
porque es mucho trabajo, si lo tengo que hacer manualmente cada vez que publico un podcast.
De hecho es una de las cosas por las que no publico más podcast.
Así que vamos a ir por partes, lo primero me voy a poner musiquita, voy a poner música
y para programar que mejor que utilizar mi lista de música para programar.
La vamos a dejar aquí.
Vale, pues vamos a empezar, a ver, lo que debería hacer, lo primero seguramente estoy aquí ya en el repositorio de mi blog,
lo que voy a hacer es iniciar el proyecto local porque claro, esto midu.dev no es.
Así que vamos a localhost1313 que me ha tenido que abrir mi web local.
Me faltan los vídeos porque en local no tengo la YouTube API Key,
pero bueno, como lo importante es esto de podcast, pues vamos a ver.
Lo primero que me imagino que vamos a tener que hacer es eliminar todo lo que tenemos ahí,
todo el tema en content podcast, aquí tenemos todos los artículos que he creado manualmente.
Todo esto va a ir fuera, me lo voy a cargar.
Igualmente, creo que lo voy a dejar de referencia porque seguramente tendré que estudiar cómo hacer las redirecciones
por si los nombres no se generan exactamente igual.
Pero bueno, yo creo que lo importante es que aquí en scripts, aquí en scripts, ¿vale?
Ya creé nuestro primer script que es el de, ¿cómo le llamamos a esto?
Create Podcast Articles.
Ya tengo uno para crear algunas imágenes, oh, si no las he hecho, Open Graph, si no las he hecho manualmente.
Así que ahora esto será algo parecido.
Vale, pues este Create Images, voy a poner ya aquí el script, que sea Create Podcast Articles,
que lo he puesto mal ahí, pero bueno, ahora lo arreglo.
Create Podcast Articles.js.
Perfecto.
Voy a guardar los cambios.
Vale, pues ahora que ya tenemos este Create Podcast Articles, vamos a ir aquí también.
Bien, voy a cambiar este Articles.
Perfecto.
Entonces, Create Images, a ver qué tenía yo por aquí.
Vale, esto era para Log Images.
Pues Create Podcast Articles.
Lo primero que tengo que hacer es, seguramente, esto va a ser un script que vamos a ir paso a paso
porque hay muchas cosas que hacer.
Lo primero, por supuesto, sería encontrar un NPM Feed Parser, algún parser para el feed,
para leer fácilmente.
Mira, este ya lo he abierto alguna vez.
¿Cuál de los dos me gusta más?
Este ya se ha actualizado hace tres días, así que eso no tiene mala pinta.
Vamos a ver.
RSS Parser.
Este es el de hace tres días.
Bueno, pues este parece sencillo y parece que tiene lo que me gusta.
Así que vamos a instalar.
Vamos aquí, Visual Studio Code, y lo instalamos.
Vamos a instalar.
Bueno, ya he copiado todo esto, ¿no?
Vale.
Y lo ponemos exacto, que se guarde de forma exacta en la versión, ¿vale?
Que no le ponga el caret.
No me gustan los carets porque entonces se puede actualizar automáticamente y vete a saber cómo lo deja.
Creo que me puedo copiar, ¿no?
Más o menos este código porque ya está bien.
Básicamente esto lo que hace es requerir la dependencia, crea una nueva instancia del parser.
Me imagino que aquí se podrán pasar opciones, configuraciones.
Y luego, pues tiene aquí un ify, que es una función que se auto ejecuta para poder tener el async.
Aunque creo que la versión de Node que tengo ya podemos utilizar el top level await.
Lo vamos a probar.
Lo vamos a probar directamente.
Y si no, no sé si tendré la versión 12.
Bueno, por si acaso, vamos a dejarlo así.
Porque si no, podríamos utilizar directamente esto así, sin necesidad de envolverlo en esta función async.
Así que me lo copio.
Me lo copio.
O sea, no hay que tener miedo en copiar, mientras lo entendamos, claro.
Vale, aquí ya sabéis que a mí no me gustan los puntos y comas, así que me los voy a cargar.
Lo interesante de esto es que esto no es la URL que quiero parsear.
La que quiero parsear ya sabemos que es esta, exactamente.
Así que vamos a dejarla aquí.
Y a ver, a ver qué me cuenta esto.
Puedo fiarme un poco aquí ya viendo lo que vamos a tener en el feed.
De hecho, donde empiezan los items, aquí tenemos los items.
Y este sería uno que llega más o menos hasta aquí.
Y podemos ver que tengo el title, que tengo una descripción, que tengo el link, el link, el link.
No sé si... Luego tendría que hacer el embed.
Porque cuando vamos a cada uno de los episodios, por ejemplo, el último que hice del podcast, tengo el episodio este del state of CSS.
Lo colgué el otro día.
Y esto debe tener un embed, copy embed code.
Vamos a ver un momento cómo es el embed code, porque será interesante también que lo podamos generar, este embed code.
Vale, veo que le añade embed y a ver el link, que es lo que... el link este que hemos visto por aquí.
Este link es así, porque el embed no estará por aquí, ¿no?
No, no está en el RSS.
Lo vamos a tener que crear a mano, ¿vale?
Así que vamos a ver.
El link es así, episodes, este...
Es igual.
Lo único que, entre midudev y episodes, hay que ponerlo de embed y ya estaría hecho.
Vale, pues fácil, ¿no?
Este sería el link.
Vale, vamos a ver.
¿Qué queremos sacar de aquí?
Tenemos el link, el link seguro, el summary seguro, aunque igual utilizamos este de description.
Habrá que ver este data.
Esto igual lo quitamos con un replace y ya está.
Vale.
Y interesante la imagen.
Esto es importante también, la imagen.
Creo que tengo el season, episode, esto no sé si sea interesante.
Pero bueno, esto de iTunes image, esto seguro, porque vamos a tener ahí la imagen.
Vamos a ver que... voy a ejecutarlo directamente.
Y voy a ver directamente este item para feed items.
Vamos a ver el item.
Esto del feed item no me interesa tanto.
Ya sé cuál es el título del podcast.
Voy a mirar el item directamente, ¿vale?
Y vamos a ver qué tenemos aquí.
Vamos a ejecutar este create podcast articles y a ver qué devuelve.
No ha funcionado bien.
Ha petado.
Vamos a ver por qué ha petado esto.
Pam, pam, pam.
Vale.
No le gusta.
Interesante esto.
Porque como he quitado el punto y coma, esto no le gusta, ¿vale?
Cuando tú acabas aquí en paréntesis y empiezas en paréntesis, claro, este punto y coma es el que nos está evitando justamente que esto pete.
Y alguien ahora dirá, bueno, pues es que tendría que haber... ¿Por qué no usa punto y coma?
Bueno, a ver, porque esto es algo que en principio ya sé qué pasa y si tuviésemos un linter funcionando ya me añadiría este punto y coma aquí al principio y no tendría ningún problema, ¿vale?
Venga, vamos a probar otra vez.
Bueno, funcionó, funcionó.
Ya estamos leyendo el feed y vamos a ver qué información tenemos.
Ah, vale, así es como se saca dentro de este... Es que tenía curiosidad, ¿no?
Como íbamos a sacar este iTunes 2.image y esto lo que está haciendo es agruparlo en el objeto iTunes y entonces la propiedad image tiene lo que tenga que tener dentro.
Otro objeto, me imagino, ¿no? Image.
Ah, pues no tiene otro objeto, sino que directamente tiene la URL.
No sé, como tiene aquí el href, digo igual no entiende este href.
Vale, genial.
Vale, pues fácil, fácil.
De cada item vamos a recuperar el iTunes, ¿vale?
Y de iTunes vamos a quedarnos...
No sé si el summary este o el description.
No sé cuál de los dos.
Bueno, los saltos de línea y tal veo que lo tienen igual.
Bueno, el content es exactamente lo mismo.
Pues bueno, ya que estamos aquí, pues vamos a tomar el summary.
Veo que no pone los enlaces.
Esto no es que sea problemático.
Bueno, no sé si no pone los enlaces.
¿Este es el último?
No, vamos a mirar el último porque a lo mejor es que no tenía enlaces directamente y ponía la URL ahí a saco.
Sí, porque estoy viendo algunos que sí que tienen HTML.
A ver, el último debe ser el que está más arriba.
Ah, este podcast no me puede ver en vídeo.
Aquí.
¿Ves?
Aquí sí que tengo el HTML.
O sea que el problema es que no le había puesto HTML a los otros.
Bueno, no importa.
Ya que le vamos a hacer.
O lo arreglaré algún día y ya está.
Entonces, iTunes, summary, explicit.
Esto no es importante.
Duration, image.
Ahí.
Ese sí que necesitamos.
Image.
Vale, pues esto lo tenemos que sacar de el item.
¿Esto es todo lo que quiero?
No.
También quiero el lugar, también aparte del iTunes, quiero el link que está fuera de iTunes.
¿El isodate?
Igual tiene sentido el isodate que lo recuperamos.
En Closure.
Esto es directamente el podcast.
A ver, en principio voy a poner el embed, así que esto no debería ser importante como tal.
Así que vamos a sacar el title y el link, que estos sí que son importantes, ¿vale?
Title, link, el creador soy yo.
O sea, tampoco va a ser nada interesante.
El content.
Ya lo tenemos con el summary.
A ver, igual tiene más sentido que lo saquemos directamente de aquí, en lugar de iTunes.
Pero la imagen sí que parece que solo la tengo en iTunes, ¿eh?
Sí, la imagen no aparece en ningún otro sitio que no sea que este.
Que lo importante es esta imagen.
A ver la imagen que es, también.
A ver si es la del...
Sí, mira, aquí tenemos Guillermo Rago.
Muy bien.
Vale, entonces esto ya lo tenemos.
Esto ya lo tenemos.
Perfecto.
Ya estamos leyendo nuestro feed con la información que nos interesa.
De hecho, vamos a poner aquí un console.log, del content, el title, el link y el image.
Esto lo vamos a limpiar, vamos a ejecutarlo otra vez y vamos a ver.
Bueno, ya tenemos la información que nos interesa a la hora de crear nuestros archivos.
¿Dónde queremos crear cada uno de los archivos?
Vale.
Ahora tengo aquí en content podcast todos los artículos que he tenido que hacer manualmente.
A ver este, barra baja index.
Vale, esto no lo voy a tocar, pero estos que estoy generando...
Ah, mira.
Vale, pues puedo hacirlos...
A ver, no me va a quedar bien el título, ¿vale?
Eso es, por desgracia, no va a ser tan fácil el título.
Pero el 0101 este que aparece aquí, esto sí que lo puedo hacer, ¿no?
Porque hemos visto que teníamos el season y el episode y que esa información sí que la teníamos aquí.
¿Ves?
Season, episode, eso sí que lo puedo hacer.
Vale, season, episode, season y episode.
Así que esto lo...
Season y episode.
Pues por ahora vamos a ver todos estos artículos que teníamos ya creados a una carpeta alt.
Ahora que los tenemos separados, esto nos puede servir de guía, ¿vale?
Para crear el markdown en este artículo, tenemos que seguir esta guía de tener el title, el date, el image, el description, bla, bla, bla.
El date.
Sí, vamos a tener que recuperar el date.
Así que a ver, ¿dónde estaba esto?
Este date, el date, date, date, description.
Last build date.
No, esto no es.
Eso es del general.
El date, lo había visto por aquí.
Pub date.
Eso, cuando se publicó.
Vale, pues eso lo vamos a recuperar.
Ya veremos cómo lo tenemos que transformar.
Vamos a ver un montón de cosas.
Vamos a ver cómo transformar fechas, cómo crear archivos en Node.js.
Bueno, vamos a ver un montón de cosas.
Así que lo primero que voy a intentar hacer es crear el nombre del archivo.
Eso es lo primero.
Para crear el nombre del archivo, vamos a necesitar hacer un left pad, ¿no?
Porque pone a 0,1 y, o sea, tenemos que añadirle un 0 en el caso de que no tenga dos números.
Pues voy a mirar la documentación.
¿Por qué no me acuerdo?
Esto había, sí, está este left, ese, pad start.
Ahí está.
Eso es lo que queremos.
Left pad, este es el paquete, este es súper famoso.
¿Ves?
El has been deprecated.
Esto lo quitó el creador de este paquete y se creó una alarma en un montón de paquetes.
Fue súper divertido.
Lo que queremos es el pad start, que además es totalmente nativo y ya está en la plataforma.
Y lo que hacemos es que este season, tenemos el season.padstart y aquí le decimos de cuántos espacios tiene que poner, ¿no?
Entonces lo que podemos hacer es que cuando pongamos un espacio lo cambiamos por un 0.
Entonces es pad start.
Cuántos son los espacios que tiene que tener, ¿no?
El string tiene que ser de 2.
Así que tiene que haber 2, en total tiene que ser de 2 del length.
Aunque sea un número 1, o sea, por ejemplo, si tenemos el número 1, esto pasaría a ser esto.
Esto sería 1 y pasaría a tener aquí un espacio.
Si esto fuese ya un 11, entonces ya esto sería 11.
Porque estamos diciendo que tiene que tener 2 espacios.
Así que esto es justamente lo que necesitamos.
Y ahora lo que podemos hacer es que reemplazamos cuando tenemos un espacio por un 0.
Y esto en principio, esto es lo mismo que tendríamos que hacer con el episode.
Pad start 2 y reemplazamos esto por el 0.
Esto lo podríamos hacer de otra forma.
Esto además debería season o...
¿Cómo hacemos esto?
De normalize season, ¿vale?
Ya hemos normalizado que esto normalize episode.
Va a tener los espacios que necesitamos.
Y esto lo vamos a nombrar, ahora que ya sabemos que esto funciona bien.
Vamos a ver si tenemos esto.
Que ya estoy viendo que vamos a necesitar también un slugify, ¿vale?
Porque el título necesitamos ponerlo todo en minúscula.
Y además que cada espacio sea un guión y quitarle todos los acentos y tal.
Así que ahora miraremos esto.
A ver, a ver qué ha quedado de esto.
A ver si esto lo he hecho con sentido o me lo he inventado.
No puede crear pad start de undefined.
Vale, porque debe ser que hay alguno que no tiene pad start.
O sea, que no tiene, perdón.
Que no tiene pad start.
Que no tiene season y episeason.
A ver, 2.
Esto lo puedo arreglar como tal si hace falta en el RSS.
Aquí está, efectivamente.
Me he saltado del 1.7 al 1.6.
O sea, que hay un episodio por ahí que no tiene season episode.
Vale, el 1.6.
Vale, pues vamos a arreglarlo en un momentito.
Si vamos a episodios.
El 1.6.
1.6 que además era.
A ver, este es el 1.5.
Teníamos el item.
Ta, ta, ta, ta.
Que debe ser este.
Lo mejor de 2018 en el frontend.
2018.
Madre mía, como ha llovido.
Además veo que hay dos.
De lo mejor de 2018.
En el frontend.
Tenemos lo mejor de 2018.
Parte 2.
Parte 2.
El que tiene la parte 2.
Este sí que tiene esto.
Vale, o sea que no era este.
Era este en realidad.
El que no tiene.
Y esto que...
¿Cuál es el título?
Title.
La gran brecha del frontend.
Este es el que no tiene.
La gran brecha del frontend.
Este debería ser el capítulo 6.
Y nunca puso nada.
Vamos a arreglarlo.
En un momento.
A ver si así hacemos también que esto tenga más...
Vale.
Actualizamos el episodio.
A ver.
No creo que esto se arregle inmediatamente.
A ver.
La gran brecha del frontend.
No.
No se ha arreglado inmediatamente.
Igual tarda un momento.
No creo que tarde mucho.
Pero igual tarda un momento.
Entonces por ahora lo que vamos a hacer es poner aquí un 1 por defecto.
Que si son 0, episode 0.
Al menos por ahora.
Ya miraremos a ver qué...
Ahora sí.
Y aquí el 1, 6 es justamente el que falta.
Lo podría haber mirado así.
Voy a haber sido más fácil.
Veo que hay otro.
Aquí veo que hay más que faltan.
Esto los tendré que revisar también para asegurarme que tengo justamente esta información siempre.
Bueno.
Lo importante es que tenemos esto.
Y ahora pues a ver.
FileName.
Esto va a ser.
Vamos a crear un template string.
¿Qué va a ser?
Primero.
NormalizeSeason.
La barra baja.
¿Vale?
Esto es siguiendo un poco como estaba creándonos antes.
Y ahora tenemos una barra baja.
No sé por qué dice barra baja.
No me preguntes.
O sea.
De hecho.
De hecho.
Entiendo que tiene sentido de que está al principio pero que sea barra baja.
Lo vamos a...
Total.
Como esto lo vamos a crear ahora.
Vamos a hacer que sean todos guiones.
Y ya está.
Y aquí lo que tengo que hacer es el title.
Claro.
Si yo hago aquí un lowercase.
Lowercase esto.
Esto está bien.
Pero me va a dejar los acentos.
Me va a dejar un montón de cosas.
Vamos a poner console.log.
Del file name.
Esto ya no hace falta.
Ya lo estamos mirando aquí.
Entonces.
Claro.
No tiene mala pinta.
Pero vamos a buscar un Slugify.
Básicamente.
Por si no sabes lo que es un Slugify.
Esto lo que hace es...
Toma un string.
Y...
Ah.
Mira.
Slugify.
Este normalmente tiene siempre paquetes muy buenos.
Así que vamos a fijar donde este.
A no ser que vea que está muy poco actualizado.
Esto es lo que hace un Slugify.
Tú le pasas un string que además tiene símbolos y cosas raras.
Y te lo convierte en una URL.
¿Vale?
Todo lowercase.
Sin un acento.
Sin nada raro.
Por más que tú le pones símbolos raros.
Pues te devuelve esto.
Pues este tiene buena pinta.
La verdad.
A ver.
Pone aquí cosas alemán.
Que soporta un montón de idiomas.
Es Slugify.
¿Y este qué tal?
Este se ve más actualizado.
Vamos a ver cuánto ocupa este.
De Sindre Horsus.
Me gusta instalar dependencias que no tienen muchas dependencias en sí mismo.
Vale.
53k.
Bah.
Tampoco es tanto.
Vamos a fiarnos.
Sindre.
Estamos confiando en ti.
¿Vale?
Así que no me falles.
Vamos a instalarlo aquí.
Vamos a instalar.
Y también con el...
No sé.
Que sea exacto.
No he mirado el package.json.
Como lo he dejado antes.
Pero esperamos que no me lo ha dejado muy...
Es muy raro.
Vale.
Voy a cambiar este Slugify.
Mientras por un const.
Y además vamos a hacer este Slug.
O Slack.
Slack.
No es Slug.
Slugify.
Y esto lo recuperamos de lo que hemos instalado.
Que es Sindre Horsus barra Slugify.
Slugify.
Vale.
¿Cómo se utiliza este Slugify?
Que no me he olvidado la documentación ni siquiera.
Bueno.
Básicamente se utiliza directamente.
Y se le pasa el string.
A ver qué opciones hay.
No vaya a ser que haya algo interesante.
Separator.
Queremos este.
Lowercase.
Y decamalize.
Esto básicamente es que si es camelcase.
Pues lo quita.
Ah.
Claro.
Interesante.
Si es camelcase.
Además lo separa con guión.
Bueno.
En este caso no vamos a tener este problema.
En principio.
Pero bueno.
Me parece bien.
No hay ningún problema.
Custom replacements.
Veo que...
Ta ta ta.
Bueno.
Yo creo que tiene buena pinta.
Vamos a fiarnos.
Vamos a fiarnos.
Tengo el Slugify.
Y esto lo vamos a hacer.
Este title.
Que estábamos haciendo antes el lowercase.
Lo vamos a hacer así.
Directamente.
Y con esto.
Ya tendríamos.
Ahora sí.
Ah.
Tenemos que ponerle el punto MD.
¿No?
Que es el markdown.
Es el archivo que queremos crear.
Markdown.
Ay.
No, no.
Con que lo instalemos una vez ya tenemos suficiente.
Lo que quiero hacer aquí es ejecutar el script.
Vale.
No tiene mala pinta.
De hecho.
Este.
Si no fuese por los guiones.
Sería igual que el que ya hice.
O sea.
Que hay algunos que.
Que.
Hmm.
Que no está.
Ah.
Aquí ahora tengo dudas.
No sé si mantener los guiones bajos para que sean iguales.
Ah.
Bueno.
Dejadme en vuestros comentarios.
En los comentarios que hubierais hecho vosotros en este caso.
¿Vale?
Porque a lo mejor esto no lo subo a producción hasta que lea vuestros comentarios.
Entonces me podéis dar una idea.
Por ahora lo voy a dejar así.
Pero.
Si aquí en lugar de guiones hubiera dejado los guiones bajos.
Este título por lo menos hubiera encajado con el otro.
Y ya hubiera estado bien.
No lo sé qué hacer.
Así que.
Bueno.
Echadme una mano.
Por ahora ya tengo el filename.
Que esto está bien.
Creo que debería poder tener aquí también el directorio en el que voy a crear todo esto.
Que es content barra podcast.
Entonces aquí vamos a poner content folder.
Y vamos a poner que esto lo resuelva.
Y esto lo que tendría que ser.
Bueno.
El dirname.
Que es el nombre de este.
Bueno.
Aquí tengo dos opciones.
Podría poner directamente el current working directory.
Current working directory.
Básicamente es el directorio en el que estamos ejecutando el script.
Y eso sería la raíz.
Y seguramente quedará más.
Más.
O sea.
Más limpio.
¿No?
Porque estamos en la raíz.
Ejecutamos este script.
El current working directory.
Dentro.
Pasamos a la barra content barra podcast.
Y es en este que deberíamos crear nuestros archivos.
¿Vale?
Content folder.
Efectivamente.
Y ahora miraremos esto.
Vamos a mirar el filename también.
Iremos dejándolo console.logs por todos lados.
Ahora lo que falta.
Ahora que más o menos.
Antes de ejecutarlo.
Que no sé si esto habrá funcionado.
Pero ya voy a ir pensando un poco en el template.
Porque ahora es importante esto.
También va a ser interesante.
Que voy a tener que crear markdown.
A ver.
Aquí tengo dos opciones.
Pero bueno.
Ya nos preocuparemos de esto.
Por ahora.
Vamos a tener que crear esto.
Así que.
Me voy a crear este template.
Voy a crear aquí un template.
Con un template string.
Lo voy a poner aquí.
Y aquí.
¿Esto qué sería?
Template.
Create.
Create markdown.
Aquí en este create markdown.
Esto.
Este title.
Pues.
Tendría que ser el title.
El title.
Aunque el title ya veo que tiene 0.1.
Por 0.1.
No sé si eso será interesante.
Igual mola más si lo ponemos al final.
¿No?
Por temas de.
Por ahora vamos a dejar así.
Title.
El title se lo pasamos.
El date.
Sería el pub date.
¿No?
Cuando se publicó.
Esto habrá que darle una vuelta.
El pub date que le vamos a pasar.
No puede ser exactamente el que estamos recibiendo.
Porque es diferente.
El image.
Vale.
Se llama image.
Pues también.
Image.
Y este image.
Lo vamos a poner de aquí.
Tengo que ver si se come con patatas las imágenes que son externas.
Quiero pensar que sí.
Vale.
Aquí.
Description.
El problema del description es que esto tendría que ser solo un trozo del content.
Porque el content es muy largo.
Vale.
Voy a poner el content aquí abajo por ahora.
El season.
Season.
Episode.
Esto del audio es por si quiero tener el mp3 directamente.
Antes había visto que lo podíamos tener.
Pero no sé si esto ahora.
Esto lo voy a dejar de utilizar.
Porque lo que quiero hacer es poner el embed directamente.
Y despreocuparme un poco de cómo va a ser el reproductor.
Y todo esto que era bastante trabajo.
No sé por qué utilizo el category y el tags.
Los dos.
Pero uno de los dos sé que no funciona.
Bueno.
Ya lo veremos después.
Entonces el content por ahora vamos a dejarlo así.
Lo voy a dejar repetido.
Sé que no está bien.
Pero ya veremos cómo lo separamos.
¿Vale?
Entonces.
Esto sería el template.
Esto sería crear el markdown.
Vale.
Pues vamos a hacer el create markdown.
Y aquí lo que le pasamos.
Pues el content.
El title.
El link.
El link este es justamente para cambiar el tema del embed.
Así que a lo mejor esto que tenía por aquí de audio.
En lugar de audio puedo poner embed.
Y vamos a pasarle el embed.
Y este embed lo tenemos que crear.
¿Vale?
O sea que ya teníamos esto.
Pues este embed.
Vamos a crearlo aquí.
Nos vamos a fijar cómo lo estamos haciendo aquí.
Tenemos el iframe.
¿Vale?
Toda esa parte es igual.
Entonces.
Si lo que tengo es el link.
Lo que tengo que hacer es reemplazar el episodes.
¿Vale?
Ya está.
Lo que tengo que hacer.
Es que el link.
Hago un replace del episodes.
Y lo que hago es que esto sea embed barra episodes.
Ya está.
Y esto sería el embed.
Se lo pasamos.
El embed no aparecerá por artigracia.
Pero bueno.
Ya veremos cómo lo podemos arreglar eso.
Entonces tengo el embed.
El pubdate.
Pubdate.
Embed.
Season y episode.
Season y episode.
Complicado que estoy trabajando sin linter.
Y ya veo que no me dice si no estoy utilizando esto o si no estoy utilizando lo otro.
Image.
Pubdate.
Season.
Me falta el content.
Aquí.
Content.
Así que.
Content.
Update.
Esto me lo puedo copiar porque son los mismos nombres.
Y así me aseguro que los estoy pasando todos.
Y ya está.
¡Visto!
Muy bien.
Vamos a ver qué pasa con todo esto y si peta por algún lado.
¿Vale?
Venga.
Vamos a verlo.
Efectivamente.
Peta por algún lado.
Esto es porque no me he importado el path.
Path.
Path.
De.
Path.
De note.
¿Ok?
Vamos a ver.
Bueno, bueno.
Aquí ha hecho un montón de cosas.
Lo cual tiene buena pinta.
Pam, pam, pam, pam.
Vamos para arriba.
Bueno, content folder ha ido a barra content barra podcast.
A ver, claro.
Porque este proceso current working directory es el mismo.
Entonces, pues, no tiene ningún misterio.
Luego el file name es justamente el que esperamos.
Y esto es lo que ha creado.
El date.
Este sí que vamos a tener que arreglarlo.
Y el image.
Pues no tiene mala pinta.
El description.
Esto de que sea HTML.
Tengo dudas si se lo va a comer con patatas.
El mardo.
Bueno, el description seguro que no.
Tenemos que quitar todo eso.
Bueno, vale.
Importante saberlo.
Lo que sí que.
Description.
Pla, pla, pla.
Vale.
Es una liada lo de la descripción.
Hay que limpiar todo el HTML.
Y además que ocupe menos.
El embed.
Vamos a verlo.
Podemos entrar directamente.
Ya que lo he creado, ¿no?
Pues, sí.
El embed funciona.
Tags, podcast.
Estas barritas.
Y ahora aquí estaría el contenido.
Vamos a hacer una cosa.
Por ahora la descripción.
Voy a poner aquí description.
Y lo voy a dejar vacío.
Solo para que me lo esté creando correctamente.
Sin tanto ruido.
Y luego ya nos preocuparemos de hacer que la descripción esté bien.
¿Vale?
Por ahora lo importante sobre todo es que el markdown ese que funcione.
Esto me preocupa también.
Estos tres que hay aquí.
Estos tres porque a lo mejor el markdown se puede confundir con la parte del título.
Pero bueno.
Ahora lo importante como tal es que puedo crear los archivos ya.
Ya puedo crear los archivos.
Y para hacer esto puedo utilizar esto de filesystem de Node.js.
Para crear los archivos vamos a ver si soy capaz de hacerlo aquí.
Tengo que crear el markdown.
Vale.
Entonces tenemos el markdown que lo creamos aquí.
Perfecto.
Entonces fs.writefile.
Y lo que tenemos que decirle en el write file es donde queremos que esto lo cree.
Aquí tenemos que tener el path.
El path tiene que ser lo que habíamos creado aquí arriba.
Que era el content folder donde vamos a crear esto.
Vamos a ver.
Este el path tiene que ser el content folder barra el file name.
Vale.
¿Qué más necesita esto?
¿Vale?
Ya veo que tiene el path.
Podríamos ponerle que es vtf8.
Y vamos a ver si eso ya es suficiente.
Vtf8.
Vale.
Ah.
Y el contenido.
A ver.
A ver.
¿Dónde se pasa el contenido?
Es el path data.
Y luego es.
Vale.
Aquí se tiene que pasar el contenido.
Y le decimos que es vtf8.
Y entonces aquí pues vamos a poner console.log created file name.
Vale.
Y le vamos a poner aquí un check.
Que esto siempre queda bien.
Vamos a nombrar.
Vamos a comentar.
Perdón.
Por ahora esto.
Y ya estamos creando estos archivos.
Entonces.
Vamos a hacer el run.
No le ha gustado nada.
Todo esto que he hecho.
Porque dice que no encuentra no such file or directory.
Hmm.
Content barra podcast.
Puede ser que este path resolve que he hecho aquí en realidad.
Claro.
Es que aquí esto lo he hecho muy.
Este resolve no será un join.
¿Verdad?
Vamos a ver.
Efectivamente.
Claro.
El resolve es como para resolver la ruta.
Pero lo que quería hacer era que me crease la ruta correcta.
¿No?
Y entonces.
Le puedo crear toda la ruta absoluta.
No la relativa.
Claro.
Para tener todo el path donde lo quiero crear.
Y eso sí que funciona.
De hecho.
Ahora sí me ha creado aquí todos los archivos.
Que quería.
Vamos a ver cómo han quedado.
Eso sí.
Bueno.
No ha quedado más.
Ah no.
Esto es un asalto.
Digo.
Oh.
Qué bien ha quedado.
No.
No.
Vamos a ver esto.
Bueno.
Ya veo que aquí le ha dejado un espacio.
y el primer espacio no le va a gustar.
El primer espacio ese le va a molestar.
Entonces esto lo subimos aquí y lo volvemos a crear.
Porque ese ya estoy seguro que va a dar algún problema.
Vale.
Ahora otra vez ha creado esto.
Voy a volver a revisarlo.
Aquí.
Vale.
No tiene mala pinta.
Vale.
La fecha ya sabemos que la tenemos que solucionar.
La descripción también sabemos que la tenemos que solucionar.
Este salto es porque no cabe.
Perfecto.
Esto es publicidad.
Bueno.
Publicidad.
A ver.
Si os animáis me podéis enviar un mensaje.
Y seguramente lo pondré en el podcast porque me hará muchísima ilusión.
Pero no sé.
Este es sending a voice message.
Igual lo puedo cambiar.
Para que lo ponga en castellano.
Al menos.
Así que vamos a poner en el content.
Bueno.
Normalized content.
Vamos a hacer que esto.
El content reemplace esto.
Por envía un mensaje al podcast.
Al menos que salga en castellano.
Que es un poco raro.
Que salga.
Vale.
Esto lo tengo que poner antes del markdown.
Es lo que le vamos a pasar como content.
Entonces estoy creando esto.
Pero bueno.
Aquí queda.
Queda porque ahora.
Cuando vaya a la página.
Vamos a ver.
¿Ves?
Ya me está petando esto.
Y se está quejando.
¿Vale?
Vale.
Lo primero que dice.
Es que no puede.
Buah.
Esto es un error de Hugo.
Que algo no entiende.
Lo interesante es.
Los dos puntos.
Es que en el título.
Claro.
¿Qué pasa?
En el markdown.
Si vamos aquí al 01.
Que creo que es el que está quejándose.
Aquí podemos ver estos dos puntos.
Y aquí estos dos puntos.
Entonces.
Además.
No sé.
¿Cómo se escapa esto?
O sea.
A lo mejor tendríamos.
Lo podríamos cambiar.
Vamos a cambiar los dos puntos.
Por una coma.
Porque la verdad es que no sé.
Cómo se puede.
A ver.
Entiendo que también podría ser así.
¿No?
Y ya está.
Si hacemos esto.
A ver.
Voy a guardar.
Y voy a ver si me sigue dando este error.
Vale.
No me da ese error.
Vale.
Interesante.
Pues ya está.
Más fácil.
No hace falta mover dos puntos.
Que sea un string.
Y ya está.
Así que.
Pues lo ponemos como un string.
Y lo generamos otra vez.
Que eso le gusta.
Pues mira.
Ya he aprendido algo.
Porque mira que a veces me ha pasado esto.
Vale.
Lo que me gusta mucho es que ya vemos aquí al menos todos los podcasts.
He dicho.
He dicho y no lo he hecho.
He dicho y no lo he hecho.
¿Por qué sale este aquí?
¿Por qué sale?
Ah.
¿Por qué?
Me está recuperando de la carpeta alt.
Me está pillando también los antiguos.
Me los está enseñando.
¿Qué hago con esto?
¿Dónde lo pongo?
Lo pongo fuera.
Tampoco me está ayudando ya mucho.
Pero bueno.
Lo voy a poner aquí.
No sé si lo puedo mover.
No.
Aquí no.
Lo puedo mover.
Lo odio.
De Visual Studio Code.
Lo quiero mover fuera.
Pero no hay una forma fácil.
A no ser que vayas aquí.
Ahora.
Abajo del todo.
Pero claro.
Cuando ya lo tienes desplegado.
Vale.
Ahora sí.
Vale.
Pero no se me ha actualizado.
Lo está recuperando igualmente.
A ver.
No se ha actualizado.
Porque no ha detectado el cambio.
Es un poco raro.
Remove.
René.
Creo yo.
¿Qué es eso?
Ah.
Pues.
Ah.
Sí.
Vale.
Vale.
Me gusta que ya tenemos ahí.
Los archivos que estamos generando.
Pero.
Cuando le dé clic.
Ahora no te asustes.
Vale.
No te asustes.
Porque seguramente esto va a petar.
Vale.
No ha petado.
No ha petado.
No está mal.
No está mal.
No ha petado.
No ha petado.
Pero esto.
Esto funciona así.
Que me sale el título de esta forma.
Vale.
Ya sé que está pasando.
Bueno.
Lo interesante es que el HTML.
Esto se lo come con patatas.
Lo cual me encanta.
Estas tres rayas de aquí.
No me gustan mucho.
De hecho las vamos a quitar.
También.
Esto.
Lo podemos solucionar rápidamente.
Porque.
Como hemos visto antes.
Este content.
Que hacemos el replace este.
Además.
También podríamos quitarle.
Las tres rayas de esas.
Que no tienen mucho sentido.
La verdad.
Esto por otro lado.
Bueno.
Si esto lo generamos otra vez.
Debería desaparecer.
Ahí está.
Vale.
Entonces.
Lo que está pasando aquí.
Está funcionando.
Y está funcionando bastante bien.
El tema.
Es que.
No me está saliendo el embed.
Lo cual vamos a solucionar.
En la plantilla de Hugo.
No sé si conoces Hugo.
Yo aquí.
He lanzado todo esto.
De buenas.
Pero Hugo al final.
Mira.
Lo voy a enseñar por aquí.
Hugo CMS.
Está muy bien Hugo.
Es el framework que yo utilizo.
Para crear mi página web.
Al final.
Lo que hace.
Es generar.
Páginas estáticas.
Y.
No hace falta.
Que utilices React.
Ni nada.
Y es bastante interesante.
Porque.
Lo que te permite.
Es tener.
Tienes que aprender.
Su sistema de plantillas.
Eso sí.
De hecho.
Ahora lo vamos a ver.
Y puede ser.
A veces un poco problemático.
Porque no es tan fácil.
Como puede ser.
NextGS.
Por ejemplo.
Pero me gusta.
Porque es muy rápido.
O sea.
Genera súper.
Bueno.
Ya puedes ver.
El modo desarrollo.
O sea.
Yo pongo.
NPM Run Dev.
Y esto.
¿Cuánto tarda?
Sí.
No tarda nada.
Ha tardado.
Creo que lo pone.
¿No?
300 milisegundos.
Y tengo 155 páginas.
Así que.
Yo necesito algo que vaya a escalar bastante bien.
Y esto.
Me da seguridad de que va a escalar.
Entonces.
Este es Hugo.
Hugo.
Pues.
El que esté viendo el vídeo.
El que esté viendo el vídeo.
Hugo.
Es bastante interesante.
Te lo recomiendo mucho.
Y lo que vamos a tener que hacer es.
Modificar un poco.
El template.
Que tengo.
Que lo que hace.
Es que mira.
Si tiene un audio.
De hecho.
Voy a cambiar esto.
De el embed.
Este que teníamos aquí.
El que he generado.
Que he puesto embed.
Así como un nombre.
Lo voy a dejar como audio.
¿Vale?
¿Por qué?
Porque el audio ya lo está utilizando el template.
Seguramente porque es el que está utilizando antes.
Obviamente.
Tengo que generar otra vez los archivos.
Vamos a generarlos.
Obviamente.
Lo que va a pasar.
Es que a lo mejor no le gusta.
Bueno.
Pues sí.
Le sigue gustando esto.
¿Era audio?
Vamos a ver en el alt.
Alt.
¿Era audio?
Audio.
Sí.
Vale.
Ok.
Pues no sé por qué esto.
El embed se lo estamos pasando.
¿No?
Sí.
Embed.
Y aquí.
Embed.
Vale.
Vamos a ver.
Entonces lo que generamos.
Tiene el embed.
Audio.
No.
Este es el alt.
No me dejes.
No me engañes.
El que hemos generado nosotros.
¿Dónde está?
Ah, no.
Se ha dejado audio.
Es que no he puesto.
A ver.
Vale.
Ha puesto audio.
Sí.
Sí.
Está bien.
Audio.
Y ha puesto el embed.
Me he liado.
Vale.
¿Y por qué no está recuperando esto?
Vamos a ver el template.
Voy a cerrar unas cuantas cosas.
menos el archivo este.
Creo que se llama single.html.
Vale.
Esto no te preocupes.
Que aunque parece un poco complicado.
No lo es tanto.
Vale.
Pone aquí que si tiene el params.
Tiene el audio.
Entonces que recupere el audio player.
Y salga el podcast subscribe.
Pero ¿por qué?
Ah, vale.
Ahora sí que ha funcionado.
Es que no se había refrescado.
Vale.
Entonces ahora sí que sale reproductor.
Esto es un reproductor que hice yo manualmente.
Pero claro.
Esto lo que necesita es un mp3.
A ver.
Lo fácil es que aquí se pudiera ejecutar el mp3.
Lo que tiene este reproductor.
Pues que me da un poco de miedo que no funcione en algún...
Está bastante bien.
El reproductor no está mal.
Está bastante bien.
Lo hice yo con mi cariño y tal.
Además me gusta mucho que si tú esto lo haces lo suficientemente pequeño.
Vas a ver.
A ver lo que hace esto.
Si lo haces súper pequeño.
A ver si hay capa.
Mira.
Aquí llega un momento que se lo queda todo.
¿Por qué?
Porque si esto lo pones en un iframe directamente.
Pues ya te sale el reproductor.
No me digas que no es buena idea.
Pues ¿sabes qué?
Lo voy a dejar.
Lo voy a dejar.
Porque total.
Sí es muy fácil.
Porque en lugar del embed.
Vamos a quitar lo del embed.
Y vamos a seguir utilizando este.
Al final lo que necesito.
Al final es este.
No lo he soñado, ¿no?
De que...
Vale.
En closer.
Todos tienen closer.
Vale.
Exacto.
Pues lo que necesitamos es recuperar el enclosure.
Ya está.
Lo vamos a dejar así.
Más sencillo.
Vamos a poner aquí.
En lugar del embed.
Vamos a ponerle audio.
Aquí vamos a dejar el audio.
Y lo que vamos a hacer aquí.
Que habíamos creado este embed.
Que no parecía mala idea.
Pero vamos a recuperar.
En lugar del link.
Porque el link lo que hace es que puedas ir a...
Closure.
Enclosure.
A ver, a ver.
Enclosure.
Enclosure.
Ahí está.
Ahora sí.
Pues eso.
El link lo que te lleva a esa anchor.
No tiene sentido.
Mejor que la gente se quede en mi página, ¿no?
A escuchar el podcast.
Vale.
Pues este enclosure es el que vamos a utilizar directamente como audio.
Aquí.
Y ahora sí tendríamos nuestro mp4 o lo que sea.
Vamos a ver si funciona.
Que tampoco tengo todo claro.
Vale.
¿Dónde he dejado embed?
Aquí.
Este embed ya no existe.
Vale.
Estamos creando otra vez nuestros archivos y en nuestra página web.
A ver.
Si ahora refresco.
Pues no.
No parece que esté recuperando.
No sé si es tarda.
Pero sí.
Aquí se puede ver, ¿no?
Que no se está.
No se puede reproducir.
Vale.
Vamos a ver qué está pasando.
Hemos generado los archivos.
Por lo tanto, vamos a ver.
Ah, vale.
Amigo.
Amigo.
Es que es un objeto.
Vale.
Por eso no funciona, ¿eh?
Object.
Esto no funciona.
No se lo va a comer con patatas esto.
Así que este enclosure.
¿Por qué devuelve un objeto?
Enclosure.
URL.
¿Será que tiene el objeto aquí?
El URL.
Vamos a verlo.
Enclosure.
Casi.
Casi vuelvo a poner mal enclosure.
Madre mía.
Antes de crearlo.
Ah, mira.
Claro.
Esto es lo que esperaba yo antes.
Y no sé por qué no me lo ha hecho esto con la imagen, ¿no?
Qué raro.
Con la imagen me la ha dado directamente.
Entonces, lo que creo de enclosure aquí.
Igual esto, para que quede un poco más claro.
Vamos a sacarlos todos, ¿vale?
Vamos a dejarlos en una línea.
Me gusta que todo quede en una línea porque creo que se lee un poco mejor.
Entonces, de aquí recuperamos lo que sea de iTunes.
Y de enclosure recuperamos el audio.
Recuperamos la key URL y le llamamos audio, ¿vale?
Entonces, así directamente ya tenemos esta transformación del audio directamente.
Vale, volvemos a crear.
Y ahora, pues, vamos a ver.
Parece que todo ha ido bien.
Vamos aquí a nuestra página.
Guillermo Rau.
Vamos a refrescar, por si acaso.
En el episodio de hoy te...
Ey, ha funcionado.
Ha funcionado.
En el episodio de hoy.
Hoy te traigo una...
Eso que se escucha no es que estoy hablando dos veces.
Es el podcast.
¿Vale?
Perfecto.
Perfecto.
O sea que ya tenemos aquí las URLs.
En el título...
Ahora entiendo por qué en el título ponía los números.
Porque, claro, aquí queda mucho más bonito el número.
Como no lo voy a poner al principio, de nuevo, lo que voy a hacer es ponerlo al menos al final.
Que en el título, aquí, pues, tenga el episodio de X...
Bueno, perdona.
Season.
Primero Season.
X Episode.
Y, ojo con esto, ¿no?
Porque este Normalize, claro.
Justo queremos lo mismo.
Entonces, en lugar de utilizar este Season aquí...
Voy a hacer algo.
Porque esto empieza a no poderse leer muy bien.
Vamos a poner esto.
Vamos a hacer esto.
Pa, pa, pa.
Vale.
Este Season, vamos a utilizar el Normalize Season y el Normalize Episode.
Perfecto.
Y ahora que ya tenemos esto, lo que deberíamos hacer...
Nada.
Pues es volver a generar.
Y ver si está en el título.
Ya está.
Vale.
Al menos...
Hoy te traigo.
Vale, vale.
Ya sé que tú hoy me traes, pero hoy no te quiero escuchar.
Ahora con esto ya tenemos mejor el tema.
Así que...
Entiendo que tengo esto.
Me faltaría la descripción.
Creo que es lo último que queda.
La Description.
Así que vamos con la Description.
La Description...
El problema que hay que hacer es que hay que limpiar el HTML.
Hay que limpiar el HTML y además hacer que sea de X número de letras.
Porque no me voy a currar una descripción ahí a mano.
Lo quiero totalmente automático esto.
Así que...
Clean HTML...
From String.
Vamos a ver si me ofrecen algo fácil.
Strip Tags.
Vale.
Eso es PHP.
Eso es PHP.
Bueno.
JavaScript.
O MPM.
Ah, mira.
Aquí hay algo así como...
Chungo.
Va a ser que MPM.
HTML Tags.
O Remove.
Mira.
Sanitas HTML.
No tiene mala pinta.
Remove.
Este Sanitas HTML.
Este es...
Mitiquísimo.
Vale.
Pues creo que vamos a utilizar este directamente.
Como siempre me gusta ver si tiene muchas dependencias.
Porque luego cuando se hace la instalación si es muy grande.
Hostia.
Media y medio, eh.
Vamos a ver si hay una alternativa.
Solo por mirar.
Solo por mirar.
Clean HTML.
String.
Bueno.
No.
Esto no es.
Sanitas.
Esto justamente lo que tenemos.
Clean.
Clean.
Clean.
Clean.
Rehype Sanitas.
Clean HTML.
HTML Cleaner.
Esto no es lo que quiero.
HTML String.
Vamos a ver si hay algo así.
Strip Comments.
No.
Strip HTML.
Esto.
Esto tiene buena pinta.
Vamos a ver.
A ver cuánto ocupa este.
Cuanto menos ocupe, mejor.
Sí, total.
Al final va a hacer exactamente lo mismo.
Uy.
Eso lo está pensando mucho.
Bueno.
Más o menos lo mismo.
Venga.
Vamos a jugárnoslas con este.
Y si no, utilizamos el otro.
¿Vale?
Pero por ahora vamos a utilizar este.
Así que vamos a instalar esto.
Ponemos el exacto.
Y vamos a ver mientras cómo funciona esto.
Vale.
Strip HTML.
Vamos a importarlo directamente.
A ver.
Podríamos utilizar.
Podría haber utilizado InMaskry Modules.
Pero por ahora vamos a utilizar Common.js.
Con los requires.
Que ya demasiado tarde.
Para tirar atrás esto.
Vale.
Strip HTML.
Esto lo vamos a tener en la descripción.
Vale.
Strip HTML.
Aunque veo que aquí es punto resuelto.
O sea que aquí ya me está.
Vamos a ponerlo en esta descripción.
Aquí vamos a dejarlo así como estaba.
Porque esto lo vamos a hacer en otro sitio.
Lo vamos a hacer aquí.
¿Vale?
Este description lo hacemos del content.resolve.
Y además, claro, también tendríamos que...
MPM excerpt string.
Tendríamos que extraer un trozo del string.
No todo.
A ver.
Hay dos opciones.
Una.
Que lo hagas saco.
Y diga hasta aquí.
Me da igual las líneas que haya.
O sea, rompo la línea o lo que sea.
O buscar.
Otra cosa que podría hacer es buscar el espacio más cercano.
Eso no podría ser mala idea.
Pero no sé.
A ver si hay un paquete que lo haga.
Este sería uno.
El superstring sería el más sencillo.
Sería.
Tenemos aquí descripción.
Resolve.superstring de 0 a...
No sé cuánto era lo posible para hacer una descripción.
155.
Vale.
Genial.
Y ahora saco esto.
Uy, este description lo hemos creado encima del mardón.
Esto no puede ser.
Tiene que estar aquí.
Y este description, pues directamente lo podemos poner aquí.
Vamos a ver qué pasa.
Vamos a ver qué...
Vamos a ver qué hace.
Vamos a ver cómo nos ha generado esto.
¿Vale?
7.0.0.1 este.
Tenemos la descripción.
Claro.
Me dice sobre.
Bueno.
A ver.
En este caso ha quedado bien.
Pero ya te digo que habrá otros que no queda bien.
Primer capítulo del podcast de Frontend.
Ah, y esto es porque seguramente aquí había un código HTML que era What the Front, que
es como se llamaba antes.
Y ha creído que esto es HTML.
Y ha quitado el título.
Ay, qué gracioso.
Vale.
Ixi, también habría que quitar los saltos de línea.
O sea, habría que quitarlos, ¿eh?
Este description, el substring, lo podríamos...
Tanto los saltos de línea...
No sé si habrá otra cosa que pueda liarse también.
Pero claro, la descripción no tiene sentido quitar un salto de línea.
Así que tiene que quedar una sola.
Vamos a verlo ahora.
Cómo se ha generado...
Por ejemplo, este, que era el que...
¡Ey!
¡Ey!
Me ha dejado el salto de línea.
¿Qué he hecho aquí?
Vale.
Si tengo el resultado.
A ver, que igual también lo podría hacer antes.
Lo que pasa es que el content...
A ver, claro.
El content lo estábamos tomando de aquí.
¿Os acordáis de ellos?
Estoy pensando en diferentes cosas que podría hacer.
Lo primero.
Claro, lo primero es que no sé si me está detectando este salto de línea.
Lo segundo.
Podría cortar donde esté el primer salto de línea.
Eso es lo primero.
O sea, podría decir.
Vamos a ver si esto me sabe lo que estoy pensando.
Podría pensar.
La descripción.
O first line break.
Que sería el content.
Tata, tata, tata...
Como...
Podría ser el content.
Y decimos cuál es el índice de esto.
¿Vale?
Si el primer índice, este first line break...
Si el first line break está por debajo de 155, podemos hacer que el description...
Hacemos que ese primer salto de línea, porque así nos quedaría limpio.
Lo que pasa es que tengo dudas de que esto me lo esté detectando.
Si no, ahora miro porque no me detecta el primer salto de línea.
Bueno, a ver si siempre es menos uno.
Esto me debería decir dónde está justamente el salto de línea.
Esto en el caso de que me esté detectando correctamente lo que espero que me esté detectando.
Pero bueno, vamos a pensar que sí, que me puedo detectar los saltos de línea del texto.
Que entiendo que debería.
Si el salto de línea está por debajo de 155, básicamente lo que puedo hacer es que la descripción sea...
Que sea street html esto.
Luego lo refactorizo un poco.
¿Vale?
Esto y el substring sea de 0 al first line break.
O antes, ¿no?
Debería ser menos uno.
¿No?
Justo antes del salto de línea.
Debería ser.
Si no, el description será esto.
Y pues nada, que lo corté directamente.
Lo que aquí me falta justamente esto, ¿no?
El replace este, bla, bla, bla.
Voy a ponerlo aquí.
A ver si esto le gusta más.
Y ahí tendríamos la descripción.
Vamos a poner aquí el console.log de la descripción.
A ver qué hace.
No sé, he probado así un poco.
Me encantan estos vídeos porque a lo mejor lo estás viendo y dices...
No, no, tienes el error aquí y no te estás dando cuenta.
Vale.
Veo que los saltos de línea...
Ah, es que tengo aquí saltos de línea que están muy, muy...
No es menos de 155.
Hombre, este sí.
En este programa he contado Juan Adrián sobre el contenido de su charla de este año.
Nada ha terminado mal.
Entonces, vamos a ver qué es lo que realmente...
Entonces, la descripción, todo hemos pasado...
Ah, no.
Esta es la descripción que hemos dejado en este programa.
Bueno, vale.
Aquí, por ejemplo, como el first line break venía en 384, pues directamente lo ha cortado ahí directamente.
No pasa nada que la descripción quede así un poco cortada.
Lo que se puede hacer justamente es que si va a cortarlo así de esta forma, pues podría hacer esto, ¿no?
De esta forma no queda tan raro.
A ver, max google description.
Por si sale en el SEO que tampoco quede tan raro.
155, 160.
Vamos a dejarlo en 155.
No sé si...
Sí, que efectivamente ya pone tres puntos suspensivos.
Va a quedar un poco raro.
Puntos suspensivos, puntos suspensivos.
Así que lo que podemos hacer es dejar...
Vamos a quitar esto y vamos a dejar que queden 180.
Total, nunca los va a ver, ¿no?
O sea, se supone que los corta y ya cortará el punto suspensivo y ya está.
Y ya está.
Ahora vamos a ver si esto...
Este description que lo hemos pasado aquí, create markdown, lo tenemos aquí.
Y aquí tenemos el description.
Vamos a ver si esto...
Bueno, voy a volver a generarlo.
Y voy a mirar en los artículos.
Bueno, a ver.
Bueno, este no está mal.
Si es verdad que aquí se ha...
Le ha faltado el what the front este.
Este what the front se lo ha comido con patatas.
Pero bueno, ya estos...
Los que veía que todavía esté eso, pues...
No sé.
O lo puedo arreglar manualmente o puedo...
O los puedo arreglar manualmente.
Ya está.
O si no puedo buscar la palabra y transformarlo a que...
Evite que sea HTML y que sea un símbolo codificado y ya está.
Veo que esto del Season, esto no se ha solucionado, ¿eh?
Vamos a ver.
Tenemos, por ejemplo...
¿Cómo hacemos sostenible el código abierto?
¿Cómo hacemos sostenible el código...?
Este es bastante nuevo.
¿Cómo hacemos sostenible el código abierto?
Es que veo que le falta también la sesión y tal.
Esto ya ni siquiera me acuerdo.
Esto es temporada 1, temporada 2.
No tengo ni idea.
A ver este que es justamente el de antes.
Este es el 2, 1.
Pues este tiene que ser el 1 o...
No sé.
El 1, no sé.
1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13.
Los que falten, pues le ponemos 13.
Y hay otro, ¿no?
¿Cómo hacemos sostenible y tal?
Este SEO Google Bot.
Este es que le falta...
O sea, sí que tiene episodio, pero le faltaba el Season.
Vamos a poner que son 1 o 14.
Ah, mira.
Ah, pues mira.
Este era el 14.
Ya está, ya está.
Ahora ya lo tengo más claro.
Este era el 14.
Que no tenemos 14, ¿verdad?
No, vale.
Este es el 14 y otro es el 13.
Sé que esto no tiene nada que ver con programación.
Y esto soy yo, básicamente, que me estoy obligando a hacer esto ahora.
Pero es que si no, no lo hacía nunca.
Entonces, vamos a dejar esto.
Claro, esto no tiene porque era como una sección especial que era café con devs.
Y entonces quería hacer...
No sé.
Vamos a dejarlo así.
Por eso no era...
Episodio Type es un bonus.
Por eso no ponía...
Bueno, pues sí es un bonus.
Venga, vamos a dejarlo como estaba.
Vamos a dejarlo como estaba.
Vamos a dejar que este sí que sea el 13.
Y los bonus, lo que vamos a hacer es que no aparezca...
Ya está.
Si el Season es 0, pues tiene sentido.
0, 0, 1.
Ya está.
Son unos bonus.
No son capítulos.
Son especiales así más cortos o diferentes.
Y ya está.
Pues esto no hace falta que lo guarde.
Lo que nos queda al final es lo del Date.
No sé hasta qué punto esto...
Pues seguramente esto...
Puede ser que se lo coma con patatas.
¿Jugo?
Y vamos a ver.
Pues puede ser, ¿no?
Sí que puede ser.
Sí que puede ser.
Ojo, ¿eh?
Sí que puede ser.
Porque veo que al final esto...
Este tipo de fecha es...
Pues una...
Un estándar.
Así que...
A ver.
No sé si sale...
Bueno, tampoco...
Tampoco sale el momento.
Así que, bueno, no pasa nada.
Pues yo creo que si la fecha se la puede quedar así...
Pues que ya estaría con esto.
Tendríamos nuestro script de Node.js que me está generando automáticamente toda la
ristra de podcast.
Podría mejorarlo, ¿no?
Para ver si ya se ha creado y tal.
Volverlo a crear.
Aunque tampoco tarda mucho.
Los puedo crear tantas veces como quiera.
Voy a ver los últimos, ¿vale?
Es que estos tienen HTML como este.
Pero bueno, veo que funciona bien.
Porque, por ejemplo, pues aquí está el vídeo y tengo los enlaces y perfecto.
O sea que nada, genial.
Si voy aquí a podcast...
A ver una cosa...
Vale, porque aquí tengo todos los podcasts y, bueno, veo que funciona perfectamente con
la imagen y todo.
O sea que...
Perfecto.
Ya está.
Lo hemos hecho juntos.
Lo hemos hecho genial.
Y lo hemos podido solucionar.
Ya tengo mi script para generar el tema del podcast y lo he automatizado perfectamente
en un momentito creando este script de Node.js.
Pues nada, vamos a ver con las conclusiones.
Bravo.
O sea, solo puedo darte las gracias por llegar hasta aquí del vídeo.
Me pregunto cuánta gente verá esto.
Si has llegado hasta aquí, creo que tienes que dar un like.
Creo que estás obligado.
O sea, no lo sé.
Debería darte yo a ti el like por llegar hasta aquí después de estar viéndome 50
minutos escribiendo código.
Muchas gracias por verlo.
Deja tu comentario.
Cuéntame qué te ha parecido.
Cuéntame, dame tu feedback.
Me interesa un montón.
Por supuesto, si no estás suscrito y has llegado hasta aquí, aunque sea por curiosidad,
para ver lo que decía al final del vídeo.
Pues qué te voy a decir.
Pues que te suscribas y aquí abajo suscríbete, dale al botón de suscribir y no te pierdas
vídeos sobre desarrollo web.
No te lo pierdas.
Igual que no te puedes perder todo esto que he hecho.
50 minutos.
Madre mía, qué paciencia.
Gracias.
Gracias.
Muchas gracias.
Nos vemos en el siguiente vídeo.