feat(demo): add png/json preview to demo site and refactor (DenverCoder1#457)

Author: DenverCoder1

src/demo/css/style.css

@@ -205,10 +205,13 @@ input:focus:invalid {
 
 .advanced .parameters {
   margin-top: 8px;
+}
+
+.advanced .color-properties {
   grid-template-columns: auto 1fr auto;
 }
 
-.advanced .parameters label:first-of-type {
+.advanced .color-properties label:first-of-type {
   font-weight: bold;
 }
 
@@ -239,7 +242,8 @@ input:focus:invalid {
   border-left: 4px solid var(--yellow);
 }
 
-.output .md {
+.output .md,
+.output .json {
   background: var(--border);
   border-radius: 6px;
   padding: 12px 16px;

src/demo/index.php

@@ -47,19 +47,19 @@ function gtag() {
     </script>
     <title>GitHub Readme Streak Stats Demo</title>
     <link href="https://css.gg/css?=|moon|sun" rel="stylesheet">
-    <link rel="stylesheet" href="./css/style.css">
-    <link rel="stylesheet" href="./css/toggle-dark.css">
+    <link rel="stylesheet" href="./css/style.css?v=<?= filemtime("./css/style.css") ?>">
+    <link rel="stylesheet" href="./css/toggle-dark.css?v=<?= filemtime("./css/toggle-dark.css") ?>">
 
     <!-- Favicons -->
     <link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
     <link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
     <link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
     <link rel="mask-icon" href="icon.svg" color="#fb8c00">
 
-    <script type="text/javascript" src="./js/script.js" defer></script>
-    <script type="text/javascript" src="./js/accordion.js" defer></script>
-    <script type="text/javascript" src="./js/toggle-dark.js" defer></script>
-    <script type="text/javascript" src="./js/jscolor.min.js" defer></script>
+    <script type="text/javascript" src="./js/script.js?v=<?= filemtime("./js/script.js") ?>" defer></script>
+    <script type="text/javascript" src="./js/accordion.js?v=<?= filemtime("./js/accordion.js") ?>" defer></script>
+    <script type="text/javascript" src="./js/toggle-dark.js?v=<?= filemtime("./js/toggle-dark.js") ?>" defer></script>
+    <script type="text/javascript" src="./js/jscolor.min.js?v=<?= filemtime("./js/jscolor.min.js") ?>" defer></script>
     <script async defer src="https://buttons.github.io/buttons.js"></script>
 </head>
 
@@ -137,15 +137,16 @@ function gtag() {
                     <option value="weekly">Weekly</option>
                 </select>
 
-                <label for="disable_animations">Disable Animations</label>
-                <select class="param" id="hide-border" name="disable_animations">
-                    <option>false</option>
-                    <option>true</option>
+                <label for="type">Output Type</label>
+                <select class="param" id="type" name="type">
+                    <option value="svg">SVG</option>
+                    <option value="png">PNG</option>
+                    <option value="json">JSON</option>
                 </select>
 
                 <details class="advanced">
                     <summary>⚙ Advanced Options</summary>
-                    <div class="content parameters">
+                    <div class="content color-properties parameters">
                         <label for="theme">Add Property</label>
                         <select id="properties" name="properties">
                             <?php foreach ($THEMES["default"] as $option => $color): ?>
@@ -167,6 +168,9 @@ function gtag() {
             <div class="top">
                 <h2>Preview</h2>
                 <img alt="GitHub Readme Streak Stats" src="preview.php?user=" />
+                <div class="json" style="display: none;">
+                    <pre></pre>
+                </div>
                 <p class="warning">
                     Note: The stats above are just examples and not from your GitHub profile.
                 </p>

src/demo/js/script.js

@@ -12,7 +12,7 @@ const preview = {
     locale: "en",
     border_radius: "4.5",
     mode: "daily",
-    disable_animations: "false",
+    type: "svg",
   },
 
   /**
@@ -29,12 +29,23 @@ const preview = {
     // generate links and markdown
     const imageURL = `${window.___location.origin}?${query}`;
     const demoImageURL = `preview.php?${query}`;
-    const repoLink = "https://git.io/streak-stats";
-    const md = `[![GitHub Streak](${imageURL})](${repoLink})`;
-    // update image preview
-    document.querySelector(".output img").src = demoImageURL;
-    // update markdown
-    document.querySelector(".md code").innerText = md;
+    // update preview
+    if (params.type !== "json") {
+      const repoLink = "https://git.io/streak-stats";
+      const md = `[![GitHub Streak](${imageURL})](${repoLink})`;
+      document.querySelector(".output img").src = demoImageURL;
+      document.querySelector(".md code").innerText = md;
+      document.querySelector(".output img").style.display = "block";
+      document.querySelector(".output .json").style.display = "none";
+    } else {
+      document.querySelector(".output img").style.display = "none";
+      document.querySelector(".output .json").style.display = "block";
+      fetch(demoImageURL)
+        .then((response) => response.json())
+        .then((data) => (document.querySelector(".output .json pre").innerText = JSON.stringify(data, null, 2)))
+        .catch(console.error);
+      document.querySelector(".md code").innerText = imageURL;
+    }
     // disable copy button if username is invalid
     const copyButton = document.querySelector(".copy-button");
     copyButton.disabled = Boolean(document.querySelector("#user:invalid") || !document.querySelector("#user").value);
@@ -87,12 +98,12 @@ const preview = {
       minus.innerText = "−";
       minus.setAttribute("data-property", propertyName);
       // add elements
-      const parent = document.querySelector(".advanced .parameters");
+      const parent = document.querySelector(".advanced .color-properties");
       parent.appendChild(label);
       parent.appendChild(input);
       parent.appendChild(minus);
 
-      //initialise jscolor on element
+      // initialise jscolor on element
       jscolor.install(parent);
 
       // check initial color value
@@ -108,7 +119,7 @@ const preview = {
    * @param {string} property - the name of the property to remove
    */
   removeProperty(property) {
-    const parent = document.querySelector(".advanced .parameters");
+    const parent = document.querySelector(".advanced .color-properties");
     const selectElement = document.querySelector("#properties");
     // remove all elements for given property
     parent.querySelectorAll(`[data-property="${property}"]`).forEach((x) => parent.removeChild(x));
@@ -124,7 +135,7 @@ const preview = {
    * Removes all properties from the advanced section
    */
   removeAllProperties() {
-    const parent = document.querySelector(".advanced .parameters");
+    const parent = document.querySelector(".advanced .color-properties");
     const activeProperties = parent.querySelectorAll("[data-property]");
     // select active and unique property names
     const propertyNames = Array.prototype.map
@@ -199,6 +210,8 @@ const preview = {
   pickerChange(picker, input) {
     // color was changed by picker - check it
     this.checkColor(picker.toHEXAString(), input);
+    // update preview
+    this.update();
   },
 };
 
@@ -242,7 +255,6 @@ window.addEventListener(
     // refresh preview on interactions with the page
     const refresh = () => preview.update();
     document.addEventListener("keyup", refresh, false);
-    document.addEventListener("click", refresh, false);
     [...document.querySelectorAll("select:not(#properties)")].forEach((element) => {
       element.addEventListener("change", refresh, false);
     });