@jsonresume/jsonresume-theme-professional 1.0.19 → 1.0.20

package/CHANGELOG.md

@@ -0,0 +1,9 @@
+# @jsonresume/jsonresume-theme-professional
+
+## 1.0.20
+
+### Patch Changes
+
+- 965cf57: use @jsonresume/core/ssr renderResumeDocument
+- Updated dependencies [ff09f75]
+  - @jsonresume/core@0.3.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2014-2026 JSON Resume contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/index.mjs

@@ -1,5 +1,5 @@
-import { jsxs, jsx, Fragment } from "react/jsx-runtime";
-import { renderToString } from "react-dom/server";
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { renderToStaticMarkup } from "react-dom/server";
 import o, { useState, useMemo, useEffect, useContext, useDebugValue, createElement, useRef } from "react";
 import { marked } from "marked";
 import { FaMapPin, FaEnvelope, FaPhoneAlt, FaLink, FaLinkedin, FaGithub, FaTwitter } from "react-icons/fa";
@@ -1271,6 +1271,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>`;
+}
 const Section = dt.div`
   max-width: 700px;
   margin: 0 auto 18px;
@@ -1687,30 +1747,29 @@ const Resume = ({ resume }) => {
   ] });
 };
 const render = (resume) => {
-  const sheet = new gt();
-  const html = renderToString(sheet.collectStyles(/* @__PURE__ */ jsx(Resume, { resume })));
-  const styles = sheet.getStyleTags();
-  return `<!DOCTYPE html><head>
-  <title>${resume.basics.name} - Resume</title>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1"/>
-  <style>
+  return renderResumeDocument(
+    /* @__PURE__ */ jsx("main", { children: /* @__PURE__ */ jsx(Resume, { resume }) }),
+    {
+      head: `<style>
     @font-face {
       font-family: LatinModern;
       font-style: normal;
       font-weight: normal;
+      font-display: swap;
       src: url("/fonts/lmroman10-regular.otf") format("opentype");
     }
 
     @font-face {
       font-family: LatinModern;
       font-weight: bold;
+      font-display: swap;
       src: url("/fonts/lmroman10-bold.otf") format("opentype");
     }
 
     @font-face {
       font-family: LatinModern;
       font-style: italic;
+      font-display: swap;
       src: url("/fonts/lmroman10-italic.otf") format("opentype");
     }
 
@@ -1718,18 +1777,21 @@ const render = (resume) => {
       font-family: LatinModernSans;
       font-style: normal;
       font-weight: normal;
+      font-display: swap;
       src: url("/fonts/lmsans10-regular.otf") format("opentype");
     }
 
     @font-face {
       font-family: LatinModernSans;
       font-weight: bold;
+      font-display: swap;
       src: url("/fonts/lmsans10-bold.otf") format("opentype");
     }
 
     @font-face {
       font-family: LatinModernSans;
       font-style: italic;
+      font-display: swap;
       src: url("/fonts/lmsans10-italic.otf") format("opentype");
     }
 
@@ -1775,8 +1837,13 @@ const render = (resume) => {
 
 
 
-  </style>
-  ${styles}</head><body>${html}</body></html>`;
+  </style>`,
+      lang: "en",
+      dir: "ltr",
+      title: `${resume.basics.name} - Resume`,
+      includeTokensCss: false
+    }
+  );
 };
 export {
   Resume,

package/package.json

@@ -1,28 +1,24 @@
 {
   "private": false,
   "name": "@jsonresume/jsonresume-theme-professional",
-  "version": "1.0.19",
+  "version": "1.0.20",
   "main": "./src/index.jsx",
   "license": "MIT",
   "devDependencies": {
-    "@repo/eslint-config-custom": "workspace:^",
     "react": "^19.2.0",
     "styled-components": "^6.1.19",
     "@vitejs/plugin-react": "^4.3.4",
-    "vite": "^5.4.21"
+    "vite": "^5.4.21",
+    "@repo/eslint-config-custom": "^0.0.0"
   },
   "peerDependencies": {
     "styled-components": "^6"
   },
-  "scripts": {
-    "lint": "eslint src || exit 0",
-    "publish": "npm publish --access public",
-    "build": "vite build"
-  },
   "dependencies": {
     "marked": "^16.3.0",
     "prismjs": "^1.29.0",
-    "react-icons": "^5.0.1"
+    "react-icons": "^5.0.1",
+    "@jsonresume/core": "0.3.1"
   },
   "exports": {
     ".": {
@@ -33,5 +29,9 @@
       "import": "./dist/index.js",
       "default": "./dist/index.js"
     }
+  },
+  "scripts": {
+    "lint": "eslint src || exit 0",
+    "build": "vite build"
   }
-}
+}

package/src/index.jsx

@@ -1,32 +1,32 @@
-import { renderToString } from 'react-dom/server';
-import { ServerStyleSheet } from 'styled-components';
+import { renderResumeDocument } from '@jsonresume/core/ssr';
 import Resume from './ui/Resume';
 
 export const render = (resume) => {
-  const sheet = new ServerStyleSheet();
-  const html = renderToString(sheet.collectStyles(<Resume resume={resume} />));
-  const styles = sheet.getStyleTags();
-  return `<!DOCTYPE html><head>
-  <title>${resume.basics.name} - Resume</title>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1"/>
-  <style>
+  return renderResumeDocument(
+    <main>
+      <Resume resume={resume} />
+    </main>,
+    {
+      head: `<style>
     @font-face {
       font-family: LatinModern;
       font-style: normal;
       font-weight: normal;
+      font-display: swap;
       src: url("/fonts/lmroman10-regular.otf") format("opentype");
     }
 
     @font-face {
       font-family: LatinModern;
       font-weight: bold;
+      font-display: swap;
       src: url("/fonts/lmroman10-bold.otf") format("opentype");
     }
 
     @font-face {
       font-family: LatinModern;
       font-style: italic;
+      font-display: swap;
       src: url("/fonts/lmroman10-italic.otf") format("opentype");
     }
 
@@ -34,18 +34,21 @@ export const render = (resume) => {
       font-family: LatinModernSans;
       font-style: normal;
       font-weight: normal;
+      font-display: swap;
       src: url("/fonts/lmsans10-regular.otf") format("opentype");
     }
 
     @font-face {
       font-family: LatinModernSans;
       font-weight: bold;
+      font-display: swap;
       src: url("/fonts/lmsans10-bold.otf") format("opentype");
     }
 
     @font-face {
       font-family: LatinModernSans;
       font-style: italic;
+      font-display: swap;
       src: url("/fonts/lmsans10-italic.otf") format("opentype");
     }
 
@@ -91,8 +94,13 @@ export const render = (resume) => {
 
 
 
-  </style>
-  ${styles}</head><body>${html}</body></html>`;
+  </style>`,
+      lang: 'en',
+      dir: 'ltr',
+      title: `${resume.basics.name} - Resume`,
+      includeTokensCss: false,
+    }
+  );
 };
 
 export { Resume };

package/.turbo/turbo-build.log

@@ -1,11 +0,0 @@
-
-> @jsonresume/jsonresume-theme-professional@1.0.18 build /Users/ajaxdavis/repos/jsonresume.org/packages/themes/jsonresume-theme-professional
-> vite build
-
-The CJS build of Vite's Node API is deprecated. See https://vite.dev/guide/troubleshooting.html#vite-cjs-node-api-deprecated for more details.
-vite v5.4.21 building SSR bundle for production...
-transforming...
-✓ 36 modules transformed.
-rendering chunks...
-dist/index.mjs  74.83 kB
-✓ built in 1.58s