Allow creating from a base64 encoded string in a query param

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
 
 <!-- TODO -->
 
-### Keyboard Shortcuts
-
-<!-- TODO -->
-
-### Sharing
-
-<!-- TODO -->
-
 ## 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).

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}`);
+  }
 };