diff --git a/docs/docusaurus.config.js b/docs/docusaurus.config.js
index 02b78a4..2e2fdc5 100644
--- a/docs/docusaurus.config.js
+++ b/docs/docusaurus.config.js
@@ -70,8 +70,8 @@ const config = {
title: "JSON P3",
logo: {
alt: "JSON P3",
- src: "img/p3_path_plain.svg",
- srcDark: "img/p3_dark_path_plain.svg",
+ src: "img/p3_v2_dark.svg",
+ srcDark: "img/p3_v2_light.svg",
},
items: [
{
diff --git a/docs/src/components/JSONPathPlayground/index.js b/docs/src/components/JSONPathPlayground/index.js
new file mode 100644
index 0000000..7fab4eb
--- /dev/null
+++ b/docs/src/components/JSONPathPlayground/index.js
@@ -0,0 +1,172 @@
+import React from "react";
+import { useState } from "react";
+
+import { Container } from "@mui/material";
+import Paper from "@mui/material/Paper";
+import Grid from "@mui/material/Unstable_Grid2";
+import Editor from "@monaco-editor/react";
+import styles from "./styles.module.css";
+
+import { jsonpath, version as p3version } from "json-p3/dist/json-p3.esm";
+
+const commonEditorOptions = {
+ codeLens: false,
+ minimap: { enabled: false },
+ tabSize: 2,
+ renderLineHighlight: "none",
+ scrollBeyondLastLine: false,
+ scrollbar: { alwaysConsumeMouseWheel: false },
+ padding: { bottom: 10, top: 10 },
+};
+
+const theme = "vs-dark";
+
+// function handleEditorDidMount(editor, monaco) {
+// import("monaco-themes/themes/Tomorrow-Night-Eighties.json")
+// .then((themeData) => {
+// monaco.editor.defineTheme("Tomorrow-Night-Eighties", themeData);
+// })
+// .then((_) => monaco.editor.setTheme("Tomorrow-Night-Eighties"));
+// }
+
+function QueryEditor({ defaultQuery, onChange }) {
+ return (
+
+ );
+}
+
+function JSONEditor({ onChange }) {
+ const defaultValue = JSON.stringify(
+ {
+ users: [
+ { name: "Sue", score: 100 },
+ { name: "John", score: 86, admin: true },
+ { name: "Sally", score: 84, admin: false },
+ { name: "Jane", score: 55 },
+ ],
+ moderator: "John",
+ },
+ undefined,
+ " ",
+ );
+
+ return (
+
+ );
+}
+
+function ResultsEditor({ result }) {
+ return (
+
+ );
+}
+
+export default function Playground() {
+ let timer;
+ const timerInterval = 1000;
+ const defaultQuery = "$.users[?@.score > 85]";
+ const defaultResult = JSON.stringify(
+ [
+ { name: "Sue", score: 100 },
+ { name: "John", score: 86, admin: true },
+ ],
+ undefined,
+ " ",
+ );
+ const defaultData = {
+ users: [
+ { name: "Sue", score: 100 },
+ { name: "John", score: 86, admin: true },
+ { name: "Sally", score: 84, admin: false },
+ { name: "Jane", score: 55 },
+ ],
+ moderator: "John",
+ };
+
+ const [query, setQuery] = useState(jsonpath.compile(defaultQuery));
+ const [result, setResult] = useState(defaultResult);
+ const [data, setData] = useState(defaultData);
+
+ function _onQueryChange(value) {
+ try {
+ const path = jsonpath.compile(value.trim());
+ setQuery(path);
+ const rv = path.query(data).values();
+ setResult(JSON.stringify(rv, undefined, " "));
+ } catch (error) {
+ setResult(JSON.stringify(String(error), undefined, " "));
+ }
+ }
+
+ function onQueryChange(value) {
+ clearTimeout(timer);
+ timer = setTimeout(() => _onQueryChange(value), timerInterval);
+ }
+
+ function _onDataChange(value) {
+ try {
+ const _data = JSON.parse(value);
+ setData(_data);
+ const rv = query.query(_data).values();
+ setResult(JSON.stringify(rv, undefined, " "));
+ } catch (error) {
+ setResult(JSON.stringify(String(error), undefined, " "));
+ }
+ }
+
+ function onDataChange(value) {
+ clearTimeout(timer);
+ timer = setTimeout(() => _onDataChange(value), timerInterval);
+ }
+
+ return (
+
+
+
+
+ JSONPath Query
+ P3 Version {p3version}
+
+
+
+
+
+
+ JSON Data
+
+
+
+
+
+ Query Results
+
+
+
+
+
+
+ );
+}
diff --git a/docs/src/components/JSONPathPlayground/styles.module.css b/docs/src/components/JSONPathPlayground/styles.module.css
new file mode 100644
index 0000000..d1f68b9
--- /dev/null
+++ b/docs/src/components/JSONPathPlayground/styles.module.css
@@ -0,0 +1,13 @@
+.heading {
+ font-size: 18px;
+ /* font-family: "monospace"; */
+ font-weight: lighter;
+ margin-bottom: 5px;
+ margin-left: 5px;
+}
+
+.version {
+ font-size: 12px;
+ float: right;
+
+}
diff --git a/docs/src/pages/playground.js b/docs/src/pages/playground.js
index c1086b4..1e3797e 100644
--- a/docs/src/pages/playground.js
+++ b/docs/src/pages/playground.js
@@ -1,176 +1,11 @@
import React from "react";
-import { useState } from "react";
import Layout from "@theme/Layout";
+import Playground from "../components/JSONPathPlayground";
-import { Container } from "@mui/material";
-import Paper from "@mui/material/Paper";
-import Grid from "@mui/material/Unstable_Grid2";
-
-import Editor from "@monaco-editor/react";
-
-import { jsonpath, version as p3version } from "json-p3/dist/json-p3.esm";
-
-const commonEditorOptions = {
- codeLens: false,
- minimap: { enabled: false },
- tabSize: 2,
- renderLineHighlight: "none",
- scrollBeyondLastLine: false,
- scrollbar: { alwaysConsumeMouseWheel: false },
- padding: { bottom: 10, top: 10 },
-};
-
-const theme = "vs-dark";
-
-// function handleEditorDidMount(editor, monaco) {
-// import("monaco-themes/themes/Tomorrow-Night-Eighties.json")
-// .then((themeData) => {
-// monaco.editor.defineTheme("Tomorrow-Night-Eighties", themeData);
-// })
-// .then((_) => monaco.editor.setTheme("Tomorrow-Night-Eighties"));
-// }
-
-function QueryEditor({ defaultQuery, onChange }) {
- return (
-
- );
-}
-
-function JSONEditor({ onChange }) {
- const defaultValue = JSON.stringify(
- {
- users: [
- { name: "Sue", score: 100 },
- { name: "John", score: 86, admin: true },
- { name: "Sally", score: 84, admin: false },
- { name: "Jane", score: 55 },
- ],
- moderator: "John",
- },
- undefined,
- " ",
- );
-
- return (
-
- );
-}
-
-function ResultsEditor({ result }) {
- return (
-
- );
-}
-
-export default function Playground() {
- let timer;
- const timerInterval = 1000;
- const defaultQuery = "$.users[?@.score > 85]";
- const defaultResult = JSON.stringify(
- [
- { name: "Sue", score: 100 },
- { name: "John", score: 86, admin: true },
- ],
- undefined,
- " ",
- );
- const defaultData = {
- users: [
- { name: "Sue", score: 100 },
- { name: "John", score: 86, admin: true },
- { name: "Sally", score: 84, admin: false },
- { name: "Jane", score: 55 },
- ],
- moderator: "John",
- };
-
- const [query, setQuery] = useState(jsonpath.compile(defaultQuery));
- const [result, setResult] = useState(defaultResult);
- const [data, setData] = useState(defaultData);
-
- function _onQueryChange(value) {
- try {
- const path = jsonpath.compile(value.trim());
- setQuery(path);
- const rv = path.query(data).values();
- setResult(JSON.stringify(rv, undefined, " "));
- } catch (error) {
- setResult(JSON.stringify(String(error), undefined, " "));
- }
- }
-
- function onQueryChange(value) {
- clearTimeout(timer);
- timer = setTimeout(() => _onQueryChange(value), timerInterval);
- }
-
- function _onDataChange(value) {
- try {
- const _data = JSON.parse(value);
- setData(_data);
- const rv = query.query(_data).values();
- setResult(JSON.stringify(rv, undefined, " "));
- } catch (error) {
- setResult(JSON.stringify(String(error), undefined, " "));
- }
- }
-
- function onDataChange(value) {
- clearTimeout(timer);
- timer = setTimeout(() => _onDataChange(value), timerInterval);
- }
-
+export default function PlaygroundPage() {
return (
-
-
-
- JSONPath Query
-
-
-
-
-
- JSON Data
-
-
-
-
-
- Query Results
-
-
-
-
-
- Version {p3version}
-
+
);
}
diff --git a/docs/static/img/favicon.ico b/docs/static/img/favicon.ico
index 191b21a..96431bc 100644
Binary files a/docs/static/img/favicon.ico and b/docs/static/img/favicon.ico differ
diff --git a/docs/static/img/p3_dark_path_plain.svg b/docs/static/img/p3_dark_path_plain.svg
deleted file mode 100644
index d80d802..0000000
--- a/docs/static/img/p3_dark_path_plain.svg
+++ /dev/null
@@ -1,82 +0,0 @@
-
-
-
-
diff --git a/docs/static/img/p3_path_plain.svg b/docs/static/img/p3_path_plain.svg
deleted file mode 100644
index 6137f2f..0000000
--- a/docs/static/img/p3_path_plain.svg
+++ /dev/null
@@ -1,71 +0,0 @@
-
-
-
-
diff --git a/docs/static/img/p3_v2_dark.svg b/docs/static/img/p3_v2_dark.svg
new file mode 100644
index 0000000..5fe286c
--- /dev/null
+++ b/docs/static/img/p3_v2_dark.svg
@@ -0,0 +1,39 @@
+
+
+
+
diff --git a/docs/static/img/p3_v2_light.svg b/docs/static/img/p3_v2_light.svg
new file mode 100644
index 0000000..79a35f9
--- /dev/null
+++ b/docs/static/img/p3_v2_light.svg
@@ -0,0 +1,39 @@
+
+
+
+