From 114a02fb1ac9ddd764f4850c6bb0f68167e80027 Mon Sep 17 00:00:00 2001 From: James Prior Date: Mon, 18 Sep 2023 12:55:52 +0100 Subject: [PATCH] docs: configure for docs only --- docs/docs/intro.mdx | 4 +++ docs/docs/quick-start.md | 63 +++++++++++++++++++++++++++++++-- docs/docusaurus.config.js | 8 ++--- docs/sidebars.js | 2 +- docs/src/pages/index.js | 41 --------------------- docs/src/pages/index.module.css | 23 ------------ docs/src/pages/markdown-page.md | 7 ---- 7 files changed, 68 insertions(+), 80 deletions(-) delete mode 100644 docs/src/pages/index.js delete mode 100644 docs/src/pages/index.module.css delete mode 100644 docs/src/pages/markdown-page.md diff --git a/docs/docs/intro.mdx b/docs/docs/intro.mdx index db950db..719c769 100644 --- a/docs/docs/intro.mdx +++ b/docs/docs/intro.mdx @@ -1,3 +1,7 @@ +--- +slug: / +--- + import Tabs from "@theme/Tabs"; import TabItem from "@theme/TabItem"; diff --git a/docs/docs/quick-start.md b/docs/docs/quick-start.md index 50b07a6..6616587 100644 --- a/docs/docs/quick-start.md +++ b/docs/docs/quick-start.md @@ -197,16 +197,73 @@ console.log(pointer.to("2/baz/2").resolve(data)); // 6 ## JSON Patch -TODO: +Apply a JSON Patch ([RFC 6902](https://datatracker.ietf.org/doc/html/rfc6902)) to some data with `jsonpatch.apply()`. **Data is modified in place.**. ### JSONPatch constructor -TODO: +```javascript +import { jsonpatch } from "json-p3"; + +const ops = [ + { op: "add", path: "/some/foo", value: { foo: {} } }, + { op: "add", path: "/some/foo", value: { bar: [] } }, + { op: "copy", from: "/some/other", path: "/some/foo/else" }, + { op: "add", path: "/some/foo/bar/-", value: 1 }, +]; + +const data = { some: { other: "thing" } }; +jsonpatch.apply(ops, data); +console.log(data); +// { some: { other: 'thing', foo: { bar: [Array], else: 'thing' } } } +``` + +`apply()` is a convenience function equivalent to `new JSONPatch(ops).apply(data)`. Use the [`JSONPatch`](./api/classes/jsonpatch.JSONPatch.md) constructor when you need to apply the same patch to multiple different data structures. + +```javascript +import { JSONPatch } from "json-p3"; + +const patch = new JSONPatch([ + { op: "add", path: "/some/foo", value: { foo: {} } }, + { op: "add", path: "/some/foo", value: { bar: [] } }, + { op: "copy", from: "/some/other", path: "/some/foo/else" }, + { op: "add", path: "/some/foo/bar/-", value: 1 }, +]); + +const data = { some: { other: "thing" } }; +patch.apply(data); +console.log(data); +// { some: { other: 'thing', foo: { bar: [Array], else: 'thing' } } } +``` + +`apply()` is also re-exported from JSON P3's top-level namespace. ### Builder API -TODO: +`JSONPatch` objects offer a builder interface for constructing JSON patch documents. We use strings as JSON Pointers in this example, but existing `JSONPointer` objects are OK too. + +```javascript +import { JSONPatch } from "json-p3"; + +const data = { some: { other: "thing" } }; + +const patch = new JSONPatch() + .add("/some/foo", { foo: [] }) + .add("/some/foo", { bar: [] }) + .copy("/some/other", "/some/foo/else") + .copy("/some/foo/else", "/some/foo/bar/-"); +patch.apply(data); +console.log(JSON.stringify(data, undefined, " ")); ``` +```json title="output" +{ + "some": { + "other": "thing", + "foo": { + "bar": ["thing"], + "else": "thing" + } + } +} ``` diff --git a/docs/docusaurus.config.js b/docs/docusaurus.config.js index 66de016..d8491a1 100644 --- a/docs/docusaurus.config.js +++ b/docs/docusaurus.config.js @@ -38,13 +38,11 @@ const config = { /** @type {import('@docusaurus/preset-classic').Options} */ ({ docs: { + routeBasePath: "/", sidebarPath: require.resolve("./sidebars.js"), editUrl: "https://github.com/jg-rp/json-p3/tree/docs", }, - blog: { - showReadingTime: true, - editUrl: "https://github.com/jg-rp/json-3/tree/blog", - }, + blog: false, theme: { customCss: require.resolve("./src/css/custom.css"), }, @@ -82,7 +80,7 @@ const config = { label: "Docs", }, { - to: "/docs/api/", + to: "/api/", label: "API", position: "left", }, diff --git a/docs/sidebars.js b/docs/sidebars.js index d4086e1..73e865d 100644 --- a/docs/sidebars.js +++ b/docs/sidebars.js @@ -16,7 +16,7 @@ const sidebars = { docsSidebar: [ { type: "category", - label: "Introduction", + label: "Getting Started", collapsed: false, items: ["intro", "quick-start"], }, diff --git a/docs/src/pages/index.js b/docs/src/pages/index.js deleted file mode 100644 index affcd90..0000000 --- a/docs/src/pages/index.js +++ /dev/null @@ -1,41 +0,0 @@ -import React from 'react'; -import clsx from 'clsx'; -import Link from '@docusaurus/Link'; -import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; -import Layout from '@theme/Layout'; -import HomepageFeatures from '@site/src/components/HomepageFeatures'; - -import styles from './index.module.css'; - -function HomepageHeader() { - const {siteConfig} = useDocusaurusContext(); - return ( -
-
-

{siteConfig.title}

-

{siteConfig.tagline}

-
- - Docusaurus Tutorial - 5min ⏱️ - -
-
-
- ); -} - -export default function Home() { - const {siteConfig} = useDocusaurusContext(); - return ( - - -
- -
- - ); -} diff --git a/docs/src/pages/index.module.css b/docs/src/pages/index.module.css deleted file mode 100644 index 9f71a5d..0000000 --- a/docs/src/pages/index.module.css +++ /dev/null @@ -1,23 +0,0 @@ -/** - * CSS files with the .module.css suffix will be treated as CSS modules - * and scoped locally. - */ - -.heroBanner { - padding: 4rem 0; - text-align: center; - position: relative; - overflow: hidden; -} - -@media screen and (max-width: 996px) { - .heroBanner { - padding: 2rem; - } -} - -.buttons { - display: flex; - align-items: center; - justify-content: center; -} diff --git a/docs/src/pages/markdown-page.md b/docs/src/pages/markdown-page.md deleted file mode 100644 index 9756c5b..0000000 --- a/docs/src/pages/markdown-page.md +++ /dev/null @@ -1,7 +0,0 @@ ---- -title: Markdown page example ---- - -# Markdown page example - -You don't need React to write simple standalone pages.