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