jsonresume-theme-sidebar 0.1.0 → 0.2.1

package/dist/style.css

@@ -0,0 +1,139 @@
+/**
+ * Resume Core Design Tokens
+ * Framework-agnostic CSS variables for theming
+ * Based on 2025 resume best practices and ATS compatibility research
+ */
+
+:root {
+  /* Typography - ATS-friendly fonts */
+  --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;
+
+  /* Font Sizes - Optimal readability */
+  --resume-size-name: 36px;        /* Large, prominent name */
+  --resume-size-heading: 16px;     /* Section titles */
+  --resume-size-subheading: 14px;  /* Job titles, degrees */
+  --resume-size-body: 11px;        /* Body text, descriptions */
+  --resume-size-small: 10px;       /* Dates, locations, metadata */
+
+  /* Font Weights */
+  --resume-weight-normal: 400;
+  --resume-weight-medium: 500;
+  --resume-weight-semibold: 600;
+  --resume-weight-bold: 700;
+
+  /* Line Heights */
+  --resume-line-height-tight: 1.2;
+  --resume-line-height-normal: 1.5;
+  --resume-line-height-relaxed: 1.75;
+
+  /* Colors - Professional Theme (default) */
+  --resume-color-primary: #1a1a1a;
+  --resume-color-secondary: #4a4a4a;
+  --resume-color-accent: #2563eb;
+  --resume-color-background: #ffffff;
+  --resume-color-border: #e5e7eb;
+
+  /* Spacing - Consistent rhythm */
+  --resume-space-section: 24px;   /* Between major sections */
+  --resume-space-item: 16px;      /* Between list items */
+  --resume-space-tight: 8px;      /* Within items */
+  --resume-space-margin: 48px;    /* Page margins */
+
+  /* Layout - Optimal line length */
+  --resume-max-width: 660px;      /* ~80 chars at body size */
+  --resume-column-gap: 24px;
+
+  /* Border Radius */
+  --resume-radius-sm: 4px;
+  --resume-radius-md: 8px;
+  --resume-radius-lg: 12px;
+
+  /* Shadows - Subtle depth */
+  --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);
+}
+
+/* Modern Theme Variant */
+[data-theme="modern"] {
+  --resume-color-primary: #0f172a;
+  --resume-color-secondary: #475569;
+  --resume-color-accent: #8b5cf6;
+  --resume-font-sans: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
+}
+
+/* Classic Theme Variant */
+[data-theme="classic"] {
+  --resume-color-primary: #000000;
+  --resume-color-secondary: #333333;
+  --resume-color-accent: #0066cc;
+  --resume-font-sans: Georgia, "Times New Roman", serif;
+}
+
+/* Minimal Theme Variant */
+[data-theme="minimal"] {
+  --resume-color-primary: #18181b;
+  --resume-color-secondary: #71717a;
+  --resume-color-accent: #000000;
+  --resume-space-section: 32px;
+  --resume-space-item: 20px;
+}
+
+/* High Contrast Variant (Accessibility) */
+[data-theme="high-contrast"] {
+  --resume-color-primary: #000000;
+  --resume-color-secondary: #000000;
+  --resume-color-accent: #0000ff;
+  --resume-color-background: #ffffff;
+  --resume-color-border: #000000;
+}
+
+/* Print Styles - ATS-Friendly PDF Export */
+@media print {
+  :root {
+    /* Optimize for print */
+    --resume-space-section: 18px;
+    --resume-space-item: 12px;
+  }
+
+  @page {
+    size: A4;
+    margin: 0.5in;
+  }
+
+  /* Prevent awkward breaks */
+  .resume-section {
+    page-break-inside: avoid;
+  }
+
+  .resume-item {
+    break-inside: avoid;
+  }
+
+  /* Widows and orphans control */
+  p, li {
+    widows: 3;
+    orphans: 3;
+  }
+
+  /* Hyphenation for long words */
+  .resume-description {
+    hyphens: auto;
+  }
+
+  /* Hide interactive elements */
+  .no-print {
+    display: none !important;
+  }
+}
+
+/* RTL Support */
+[dir="rtl"] {
+  text-align: right;
+}
+
+[dir="rtl"] .resume-item {
+  padding-left: 0;
+  padding-right: var(--resume-space-tight);
+}

package/package.json

@@ -1,11 +1,18 @@
 {
   "name": "jsonresume-theme-sidebar",
-  "version": "0.1.0",
+  "version": "0.2.1",
   "description": "Two-column sidebar resume theme with dark sidebar and light main content - ATS-friendly",
   "type": "module",
-  "main": "./src/index.js",
+  "main": "./dist/index.js",
   "exports": {
-    ".": "./src/index.js"
+    ".": {
+      "import": "./src/index.jsx",
+      "default": "./dist/index.js"
+    },
+    "./dist": {
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    }
   },
   "keywords": [
     "jsonresume",
@@ -21,10 +28,12 @@
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
     "styled-components": "^6.1.19",
-    "@resume/core": "0.1.0"
+    "@jsonresume/core": "0.2.0"
   },
   "devDependencies": {
-    "vitest": "^1.6.0"
+    "vitest": "^1.6.0",
+    "@vitejs/plugin-react": "^4.3.4",
+    "vite": "^5.4.21"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",
@@ -32,6 +41,7 @@
   },
   "scripts": {
     "test": "vitest run",
-    "test:watch": "vitest"
+    "test:watch": "vitest",
+    "build": "vite build"
   }
 }

package/src/Resume.jsx

@@ -7,7 +7,7 @@ import {
   BadgeList,
   safeUrl,
   getLinkRel,
-} from '@resume/core';
+} from '@jsonresume/core';
 
 /**
  * Sidebar Resume Theme
@@ -315,6 +315,9 @@ function Resume({ resume }) {
     references = [],
     projects = [],
     awards = [],
+    certificates = [],
+    publications = [],
+    volunteer = [],
     interests = [],
   } = resume;
 
@@ -543,6 +546,45 @@ function Resume({ resume }) {
           </MainSection>
         )}
 
+        {/* Volunteer Section */}
+        {volunteer.length > 0 && (
+          <MainSection>
+            <MainSectionTitle>VOLUNTEER</MainSectionTitle>
+            {volunteer.map((vol, index) => (
+              <WorkItem key={index}>
+                <WorkHeader>
+                  <div>
+                    <WorkTitle>{vol.organization}</WorkTitle>
+                    <WorkCompany>{vol.position}</WorkCompany>
+                  </div>
+                  <WorkDate>
+                    {vol.startDate && (
+                      <>
+                        {new Date(vol.startDate).getFullYear()} -{' '}
+                        {vol.endDate
+                          ? new Date(vol.endDate).getFullYear()
+                          : 'PRESENT'}
+                      </>
+                    )}
+                  </WorkDate>
+                </WorkHeader>
+                {vol.summary && (
+                  <p style={{ marginBottom: '10px', color: '#4a4a4a' }}>
+                    {vol.summary}
+                  </p>
+                )}
+                {vol.highlights && vol.highlights.length > 0 && (
+                  <WorkDescription>
+                    {vol.highlights.map((highlight, idx) => (
+                      <li key={idx}>{highlight}</li>
+                    ))}
+                  </WorkDescription>
+                )}
+              </WorkItem>
+            ))}
+          </MainSection>
+        )}
+
         {/* Awards Section */}
         {awards.length > 0 && (
           <MainSection>
@@ -568,6 +610,77 @@ function Resume({ resume }) {
           </MainSection>
         )}
 
+        {/* Certificates Section */}
+        {certificates.length > 0 && (
+          <MainSection>
+            <MainSectionTitle>CERTIFICATES</MainSectionTitle>
+            {certificates.map((cert, index) => (
+              <div
+                key={index}
+                style={{ marginBottom: '20px', paddingLeft: '25px' }}
+              >
+                <WorkTitle>
+                  {cert.url ? (
+                    <a
+                      href={safeUrl(cert.url)}
+                      target="_blank"
+                      rel={getLinkRel(cert.url, true)}
+                      style={{ color: '#1e3a52' }}
+                    >
+                      {cert.name}
+                    </a>
+                  ) : (
+                    cert.name
+                  )}
+                </WorkTitle>
+                <WorkCompany>
+                  {cert.issuer}
+                  {cert.date &&
+                    ` - ${new Date(cert.date).toLocaleDateString()}`}
+                </WorkCompany>
+              </div>
+            ))}
+          </MainSection>
+        )}
+
+        {/* Publications Section */}
+        {publications.length > 0 && (
+          <MainSection>
+            <MainSectionTitle>PUBLICATIONS</MainSectionTitle>
+            {publications.map((pub, index) => (
+              <div
+                key={index}
+                style={{ marginBottom: '20px', paddingLeft: '25px' }}
+              >
+                <WorkTitle>
+                  {pub.url ? (
+                    <a
+                      href={safeUrl(pub.url)}
+                      target="_blank"
+                      rel={getLinkRel(pub.url, true)}
+                      style={{ color: '#1e3a52' }}
+                    >
+                      {pub.name}
+                    </a>
+                  ) : (
+                    pub.name
+                  )}
+                </WorkTitle>
+                <WorkCompany>
+                  {pub.publisher}
+                  {pub.releaseDate &&
+                    ` - ${new Date(pub.releaseDate).toLocaleDateString()}`}
+                </WorkCompany>
+                {pub.summary && (
+                  <p style={{ marginTop: '8px', color: '#4a4a4a' }}>
+                    {pub.summary}
+                  </p>
+                )}
+              </div>
+            ))}
+          </MainSection>
+        )}
+
         {/* References Section */}
         {references.length > 0 && (
           <MainSection>

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',
+    ],
+  },
+});