Comprehensive comparison for technology in applications

import React from 'react';
import { graphql, Link } from 'gatsby';
import { GatsbyImage, getImage } from 'gatsby-plugin-image';

// Blog listing page component demonstrating Gatsby best practices
const BlogPage = ({ data, pageContext }) => {
  const posts = data.allMarkdownRemark.edges;
  const { currentPage, numPages } = pageContext;
  const isFirst = currentPage === 1;
  const isLast = currentPage === numPages;
  const prevPage = currentPage - 1 === 1 ? '/blog' : `/blog/${currentPage - 1}`;
  const nextPage = `/blog/${currentPage + 1}`;

  // Handle empty state
  if (!posts || posts.length === 0) {
    return (
      <div className="container">
        <h1>Blog</h1>
        <p>No blog posts found. Check back soon!</p>
      </div>
    );
  }

  return (
    <div className="container">
      <h1>Blog Posts</h1>
      <div className="blog-grid">
        {posts.map(({ node }) => {
          const title = node.frontmatter.title || node.fields.slug;
          const image = getImage(node.frontmatter.featuredImage);

          return (
            <article key={node.fields.slug} className="blog-card">
              {image && (
                <Link to={node.fields.slug}>
                  <GatsbyImage
                    image={image}
                    alt={node.frontmatter.imageAlt || title}
                    className="blog-image"
                  />
                </Link>
              )}
              <div className="blog-content">
                <h2>
                  <Link to={node.fields.slug}>{title}</Link>
                </h2>
                <small className="blog-meta">
                  {node.frontmatter.date} • {node.timeToRead} min read
                </small>
                <p>{node.frontmatter.description || node.excerpt}</p>
                <Link to={node.fields.slug} className="read-more">
                  Read more →
                </Link>
              </div>
            </article>
          );
        })}
      </div>

      {/* Pagination controls */}
      {numPages > 1 && (
        <nav className="pagination">
          {!isFirst && (
            <Link to={prevPage} rel="prev" className="pagination-link">
              ← Previous Page
            </Link>
          )}
          <span className="pagination-info">
            Page {currentPage} of {numPages}
          </span>
          {!isLast && (
            <Link to={nextPage} rel="next" className="pagination-link">
              Next Page →
            </Link>
          )}
        </nav>
      )}
    </div>
  );
};

export default BlogPage;

// GraphQL query with proper filtering and sorting
export const pageQuery = graphql`
  query BlogListQuery($skip: Int!, $limit: Int!) {
    allMarkdownRemark(
      sort: { frontmatter: { date: DESC } }
      filter: { frontmatter: { published: { ne: false } } }
      limit: $limit
      skip: $skip
    ) {
      edges {
        node {
          excerpt(pruneLength: 160)
          fields {
            slug
          }
          frontmatter {
            date(formatString: "MMMM DD, YYYY")
            title
            description
            imageAlt
            featuredImage {
              childImageSharp {
                gatsbyImageData(
                  width: 800
                  placeholder: BLURRED
                  formats: [AUTO, WEBP, AVIF]
                )
              }
            }
          }
          timeToRead
        }
      }
    }
  }
`;