diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml new file mode 100644 index 000000000..beb762dc8 --- /dev/null +++ b/.github/workflows/main.yml @@ -0,0 +1,41 @@ +name: CI + +on: + push: + branches: [main] + paths: + - ".github/workflows/main.yml" + - "app/**/*.ts" + - "app/**/*.tsx" + - "public/*" + - "styles/*" + - "worker/*" + - "tests/*" + - "package.json" + - "package-lock.json" + - "remix.config.js" + - "tsconfig.json" + - "wrangler.toml" + - "remix.env.d.ts" + - "tailwind.config.js" + + workflow_dispatch: + +jobs: + build: + runs-on: ubuntu-latest + + steps: + - uses: actions/checkout@v2 + - uses: actions/setup-node@v2 + with: + node-version: "16.x" + registry-url: "https://registry.npmjs.org" + - run: npm ci + - run: npm test + - run: npm run build + - name: Publish app + uses: cloudflare/wrangler-action@1.3.0 + with: + apiToken: ${{ secrets.CF_API_TOKEN }} + environment: "production" diff --git a/.gitignore b/.gitignore new file mode 100644 index 000000000..235185cc8 --- /dev/null +++ b/.gitignore @@ -0,0 +1,14 @@ +node_modules + +/.cache +/build +/public/build +.env +/app/tailwind.css +/jsonDocs +.DS_Store +/dist +.mf +/meta.json +/stats.html +public/entry.worker.js \ No newline at end of file diff --git a/.vscode/launch.json b/.vscode/launch.json new file mode 100644 index 000000000..c8b8c0c21 --- /dev/null +++ b/.vscode/launch.json @@ -0,0 +1,40 @@ +{ + // Use IntelliSense to learn about possible attributes. + // Hover to view descriptions of existing attributes. + // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 + "version": "0.2.0", + "configurations": [ + { + "type": "pwa-chrome", + "request": "launch", + "name": "Launch Chrome against localhost with document", + "url": "http://localhost:8787", + "webRoot": "${workspaceFolder}/app" + }, + { + "name": "Debug Jest All Tests", + "type": "node", + "request": "launch", + "runtimeArgs": [ + "--inspect-brk", + "${workspaceRoot}/node_modules/.bin/jest", + "--runInBand" + ], + "console": "integratedTerminal", + "internalConsoleOptions": "neverOpen" + }, + { + "name": "Debug Jest Test File", + "type": "node", + "request": "launch", + "runtimeArgs": [ + "--inspect-brk", + "${workspaceRoot}/node_modules/.bin/jest", + "--runInBand" + ], + "args": ["${fileBasename}", "--no-cache"], + "console": "integratedTerminal", + "internalConsoleOptions": "neverOpen" + } + ] +} diff --git a/.vscode/tasks.json b/.vscode/tasks.json new file mode 100644 index 000000000..68a8953c5 --- /dev/null +++ b/.vscode/tasks.json @@ -0,0 +1,13 @@ +{ + "version": "2.0.0", + "tasks": [ + { + "type": "typescript", + "tsconfig": "tsconfig.json", + "option": "watch", + "problemMatcher": ["$tsc-watch"], + "group": "build", + "label": "tsc: watch - tsconfig.json" + } + ] +} diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md new file mode 100644 index 000000000..93f7ece71 --- /dev/null +++ b/CONTRIBUTING.md @@ -0,0 +1,41 @@ +## ⚡️ JSON Hero Contributing Guide + +First of all, thanks for considering contributing to this project! If you have any questions please don't hesitate to reach out to [eric@jsonhero.io](mailto:eric@jsonhero.io) or join us on [Discord](https://discord.gg/JtBAxBr2m3). + +JSON Hero is a Typescript React application built with [remix.run](https://remix.run), with support for deploying to Cloudflare workers. + +To get started with contributing, please read our [Development guide](https://github.com/triggerdotdev/jsonhero-web/blob/main/DEVELOPMENT.md) first to get JSON Hero running locally. + +### Running tests + +Although there is less test-coverage for JSON Hero than there should be, tests should still be run to ensure builds have not been broken: + +```bash +npm test +``` + +You can also run tests in "watch" mode: + +```bash +npm run test:watch +``` + +### Making changes + +Please make any changes to your forked repository in a branch other than `main`. If you are working on a bug fix, please use the `bug/` prefix for your branch name. If you are working on a feature, please use `features/`. If you are working on a specific issue please name the branch `issue-` + +Make sure to run the `npm lint` command to ensure there are no Typescript compile-time errors. + +### Pull Requests + +Please open a Pull Request against the `main` branch in the `triggerdotdev/jsonhero-web` repository. We will aim to address all newly opened PRs by the following Friday. If you haven't opened a Pull Request before, please check out GitHub's [Pull Request documentation](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests) + +### Other JSON Hero projects + +If you'd like to contribute to the [VSCode extension](https://marketplace.visualstudio.com/items?itemName=JSONHero.jsonhero-vscode), please see the [triggerdotdev/vscode-extension](https://github.com/triggerdotdev/vscode-extension) repo. + +For issues related to the JSON Schema inference, please check out [triggerdotdev/schema-infer](https://github.com/triggerdotdev/schema-infer). + +The "Smart Preview" feature is in-part powered by the [@jsonhero/json-infer-types](https://github.com/triggerdotdev/json-infer-types) project. + +If it's related to the Search functionality, please see the [triggerdotdev/fuzzy-json-search](https://github.com/triggerdotdev/fuzzy-json-search) repo. diff --git a/DEVELOPMENT.md b/DEVELOPMENT.md new file mode 100644 index 000000000..8dbf922f3 --- /dev/null +++ b/DEVELOPMENT.md @@ -0,0 +1,83 @@ +## 👩🏽‍💻 JSON Hero Local Development Guide + +Welcome to JSON Hero development and thanks for being here! If you'd like to run JSON Hero locally, please use the following guide to get started. If you have any issues with this guide please feel free to email me at [eric@jsonhero.io](mailto:eric@jsonhero.io) or come leave a message in our open [Discord Channel](https://discord.gg/JtBAxBr2m3). + +For more information about contributing to JSON Hero please see the [Contributing doc](https://github.com/triggerdotdev/jsonhero-web/blob/main/CONTRIBUTING.md). + +### Install dependencies + +Before you can run JSON Hero locally, you will need to install the following dependencies on your machine: + +#### Git + +You most likely already have git installed on your machine, but if not, you can install it from the [Git website](https://git-scm.com). + +#### Node.js 16 + +Even though JSON Hero runs on [Cloudflare Workers](https://workers.cloudflare.com), which isn't a Node.js environment, you will still need Node.js 16 to run it locally. The recommended way to install Node.js is to download a pre-built package from the [Node.js website](https://nodejs.org/en/) + +#### NPM + +If you install Node.js through the above link, you should also have NPM automatically installed as well. To make sure, run the following command in your preferred Terminal: + +```bash +npm ---version +``` + +### Fork JSON Hero on GitHub (optional) + +To contribute code to JSON Hero, you should first create a fork of the [jsonhero-web](https://github.com/triggerdotdev/jsonhero-web) repository on GitHub. Follow [these instructions](https://docs.github.com/en/get-started/quickstart/fork-a-repo) on repository forking. + +### Clone the repo + +In your terminal, issue the following command to clone the repository to your local machine: + +```bash +git clone https://github.com/triggerdotdev/jsonhero-web.git +``` + +Or if you've forked the repository: + +```bash +git clone https://github.com//jsonhero-web.git +``` + +Then `cd` into the repository: + +```bash +cd jsonhero-web +``` + +### Prepare the repo + +First, install npm dependencies: + +```bash +npm install +``` + +Run the following command to create the `.env` file with a new `SESSION_SECRET` environment variable: + +```bash +echo "SESSION_SECRET=$(openssl rand -hex 32)" > .env +``` + +Then, run `npm run build` or `npm run dev` to build. + +Start the development server: + +```bash +npm start +``` + +You should now be able to access your local JSON Hero server on [localhost:8787](http://localhost:8787) + +> **Note** JSON documents created locally are not persisted across server restarts + +### Previewing URLs + +We currently use [OpenGraph Ninja](https://opengraph.ninja/) to power some of the Preview URL functionality. + +### Deploying to Cloudflare + +_Coming Soon_ diff --git a/Dockerfile b/Dockerfile new file mode 100644 index 000000000..65954020c --- /dev/null +++ b/Dockerfile @@ -0,0 +1,12 @@ +# Builder +FROM node:16.17.0 as builder +WORKDIR /src +COPY . /src + +# App +RUN cd /src +RUN npm install +RUN echo "SESSION_SECRET=abc123" > .env +RUN npm run build + +CMD npm start diff --git a/LICENSE b/LICENSE new file mode 100644 index 000000000..261eeb9e9 --- /dev/null +++ b/LICENSE @@ -0,0 +1,201 @@ + Apache License + Version 2.0, January 2004 + http://www.apache.org/licenses/ + + TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION + + 1. Definitions. + + "License" shall mean the terms and conditions for use, reproduction, + and distribution as defined by Sections 1 through 9 of this document. + + "Licensor" shall mean the copyright owner or entity authorized by + the copyright owner that is granting the License. + + "Legal Entity" shall mean the union of the acting entity and all + other entities that control, are controlled by, or are under common + control with that entity. For the purposes of this definition, + "control" means (i) the power, direct or indirect, to cause the + direction or management of such entity, whether by contract or + otherwise, or (ii) ownership of fifty percent (50%) or more of the + outstanding shares, or (iii) beneficial ownership of such entity. + + "You" (or "Your") shall mean an individual or Legal Entity + exercising permissions granted by this License. + + "Source" form shall mean the preferred form for making modifications, + including but not limited to software source code, documentation + source, and configuration files. + + "Object" form shall mean any form resulting from mechanical + transformation or translation of a Source form, including but + not limited to compiled object code, generated documentation, + and conversions to other media types. + + "Work" shall mean the work of authorship, whether in Source or + Object form, made available under the License, as indicated by a + copyright notice that is included in or attached to the work + (an example is provided in the Appendix below). + + "Derivative Works" shall mean any work, whether in Source or Object + form, that is based on (or derived from) the Work and for which the + editorial revisions, annotations, elaborations, or other modifications + represent, as a whole, an original work of authorship. For the purposes + of this License, Derivative Works shall not include works that remain + separable from, or merely link (or bind by name) to the interfaces of, + the Work and Derivative Works thereof. + + "Contribution" shall mean any work of authorship, including + the original version of the Work and any modifications or additions + to that Work or Derivative Works thereof, that is intentionally + submitted to Licensor for inclusion in the Work by the copyright owner + or by an individual or Legal Entity authorized to submit on behalf of + the copyright owner. For the purposes of this definition, "submitted" + means any form of electronic, verbal, or written communication sent + to the Licensor or its representatives, including but not limited to + communication on electronic mailing lists, source code control systems, + and issue tracking systems that are managed by, or on behalf of, the + Licensor for the purpose of discussing and improving the Work, but + excluding communication that is conspicuously marked or otherwise + designated in writing by the copyright owner as "Not a Contribution." + + "Contributor" shall mean Licensor and any individual or Legal Entity + on behalf of whom a Contribution has been received by Licensor and + subsequently incorporated within the Work. + + 2. Grant of Copyright License. Subject to the terms and conditions of + this License, each Contributor hereby grants to You a perpetual, + worldwide, non-exclusive, no-charge, royalty-free, irrevocable + copyright license to reproduce, prepare Derivative Works of, + publicly display, publicly perform, sublicense, and distribute the + Work and such Derivative Works in Source or Object form. + + 3. Grant of Patent License. Subject to the terms and conditions of + this License, each Contributor hereby grants to You a perpetual, + worldwide, non-exclusive, no-charge, royalty-free, irrevocable + (except as stated in this section) patent license to make, have made, + use, offer to sell, sell, import, and otherwise transfer the Work, + where such license applies only to those patent claims licensable + by such Contributor that are necessarily infringed by their + Contribution(s) alone or by combination of their Contribution(s) + with the Work to which such Contribution(s) was submitted. If You + institute patent litigation against any entity (including a + cross-claim or counterclaim in a lawsuit) alleging that the Work + or a Contribution incorporated within the Work constitutes direct + or contributory patent infringement, then any patent licenses + granted to You under this License for that Work shall terminate + as of the date such litigation is filed. + + 4. Redistribution. You may reproduce and distribute copies of the + Work or Derivative Works thereof in any medium, with or without + modifications, and in Source or Object form, provided that You + meet the following conditions: + + (a) You must give any other recipients of the Work or + Derivative Works a copy of this License; and + + (b) You must cause any modified files to carry prominent notices + stating that You changed the files; and + + (c) You must retain, in the Source form of any Derivative Works + that You distribute, all copyright, patent, trademark, and + attribution notices from the Source form of the Work, + excluding those notices that do not pertain to any part of + the Derivative Works; and + + (d) If the Work includes a "NOTICE" text file as part of its + distribution, then any Derivative Works that You distribute must + include a readable copy of the attribution notices contained + within such NOTICE file, excluding those notices that do not + pertain to any part of the Derivative Works, in at least one + of the following places: within a NOTICE text file distributed + as part of the Derivative Works; within the Source form or + documentation, if provided along with the Derivative Works; or, + within a display generated by the Derivative Works, if and + wherever such third-party notices normally appear. The contents + of the NOTICE file are for informational purposes only and + do not modify the License. You may add Your own attribution + notices within Derivative Works that You distribute, alongside + or as an addendum to the NOTICE text from the Work, provided + that such additional attribution notices cannot be construed + as modifying the License. + + You may add Your own copyright statement to Your modifications and + may provide additional or different license terms and conditions + for use, reproduction, or distribution of Your modifications, or + for any such Derivative Works as a whole, provided Your use, + reproduction, and distribution of the Work otherwise complies with + the conditions stated in this License. + + 5. Submission of Contributions. Unless You explicitly state otherwise, + any Contribution intentionally submitted for inclusion in the Work + by You to the Licensor shall be under the terms and conditions of + this License, without any additional terms or conditions. + Notwithstanding the above, nothing herein shall supersede or modify + the terms of any separate license agreement you may have executed + with Licensor regarding such Contributions. + + 6. Trademarks. This License does not grant permission to use the trade + names, trademarks, service marks, or product names of the Licensor, + except as required for reasonable and customary use in describing the + origin of the Work and reproducing the content of the NOTICE file. + + 7. Disclaimer of Warranty. Unless required by applicable law or + agreed to in writing, Licensor provides the Work (and each + Contributor provides its Contributions) on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or + implied, including, without limitation, any warranties or conditions + of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A + PARTICULAR PURPOSE. You are solely responsible for determining the + appropriateness of using or redistributing the Work and assume any + risks associated with Your exercise of permissions under this License. + + 8. Limitation of Liability. In no event and under no legal theory, + whether in tort (including negligence), contract, or otherwise, + unless required by applicable law (such as deliberate and grossly + negligent acts) or agreed to in writing, shall any Contributor be + liable to You for damages, including any direct, indirect, special, + incidental, or consequential damages of any character arising as a + result of this License or out of the use or inability to use the + Work (including but not limited to damages for loss of goodwill, + work stoppage, computer failure or malfunction, or any and all + other commercial damages or losses), even if such Contributor + has been advised of the possibility of such damages. + + 9. Accepting Warranty or Additional Liability. While redistributing + the Work or Derivative Works thereof, You may choose to offer, + and charge a fee for, acceptance of support, warranty, indemnity, + or other liability obligations and/or rights consistent with this + License. However, in accepting such obligations, You may act only + on Your own behalf and on Your sole responsibility, not on behalf + of any other Contributor, and only if You agree to indemnify, + defend, and hold each Contributor harmless for any liability + incurred by, or claims asserted against, such Contributor by reason + of your accepting any such warranty or additional liability. + + END OF TERMS AND CONDITIONS + + APPENDIX: How to apply the Apache License to your work. + + To apply the Apache License to your work, attach the following + boilerplate notice, with the fields enclosed by brackets "[]" + replaced with your own identifying information. (Don't include + the brackets!) The text should be enclosed in the appropriate + comment syntax for the file format. We also recommend that a + file or class name and description of purpose be included on the + same "printed page" as the copyright notice for easier + identification within third-party archives. + + Copyright [yyyy] [name of copyright owner] + + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. diff --git a/README.md b/README.md new file mode 100644 index 000000000..2651e48aa --- /dev/null +++ b/README.md @@ -0,0 +1,154 @@ +

+ +

+ +

+ Open Bounties + Rewarded Bounties +

+ +# Brought to you by Trigger.dev + +JSON Hero was created and is maintained by the team behind [Trigger.dev](https://trigger.dev). With Trigger.dev you can trigger workflows from APIs, on a schedule, or on demand. We make API calls easy with authentication handled for you, and you can add durable delays that survive server restarts. + +# JSON Hero + +JSON Hero makes reading and understand JSON files easy by giving you a clean and beautiful UI packed with extra features. + +- View JSON any way you'd like: Column View, Tree View, Editor View, and more. +- Automatically infers the contents of strings and provides useful previews +- Creates an inferred JSON Schema that could be used to validate your JSON +- Quickly scan related values to check for edge cases +- Search your JSON files (both keys and values) +- Keyboard accessible +- Easily sharable URLs with path support + +![JSON Hero Screenshot](https://imagedelivery.net/3TbraffuDZ4aEf8KWOmI_w/0f5735b3-2421-470b-244c-7047fd77f700/public) + +## 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" }, + "readOnly": false, // this is optional, will make it so the document title cannot be edited or document cannot be deleted + "ttl": 3600 // this will expire the document after 3600 seconds, also optional + } + ``` + + 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. + +![JSON Hero Column View](https://raw.githubusercontent.com/triggerdotdev/documentation-hosting/main/images/features-columnview.gif) + +It has all the features you'd expect: Keyboard navigation, Path bar, history. + +It also has a nifty feature that allows you to "hold" a descendent selected and travel up through the hierarchy, and then move between siblings and view the different values found at that path. It's hard to describe, but here is an animation to help demonstrate: + +![Column View - Traverse with Context](https://raw.githubusercontent.com/triggerdotdev/documentation-hosting/main/images/features-traversewithcontext.gif) + +As you can see, holding the `Option` (or `Alt` key on Windows) while moving to a parent keeps the part of the document selected and shows it in context of it's surrounding JSON. Then you can traverse between items in an array and compare the values of the selection across deep hierarchy cahnges. + +### Editor view + +View your entire JSON document in an editor, but keep the nice previews and related values you get from the sidebar as you move around the document: + +![Editor view](https://raw.githubusercontent.com/triggerdotdev/documentation-hosting/main/images/features-editorview.gif) + +### Tree view + +Use a traditional tree view to traverse your JSON document, with collapsible sections and keyboard shortcuts. All while keeping the nice previews: + +![Tree view](https://raw.githubusercontent.com/triggerdotdev/documentation-hosting/main/images/features-treeview.gif) + +### Search + +Quickly open a search panel and fuzzy search your entire JSON file in milliseconds. Searches through key names, key paths, values, and even pretty formatted values (e.g. Searching for `"Dec"` will find datetime strings in the month of December.) + +![Search](https://raw.githubusercontent.com/triggerdotdev/documentation-hosting/main/images/features-search.gif) + +### Content Previews + +JSON Hero automatically infers the content of strings and provides useful previews and properties of the value you've selected. It's "Show Don't Tell" for JSON: + +#### Dates and Times + +![Preview colors](https://imagedelivery.net/3TbraffuDZ4aEf8KWOmI_w/43f2c081-c09b-47db-cb10-8f15ee6a1a00/public) + +#### Image URLs + +![Preview colors](https://imagedelivery.net/3TbraffuDZ4aEf8KWOmI_w/8a743bd5-a065-4f7f-1262-585c39c10100/public) + +#### Website URLs + +![Preview websites](https://imagedelivery.net/3TbraffuDZ4aEf8KWOmI_w/cd7f2d28-2c8d-4b37-696d-e898937c3d00/public) + +#### Tweet URLS + +![Preview tweets](https://imagedelivery.net/3TbraffuDZ4aEf8KWOmI_w/8455e9d6-1d3e-451e-a032-f3259204ef00/public) + +#### JSON URLs + +![Preview JSON](https://imagedelivery.net/3TbraffuDZ4aEf8KWOmI_w/13743860-3d9c-4cac-dde9-881fba7eba00/public) + +#### Colors + +![Preview colors](https://imagedelivery.net/3TbraffuDZ4aEf8KWOmI_w/22e37599-c2bd-4abd-79f2-466241d17b00/public) + +### Related Values + +Easily see all the related values across your entire JSON document for a specific field, including any `undefined` or `null` values. + +![Editor view](https://raw.githubusercontent.com/triggerdotdev/documentation-hosting/main/images/features-relatedvalues.gif) + + + +## Bugs and Feature Requests + +Have a bug or a feature request? Feel free to [open a new issue](https://github.com/triggerdotdev/jsonhero-web/issues). + +You can also join our [Discord channel](https://discord.gg/JtBAxBr2m3) to hang out and discuss anything you'd like. + +## Developing + +To run locally, first clone the repo and install the dependencies: + +```bash +git clone https://github.com/triggerdotdev/jsonhero-web.git +cd jsonhero-web +npm install +``` + +Then, create a file at the root of the repo called `.env` and set the `SESSION_SECRET` value: + +``` +SESSION_SECRET=abc123 +``` + +Then, run `npm run build` or `npm run dev` to build. + +Now, run `npm start` and open your browser to `http://localhost:8787` diff --git a/SELF_HOSTING.md b/SELF_HOSTING.md new file mode 100644 index 000000000..4ea8b9f01 --- /dev/null +++ b/SELF_HOSTING.md @@ -0,0 +1,40 @@ +## Deploying to Cloudflare + +### Install and login to wrangler +```bash +npm install -g wrangler +wrangler login +``` + +### Create service +Go to workers tab from your [cloudflare profile](https://dash.cloudflare.com/profile) and create a new worker. Use HTTP Handler as service type. The name of worker must match the `name` field in `wrangler.toml`. + +### Setup wrangler.toml +Edit the following variables in `wrangler.toml` and `wrangler.toml.dev`: +- `account_id`: Get account id by using + ```bash + wrangler whoami + ``` +- `kv_namespaces`: Run the following comands to create a new KV namespace. + ```bash + wrangler kv:namespace create DOCUMENTS # gives namespace id + wrangler kv:namespace create DOCUMENTS --preview # gives preview id for namespace + ``` + Replace current entry for `kv_namespaces` as: + ```toml + kv_namespaces = [ + { binding = "DOCUMENTS", id = , preview_id = } + ] + ``` + +### Configure Environment Variables +Set `SESSION_SECRET` environment for worker. +```bash +wrangler secret put SESSION_SECRET +``` +Optionally set other secrets listed at the end of `wrangler.toml`. + +### Publish worker +```bash +wrangler publish +``` diff --git a/app/assets/home/JsonHero2.mp4 b/app/assets/home/JsonHero2.mp4 new file mode 100644 index 000000000..3f6bfaca3 Binary files /dev/null and b/app/assets/home/JsonHero2.mp4 differ diff --git a/app/assets/home/JsonHeroSearch.mp4 b/app/assets/home/JsonHeroSearch.mp4 new file mode 100644 index 000000000..07c66e520 Binary files /dev/null and b/app/assets/home/JsonHeroSearch.mp4 differ diff --git a/app/assets/home/JsonHeroShare.mp4 b/app/assets/home/JsonHeroShare.mp4 new file mode 100644 index 000000000..3adb7c8b4 Binary files /dev/null and b/app/assets/home/JsonHeroShare.mp4 differ diff --git a/app/assets/home/UncoverEdgeCases.mp4 b/app/assets/home/UncoverEdgeCases.mp4 new file mode 100644 index 000000000..b1f1473cd Binary files /dev/null and b/app/assets/home/UncoverEdgeCases.mp4 differ diff --git a/app/assets/images/opengraph.png b/app/assets/images/opengraph.png new file mode 100644 index 000000000..5e824b965 Binary files /dev/null and b/app/assets/images/opengraph.png differ diff --git a/app/assets/images/td-triangle.png b/app/assets/images/td-triangle.png new file mode 100644 index 000000000..6d275c4f8 Binary files /dev/null and b/app/assets/images/td-triangle.png differ diff --git a/app/assets/images/trigger-dev-logo-dark.png b/app/assets/images/trigger-dev-logo-dark.png new file mode 100644 index 000000000..2fcf8554e Binary files /dev/null and b/app/assets/images/trigger-dev-logo-dark.png differ diff --git a/app/assets/images/trigger-dev-logo.png b/app/assets/images/trigger-dev-logo.png new file mode 100644 index 000000000..06d438e81 Binary files /dev/null and b/app/assets/images/trigger-dev-logo.png differ diff --git a/app/assets/svgs/CopyIcon.svg b/app/assets/svgs/CopyIcon.svg new file mode 100644 index 000000000..0e6fa2f55 --- /dev/null +++ b/app/assets/svgs/CopyIcon.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/app/assets/svgs/EyeIcon.svg b/app/assets/svgs/EyeIcon.svg new file mode 100644 index 000000000..087aaeab0 --- /dev/null +++ b/app/assets/svgs/EyeIcon.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/app/assets/svgs/TickIcon.svg b/app/assets/svgs/TickIcon.svg new file mode 100644 index 000000000..ca57a18c5 --- /dev/null +++ b/app/assets/svgs/TickIcon.svg @@ -0,0 +1,3 @@ + + + diff --git a/app/bindings.d.ts b/app/bindings.d.ts new file mode 100644 index 000000000..36789ec4d --- /dev/null +++ b/app/bindings.d.ts @@ -0,0 +1,9 @@ +export {}; + +declare global { + const DOCUMENTS: KVNamespace; + const SESSION_SECRET: string; + const GRAPH_JSON_API_KEY: string; + const GRAPH_JSON_COLLECTION: string; + const APIHERO_PROJECT_KEY: string; +} diff --git a/app/components/AutoplayVideo.tsx b/app/components/AutoplayVideo.tsx new file mode 100644 index 000000000..9338f6db9 --- /dev/null +++ b/app/components/AutoplayVideo.tsx @@ -0,0 +1,30 @@ +import { useEffect, useRef } from "react"; +import { useOnScreen } from "~/hooks/useOnScreen"; + +export function AutoplayVideo({ src }: { src: string }) { + const elementRef = useRef(null); + const isOnScreen = useOnScreen(elementRef); + + useEffect(() => { + if (elementRef.current == null) return; + + elementRef.current.muted = true; + elementRef.current.playsInline = true; + + if (isOnScreen) { + elementRef.current.play(); + } else { + elementRef.current.pause(); + } + }, [isOnScreen]); + + return ( +