docs(editor): replace static demo with editor

rbardini · Sep 15, 2023 · 5575556 · 5575556
1 parent e9aba0d
commit 5575556
Show file tree

Hide file tree

Showing 9 changed files with 345 additions and 21 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -4,7 +4,7 @@
     "node": true
   },
   "extends": "eslint:recommended",
-  "ignorePatterns": ["test", "vite.config.js"],
+  "ignorePatterns": ["editor.js", "test", "vite.config.js"],
   "parserOptions": {
     "sourceType": "module"
   }

diff --git a/.prettierrc.json b/.prettierrc.json
@@ -1,5 +1,6 @@
 {
   "arrowParens": "avoid",
+  "printWidth": 120,
   "semi": false,
   "singleQuote": true
 }
diff --git a/editor.css b/editor.css
@@ -0,0 +1,55 @@
+html,
+body {
+  height: 100%;
+}
+
+html {
+  color-scheme: light dark;
+}
+
+body {
+  display: grid;
+  grid-template: 50% 50% / 100%;
+  margin: 0;
+}
+
+button {
+  cursor: pointer;
+}
+
+iframe {
+  border: 0;
+  order: 1;
+  width: 100%;
+  height: 100%;
+}
+
+nav {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  position: absolute;
+  inset-block-end: 1rem;
+  inset-inline-end: 1rem;
+}
+
+nav > * {
+  background: ButtonFace;
+  border: 1px solid ButtonBorder;
+  border-radius: 50%;
+  color: ButtonText;
+  padding: 0.5rem;
+  display: grid;
+  place-items: center;
+}
+
+nav > :hover,
+nav > :focus {
+  background: Canvas;
+}
+
+@media (min-width: 720px) {
+  body {
+    grid-template: 100% / 50% 50%;
+  }
+}
diff --git a/editor.js b/editor.js
@@ -0,0 +1,33 @@
+import { indentWithTab } from '@codemirror/commands'
+import { json } from '@codemirror/lang-json'
+import { EditorView, keymap } from '@codemirror/view'
+import { oneDark } from '@codemirror/theme-one-dark'
+import { basicSetup } from 'codemirror'
+import { debounce } from 'debounce'
+import resume from 'resume-schema/sample.resume.json' assert { type: 'json' }
+
+import { render } from './index.js'
+import './editor.css'
+
+const preview = document.querySelector('iframe')
+const printButton = document.querySelector('button[name=print]')
+
+printButton.addEventListener('click', () => preview.contentWindow.print())
+
+const renderPreview = debounce(resume => (preview.srcdoc = render(resume)), 200)
+renderPreview(resume)
+
+new EditorView({
+  doc: JSON.stringify(resume, null, '  '),
+  extensions: [
+    basicSetup,
+    oneDark,
+    EditorView.lineWrapping,
+    EditorView.updateListener.of(
+      ({ docChanged, state }) => docChanged && renderPreview(JSON.parse(state.doc.toString())),
+    ),
+    keymap.of([indentWithTab]),
+    json(),
+  ],
+  parent: document.body,
+})
diff --git a/index.html b/index.html
@@ -0,0 +1,34 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>jsonresume-theme-even</title>
+    <meta name="description" content="A flat JSON Resume theme, compatible with the latest resume schema." />
+    <meta name="viewport" content="width=device-width" />
+    <script src="/editor.js" type="module"></script>
+  </head>
+  <body>
+    <iframe src="about:blank"></iframe>
+    <nav>
+      <button name="print" aria-label="Print resume" title="Print resume">
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <polyline points="6 9 6 2 18 2 18 9"></polyline>
+          <path d="M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2"></path>
+          <rect x="6" y="14" width="12" height="8"></rect>
+        </svg>
+      </button>
+      <a
+        href="https://github.com/rbardini/jsonresume-theme-even"
+        aria-label="Star on GitHub"
+        title="Star on GitHub"
+        target="_blank"
+      >
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <path
+            d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"
+          ></path>
+        </svg>
+      </a>
+    </nav>
+  </body>
+</html>
diff --git a/netlify.toml b/netlify.toml
@@ -1,3 +1,3 @@
 [build]
-  command = "npm run build:demo"
+  command = "npm run build -- --mode development"
   publish = "public"
diff --git a/package-lock.json b/package-lock.json