├── public ├── .nojekyll ├── CNAME ├── favicon.ico ├── assets │ ├── 192.jpg │ ├── 512.jpg │ ├── mesh.webp │ ├── jsoncrack.png │ ├── preview │ │ ├── 1.png │ │ ├── 1.webp │ │ ├── 2.png │ │ ├── 2.webp │ │ ├── 3.png │ │ ├── 3.webp │ │ ├── 4.png │ │ ├── 4.webp │ │ ├── 5.png │ │ ├── 5.webp │ │ ├── 6.png │ │ ├── 6.webp │ │ ├── 7.png │ │ ├── 7.webp │ │ ├── 8.png │ │ ├── 8.webp │ │ └── free.webp │ ├── compare │ │ ├── free.webp │ │ └── pro.webp │ ├── og │ │ └── affiliates.png │ ├── features │ │ ├── edit.webp │ │ ├── search.webp │ │ └── compare.webp │ ├── todiagram_logo.png │ ├── premium-divider.svg │ ├── steps-divider-round.svg │ ├── cursor.svg │ └── logo.svg ├── robots.txt ├── sitemap.txt └── manifest.json ├── .env ├── sentry.edge.config.ts ├── sentry.server.config.ts ├── .prettierignore ├── src ├── enums │ ├── viewMode.enum.ts │ └── file.enum.ts ├── assets │ └── fonts │ │ └── Mona-Sans.woff2 ├── lib │ └── utils │ │ ├── helpers.ts │ │ ├── search.ts │ │ └── jsonAdapter.ts ├── types │ ├── styled.d.ts │ └── graph.ts ├── containers │ ├── Editor │ │ ├── components │ │ │ ├── views │ │ │ │ ├── GraphView │ │ │ │ │ ├── lib │ │ │ │ │ │ ├── utils │ │ │ │ │ │ │ ├── addEdgeToGraph.ts │ │ │ │ │ │ │ ├── getChildrenEdges.ts │ │ │ │ │ │ │ ├── addNodeToGraph.ts │ │ │ │ │ │ │ ├── getOutgoers.ts │ │ │ │ │ │ │ ├── getNodePath.ts │ │ │ │ │ │ │ └── calculateNodeSize.ts │ │ │ │ │ │ └── jsonParser.ts │ │ │ │ │ ├── CustomEdge │ │ │ │ │ │ └── index.tsx │ │ │ │ │ ├── CustomNode │ │ │ │ │ │ ├── ObjectNode.tsx │ │ │ │ │ │ ├── index.tsx │ │ │ │ │ │ ├── TextRenderer.tsx │ │ │ │ │ │ ├── styles.tsx │ │ │ │ │ │ └── TextNode.tsx │ │ │ │ │ └── NotSupported.tsx │ │ │ │ └── TreeView │ │ │ │ │ ├── Label.tsx │ │ │ │ │ ├── index.tsx │ │ │ │ │ └── Value.tsx │ │ │ ├── LiveEditor.tsx │ │ │ ├── FullscreenDropzone.tsx │ │ │ ├── TextEditor.tsx │ │ │ └── BottomBar.tsx │ │ └── index.tsx │ ├── Toolbar │ │ ├── Logo.tsx │ │ ├── styles.ts │ │ ├── AccountMenu.tsx │ │ ├── SearchInput.tsx │ │ ├── FileMenu.tsx │ │ ├── ZoomMenu.tsx │ │ ├── OptionsMenu.tsx │ │ ├── index.tsx │ │ └── ToolsMenu.tsx │ ├── Modals │ │ ├── index.ts │ │ ├── JWTModal │ │ │ └── index.tsx │ │ ├── JQModal │ │ │ └── index.tsx │ │ ├── JPathModal │ │ │ └── index.tsx │ │ ├── NodeModal │ │ │ └── index.tsx │ │ ├── UpgradeModal │ │ │ └── index.tsx │ │ ├── TypeModal │ │ │ └── index.tsx │ │ ├── ImportModal │ │ │ └── index.tsx │ │ ├── SchemaModal │ │ │ └── index.tsx │ │ └── DownloadModal │ │ │ └── index.tsx │ └── Landing │ │ ├── HeroPreview.tsx │ │ ├── FAQ.tsx │ │ ├── SeePremium.tsx │ │ ├── PremiumPreview.tsx │ │ ├── HeroSection.tsx │ │ ├── Features.tsx │ │ └── Section1.tsx ├── store │ ├── useModal.ts │ ├── useJson.ts │ └── useConfig.ts ├── layout │ ├── Layout.tsx │ ├── ModalController.tsx │ ├── JsonCrackLogo.tsx │ ├── ExternalMode.tsx │ ├── Navbar.tsx │ ├── Footer.tsx │ └── AuthLayout.tsx ├── constants │ ├── seo.ts │ ├── globalStyle.ts │ └── theme.ts ├── pages │ ├── 404.tsx │ ├── _error.tsx │ ├── _document.tsx │ ├── legal │ │ ├── terms.tsx │ │ └── privacy.tsx │ ├── _app.tsx │ ├── widget.tsx │ ├── editor.tsx │ └── index.tsx ├── hooks │ ├── useJsonQuery.ts │ ├── useToggleHide.ts │ └── useFocusNode.ts └── data │ └── faq.json ├── next-env.d.ts ├── docker-compose.yml ├── .dockerignore ├── default.conf ├── .prettierrc ├── Dockerfile ├── tsconfig.json ├── .gitignore ├── .github ├── FUNDING.yml ├── ISSUE_TEMPLATE │ ├── feature_request.yml │ └── bug_report.yml └── workflows │ ├── pull-request.yml │ └── deploy.yml ├── sentry.client.config.ts ├── .eslintrc.json ├── next.config.js ├── package.json ├── LICENSE └── CONTRIBUTING.md /public/.nojekyll: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/CNAME: -------------------------------------------------------------------------------- 1 | jsoncrack.com -------------------------------------------------------------------------------- /.env: -------------------------------------------------------------------------------- 1 | NEXT_PUBLIC_GA_MEASUREMENT_ID=G-JKZEHMJBMH 2 | -------------------------------------------------------------------------------- /sentry.edge.config.ts: -------------------------------------------------------------------------------- 1 | { 2 | /* empty */ 3 | } 4 | -------------------------------------------------------------------------------- /sentry.server.config.ts: -------------------------------------------------------------------------------- 1 | { 2 | /* empty */ 3 | } 4 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aliuq/jsoncrack.com/main/public/favicon.ico -------------------------------------------------------------------------------- /public/assets/192.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aliuq/jsoncrack.com/main/public/assets/192.jpg -------------------------------------------------------------------------------- /public/assets/512.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aliuq/jsoncrack.com/main/public/assets/512.jpg -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | .github 2 | .next 3 | node_modules/ 4 | out 5 | public 6 | *-lock.json 7 | tsconfig.json -------------------------------------------------------------------------------- /public/assets/mesh.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aliuq/jsoncrack.com/main/public/assets/mesh.webp -------------------------------------------------------------------------------- /src/enums/viewMode.enum.ts: -------------------------------------------------------------------------------- 1 | export enum ViewMode { 2 | Graph = "graph", 3 | Tree = "tree", 4 | } 5 | -------------------------------------------------------------------------------- /public/assets/jsoncrack.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aliuq/jsoncrack.com/main/public/assets/jsoncrack.png -------------------------------------------------------------------------------- /public/assets/preview/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aliuq/jsoncrack.com/main/public/assets/preview/1.png -------------------------------------------------------------------------------- /public/assets/preview/1.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aliuq/jsoncrack.com/main/public/assets/preview/1.webp -------------------------------------------------------------------------------- /public/assets/preview/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aliuq/jsoncrack.com/main/public/assets/preview/2.png -------------------------------------------------------------------------------- /public/assets/preview/2.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aliuq/jsoncrack.com/main/public/assets/preview/2.webp -------------------------------------------------------------------------------- /public/assets/preview/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aliuq/jsoncrack.com/main/public/assets/preview/3.png -------------------------------------------------------------------------------- /public/assets/preview/3.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aliuq/jsoncrack.com/main/public/assets/preview/3.webp -------------------------------------------------------------------------------- /public/assets/preview/4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aliuq/jsoncrack.com/main/public/assets/preview/4.png -------------------------------------------------------------------------------- /public/assets/preview/4.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aliuq/jsoncrack.com/main/public/assets/preview/4.webp -------------------------------------------------------------------------------- /public/assets/preview/5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aliuq/jsoncrack.com/main/public/assets/preview/5.png -------------------------------------------------------------------------------- /public/assets/preview/5.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aliuq/jsoncrack.com/main/public/assets/preview/5.webp -------------------------------------------------------------------------------- /public/assets/preview/6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aliuq/jsoncrack.com/main/public/assets/preview/6.png -------------------------------------------------------------------------------- /public/assets/preview/6.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aliuq/jsoncrack.com/main/public/assets/preview/6.webp -------------------------------------------------------------------------------- /public/assets/preview/7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aliuq/jsoncrack.com/main/public/assets/preview/7.png -------------------------------------------------------------------------------- /public/assets/preview/7.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aliuq/jsoncrack.com/main/public/assets/preview/7.webp -------------------------------------------------------------------------------- /public/assets/preview/8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aliuq/jsoncrack.com/main/public/assets/preview/8.png -------------------------------------------------------------------------------- /public/assets/preview/8.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aliuq/jsoncrack.com/main/public/assets/preview/8.webp -------------------------------------------------------------------------------- /public/assets/compare/free.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aliuq/jsoncrack.com/main/public/assets/compare/free.webp -------------------------------------------------------------------------------- /public/assets/compare/pro.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aliuq/jsoncrack.com/main/public/assets/compare/pro.webp -------------------------------------------------------------------------------- /public/assets/og/affiliates.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aliuq/jsoncrack.com/main/public/assets/og/affiliates.png -------------------------------------------------------------------------------- /public/assets/preview/free.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aliuq/jsoncrack.com/main/public/assets/preview/free.webp -------------------------------------------------------------------------------- /public/assets/features/edit.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aliuq/jsoncrack.com/main/public/assets/features/edit.webp -------------------------------------------------------------------------------- /public/assets/features/search.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aliuq/jsoncrack.com/main/public/assets/features/search.webp -------------------------------------------------------------------------------- /public/assets/todiagram_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aliuq/jsoncrack.com/main/public/assets/todiagram_logo.png -------------------------------------------------------------------------------- /src/assets/fonts/Mona-Sans.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aliuq/jsoncrack.com/main/src/assets/fonts/Mona-Sans.woff2 -------------------------------------------------------------------------------- /public/assets/features/compare.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aliuq/jsoncrack.com/main/public/assets/features/compare.webp -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | User-agent: * 2 | Allow: / 3 | 4 | User-agent: * 5 | Disallow: /widget 6 | 7 | Sitemap: https://jsoncrack.com/sitemap.txt 8 | -------------------------------------------------------------------------------- /src/enums/file.enum.ts: -------------------------------------------------------------------------------- 1 | export enum FileFormat { 2 | "JSON" = "json", 3 | "YAML" = "yaml", 4 | "XML" = "xml", 5 | "TOML" = "toml", 6 | "CSV" = "csv", 7 | } 8 | -------------------------------------------------------------------------------- /src/lib/utils/helpers.ts: -------------------------------------------------------------------------------- 1 | export function isIframe() { 2 | try { 3 | return window.self !== window.top; 4 | } catch (e) { 5 | return true; 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /public/sitemap.txt: -------------------------------------------------------------------------------- 1 | https://jsoncrack.com 2 | https://jsoncrack.com/editor 3 | https://jsoncrack.com/docs 4 | https://jsoncrack.com/widget 5 | https://jsoncrack.com/legal/terms 6 | https://jsoncrack.com/legal/privacy 7 | -------------------------------------------------------------------------------- /next-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | /// 3 | 4 | // NOTE: This file should not be edited 5 | // see https://nextjs.org/docs/basic-features/typescript for more information. 6 | -------------------------------------------------------------------------------- /docker-compose.yml: -------------------------------------------------------------------------------- 1 | version: '3.9' 2 | services: 3 | jsoncrack: 4 | image: jsoncrack 5 | container_name: jsoncrack 6 | build: 7 | context: . 8 | dockerfile: Dockerfile 9 | ports: 10 | - "8888:8080" -------------------------------------------------------------------------------- /src/types/styled.d.ts: -------------------------------------------------------------------------------- 1 | import "styled-components"; 2 | import type theme from "src/constants/theme"; 3 | 4 | type CustomTheme = typeof theme; 5 | 6 | declare module "styled-components" { 7 | export interface DefaultTheme extends CustomTheme {} 8 | } 9 | -------------------------------------------------------------------------------- /.dockerignore: -------------------------------------------------------------------------------- 1 | # Ignore node modules as they will be installed in the Dockerfile 2 | node_modules/ 3 | 4 | # Ignore local configuration and cache files 5 | .cache/ 6 | .config/ 7 | .DS_Store 8 | 9 | # Ignore logs 10 | *.log 11 | 12 | # Ignore test and development files 13 | *.md 14 | *.test.js 15 | -------------------------------------------------------------------------------- /src/containers/Editor/components/views/GraphView/lib/utils/addEdgeToGraph.ts: -------------------------------------------------------------------------------- 1 | import type { Graph } from "../jsonParser"; 2 | 3 | export const addEdgeToGraph = (graph: Graph, from: string, to: string) => { 4 | const newEdge = { 5 | id: `e${from}-${to}`, 6 | from: from, 7 | to: to, 8 | }; 9 | 10 | graph.edges.push(newEdge); 11 | }; 12 | -------------------------------------------------------------------------------- /default.conf: -------------------------------------------------------------------------------- 1 | server { 2 | listen 8080; 3 | root /app; 4 | include /etc/nginx/mime.types; 5 | 6 | location /editor { 7 | try_files $uri /editor.html; 8 | } 9 | 10 | location /widget { 11 | try_files $uri /widget.html; 12 | } 13 | 14 | location /docs { 15 | try_files $uri /docs.html; 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /src/containers/Toolbar/Logo.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { JSONCrackLogo } from "src/layout/JsonCrackLogo"; 3 | import { StyledToolElement } from "./styles"; 4 | 5 | export const Logo = () => { 6 | return ( 7 | 8 | 9 | 10 | ); 11 | }; 12 | -------------------------------------------------------------------------------- /src/containers/Editor/components/views/GraphView/CustomEdge/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import type { EdgeProps } from "reaflow"; 3 | import { Edge } from "reaflow"; 4 | 5 | const CustomEdgeWrapper = (props: EdgeProps) => { 6 | return ; 7 | }; 8 | 9 | export const CustomEdge = React.memo(CustomEdgeWrapper); 10 | -------------------------------------------------------------------------------- /public/assets/premium-divider.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/assets/steps-divider-round.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/containers/Editor/components/views/GraphView/lib/utils/getChildrenEdges.ts: -------------------------------------------------------------------------------- 1 | import type { NodeData, EdgeData } from "src/types/graph"; 2 | 3 | export const getChildrenEdges = (nodes: NodeData[], edges: EdgeData[]): EdgeData[] => { 4 | const nodeIds = nodes.map(node => node.id); 5 | 6 | return edges.filter( 7 | edge => nodeIds.includes(edge.from as string) || nodeIds.includes(edge.to as string) 8 | ); 9 | }; 10 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "trailingComma": "es5", 3 | "singleQuote": false, 4 | "semi": true, 5 | "printWidth": 100, 6 | "arrowParens": "avoid", 7 | "importOrder": [ 8 | "^(react/(.*)$)|^(react$)", 9 | "^(next/(.*)$)|^(next$)", 10 | "^@mantine/core", 11 | "^@mantine", 12 | "styled", 13 | "", 14 | "^src/(.*)$", 15 | "^[./]" 16 | ], 17 | "importOrderParserPlugins": ["typescript", "jsx", "decorators-legacy"], 18 | "plugins": ["@trivago/prettier-plugin-sort-imports"] 19 | } 20 | -------------------------------------------------------------------------------- /Dockerfile: -------------------------------------------------------------------------------- 1 | # Builder 2 | FROM node:18-alpine as builder 3 | # Reference :: https://pnpm.io/docker 4 | ENV PNPM_HOME="/pnpm" 5 | ENV PATH="$PNPM_HOME:$PATH" 6 | RUN corepack enable 7 | WORKDIR /src 8 | 9 | # Cache dependencies first 10 | COPY package.json pnpm-lock.yaml ./ 11 | RUN pnpm install 12 | 13 | # Copy other files and build 14 | COPY . /src/ 15 | RUN pnpm build 16 | 17 | # App 18 | FROM nginxinc/nginx-unprivileged 19 | COPY --chown=nginx:nginx --from=builder /src/out /app 20 | COPY default.conf /etc/nginx/conf.d/default.conf 21 | -------------------------------------------------------------------------------- /src/types/graph.ts: -------------------------------------------------------------------------------- 1 | import type { NodeType } from "jsonc-parser"; 2 | 3 | export interface NodeData { 4 | id: string; 5 | text: string | [string, string][]; 6 | width: number; 7 | height: number; 8 | path?: string; 9 | data: { 10 | type: NodeType; 11 | isParent: boolean; 12 | isEmpty: boolean; 13 | childrenCount: number; 14 | }; 15 | } 16 | 17 | export interface EdgeData { 18 | id: string; 19 | from: string; 20 | to: string; 21 | } 22 | 23 | export type LayoutDirection = "LEFT" | "RIGHT" | "DOWN" | "UP"; 24 | -------------------------------------------------------------------------------- /src/containers/Modals/index.ts: -------------------------------------------------------------------------------- 1 | export { DownloadModal } from "./DownloadModal"; 2 | export { ImportModal } from "./ImportModal"; 3 | export { NodeModal } from "./NodeModal"; 4 | export { UpgradeModal } from "./UpgradeModal"; 5 | export { JWTModal } from "./JWTModal"; 6 | export { SchemaModal } from "./SchemaModal"; 7 | export { JQModal } from "./JQModal"; 8 | export { TypeModal } from "./TypeModal"; 9 | export { JPathModal } from "./JPathModal"; 10 | 11 | type Modal = 12 | | "download" 13 | | "import" 14 | | "node" 15 | | "upgrade" 16 | | "jwt" 17 | | "schema" 18 | | "jq" 19 | | "type" 20 | | "jpath"; 21 | 22 | export type { Modal }; 23 | -------------------------------------------------------------------------------- /public/assets/cursor.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "baseUrl": ".", 4 | "target": "ES6", 5 | "lib": ["dom", "dom.iterable", "esnext"], 6 | "allowJs": true, 7 | "skipLibCheck": true, 8 | "strict": true, 9 | "forceConsistentCasingInFileNames": true, 10 | "noEmit": true, 11 | "esModuleInterop": true, 12 | "module": "esnext", 13 | "moduleResolution": "node", 14 | "resolveJsonModule": true, 15 | "isolatedModules": true, 16 | "jsx": "preserve", 17 | "incremental": true, 18 | "noImplicitAny": false, 19 | "typeRoots": ["types"] 20 | }, 21 | "include": ["src", "next-env.d.ts",], 22 | "exclude": ["node_modules"] 23 | } 24 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # next.js 12 | /.next/ 13 | /out/ 14 | 15 | # production 16 | /build 17 | 18 | # misc 19 | .DS_Store 20 | *.pem 21 | 22 | # debug 23 | npm-debug.log* 24 | 25 | # local env files 26 | .env.local 27 | .env.development.local 28 | .env.test.local 29 | .env.production.local 30 | 31 | # vercel 32 | .vercel 33 | 34 | # typescript 35 | *.tsbuildinfo 36 | 37 | # PWA workers 38 | **/public/workbox-*.js 39 | **/public/sw.js 40 | **/public/fallback-*.js 41 | # Sentry Auth Token 42 | .sentryclirc 43 | -------------------------------------------------------------------------------- /src/containers/Landing/HeroPreview.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Container, Image } from "@mantine/core"; 3 | 4 | export const HeroPreview = () => { 5 | return ( 6 | 7 | JSON Crack editor preview 21 | 22 | ); 23 | }; 24 | -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "JSON Crack", 3 | "short_name": "JSON Crack", 4 | "description": "JSON Crack Editor is a tool for visualizing into graphs, analyzing, editing, formatting, querying, transforming and validating JSON, CSV, YAML, XML, and more.", 5 | "theme_color": "#36393e", 6 | "background_color": "#36393e", 7 | "display": "standalone", 8 | "orientation": "landscape", 9 | "scope": "/editor", 10 | "start_url": "/editor", 11 | "icons": [ 12 | { 13 | "src": "assets/192.jpg", 14 | "sizes": "192x192", 15 | "type": "image/png" 16 | }, 17 | 18 | { 19 | "src": "assets/512.jpg", 20 | "sizes": "512x512", 21 | "type": "image/png" 22 | } 23 | ] 24 | } 25 | -------------------------------------------------------------------------------- /src/store/useModal.ts: -------------------------------------------------------------------------------- 1 | import { create } from "zustand"; 2 | import type { Modal } from "src/containers/Modals"; 3 | 4 | type ModalState = { 5 | [key in Modal]: boolean; 6 | }; 7 | 8 | interface ModalActions { 9 | setVisible: (modal: Modal) => (visible: boolean) => void; 10 | } 11 | 12 | const initialStates: ModalState = { 13 | download: false, 14 | import: false, 15 | node: false, 16 | upgrade: false, 17 | jwt: false, 18 | schema: false, 19 | jq: false, 20 | type: false, 21 | jpath: false, 22 | }; 23 | 24 | const useModal = create()(set => ({ 25 | ...initialStates, 26 | setVisible: modal => visible => set({ [modal]: visible }), 27 | })); 28 | 29 | export default useModal; 30 | -------------------------------------------------------------------------------- /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | # These are supported funding model platforms 2 | 3 | github: AykutSarac 4 | patreon: # patreon name 5 | open_collective: # opencollective name 6 | ko_fi: # Replace with a single Ko-fi username 7 | tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel 8 | community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry 9 | liberapay: # Replace with a single Liberapay username 10 | issuehunt: # Replace with a single IssueHunt username 11 | otechie: # Replace with a single Otechie username 12 | lfx_crowdfunding: # Replace with a single LFX Crowdfunding project-name e.g., cloud-foundry 13 | custom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2'] 14 | -------------------------------------------------------------------------------- /sentry.client.config.ts: -------------------------------------------------------------------------------- 1 | // https://docs.sentry.io/platforms/javascript/guides/nextjs/ 2 | import * as Sentry from "@sentry/nextjs"; 3 | 4 | if (process.env.NODE_ENV === "production") { 5 | Sentry.init({ 6 | dsn: "https://d3345591295d4dd1b8c579b62003d939@o1284435.ingest.sentry.io/6495191", 7 | tracesSampleRate: 0.2, 8 | debug: false, 9 | release: `${process.env.SENTRY_RELEASE || "production"}`, 10 | allowUrls: ["https://jsoncrack.com/editor"], 11 | replaysOnErrorSampleRate: 1.0, 12 | replaysSessionSampleRate: 0.1, 13 | integrations: [ 14 | new Sentry.BrowserTracing(), 15 | new Sentry.Replay({ 16 | maskAllText: true, 17 | blockAllMedia: true, 18 | }), 19 | ], 20 | }); 21 | } 22 | -------------------------------------------------------------------------------- /src/lib/utils/search.ts: -------------------------------------------------------------------------------- 1 | export const searchQuery = (param: string) => { 2 | return document.querySelectorAll(param); 3 | }; 4 | 5 | export const cleanupHighlight = () => { 6 | const nodes = document.querySelectorAll("foreignObject.searched, .highlight"); 7 | 8 | nodes.forEach(node => { 9 | node.classList.remove("highlight", "searched"); 10 | }); 11 | }; 12 | 13 | export const highlightMatchedNodes = (nodes: NodeListOf, selectedNode: number) => { 14 | nodes.forEach(node => { 15 | const foreignObject = node.parentElement?.closest("foreignObject"); 16 | 17 | if (foreignObject) { 18 | foreignObject.classList.add("searched"); 19 | } 20 | }); 21 | 22 | nodes[selectedNode].classList.add("highlight"); 23 | }; 24 | -------------------------------------------------------------------------------- /src/containers/Toolbar/styles.ts: -------------------------------------------------------------------------------- 1 | import styled from "styled-components"; 2 | 3 | export const StyledToolElement = styled.button<{ $hide?: boolean; $highlight?: boolean }>` 4 | display: ${({ $hide }) => ($hide ? "none" : "flex")}; 5 | align-items: center; 6 | gap: 4px; 7 | place-content: center; 8 | font-size: 12px; 9 | background: ${({ $highlight }) => 10 | $highlight ? "linear-gradient(rgba(0, 0, 0, 0.1) 0 0)" : "none"}; 11 | color: ${({ theme }) => theme.INTERACTIVE_NORMAL}; 12 | padding: 6px; 13 | border-radius: 3px; 14 | white-space: nowrap; 15 | 16 | &:hover { 17 | background-image: linear-gradient(rgba(0, 0, 0, 0.1) 0 0); 18 | } 19 | 20 | &:hover { 21 | color: ${({ theme }) => theme.INTERACTIVE_HOVER}; 22 | opacity: 1; 23 | box-shadow: none; 24 | } 25 | `; 26 | -------------------------------------------------------------------------------- /src/store/useJson.ts: -------------------------------------------------------------------------------- 1 | import { create } from "zustand"; 2 | import useGraph from "src/containers/Editor/components/views/GraphView/stores/useGraph"; 3 | 4 | interface JsonActions { 5 | setJson: (json: string) => void; 6 | getJson: () => string; 7 | clear: () => void; 8 | } 9 | 10 | const initialStates = { 11 | json: "", 12 | loading: true, 13 | }; 14 | 15 | export type JsonStates = typeof initialStates; 16 | 17 | const useJson = create()((set, get) => ({ 18 | ...initialStates, 19 | getJson: () => get().json, 20 | setJson: json => { 21 | set({ json, loading: false }); 22 | useGraph.getState().setGraph(json); 23 | }, 24 | clear: () => { 25 | set({ json: "", loading: false }); 26 | useGraph.getState().clearGraph(); 27 | }, 28 | })); 29 | 30 | export default useJson; 31 | -------------------------------------------------------------------------------- /src/layout/Layout.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Inter } from "next/font/google"; 3 | import styled, { ThemeProvider } from "styled-components"; 4 | import { lightTheme } from "src/constants/theme"; 5 | import { Footer } from "./Footer"; 6 | import { Navbar } from "./Navbar"; 7 | 8 | const inter = Inter({ 9 | subsets: ["latin-ext"], 10 | }); 11 | 12 | const StyledLayoutWrapper = styled.div` 13 | background: #fff; 14 | /* background-image: radial-gradient(#ededed 2px, #ffffff 2px); */ 15 | /* background-size: 40px 40px; */ 16 | font-family: ${inter.style.fontFamily}; 17 | `; 18 | 19 | const Layout = ({ children }: React.PropsWithChildren) => { 20 | return ( 21 | 22 | 23 | 24 | {children} 25 |