jsonresume-theme-operations-precision 0.1.0 → 0.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/style.css ADDED
@@ -0,0 +1,139 @@
1
+ /**
2
+ * Resume Core Design Tokens
3
+ * Framework-agnostic CSS variables for theming
4
+ * Based on 2025 resume best practices and ATS compatibility research
5
+ */
6
+
7
+ :root {
8
+ /* Typography - ATS-friendly fonts */
9
+ --resume-font-sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
10
+ --resume-font-serif: Cambria, Georgia, "Times New Roman", serif;
11
+ --resume-font-mono: "Courier New", Courier, monospace;
12
+
13
+ /* Font Sizes - Optimal readability */
14
+ --resume-size-name: 36px; /* Large, prominent name */
15
+ --resume-size-heading: 16px; /* Section titles */
16
+ --resume-size-subheading: 14px; /* Job titles, degrees */
17
+ --resume-size-body: 11px; /* Body text, descriptions */
18
+ --resume-size-small: 10px; /* Dates, locations, metadata */
19
+
20
+ /* Font Weights */
21
+ --resume-weight-normal: 400;
22
+ --resume-weight-medium: 500;
23
+ --resume-weight-semibold: 600;
24
+ --resume-weight-bold: 700;
25
+
26
+ /* Line Heights */
27
+ --resume-line-height-tight: 1.2;
28
+ --resume-line-height-normal: 1.5;
29
+ --resume-line-height-relaxed: 1.75;
30
+
31
+ /* Colors - Professional Theme (default) */
32
+ --resume-color-primary: #1a1a1a;
33
+ --resume-color-secondary: #4a4a4a;
34
+ --resume-color-accent: #2563eb;
35
+ --resume-color-background: #ffffff;
36
+ --resume-color-border: #e5e7eb;
37
+
38
+ /* Spacing - Consistent rhythm */
39
+ --resume-space-section: 24px; /* Between major sections */
40
+ --resume-space-item: 16px; /* Between list items */
41
+ --resume-space-tight: 8px; /* Within items */
42
+ --resume-space-margin: 48px; /* Page margins */
43
+
44
+ /* Layout - Optimal line length */
45
+ --resume-max-width: 660px; /* ~80 chars at body size */
46
+ --resume-column-gap: 24px;
47
+
48
+ /* Border Radius */
49
+ --resume-radius-sm: 4px;
50
+ --resume-radius-md: 8px;
51
+ --resume-radius-lg: 12px;
52
+
53
+ /* Shadows - Subtle depth */
54
+ --resume-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
55
+ --resume-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
56
+ }
57
+
58
+ /* Modern Theme Variant */
59
+ [data-theme="modern"] {
60
+ --resume-color-primary: #0f172a;
61
+ --resume-color-secondary: #475569;
62
+ --resume-color-accent: #8b5cf6;
63
+ --resume-font-sans: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
64
+ }
65
+
66
+ /* Classic Theme Variant */
67
+ [data-theme="classic"] {
68
+ --resume-color-primary: #000000;
69
+ --resume-color-secondary: #333333;
70
+ --resume-color-accent: #0066cc;
71
+ --resume-font-sans: Georgia, "Times New Roman", serif;
72
+ }
73
+
74
+ /* Minimal Theme Variant */
75
+ [data-theme="minimal"] {
76
+ --resume-color-primary: #18181b;
77
+ --resume-color-secondary: #71717a;
78
+ --resume-color-accent: #000000;
79
+ --resume-space-section: 32px;
80
+ --resume-space-item: 20px;
81
+ }
82
+
83
+ /* High Contrast Variant (Accessibility) */
84
+ [data-theme="high-contrast"] {
85
+ --resume-color-primary: #000000;
86
+ --resume-color-secondary: #000000;
87
+ --resume-color-accent: #0000ff;
88
+ --resume-color-background: #ffffff;
89
+ --resume-color-border: #000000;
90
+ }
91
+
92
+ /* Print Styles - ATS-Friendly PDF Export */
93
+ @media print {
94
+ :root {
95
+ /* Optimize for print */
96
+ --resume-space-section: 18px;
97
+ --resume-space-item: 12px;
98
+ }
99
+
100
+ @page {
101
+ size: A4;
102
+ margin: 0.5in;
103
+ }
104
+
105
+ /* Prevent awkward breaks */
106
+ .resume-section {
107
+ page-break-inside: avoid;
108
+ }
109
+
110
+ .resume-item {
111
+ break-inside: avoid;
112
+ }
113
+
114
+ /* Widows and orphans control */
115
+ p, li {
116
+ widows: 3;
117
+ orphans: 3;
118
+ }
119
+
120
+ /* Hyphenation for long words */
121
+ .resume-description {
122
+ hyphens: auto;
123
+ }
124
+
125
+ /* Hide interactive elements */
126
+ .no-print {
127
+ display: none !important;
128
+ }
129
+ }
130
+
131
+ /* RTL Support */
132
+ [dir="rtl"] {
133
+ text-align: right;
134
+ }
135
+
136
+ [dir="rtl"] .resume-item {
137
+ padding-left: 0;
138
+ padding-right: var(--resume-space-tight);
139
+ }
package/package.json CHANGED
@@ -1,8 +1,8 @@
1
1
  {
2
2
  "name": "jsonresume-theme-operations-precision",
3
- "version": "0.1.0",
3
+ "version": "0.2.0",
4
4
  "description": "Operations professionals - show your systematic approach, process improvements",
5
- "main": "src/index.js",
5
+ "main": "./dist/index.js",
6
6
  "type": "module",
7
7
  "license": "MIT",
8
8
  "keywords": [
@@ -18,7 +18,25 @@
18
18
  "react-dom": "^18.0.0 || ^19.0.0"
19
19
  },
20
20
  "dependencies": {
21
+ "marked": "^16.3.0",
21
22
  "styled-components": "^6.1.19",
22
- "@resume/core": "0.1.0"
23
+ "@jsonresume/core": "0.1.0"
24
+ },
25
+ "exports": {
26
+ ".": {
27
+ "import": "./src/index.jsx",
28
+ "default": "./dist/index.js"
29
+ },
30
+ "./dist": {
31
+ "import": "./dist/index.js",
32
+ "default": "./dist/index.js"
33
+ }
34
+ },
35
+ "devDependencies": {
36
+ "@vitejs/plugin-react": "^4.3.4",
37
+ "vite": "^5.4.21"
38
+ },
39
+ "scripts": {
40
+ "build": "vite build"
23
41
  }
24
42
  }
package/src/Resume.jsx CHANGED
@@ -1,6 +1,15 @@
1
1
  import React from 'react';
2
2
  import styled from 'styled-components';
3
- import { Section, SectionTitle, DateRange, ContactInfo } from '@resume/core';
3
+ import { marked } from 'marked';
4
+ import {
5
+ Section,
6
+ SectionTitle,
7
+ DateRange,
8
+ ContactInfo,
9
+ } from '@jsonresume/core';
10
+
11
+ const renderMarkdown = (text) =>
12
+ text ? marked.parse(text, { breaks: true }) : '';
4
13
 
5
14
  const Layout = styled.div`
6
15
  max-width: 850px;
@@ -58,7 +67,7 @@ const StyledContactInfo = styled(ContactInfo)`
58
67
  }
59
68
  `;
60
69
 
61
- const Summary = styled.p`
70
+ const Summary = styled.div`
62
71
  font-size: 15px;
63
72
  line-height: 1.6;
64
73
  color: #374151;
@@ -121,7 +130,7 @@ const DateText = styled.div`
121
130
  font-variant-numeric: tabular-nums;
122
131
  `;
123
132
 
124
- const WorkSummary = styled.p`
133
+ const WorkSummary = styled.div`
125
134
  margin: 8px 0;
126
135
  color: #4b5563;
127
136
  line-height: 1.6;
@@ -271,7 +280,11 @@ function Resume({ resume }) {
271
280
  <Name>{basics.name}</Name>
272
281
  {basics.label && <Label>{basics.label}</Label>}
273
282
  <StyledContactInfo basics={basics} />
274
- {basics.summary && <Summary>{basics.summary}</Summary>}
283
+ {basics.summary && (
284
+ <Summary
285
+ dangerouslySetInnerHTML={{ __html: renderMarkdown(basics.summary) }}
286
+ />
287
+ )}
275
288
  </Header>
276
289
 
277
290
  {work?.length > 0 && (
@@ -288,11 +301,24 @@ function Resume({ resume }) {
288
301
  <DateRange startDate={job.startDate} endDate={job.endDate} />
289
302
  </DateText>
290
303
  </WorkHeader>
291
- {job.summary && <WorkSummary>{job.summary}</WorkSummary>}
304
+ {job.summary && (
305
+ <WorkSummary
306
+ dangerouslySetInnerHTML={{
307
+ __html: renderMarkdown(job.summary),
308
+ }}
309
+ />
310
+ )}
292
311
  {job.highlights?.length > 0 && (
293
312
  <Highlights>
294
313
  {job.highlights.map((highlight, i) => (
295
- <li key={i}>{highlight}</li>
314
+ <li
315
+ key={i}
316
+ dangerouslySetInnerHTML={{
317
+ __html: marked.parseInline(highlight, {
318
+ breaks: true,
319
+ }),
320
+ }}
321
+ />
296
322
  ))}
297
323
  </Highlights>
298
324
  )}
@@ -354,12 +380,23 @@ function Resume({ resume }) {
354
380
  )}
355
381
  </ProjectHeader>
356
382
  {project.description && (
357
- <WorkSummary>{project.description}</WorkSummary>
383
+ <WorkSummary
384
+ dangerouslySetInnerHTML={{
385
+ __html: renderMarkdown(project.description),
386
+ }}
387
+ />
358
388
  )}
359
389
  {project.highlights?.length > 0 && (
360
390
  <Highlights>
361
391
  {project.highlights.map((highlight, i) => (
362
- <li key={i}>{highlight}</li>
392
+ <li
393
+ key={i}
394
+ dangerouslySetInnerHTML={{
395
+ __html: marked.parseInline(highlight, {
396
+ breaks: true,
397
+ }),
398
+ }}
399
+ />
363
400
  ))}
364
401
  </Highlights>
365
402
  )}
@@ -387,11 +424,24 @@ function Resume({ resume }) {
387
424
  </DateText>
388
425
  )}
389
426
  </WorkHeader>
390
- {vol.summary && <WorkSummary>{vol.summary}</WorkSummary>}
427
+ {vol.summary && (
428
+ <WorkSummary
429
+ dangerouslySetInnerHTML={{
430
+ __html: renderMarkdown(vol.summary),
431
+ }}
432
+ />
433
+ )}
391
434
  {vol.highlights?.length > 0 && (
392
435
  <Highlights>
393
436
  {vol.highlights.map((highlight, i) => (
394
- <li key={i}>{highlight}</li>
437
+ <li
438
+ key={i}
439
+ dangerouslySetInnerHTML={{
440
+ __html: marked.parseInline(highlight, {
441
+ breaks: true,
442
+ }),
443
+ }}
444
+ />
395
445
  ))}
396
446
  </Highlights>
397
447
  )}
@@ -408,7 +458,13 @@ function Resume({ resume }) {
408
458
  <Institution>{award.title}</Institution>
409
459
  {award.awarder && <Degree>Awarded by {award.awarder}</Degree>}
410
460
  {award.date && <EducationDate>{award.date}</EducationDate>}
411
- {award.summary && <WorkSummary>{award.summary}</WorkSummary>}
461
+ {award.summary && (
462
+ <WorkSummary
463
+ dangerouslySetInnerHTML={{
464
+ __html: renderMarkdown(award.summary),
465
+ }}
466
+ />
467
+ )}
412
468
  </EducationItem>
413
469
  ))}
414
470
  </Section>
@@ -424,7 +480,13 @@ function Resume({ resume }) {
424
480
  {pub.releaseDate && (
425
481
  <EducationDate>{pub.releaseDate}</EducationDate>
426
482
  )}
427
- {pub.summary && <WorkSummary>{pub.summary}</WorkSummary>}
483
+ {pub.summary && (
484
+ <WorkSummary
485
+ dangerouslySetInnerHTML={{
486
+ __html: renderMarkdown(pub.summary),
487
+ }}
488
+ />
489
+ )}
428
490
  </EducationItem>
429
491
  ))}
430
492
  </Section>
package/vite.config.js ADDED
@@ -0,0 +1,33 @@
1
+ import { defineConfig } from 'vite';
2
+ import react from '@vitejs/plugin-react';
3
+
4
+ export default defineConfig({
5
+ plugins: [react()],
6
+ build: {
7
+ ssr: true,
8
+ target: 'node18',
9
+ outDir: './dist',
10
+ emptyOutDir: true,
11
+ minify: false,
12
+ lib: {
13
+ entry: './src/index.jsx',
14
+ formats: ['es'],
15
+ fileName: 'index',
16
+ },
17
+ rollupOptions: {
18
+ external: ['react', 'react-dom', 'react-dom/server', 'react/jsx-runtime'],
19
+ output: {
20
+ exports: 'named',
21
+ },
22
+ },
23
+ },
24
+ ssr: {
25
+ // Force bundle these packages instead of externalizing
26
+ noExternal: [
27
+ 'styled-components',
28
+ '@emotion/is-prop-valid',
29
+ 'stylis',
30
+ 'shallowequal',
31
+ ],
32
+ },
33
+ });
File without changes