npm - @jsonresume/jsonresume-theme-professional - Versions diffs - 1.0.15 → 1.0.18 - Mend

@jsonresume/jsonresume-theme-professional 1.0.15 → 1.0.18

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 (28) hide show

package/.eslintrc.js ADDED Viewed

@@ -0,0 +1,8 @@
+/* eslint-disable */
+module.exports = {
+  root: true,
+  extends: ['@repo/eslint-config-custom'],
+  parser: '@typescript-eslint/parser',
+  rules: {},
+};

package/.turbo/turbo-lint.log ADDED Viewed

@@ -0,0 +1,5 @@
+> 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/README.md CHANGED Viewed

@@ -4,6 +4,3 @@ figure out a way to give a lot of credit to
 https://github.com/BartoszJarocki/cv
 https://github.com/midudev/minimalist-portfolio-json
-npm publish --access=public

package/package.json CHANGED Viewed

@@ -1,45 +1,22 @@
 {
-  "name": "@jsonresume/jsonresume-theme-professional",
-  "version": "1.0.15",
   "private": false,
+  "name": "@jsonresume/jsonresume-theme-professional",
+  "version": "1.0.18",
+  "main": "./src/index.js",
   "license": "MIT",
-  "type": "module",
-  "module": "dist/es/index.mjs",
-  "exports": {
-      ".": {
-          "import": "./dist/es/index.mjs"
-      },
-      "./package.json": "./package.json"
-  },
-  "files": [
-    "dist"
-  ],
   "devDependencies": {
-    "eslint-config-custom": "workspace:^"
+    "@repo/eslint-config-custom": "workspace:^",
+    "react": "^18",
+    "styled-components": "^6"
   },
   "peerDependencies": {
-    "react": "^18.3.1",
     "styled-components": "^6"
   },
   "scripts": {
-    "lint": "eslint .",
-    "build": "rollup -c",
-    "prepublishOnly": "npm run build"
+    "lint": "eslint ."
   },
   "dependencies": {
-    "@babel/cli": "^7.24.7",
-    "@babel/core": "^7.24.6",
-    "@babel/preset-env": "^7.23.6",
-    "@babel/preset-react": "^7.24.7",
-    "@rollup/plugin-babel": "^6.0.4",
-    "@rollup/plugin-commonjs": "^26.0.1",
-    "@rollup/plugin-node-resolve": "^15.2.3",
-    "@rollup/plugin-replace": "^5.0.7",
-    "babel-plugin-styled-components": "^2.1.4",
-    "babel-preset-react": "^6.24.1",
     "prismjs": "^1.29.0",
-    "react-dom": "^18.3.1",
-    "react-icons": "^5.0.1",
-    "rollup": "^4.18.0"
+    "react-icons": "^5.0.1"
   }
 }

package/src/index.js ADDED Viewed

@@ -0,0 +1,98 @@
+import { renderToString } from 'react-dom/server';
+import { ServerStyleSheet } from 'styled-components';
+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>
+    @font-face {
+      font-family: LatinModern;
+      font-style: normal;
+      font-weight: normal;
+      src: url("/fonts/lmroman10-regular.otf") format("opentype");
+    }
+    @font-face {
+      font-family: LatinModern;
+      font-weight: bold;
+      src: url("/fonts/lmroman10-bold.otf") format("opentype");
+    }
+    @font-face {
+      font-family: LatinModern;
+      font-style: italic;
+      src: url("/fonts/lmroman10-italic.otf") format("opentype");
+    }
+     @font-face {
+      font-family: LatinModernSans;
+      font-style: normal;
+      font-weight: normal;
+      src: url("/fonts/lmsans10-regular.otf") format("opentype");
+    }
+    @font-face {
+      font-family: LatinModernSans;
+      font-weight: bold;
+      src: url("/fonts/lmsans10-bold.otf") format("opentype");
+    }
+    @font-face {
+      font-family: LatinModernSans;
+      font-style: italic;
+      src: url("/fonts/lmsans10-italic.otf") format("opentype");
+    }
+    html {
+      font-family:LatinModern, "Courier New", monospace;
+      background: #fff;
+      font-size: 10px;
+    }
+    h2 {
+      font-size: 1.65rem;
+    }
+    p {
+      padding: 0;
+      margin: 0;
+    }
+    p, li {
+      font-size: 1.4rem;
+      line-height: 1.5rem;
+    }
+    .secondary {
+      color: #111;
+    }
+    a {
+      text-decoration: none;
+    }
+    ul {
+      list-style: none;
+      margin: 0;
+      padding: 0;
+    }
+    *,
+    *::before,
+    *::after {
+      box-sizing: border-box;
+    }
+  </style>
+  ${styles}</head><body>${html}</body></html>`;
+};
+export { Resume };

package/src/ui/Awards.js ADDED Viewed

@@ -0,0 +1,28 @@
+import Section from './Section';
+import Experience from './Experience';
+const Awards = ({ awards }) => {
+  if (!awards) {
+    return null;
+  }
+  return (
+    <div>
+      <Section title="Awards">
+        {awards.map((a, key) => {
+          return (
+            <Experience
+              title={a.title}
+              subTitle={a.awarder}
+              date={a.date}
+              summary={a.summary}
+              key={key}
+            />
+          );
+        })}
+      </Section>
+    </div>
+  );
+};
+export default Awards;

package/src/ui/Certificates.js ADDED Viewed

@@ -0,0 +1,27 @@
+import Section from './Section';
+import Experience from './Experience';
+const Certificates = ({ certificates }) => {
+  if (!certificates) {
+    return null;
+  }
+  return (
+    <div>
+      <Section title="Certificates">
+        {certificates.map((c, key) => {
+          return (
+            <Experience
+              title={c.name}
+              subTitle={c.issuer}
+              date={c.date}
+              key={key}
+            />
+          );
+        })}
+      </Section>
+    </div>
+  );
+};
+export default Certificates;

package/src/ui/Date.js ADDED Viewed

@@ -0,0 +1,21 @@
+import styled from 'styled-components';
+const Text = styled.div`
+  font-style: italic;
+  font-size: 1.4rem;
+`;
+const DateComponent = ({ date }) => {
+  if (!date) {
+    return <Text>Present</Text>;
+  }
+  const fullDate = new Date(date);
+  const options = { year: 'numeric', month: 'long' };
+  const formattedDate = fullDate.toLocaleDateString('en-US', options);
+  return <Text>{formattedDate ?? 'Present'}</Text>;
+};
+export default DateComponent;

package/src/ui/DateRange.js ADDED Viewed

@@ -0,0 +1,20 @@
+import styled from 'styled-components';
+import Date from './Date';
+const Range = styled.div`
+  display: flex;
+  font-style: italic;
+  font-size: 13px;
+`;
+const DateRange = ({ startDate, endDate }) => {
+  return (
+    <Range>
+      <Date date={startDate} />
+      &nbsp;—&nbsp;
+      <Date date={endDate} />
+    </Range>
+  );
+};
+export default DateRange;

package/src/ui/Education.js ADDED Viewed

@@ -0,0 +1,35 @@
+import Section from './Section';
+import Experience from './Experience';
+const Education = ({ education }) => {
+  if (!education) {
+    return null;
+  }
+  return (
+    <div>
+      <Section title="Education">
+        {education.map((e, key) => {
+          let subTitle = e.area ? `${e.studyType} in ${e.area}` : e.studyType;
+          if (e.score) {
+            subTitle = `${subTitle} (${e.score})`;
+          }
+          return (
+            <Experience
+              title={e.institution}
+              subTitle={subTitle}
+              startDate={e.startDate}
+              endDate={e.endDate}
+              highlights={e.courses}
+              key={key}
+            />
+          );
+        })}
+      </Section>
+    </div>
+  );
+};
+export default Education;

package/src/ui/Experience.js ADDED Viewed

@@ -0,0 +1,62 @@
+import styled from 'styled-components';
+import List from './List';
+import DateRange from './DateRange';
+import Date from './Date';
+const Meta = styled.div`
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 2px;
+`;
+const Title = styled.div`
+  font-weight: 600;
+  font-size: 1.45rem;
+  margin-bottom: 3px;
+`;
+const SubTitle = styled.div`
+  font-style: italic;
+  font-size: 1.4rem;
+  margin-bottom: 3px;
+`;
+const Container = styled.div`
+  margin-bottom: 10px;
+`;
+const Summary = styled.p`
+  margin-bottom: 5px;
+`;
+const Experience = ({
+  title,
+  date,
+  startDate,
+  endDate,
+  subTitle,
+  summary,
+  highlights,
+}) => {
+  return (
+    <Container>
+      <Meta>
+        <Title>{title}</Title>
+        <div className="secondary">
+          {date ? (
+            <Date date={date} />
+          ) : (
+            <DateRange startDate={startDate} endDate={endDate} />
+          )}
+        </div>
+      </Meta>
+      {subTitle && <SubTitle>{subTitle}</SubTitle>}
+      <div className="secondary">
+        {summary && <Summary>{summary}</Summary>}
+        <List items={highlights} />
+      </div>
+    </Container>
+  );
+};
+export default Experience;

package/src/ui/Hero.js ADDED Viewed

@@ -0,0 +1,120 @@
+import styled from 'styled-components';
+import {
+  FaMapPin,
+  FaEnvelope,
+  FaGithub,
+  FaTwitter,
+  FaPhoneAlt,
+  FaLink,
+  FaLinkedin,
+} from 'react-icons/fa';
+import Section from './Section';
+const Title = styled.div`
+  font-size: 3rem;
+  text-align: center;
+  margin-top: 20px;
+  margin-bottom: 20px;
+`;
+const BasicInfo = styled.div`
+  display: flex;
+  gap: 10px 20px;
+  justify-content: center;
+  flex-wrap: wrap;
+`;
+const Info = styled.div`
+  display: flex;
+  align-items: center;
+  font-size: 1.5rem;
+  svg {
+    color: #000;
+    margin-right: 5px;
+    width: 10px;
+  }
+  a {
+    color: inherit;
+    text-decoration: none;
+    &:hover {
+      color: #000;
+    }
+  }
+`;
+const HeroComponent = ({ basics }) => {
+  const { name, url, location, profiles, phone, email } = basics;
+  const linkedin = profiles.find(
+    ({ network }) => network.toLowerCase() === 'linkedin'
+  );
+  const github = profiles.find(
+    ({ network }) => network.toLowerCase() === 'github'
+  );
+  const twitter = profiles.find(
+    ({ network }) => network.toLowerCase() === 'twitter'
+  );
+  return (
+    <Section>
+      <Title>{name}</Title>
+      <div className="secondary">
+        <BasicInfo>
+          {location && (
+            <Info>
+              <FaMapPin />
+              {location.city}, {location.countryCode}
+            </Info>
+          )}
+          {email && (
+            <Info>
+              <FaEnvelope />
+              {email}
+            </Info>
+          )}
+          {phone && (
+            <Info>
+              <FaPhoneAlt />
+              {phone}
+            </Info>
+          )}
+          {url && (
+            <Info>
+              <FaLink />
+              <a target="_blank" href={url}>
+                {url}
+              </a>
+            </Info>
+          )}
+          {linkedin && (
+            <Info>
+              <FaLinkedin />
+              <a href={`https://linkedin.com/in/${linkedin.username}`}>
+                {linkedin.username}
+              </a>
+            </Info>
+          )}
+          {github && (
+            <Info>
+              <FaGithub />
+              <a href={`https://github.com/${github.username}`}>
+                {github.username}
+              </a>
+            </Info>
+          )}
+          {twitter && (
+            <Info>
+              <FaTwitter />
+              <a href={`https://twitter.com/${twitter.username}`}>
+                {twitter.username}
+              </a>
+            </Info>
+          )}
+        </BasicInfo>
+      </div>
+    </Section>
+  );
+};
+export default HeroComponent;

package/src/ui/Interests.js ADDED Viewed

@@ -0,0 +1,22 @@
+import OneLineList from './OneLineList';
+import Section from './Section';
+const Interests = ({ interests }) => {
+  // check if interests is null, empty, empty string or empty array
+  if (!interests) {
+    return null;
+  }
+  return (
+    <div>
+      <Section title="Interests">
+        {interests.map((w, key) => {
+          return <OneLineList key={key} name={w.name} items={w.keywords} />;
+        })}
+      </Section>
+    </div>
+  );
+};
+export default Interests;

package/src/ui/Languages.js ADDED Viewed

@@ -0,0 +1,23 @@
+import OneLineList from './OneLineList';
+import Section from './Section';
+const Languages = ({ languages }) => {
+  if (!languages) {
+    return null;
+  }
+  return (
+    <div>
+      <Section title="Languages">
+        {languages.map((l, key) => {
+          return (
+            <OneLineList key={key} name={l.language} items={[l.fluency]} />
+          );
+        })}
+      </Section>
+    </div>
+  );
+};
+export default Languages;

package/src/ui/List.js ADDED Viewed

@@ -0,0 +1,29 @@
+import styled from 'styled-components';
+const ListContainer = styled.ul`
+  padding-left: 20px;
+  line-height: 16px;
+  li::before {
+    content: '•';
+    display: inline-block;
+    width: 1em;
+    margin-left: -1em;
+    line-height: 10px;
+  }
+`;
+const List = ({ items }) => {
+  if (!items) {
+    return null;
+  }
+  return (
+    <ListContainer>
+      {items.map((item) => (
+        <li key={item}>{item}</li>
+      ))}
+    </ListContainer>
+  );
+};
+export default List;

package/src/ui/OneLineList.js ADDED Viewed

@@ -0,0 +1,30 @@
+import styled from 'styled-components';
+const Name = styled.div`
+  font-weight: 600;
+  font-size: 1.4rem;
+`;
+const List = styled.div`
+  font-size: 1.4rem;
+  margin-left: 5px;
+`;
+const Container = styled.div`
+  margin-bottom: 5px;
+  display: flex;
+  align-items: baseline;
+`;
+const OneLineList = ({ name, items }) => {
+  return (
+    <Container>
+      <Name>{name}:</Name>
+      <List>
+        <div class="secondary">{items?.join(', ')}</div>
+      </List>
+    </Container>
+  );
+};
+export default OneLineList;

package/src/ui/Projects.js ADDED Viewed

@@ -0,0 +1,29 @@
+import Section from './Section';
+import Experience from './Experience';
+const Work = ({ projects }) => {
+  if (!projects) {
+    return null;
+  }
+  return (
+    <div>
+      <Section title="Projects">
+        {projects.map((w, key) => {
+          return (
+            <Experience
+              title={w.name}
+              startDate={w.startDate}
+              endDate={w.endDate}
+              summary={w.description}
+              highlights={w.highlights}
+              key={key}
+            />
+          );
+        })}
+      </Section>
+    </div>
+  );
+};
+export default Work;

package/src/ui/Publications.js ADDED Viewed

@@ -0,0 +1,28 @@
+import Section from './Section';
+import Experience from './Experience';
+const Publications = ({ publications }) => {
+  if (!publications) {
+    return null;
+  }
+  return (
+    <div>
+      <Section title="Publications">
+        {publications.map((p, key) => {
+          return (
+            <Experience
+              title={p.name}
+              subTitle={p.publisher}
+              date={p.releaseDate}
+              summary={p.summary}
+              key={key}
+            />
+          );
+        })}
+      </Section>
+    </div>
+  );
+};
+export default Publications;

package/src/ui/References.js ADDED Viewed

@@ -0,0 +1,33 @@
+import styled from 'styled-components';
+import Section from './Section';
+const Name = styled.div`
+  font-weight: 600;
+  font-size: 1.4rem;
+  margin-bottom: 5px;
+`;
+const Reference = styled.p``;
+const References = ({ references }) => {
+  if (!references) {
+    return null;
+  }
+  return (
+    <div>
+      <Section title="References">
+        {references.map((r, key) => {
+          return (
+            <div key={key} style={{ marginBottom: '15px' }}>
+              <Name>{r.name}</Name>
+              <Reference>{r.reference}</Reference>
+            </div>
+          );
+        })}
+      </Section>
+    </div>
+  );
+};
+export default References;