jsonresume-theme-reference 0.1.0

package/src/Resume.jsx

@@ -0,0 +1,381 @@
+import styled from 'styled-components';
+import {
+  Section,
+  SectionTitle,
+  ListItem,
+  DateRange,
+  BadgeList,
+  safeUrl,
+  getLinkRel,
+} from '@resume/core';
+
+/**
+ * Resume Component
+ * THE PERFECT SHOWCASE of @resume/core and resume design best practices
+ *
+ * This demonstrates:
+ * - All 5 @resume/core primitives with JSX
+ * - All 11 JSON Resume schema sections
+ * - ATS-friendly patterns
+ * - Design token usage
+ * - Beautiful component composition
+ */
+
+const Layout = styled.div`
+  max-width: var(--resume-max-width, 660px);
+  margin: 0 auto;
+  padding: 40px 20px;
+  font-family: var(
+    --resume-font-sans,
+    'Helvetica Neue',
+    Helvetica,
+    Arial,
+    sans-serif
+  );
+  font-size: var(--resume-size-body, 11pt);
+  line-height: 1.6;
+  color: var(--resume-color-primary, #000);
+`;
+
+const Header = styled.header`
+  text-align: center;
+  margin-bottom: var(--resume-space-section, 2rem);
+`;
+
+const Name = styled.h1`
+  font-size: var(--resume-size-name, 28pt);
+  font-weight: 700;
+  margin: 0 0 8px 0;
+  color: var(--resume-color-primary, #000);
+`;
+
+const Label = styled.p`
+  font-size: var(--resume-size-heading, 16pt);
+  color: var(--resume-color-secondary, #333);
+  margin: 0 0 16px 0;
+`;
+
+const Contact = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 16px;
+  font-size: var(--resume-size-body, 11pt);
+
+  a {
+    color: var(--resume-color-accent, #0066cc);
+    text-decoration: none;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+`;
+
+const Summary = styled.p`
+  text-align: center;
+  margin: 16px 0;
+  color: var(--resume-color-secondary, #333);
+`;
+
+const SkillGroup = styled.div`
+  margin-bottom: 12px;
+
+  strong {
+    margin-right: 8px;
+  }
+`;
+
+function Resume({ resume }) {
+  const {
+    basics = {},
+    work = [],
+    education = [],
+    skills = [],
+    volunteer = [],
+    awards = [],
+    publications = [],
+    languages = [],
+    interests = [],
+    references = [],
+    projects = [],
+  } = resume;
+
+  return (
+    <Layout>
+      {/* Hero Section - Name, Title, Contact */}
+      {basics && (
+        <Header>
+          <Name>{basics.name}</Name>
+          {basics.label && <Label>{basics.label}</Label>}
+
+          <Contact>
+            {basics.email && (
+              <a href={safeUrl(`mailto:${basics.email}`)}>{basics.email}</a>
+            )}
+            {basics.phone && <span>{basics.phone}</span>}
+            {basics.url && (
+              <a
+                href={safeUrl(basics.url)}
+                target="_blank"
+                rel={getLinkRel(basics.url, true)}
+              >
+                {basics.url}
+              </a>
+            )}
+            {basics.location && (
+              <span>
+                {[
+                  basics.location.city,
+                  basics.location.region,
+                  basics.location.countryCode,
+                ]
+                  .filter(Boolean)
+                  .join(', ')}
+              </span>
+            )}
+            {basics.profiles?.map((profile) => {
+              const profileUrl = safeUrl(profile.url);
+              return (
+                profileUrl && (
+                  <a
+                    key={profile.network}
+                    href={profileUrl}
+                    target="_blank"
+                    rel={getLinkRel(profileUrl, true)}
+                  >
+                    {profile.network}
+                  </a>
+                )
+              );
+            })}
+          </Contact>
+
+          {basics.summary && <Summary>{basics.summary}</Summary>}
+        </Header>
+      )}
+
+      {/* Work Experience Section */}
+      {work.length > 0 && (
+        <Section id="work">
+          <SectionTitle>Work Experience</SectionTitle>
+          {work.map((job, index) => (
+            <ListItem
+              key={index}
+              title={job.position}
+              subtitle={job.name}
+              dateRange={
+                job.startDate ? (
+                  <DateRange startDate={job.startDate} endDate={job.endDate} />
+                ) : null
+              }
+              location={job.location}
+              description={job.summary}
+              highlights={job.highlights}
+            />
+          ))}
+        </Section>
+      )}
+
+      {/* Education Section */}
+      {education.length > 0 && (
+        <Section id="education">
+          <SectionTitle>Education</SectionTitle>
+          {education.map((edu, index) => {
+            const title = [edu.studyType, edu.area]
+              .filter(Boolean)
+              .join(' in ');
+            const highlights = [
+              edu.score ? `GPA: ${edu.score}` : '',
+              ...(edu.courses || []),
+            ].filter(Boolean);
+
+            return (
+              <ListItem
+                key={index}
+                title={title || edu.institution}
+                subtitle={title ? edu.institution : ''}
+                dateRange={
+                  edu.startDate ? (
+                    <DateRange
+                      startDate={edu.startDate}
+                      endDate={edu.endDate}
+                    />
+                  ) : null
+                }
+                highlights={highlights.length > 0 ? highlights : undefined}
+              />
+            );
+          })}
+        </Section>
+      )}
+
+      {/* Skills Section */}
+      {skills.length > 0 && (
+        <Section id="skills">
+          <SectionTitle>Skills</SectionTitle>
+          {skills.map((skillGroup, index) => (
+            <SkillGroup key={index}>
+              {skillGroup.name && <strong>{skillGroup.name}:</strong>}
+              <BadgeList items={skillGroup.keywords} variant="default" />
+            </SkillGroup>
+          ))}
+        </Section>
+      )}
+
+      {/* Projects Section */}
+      {projects.length > 0 && (
+        <Section id="projects">
+          <SectionTitle>Projects</SectionTitle>
+          {projects.map((project, index) => (
+            <ListItem
+              key={index}
+              title={project.name}
+              dateRange={
+                project.startDate ? (
+                  <DateRange
+                    startDate={project.startDate}
+                    endDate={project.endDate}
+                  />
+                ) : null
+              }
+              description={
+                <>
+                  {project.description}
+                  {project.url && safeUrl(project.url) && (
+                    <>
+                      <br />
+                      <a
+                        href={safeUrl(project.url)}
+                        target="_blank"
+                        rel={getLinkRel(project.url, true)}
+                      >
+                        {project.url}
+                      </a>
+                    </>
+                  )}
+                  {project.keywords && project.keywords.length > 0 && (
+                    <>
+                      <br />
+                      <BadgeList items={project.keywords} variant="accent" />
+                    </>
+                  )}
+                </>
+              }
+              highlights={project.highlights}
+            />
+          ))}
+        </Section>
+      )}
+
+      {/* Volunteer Section */}
+      {volunteer.length > 0 && (
+        <Section id="volunteer">
+          <SectionTitle>Volunteer Experience</SectionTitle>
+          {volunteer.map((vol, index) => (
+            <ListItem
+              key={index}
+              title={vol.position}
+              subtitle={vol.organization}
+              dateRange={
+                vol.startDate ? (
+                  <DateRange startDate={vol.startDate} endDate={vol.endDate} />
+                ) : null
+              }
+              description={vol.summary}
+              highlights={vol.highlights}
+            />
+          ))}
+        </Section>
+      )}
+
+      {/* Awards Section */}
+      {awards.length > 0 && (
+        <Section id="awards">
+          <SectionTitle>Awards & Honors</SectionTitle>
+          {awards.map((award, index) => (
+            <ListItem
+              key={index}
+              title={award.title}
+              subtitle={award.awarder}
+              dateRange={award.date}
+              description={award.summary}
+            />
+          ))}
+        </Section>
+      )}
+
+      {/* Publications Section */}
+      {publications.length > 0 && (
+        <Section id="publications">
+          <SectionTitle>Publications</SectionTitle>
+          {publications.map((pub, index) => (
+            <ListItem
+              key={index}
+              title={pub.name}
+              subtitle={pub.publisher}
+              dateRange={pub.releaseDate}
+              description={
+                <>
+                  {pub.summary}
+                  {pub.url && safeUrl(pub.url) && (
+                    <>
+                      <br />
+                      <a
+                        href={safeUrl(pub.url)}
+                        target="_blank"
+                        rel={getLinkRel(pub.url, true)}
+                      >
+                        {pub.url}
+                      </a>
+                    </>
+                  )}
+                </>
+              }
+            />
+          ))}
+        </Section>
+      )}
+
+      {/* Languages Section */}
+      {languages.length > 0 && (
+        <Section id="languages">
+          <SectionTitle>Languages</SectionTitle>
+          {languages.map((lang, index) => (
+            <div key={index}>
+              {lang.language}
+              {lang.fluency && ` (${lang.fluency})`}
+            </div>
+          ))}
+        </Section>
+      )}
+
+      {/* Interests Section */}
+      {interests.length > 0 && (
+        <Section id="interests">
+          <SectionTitle>Interests</SectionTitle>
+          <BadgeList
+            items={interests.flatMap((i) => i.keywords || [])}
+            variant="default"
+          />
+        </Section>
+      )}
+
+      {/* References Section */}
+      {references.length > 0 && (
+        <Section id="references">
+          <SectionTitle>References</SectionTitle>
+          {references.map((ref, index) => (
+            <ListItem
+              key={index}
+              title={ref.name}
+              description={ref.reference}
+            />
+          ))}
+        </Section>
+      )}
+    </Layout>
+  );
+}
+
+export default Resume;

package/src/index.js

@@ -0,0 +1,262 @@
+import { renderToString } from 'react-dom/server';
+import { ServerStyleSheet } from 'styled-components';
+import Resume from './Resume.jsx';
+
+/**
+ * JSON Resume Reference Theme (JSX Edition)
+ *
+ * THE PERFECT SHOWCASE of @resume/core with beautiful React components.
+ *
+ * This is the NEW architecture that demonstrates:
+ * - Clean JSX syntax (no template strings)
+ * - React component composition
+ * - styled-components with design tokens
+ * - All @resume/core primitives as React components
+ * - Beautiful developer experience
+ *
+ * @param {Object} resume - JSON Resume object
+ * @param {Object} [options] - Rendering options
+ * @param {string} [options.locale='en'] - Locale for date formatting (e.g., 'en-US', 'fr-FR')
+ * @param {string} [options.dir='ltr'] - Text direction ('ltr' or 'rtl')
+ * @param {string} [options.title] - Custom document title (defaults to resume name)
+ * @param {string} [options.theme='default'] - Theme variant (default, modern, classic, minimal)
+ * @param {boolean} [options.structured=false] - Return structured object instead of HTML string
+ * @returns {string|Object} Complete HTML document or structured object with parts
+ *
+ * @example
+ * // Basic usage (backwards compatible)
+ * const html = render(resume);
+ *
+ * @example
+ * // With options
+ * const html = render(resume, {
+ *   locale: 'fr-FR',
+ *   dir: 'ltr',
+ *   title: 'My Professional Resume',
+ *   theme: 'modern'
+ * });
+ *
+ * @example
+ * // Get structured output
+ * const { html, head, body, css } = render(resume, { structured: true });
+ */
+export function render(resume, options = {}) {
+  const {
+    locale = 'en',
+    dir = 'ltr',
+    title = resume.basics?.name || 'Resume',
+    theme = 'default',
+    structured = false,
+  } = options;
+
+  const sheet = new ServerStyleSheet();
+
+  try {
+    // Render React component to HTML string with styled-components
+    const bodyHtml = renderToString(
+      sheet.collectStyles(<Resume resume={resume} />)
+    );
+
+    // Extract CSS from styled-components
+    const styledComponentsCss = sheet.getStyleTags();
+
+    // Build structured parts
+    const globalStyles = `
+    /*
+     * Global Styles
+     * Base styles that complement @resume/core design tokens
+     */
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+
+    body {
+      background: #fff;
+      -webkit-font-smoothing: antialiased;
+      -moz-osx-font-smoothing: grayscale;
+    }
+
+    @media print {
+      body {
+        background: #fff;
+      }
+
+      a {
+        color: inherit;
+        text-decoration: none;
+      }
+    }
+  `;
+
+    // Design tokens CSS (inlined from @resume/core)
+    const designTokens = `
+    :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, 0.05);
+      --resume-shadow-md: 0 4px 6px -1px rgba(0, 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;
+      }
+
+      .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);
+    }
+  `;
+
+    const head = `
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>${title}</title>
+
+  <!-- Design Tokens (inlined) -->
+  <style>
+    ${designTokens}
+  </style>
+
+  <!-- Styled Components CSS -->
+  ${styledComponentsCss}
+
+  <style>
+    ${globalStyles}
+  </style>
+`;
+
+    // Return structured object if requested
+    if (structured) {
+      return {
+        html: `<!DOCTYPE html>
+<html lang="${locale}" dir="${dir}"${
+          theme !== 'default' ? ` data-theme="${theme}"` : ''
+        }>
+<head>${head}</head>
+<body>
+  ${bodyHtml}
+</body>
+</html>`,
+        head,
+        body: bodyHtml,
+        css: styledComponentsCss,
+        globalStyles,
+        locale,
+        dir,
+        theme,
+      };
+    }
+
+    // Return complete HTML document (backwards compatible)
+    return `<!DOCTYPE html>
+<html lang="${locale}" dir="${dir}"${
+      theme !== 'default' ? ` data-theme="${theme}"` : ''
+    }>
+<head>${head}</head>
+<body>
+  ${bodyHtml}
+</body>
+</html>`;
+  } finally {
+    // Clean up styled-components sheet
+    sheet.seal();
+  }
+}
+
+export { Resume };
+export default { render };