@bluesialia/jsonresume-theme-bluetime
Version:
A modern, clean TypeScript-based theme for JSON Resume with responsive design and professional styling
295 lines (224 loc) • 8.14 kB
Markdown
# JSONResume Theme Bluetime
---
A TypeScript-based theme for [JSON Resume](https://jsonresume.org/) called Bluetime.
## Installation
### Node.js/NPM
```bash
npm install @bluesialia/jsonresume-theme-bluetime
```
### Browser/CDN
For vanilla JavaScript usage in browsers, you can use the theme directly from a CDN:
```html
<script type="module">
import { render } from "https://cdn.jsdelivr.net/npm/@bluesialia/jsonresume-theme-bluetime/dist/index.js";
</script>
```
## Usage
### Browser Usage (ES Modules)
```html
<!DOCTYPE html>
<html>
<head>
<title>My Resume</title>
</head>
<body>
<div id="resume-container"></div>
<script type="module">
// Import the render function directly using ES modules
import { render } from "https://cdn.jsdelivr.net/npm/@bluesialia/jsonresume-theme-bluetime/dist/index.js";
// Your JSON Resume data
const resumeData = {
basics: {
name: "John Doe",
label: "Software Developer",
email: "john.doe@example.com",
phone: "(123) 456-7890",
url: "https://johndoe.dev",
summary: "Passionate software developer with 5+ years of experience.",
location: {
city: "San Francisco",
region: "CA"
}
},
work: [
{
name: "Tech Corp",
position: "Senior Software Developer",
startDate: "2021-03",
summary: "Led development of web applications using React and Node.js"
}
]
// ... more resume data
};
// Render the resume using the imported render function
const htmlResume = render(resumeData);
document.getElementById('resume-container').innerHTML = htmlResume;
</script>
</body>
</html>
```
### Node.js Usage (ES Modules)
```javascript
import { render } from '@bluesialia/jsonresume-theme-bluetime';
// Your JSON Resume data
const resumeData = {
basics: {
name: "John Doe",
label: "Software Developer",
email: "john.doe@example.com",
phone: "(123) 456-7890",
url: "https://johndoe.dev",
summary: "Passionate software developer with 5+ years of experience.",
location: {
city: "San Francisco",
region: "CA"
}
},
work: [
{
name: "Tech Corp",
position: "Senior Software Developer",
startDate: "2021-03",
summary: "Led development of web applications using React and Node.js"
}
],
// ... more resume data
};
// Generate HTML
const htmlResume = render(resumeData);
// Save to file
const fs = require('fs');
fs.writeFileSync('resume.html', htmlResume);
```
## ES Modules Usage Notes
When using the theme:
- **Browser**: Use `<script type="module">` and `import { render }`
- **Node.js**: Works with native ES modules (`import` statements)
- The minified version is recommended for production: `index.min.js`
- All styles are embedded in the generated HTML
- No additional CSS files are needed
- Compatible with modern browsers supporting ES modules (ES2020+)
- Uses native ES2020 modules format
### CDN URLs
```
https://cdn.jsdelivr.net/npm/@bluesialia/jsonresume-theme-bluetime/dist/index.js
https://cdn.jsdelivr.net/npm/@bluesialia/jsonresume-theme-bluetime/dist/index.min.js
```
### Browser Compatibility
- **Modern browsers** (Chrome 61+, Firefox 60+, Safari 11+, Edge 16+)
- **Node.js** 14.8+ with ES modules support
- Browsers must support ES modules (`<script type="module">`)
## JSON Resume Schema
This theme supports the complete [JSON Resume Schema](https://jsonresume.org/schema/). The schema includes:
- **basics**: Personal information, contact details, and summary
- **work**: Work experience and achievements
- **volunteer**: Volunteer experience
- **education**: Educational background
- **awards**: Awards and recognitions
- **certificates**: Professional certifications
- **publications**: Published works
- **skills**: Technical and professional skills
- **languages**: Language proficiencies
- **interests**: Personal interests and hobbies
- **references**: Professional references
- **projects**: Personal and professional projects
## Theme Customization
The generated HTML includes embedded CSS that you can customize. The theme uses a clean design with:
- Blue accent colors (`#3498db`)
- Professional typography
- Responsive layout
- Clean section separators
- Skill tags for easy scanning
## Development
### Prerequisites
- Node.js 16 or higher
- npm or yarn
### Building from Source
```bash
# Clone the repository
git clone https://github.com/BlueSialia/jsonresume-theme-bluetime.git
cd jsonresume-theme-bluetime
# Install dependencies
npm install
# Build the project
npm run build
# Watch for changes during development
npm run dev
```
### Project Structure
```
src/
├── index.ts # Main render function with ES modules exports
├── types.ts # TypeScript interfaces for JSON Resume schema
dist/
├── index.js # ES2020 modules output
├── index.min.js # Minified ES modules version
├── index.d.ts # TypeScript declarations
└── types.d.ts # Type definitions
```
### Scripts
#### Build Scripts
- `npm run build`: Clean, compile TypeScript, and create minified version
- `npm run compile`: Compile TypeScript to ES2020 modules
- `npm run minify`: Create minified ES modules version
- `npm run clean`: Remove dist directory
#### Development Scripts
- `npm run dev`: Watch mode for development (recompiles on file changes)
- `npm run lint`: Type-check without compilation
#### Testing Scripts
- `npm test`: Run comprehensive Jest test suite with build
- `npm run test:watch`: Run tests in watch mode for development
- `npm run test:coverage`: Run tests with coverage report
#### Utility Scripts
- `npm run size`: Show compiled and minified file sizes
- `npm run prepublishOnly`: Automatically runs before publishing
## Testing
This project includes a comprehensive test suite built with Jest and TypeScript. We maintain high test coverage to ensure reliability and catch regressions.
### Test Coverage
- **93.61%** statement coverage
- **85.37%** branch coverage
- **100%** function coverage
- **96.29%** line coverage
### Running Tests
```bash
# Run all tests
npm test
# Run tests in watch mode during development
npm run test:watch
# Generate coverage report
npm run test:coverage
# Run the original legacy test
npm run test:legacy
```
### What's Tested
The test suite covers:
- **Render Function**: All paths through the main render function
- **HTML Security**: XSS prevention and HTML escaping
- **All Resume Sections**: Basics, work, education, skills, projects, etc.
- **Date Handling**: Various date formats and edge cases
- **Contact Information**: Email, phone, URL formatting with proper links
- **Social Profiles**: Multiple networks with Font Awesome icons
- **Error Handling**: Missing fields, malformed data, edge cases
- **Performance**: Rendering speed benchmarks
- **Accessibility**: Semantic HTML and proper link attributes
For detailed testing information, see [TESTING.md](TESTING.md).
## Contributing
Contributions are welcome! Please feel free to:
1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Add tests if applicable
5. Submit a pull request
## License
MIT License. See [LICENSE](LICENSE) for details.
## Support
If you encounter any issues or have questions:
1. Check the [GitHub Issues](https://github.com/BlueSialia/jsonresume-theme-bluetime/issues)
2. Create a new issue with a detailed description
3. Include sample resume data if reporting rendering issues
## Related
- [JSON Resume](https://jsonresume.org/) - The open source initiative to create a JSON-based standard for resumes
- [JSON Resume Schema](https://jsonresume.org/schema/) - Complete schema documentation
- [Other JSON Resume Themes](https://jsonresume.org/themes/) - Browse more themes
---
Made with ❤️ by [BlueSialia](https://github.com/BlueSialia)