WIP: merge multiple packages/vite.configs into one single package/vite.config

editor/package.json

@@ -1,20 +0,0 @@
-{
-  "name": "jsoncv-editor",
-  "private": true,
-  "version": "1.0.0",
-  "scripts": {
-    "dev-backend": "nodemon --watch app.js app.js",
-    "dev": "vite --host",
-    "build": "rm -rf editor/dist && vite build",
-    "clean": "rm -rf data editor/dist"
-  },
-  "dependencies": {
-    "@json-editor/json-editor": "^2.9.0-beta.1",
-    "express": "^4.18.1"
-  },
-  "devDependencies": {
-    "nodemon": "^2.0.20",
-    "sass": "^1.58.0",
-    "vite": "^3.0.7"
-  }
-}

editor/vite.config.js

@@ -1,27 +0,0 @@
-import { resolve } from 'path';
-import { defineConfig } from 'vite';
-
-export default defineConfig({
-  base: "/editor/",
-  build: {
-    rolupOptions: {
-      input: {
-        main: resolve(__dirname, 'index.html'),
-      },
-    },
-  },
-  server: {
-    proxy: {
-      '/api': {
-        target: 'http://localhost:3000',
-      },
-      '/preview': {
-        target: 'http://localhost:3000',
-      },
-    },
-    fs: {
-      // Allow serving files from one level up to the project root
-      allow: ['..'],
-    },
-  },
-})

package-lock.json

@@ -9,6 +9,7 @@
       "version": "1.0.0",
       "dependencies": {
         "@iconify/json": "^2.2.15",
+        "@json-editor/json-editor": "^2.9.0-beta.1",
         "ajv": "^8.12.0",
         "ajv-formats": "^2.1.1",
         "dayjs": "^1.11.7",
@@ -115,6 +116,17 @@
         "local-pkg": "^0.4.2"
       }
     },
+    "node_modules/@json-editor/json-editor": {
+      "version": "2.9.0-beta.1",
+      "resolved": "https://registry.npmjs.org/@json-editor/json-editor/-/json-editor-2.9.0-beta.1.tgz",
+      "integrity": "sha512-TC6rDiXsmN8wUWwdDlOcVafKnA603Ui1gFUg4LWEa6jIBbnXSrDc3iC73E7MNAki7iSMlwkeAnDEuxsOMi9H0g==",
+      "dependencies": {
+        "core-js": "^3.12.1"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
     "node_modules/ajv": {
       "version": "8.12.0",
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.12.0.tgz",
@@ -264,6 +276,16 @@
       "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
       "dev": true
     },
+    "node_modules/core-js": {
+      "version": "3.27.2",
+      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.27.2.tgz",
+      "integrity": "sha512-9ashVQskuh5AZEZ1JdQWp1GqSoC1e1G87MzRqg2gIfVAQ7Qn9K+uFj8EcniUFA4P2NLZfV+TOlX1SzoKfo+s7w==",
+      "hasInstallScript": true,
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/core-js"
+      }
+    },
     "node_modules/cross-spawn": {
       "version": "7.0.3",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
@@ -2018,6 +2040,14 @@
         "local-pkg": "^0.4.2"
       }
     },
+    "@json-editor/json-editor": {
+      "version": "2.9.0-beta.1",
+      "resolved": "https://registry.npmjs.org/@json-editor/json-editor/-/json-editor-2.9.0-beta.1.tgz",
+      "integrity": "sha512-TC6rDiXsmN8wUWwdDlOcVafKnA603Ui1gFUg4LWEa6jIBbnXSrDc3iC73E7MNAki7iSMlwkeAnDEuxsOMi9H0g==",
+      "requires": {
+        "core-js": "^3.12.1"
+      }
+    },
     "ajv": {
       "version": "8.12.0",
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.12.0.tgz",
@@ -2124,6 +2154,11 @@
       "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
       "dev": true
     },
+    "core-js": {
+      "version": "3.27.2",
+      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.27.2.tgz",
+      "integrity": "sha512-9ashVQskuh5AZEZ1JdQWp1GqSoC1e1G87MzRqg2gIfVAQ7Qn9K+uFj8EcniUFA4P2NLZfV+TOlX1SzoKfo+s7w=="
+    },
     "cross-spawn": {
       "version": "7.0.3",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",

package.json

@@ -17,6 +17,7 @@
   },
   "dependencies": {
     "@iconify/json": "^2.2.15",
+    "@json-editor/json-editor": "^2.9.0-beta.1",
     "ajv": "^8.12.0",
     "ajv-formats": "^2.1.1",
     "dayjs": "^1.11.7",

sample.resume.json

@@ -0,0 +1,161 @@
+{
+  "$schema": "https://raw.githubusercontent.com/reorx/jsoncv/schema/jsoncv.schema.json",
+  "basics": {
+    "name": "Richard Hendriks",
+    "label": "Programmer",
+    "image": "",
+    "email": "richard.hendriks@mail.com",
+    "phone": "(912) 555-4321",
+    "url": "http://richardhendricks.example.com",
+    "summary": "Richard hails from Tulsa. He has earned degrees from the University of Oklahoma and Stanford. (Go Sooners and Cardinal!) Before starting Pied Piper, he worked for Hooli as a part time software developer. While his work focuses on applied information theory, mostly optimizing lossless compression schema of both the length-limited and adaptive variants, his non-work interests range widely, everything from quantum computing to chaos theory. He could tell you about it, but THAT would NOT be a “length-limited” conversation!",
+    "location": {
+      "address": "2712 Broadway St",
+      "postalCode": "CA 94115",
+      "city": "San Francisco",
+      "countryCode": "US",
+      "region": "California"
+    },
+    "profiles": [
+      {
+        "network": "Twitter",
+        "username": "neutralthoughts",
+        "url": ""
+      },
+      {
+        "network": "SoundCloud",
+        "username": "dandymusicnl",
+        "url": "https://soundcloud.example.com/dandymusicnl"
+      }
+    ]
+  },
+  "work": [
+    {
+      "name": "Pied Piper",
+      "location": "Palo Alto, CA",
+      "description": "Awesome compression company",
+      "position": "CEO/President",
+      "url": "http://piedpiper.example.com",
+      "startDate": "2013-12-01",
+      "endDate": "2014-12-01",
+      "summary": "Pied Piper is a multi-platform technology based on a proprietary universal compression algorithm that has consistently fielded high Weisman Scores™ that are not merely competitive, but approach the theoretical limit of lossless compression.",
+      "highlights": [
+        "Build an algorithm for artist to detect if their music was violating copy right infringement laws",
+        "Successfully won Techcrunch Disrupt",
+        "Optimized an algorithm that holds the current world record for Weisman Scores"
+      ]
+    }
+  ],
+  "volunteer": [
+    {
+      "organization": "CoderDojo",
+      "position": "Teacher",
+      "url": "http://coderdojo.example.com/",
+      "startDate": "2012-01-01",
+      "endDate": "2013-01-01",
+      "summary": "Global movement of free coding clubs for young people.",
+      "highlights": [
+        "Awarded 'Teacher of the Month'"
+      ]
+    }
+  ],
+  "education": [
+    {
+      "institution": "University of Oklahoma",
+      "url": "https://www.ou.edu/",
+      "area": "Information Technology",
+      "studyType": "Bachelor",
+      "startDate": "2011-06-01",
+      "endDate": "2014-01-01",
+      "score": "4.0",
+      "courses": [
+        "DB1101 - Basic SQL",
+        "CS2011 - Java Introduction"
+      ]
+    }
+  ],
+  "awards": [
+    {
+      "title": "Digital Compression Pioneer Award",
+      "date": "2014-11-01",
+      "awarder": "Techcrunch",
+      "summary": "There is no spoon."
+    }
+  ],
+  "publications": [
+    {
+      "name": "Video compression for 3d media",
+      "publisher": "Hooli",
+      "releaseDate": "2014-10-01",
+      "url": "http://en.wikipedia.org/wiki/Silicon_Valley_(TV_series)",
+      "summary": "Innovative middle-out compression algorithm that changes the way we store data."
+    }
+  ],
+  "skills": [
+    {
+      "name": "Web Development",
+      "level": "Master",
+      "keywords": [
+        "HTML",
+        "CSS",
+        "Javascript"
+      ]
+    },
+    {
+      "name": "Compression",
+      "level": "Master",
+      "keywords": [
+        "Mpeg",
+        "MP4",
+        "GIF"
+      ]
+    }
+  ],
+  "languages": [
+    {
+      "language": "English",
+      "fluency": "Native speaker"
+    }
+  ],
+  "interests": [
+    {
+      "name": "Wildlife",
+      "keywords": [
+        "Ferrets",
+        "Unicorns"
+      ]
+    }
+  ],
+  "references": [
+    {
+      "name": "Erlich Bachman",
+      "reference": "It is my pleasure to recommend Richard, his performance working as a consultant for Main St. Company proved that he will be a valuable addition to any company."
+    }
+  ],
+  "projects": [
+    {
+      "name": "Miss Direction",
+      "description": "A mapping engine that misguides you",
+      "highlights": [
+        "Won award at AIHacks 2016",
+        "Built by all women team of newbie programmers",
+        "Using modern technologies such as GoogleMaps, Chrome Extension and Javascript"
+      ],
+      "keywords": [
+        "GoogleMaps", "Chrome Extension", "Javascript"
+      ],
+      "startDate": "2016-08-24",
+      "endDate": "2016-08-24",
+      "url": "missdirection.example.com",
+      "roles": [
+        "Team lead", "Designer"
+      ],
+      "entity": "Smoogle",
+      "type": "application"
+    }
+  ],
+  "meta": {
+    "canonical": "https://raw.githubusercontent.com/jsonresume/resume-schema/master/resume.json",
+    "version": "v1.0.0",
+    "lastModified": "2017-12-24T15:53:00"
+  }
+}

src/editor/iconlib.js

@@ -1,6 +1,6 @@
 import { AbstractIconLib } from '@json-editor/json-editor/src/iconlib.js';
 
-import { getIconSVG } from '../icons';
+import { getIconSVG } from '../lib/icons';
 
 const iconMapping = {
   collapse: 'mdi:chevron-down',

src/editor/main.js

@@ -4,14 +4,14 @@ import objectPath from 'object-path';
 
 import { JSONEditor } from '@json-editor/json-editor/dist/jsoneditor';
 
-import * as exampleData from '../sample.resume.json';
+import * as exampleData from '../../sample.resume.json';
-import * as jsoncvSchemaModule from '../schema/jsoncv.schema.json';
-import { registerIconLib } from './iconlib';
-import { registerTheme } from './theme';
 import {
   createElement,
   traverseDownObject,
-} from './utils';
+} from '../lib/utils';
+import * as jsoncvSchemaModule from '../schema/jsoncv.schema.json';
+import { registerIconLib } from './iconlib';
+import { registerTheme } from './theme';
 
 const propertiesInOrder = ['basics', 'education', 'work', 'skills', 'projects', 'languages', 'interests', 'references', 'awards', 'publications', 'volunteer']
 const basicsPropertiesInOrder = ['name', 'label', 'email', 'phone', 'url', 'summary', 'image', 'location', 'profiles']

src/index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Document</title>
+</head>
+<body>
+  <h1>jsoncv</h1>
+</body>
+</html>

src/lib/icons.js

@@ -0,0 +1,54 @@
+import * as mdiJSON from '@iconify/json/json/mdi.json';
+import {
+  getIconData,
+  iconToSVG,
+  replaceIDs,
+  stringToIcon,
+} from '@iconify/utils';
+
+const svgAttributesBase = {
+  'xmlns': 'http://www.w3.org/2000/svg',
+  'xmlns:xlink': 'http://www.w3.org/1999/xlink',
+}
+
+const getIconsData = function(prefix) {
+  if (prefix === 'mdi') {
+    return mdiJSON;
+  }
+  throw new Error(`Icon set ${prefix} is not included.`);
+}
+
+export const getIconSVG = function(name, { dom }) {
+  const iconName = stringToIcon(name)
+  const icon = getIconData(getIconsData(iconName.prefix), iconName.name)
+  if (!icon) {
+    console.log('icon not found', name)
+    return
+  }
+  const renderData = iconToSVG(icon, {
+    height: '1em',
+    width: '1em',
+  });
+
+  const svgAttributes = {
+    ...svgAttributesBase,
+    ...renderData.attributes,
+  };
+  console.log('attrs', svgAttributesBase, renderData.attributes)
+
+  // Generate SVG
+  const svgAttributesStr = Object.keys(svgAttributes)
+    .map(
+      (attr) => `${attr}="${svgAttributes[attr]}"`
+    )
+    .join(' ');
+
+  const svgHTML = `<svg ${svgAttributesStr}>${replaceIDs(renderData.body)}</svg>`;
+
+  if (dom) {
+    const div = document.createElement('div');
+    div.innerHTML = svgHTML
+    return div.firstChild
+  }
+  return svgHTML
+}

src/templates/reorx.ejs

@@ -0,0 +1 @@
+<h1>reorx</h1>

vite.config.js

@@ -0,0 +1,27 @@
+import { resolve } from 'path';
+import { defineConfig } from 'vite';
+
+const sampleFilename = './sample.resume.json'
+let dataFilename = process.env.DATA_FILENAME || sampleFilename
+
+const data = require(dataFilename)
+
+const rootDir = resolve(__dirname, 'src')
+
+export default defineConfig({
+  // use relative path for assets
+  // base: "",
+  root: 'src',
+  build: {
+    // put assets in the same folder as index.html
+    // assetsDir: ".",
+    rollupOptions: {
+      input: {
+        main: resolve(rootDir, 'index.html'),
+        editor: resolve(rootDir, 'editor/index.html'),
+      },
+    },
+  },
+  plugins: [
+  ],
+})