Saltar a menciones web con NextJS (o no)

1. Aquí está nuestro plan.
2. Paso 1: declarar un punto final para recibir menciones web
3. Paso 2: Procese las interacciones de las redes sociales en menciones web
4. Paso 3: incluir esas menciones en un sitio web/aplicación
5. Paso 4: Manejar las menciones salientes
6. terminando

Webmention es una recomendación del W3C publicada por última vez el 12 de enero de 2017. ¿Y qué es exactamente una Webmention? Se describe como…

[…] una forma sencilla de notificar cualquier URL cuando la mencionas en tu sitio. Desde la perspectiva del receptor, es una forma de solicitar notificaciones cuando otros sitios lo mencionan.

En pocas palabras, es una forma de hacerle saber a un sitio web que alguien lo ha mencionado en alguna parte, de alguna manera. La especificación Webmention también lo describe como una forma para que un sitio web haga saber a otros que los citó. Básicamente, esto se reduce a que su sitio web sea un canal de redes sociales activo, que canalice la comunicación de otros canales (por ejemplo, Twitter, Instagram, Mastodon, Facebook, etc.).

¿Cómo implementa un sitio las menciones web? En algunos casos, como WordPress, es tan trivial como instalar un par de complementos. Puede que otros casos no sean tan sencillos, pero sigue siendo bastante sencillo. De hecho, ¡hagámoslo ahora!

Aquí está nuestro plan.

1. Declarar un punto final para recibir menciones web
2. Procesar interacciones de redes sociales en menciones web.
3. Obtenga esas menciones en un sitio web/aplicación
4. Establecer las menciones web destacadas

Afortunadamente para nosotros, existen servicios que hacen las cosas extremadamente simples. Bueno, excepto ese tercer punto, pero bueno, no es tan malo y explicaré cómo lo hice en mi propio sitio atila.io.

Mi sitio es un blog del lado del servidor pre-renderizado y escrito con NextJS. He optado por realizar las solicitudes de menciones web en el lado del cliente; por lo tanto, funcionará fácilmente en cualquier otra aplicación React y con muy poca refactorización en cualquier otra aplicación JavaScript.

Paso 1: declarar un punto final para recibir menciones web

Para tener un punto final que podamos usar para aceptar Webmention, necesitamos escribir el script y agregarlo a nuestro propio servidor, o usar un servicio como Webmention.io (que es lo que hice).

Webmention.io es gratuito y solo necesita confirmar la propiedad del dominio que registra. La verificación se puede realizar de varias maneras. Lo hice agregando un rel="me"atributo a un enlace en mi sitio web a mis perfiles de redes sociales. Solo se necesita uno de esos enlaces, pero sigue adelante y lo hice para todas mis cuentas.

a href="https://twitter.com/atilafassina" target="_blank" rel="me noopener noreferrer" @AtilaFassina/a

Al verificar de esta manera, también debemos asegurarnos de que haya un enlace que apunte a nuestro sitio web en ese perfil de Twitter. Una vez que hayamos hecho eso, podemos regresar a Webmention.io y agregar la URL.

¡Esto nos da un punto final para aceptar menciones web! Todo lo que tenemos que hacer ahora es conectarlo como linketiquetas en headnuestras páginas web para recopilar esas menciones.

head link rel="webmention" href="https://webmention.io/{user}/webmention" / link rel="pingback" href="https://webmention.io/{user}/xmlrpc" / !-- ... --/head

Recuerde reemplazarlo {user}con su nombre de usuario de Webmention.io.

Paso 2: Procese las interacciones de las redes sociales en menciones web

¡Estamos listos para que las Webmentions comiencen a fluir! Pero espera, tenemos un pequeño problema: en realidad nadie los usa. Quiero decir, yo sí, tú también, Max Böck, Swyx y… eso es todo. Entonces, ahora debemos comenzar a convertir todas esas jugosas interacciones de las redes sociales en menciones web.

¿Y adivina qué? Hay un increíble servicio gratuito para ello. Sin embargo, una advertencia: será mejor que empieces a amar IndieWeb porque estamos a punto de involucrarnos por completo.

Bridgy conecta todo nuestro contenido indicado y los convierte en menciones web adecuadas para que podamos consumirlo. Con un SSO, podemos alinear cada uno de nuestros perfiles, uno por uno.

Paso 3: incluir esas menciones en un sitio web/aplicación

Ahora es nuestro turno de levantar algo de peso. Claro, los servicios de terceros pueden manejar todos nuestros datos, pero aún depende de nosotros usarlos y mostrarlos.

Vamos a dividir esto en algunas etapas. Primero, obtendremos la cantidad de menciones web. A partir de ahí, buscaremos las menciones mismas. Luego conectaremos esos datos a NextJS (pero no es necesario) y los mostraremos.

Obtener el número de menciones

type TMentionsCountResponse = { count: number type: { like: number mention: number reply: number repost: number }}

Este es un ejemplo de un objeto que recuperamos del punto final de Webmention.io. Formateé un poco la respuesta para adaptarla mejor a nuestras necesidades. Explicaré cómo lo hice en un momento, pero aquí está el objeto que obtendremos:

type TMentionsCount = { mentions: number likes: number total: number}

El punto final está ubicado en:

https://webmention.io/api/count.json?target=${post_url}

La solicitud no fracasará sin él, pero los datos tampoco llegarán. Tanto Max Böck como Swyx combinan me gusta con publicaciones y menciones con respuestas. En Twitter, son análogos.

const getMentionsCount = async (postURL: string): TMentionsCount = { const resp = await fetch( `https://webmention.io/api/count.json?target=${postURL}/` ) const { type, count } = await resp.json()
 return { likes: type.like + type.repost, mentions: type.mention + type.reply, total: count, }}

Obtener las menciones reales

Antes de pasar a la respuesta, tenga en cuenta que la respuesta está paginada, donde el punto final acepta tres parámetros en la consulta:

• page: la página que se solicita
• per-page: el número de menciones que se mostrarán en la página
• target: la URL donde se obtienen las menciones web

Una vez que alcancemos https://webmention.io/api/mentionsy pasemos estos parámetros, la respuesta exitosa será un objeto con una sola clave linksque es una arrayde las menciones que coinciden con el tipo a continuación:

type TMention = { source: string verified: boolean verified_date: string // date string id: number private: boolean data: { author: { name: string url: string photo: string // url, hosted in webmention.io } url: string name: string content: string // encoded HTML published: string // date string published_ts: number // ms } activity: { type: 'link' | 'reply' | 'repost' | 'like' sentence: string // pure text, shortened sentence_html: string // encoded html } target: string}

Los datos anteriores son más que suficientes para mostrar una lista de secciones similares a comentarios en nuestro sitio. Así es como se ve la solicitud de recuperación en TypeScript:

const getMentions = async ( page: string, postsPerPage: number, postURL: string): { links: TWebMention[] } = { const resp = await fetch( `https://webmention.io/api/mentions?page=${page}per-page=${postsPerPage}target=${postURL}` ) const list = await resp.json() return list.links}

Conéctelo todo en NextJS

Vamos a trabajar en NextJS por un momento. Todo está bien si no estás usando NextJS o incluso si no tienes una aplicación web. Ya tenemos todos los datos, por lo que aquellos de ustedes que no trabajan en NextJS pueden simplemente avanzar al Paso 4. El resto de nosotros nos reuniremos con usted allí. Calefactor electrico

A partir de la versión 9.3.0, NextJS tiene tres métodos diferentes para recuperar datos:

1. getStaticProps: recuperar datos sobre el tiempo de construcción
2. getStaticPaths: especifica rutas dinámicas para prerenderizar según los datos obtenidos
3. getServerSideProps: recuperar datos en cada solicitud

Ahora es el momento de decidir en qué momento realizaremos la primera solicitud de obtención de menciones. Podemos renderizar previamente los datos en el servidor con el primer lote de menciones, o podemos hacer que todo esté del lado del cliente. Opté por ir del lado del cliente.

Si también va al lado del cliente, le recomiendo usar SWR. Es un gancho personalizado creado por el equipo de Vercel que proporciona buenos estados de almacenamiento en caché, error y carga; e incluso admite archivos React.Suspense.

Mostrar el recuento de menciones web

Muchos blogs muestran la cantidad de comentarios de una publicación en dos lugares: en la parte superior de una publicación de blog (como ésta) y en la parte inferior, justo encima de una lista de comentarios. Sigamos el mismo patrón para las menciones web.

En primer lugar, creemos un componente para el recuento:

const MentionsCounter = ({ postUrl }) = { const { t } = useTranslation() // Setting a default value for `data` because I don't want a loading state // otherwise you could set: if(!data) return divloading.../div const { data = {}, error } = useSWR(postUrl, getMentionsCount)
 if (error) { return ErrorMessage{t('common:errorWebmentions')}/ErrorMessage }
 // The default values cover the loading state const { likes = '-', mentions = '-' } = data
 return ( MentionCounter li Heart / CounterData{Number.isNaN(likes) ? 0 : likes}/CounterData /li li Comment /{' '} CounterData{Number.isNaN(mentions) ? 0 : mentions}/CounterData /li /MentionCounter )}

Gracias a SWR, aunque utilizamos dos instancias del WebmentionsCountercomponente , solo se realiza una solicitud y ambos se benefician del mismo caché.

No dudes en echar un vistazo a mi código fuente para ver qué está pasando:

• WebmentionsCounter(el componente)
• getMentionsCount(la función auxiliar)
• Post layout component(donde estamos usando el componente)

Mostrar las menciones

Ahora que hemos colocado el componente, ¡es hora de hacer fluir todo ese jugo social!

Al momento de escribir este artículo, useSWRpagesno está documentado. Agregue a eso el hecho de que el punto final webmention.io no ofrece información de recopilación en una respuesta (es decir, sin desplazamiento o número total de páginas), no pude encontrar una manera de usar SWR aquí.

Entonces, mi implementación actual usa un estado para mantener almacenada la página actual, otro estado para manejar las menciones arrayy useEffectmanejar la solicitud. El botón “Cargar más” se desactiva una vez que la última solicitud devuelve una matriz vacía.

const Webmentions = ({ postUrl }) = { const { t } = useTranslation() const [page, setPage] = useState(0) const [mentions, addMentions] = useState([])
 useEffect(() = { const fetchMentions = async () = { const olderMentions = await getMentions(page, 50, postUrl) addMentions((mentions) = [...mentions, ...olderMentions]) } fetchMentions() }, [page])
 return ( {mentions.map((mention, index) = ( Mention key={mention.data.author.name + index} AuthorAvatar src={mention.data.author.photo} lazy / MentionContent MentionText data={mention.data} activity={mention.activity.type} / /MentionContent /Mention ))} /MentionList {mentions.length 0 ( MoreButton type="button" onClick={() = { setPage(page + 1) }} {t('common:more')} /MoreButton )} / )}

El código está simplificado para permitir centrarse en el tema de este artículo. Nuevamente, siéntete libre de echar un vistazo a la implementación completa:

• Webmentioncomponente
• getMentionsayudante
• Componente de diseño de publicaciones

Paso 4: Manejar las menciones salientes

Gracias a Remy Sharp, manejar menciones salientes de un sitio web a otro es bastante fácil y proporciona una opción para cada caso de uso o preferencia posible.

La forma más rápida y sencilla es dirigirse a Webmention.app, obtener un token API y configurar un enlace web. Ahora, si tiene una fuente RSS, lo mismo es igual de fácil con un subprograma IFTT o incluso con un gancho de implementación.

Si prefiere evitar el uso de otro servicio de terceros para esta función (lo cual entiendo totalmente), Remy tiene un paquete CLI de código abierto llamado wm que se puede ejecutar como un script posterior a la compilación.

Pero eso no es suficiente para manejar las menciones salientes. Para que nuestras menciones incluyan más que simplemente la URL de origen, debemos agregar microformatos a nuestra información. Los microformatos son clave porque es una forma estandarizada para que los sitios distribuyan contenido de una manera que los sitios habilitados para Webmention puedan consumir.

En su forma más básica, los microformatos son un tipo de notaciones basadas en clases en marcado que proporcionan un significado semántico adicional a cada pieza. En el caso de una entrada de blog, utilizaremos dos tipos de microformatos:

• h-entry: la entrada de la publicación
• h-card: el autor de la publicación

La mayor parte de la información requerida h-entrygeneralmente se encuentra en el encabezado de la página, por lo que el componente del encabezado puede terminar luciendo así:

header !-- the post date and time -- time datetime="2020-04-22T00:00:00.000Z" 2020-04-22 /time !-- the post title -- h1 Webmentions with NextJS /h1/header

Sí, eso es. Si está escribiendo en JSX, recuerde reemplazar classcon className, es decir, datetimecamelCase ( dateTime), y puede usar la nueva Date('2020-04-22').toISOString()función.

Es bastante similar para h-card. En la mayoría de los casos (como el mío), la información del autor se encuentra debajo del artículo. Así es como se ve el pie de página de mi página:

footer !-- the author name -- spanAtila Fassina/span !-- the authot image-- img alt="Author’s photograph: Atila Fassina" src="/images/internal-avatar.jpg" lazy //footer

Ahora, cada vez que enviemos una mención destacada desde esta publicación de blog, se mostrará la información completa a quien la reciba.

terminando

Espero que esta publicación te haya ayudado a conocer más sobre las menciones web (o incluso sobre IndieWeb en su conjunto) y tal vez incluso te haya ayudado a agregar esta función a tu propio sitio web o aplicación. Si es así, considere compartir esta publicación en su red. ¡Estaré súper agradecido!

Referencias

• Uso de menciones web en sitios estáticos (Max Böck)
• Menciones web del lado del cliente (Swyx)
• Enviar menciones web salientes (Remy Sharp)
• Tu primera mención web (Aaron Parecki)

Otras lecturas

• Mención web sobre la especificación W3C (recomendación)
• mención web.io
• Mención web.App
• CLI de WebMentions salientes
• puente
• Microformatos.org
• IndieWeb

Tal vez te puede interesar:

1. La innovación no puede mantener la Web rápida
2. Rendimiento web ultrarrápido
3. Tabla de contenidos fijos con estados activos de desplazamiento
4. “cambiar tamaño: ninguno;” en áreas de texto es una mala experiencia de usuario

Saltar a menciones web con NextJS (o no)

Aquí está nuestro plan.Paso 1: declarar un punto final para recibir menciones webPaso 2: Procese las interacciones de las redes sociales en menciones webPaso

programar

es

https://aprendeprogramando.es/static/images/programar-saltar-a-menciones-web-con-nextjs-o-no-1541-0.jpg

2024-09-30