Jika anda seperti saya, anda mungkin menulis di beberapa platform blog. Dalam kes saya, saya menggunakan Dev.to dan Hashnode untuk menjangkau khalayak yang berbeza. Tetapi apa yang berlaku apabila anda ingin memaparkan semua siaran anda di tapak peribadi anda? Hari ini saya akan menunjukkan kepada anda cara saya menyepadukan kedua-dua API ke dalam portfolio saya yang dibina dengan Astro.

Cabaran

Cabaran utama ialah:

1. Dapatkan mesej daripada dua API berbeza
2. Menyatukan format data
3. Susun mengikut kronologi
4. Kendalikan ralat dan pengehadan kadar
5. Penaipan selamat dengan TypeScript

Konfigurasi Awal

Pertama, kami mentakrifkan antara muka untuk menaip data kami:

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;
  };
}

Mengintegrasikan Dev.to

API Dev.to adalah REHAT dan agak mudah. Begini cara saya melaksanakannya:

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 [];
  }
}

Mengintegrasikan Hashnode

Hashnode menggunakan GraphQL, yang memerlukan pendekatan yang sedikit berbeza:

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 [];
  }
}

Menggabungkan Keputusan

Keajaiban berlaku apabila menggabungkan dan memesan siaran:

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());

Pengendalian Ralat dan Had Kadar

Untuk mengendalikan pengehadan kadar dan ralat, saya melaksanakan strategi ini:

Cache sisi pelanggan:

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;
}

Cuba semula dengan mundur eksponen:

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));
    }
  }
}

Diterbitkan dalam Astro

Akhir sekali, kami memaparkan siaran dalam komponen Astro kami:

---
const allBlogPosts = tunggu getAllPosts();
---

<div>



<p>Penyepaduan ini membolehkan kami:</p>

• Kekalkan satu sumber kebenaran untuk siaran kami
• Tunjukkan kandungan daripada berbilang platform
• Kendalikan ralat dengan elegan
• Kekalkan kod yang ditaip dan selamat

Kod penuh tersedia pada GitHub saya.

Adakah anda menyepadukan platform blog lain ke dalam tapak anda? Kongsi pengalaman anda dalam komen! ?

webdev #astro #typescript #api

Atas ialah kandungan terperinci Mengintegrasikan Berbilang API Blog ke dalam Tapak Astro: Dev.to dan Hashnode. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!