Say I already open the json I need to view, and I got the path I want to jump to from another colleague, and I want to jump to this path without reload my page.

It's more effective than using the search bar to search and navigate.

What does this pull request do?

This pull request adds a panel that shows you every shortcut that the app uses. It is available after you either:

• Open a JSON file
• Open a URL that leads to a JSON file
• Paste in some JSON on the home page

It can be opened using:

• The shortcut Alt/Option + S which can be seen in the button on the left-hand side of the footer
• Clicking on the above-mentioned button

When opened, it shows you a list of the app's shortcuts, all in their own categories, with icons for each of the shortcuts on the left. All shortcuts that use an OS-dependent modifier key (eg. Cmd (Mac) / Ctrl (Windows/Linux)) will only show the shortcut using the key that the user's OS would use.

The panel is also dark mode styled and will change when the user toggles dark mode.

The panel can be closed by:

• Using the shortcut used to open the panel (Alt/Option + S)
• Clicking anywhere outside of the panel
• Clicking the "x" in the top right-hand corner of the panel

There is a demo Loom video below where you can see all the functionalities that I described above in practice

https://www.loom.com/share/bd12894537f342a7bac126bf3518bb7e

The current shortcut key is cmd+k however this collides with google's search shortcut key resulting in a poor user experience.

My solution is to change the combination to shift+s which is more accessible and does not collide with any other shortcut.

Why docker?

Make it easier to deploy and debug. Since everyone can pull the same image from Docker Hub and the npm dependencies would be handled well in the building stage of docker image. Also this makes it easier to deploy for the machines that have docker but no node.js environment.

Discussion

What is the purpose of setting SESSION_SECRET=abc123, should this be different for every deployment? If so, maybe we should set this SESSION_SECRET through a environment variable in docker?

TODO before merge

• [ ] Create Docker Hub account for this organization
• [ ] Fill in the GitHub action secretes
• [ ] Create the Docker Hub repo named jsonhero-web or anything you like
• [ ] Update the repo names in README.md https://github.com/henryclw/jsonhero-web/blob/1ec0a38a4f2aa22d659258c383119aa035ffb15c/README.md?plain=1#L144

TODO after merge

• [ ] Check the actions, are they working as expected
• [ ] Check your Docker Hub account, are the newly pushed images as expected
• [ ] Pull one of the image and try to run it locally

Any suggestions are welcomed!

When I open jsonhero with the following json

{"url":"http://www.google.com/calendar/event?action=TEMPLATE&dates=20220707T103000Z%2F20220707T120000Z&text=bug&location=Nh%C3%A0%20h%C3%A0ng%20Tr%E1%BA%A7u%20Cau%202%2C%20%C4%90%C6%B0%E1%BB%9Dng%20L%C3%AA%20L%E1%BB%A3i%2C%20H%E1%BA%A3i%20C%E1%BA%A3ng%2C%20Th%C3%A0nh%20ph%E1%BB%91%20Qui%20Nh%C6%A1n%2C%20B%C3%ACnh%20%C4%90%E1%BB%8Bnh%2C%20Vi%E1%BB%87t%20Nam"}

I got this error

Hi! I just created this PR adding a new shortcut for copying the selected node. I leave some images here... tried to follow svg structure you have in the project 😃

Few days using JSON Hero t handle big json files and feels quite comfortable... awesome app Let me know how it looks, in case you want me to add/edit something let me know! Thanks

Runtime is docker image: node:16.17.0 When run npm install and npm start，it occurs error:

> start
> concurrently "npm run dev" "npm run start:worker"

[0]
[0] > dev
[0] > concurrently "npm run dev:css" "npm run dev:search" "remix watch"
[0]
[1]
[1] > start:worker
[1] > miniflare --env .env --build-command "npm run dev:worker" --watch
[1]
[0] [2] Watching Remix app in development mode...
[0] [1]
[0] [1] > dev:search
[0] [1] > esbuild ./app/entry.worker.ts --outfile=./public/entry.worker.js --bundle --format=esm --define:process.env.NODE_ENV='"development"' --watch
[0] [1]
[0] [0]
[0] [0] > dev:css
[0] [0] > tailwindcss -i ./styles/tailwind.css -o ./app/tailwind.css --watch
[0] [0]
[1]
[1] > dev:worker
[1] > esbuild --define:process.env.NODE_ENV='"development"' --bundle --sourcemap --outdir=dist ./worker
[1]
[1] ✘ [ERROR] Could not resolve "../build"
[1]
[1]     worker/index.js:3:23:
[1]       3 │ import * as build from "../build";
[1]         ╵                        ~~~~~~~~~~
[1]
[0] [1] [watch] build finished, watching for changes...
[1] 1 error
[1] [mf:err] BuildError [1]: Build failed with exit code 1
[1]     at ChildProcess.<anonymous> (/src/node_modules/@miniflare/core/src/plugins/build.ts:77:25)
[1]     at ChildProcess.emit (node:events:513:28)
[1]     at Process.ChildProcess._handle.onexit (node:internal/child_process:291:12)
[1] npm run start:worker exited with code 1
[0] [0] Browserslist: caniuse-lite is outdated. Please run:
[0] [0]   npx browserslist@latest --update-db
[0] [0]   Why you should do it regularly: https://github.com/browserslist/browserslist#browsers-data-updating
[0] [0]
[0] [0] warn - The `@variants` directive has been deprecated in Tailwind CSS v3.0.
[0] [0] warn - Use `@layer utilities` or `@layer components` instead.
[0] [0] warn - https://tailwindcss.com/docs/upgrade-guide#replace-variants-with-layer
[0] [0]
[0] [0] Rebuilding...
[0] [0] Done in 1887ms.
[0] [2]
[0] [2] ✘ [ERROR] Could not resolve "./tailwind.css"
[0] [2]
[0] [2]     app/root.tsx:43:19:
[0] [2]       43 │ import styles from "./tailwind.css";
[0] [2]          ╵                    ~~~~~~~~~~~~~~~~
[0] [2]
[0] [2]
[0] [2] Build failed with 1 error:
[0] [2] app/root.tsx:43:19: ERROR: Could not resolve "./tailwind.css"
[0] [2] 💿 Built in 3.6s

A date can be encoded as an int, as the number of second from epoch.

{
  "d1": "2022-09-10 10:19:05+02:00",
  "d2": 1662798100
}

Like rfc-3339 string are displayed in a calendar, it would be nice to have the same preview for timestamp.

Cheers

Fix #62 where there are no error message shown to the user when a malformed JSON is submitted. Instead, it shows nothing if passed as a string/URL, or the app crashes completely if an invalid file is uploaded.

What does this PR do?

1. Added a generic Alert component based on https://v1.tailwindcss.com/components/alerts.
2. Added a utility function to generate random UUID -> used for key generation on other components.
3. createCookieSessionStorage to store cookies with Remix. Needed for the session flash.
4. Implements additional validation features on the /actions/createFrom__ routes.
   1. Validates the content of upload files, redirect to index with an flag if invalid. Before, the app just crashes.
   2. Session flash: Return data to the fallback route during failure (landing page in this case).
5. Add a Remix loader in the homepage to receive the data sent by the action routes.
6. Add an alert box in the NewFile.tsx to show a message if the JSON submitted to the action routes is malformed.
   1. Styling fix: Replaced explicit margin mb-4 by setting the container to a flexbox with gap attribute specified.

This is obviously a pretty big change and I would love to hear any suggestions to make this PR better.

Possible alternative solution

A much more simpler route than leveraging session flash is just by attaching a URL parameter on the redirect("/") call on the action routes. It would remove the need for the additional remix and cookie what-not. But since the project already depends on Remix, I see no reason why we shouldn't take full advantage of it.

I am uncertain if using URL parameters for this would be the best approach or whether it is reliable. I am yet to encounter a project that prefers URL parameters for this sort of communication over something like flashing. It would also lead to a bad side effect. Imagine a user loading the URL with the parameter attached maybe from a link given by someone or a cached URL. Although they haven't submitted any JSON, as long as the flag is set, the alert message would still be shown.

Screenshots

Alert message during failure.

App crashes if the file uploaded has invalid content (fixed on this PR).

While working on another issue, I noticed that a weird padding pops up on the bottom of the page whenever the JSON View is opened.

Steps to replicate

1. Load the json page with Column View
2. Switch to JSON View

Before

After

OS: Windows 11 Browser: Chrome

Currently, a text pointer is displayed over the text in the JSON selection/upload UI.

The cursor should be a pointer over the whole container, including the text.

Great project btw! 👍🙏👏

I am using a JSON Hero tool a lot and whenever I use it, I have to open in another tab and continue browsing the JSON.

So, I was thinking is there a chance to use JSON Hero tool on the same page where I am opening it from - my app page by using