@jsonresume/jsonresume-theme-professional 1.0.18 → 1.0.19

package/package.json

@@ -1,22 +1,37 @@
 {
   "private": false,
   "name": "@jsonresume/jsonresume-theme-professional",
-  "version": "1.0.18",
-  "main": "./src/index.js",
+  "version": "1.0.19",
+  "main": "./src/index.jsx",
   "license": "MIT",
   "devDependencies": {
     "@repo/eslint-config-custom": "workspace:^",
-    "react": "^18",
-    "styled-components": "^6"
+    "react": "^19.2.0",
+    "styled-components": "^6.1.19",
+    "@vitejs/plugin-react": "^4.3.4",
+    "vite": "^5.4.21"
   },
   "peerDependencies": {
     "styled-components": "^6"
   },
   "scripts": {
-    "lint": "eslint ."
+    "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"
+  },
+  "exports": {
+    ".": {
+      "import": "./src/index.jsx",
+      "default": "./src/index.jsx"
+    },
+    "./dist": {
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    }
   }
 }

package/src/{index.js → index.jsx}

@@ -52,7 +52,7 @@ export const render = (resume) => {
     html {
       font-family:LatinModern, "Courier New", monospace;
       background: #fff;
-      font-size: 10px;
+      font-size: 11px;
     }
 
     h2 {

package/src/ui/{Awards.js → Awards.jsx}

@@ -1,5 +1,5 @@
-import Section from './Section';
-import Experience from './Experience';
+import Section from './Section.jsx';
+import Experience from './Experience.jsx';
 
 const Awards = ({ awards }) => {
   if (!awards) {

package/src/ui/{Certificates.js → Certificates.jsx}

@@ -1,5 +1,5 @@
-import Section from './Section';
-import Experience from './Experience';
+import Section from './Section.jsx';
+import Experience from './Experience.jsx';
 
 const Certificates = ({ certificates }) => {
   if (!certificates) {

package/src/ui/{DateRange.js → DateRange.jsx}

@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import Date from './Date';
+import Date from './Date.jsx';
 
 const Range = styled.div`
   display: flex;

package/src/ui/{Education.js → Education.jsx}

@@ -1,5 +1,5 @@
-import Section from './Section';
-import Experience from './Experience';
+import Section from './Section.jsx';
+import Experience from './Experience.jsx';
 
 const Education = ({ education }) => {
   if (!education) {

package/src/ui/{Experience.js → Experience.jsx}

@@ -1,7 +1,8 @@
 import styled from 'styled-components';
-import List from './List';
-import DateRange from './DateRange';
-import Date from './Date';
+import { marked } from 'marked';
+import List from './List.jsx';
+import DateRange from './DateRange.jsx';
+import Date from './Date.jsx';
 
 const Meta = styled.div`
   display: flex;
@@ -25,7 +26,7 @@ const Container = styled.div`
   margin-bottom: 10px;
 `;
 
-const Summary = styled.p`
+const Summary = styled.div`
   margin-bottom: 5px;
 `;
 
@@ -38,6 +39,8 @@ const Experience = ({
   summary,
   highlights,
 }) => {
+  const htmlSummary = summary ? marked.parse(summary, { breaks: true }) : '';
+
   return (
     <Container>
       <Meta>
@@ -52,7 +55,9 @@ const Experience = ({
       </Meta>
       {subTitle && <SubTitle>{subTitle}</SubTitle>}
       <div className="secondary">
-        {summary && <Summary>{summary}</Summary>}
+        {summary && (
+          <Summary dangerouslySetInnerHTML={{ __html: htmlSummary }} />
+        )}
         <List items={highlights} />
       </div>
     </Container>

package/src/ui/{Hero.js → Hero.jsx}

@@ -8,7 +8,7 @@ import {
   FaLink,
   FaLinkedin,
 } from 'react-icons/fa';
-import Section from './Section';
+import Section from './Section.jsx';
 
 const Title = styled.div`
   font-size: 3rem;

package/src/ui/{Interests.js → Interests.jsx}

@@ -1,5 +1,5 @@
-import OneLineList from './OneLineList';
-import Section from './Section';
+import OneLineList from './OneLineList.jsx';
+import Section from './Section.jsx';
 
 const Interests = ({ interests }) => {
   // check if interests is null, empty, empty string or empty array

package/src/ui/{Languages.js → Languages.jsx}

@@ -1,6 +1,6 @@
-import OneLineList from './OneLineList';
+import OneLineList from './OneLineList.jsx';
 
-import Section from './Section';
+import Section from './Section.jsx';
 
 const Languages = ({ languages }) => {
   if (!languages) {

package/src/ui/{List.js → List.jsx}

@@ -1,4 +1,5 @@
 import styled from 'styled-components';
+import { marked } from 'marked';
 
 const ListContainer = styled.ul`
   padding-left: 20px;
@@ -19,9 +20,12 @@ const List = ({ items }) => {
 
   return (
     <ListContainer>
-      {items.map((item) => (
-        <li key={item}>{item}</li>
-      ))}
+      {items.map((item, index) => {
+        const htmlContent = marked.parseInline(item, { breaks: true });
+        return (
+          <li key={index} dangerouslySetInnerHTML={{ __html: htmlContent }} />
+        );
+      })}
     </ListContainer>
   );
 };

package/src/ui/{Projects.js → Projects.jsx}

@@ -1,5 +1,5 @@
-import Section from './Section';
-import Experience from './Experience';
+import Section from './Section.jsx';
+import Experience from './Experience.jsx';
 
 const Work = ({ projects }) => {
   if (!projects) {

package/src/ui/{Publications.js → Publications.jsx}

@@ -1,5 +1,5 @@
-import Section from './Section';
-import Experience from './Experience';
+import Section from './Section.jsx';
+import Experience from './Experience.jsx';
 
 const Publications = ({ publications }) => {
   if (!publications) {

package/src/ui/{References.js → References.jsx}

@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import Section from './Section';
+import Section from './Section.jsx';
 
 const Name = styled.div`
   font-weight: 600;

package/src/ui/{Resume.js → Resume.jsx}

@@ -1,17 +1,17 @@
 import styled from 'styled-components';
-import Projects from './Projects';
-import Hero from './Hero';
-import Summary from './Summary';
-import Education from './Education';
-import Work from './Work';
-import Certificates from './Certificates';
-import Publications from './Publications';
-import Awards from './Awards';
-import Skills from './Skills';
-import Interests from './Interests';
-import Languages from './Languages';
-import References from './References';
-import Volunteer from './Volunteer';
+import Projects from './Projects.jsx';
+import Hero from './Hero.jsx';
+import Summary from './Summary.jsx';
+import Education from './Education.jsx';
+import Work from './Work.jsx';
+import Certificates from './Certificates.jsx';
+import Publications from './Publications.jsx';
+import Awards from './Awards.jsx';
+import Skills from './Skills.jsx';
+import Interests from './Interests.jsx';
+import Languages from './Languages.jsx';
+import References from './References.jsx';
+import Volunteer from './Volunteer.jsx';
 
 const Layout = styled.div`
   max-width: 660px;
@@ -25,13 +25,13 @@ const Resume = ({ resume }) => {
     <Layout>
       <Hero basics={resume.basics} />
       <Summary basics={resume.basics} />
-      <Education education={resume.education} />
       <Work work={resume.work} />
       <Projects projects={resume.projects} />
-      <Volunteer volunteer={resume.volunteer} />
+      <Education education={resume.education} />
       <Certificates certificates={resume.certificates} />
       <Publications publications={resume.publications} />
       <Awards awards={resume.awards} />
+      <Volunteer volunteer={resume.volunteer} />
       <Languages languages={resume.languages} />
       <Skills skills={resume.skills} />
       <Interests interests={resume.interests} />

package/src/ui/{Skills.js → Skills.jsx}

@@ -1,6 +1,6 @@
-import OneLineList from './OneLineList';
+import OneLineList from './OneLineList.jsx';
 
-import Section from './Section';
+import Section from './Section.jsx';
 
 const Skills = ({ skills }) => {
   if (!skills) {

package/src/ui/Summary.jsx

@@ -0,0 +1,20 @@
+import styled from 'styled-components';
+import { marked } from 'marked';
+import Section from './Section.jsx';
+
+const Summary = styled.div``;
+
+const SummaryComponent = ({ basics }) => {
+  const { summary } = basics;
+  const htmlContent = summary ? marked.parse(summary, { breaks: true }) : '';
+
+  return (
+    <Section>
+      <div className="secondary">
+        <Summary dangerouslySetInnerHTML={{ __html: htmlContent }} />
+      </div>
+    </Section>
+  );
+};
+
+export default SummaryComponent;

package/src/ui/{Volunteer.js → Volunteer.jsx}

@@ -1,5 +1,5 @@
-import Section from './Section';
-import Experience from './Experience';
+import Section from './Section.jsx';
+import Experience from './Experience.jsx';
 
 const Volunteer = ({ volunteer }) => {
   if (!volunteer) {

package/src/ui/{Work.js → Work.jsx}

@@ -1,5 +1,5 @@
-import Section from './Section';
-import Experience from './Experience';
+import Section from './Section.jsx';
+import Experience from './Experience.jsx';
 
 const Work = ({ work }) => {
   if (!work) {

package/vite.config.js

@@ -0,0 +1,33 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig({
+  plugins: [react()],
+  build: {
+    ssr: true,
+    target: 'node18',
+    outDir: './dist',
+    emptyOutDir: true,
+    minify: false,
+    lib: {
+      entry: './src/index.jsx',
+      formats: ['es'],
+      fileName: 'index',
+    },
+    rollupOptions: {
+      external: ['react', 'react-dom', 'react-dom/server', 'react/jsx-runtime'],
+      output: {
+        exports: 'named',
+      },
+    },
+  },
+  ssr: {
+    // Force bundle these packages instead of externalizing
+    noExternal: [
+      'styled-components',
+      '@emotion/is-prop-valid',
+      'stylis',
+      'shallowequal',
+    ],
+  },
+});

package/.turbo/turbo-lint.log

@@ -1,5 +0,0 @@
-
-> jsonresume-theme-professional@0.0.0 lint /home/ajax/repos/jsonresume.org/packages/jsonresume-theme-professional
-> eslint .
-
-Pages directory cannot be found at /home/ajax/repos/jsonresume.org/packages/jsonresume-theme-professional/pages or /home/ajax/repos/jsonresume.org/packages/jsonresume-theme-professional/src/pages. If using a custom path, please configure with the `no-html-link-for-pages` rule in your eslint config file.

package/src/ui/Summary.js

@@ -1,17 +0,0 @@
-import styled from 'styled-components';
-import Section from './Section';
-
-const Summary = styled.p``;
-
-const SummaryComponent = ({ basics }) => {
-  const { summary } = basics;
-  return (
-    <Section>
-      <div className="secondary">
-        <Summary>{summary}</Summary>
-      </div>
-    </Section>
-  );
-};
-
-export default SummaryComponent;