jsonresume-theme-sidebar 0.2.2 → 0.2.4
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/CHANGELOG.md +20 -0
- package/dist/index.css +1 -0
- package/dist/index.js +161 -63
- package/package.json +6 -4
- package/src/Resume.jsx +18 -0
- package/src/index.jsx +13 -35
- package/tests/theme.test.js +20 -0
- package/dist/style.css +0 -139
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,25 @@
|
|
|
1
1
|
# jsonresume-theme-sidebar
|
|
2
2
|
|
|
3
|
+
## 0.2.4
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- 304a130: Theme curation wave: full JSON Resume section coverage and SSR fixes.
|
|
8
|
+
|
|
9
|
+
- Add missing sections (Interests, Certificates, et al.) across 15+ themes so every registered theme renders all schema sections
|
|
10
|
+
- tokyo-modernist: inline styled-components (fixes webpack resolution SSR crash) — re-enabled in the registry
|
|
11
|
+
- tailwind: fix social-icon SSR crash, add 7 missing sections with missing-data guards — re-enabled in the registry
|
|
12
|
+
- Register previously orphaned desert-modern and elegant-pink themes with metadata
|
|
13
|
+
- @jsonresume/core@0.3.2
|
|
14
|
+
|
|
15
|
+
## 0.2.3
|
|
16
|
+
|
|
17
|
+
### Patch Changes
|
|
18
|
+
|
|
19
|
+
- eb7f950: use @jsonresume/core/ssr renderResumeDocument
|
|
20
|
+
- Updated dependencies [ff09f75]
|
|
21
|
+
- @jsonresume/core@0.3.1
|
|
22
|
+
|
|
3
23
|
## 0.2.2
|
|
4
24
|
|
|
5
25
|
### Patch Changes
|
package/dist/index.css
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
:root{--resume-font-sans: "Helvetica Neue", Helvetica, Arial, sans-serif;--resume-font-serif: Cambria, Georgia, "Times New Roman", serif;--resume-font-mono: "Courier New", Courier, monospace;--resume-size-name: 36px;--resume-size-heading: 16px;--resume-size-subheading: 14px;--resume-size-body: 11px;--resume-size-small: 10px;--resume-weight-normal: 400;--resume-weight-medium: 500;--resume-weight-semibold: 600;--resume-weight-bold: 700;--resume-line-height-tight: 1.2;--resume-line-height-normal: 1.5;--resume-line-height-relaxed: 1.75;--resume-color-primary: #1a1a1a;--resume-color-secondary: #4a4a4a;--resume-color-accent: #2563eb;--resume-color-background: #ffffff;--resume-color-border: #e5e7eb;--resume-space-section: 24px;--resume-space-item: 16px;--resume-space-tight: 8px;--resume-space-margin: 48px;--resume-max-width: 660px;--resume-column-gap: 24px;--resume-radius-sm: 4px;--resume-radius-md: 8px;--resume-radius-lg: 12px;--resume-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, .05);--resume-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .1)}[data-theme=modern]{--resume-color-primary: #0f172a;--resume-color-secondary: #475569;--resume-color-accent: #8b5cf6;--resume-font-sans: "Inter", -apple-system, BlinkMacSystemFont, sans-serif}[data-theme=classic]{--resume-color-primary: #000000;--resume-color-secondary: #333333;--resume-color-accent: #0066cc;--resume-font-sans: Georgia, "Times New Roman", serif}[data-theme=minimal]{--resume-color-primary: #18181b;--resume-color-secondary: #71717a;--resume-color-accent: #000000;--resume-space-section: 32px;--resume-space-item: 20px}[data-theme=high-contrast]{--resume-color-primary: #000000;--resume-color-secondary: #000000;--resume-color-accent: #0000ff;--resume-color-background: #ffffff;--resume-color-border: #000000}@media print{:root{--resume-space-section: 18px;--resume-space-item: 12px}@page{size:A4;margin:.5in}.resume-section{page-break-inside:avoid}.resume-item{break-inside:avoid}p,li{widows:3;orphans:3}.resume-description{hyphens:auto}.no-print{display:none!important}}[dir=rtl]{text-align:right}[dir=rtl] .resume-item{padding-left:0;padding-right:var(--resume-space-tight)}
|
package/dist/index.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { jsx, jsxs, Fragment } from "react/jsx-runtime";
|
|
2
|
-
import {
|
|
2
|
+
import { renderToStaticMarkup } from "react-dom/server";
|
|
3
3
|
import o, { useRef, useContext, useState, useMemo, useEffect, useDebugValue, createElement, createContext } from "react";
|
|
4
4
|
var __assign = function() {
|
|
5
5
|
__assign = Object.assign || function __assign2(t) {
|
|
@@ -41,38 +41,46 @@ var isPropValid = /* @__PURE__ */ memoize(
|
|
|
41
41
|
function getDefaultExportFromCjs(x2) {
|
|
42
42
|
return x2 && x2.__esModule && Object.prototype.hasOwnProperty.call(x2, "default") ? x2["default"] : x2;
|
|
43
43
|
}
|
|
44
|
-
var shallowequal
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
return false;
|
|
59
|
-
}
|
|
60
|
-
var bHasOwnProperty = Object.prototype.hasOwnProperty.bind(objB);
|
|
61
|
-
for (var idx = 0; idx < keysA.length; idx++) {
|
|
62
|
-
var key = keysA[idx];
|
|
63
|
-
if (!bHasOwnProperty(key)) {
|
|
44
|
+
var shallowequal;
|
|
45
|
+
var hasRequiredShallowequal;
|
|
46
|
+
function requireShallowequal() {
|
|
47
|
+
if (hasRequiredShallowequal) return shallowequal;
|
|
48
|
+
hasRequiredShallowequal = 1;
|
|
49
|
+
shallowequal = function shallowEqual(objA, objB, compare, compareContext) {
|
|
50
|
+
var ret = compare ? compare.call(compareContext, objA, objB) : void 0;
|
|
51
|
+
if (ret !== void 0) {
|
|
52
|
+
return !!ret;
|
|
53
|
+
}
|
|
54
|
+
if (objA === objB) {
|
|
55
|
+
return true;
|
|
56
|
+
}
|
|
57
|
+
if (typeof objA !== "object" || !objA || typeof objB !== "object" || !objB) {
|
|
64
58
|
return false;
|
|
65
59
|
}
|
|
66
|
-
var
|
|
67
|
-
var
|
|
68
|
-
|
|
69
|
-
if (ret === false || ret === void 0 && valueA !== valueB) {
|
|
60
|
+
var keysA = Object.keys(objA);
|
|
61
|
+
var keysB = Object.keys(objB);
|
|
62
|
+
if (keysA.length !== keysB.length) {
|
|
70
63
|
return false;
|
|
71
64
|
}
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
65
|
+
var bHasOwnProperty = Object.prototype.hasOwnProperty.bind(objB);
|
|
66
|
+
for (var idx = 0; idx < keysA.length; idx++) {
|
|
67
|
+
var key = keysA[idx];
|
|
68
|
+
if (!bHasOwnProperty(key)) {
|
|
69
|
+
return false;
|
|
70
|
+
}
|
|
71
|
+
var valueA = objA[key];
|
|
72
|
+
var valueB = objB[key];
|
|
73
|
+
ret = compare ? compare.call(compareContext, valueA, valueB, key) : void 0;
|
|
74
|
+
if (ret === false || ret === void 0 && valueA !== valueB) {
|
|
75
|
+
return false;
|
|
76
|
+
}
|
|
77
|
+
}
|
|
78
|
+
return true;
|
|
79
|
+
};
|
|
80
|
+
return shallowequal;
|
|
81
|
+
}
|
|
82
|
+
var shallowequalExports = requireShallowequal();
|
|
83
|
+
const p = /* @__PURE__ */ getDefaultExportFromCjs(shallowequalExports);
|
|
76
84
|
var MS = "-ms-";
|
|
77
85
|
var MOZ = "-moz-";
|
|
78
86
|
var WEBKIT = "-webkit-";
|
|
@@ -1300,6 +1308,66 @@ var vt = /^\s*<\/[a-z]/i, gt = (function() {
|
|
|
1300
1308
|
"production" !== process.env.NODE_ENV && "undefined" != typeof navigator && "ReactNative" === navigator.product && console.warn("It looks like you've imported 'styled-components' on React Native.\nPerhaps you're looking to import 'styled-components/native'?\nRead more about this at https://www.styled-components.com/docs/basics#react-native");
|
|
1301
1309
|
var wt = "__sc-".concat(f, "__");
|
|
1302
1310
|
"production" !== process.env.NODE_ENV && "test" !== process.env.NODE_ENV && "undefined" != typeof window && (window[wt] || (window[wt] = 0), 1 === window[wt] && console.warn("It looks like there are several instances of 'styled-components' initialized in this application. This may cause dynamic styles to not render properly, errors during the rehydration process, a missing theme prop, and makes your application bigger without good reason.\n\nSee https://s-c.sh/2BAXzed for more info."), window[wt] += 1);
|
|
1311
|
+
const CSS_RESET = "<style>*,*::before,*::after{box-sizing:border-box}html,body{margin:0;padding:0}body{-webkit-font-smoothing:antialiased}</style>";
|
|
1312
|
+
const TOKENS_CSS_HREF = "https://unpkg.com/@jsonresume/core/dist/tokens.css";
|
|
1313
|
+
const FONTS_PRECONNECT = '<link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>';
|
|
1314
|
+
function isHref(value) {
|
|
1315
|
+
return /^(https?:)?\/\//.test(value) || value.trim().startsWith("<link");
|
|
1316
|
+
}
|
|
1317
|
+
function familyParam(family) {
|
|
1318
|
+
const [name, ...rest] = String(family).split(":");
|
|
1319
|
+
const encodedName = name.trim().replace(/\s+/g, "+");
|
|
1320
|
+
return rest.length ? `${encodedName}:${rest.join(":")}` : encodedName;
|
|
1321
|
+
}
|
|
1322
|
+
function googleFontsLinks(families) {
|
|
1323
|
+
if (!Array.isArray(families) || families.length === 0) return "";
|
|
1324
|
+
const passthrough = [];
|
|
1325
|
+
const names = [];
|
|
1326
|
+
for (const entry of families) {
|
|
1327
|
+
if (entry == null || entry === "") continue;
|
|
1328
|
+
if (isHref(entry)) passthrough.push(entry);
|
|
1329
|
+
else names.push(entry);
|
|
1330
|
+
}
|
|
1331
|
+
const links = passthrough.map(
|
|
1332
|
+
(href) => href.trim().startsWith("<link") ? href : `<link href="${href}" rel="stylesheet">`
|
|
1333
|
+
);
|
|
1334
|
+
if (names.length > 0) {
|
|
1335
|
+
const query = names.map(familyParam).join("&family=");
|
|
1336
|
+
links.unshift(
|
|
1337
|
+
`<link href="https://fonts.googleapis.com/css2?family=${query}&display=swap" rel="stylesheet">`
|
|
1338
|
+
);
|
|
1339
|
+
}
|
|
1340
|
+
if (links.length === 0) return "";
|
|
1341
|
+
return FONTS_PRECONNECT + links.join("");
|
|
1342
|
+
}
|
|
1343
|
+
function renderResumeDocument(element, options = {}) {
|
|
1344
|
+
const {
|
|
1345
|
+
fonts,
|
|
1346
|
+
title,
|
|
1347
|
+
lang = "en",
|
|
1348
|
+
dir = "ltr",
|
|
1349
|
+
reset = false,
|
|
1350
|
+
head = "",
|
|
1351
|
+
headAfterStyles = "",
|
|
1352
|
+
includeTokensCss = true,
|
|
1353
|
+
bodyClass
|
|
1354
|
+
} = options;
|
|
1355
|
+
const sheet = new gt();
|
|
1356
|
+
let html;
|
|
1357
|
+
let styleTags;
|
|
1358
|
+
try {
|
|
1359
|
+
html = renderToStaticMarkup(sheet.collectStyles(element));
|
|
1360
|
+
styleTags = sheet.getStyleTags();
|
|
1361
|
+
} finally {
|
|
1362
|
+
sheet.seal();
|
|
1363
|
+
}
|
|
1364
|
+
const fontLinks = googleFontsLinks(fonts);
|
|
1365
|
+
const tokensLink = includeTokensCss ? `<link rel="stylesheet" href="${TOKENS_CSS_HREF}">` : "";
|
|
1366
|
+
const resetTag = reset ? CSS_RESET : "";
|
|
1367
|
+
const titleTag = title ? `<title>${title}</title>` : "";
|
|
1368
|
+
const bodyAttr = bodyClass ? ` class="${bodyClass}"` : "";
|
|
1369
|
+
return `<!DOCTYPE html><html lang="${lang}" dir="${dir}"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">` + fontLinks + tokensLink + resetTag + head + styleTags + headAfterStyles + titleTag + `</head><body${bodyAttr}>${html}</body></html>`;
|
|
1370
|
+
}
|
|
1303
1371
|
createContext({
|
|
1304
1372
|
theme: "professional",
|
|
1305
1373
|
setTheme: () => {
|
|
@@ -1405,7 +1473,7 @@ dt.span`
|
|
|
1405
1473
|
color: ${(props) => props.theme?.colors?.tertiary || "var(--resume-color-tertiary, #666)"};
|
|
1406
1474
|
white-space: nowrap;
|
|
1407
1475
|
`;
|
|
1408
|
-
dt.span`
|
|
1476
|
+
const StyledBadge = dt.span`
|
|
1409
1477
|
display: inline-block;
|
|
1410
1478
|
padding: ${(props) => {
|
|
1411
1479
|
if (props.$size === "sm") return "2px 8px";
|
|
@@ -1440,12 +1508,48 @@ dt.span`
|
|
|
1440
1508
|
color: ${(props) => props.$variant === "accent" ? "#0066cc" : "#000"};
|
|
1441
1509
|
}
|
|
1442
1510
|
`;
|
|
1443
|
-
|
|
1511
|
+
function Badge({
|
|
1512
|
+
children,
|
|
1513
|
+
variant = "default",
|
|
1514
|
+
size = "md",
|
|
1515
|
+
className,
|
|
1516
|
+
...rest
|
|
1517
|
+
}) {
|
|
1518
|
+
return /* @__PURE__ */ jsx(
|
|
1519
|
+
StyledBadge,
|
|
1520
|
+
{
|
|
1521
|
+
$variant: variant,
|
|
1522
|
+
$size: size,
|
|
1523
|
+
className: `resume-badge resume-badge-${variant} ${className || ""}`.trim(),
|
|
1524
|
+
...rest,
|
|
1525
|
+
children
|
|
1526
|
+
}
|
|
1527
|
+
);
|
|
1528
|
+
}
|
|
1529
|
+
const BadgeContainer = dt.div`
|
|
1444
1530
|
display: flex;
|
|
1445
1531
|
flex-wrap: wrap;
|
|
1446
1532
|
gap: 8px;
|
|
1447
1533
|
margin: 8px 0;
|
|
1448
1534
|
`;
|
|
1535
|
+
function BadgeList({
|
|
1536
|
+
children,
|
|
1537
|
+
items,
|
|
1538
|
+
variant = "default",
|
|
1539
|
+
size = "md",
|
|
1540
|
+
className,
|
|
1541
|
+
...rest
|
|
1542
|
+
}) {
|
|
1543
|
+
const content = items ? items.map((item, index2) => /* @__PURE__ */ jsx(Badge, { variant, size, children: item }, index2)) : children;
|
|
1544
|
+
return /* @__PURE__ */ jsx(
|
|
1545
|
+
BadgeContainer,
|
|
1546
|
+
{
|
|
1547
|
+
className: `resume-badge-list ${className || ""}`.trim(),
|
|
1548
|
+
...rest,
|
|
1549
|
+
children: content
|
|
1550
|
+
}
|
|
1551
|
+
);
|
|
1552
|
+
}
|
|
1449
1553
|
function safeUrl(url) {
|
|
1450
1554
|
if (!url || typeof url !== "string") {
|
|
1451
1555
|
return null;
|
|
@@ -1453,7 +1557,6 @@ function safeUrl(url) {
|
|
|
1453
1557
|
const trimmed = url.trim();
|
|
1454
1558
|
const dangerousProtocols = /^(javascript|data|vbscript|file|about):/i;
|
|
1455
1559
|
if (dangerousProtocols.test(trimmed)) {
|
|
1456
|
-
console.warn(`[Security] Blocked dangerous URL: ${trimmed.slice(0, 50)}`);
|
|
1457
1560
|
return null;
|
|
1458
1561
|
}
|
|
1459
1562
|
const safeProtocols = /^(https?|mailto|tel|sms|ftp):/i;
|
|
@@ -1469,7 +1572,6 @@ function safeUrl(url) {
|
|
|
1469
1572
|
if (/^[a-z0-9][a-z0-9.-]+\.[a-z]{2,}$/i.test(trimmed)) {
|
|
1470
1573
|
return `https://${trimmed}`;
|
|
1471
1574
|
}
|
|
1472
|
-
console.warn(`[Security] Uncertain URL safety: ${trimmed.slice(0, 50)}`);
|
|
1473
1575
|
return trimmed;
|
|
1474
1576
|
}
|
|
1475
1577
|
function getLinkRel(url, openInNewTab = false) {
|
|
@@ -6363,6 +6465,20 @@ function Resume({ resume }) {
|
|
|
6363
6465
|
/* @__PURE__ */ jsx("h3", { children: ref.name }),
|
|
6364
6466
|
/* @__PURE__ */ jsx("div", { className: "title", children: ref.reference })
|
|
6365
6467
|
] }, index2)) })
|
|
6468
|
+
] }),
|
|
6469
|
+
interests.length > 0 && /* @__PURE__ */ jsxs(MainSection, { children: [
|
|
6470
|
+
/* @__PURE__ */ jsx(MainSectionTitle, { children: "INTERESTS" }),
|
|
6471
|
+
interests.map((interest, index2) => /* @__PURE__ */ jsxs(
|
|
6472
|
+
"div",
|
|
6473
|
+
{
|
|
6474
|
+
style: { marginBottom: "20px", paddingLeft: "25px" },
|
|
6475
|
+
children: [
|
|
6476
|
+
/* @__PURE__ */ jsx(WorkTitle, { children: interest.name }),
|
|
6477
|
+
interest.keywords && interest.keywords.length > 0 && /* @__PURE__ */ jsx(BadgeList, { items: interest.keywords, size: "sm" })
|
|
6478
|
+
]
|
|
6479
|
+
},
|
|
6480
|
+
index2
|
|
6481
|
+
))
|
|
6366
6482
|
] })
|
|
6367
6483
|
] })
|
|
6368
6484
|
] });
|
|
@@ -6373,13 +6489,7 @@ function render(resume, options = {}) {
|
|
|
6373
6489
|
dir = "ltr",
|
|
6374
6490
|
title = resume.basics?.name || "Resume"
|
|
6375
6491
|
} = options;
|
|
6376
|
-
const
|
|
6377
|
-
try {
|
|
6378
|
-
const html = renderToString(
|
|
6379
|
-
sheet.collectStyles(/* @__PURE__ */ jsx(Resume, { resume }))
|
|
6380
|
-
);
|
|
6381
|
-
const styles = sheet.getStyleTags();
|
|
6382
|
-
const designTokens = `
|
|
6492
|
+
const designTokens = `
|
|
6383
6493
|
:root {
|
|
6384
6494
|
--resume-font-sans: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
|
6385
6495
|
--resume-color-sidebar: #1e3a52;
|
|
@@ -6388,7 +6498,7 @@ function render(resume, options = {}) {
|
|
|
6388
6498
|
--resume-color-accent: #1e3a52;
|
|
6389
6499
|
}
|
|
6390
6500
|
`;
|
|
6391
|
-
|
|
6501
|
+
const globalStyles = `
|
|
6392
6502
|
* {
|
|
6393
6503
|
margin: 0;
|
|
6394
6504
|
padding: 0;
|
|
@@ -6412,30 +6522,18 @@ function render(resume, options = {}) {
|
|
|
6412
6522
|
}
|
|
6413
6523
|
}
|
|
6414
6524
|
`;
|
|
6415
|
-
|
|
6416
|
-
|
|
6417
|
-
<head>
|
|
6418
|
-
<meta charset="UTF-8">
|
|
6419
|
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6420
|
-
<title>${title}</title>
|
|
6421
|
-
|
|
6422
|
-
<style>
|
|
6525
|
+
return renderResumeDocument(/* @__PURE__ */ jsx(Resume, { resume }), {
|
|
6526
|
+
head: `<style>
|
|
6423
6527
|
${designTokens}
|
|
6424
|
-
</style
|
|
6425
|
-
|
|
6426
|
-
${styles}
|
|
6427
|
-
|
|
6428
|
-
<style>
|
|
6528
|
+
</style>`,
|
|
6529
|
+
headAfterStyles: `<style>
|
|
6429
6530
|
${globalStyles}
|
|
6430
|
-
</style
|
|
6431
|
-
|
|
6432
|
-
|
|
6433
|
-
|
|
6434
|
-
|
|
6435
|
-
|
|
6436
|
-
} finally {
|
|
6437
|
-
sheet.seal();
|
|
6438
|
-
}
|
|
6531
|
+
</style>`,
|
|
6532
|
+
lang: locale,
|
|
6533
|
+
dir,
|
|
6534
|
+
title,
|
|
6535
|
+
includeTokensCss: false
|
|
6536
|
+
});
|
|
6439
6537
|
}
|
|
6440
6538
|
const index = { render };
|
|
6441
6539
|
export {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "jsonresume-theme-sidebar",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.4",
|
|
4
4
|
"description": "Two-column sidebar resume theme with dark sidebar and light main content - ATS-friendly",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/index.js",
|
|
@@ -28,12 +28,14 @@
|
|
|
28
28
|
"react": "^19.2.0",
|
|
29
29
|
"react-dom": "^19.2.0",
|
|
30
30
|
"styled-components": "^6.1.19",
|
|
31
|
-
"@jsonresume/core": "0.3.
|
|
31
|
+
"@jsonresume/core": "0.3.2"
|
|
32
32
|
},
|
|
33
33
|
"devDependencies": {
|
|
34
|
-
"vitest": "^1.6.0",
|
|
35
34
|
"@vitejs/plugin-react": "^4.3.4",
|
|
36
|
-
"vite": "^
|
|
35
|
+
"vite": "^6.4.3",
|
|
36
|
+
"vitest": "^3.2.6",
|
|
37
|
+
"@jsonresume/sample-data": "0.2.1",
|
|
38
|
+
"@jsonresume/theme-kit": "1.0.2"
|
|
37
39
|
},
|
|
38
40
|
"peerDependencies": {
|
|
39
41
|
"react": "^18.0.0 || ^19.0.0",
|
package/src/Resume.jsx
CHANGED
|
@@ -695,6 +695,24 @@ function Resume({ resume }) {
|
|
|
695
695
|
</ReferenceGrid>
|
|
696
696
|
</MainSection>
|
|
697
697
|
)}
|
|
698
|
+
|
|
699
|
+
{/* Interests Section */}
|
|
700
|
+
{interests.length > 0 && (
|
|
701
|
+
<MainSection>
|
|
702
|
+
<MainSectionTitle>INTERESTS</MainSectionTitle>
|
|
703
|
+
{interests.map((interest, index) => (
|
|
704
|
+
<div
|
|
705
|
+
key={index}
|
|
706
|
+
style={{ marginBottom: '20px', paddingLeft: '25px' }}
|
|
707
|
+
>
|
|
708
|
+
<WorkTitle>{interest.name}</WorkTitle>
|
|
709
|
+
{interest.keywords && interest.keywords.length > 0 && (
|
|
710
|
+
<BadgeList items={interest.keywords} size="sm" />
|
|
711
|
+
)}
|
|
712
|
+
</div>
|
|
713
|
+
))}
|
|
714
|
+
</MainSection>
|
|
715
|
+
)}
|
|
698
716
|
</MainContent>
|
|
699
717
|
</Layout>
|
|
700
718
|
);
|
package/src/index.jsx
CHANGED
|
@@ -1,5 +1,4 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { ServerStyleSheet } from 'styled-components';
|
|
1
|
+
import { renderResumeDocument } from '@jsonresume/core/ssr';
|
|
3
2
|
import Resume from './Resume.jsx';
|
|
4
3
|
|
|
5
4
|
/**
|
|
@@ -17,16 +16,7 @@ export function render(resume, options = {}) {
|
|
|
17
16
|
title = resume.basics?.name || 'Resume',
|
|
18
17
|
} = options;
|
|
19
18
|
|
|
20
|
-
const
|
|
21
|
-
|
|
22
|
-
try {
|
|
23
|
-
const html = renderToString(
|
|
24
|
-
sheet.collectStyles(<Resume resume={resume} />)
|
|
25
|
-
);
|
|
26
|
-
|
|
27
|
-
const styles = sheet.getStyleTags();
|
|
28
|
-
|
|
29
|
-
const designTokens = `
|
|
19
|
+
const designTokens = `
|
|
30
20
|
:root {
|
|
31
21
|
--resume-font-sans: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
|
32
22
|
--resume-color-sidebar: #1e3a52;
|
|
@@ -36,7 +26,7 @@ export function render(resume, options = {}) {
|
|
|
36
26
|
}
|
|
37
27
|
`;
|
|
38
28
|
|
|
39
|
-
|
|
29
|
+
const globalStyles = `
|
|
40
30
|
* {
|
|
41
31
|
margin: 0;
|
|
42
32
|
padding: 0;
|
|
@@ -61,30 +51,18 @@ export function render(resume, options = {}) {
|
|
|
61
51
|
}
|
|
62
52
|
`;
|
|
63
53
|
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
<head>
|
|
67
|
-
<meta charset="UTF-8">
|
|
68
|
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
69
|
-
<title>${title}</title>
|
|
70
|
-
|
|
71
|
-
<style>
|
|
54
|
+
return renderResumeDocument(<Resume resume={resume} />, {
|
|
55
|
+
head: `<style>
|
|
72
56
|
${designTokens}
|
|
73
|
-
</style
|
|
74
|
-
|
|
75
|
-
${styles}
|
|
76
|
-
|
|
77
|
-
<style>
|
|
57
|
+
</style>`,
|
|
58
|
+
headAfterStyles: `<style>
|
|
78
59
|
${globalStyles}
|
|
79
|
-
</style
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
} finally {
|
|
86
|
-
sheet.seal();
|
|
87
|
-
}
|
|
60
|
+
</style>`,
|
|
61
|
+
lang: locale,
|
|
62
|
+
dir,
|
|
63
|
+
title,
|
|
64
|
+
includeTokensCss: false,
|
|
65
|
+
});
|
|
88
66
|
}
|
|
89
67
|
|
|
90
68
|
export { Resume };
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import { describe, it, expect } from 'vitest';
|
|
2
|
+
import { runThemeRenderQa } from '@jsonresume/theme-kit/qa';
|
|
3
|
+
import { completeResume } from '@jsonresume/sample-data';
|
|
4
|
+
import { render } from '../src/index.jsx';
|
|
5
|
+
|
|
6
|
+
describe('Sidebar Theme', () => {
|
|
7
|
+
it('passes the shared theme render QA gate', async () => {
|
|
8
|
+
await runThemeRenderQa({ render, name: 'sidebar', expect });
|
|
9
|
+
});
|
|
10
|
+
|
|
11
|
+
it('renders expected fields from the standard fixture', () => {
|
|
12
|
+
const html = render(completeResume);
|
|
13
|
+
|
|
14
|
+
expect(html.length).toBeGreaterThan(0);
|
|
15
|
+
expect(html).toContain('<!DOCTYPE html>');
|
|
16
|
+
expect(html).toContain('Jane Developer');
|
|
17
|
+
expect(html).toContain('jane.developer@example.com');
|
|
18
|
+
expect(html).toContain('</html>');
|
|
19
|
+
});
|
|
20
|
+
});
|
package/dist/style.css
DELETED
|
@@ -1,139 +0,0 @@
|
|
|
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
|
-
}
|