Merge pull request #126 from curveball/json-viewer

New JSON viewer

Author: evert

.github/workflows/test.yml

@@ -10,7 +10,8 @@ on:
     branches: [ main ]
 
 jobs:
-  build:
+  test:
+    name: Run tests
 
     runs-on: ubuntu-latest
 
@@ -28,3 +29,17 @@ jobs:
     - run: npm ci
     - run: npm run build --if-present
     - run: npm test
+
+  lint:
+    name: Lint
+
+    runs-on: ubuntu-latest
+
+    steps:
+    - uses: actions/checkout@v2
+    - name: Use Node.js
+      uses: actions/setup-node@v1
+      with:
+        node-version: 16.x
+    - run: npm ci
+    - run: npm run lint

assets/themes/curveball/main.css

@@ -7,7 +7,7 @@ body, td, input, th {
   color: #444;
 }
 
-pre {
+.hljs, code  {
   font-family: 'JetBrains Mono', 'Fira Code', 'Inconsolata', 'Ubuntu Mono', monospace;
 }
 
@@ -319,3 +319,41 @@ button {
   line-height: 2;
   border-radius: .25ex;
 }
+
+.hljs ul {
+  list-style: none;
+  padding-left: 10px;
+  margin: 0;
+}
+.hljs ul li {
+  padding-left: 10px;
+  margin: 0;
+  line-height: normal;
+}
+.hljs a {
+  color: inherit;
+}
+
+.hljs details {
+  border: 0;
+  margin: 0;
+  padding: 0;
+}
+.hljs summary {
+  margin: 0;
+  padding: 0;
+}
+
+.hljs details[open] .hidden-when-open {
+  display: none;
+}
+
+.hljs summary .teaser {
+  border: 1px dotted #ccc;
+}
+
+.hidden-copy-paste {
+  font-size: 0;
+}
+
+

package-lock.json

@@ -5,7 +5,8 @@
   "main": "dist/index.js",
   "scripts": {
     "prepublishOnly": "make build",
-    "test": "make lint test",
+    "test": "make test",
+    "lint": "make lint",
     "tsc": "tsc"
   },
   "repository": {
@@ -41,6 +42,7 @@
     "@types/markdown-it": "^12.0.1",
     "@types/mocha": "^9.0.0",
     "@types/node": "^12.20.4",
+    "@types/node-fetch": "^2.6.1",
     "@types/react": "^17.0.3",
     "@types/react-dom": "^17.0.1",
     "@typescript-eslint/eslint-plugin": "^5.9.1",
@@ -65,6 +67,7 @@
     "highlight.js": "^11.2.0",
     "ketting": "^7.3.0",
     "markdown-it": "^12.3.2",
+    "node-fetch": "^2.6.7",
     "react": "^17.0.1",
     "react-dom": "^17.0.1"
   },

package.json

@@ -9,7 +9,12 @@ export function Embedded(props: PageProps) {
 
   return <>
     <h2>Embedded</h2>
-    { embeds.map( embeddedState => <Embed resourceState={embeddedState} options={props.options} csrfToken={props.csrfToken} />) }
+    { embeds.map( embeddedState => <Embed
+      resourceState={embeddedState}
+      options={props.options}
+      csrfToken={props.csrfToken}
+      originalBody={embeddedState.serializeBody() as string}
+    />) }
   </>;
 
 }

src/components/embedded.tsx

@@ -1,26 +1,15 @@
 import * as React from 'react';
 import { PageProps } from '../types';
-import { highlightJson } from '../util';
 
-export function HalBody(props: PageProps) {
-
-  let tmpBody = Object.assign({}, props.resourceState.data);
+import JsonViewer from './json-viewer';
 
-  if (props.options.fullBody) {
-    tmpBody = JSON.parse(props.resourceState.serializeBody() as string);
-  }
-
-  if (Object.keys(tmpBody).length === 0) {
-    return <></>;
-  }
+export function HalBody(props: PageProps) {
 
-  const html = {
-    __html: highlightJson(tmpBody)
-  };
+  const body = props.originalBody;
 
   return <>
     <h2>Contents</h2>
-    <code className="hljs"><pre dangerouslySetInnerHTML={html}></pre></code>
+    <code className="hljs"><JsonViewer data={body} /></code>
   </>;
 
 }