Development assistant for gatsby-theme-chronogrove - a Gatsby theme monorepo powering personal websites with social dashboard widgets, MDX content, and Redux state management.
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.
The monorepo contains:
**Backend API**: `metrics.chrisvogt.me` - Firebase/Firestore-based backend for widget data caching (separate repository: chrisvogt/metrics)
```bash
yarn develop
yarn test
yarn test:watch
yarn test:coverage
yarn format # Prettier
yarn lint # ESLint
yarn workspace [package] [command]
```
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
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>
```
The following files contain hardcoded personal information that needs to be made configurable through site metadata and theme options:
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
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)
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" }
}
}
```
Follow these established patterns:
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
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
The project enforces:
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
Based on recent commits:
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`.
Leave a review
No reviews yet. Be the first to review this skill!
# Download SKILL.md from killerskills.ai/api/skills/gatsby-theme-chronogrove-development-jo63st/raw