gitadmin
/
jsoncv
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

finish preview in editor

This commit is contained in:
Reorx 2023-02-05 00:00:01 +08:00
parent 582d629057
commit 50e9624133
12 changed files with 120 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
package-lock.json generated
View File

@ -12,6 +12,7 @@
"@json-editor/json-editor": "^2.9.0-beta.1", "@json-editor/json-editor": "^2.9.0-beta.1",
"ajv": "^8.12.0", "ajv": "^8.12.0",
"ajv-formats": "^2.1.1", "ajv-formats": "^2.1.1",
"cash-dom": "^8.1.3",
"dayjs": "^1.11.7", "dayjs": "^1.11.7",
"ejs": "^3.1.8", "ejs": "^3.1.8",
"iconify-icon": "^1.0.3", "iconify-icon": "^1.0.3",
@ -868,6 +869,11 @@
"url": "https://github.com/sponsors/ljharb" "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": { "node_modules/chalk": {
"version": "4.1.2", "version": "4.1.2",
"resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
@ -3844,6 +3850,11 @@
"get-intrinsic": "^1.0.2" "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": { "chalk": {
"version": "4.1.2", "version": "4.1.2",
"resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",

1
package.json
View File

@ -22,6 +22,7 @@
"@json-editor/json-editor": "^2.9.0-beta.1", "@json-editor/json-editor": "^2.9.0-beta.1",
"ajv": "^8.12.0", "ajv": "^8.12.0",
"ajv-formats": "^2.1.1", "ajv-formats": "^2.1.1",
"cash-dom": "^8.1.3",
"dayjs": "^1.11.7", "dayjs": "^1.11.7",
"ejs": "^3.1.8", "ejs": "^3.1.8",
"iconify-icon": "^1.0.3", "iconify-icon": "^1.0.3",

9
src/editor/index.html
View File

@ -15,10 +15,17 @@
<div>Editor</div> <div>Editor</div>
</div> </div>
<div class="editor-toc"></div> <div class="editor-toc"></div>
<div class="app-actions">
<button id="fn-show-preview">Show Preview</button>
<button id="fn-show-json">Show JSON</button>
<button id="fn-download-json">Download JSON</button>
<button id="fn-download-html">Download HTML</button>
</div>
</div> </div>
<div class="middle column editor-container"></div> <div class="middle column editor-container"></div>
<div class="right column"> <div class="right column">
<div class="editor-output code-block"></div> <div class="output-json code-block" style="display: none;"></div>
<iframe class="output-html" src="/editor/preview.html" frameborder="0"></iframe>
</div> </div>
</div> </div>

27
src/editor/main.js
View File

@ -1,10 +1,12 @@
import 'iconify-icon'; // import only import 'iconify-icon'; // import only
import $ from 'cash-dom';
import objectPath from 'object-path'; import objectPath from 'object-path';
import { JSONEditor } from '@json-editor/json-editor/dist/jsoneditor'; import { JSONEditor } from '@json-editor/json-editor/dist/jsoneditor';
import * as exampleData from '../../sample.resume.json'; import * as exampleData from '../../sample.resume.json';
import { saveCVJSON } from '../lib/store';
import { import {
createElement, createElement,
traverseDownObject, traverseDownObject,
@ -100,8 +102,29 @@ editor.on('ready',() => {
}) })
}) })
const $outputJSON = $('.output-json')
const $outputHTML = $('.output-html')
// listen to change // listen to change
const elOutput = document.querySelector('.editor-output')
editor.on('change', () => { 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()
}) })

14
src/editor/preview.html Normal file
View File

@ -0,0 +1,14 @@
<!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>
<div class="cv-container"></div>
<script src="preview.js" type="module"></script>
</body>
</html>

20
src/editor/preview.js Normal file
View File

@ -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)

10
src/editor/styles.scss
View File

@ -42,7 +42,6 @@ body {
} }
.right { .right {
background-color: #eee; background-color: #eee;
padding: var(--gap);
} }
} }
@ -67,6 +66,15 @@ body {
} }
} }
.output-html {
width: 100%;
height: 100%;
}
.output-json {
padding: var(--gap);
}
.code-block { .code-block {
font-size: 12px; font-size: 12px;
font-family: var(--font-mono); font-family: var(--font-mono);

1
src/lib/icons.js
View File

@ -34,7 +34,6 @@ export const getIconSVG = function(name, { dom }) {
...svgAttributesBase, ...svgAttributesBase,
...renderData.attributes, ...renderData.attributes,
}; };
console.log('attrs', svgAttributesBase, renderData.attributes)
// Generate SVG // Generate SVG
const svgAttributesStr = Object.keys(svgAttributes) const svgAttributesStr = Object.keys(svgAttributes)

19
src/lib/store.js Normal file
View File

@ -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)
}

8
src/main.js
View File

@ -1,13 +1,7 @@
import * as exampleData from '../data/rxresume-converted.json'; import * as exampleData from '../data/rxresume-converted.json';
import { reformatDate } from './lib/date';
import { applyThemeTo } from './themer'; import { applyThemeTo } from './themer';
const elCV = document.querySelector('.cv-container') const elCV = document.querySelector('.cv-container')
applyThemeTo('default', { applyThemeTo('default', elCV, exampleData)
cv: exampleData,
fn: {
reformatDate,
}
}, elCV)

15
src/themer/index.js
View File

@ -1,5 +1,7 @@
import ejs from 'ejs'; import ejs from 'ejs';
import { reformatDate } from '../lib/date';
const themes = {} const themes = {}
const themeNames = ['reorx'] const themeNames = ['reorx']
@ -28,15 +30,20 @@ export function getTheme(name) {
return themes[name] return themes[name]
} }
export function render(template, data, options) { export function renderTheme(template, data, options) {
return ejs.render(template, data, options) return ejs.render(template, {
cv: data,
fn: {
reformatDate,
}
}, options)
} }
const cvStyleId = 'cv-style' const cvStyleId = 'cv-style'
export function applyThemeTo(name, data, el) { export function applyThemeTo(name, el, data) {
const theme = getTheme(name) const theme = getTheme(name)
el.innerHTML = render(theme.template, data) el.innerHTML = renderTheme(theme.template, data)
let elStyle = document.getElementById(cvStyleId) let elStyle = document.getElementById(cvStyleId)
if (!elStyle) { if (!elStyle) {

1
vite.config.js
View File

@ -42,6 +42,7 @@ export default defineConfig({
input: { input: {
main: resolve(rootDir, 'index.html'), main: resolve(rootDir, 'index.html'),
editor: resolve(rootDir, 'editor/index.html'), editor: resolve(rootDir, 'editor/index.html'),
editorPreview: resolve(rootDir, 'editor/preview.html'),
}, },
}, },
}, },