npm - jsonresume-theme-sidebar - Versions diffs - 0.2.2 → 0.2.3 - Mend

jsonresume-theme-sidebar 0.2.2 → 0.2.3

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.

Files changed (4) hide show

package/CHANGELOG.md CHANGED Viewed

@@ -1,5 +1,13 @@
 # jsonresume-theme-sidebar
+## 0.2.3
+### Patch Changes
+- eb7f950: use @jsonresume/core/ssr renderResumeDocument
+- Updated dependencies [ff09f75]
+  - @jsonresume/core@0.3.1
 ## 0.2.2
 ### Patch Changes

package/dist/index.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { renderToString } from "react-dom/server";
+import { renderToStaticMarkup } from "react-dom/server";
 import o, { useRef, useContext, useState, useMemo, useEffect, useDebugValue, createElement, createContext } from "react";
 var __assign = function() {
   __assign = Object.assign || function __assign2(t) {
@@ -1300,6 +1300,66 @@ var vt = /^\s*<\/[a-z]/i, gt = (function() {
 "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");
 var wt = "__sc-".concat(f, "__");
 "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);
+const CSS_RESET = "<style>*,*::before,*::after{box-sizing:border-box}html,body{margin:0;padding:0}body{-webkit-font-smoothing:antialiased}</style>";
+const TOKENS_CSS_HREF = "https://unpkg.com/@jsonresume/core/dist/tokens.css";
+const FONTS_PRECONNECT = '<link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>';
+function isHref(value) {
+  return /^(https?:)?\/\//.test(value) || value.trim().startsWith("<link");
+}
+function familyParam(family) {
+  const [name, ...rest] = String(family).split(":");
+  const encodedName = name.trim().replace(/\s+/g, "+");
+  return rest.length ? `${encodedName}:${rest.join(":")}` : encodedName;
+}
+function googleFontsLinks(families) {
+  if (!Array.isArray(families) || families.length === 0) return "";
+  const passthrough = [];
+  const names = [];
+  for (const entry of families) {
+    if (entry == null || entry === "") continue;
+    if (isHref(entry)) passthrough.push(entry);
+    else names.push(entry);
+  }
+  const links = passthrough.map(
+    (href) => href.trim().startsWith("<link") ? href : `<link href="${href}" rel="stylesheet">`
+  );
+  if (names.length > 0) {
+    const query = names.map(familyParam).join("&family=");
+    links.unshift(
+      `<link href="https://fonts.googleapis.com/css2?family=${query}&display=swap" rel="stylesheet">`
+    );
+  }
+  if (links.length === 0) return "";
+  return FONTS_PRECONNECT + links.join("");
+}
+function renderResumeDocument(element, options = {}) {
+  const {
+    fonts,
+    title,
+    lang = "en",
+    dir = "ltr",
+    reset = false,
+    head = "",
+    headAfterStyles = "",
+    includeTokensCss = true,
+    bodyClass
+  } = options;
+  const sheet = new gt();
+  let html;
+  let styleTags;
+  try {
+    html = renderToStaticMarkup(sheet.collectStyles(element));
+    styleTags = sheet.getStyleTags();
+  } finally {
+    sheet.seal();
+  }
+  const fontLinks = googleFontsLinks(fonts);
+  const tokensLink = includeTokensCss ? `<link rel="stylesheet" href="${TOKENS_CSS_HREF}">` : "";
+  const resetTag = reset ? CSS_RESET : "";
+  const titleTag = title ? `<title>${title}</title>` : "";
+  const bodyAttr = bodyClass ? ` class="${bodyClass}"` : "";
+  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>`;
+}
 createContext({
   theme: "professional",
   setTheme: () => {
@@ -1453,7 +1513,6 @@ function safeUrl(url) {
   const trimmed = url.trim();
   const dangerousProtocols = /^(javascript|data|vbscript|file|about):/i;
   if (dangerousProtocols.test(trimmed)) {
-    console.warn(`[Security] Blocked dangerous URL: ${trimmed.slice(0, 50)}`);
     return null;
   }
   const safeProtocols = /^(https?|mailto|tel|sms|ftp):/i;
@@ -1469,7 +1528,6 @@ function safeUrl(url) {
   if (/^[a-z0-9][a-z0-9.-]+\.[a-z]{2,}$/i.test(trimmed)) {
     return `https://${trimmed}`;
   }
-  console.warn(`[Security] Uncertain URL safety: ${trimmed.slice(0, 50)}`);
   return trimmed;
 }
 function getLinkRel(url, openInNewTab = false) {
@@ -6373,13 +6431,7 @@ function render(resume, options = {}) {
     dir = "ltr",
     title = resume.basics?.name || "Resume"
   } = options;
-  const sheet = new gt();
-  try {
-    const html = renderToString(
-      sheet.collectStyles(/* @__PURE__ */ jsx(Resume, { resume }))
-    );
-    const styles = sheet.getStyleTags();
-    const designTokens = `
+  const designTokens = `
     :root {
       --resume-font-sans: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
       --resume-color-sidebar: #1e3a52;
@@ -6388,7 +6440,7 @@ function render(resume, options = {}) {
       --resume-color-accent: #1e3a52;
     }
   `;
-    const globalStyles = `
+  const globalStyles = `
     * {
       margin: 0;
       padding: 0;
@@ -6412,30 +6464,18 @@ function render(resume, options = {}) {
       }
     }
   `;
-    return `<!DOCTYPE html>
-<html lang="${locale}" dir="${dir}">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>${title}</title>
-  <style>
+  return renderResumeDocument(/* @__PURE__ */ jsx(Resume, { resume }), {
+    head: `<style>
     ${designTokens}
-  </style>
-  ${styles}
-  <style>
+  </style>`,
+    headAfterStyles: `<style>
     ${globalStyles}
-  </style>
-</head>
-<body>
-  ${html}
-</body>
-</html>`;
-  } finally {
-    sheet.seal();
-  }
+  </style>`,
+    lang: locale,
+    dir,
+    title,
+    includeTokensCss: false
+  });
 }
 const index = { render };
 export {

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "jsonresume-theme-sidebar",
-  "version": "0.2.2",
+  "version": "0.2.3",
   "description": "Two-column sidebar resume theme with dark sidebar and light main content - ATS-friendly",
   "type": "module",
   "main": "./dist/index.js",
@@ -28,7 +28,7 @@
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
     "styled-components": "^6.1.19",
-    "@jsonresume/core": "0.3.0"
+    "@jsonresume/core": "0.3.1"
   },
   "devDependencies": {
     "vitest": "^1.6.0",

package/src/index.jsx CHANGED Viewed

@@ -1,5 +1,4 @@
-import { renderToString } from 'react-dom/server';
-import { ServerStyleSheet } from 'styled-components';
+import { renderResumeDocument } from '@jsonresume/core/ssr';
 import Resume from './Resume.jsx';
 /**
@@ -17,16 +16,7 @@ export function render(resume, options = {}) {
     title = resume.basics?.name || 'Resume',
   } = options;
-  const sheet = new ServerStyleSheet();
-  try {
-    const html = renderToString(
-      sheet.collectStyles(<Resume resume={resume} />)
-    );
-    const styles = sheet.getStyleTags();
-    const designTokens = `
+  const designTokens = `
     :root {
       --resume-font-sans: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
       --resume-color-sidebar: #1e3a52;
@@ -36,7 +26,7 @@ export function render(resume, options = {}) {
     }
   `;
-    const globalStyles = `
+  const globalStyles = `
     * {
       margin: 0;
       padding: 0;
@@ -61,30 +51,18 @@ export function render(resume, options = {}) {
     }
   `;
-    return `<!DOCTYPE html>
-<html lang="${locale}" dir="${dir}">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>${title}</title>
-  <style>
+  return renderResumeDocument(<Resume resume={resume} />, {
+    head: `<style>
     ${designTokens}
-  </style>
-  ${styles}
-  <style>
+  </style>`,
+    headAfterStyles: `<style>
     ${globalStyles}
-  </style>
-</head>
-<body>
-  ${html}
-</body>
-</html>`;
-  } finally {
-    sheet.seal();
-  }
+  </style>`,
+    lang: locale,
+    dir,
+    title,
+    includeTokensCss: false,
+  });
 }
 export { Resume };