Conditional Component Rendering and Portfolio Layout Improvements

Summary

Restructured client portfolio rendering to display portfolio narrative content and portfolio card grid on the same page, creating a unified portfolio presentation layout. Additionally, implemented conditional component rendering system for Table of Contents and Info Sidebar components, improved portfolio layout mobile responsiveness, fixed undefined CSS variables, and cleaned up content collection configurations.

Why Care

These changes enhance the flexibility of the layout system by allowing components to be conditionally rendered based on context, improve mobile user experience by ensuring proper content ordering, and resolve CSS variable issues that could cause styling problems. The portfolio system now has better data handling and cleaner architecture.

Implementation

Changes Made

Component Architecture Enhancements

  • src/components/articles/OneArticleOnPage.astro: Added conditional rendering parameters
    • Added includeToC?: boolean parameter (default: true) for Table of Contents control
    • Added includeInfoSidebar?: boolean parameter (default: true) for Info Sidebar control
    • Updated component destructuring to handle new parameters
    • Implemented conditional rendering logic for both components

Layout System Improvements

  • src/layouts/PortfolioListLayout.astro: Mobile layout and CSS variable fixes
    • Created an improved PortfolioListLayout component with conditional rendering that made a two column layout for both narrative and card grid content.
    • Fixed mobile layout ordering: narrative content now renders before portfolio gallery
    • Added fallback values for border-radius and box-shadow properties
  • src/layouts/OneArticle.astro: Parameter propagation
    • Updated to pass includeToC and includeInfoSidebar parameters to OneArticleOnPage component
  • src/layouts/ClientPortalLayout.astro: Portfolio data handling improvements
    • Enhanced portfolio data structure with explicit property mapping
    • Added comprehensive debug logging for portfolio data troubleshooting
    • Improved data consistency and error handling

Portfolio System Enhancements

  • src/components/tool-components/PortfolioCard.astro: Site name handling
    • Removed redundant toProperCase wrapper from getEffectiveSiteName call
    • Cleaned up debug logging comments
  • src/pages/client/[client]/portfolio/index.astro: Conditional rendering integration
    • Added includeToC={false} and includeInfoSidebar={false} to PortfolioListLayout
    • Enhanced portfolio data structure with proper property mapping

Content Collection Configuration

  • src/content.config.ts: Collection cleanup
    • Removed commented-out clientProjectsCollection definition
    • Added 'client-content' collection mapping to clientRecommendationsCollection
    • Streamlined collection exports

Routing and Path Management

  • src/pages/[...path].astro: Parameter forwarding
    • Updated to pass conditional rendering parameters through layout chain
  • src/pages/client/[client]/thread/[magazine].astro: Collection reference cleanup
    • Removed references to deprecated 'client-projects' collection
    • Updated collection mapping to only include active collections
    • Cleaned up static path generation logic

Utility Function Improvements

  • src/utils/toolUtils.ts: Text formatting enhancements
    • Updated getEffectiveSiteName to use toProperCase internally for filename handling
    • Added import for toProperCase from slugify utilities
    • Improved filename processing with proper case formatting

Technical Details

Conditional Rendering Pattern

typescript 
// Component interface
interface Props {
  includeToC?: boolean; // Default: true
  includeInfoSidebar?: boolean; // Default: true
  // ... other props
}

// Implementation
const { includeToC = true, includeInfoSidebar = true } = Astro.props;

// Conditional rendering
{includeToC && <TableOfContents node={tocNode?.data.map} />}
{includeInfoSidebar && hasArticleInfo && <InfoSidebar ... />}

CSS Variable Fixes

css 
/* Before */
background: var(--clr-surface);
border: 1px solid var(--clr-border);

/* After */
background: var(--clr-secondary-bg, #f8f9fa);
border: 1px solid var(--clr-lossless-ui-btn-border, #ccc);

Mobile Layout Ordering

css 
@media (max-width: 968px) {
  .portfolio-narrative { order: 0; }
  .portfolio-sidebar { order: 1; }
}

Integration Points

Layout Chain Parameter Flow

  1. PortfolioListLayout.astro → receives includeToC and includeInfoSidebar
  2. OneArticle.astro → forwards parameters to OneArticleOnPage
  3. OneArticleOnPage.astro → implements conditional rendering logic

Content Collection Dependencies

  • Removed dependency on 'client-projects' collection across routing files
  • Maintained compatibility with existing 'client-recommendations' and 'client-portfolios'
  • Added fallback collection mapping for 'client-content'

CSS Variable Dependencies

  • Updated to use consistent --clr-lossless-* variable naming convention
  • Added fallback values to prevent styling failures
  • Maintained visual consistency across themes

Documentation

Parameter Usage Examples

astro 
<!-- Disable both ToC and sidebar -->
<PortfolioListLayout includeToC={false} includeInfoSidebar={false} />

<!-- Enable ToC only -->
<PortfolioListLayout includeToC={true} includeInfoSidebar={false} />

CSS Variable Reference

  • --clr-secondary-bg: Secondary background color with fallback
  • --clr-lossless-ui-btn-border: UI border color for components
  • --clr-primary-bg: Primary background for scrollbar elements
  • --clr-lossless-accent--brightest: Accent color for interactive elements

Mobile Breakpoint

  • Mobile layout changes activate at max-width: 968px
  • Content ordering: narrative content first, portfolio gallery second