Astroから記事一覧のJSONを出力する Astroを使ってオウンドメディアを作る-5

import { getCollection } from "astro:content";

export async function GET() {
  const allPosts = await getCollection("techblog");

  // ポストを pubDate でソートする
  allPosts.sort((a, b) => new Date(b.data.pubDate).getTime() - new Date(a.data.pubDate).getTime());

  const allPostsFilter = allPosts.map((post) => {
    return {
      title: post.data.title,
      description: post.data.description,
      slug: post.slug,
      pubDate: post.data.pubDate,
      ogImage: post.data.ogImage,
      author: post.data.author,
      tags: post.data.tags,
    };
  });

  return new Response(JSON.stringify(allPostsFilter), {
    headers: {
      'Content-Type': 'application/json',
    },
  });
}

[{
    "title": "Astroから記事一覧のjsonを出力する Astroを使ってオウンドメディアを作る-5",
    "description": "Astroから全記事のJSONデータを作成し、JSONから記事一覧を出力する方法を解説します。",
    "slug": "net-solution/2024/08/astro-blog-5",
    "pubDate": "2024-08-23T00:00:00.000Z",
    "ogImage": "ogp-astro-blog-5.png",
    "author": "山下",
    "tags": [
        "Astro",
        "オウンドメディア",
        "JSON"
    ]
}]

<div
  id="outputLatest"
  class="jsInclude"
  data-href="/techblog/api/all-posts.json"
  data-limit="4"
  data-type="2col">
</div>

document.addEventListener('astro:page-load', () => {
  const includeElements = document.querySelectorAll('.jsInclude');
  includeElements.forEach(element => {
    const url = element.getAttribute('data-href');
    const latest = element.getAttribute('data-limit') ? element.getAttribute('data-limit') : 12;
    const type = element.getAttribute('data-type') ? element.getAttribute('data-type') : null;
    const pathname = document.location.pathname;
    fetch(url).then(response => response.json()).then(json => {
      let html = '<div class="article-list">';
      if (type == "2col") {
        html = '<div class="article-list article-list__2column">';
      }
      const filteredItems = json.filter(item => !pathname.includes(item.slug));
      filteredItems.slice(0, latest).map(item => {
        html += createArticle(item);
        return;
      });
      html += '</div>';

      element.innerHTML = html;
    }).catch(error => {
      console.error('Fetch error:', error);
    });
  });
});

const createArticle = (item) => {
  let html = "";
  const author = item.slug.includes("net-solution")
    ? `ネットソリューション ${item.author}`
    : item.slug.includes("image-solution")
      ? `イメージソリューション ${item.author}`
      : item.slug.includes("contents-solution")
        ? `コンテンツソリューション ${item.author}`
        : item.author;
  const date = new Date(item.pubDate);
  const formattedDate = `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`;
  let tags = "";
  if (item.tags.length) {
    tags += `<div class="article-card-tags">`;
    item.tags.map(tag => {
      tags += `<span class="tag">${tag}</span>`
    });
    tags += `</div>`;
  }
  html += `<article class="article-card"> <div class="article-card-image"> <img src="/techblog/assets/images/ogp/${item.ogImage}" alt=""> </div> <h2 class="article-card-title"> <a href="/techblog/${item.slug}/">${item.title}</a> </h2> <p class="article-card-desc">${item.description}</p> ${tags} <div class="article-card-info"> <span class="category"><span class="material-icons">edit</span>${author}</span> <time datetime="${date}"><span class="material-icons">calendar_month</span>${formattedDate}</time> </div> </article>`;
  return html;
}