diff --git a/README.md b/README.md index 602d33b..d37c9d7 100644 --- a/README.md +++ b/README.md @@ -18,6 +18,36 @@ JSON Hero makes reading and understand JSON files easy by giving you a clean and ## Features +### Send to JSON Hero + +Send your JSON to JSON Hero in a variety of ways + +- Head to [jsonhero.io](https://jsonhero.io) and Drag and Drop a JSON file, or paste JSON or a JSON url in the provided form +- Include a Base64 encoded string of a JSON payload: [jsonhero.io/new?j=eyAiZm9vIjogImJhciIgfQ==](https://jsonhero.io/new?j=eyAiZm9vIjogImJhciIgfQ==) +- Include a JSON URL to the `new` endpoint: [jsonhero.io/new?url=https://jsonplaceholder.typicode.com/todos/1](https://jsonhero.io/new?url=https://jsonplaceholder.typicode.com/todos/1) +- Install the [VS Code extension](https://marketplace.visualstudio.com/items?itemName=JSONHero.jsonhero-vscode) and open JSON from VS Code +- Raycast user? Check out our extension [here](https://www.raycast.com/maverickdotdev/open-in-json-hero) +- Use the unofficial API: + + - Make a `POST` request to `jsonhero.io/api/create.json` with the following JSON body: + + ```json + { + "title": "test 123", + "content": { "foo": "bar" } + } + ``` + + The JSON response will be the following: + + ```json + { + "id": "YKKduNySH7Ub", + "title": "test 123", + "location": "https://jsonhero.io/j/YKKduNySH7Ub" + } + ``` + ### Column view Inspired by macOS Finder, Column View is a new way to browse a JSON document. @@ -86,14 +116,6 @@ Easily see all the related values across your entire JSON document for a specifi -### Keyboard Shortcuts - - - -### Sharing - - - ## Bugs and Feature Requests Have a bug or a feature request? Feel free to [open a new issue](https://github.com/jsonhero-io/jsonhero-web/issues). diff --git a/app/routes/new.tsx b/app/routes/new.tsx index dd87275..07bb924 100644 --- a/app/routes/new.tsx +++ b/app/routes/new.tsx @@ -1,31 +1,49 @@ import { LoaderFunction, redirect } from "remix"; import invariant from "tiny-invariant"; import { sendEvent } from "~/graphJSON.server"; -import { createFromUrl } from "~/jsonDoc.server"; +import { createFromRawJson, createFromUrl } from "~/jsonDoc.server"; export let loader: LoaderFunction = async ({ request, context }) => { const url = new URL(request.url); const jsonUrl = url.searchParams.get("url"); + const base64EncodedJson = url.searchParams.get("j"); - if (!jsonUrl) { + if (!jsonUrl && !base64EncodedJson) { return redirect("/"); } - const jsonURL = new URL(jsonUrl); + if (jsonUrl) { + const jsonURL = new URL(jsonUrl); - invariant(jsonURL, "url must be a valid URL"); + invariant(jsonURL, "url must be a valid URL"); - const doc = await createFromUrl(jsonURL, jsonURL.href); + const doc = await createFromUrl(jsonURL, jsonURL.href); - context.waitUntil( - sendEvent({ - type: "create", - from: "url", - hostname: jsonURL.hostname, - id: doc.id, - source: url.searchParams.get("utm_source") ?? url.hostname, - }) - ); + context.waitUntil( + sendEvent({ + type: "create", + from: "url", + hostname: jsonURL.hostname, + id: doc.id, + source: url.searchParams.get("utm_source") ?? url.hostname, + }) + ); - return redirect(`/j/${doc.id}`); + return redirect(`/j/${doc.id}`); + } + + if (base64EncodedJson) { + const doc = await createFromRawJson("Untitled", atob(base64EncodedJson)); + + context.waitUntil( + sendEvent({ + type: "create", + from: "base64", + id: doc.id, + source: url.searchParams.get("utm_source"), + }) + ); + + return redirect(`/j/${doc.id}`); + } };