add editor folder, implement the editor for editing jsoncv data
This commit is contained in:
Reorx
parent
9e9e879c21
commit
5551ac6ced
|
|
@ -0,0 +1,2 @@
|
||||||
|
dist/
|
||||||
|
data/
|
||||||
|
|
@ -0,0 +1,22 @@
|
||||||
|
<!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>JSONCV Editor</title>
|
||||||
|
<link rel="stylesheet" href="styles.scss" />
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<h1>JSONCV Editor</h1>
|
||||||
|
|
||||||
|
<div id="main">
|
||||||
|
<div class="left" id="editor-container"></div>
|
||||||
|
<div class="right">
|
||||||
|
<div id="editor-toc"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script src="main.js" type="module"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,64 @@
|
||||||
|
import { JSONEditor } from '@json-editor/json-editor/dist/jsoneditor';
|
||||||
|
|
||||||
|
import * as exampleData from '../sample.resume.json';
|
||||||
|
import * as jsoncvSchema from '../schema/jsoncv.schema.json';
|
||||||
|
import { createElement } from './utils';
|
||||||
|
|
||||||
|
const propertiesInOrder = ['basics', 'education', 'work', 'skills', 'projects', 'languages', 'interests', 'references', 'awards', 'publications', 'volunteer']
|
||||||
|
const basicsPropertiesInOrder = ['name', 'label', 'email', 'phone', 'url', 'summary', 'image', 'location', 'profiles']
|
||||||
|
|
||||||
|
// toc elements
|
||||||
|
const elToc = document.querySelector('#editor-toc')
|
||||||
|
const tocUl = createElement('ul', {
|
||||||
|
parent: elToc
|
||||||
|
})
|
||||||
|
const basicsUl = createElement('ul', {
|
||||||
|
parent: tocUl
|
||||||
|
})
|
||||||
|
|
||||||
|
const attrSchemaPathTo = 'data-schemapath-to'
|
||||||
|
|
||||||
|
// add propertyOrder to schema, and add links to toc
|
||||||
|
propertiesInOrder.forEach((name, index) => {
|
||||||
|
jsoncvSchema.properties[name].propertyOrder = index
|
||||||
|
|
||||||
|
const li = createElement('li', {parent: tocUl})
|
||||||
|
createElement('a', {
|
||||||
|
text: name,
|
||||||
|
attrs: {
|
||||||
|
href: `#root.${name}`
|
||||||
|
},
|
||||||
|
parent: li,
|
||||||
|
})
|
||||||
|
|
||||||
|
if (name === 'basics') {
|
||||||
|
li.appendChild(basicsUl)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
basicsPropertiesInOrder.forEach((name, index) => {
|
||||||
|
jsoncvSchema.properties.basics.properties[name].propertyOrder = index
|
||||||
|
const li = createElement('li', {parent: basicsUl})
|
||||||
|
createElement('a', {
|
||||||
|
text: name,
|
||||||
|
attrs: {
|
||||||
|
href: `#root.basics.${name}`
|
||||||
|
},
|
||||||
|
parent: li,
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
// initialize editor
|
||||||
|
const elEditorContainer = document.querySelector('#editor-container')
|
||||||
|
const editor = new JSONEditor(elEditorContainer, {
|
||||||
|
schema: jsoncvSchema,
|
||||||
|
});
|
||||||
|
editor.on('ready',() => {
|
||||||
|
editor.setValue(exampleData)
|
||||||
|
|
||||||
|
// add anchor to each schema element
|
||||||
|
document.querySelectorAll('[data-schemapath]').forEach(el => {
|
||||||
|
const schemapath = el.getAttribute('data-schemapath')
|
||||||
|
el.id = schemapath
|
||||||
|
console.log('el', schemapath)
|
||||||
|
})
|
||||||
|
})
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,20 @@
|
||||||
|
{
|
||||||
|
"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"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,32 @@
|
||||||
|
#main {
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
.left {
|
||||||
|
flex-grow: 1;
|
||||||
|
}
|
||||||
|
.right {
|
||||||
|
width: 300px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#editor-container {
|
||||||
|
[data-schemapath]:target {
|
||||||
|
animation: bgFade 2s forwards;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#editor-toc {
|
||||||
|
position: fixed;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes bgFade {
|
||||||
|
0% {
|
||||||
|
background-color: #fff0a5;
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
background-color: #fff6b3da;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,16 @@
|
||||||
|
export const createElement = function(tagName, {className, text, attrs, parent}) {
|
||||||
|
const el = document.createElement(tagName)
|
||||||
|
if (className)
|
||||||
|
el.className = className
|
||||||
|
if (text)
|
||||||
|
el.textContent = text
|
||||||
|
if (attrs) {
|
||||||
|
for (const key in attrs) {
|
||||||
|
el.setAttribute(key, attrs[key])
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (parent) {
|
||||||
|
parent.appendChild(el)
|
||||||
|
}
|
||||||
|
return el
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,27 @@
|
||||||
|
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: ['..'],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
})
|
||||||
Loading…
Reference in New Issue