Merge pull request #389 from benjamine/site

feat: README and html demo updates

Author: benjamine

README.md

@@ -1,4 +1,5 @@
 <p align="center">
+  <img src="demos/html-demo/logo.svg" width="48px" align="center" alt="jsondiffpatch logo" />
   <h1 align="center">jsondiffpatch</h1>
   <p align="center">
     <a href="https://jsondiffpatch.com">jsondiffpatch.com</a>

demos/html-demo/demo.ts

@@ -271,6 +271,9 @@ const instance = jsondiffpatch.create({
     if (typeof objRecord.id !== 'undefined') {
       return objRecord.id;
     }
+    if (typeof objRecord.key !== 'undefined') {
+      return objRecord.key;
+    }
     if (typeof objRecord.name !== 'undefined') {
       return objRecord.name;
     }
@@ -485,11 +488,16 @@ const compare = function () {
     return;
   }
   const selectedType = getSelectedDeltaType();
+  const resultsSections = document.getElementById('results')!;
   const visualdiff = document.getElementById('visualdiff')!;
   const annotateddiff = document.getElementById('annotateddiff')!;
   const jsondifflength = document.getElementById('jsondifflength')!;
   try {
     const delta = instance.diff(left, right);
+    resultsSections.setAttribute(
+      'data-diff',
+      typeof delta === 'undefined' ? 'no-diff' : 'has-diff',
+    );
 
     if (typeof delta === 'undefined') {
       switch (selectedType) {
@@ -536,6 +544,7 @@ const compare = function () {
       console.error(err);
       console.error((err as Error).stack);
     }
+    resultsSections.removeAttribute('data-diff');
   }
   document.getElementById('results')!.style.display = '';
 };
@@ -637,7 +646,7 @@ interface Data {
 
 interface Load {
   data: (dataArg?: Data) => void;
-  gist: (this: Load, id: string) => void;
+  gist: (this: Load, id: string, onSuccess?: (gist: GistData) => void) => void;
   leftright: (
     this: Load,
     descriptionArg: string | undefined,
@@ -696,7 +705,7 @@ const load: Load = {
     }
   },
 
-  gist: function (id) {
+  gist: function (id, onSuccess) {
     dom.getJson('https://api.github.com/gists/' + id, function (error, data) {
       interface GistError {
         message?: string;
@@ -712,29 +721,30 @@ const load: Load = {
         return;
       }
 
-      interface GistData {
-        files: Record<
-          string,
-          { language: string; filename: string; content: string }
-        >;
-        html_url: string;
-        description: string;
-      }
-
       const gistData = data as GistData;
 
-      const filenames = [];
+      const files: GistData['files'][string][] = [];
+
       for (const filename in gistData.files) {
         const file = gistData.files[filename];
-        if (file.language === 'JSON') {
-          filenames.push(filename);
+        if (/^json[5c]?$/i.test(file.language)) {
+          files.push(file);
         }
       }
-      filenames.sort();
-      const files = [
-        gistData.files[filenames[0]],
-        gistData.files[filenames[1]],
-      ];
+
+      if (files.length < 1) {
+        load.data({
+          error: 'no JSON files found in this gist',
+        });
+        return;
+      }
+      if (files.length < 2) {
+        files.push({
+          language: 'JSON',
+          filename: 'missing.json',
+          content: '"only 1 JSON files found in the gist, need 2 to compare"',
+        });
+      }
       /* jshint camelcase: false */
       load.data({
         url: gistData.html_url,
@@ -748,6 +758,8 @@ const load: Load = {
           content: files[1].content,
         },
       });
+
+      onSuccess?.(gistData);
     });
   },
 
@@ -908,3 +920,34 @@ if (urlQuery) {
     }
   },
 );
+
+interface GistData {
+  id: string;
+  files: Record<
+    string,
+    { language: string; filename: string; content: string }
+  >;
+  html_url: string;
+  description: string;
+  owner: { login: string };
+}
+
+document.querySelector('#gist-link')?.addEventListener('input', (e) => {
+  const match =
+    /^(?:https?:\/\/)?gist\.github\.com\/([^/]+)\/([0-9a-f]+)/i.exec(
+      (e.target as HTMLInputElement).value,
+    );
+  if (!match) return;
+  load.gist(match[2], (gist) => {
+    window.history.pushState({}, '', `?${gist.owner.login}/${gist.id}`);
+    document.querySelector('h1')?.scrollIntoView({
+      behavior: 'smooth',
+      block: 'start',
+    });
+    const input = document.querySelector('#gist-link') as HTMLInputElement;
+    if (input) {
+      input.value = '';
+      input.blur();
+    }
+  });
+});

demos/html-demo/favicon.ico

@@ -4,14 +4,43 @@
     <title>JsonDiffPatch</title>
     <meta
       name="description"
-      content="JsonDiffPatch is javascript/typescript library to deep diff json or text"
+      content="JsonDiffPatch is a free online json diff tool and npm library to compare json and get a json diff"
     />
-    <meta content="width=device-width, initial-scale=1" name="viewport" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="canonical" href="https://jsondiffpatch.com/" />
+    <link rel="icon" href="logo.svg" type="image/svg+xml" />
+
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:creator" content="@beneidel" />
+    <meta name="twitter:title" content="JsonDiffPatch" />
+    <meta
+      name="twitter:description"
+      content="JsonDiffPatch is a free online json diff tool and npm library to compare json and get a json diff."
+    />
+    <meta
+      name="twitter:image"
+      content="https://jsondiffpatch.com/jsondiffpatch-visual-diff.png"
+    />
+    <meta property="og:type" content="website" />
+    <meta property="og:title" content="JsonDiffPatch" />
+    <meta
+      property="og:description"
+      content="JsonDiffPatch is a free online json diff tool and npm library to compare json and get a json diff."
+    />
+    <meta property="og:locale" content="en_US" />
+    <meta property="og:url" content="http://jsondiffpatch/" />
+    <meta
+      property="og:image"
+      content="https://jsondiffpatch.com/jsondiffpatch-visual-diff.png"
+    />
+    <meta property="og:image:type" content="image/png" />
+    <meta property="og:image:width" content="774" />
+    <meta property="og:image:height" content="774" />
+
     <meta name="color-scheme" content="dark light" />
-    <meta content="text/html;charset=utf-8" http-equiv="Content-Type" />
-    <meta content="utf-8" http-equiv="encoding" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <link rel="canonical" href="https://jsondiffpatch.com/" />
+    <meta content="utf-8" http-equiv="encoding" />
+    <meta content="text/html;charset=utf-8" http-equiv="Content-Type" />
     <link rel="stylesheet" href="style.css" type="text/css" media="screen" />
     <link
       rel="stylesheet"
@@ -130,13 +159,14 @@
     </style>
     <header>
       <div>
-        <h1>
+        <h1>JsonDiffPatch</h1>
+        <div aria-hidden="true" id="diffed-h1">
           Js<span class="jsondiffpatch-textdiff-deleted"><span>on</span></span
           ><span class="jsondiffpatch-textdiff-added"><span>Diff</span></span
           >Patch
-        </h1>
+        </div>
         <span id="description"></span>
-        <a id="external-link" style="display: none">source</a>
+        <a id="external-link" style="display: none" target="_blank">source</a>
       </div>
       <nav>
         <button id="color-scheme-toggle" title="Toggle theme">
@@ -243,7 +273,7 @@ <h2>JSON Right</h2>
         <span class="error-message"></span>
       </div>
     </div>
-    <div id="results">
+    <section id="results">
       <h2>Delta</h2>
       <label>
         <input
@@ -281,13 +311,79 @@ <h2>Delta</h2>
         <textarea id="json-delta" readonly> </textarea>
         <span class="error-message"></span>
       </div>
-    </div>
+    </section>
+    <section id="features">
+      <h2>Features</h2>
+      <ul>
+        <li>
+          compare 2 json. also supports json5, json with comments, or plain text
+        </li>
+        <li>
+          json diff as visual diff or json (see
+          <a
+            href="https://github.com/benjamine/jsondiffpatch/blob/master/docs/deltas.md"
+            rel="nofollow"
+            target="_blank"
+            >delta format</a
+          >)
+        </li>
+        <li>
+          compare json from a gist (<a href="/?benjamine/9188826">example</a
+          >)<br />
+          <ol>
+            <li>
+              <a href="https://gist.github.com/" rel="nofollow"
+                >create a gist</a
+              >
+            </li>
+            <li>add 2 json files on the gist</li>
+            <li>
+              paste the gist url here: <input id="gist-link" type="text" />
+            </li>
+          </ol>
+        </li>
+        <li>
+          smart diff arrays/lists. if items are objects a "key", "id", or "name"
+          is automatically used to match
+        </li>
+        <li>
+          text diff. for long string or text, a text diff is done at characther
+          level (using
+          <a href="https://github.com/google/diff-match-patch" target="_blank"
+            >google/diff-match-patch</a
+          >)
+        </li>
+      </ul>
+    </section>
     <footer>
-      <a href="https://github.com/benjamine/jsondiffpatch">Get JsonDiffPatch</a>
-      <br />
-      <p class="credits">
-        JsonDiffPatch was developed by
-        <a href="https://twitter.com/beneidel">Benjamin Eidelman</a>
+      <p>
+        powered by the
+        <a
+          class="library-link"
+          href="https://github.com/benjamine/jsondiffpatch"
+          >jsondiffpatch</a
+        >
+        library
+      </p>
+      <p align="center">
+        <a href="https://twitter.com/beneidel" rel="nofollow"
+          ><img
+            src="https://img.shields.io/badge/created%[email protected]"
+            alt="Created by Benjamin Eidelman"
+        /></a>
+        <a href="https://opensource.org/licenses/MIT" rel="nofollow"
+          ><img
+            src="https://img.shields.io/github/license/benjamine/jsondiffpatch"
+            alt="License"
+        /></a>
+        <a href="https://www.npmjs.com/package/jsondiffpatch" rel="nofollow"
+          ><img src="https://img.shields.io/npm/dw/jsondiffpatch.svg" alt="npm"
+        /></a>
+        <a href="https://github.com/benjamine/jsondiffpatch" rel="nofollow"
+          ><img
+            src="https://img.shields.io/github/stars/benjamine/jsondiffpatch"
+            alt="stars"
+        /></a>
       </p>
     </footer>
     <script src="build/demo.js" type="module"></script>

demos/html-demo/index.html

@@ -0,0 +1,32 @@
+# https://jsondiffpatch.com llms.txt
+
+jsondiffpatch is an npm package.
+it compares 2 json (or any 2 objects in javascript or typescript), and get a json diff with the changes.
+
+``` ts
+import { diff } from "jsondiffpatch";
+
+const delta = diff(left, right);
+```
+
+## features
+
+- deep diff json or objects, get a compact json diff delta
+- use delta to patch
+- smart array diffing using [LCS](http://en.wikipedia.org/wiki/Longest_common_subsequence_problem), **_IMPORTANT NOTE:_** to match objects inside an array you must provide an `objectHash` function (this is how objects are matched, otherwise a dumb match by position is used). For more details, check [Array diff documentation](docs/arrays.md)
+- multiple formatters (visual html, jsonpatch, console)
+- (optionally) uses [google-diff-match-patch](http://code.google.com/p/google-diff-match-patch/) for long text diffs (diff at character level)
+- reverse a delta, unpatch (eg. revert object to its original state using a delta)
+- simplistic, pure JSON, low footprint [delta format](docs/deltas.md)
+- multiple output formatters:
+  - html (check it at the [Live Demo](https://jsondiffpatch.com))
+  - annotated json (html), makes the JSON delta format self-explained
+  - console (colored), try running `./node_modules/.bin/jsondiffpatch left.json right.json`
+  - JSON Patch format RFC 6902 support
+  - write your own! check [Formatters documentation](docs/formatters.md)
+- BONUS: `jsondiffpatch.clone(obj)` (deep clone)
+
+## links
+
+- [github repo](https://github.com/benjamine/jsondiffpatch)
+- [npm package](https://www.npmjs.com/package/jsondiffpatch)

demos/html-demo/jsondiffpatch-visual-diff.png

@@ -0,0 +1,3 @@
+User-agent: *
+Allow: /
+Sitemap: https://jsondiffpatch.com/sitemap.xml

demos/html-demo/llms.txt

@@ -0,0 +1,7 @@
+<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
+    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+    xsi:schemaLocation="http://www.sitemaps.org/schemas/sitemap/0.9 http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd">
+    <url>
+        <loc>https://jsondiffpatch.com/</loc>
+    </url>
+</urlset>