Example page improved

example/assets/demo.css

@@ -0,0 +1,118 @@
+/**
+ * Styles for the example page
+ */
+body {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+  font-size: 14px;
+  line-height: 1.5em;
+  margin: 0;
+}
+
+.ce-example {
+  font-size: 15px;
+}
+
+.ce-example__header {
+  border-bottom: 1px solid #E8E8EB;
+  height: 50px;
+  line-height: 50px;
+  display: flex;
+  padding: 0 30px;
+  margin-bottom: 30px;
+}
+
+.ce-example__header a {
+  color: inherit;
+  text-decoration: none;
+}
+
+.ce-example__header-logo {
+  font-weight: bold;
+}
+
+.ce-example__header-menu {
+  margin-left: auto;
+}
+
+.ce-example__header-menu a {
+  margin-left: 20px;
+}
+
+.ce-example__content {
+  max-width: 1100px;
+  margin: 0 auto;
+}
+
+.ce-example__output {
+  background: #1B202B;
+  overflow-x: auto;
+  padding: 0 30px;
+}
+
+.ce-example__output-content {
+  max-width: 650px;
+  margin: 30px auto;
+  color: #ABADC3;
+  font-family: 'PT Mono', Menlo, Monaco, Consolas, Courier New, monospace;
+  font-size: 13.3px;
+}
+
+.ce-example__output-content:empty {
+  display: none;
+}
+
+.ce-example__button {
+  display: block;
+  margin: 50px auto;
+  max-width: 180px;
+  background: #4A9DF8;
+  padding: 17px 30px;
+  box-shadow: 0 6px 4px -4px rgba(137, 207, 255, 0.77);
+  cursor: pointer;
+  border-radius: 31px;
+  color: #fff;
+  font-family: 'PT Mono', Menlo, Monaco, Consolas, Courier New, monospace;
+  text-align: center;
+}
+
+.ce-example__button:hover {
+  background: #3D8DE5;
+}
+
+.ce-example__output-footer {
+  padding: 30px 0;
+  font-size: 14.2px;
+  letter-spacing: 0.3px;
+  text-align: center;
+}
+
+.ce-example__output-footer a {
+  color: #fff;
+  text-decoration: none;
+}
+
+@media all and (max-width: 680px){
+  .ce-example__header,
+  .ce-example__content{
+    padding: 0 20px;
+  }
+}
+
+/**
+ * JSON highlighter
+ */
+.sc_attr {
+  color: rgb(148, 162, 192);
+}
+.sc_key {
+  color: rgb(190, 213, 255);
+}
+.sc_toolname {
+  color: rgb(15, 205, 251);
+}
+.sc_tag {
+  color: rgb(4, 131, 216);
+}
+.sc_bool {
+  color: rgb(247, 60, 173);
+}

example/assets/json-preview.js

@@ -0,0 +1,45 @@
+/**
+ * Module to compose output JSON preview
+ */
+const cPreview = (function (module) {
+  /**
+   * Shows JSON in pretty preview
+   * @param {object} output - what to show
+   * @param {Element} holder - where to show
+   */
+  module.show = function(output, holder) {
+    /** Make JSON pretty */
+    output = JSON.stringify( output, null, 4 );
+    /** Encode HTML entities */
+    output = encodeHTMLEntities( output );
+    /** Stylize! */
+    output = stylize( output );
+    holder.innerHTML = output;
+  };
+
+  /**
+   * Converts '>', '<', '&' symbols to entities
+   */
+  function encodeHTMLEntities(string) {
+    return string.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+  }
+
+  /**
+   * Some styling magic
+   */
+  function stylize(string) {
+    /** Stylize JSON keys */
+    string = string.replace( /"(\w+)"\s?:/g, '"<span class=sc_key>$1</span>" :');
+    /** Stylize tool names */
+    string = string.replace( /"(text|quote|list|header|link|code|image)"/g, '"<span class=sc_toolname>$1</span>"');
+    /** Stylize HTML tags */
+    string = string.replace( /(&lt;[\/a-z]+(&gt;)?)/gi, '<span class=sc_tag>$1</span>' );
+    /** Stylize strings */
+    string = string.replace( /"([^"]+)"/gi, '"<span class=sc_attr>$1</span>"' );
+    /** Boolean/Null */
+    string = string.replace( /\b(true|false|null)\b/gi, '<span class=sc_bool>$1</span>' );
+    return string;
+  }
+
+  return module;
+})({});