Integrate 'issue-resolution' Collection with Magazine Layout

Summary

Why Care

Implementation

Changes Made

New Files Created

• site/src/content/config.ts: (Implicitly modified) The issue-resolution collection was defined here, enabling Astro to recognize and process its content.
• site/src/pages/learn-with/us.astro:
  • Serves as the index page for collections under /learn-with/.
  • Currently hardcoded to fetch and display entries from the issue-resolution collection.
  • Transforms raw collection data into a format suitable for ArticleGrid.astro, including slug generation, date normalization, and handling of array-based frontmatter fields (tags, authors, categories).
  • Implements publishing logic based on collectionPublishingDefaults and individual entry publish flags.
• site/src/layouts/MagazineIndexLayout.astro:
  • Provides the primary layout for collection index pages like /learn-with/us.
  • Receives article data and page metadata (title, description) as props.
  • Uses ArticleGrid.astro to display the articles.
  • Includes styling for a clean, magazine-like header and content area.
• site/src/components/articles/ArticleGrid.astro:
  • Renders a responsive grid of article previews.
  • Accepts an array of processed article data.
  • Maps article data to props for the PostCard--Bare.astro component.
  • Handles passthrough attributes for flexibility.
• site/src/components/articles/PostCard--Bare.astro:
  • Displays individual article previews (image, title, date, lede).
  • Constructs article links dynamically using the slug and a base path (hardcoded to issue-resolution).
  • Uses formatDate utility for consistent date presentation.
  • Debug console.log for description prop was removed.
• site/src/pages/learn-with/[collection]/[...slug].astro:
  • Dynamic route for displaying individual articles from specified collections.
  • getStaticPaths generates paths for issue-resolution entries, creating slugs from article titles.
  • Passes article content (entry.body) and metadata to the OneArticle layout, which uses OneArticleOnPage for rendering.
  • Normalizes frontmatter data (dates, authors, tags, categories) for consistent presentation.

Modified Files

• site/src/components/articles/PostCard--Bare.astro:
  • Removed a console.log statement used for debugging the description prop. This was located immediately after prop destructuring.

Technical Details

Data Flow for issue-resolution Collection:

1. Content Definition (site/src/content/config.ts): The issue-resolution collection is defined, likely with a schema specifying frontmatter fields (e.g., title, lede, date_reported, tags, authors, banner_image, publish).
2. Index Page (site/src/pages/learn-with/us.astro):
   • getCollection('issue-resolution') fetches all entries.
   • Entries are filtered based on collectionPublishingDefaults and individual publish flags.
   • entry.data is mapped to an articles array. Key transformations include:
     • slug: Generated via slugify(data.title).
     • date: Normalized from date_reported, date_created, or date_modified.
     • lede: Taken from data.lede.
     • tags, authors, categories: Normalized to arrays.
   • The articles array, pageTitle, and pageDescription are passed to MagazineIndexLayout.astro.
3. Layout for Index (site/src/layouts/MagazineIndexLayout.astro):
   • Renders a header with collectionDisplayName and description.
   • Passes the articles array to ArticleGrid.astro.
4. Grid Display (site/src/components/articles/ArticleGrid.astro):
   • Iterates through the articles array.
   • For each article, it maps fields to props for PostCard--Bare.astro:
     • slug maps to slug.
     • banner_image or portrait_image maps to imageSrc.
     • title maps to title.
     • date maps to date.
     • lede maps to description.
5. Card Display (site/src/components/articles/PostCard--Bare.astro):
   • Renders the individual article card.
   • Link href is constructed as /learn-with/issue-resolution/{slug}.
   • Displays imageSrc, title, description (from lede), and formatted date.
6. Individual Article Page (site/src/pages/learn-with/[collection]/[...slug].astro):
   • getStaticPaths generates a path for each published article in issue-resolution using slugify(entry.data.title).
   • When a user navigates to /learn-with/issue-resolution/some-article-slug, Astro serves the corresponding pre-rendered page.
   • The page component receives the entry and collection name as props.
   • entry.data is processed to prepare articleData (title, date, authors, tags, categories, banner_image, lede).
   • entry.body (raw Markdown content) and articleData are passed to the OneArticle layout, which uses OneArticleOnPage for rendering.

Styling and Layout:

• The MagazineIndexLayout.astro introduces specific styles for a header and container to achieve a magazine-like feel.
• PostCard--Bare.astro includes Tailwind CSS classes for styling the card, image, and text elements.
• ArticleGrid.astro uses Tailwind CSS for a responsive grid layout (1, 2, or 3 columns depending on screen size).

Key Functions & Logic:

• slugify (in site/src/utils/slugify.ts, assumed): Used to generate URL-friendly slugs from titles.
• formatDate (in site/src/utils/formatDate.ts, assumed): Used in PostCard--Bare.astro for consistent date display.
• normalizeToArray function (in site/src/pages/learn-with/us.astro and site/src/pages/learn-with/[collection]/[...slug].astro): Handles frontmatter fields that can be either a single string or an array of strings, ensuring they are always processed as arrays.
• Publishing Logic (in site/src/pages/learn-with/us.astro): Filters articles based on a collection-level default (collectionPublishingDefaults) and an item-level publish flag in the frontmatter. This allows selective publishing of content.

Key Code Snippets

---
import { getCollection } from 'astro:content';
import { slugify } from '../../utils/slugify'; 
import { collectionPublishingDefaults } from '../../content.config';

const collectionName = 'issue-resolution'; // Hardcoded for this page
const allEntriesUnfiltered = await getCollection(collectionName);

// Apply publishing filter
const defaultPublishBehavior = collectionPublishingDefaults[collectionName]?.publishByDefault ?? true;
const allEntries = allEntriesUnfiltered.filter((entry) => {
  const itemPublishFlag = (entry.data as Record<string, any>).publish;
  return defaultPublishBehavior ? itemPublishFlag !== false : itemPublishFlag === true;
});

const articles = allEntries.map((entry) => {
  const data = entry.data as Record<string, any>;
  const customSlug = slugify(data.title || 'Untitled Issue');
  // ... other transformations for date, tags, etc. ...
  return {
    id: entry.id,
    title: data.title || 'Untitled Issue',
    slug: customSlug,
    lede: data.lede || '',
    // ... other mapped properties ...
  };
});
---
<!-- Layout uses `articles` prop -->

---
import { getCollection, type CollectionEntry } from 'astro:content';
import { slugify } from '../../../utils/slugify';
import Layout from '@layouts/Layout.astro';
import OneArticle from '@layouts/OneArticle.astro';
import OneArticleOnPage from '@components/articles/OneArticleOnPage.astro';

export async function getStaticPaths() {
  const collectionsToProcess = ['issue-resolution'];
  const paths = [];

  for (const collectionName of collectionsToProcess) {
    const entries = await getCollection(collectionName as any);
    for (const entry of entries) {
      const titleSlug = slugify(entry.data.title || 'Untitled Issue');
      paths.push({
        params: { collection: collectionName, slug: titleSlug },
        props: { entry, collection: collectionName },
      });
    }
  }
  return paths;
}

const { entry, collection } = Astro.props;
const { Content } = await entry.render(); // To render Markdown content
// ... data preparation for articleData ...
---
<Layout title={pageTitle} description={pageDescription}>
  <OneArticle
    Component={OneArticleOnPage}
    content={entry.body} {/* Pass raw Markdown body */}
    {/* ... other props ... */}
  >
    <Content /> {/* Renders the actual article markdown */}
  </OneArticle>
</Layout>

---
import PostCardBare from './PostCard--Bare.astro';
// ... Props interface ...
const { articles, ... } = Astro.props;
---
<div class="grid ...">
  {articles.map(p => (
    <PostCardBare
      slug={p.slug}       
      imageSrc={p.banner_image || p.portrait_image || '/images/placeholders/default-banner.jpg'}
      imageAlt={p.imageAlt}
      title={p.title}
      date={p.date}
      description={p.lede} 
      {...p.passthroughAttrs}
    />
  ))}
</div>

---
import { formatDate } from "@utils/formatDate";
// ... Props interface ...
const {
  slug, imageSrc, imageAlt, title, date, description, ...
} = Astro.props;

const collectionBasePath = 'issue-resolution'; 
const href = `/learn-with/${collectionBasePath}/${slug}`;
const displayDate = date ? formatDate(typeof date === 'string' ? new Date(date) : date) : "";
---
<a href={href} class="flex flex-col group ...">
  <div>
    <figure>
      <img src={imageSrc} alt={imageAlt} ... />
    </figure>
  </div>
  <div> 
    <h2 class="font-semibold ...">{title}</h2>
    {description && <p class="text-sm opacity-80 ...">{description}</p>}
    <p class="opacity-70 text-sm ...">{displayDate}</p> 
  </div>
</a>

Integration Points

• site/src/content/config.ts: This is the central point for defining content collections. The new issue-resolution collection schema needs to be robust to ensure data integrity.
• Navigation: Links to /learn-with/us (or /learn-with/issue-resolution) might need to be added to site navigation menus or sitemaps.
• Global Styles: While components are styled locally or with Tailwind, ensure no conflicts arise with existing global CSS.
• Utility Functions: Relies on slugify.ts and formatDate.ts being present and correctly functioning in the site/src/utils/ directory.

Documentation

• The primary documentation for this integration is this changelog entry and the code comments within the new/modified files.
• The prompt content/lost-in-public/prompts/render-logic/Integrate-Collection-into-Site.md outlines the initial requirements and plan.
• The schema for issue-resolution entries should be clearly defined in site/src/content/config.ts or accompanying documentation for content creators.