CategorySummary Component

A visual summary component that displays aggregated tool information on category landing pages, including total costs, tool counts, and upcoming renewals.

What It Does

The CategorySummary component automatically extracts metadata from all tools in a category and displays:

• Summary statistics - Total tools, monthly/annual costs
• Tool list - All tools with individual costs and links
• Upcoming renewals - Next 5 renewal dates
• Account types - Access permissions for each tool
• Quick access links - Direct links to tool dashboards

Features

• Automatic aggregation - Sums costs across all tools in category
• Cost visibility - Clear display of monthly and annual totals
• Renewal tracking - Shows upcoming renewals in chronological order
• Responsive tables - Mobile-friendly table layouts
• Color-coded categories - Category header uses the tool category color
• Clickable tool links - Direct navigation to tool documentation
• Access link integration - External links to tool dashboards

Usage

The component is automatically included in all generated category index pages by the sync-tools.cjs script. You don't need to manually add it.

In Category Index Pages

The sync script generates docusaurus/docs/tools/<category>/index.md files with the component automatically injected:

import CategorySummary from '@site/src/theme/MDXComponents/CategorySummary';

export const websiteTools = [
  {
    name: "Webflow",
    slug: "tool-webflow",
    monthlyCost: "19",
    monthlyCurrency: "GBP",
    annualCost: "0",
    annualCurrency: "GBP",
    renewalDate: "2026-03-15",
    accountType: ["INTERNAL", "CLIENT_ACCESS"],
    accessLink: "https://webflow.com/dashboard"
  },
  // ... more tools
];

<CategorySummary 
  category="Website"
  tools={websiteTools}
  categoryColor="#E3F2FD"
/>

Manual Usage (Custom Pages)

If you need to use the component manually:

import CategorySummary from '@site/src/theme/MDXComponents/CategorySummary';

export const myTools = [
  {
    name: "Tool Name",
    slug: "tool-slug",
    monthlyCost: "25",
    monthlyCurrency: "GBP",
    annualCost: "0",
    annualCurrency: "GBP",
    renewalDate: "2026-06-01",
    accountType: ["INTERNAL"],
    accessLink: "https://tool.com"
  }
];

<CategorySummary 
  category="My Category"
  tools={myTools}
  categoryColor="#E3F2FD"
/>

Component Props

Prop	Type	Required	Description
category	string	Yes	Category name (e.g., "Website", "Self-Hosting")
tools	array	Yes	Array of tool objects with metadata
categoryColor	string	No	Hex color for category header (default: light grey)

Tool Object Structure

Each tool in the tools array should have:

{
  name: string;           // Tool display name
  slug: string;           // Tool page slug (for linking)
  monthlyCost?: string;   // Monthly cost amount
  monthlyCurrency?: string; // Currency code (GBP, USD, etc.)
  annualCost?: string;    // Annual cost amount
  annualCurrency?: string; // Currency code
  renewalDate?: string;   // Renewal date (YYYY-MM-DD)
  accountType?: string[]; // Array of account types
  accessLink?: string;    // Dashboard/login URL
}

Display Sections

1. Summary Card

Displays aggregated statistics:

• Total Tools - Count of tools in category
• Monthly Cost - Sum of all monthly costs
• Annual Cost - Sum of all annual costs (or calculated from monthly)
• Category Color - Visual category identifier

2. Tools Table

Lists all tools with:

• Tool Name - Clickable link to tool documentation
• Monthly Cost - Individual tool monthly cost
• Annual Cost - Individual tool annual cost
• Account Type - Access permissions
• Access Link - External link to tool dashboard

3. Upcoming Renewals

Shows next 5 renewals in order:

• Tool Name - Which tool is renewing
• Renewal Date - When it renews (formatted as "15 March 2026")
• Cost - Annual renewal cost

If no renewals are set, displays "No upcoming renewals in this category"

Cost Calculation Logic

The component intelligently handles costs:

1. Monthly costs are always displayed as-is
2. Annual costs:
   • If set and > 0, displayed as-is
   • If 0 or not set, calculated as monthly * 12
   • If both monthly and annual are 0, shows "£0.00"
3. Totals aggregate across all tools in category
4. Currency conversion is not performed (all displayed in original currency)

Date Formatting

• Input: YYYY-MM-DD (e.g., "2026-03-15")
• Output: "15 March 2026"
• No date: "Not set"
• Renewals sorted chronologically (earliest first)

Account Type Display

Account types are formatted from enum to readable:

• INTERNAL → "Internal"
• CLIENT_ACCESS → "Client Access"
• AGENCY_WIDE → "Agency Wide"
• Multiple types separated by ", "

Responsive Behavior

Desktop (>768px)

• Full table with all columns
• Three-column summary card layout
• Wide spacing for readability

Tablet (768px)

• Horizontal scrolling tables
• Two-column summary card
• Optimised column widths

Mobile (<768px)

• Stacked summary cards
• Simplified table view (hides less critical columns)
• Vertical spacing prioritised

File Structure

docusaurus/src/theme/MDXComponents/CategorySummary/
├── index.js           # Main component
└── styles.module.css  # CSS module styling

Styling Customization

To customize the component styling, edit:

docusaurus/src/theme/MDXComponents/CategorySummary/styles.module.css

CSS module classes:

• .summaryContainer - Main wrapper
• .categoryHeader - Category title with color
• .summaryCard - Statistics card
• .toolsTable - Tools listing table
• .renewalsSection - Upcoming renewals list

Example Output

Summary Card

Website Tools (Blue background)

Total Tools: 8 Monthly Cost: £36.00 Annual Cost: £432.00

Tools Table

Tool	Monthly	Annual	Account Type	Access
Webflow	£19.00	£228.00	Internal, Client Access	[Link →]
GTM	£0.00	£0.00	Internal	[Link →]
...	...	...	...	...

Upcoming Renewals

1. Webflow - 15 March 2026 (£228.00/year)
2. Cloudflare - 22 April 2026 (£120.00/year) ...

Related Documentation

• ToolMetadata Component - Individual tool pages
• ToolsOverview Component - Main tools page
• Tool Categorization System - Full system docs
• Repository Structure - Project organisation

Reusability

This component is designed to be reusable. To add it to a new Docusaurus repo:

1. Copy the component directory to docusaurus/src/theme/MDXComponents/CategorySummary/
2. Ensure your sync script generates category index pages with tool data
3. Customize styling in styles.module.css for your brand
4. Update category colors to match your design system

See Setting Up New Repos for full migration guide.