diff --git a/.eslintrc.js b/.eslintrc.js
index 4bd1900..02cea76 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -14,6 +14,7 @@ module.exports = {
rules: {
'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
- 'vue/max-attributes-per-line': 'off'
+ 'vue/max-attributes-per-line': 'off',
+ 'vue/html-self-closing': 0
}
}
diff --git a/assets/ace-dark-theme.css b/assets/ace-dark-theme.css
new file mode 100644
index 0000000..1b166fe
--- /dev/null
+++ b/assets/ace-dark-theme.css
@@ -0,0 +1,110 @@
+.ace-vibrant-ink .ace_gutter {
+ background: #0c0c0c !important;
+ color: #363636 !important;
+}
+
+.ace-vibrant-ink .ace_print-margin {
+ width: 1px;
+ background: #0c0c0c !important;
+}
+
+.ace-vibrant-ink {
+ background-color: #0c0c0c !important;
+ color: #ffffff;
+}
+
+.ace-vibrant-ink .ace_cursor {
+ color: #ffffff;
+}
+
+.ace-vibrant-ink .ace_marker-layer .ace_selection {
+ background: rgba(181, 213, 255, 0.4) !important;
+}
+
+.ace-vibrant-ink.ace_multiselect .ace_selection.ace_start {
+ box-shadow: 0 0 3px 0px #0f0f0f;
+}
+
+.ace-vibrant-ink .ace_marker-layer .ace_step {
+ background: rgb(102, 82, 0);
+}
+
+.ace-vibrant-ink .ace_marker-layer .ace_bracket {
+ margin: -1px 0 0 -1px;
+ border: 1px solid #404040;
+}
+
+.ace-vibrant-ink .ace_marker-layer .ace_active-line {
+ background: #181818 !important;
+}
+
+.ace-vibrant-ink .ace_gutter-active-line {
+ background-color: #181818 !important;
+}
+
+.ace-vibrant-ink .ace_marker-layer .ace_selected-word {
+ border: 1px solid #6699cc;
+}
+
+.ace-vibrant-ink .ace_invisible {
+ color: #404040;
+}
+
+.ace-vibrant-ink .ace_keyword,
+.ace-vibrant-ink .ace_meta {
+ color: #ff6600;
+}
+
+.ace-vibrant-ink .ace_constant,
+.ace-vibrant-ink .ace_constant.ace_character,
+.ace-vibrant-ink .ace_constant.ace_character.ace_escape,
+.ace-vibrant-ink .ace_constant.ace_other {
+ color: #339999;
+}
+
+.ace-vibrant-ink .ace_constant.ace_numeric {
+ color: #99cc99;
+}
+
+.ace-vibrant-ink .ace_invalid,
+.ace-vibrant-ink .ace_invalid.ace_deprecated {
+ color: #ccff33;
+ background-color: #000000;
+}
+
+.ace-vibrant-ink .ace_fold {
+ background-color: #ffcc00;
+ border-color: #ffffff;
+}
+
+.ace-vibrant-ink .ace_entity.ace_name.ace_function,
+.ace-vibrant-ink .ace_support.ace_function,
+.ace-vibrant-ink .ace_variable {
+ color: #ffcc00;
+}
+
+.ace-vibrant-ink .ace_variable.ace_parameter {
+ font-style: italic;
+}
+
+.ace-vibrant-ink .ace_string {
+ color: #66ff00;
+}
+
+.ace-vibrant-ink .ace_string.ace_regexp {
+ color: #44b4cc;
+}
+
+.ace-vibrant-ink .ace_comment {
+ color: #9933cc;
+}
+
+.ace-vibrant-ink .ace_entity.ace_other.ace_attribute-name {
+ font-style: italic;
+ color: #99cc99;
+}
+
+.ace-vibrant-ink .ace_indent-guide {
+ background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAACCAYAAACZgbYnAAAAEklEQVQImWNgYGBgYNDTc/oPAALPAZ7hxlbYAAAAAElFTkSuQmCC)
+ right repeat-y;
+}
diff --git a/assets/ace-light-theme.css b/assets/ace-light-theme.css
new file mode 100644
index 0000000..1dead7e
--- /dev/null
+++ b/assets/ace-light-theme.css
@@ -0,0 +1,123 @@
+.ace-github .ace_gutter {
+ background: #fff !important;
+ color: #aaa;
+}
+
+.ace-github {
+ background: #fff !important;
+ color: #000;
+}
+
+.ace-github .ace_keyword {
+ font-weight: bold;
+}
+
+.ace-github .ace_string {
+ color: #d14;
+}
+
+.ace-github .ace_variable.ace_class {
+ color: teal;
+}
+
+.ace-github .ace_constant.ace_numeric {
+ color: #099;
+}
+
+.ace-github .ace_constant.ace_buildin {
+ color: #0086b3;
+}
+
+.ace-github .ace_support.ace_function {
+ color: #0086b3;
+}
+
+.ace-github .ace_comment {
+ color: #998;
+ font-style: italic;
+}
+
+.ace-github .ace_variable.ace_language {
+ color: #0086b3;
+}
+
+.ace-github .ace_paren {
+ font-weight: bold;
+}
+
+.ace-github .ace_boolean {
+ font-weight: bold;
+}
+
+.ace-github .ace_string.ace_regexp {
+ color: #009926;
+ font-weight: normal;
+}
+
+.ace-github .ace_variable.ace_instance {
+ color: teal;
+}
+
+.ace-github .ace_constant.ace_language {
+ font-weight: bold;
+}
+
+.ace-github .ace_cursor {
+ color: black;
+}
+
+.ace-github.ace_focus .ace_marker-layer .ace_active-line {
+ background: rgb(255, 255, 204);
+}
+.ace-github .ace_marker-layer .ace_active-line {
+ background: #f8f8fa !important;
+}
+
+.ace-github .ace_marker-layer .ace_selection {
+ background: rgba(181, 213, 255, 0.4) !important;
+}
+
+.ace-github.ace_multiselect .ace_selection.ace_start {
+ box-shadow: 0 0 3px 0px white;
+}
+/* bold keywords cause cursor issues for some fonts */
+/* this disables bold style for editor and keeps for static highlighter */
+.ace-github.ace_nobold .ace_line > span {
+ font-weight: normal !important;
+}
+
+.ace-github .ace_marker-layer .ace_step {
+ background: rgb(252, 255, 0);
+}
+
+.ace-github .ace_marker-layer .ace_stack {
+ background: rgb(164, 229, 101);
+}
+
+.ace-github .ace_marker-layer .ace_bracket {
+ margin: -1px 0 0 -1px;
+ border: 1px solid rgb(192, 192, 192);
+}
+
+.ace-github .ace_gutter-active-line {
+ background-color: #f8f8fa !important;
+}
+
+.ace-github .ace_marker-layer .ace_selected-word {
+ background: rgb(250, 250, 255);
+ border: 1px solid rgb(200, 200, 250);
+}
+
+.ace-github .ace_invisible {
+ color: #bfbfbf;
+}
+
+.ace-github .ace_print-margin {
+ width: 1px;
+ background: #e8e8e8;
+}
+
+.ace-github .ace_indent-guide {
+ background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAACCAYAAACZgbYnAAAAE0lEQVQImWP4////f4bLly//BwAmVgd1/w11/gAAAABJRU5ErkJggg==')
+ right repeat-y;
+}
diff --git a/nuxt.config.js b/nuxt.config.js
index 56f1f3b..bb59903 100644
--- a/nuxt.config.js
+++ b/nuxt.config.js
@@ -34,7 +34,10 @@ module.exports = {
/*
** Global CSS
*/
- css: [],
+ css: [
+ { src: '~/assets/ace-dark-theme.css', lang: 'css' },
+ { src: '~/assets/ace-light-theme.css', lang: 'css' }
+ ],
/*
** Plugins to load before mounting the App
diff --git a/pages/index.vue b/pages/index.vue
index 24799cb..5d18e91 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -2,40 +2,80 @@
@@ -70,7 +110,9 @@ export default {
return {
darkTheme: true,
info: false,
- editor: null
+ editor: null,
+ copied: false,
+ formatted: false
}
},
async mounted() {
@@ -89,12 +131,12 @@ export default {
require('brace/theme/github')
// Editor config
-
this.editor = ace.edit('editor')
this.editor.getSession().setMode('ace/mode/json')
this.editor.setTheme('ace/theme/vibrant_ink')
this.editor.setShowPrintMargin(false)
+ this.editor.container.style.lineHeight = 1.5
this.editor.setOptions({
fontFamily: 'Roboto Mono',
@@ -180,6 +222,10 @@ export default {
console.error('Error formatting JSON')
console.error(err)
}
+ this.formatted = true
+ setTimeout(() => {
+ this.formatted = false
+ }, 1250)
},
saveJSON(text) {
localStorage.setItem('jsoncache', text)
@@ -214,6 +260,10 @@ export default {
this.editor.clearSelection()
this.editor.gotoLine(1)
this.editor.scrollToLine(1, 1, true)
+ this.copied = true
+ setTimeout(() => {
+ this.copied = false
+ }, 1250)
},
hideInfoBox() {
if (!this.info) return
@@ -226,14 +276,20 @@ export default {
localStorage.setItem('jsonpizza:seen-info', 1)
}
}
+ },
+ head() {
+ return {
+ bodyAttrs: {
+ style: this.darkTheme
+ ? 'background-color: black'
+ : 'background-color: #efeff1'
+ }
+ }
}
}
diff --git a/static/i.png b/static/i.png
new file mode 100644
index 0000000..4977dda
Binary files /dev/null and b/static/i.png differ
+