ToolMetadata Component

A visual metadata component that displays tool information in a beautiful, color-coded card at the top of each tool documentation page.

What It Does

The ToolMetadata component automatically extracts frontmatter data from tool documentation and displays it in an organised, responsive card format with category-specific colours.

Features

• Color-coded categories - Each tool category has a unique colour scheme
• Cost visibility - Shows monthly and annual costs with proper currency formatting
• Renewal tracking - Displays upcoming renewal dates with visual emphasis
• Account types - Shows who has access (Internal, Client Access, etc.)
• Quick links - Direct access links to tool dashboards
• Responsive design - Adapts to mobile, tablet, and desktop screens
• Automatic calculation - Calculates annual cost from monthly when not set

Categories and Colors

Category	Color	Hex
Website	Light Blue	#E3F2FD
Self-Hosting	Light Green	#E8F5E9
Operational Tools	Light Purple	#F3E5F5
Social Media	Light Pink	#FCE4EC
Marketing Tools	Light Orange	#FFF3E0
Design & Content	Light Teal	#E0F2F1
Ad Spend	Light Red	#FFEBEE
Office & Coworking	Light Amber	#FFF8E1
Uncategorized	Light Grey	#F5F5F5

Usage

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

In Tool Markdown Files

Simply add frontmatter to tools/<tool-name>.md:

---
title: Webflow
category: WEBSITE
categoryDisplay: Website
monthlyCost: 19
monthlyCurrency: GBP
annualCost: 0
annualCurrency: GBP
renewalDate: 2026-03-15
accountType:
  - INTERNAL
  - CLIENT_ACCESS
accessLink: https://webflow.com/dashboard
moreInfo: No-code website builder and CMS
---

The sync script will automatically inject the component at the top of the generated page with all the metadata properly formatted.

Manual Usage (Custom Pages)

If you need to use the component manually in a custom page:

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

<ToolMetadata
  category="Website"
  monthlyCost="19"
  monthlyCurrency="GBP"
  annualCost="0"
  annualCurrency="GBP"
  renewalDate="2026-03-15"
  accountType={["INTERNAL", "CLIENT_ACCESS"]}
  accessLink="https://webflow.com/dashboard"
  moreInfo="No-code website builder and CMS"
/>

Component Props

Prop	Type	Required	Description
category	string	Yes	Tool category (Website, Self-Hosting, etc.)
monthlyCost	string	No	Monthly cost amount
monthlyCurrency	string	No	Currency code (GBP, USD, etc.)
annualCost	string	No	Annual cost amount
annualCurrency	string	No	Currency code (GBP, USD, etc.)
renewalDate	string	No	Next renewal date (YYYY-MM-DD format)
accountType	array	No	Array of account types
accessLink	string	No	Direct link to tool dashboard
moreInfo	string	No	Additional information

Cost Calculation Logic

• If annualCost is set and > 0, it's displayed as-is
• If annualCost is 0 or not set, but monthlyCost is set, annual cost is calculated as monthlyCost * 12
• If both are 0 or not set, cost section is hidden
• Currency symbols are automatically formatted (£ for GBP, $ for USD, € for EUR)

Renewal Date Formatting

Dates are displayed in human-readable format:

• 2026-03-15 → "15 March 2026"
• Upcoming renewals are visually emphasised
• No date → "Not set"

Account Type Display

Account types are displayed as styled badges:

• INTERNAL → "Internal"
• CLIENT_ACCESS → "Client Access"
• AGENCY_WIDE → "Agency Wide"
• Custom types are displayed with title casing

Responsive Behavior

• Desktop (>768px): Two-column grid layout, cost and renewal in columns
• Tablet (768px): Single column with optimised spacing
• Mobile (<768px): Stacked layout with full-width elements

File Structure

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

Styling Customization

To customize the component styling, edit:

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

All styles use CSS modules to prevent conflicts with global styles.

Example Output

When rendered, the component creates a card like this:

Category: Website (in light blue background)

Cost £19.00/month £228.00/year

Renewal Date 15 March 2026

Account Type Internal, Client Access

Access/Login Open Dashboard →

More Info No-code website builder and CMS

Related Documentation

• CategorySummary Component - Category page summary
• ToolsOverview Component - Main tools page overview
• Tool Categorization System - Full system documentation
• Repository Structure - Project organisation

Reusability

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

1. Copy the component directory to docusaurus/src/theme/MDXComponents/ToolMetadata/
2. Ensure your tool markdown files have the required frontmatter structure
3. Update the sync script to inject the component in generated pages
4. Customize category colors in the getCategoryColor() function

See Setting Up New Repos for full migration guide.