Si eres como yo, probablemente escribas en varias plataformas de blogging. En mi caso, uso tanto Dev.to como Hashnode para llegar a diferentes audiencias. Pero, ¿qué pasa cuando quieres mostrar todos tus posts en tu sitio personal? Hoy te mostraré cómo integré ambas APIs en mi portfolio construido con Astro.
El Desafío
El principal reto era:
- Obtener posts de dos APIs diferentes
- Unificar el formato de los datos
- Ordenarlos cronológicamente
- Manejar errores y rate limiting
- Tipado seguro con TypeScript
Configuración Inicial
Primero, definimos las interfaces para tipar nuestros datos:
interface BlogPost {
title: string;
brief: string;
slug: string;
dateAdded: string;
rawDate: string;
coverImage: string;
url: string;
source: string;
}
interface HashnodeEdge {
node: {
title: string;
brief: string;
slug: string;
dateAdded: string;
coverImage?: {
url: string;
};
url: string;
};
}
Integrando Dev.to
La API de Dev.to es RESTful y bastante directa. Aquí está cómo la implementé:
async function getDevToPosts() {
try {
const params = new URLSearchParams({
username: 'tuUsuario',
per_page: '20',
state: 'all',
sort: 'published_at',
order: 'desc'
});
const headers = {
'Accept': 'application/vnd.forem.api-v1+json'
};
// Agregar API key si está disponible
if (import.meta.env.DEV_TO_API_KEY) {
headers['api-key'] = import.meta.env.DEV_TO_API_KEY;
}
const response = await fetch(`https://dev.to/api/articles?${params}`, { headers });
if (!response.ok) {
throw new Error(`HTTP ${response.status}`);
}
const posts = await response.json();
return posts.map((post: any) => ({
title: post.title,
brief: post.description,
slug: post.slug,
dateAdded: formatDate(post.published_timestamp),
rawDate: post.published_timestamp,
coverImage: post.cover_image || '/images/default-post.png',
url: post.url,
source: 'devto'
}));
} catch (error) {
console.error('Error al obtener posts de Dev.to:', error);
return [];
}
}
Integrando Hashnode
Hashnode usa GraphQL, lo que requiere un enfoque ligeramente diferente:
async function getHashnodePosts() {
try {
const query = `
query {
publication(host: "tuBlog.hashnode.dev") {
posts(first: 20) {
edges {
node {
title
brief
slug
dateAdded: publishedAt
coverImage {
url
}
url
}
}
}
}
}
`;
const response = await fetch('https://gql.hashnode.com', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ query })
});
const { data } = await response.json();
return data.publication.posts.edges.map((edge: HashnodeEdge) => ({
title: edge.node.title,
brief: edge.node.brief,
slug: edge.node.slug,
dateAdded: formatDate(edge.node.dateAdded),
rawDate: edge.node.dateAdded,
coverImage: edge.node.coverImage?.url || '/images/default-post.png',
url: edge.node.url,
source: 'hashnode'
}));
} catch (error) {
console.error('Error al obtener posts de Hashnode:', error);
return [];
}
}
Combinando los Resultados
La magia ocurre al combinar y ordenar los posts:
const hashnodePosts = await getHashnodePosts();
const devtoPosts = await getDevToPosts();
const allBlogPosts = [...hashnodePosts, ...devtoPosts]
.sort((a, b) => new Date(b.rawDate).getTime() - new Date(a.rawDate).getTime());
Manejo de Errores y Rate Limiting
Para manejar el rate limiting y errores, implementé estas estrategias:
Caché del lado del cliente:
const CACHE_DURATION = 5 * 60 * 1000; // 5 minutos
let postsCache = {
data: null,
timestamp: 0
};
async function getAllPosts() {
const now = Date.now();
if (postsCache.data && (now - postsCache.timestamp) < CACHE_DURATION) {
return postsCache.data;
}
// Obtener y combinar posts...
postsCache = {
data: allBlogPosts,
timestamp: now
};
return allBlogPosts;
}
Reintentos con backoff exponencial:
async function fetchWithRetry(url: string, options: any, retries = 3) {
for (let i = 0; i < retries; i++) {
try {
const response = await fetch(url, options);
if (response.status === 429) { // Rate limit
const retryAfter = response.headers.get('Retry-After') || '60';
await new Promise(resolve => setTimeout(resolve, parseInt(retryAfter) * 1000));
continue;
}
return response;
} catch (error) {
if (i === retries - 1) throw error;
await new Promise(resolve => setTimeout(resolve, Math.pow(2, i) * 1000));
}
}
}
Renderizado en Astro
Finalmente, renderizamos los posts en nuestro componente Astro:
---
const allBlogPosts = await getAllPosts();
---
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
{allBlogPosts.map((post) => (
<article class="card">
<img src={post.coverImage} alt={post.title} />
<div class="p-4">
<span class={`badge ${post.source}`}>
{post.source === 'devto' ? 'Dev.to' : 'Hashnode'}
</span>
<h2>{post.title}</h2>
<p>{post.brief}</p>
<a href={post.url}>Leer más</a>
</div>
</article>
))}
</div>
Esta integración nos permite:
- Mantener una única fuente de verdad para nuestros posts
- Mostrar contenido de múltiples plataformas
- Manejar errores de manera elegante
- Mantener un código tipado y seguro
El código completo está disponible en mi GitHub.
¿Has integrado otras plataformas de blogging en tu sitio? ¡Comparte tus experiencias en los comentarios! 👇
Top comments (0)