Merge pull request #21 from javiera-vasquez/add-classic-resume-template

feat: Add classic resume and cover letter theme

Author: javiera-vasquez

.claude/commands/tailor.md

@@ -54,7 +54,10 @@ After running this command, all subsequent interactions will:
 2. **Validate Metadata File**: Check that `metadata.yaml` exists in company folder
 3. **Read Pre-built Metadata**: Load complete metadata from `resume-data/tailor/$1/metadata.yaml`
 4. **Update State**: Copy entire metadata to `.claude/tailor-context.yaml` and update:
-   - last_updated: Current timestamp (only field that changes)
+   - last_updated: Current timestamp
+   - active_company: Current Company
+   - active_template: 'modern' or 'classic' default value is 'modern' - If user prompt to update the 'active_template' we need to update `tailor-context.yaml` and `metadata.yaml`
+   - available_files: list of available files on `resume-data/tailor/$1/`
 5. **Provide Summary**: Display company context overview from loaded metadata
 
 ## Example Output:

.claude/tailor-context.yaml

@@ -23,7 +23,7 @@ available_files:
   - 'cover_letter.yaml'
 
 # Timestamp when context was last updated (ISO format)
-last_updated: '2025-10-06T17:36:00Z'
+last_updated: '2025-10-07T16:00:00Z'
 
 # ========== OPTIONAL DISPLAY CACHE ==========
 # Cached information from metadata.yaml for quick display

CHANGELOG.md

@@ -7,6 +7,36 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [0.8.3] - 2025-10-07
+
+### Added
+
+- **Classic Theme**: New professional resume and cover letter theme with clean, traditional layout
+- **Theme Components**: Complete component set for classic theme (Header, Summary, Experience, Education, Skills, Languages, Additional, Contact)
+- **Cover Letter Components**: Classic theme cover letter with Header, Title, DateLine, Body, and Signature components
+- **Single-Column Layout**: Simplified resume structure with improved visual hierarchy
+
+### Changed
+
+- **Design Token System**: Unified token imports across all templates for better consistency
+- **Theme Initialization**: Updated to prioritize `active_template` from metadata, defaulting to 'modern'
+- **PDF Viewer**: Enhanced key generation to include theme and document type for proper re-renders
+- **Tailor Command**: Expanded metadata management with `active_company`, `active_template`, and `available_files` fields
+- **UI Simplification**: Removed theme selector dropdown from Header component
+
+### Improved
+
+- **Component Organization**: Better structured classic theme components with Summary and Additional sections
+- **Design Tokens**: Enhanced token structure for improved styling consistency and maintainability
+- **Styling System**: Consolidated color management using modern design tokens in PDF wrapper
+- **Metadata Tracking**: Streamlined template management with automatic timestamp updates
+
+### Removed
+
+- **Template Configuration**: Removed redundant template section from metadata.yaml
+- **Unused Logic**: Cleaned up contact formatting code from Header component
+- **UI Elements**: Removed manual theme selector in favor of metadata-driven theme selection
+
 ## [0.8.2] - 2025-10-07
 
 ### Added

README.md

@@ -7,7 +7,7 @@
 
 Claude-powered resume generator that treats your career as structured data. Write your experience once in YAML files, then automatically generate tailored PDF cover letters and resumes optimized for any job posting using Claude Code.
 
-![Tailor in action!](https://s6.imgcdn.dev/Yitx9N.gif)
+![Tailor in action!](https://s6.imgcdn.dev/YnKNew.gif)
 
 **Example Usage:**
 

package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.8.2",
+  "version": "0.8.3",
   "dependencies": {
     "@radix-ui/react-select": "^2.2.6",
     "@radix-ui/react-separator": "^1.1.7",

resume-data/mapping-rules/metadata.yaml

@@ -136,18 +136,6 @@ transformation_rules:
       target: 'metadata.job_details.user_scale'
       description: 'Extract scale information about users/impact'
 
-  # Template configuration
-  template_configuration:
-    - source: 'metadata.active_template'
-      target: 'metadata.active_template'
-      default: 'modern'
-      description: 'Template/theme to use for PDF generation'
-      validation_logic: |
-        1. Check if active_template is provided in metadata
-        2. Validate against available themes in src/templates/
-        3. Default to 'modern' if not specified or invalid
-        4. Must match theme IDs in themes registry
-
   # Timestamp
   timestamp_generation:
     - source: 'current_date'

src/data/application.ts

@@ -1,7 +1,7 @@
 // @ts-nocheck
 // Auto-generated application data - TypeScript validation disabled
 // Company: tech-corp
-// Generated at: 2025-10-07T08:41:31.926Z
+// Generated at: 2025-10-07T12:08:20.383Z
 
 import type { ApplicationData } from '@types';
 

src/templates/classic/cover-letter/components/Body.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import { Text, View, StyleSheet } from '@react-pdf/renderer';
+import { tokens } from '@template-core/design-tokens';
+import type { CoverLetterSchema } from '@types';
+
+const { colors, spacing } = tokens.classic;
+
+const styles = StyleSheet.create({
+  bodyContainer: {
+    flexDirection: 'column',
+    marginBottom: spacing.pagePadding / 2,
+  },
+  paragraph: {
+    fontSize: 10,
+    fontFamily: 'Lato',
+    color: colors.primary,
+    marginBottom: spacing.pagePadding / 3,
+    lineHeight: 1.5,
+  },
+});
+
+const Body = ({ data }: { data: CoverLetterSchema }) => {
+  return (
+    <View style={styles.bodyContainer}>
+      <Text style={styles.paragraph}>{data.content.opening_line}</Text>
+      {data.content.body.map((paragraph, index) => (
+        <Text key={index} style={styles.paragraph}>
+          {paragraph}
+        </Text>
+      ))}
+    </View>
+  );
+};
+
+export default Body;

src/templates/classic/cover-letter/components/DateLine.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { Text, View, StyleSheet } from '@react-pdf/renderer';
+import { tokens } from '@template-core/design-tokens';
+import type { CoverLetterSchema } from '@types';
+
+const { colors, spacing } = tokens.classic;
+
+const styles = StyleSheet.create({
+  dateContainer: {
+    flexDirection: 'row',
+    marginBottom: spacing.pagePadding * 1.5,
+  },
+  dateText: {
+    fontSize: 9,
+    fontFamily: 'Lato',
+    color: colors.mediumGray,
+  },
+});
+
+const DateLine = ({ data }: { data: CoverLetterSchema }) => (
+  <View style={styles.dateContainer}>
+    <Text style={styles.dateText}>{data.date}</Text>
+  </View>
+);
+
+export default DateLine;

src/templates/classic/cover-letter/components/Header.tsx

@@ -0,0 +1,72 @@
+import React from 'react';
+import { Text, View, StyleSheet, Link } from '@react-pdf/renderer';
+import { tokens } from '@template-core/design-tokens';
+import type { CoverLetterSchema } from '@types';
+
+const { colors, spacing } = tokens.classic;
+
+const styles = StyleSheet.create({
+  headerContainer: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'flex-start',
+    marginBottom: spacing.pagePadding / 2, // Reduced spacing to account for separator
+    width: '100%',
+  },
+  separatorLine: {
+    borderBottom: `1px solid ${colors.separatorGray}`,
+    marginBottom: spacing.pagePadding / 2, // Space after separator
+    width: '100%',
+  },
+  companyArea: {
+    flexDirection: 'column',
+    alignItems: 'flex-start',
+  },
+  companyName: {
+    fontSize: 9,
+    fontFamily: 'Lato Bold',
+    color: colors.darkGray,
+  },
+  contactArea: {
+    flexDirection: 'column',
+    alignItems: 'flex-end',
+    textAlign: 'right',
+  },
+  contactName: {
+    fontSize: 9,
+    fontFamily: 'Lato',
+    lineHeight: 1.44,
+    color: colors.darkGray,
+  },
+  contactDetails: {
+    fontFamily: 'Lato',
+    fontSize: 9,
+    lineHeight: 1.44,
+    color: colors.mediumGray,
+  },
+});
+
+const Header = ({ data }: { data: CoverLetterSchema }) => (
+  <View>
+    <View style={styles.headerContainer}>
+      <View style={styles.companyArea}>
+        <Text style={styles.companyName}>{data.company}</Text>
+      </View>
+
+      <View style={styles.contactArea}>
+        <Text style={styles.contactName}>{data.personal_info.name}</Text>
+        <Text style={styles.contactDetails}>{data.personal_info.address}</Text>
+        <Text style={styles.contactDetails}>
+          <Link style={styles.contactDetails} src={data.personal_info.email}>
+            {data.personal_info.email}
+          </Link>
+        </Text>
+        <Text style={styles.contactDetails}>{data.personal_info.phone}</Text>
+      </View>
+    </View>
+    {/* Separator line to match mockup */}
+    <View style={styles.separatorLine} />
+  </View>
+);
+
+export default Header;