diff --git a/package-lock.json b/package-lock.json
index 61a4a16..883a8c0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,6 +12,7 @@
"@json-editor/json-editor": "^2.9.0-beta.1",
"ajv": "^8.12.0",
"ajv-formats": "^2.1.1",
+ "cash-dom": "^8.1.3",
"dayjs": "^1.11.7",
"ejs": "^3.1.8",
"iconify-icon": "^1.0.3",
@@ -868,6 +869,11 @@
"url": "https://github.com/sponsors/ljharb"
}
},
+ "node_modules/cash-dom": {
+ "version": "8.1.3",
+ "resolved": "https://registry.npmjs.org/cash-dom/-/cash-dom-8.1.3.tgz",
+ "integrity": "sha512-+W6A9GrgH6do57T/2QLlobr8Q3nwvRoLf74HQRu8zFsyP8hBAjg0RJsubIP+uoV7MYknnugrEdEW5HHH0hJB7Q=="
+ },
"node_modules/chalk": {
"version": "4.1.2",
"resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
@@ -3844,6 +3850,11 @@
"get-intrinsic": "^1.0.2"
}
},
+ "cash-dom": {
+ "version": "8.1.3",
+ "resolved": "https://registry.npmjs.org/cash-dom/-/cash-dom-8.1.3.tgz",
+ "integrity": "sha512-+W6A9GrgH6do57T/2QLlobr8Q3nwvRoLf74HQRu8zFsyP8hBAjg0RJsubIP+uoV7MYknnugrEdEW5HHH0hJB7Q=="
+ },
"chalk": {
"version": "4.1.2",
"resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
diff --git a/package.json b/package.json
index dcb6fee..e708b37 100644
--- a/package.json
+++ b/package.json
@@ -22,6 +22,7 @@
"@json-editor/json-editor": "^2.9.0-beta.1",
"ajv": "^8.12.0",
"ajv-formats": "^2.1.1",
+ "cash-dom": "^8.1.3",
"dayjs": "^1.11.7",
"ejs": "^3.1.8",
"iconify-icon": "^1.0.3",
diff --git a/src/editor/index.html b/src/editor/index.html
index f54d581..d1b2b73 100644
--- a/src/editor/index.html
+++ b/src/editor/index.html
@@ -15,10 +15,17 @@
Editor
+
+
+
+
+
+
diff --git a/src/editor/main.js b/src/editor/main.js
index a581e52..93a1027 100644
--- a/src/editor/main.js
+++ b/src/editor/main.js
@@ -1,10 +1,12 @@
import 'iconify-icon'; // import only
+import $ from 'cash-dom';
import objectPath from 'object-path';
import { JSONEditor } from '@json-editor/json-editor/dist/jsoneditor';
import * as exampleData from '../../sample.resume.json';
+import { saveCVJSON } from '../lib/store';
import {
createElement,
traverseDownObject,
@@ -100,8 +102,29 @@ editor.on('ready',() => {
})
})
+const $outputJSON = $('.output-json')
+const $outputHTML = $('.output-html')
+
// listen to change
-const elOutput = document.querySelector('.editor-output')
editor.on('change', () => {
- elOutput.textContent = JSON.stringify(editor.getValue(), null, 2)
+ console.log('on editor change')
+ const cvJSON = JSON.stringify(editor.getValue(), null, 2)
+ $outputJSON.text(cvJSON)
+
+ // save to localstorage
+ saveCVJSON(cvJSON)
+})
+
+// actions
+const $btnShowPreview = $('#fn-show-preview')
+const $btnShowJSON = $('#fn-show-json')
+
+$btnShowPreview.on('click', () => {
+ $outputJSON.hide()
+ $outputHTML.show()
+})
+
+$btnShowJSON.on('click', () => {
+ $outputHTML.hide()
+ $outputJSON.show()
})
diff --git a/src/editor/preview.html b/src/editor/preview.html
new file mode 100644
index 0000000..ada12ad
--- /dev/null
+++ b/src/editor/preview.html
@@ -0,0 +1,14 @@
+
+
+
+
+
+
+ Document
+
+
+
+
+
+
+
diff --git a/src/editor/preview.js b/src/editor/preview.js
new file mode 100644
index 0000000..9e5ec3b
--- /dev/null
+++ b/src/editor/preview.js
@@ -0,0 +1,20 @@
+import {
+ getCVData,
+ getCVSavedTime,
+} from '../lib/store';
+import { applyThemeTo } from '../themer';
+
+const themeName = 'default'
+const elCV = document.querySelector('.cv-container')
+
+applyThemeTo(themeName, elCV, getCVData())
+
+const savedTime = getCVSavedTime()
+console.log('preview loaded', Date.now())
+
+const interval = setInterval(() => {
+ if (savedTime != getCVSavedTime()) {
+ clearInterval(interval)
+ location.reload()
+ }
+}, 1000)
diff --git a/src/editor/styles.scss b/src/editor/styles.scss
index 8985f85..357e4a4 100644
--- a/src/editor/styles.scss
+++ b/src/editor/styles.scss
@@ -42,7 +42,6 @@ body {
}
.right {
background-color: #eee;
- padding: var(--gap);
}
}
@@ -67,6 +66,15 @@ body {
}
}
+.output-html {
+ width: 100%;
+ height: 100%;
+}
+
+.output-json {
+ padding: var(--gap);
+}
+
.code-block {
font-size: 12px;
font-family: var(--font-mono);
diff --git a/src/lib/icons.js b/src/lib/icons.js
index 78c96a1..7cf78ae 100644
--- a/src/lib/icons.js
+++ b/src/lib/icons.js
@@ -34,7 +34,6 @@ export const getIconSVG = function(name, { dom }) {
...svgAttributesBase,
...renderData.attributes,
};
- console.log('attrs', svgAttributesBase, renderData.attributes)
// Generate SVG
const svgAttributesStr = Object.keys(svgAttributes)
diff --git a/src/lib/store.js b/src/lib/store.js
new file mode 100644
index 0000000..82482b9
--- /dev/null
+++ b/src/lib/store.js
@@ -0,0 +1,19 @@
+export const storeKeys = {
+ cvJSON: 'cvJSON',
+ cvSavedTime: 'cvSavedTime',
+}
+
+export function saveCVJSON(str) {
+ localStorage.setItem(storeKeys.cvJSON, str)
+ localStorage.setItem(storeKeys.cvSavedTime, Date.now())
+}
+
+export function getCVData() {
+ const v = localStorage.getItem(storeKeys.cvJSON)
+ if (!v) return
+ return JSON.parse(v)
+}
+
+export function getCVSavedTime() {
+ return localStorage.getItem(storeKeys.cvSavedTime)
+}
diff --git a/src/main.js b/src/main.js
index bb4813d..7b9d81c 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,13 +1,7 @@
import * as exampleData from '../data/rxresume-converted.json';
-import { reformatDate } from './lib/date';
import { applyThemeTo } from './themer';
const elCV = document.querySelector('.cv-container')
-applyThemeTo('default', {
- cv: exampleData,
- fn: {
- reformatDate,
- }
-}, elCV)
+applyThemeTo('default', elCV, exampleData)
diff --git a/src/themer/index.js b/src/themer/index.js
index 41a5265..5fb78f6 100644
--- a/src/themer/index.js
+++ b/src/themer/index.js
@@ -1,5 +1,7 @@
import ejs from 'ejs';
+import { reformatDate } from '../lib/date';
+
const themes = {}
const themeNames = ['reorx']
@@ -28,15 +30,20 @@ export function getTheme(name) {
return themes[name]
}
-export function render(template, data, options) {
- return ejs.render(template, data, options)
+export function renderTheme(template, data, options) {
+ return ejs.render(template, {
+ cv: data,
+ fn: {
+ reformatDate,
+ }
+ }, options)
}
const cvStyleId = 'cv-style'
-export function applyThemeTo(name, data, el) {
+export function applyThemeTo(name, el, data) {
const theme = getTheme(name)
- el.innerHTML = render(theme.template, data)
+ el.innerHTML = renderTheme(theme.template, data)
let elStyle = document.getElementById(cvStyleId)
if (!elStyle) {
diff --git a/vite.config.js b/vite.config.js
index 74a0a6e..4536273 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -42,6 +42,7 @@ export default defineConfig({
input: {
main: resolve(rootDir, 'index.html'),
editor: resolve(rootDir, 'editor/index.html'),
+ editorPreview: resolve(rootDir, 'editor/preview.html'),
},
},
},