Gatsby Theme Chronogrove Development

Overview

You are assisting with development of `gatsby-theme-chronogrove`, a Gatsby theme monorepo for personal websites featuring a social dashboard home page with data widgets. The project uses Yarn v4 workspaces to separate the reusable theme code from site-specific content.

**Current Primary Goal**: Decouple all personal information and www.chrisvogt.me content from the `/theme` directory to make the theme generic and reusable.

Project Structure

The monorepo contains:

**Backend API**: `metrics.chrisvogt.me` - Firebase/Firestore-based backend for widget data caching (separate repository: chrisvogt/metrics)

Technology Stack

Development Commands

```bash

Start HTTPS development server

yarn develop

Run tests

yarn test

yarn test:watch

yarn test:coverage

Code quality

yarn format # Prettier

yarn lint # ESLint

Workspace-specific commands

yarn workspace [package] [command]

```

Widget System Architecture

The theme includes a sophisticated dashboard widget system with the following data flow:

1. **Data Sources**: Metrics API at `metrics.chrisvogt.me`

2. **Actions** (`fetchDataSource.js`): API calls with deduplication

3. **Reducers**: Process and store data with loading states (INIT, SUCCESS, FAILURE)

4. **Selectors**: Transform data for components

5. **Components**: Display data with loading states and error handling

Available Widgets

Environment Variables

Configure the following for full widget functionality:

```bash

GATSBY_METRICS_API_URL=https://metrics.chrisvogt.me

GATSBY_GITHUB_TOKEN=<token>

GATSBY_SPOTIFY_CLIENT_ID=<id>

GATSBY_INSTAGRAM_ACCESS_TOKEN=<token>

GATSBY_GOODREADS_API_KEY=<key>

GATSBY_STEAM_API_KEY=<key>

```

Decoupling Personal Information (Current Priority)

The following files contain hardcoded personal information that needs to be made configurable through site metadata and theme options:

High Priority (Core Theme Files)

1. `theme/src/components/h-card.js` - Personal details, email, location

2. `theme/src/components/home-header-content.js` - Name, personal description

3. `theme/src/data/social-profiles.json` - Social media links and usernames

4. `theme/gatsby-config.js` - Default site metadata with personal info

Medium Priority (Configuration)

5. `theme/src/templates/home.js` - SEO metadata with personal details

6. `theme/src/components/footer/footer.js` - GitHub source link

7. `scripts/postinstall-banner.js` - Personal branding (root level)

8. `index.js` - Personal branding (root level)

Strategy for Decoupling

When removing hardcoded personal information:

1. Move hardcoded values to site metadata configuration in `gatsby-config.js`

2. Create Redux selectors for accessing personal data from site metadata

3. Update components to use selectors instead of hardcoded values

4. Provide sensible defaults in theme configuration

5. Update tests to use mock data for personal information

6. Document all new configuration options

**Example Configuration Structure:**

```javascript

// gatsby-config.js theme options

{

personalInfo: {

name: "Your Name",

email: "[email protected]",

location: "Your Location"

},

socialProfiles: {

github: "username",

twitter: "username"

},

widgetConfig: {

github: { username: "username" },

spotify: { clientId: "id" }

}

}

```

Development Patterns

Follow these established patterns:

Testing Strategy

The project uses a comprehensive testing setup:

**When adding features:**

1. Write tests alongside implementation

2. Use mock data for external dependencies

3. Test loading, success, and error states

4. Verify accessibility with Testing Library queries

5. Maintain high test coverage

Adding New Widgets

To add a new widget:

1. Create widget component in `src/components/widgets/[name]/`

2. Add Redux actions in `src/state/actions/`

3. Create reducer in `src/state/reducers/`

4. Add selectors in `src/state/selectors/`

5. Create mock data in `__mocks__/`

6. Write comprehensive tests

7. Update widget configuration documentation

8. Consider lazy loading for performance

Code Quality Standards

The project enforces:

Build and Deployment

Important Guidelines

1. **HTTPS Development**: Always use `yarn develop` (HTTPS required for local development)

2. **Backward Compatibility**: Maintain compatibility when refactoring

3. **Performance**: Consider bundle size impact when adding dependencies

4. **Accessibility First**: Prioritize keyboard navigation, screen readers, and WCAG compliance

5. **Responsive Design**: Test on multiple devices and browsers

6. **Security**: Store API keys in environment variables, keep dependencies updated

7. **Documentation**: Update docs when adding configuration options

8. **Test Coverage**: Maintain comprehensive test coverage for all features

9. **Personal Data**: Keep all personal information out of the theme package

Recent Development Focus

Based on recent commits:

Configuration Philosophy

The theme should be configurable through:

1. **Site Metadata**: Core information (title, description, author)

2. **Theme Options**: Widget configuration, API endpoints, usernames

3. **Social Profiles**: Configurable social media links

4. **Personal Information**: Name, location, bio, contact details

5. **Styling**: Theme UI customization

6. **Gatsby Plugins**: Content sources and optimization settings

Provide sensible defaults for all configuration while allowing complete customization through site-specific `gatsby-config.js`.