diff --git a/src/page/about/index.tsx b/src/page/about/index.tsx index 6cf33d9..734ac78 100644 --- a/src/page/about/index.tsx +++ b/src/page/about/index.tsx @@ -1,110 +1,126 @@ /** - * About page component that displays information about the application. + * About page component that displays information about the JSON Visualiser application. */ export default function About() { return ( -
+
{/* Page Header */}
-

- About This Template -

+

About JSON Visualiser

- Learn more about the technologies and architecture behind this React Router template. + A powerful, privacy-focused tool for debugging and visualising complex JSON data + structures.

{/* Content Sections */}
{/* Technology Stack */} -
-

- Technology Stack +
+

+ 🛠️ Technology Stack

  • - React 19 - Latest version with modern features + + React 19 & TS - Type-safe UI components +
  • - TypeScript - Type-safe development + + jsonpath - Robust query engine for data extraction +
  • - React Router v7 - Client-side routing + + Tailwind CSS - Modern, responsive styling +
  • - Tailwind CSS - Utility-first styling -
    • -
  • - - Redux Toolkit - State management -
    • -
  • - - Vite - Fast build tool and dev server + + Vite - Optimised build pipeline and dev experience +
{/* Features */} -
-

- Key Features +
+

+ 🚀 Key Features

  • - Modern React Router implementation + + Interactive collapsible tree navigation +
  • - Protected routes with authentication + + Real-time JSONPath field highlighting +
  • - Error boundary and error pages + One-click copy for matched results
  • - Responsive design with Tailwind -
    • -
  • - - TypeScript for type safety -
    • -
  • - - ESLint and Prettier configuration + Zero-latency local processing

+ {/* Privacy Commitment */} +
+

+ 🔒 Privacy & Data Security +

+

+ We believe that your data belongs to you. This application is designed as a{" "} + purely client-side tool. All JSON parsing, path evaluation, and visual + rendering are performed locally within your browser. No data is ever uploaded to any + server, ensuring that sensitive configuration or user data remains entirely private. +

+
+ {/* Architecture Overview */}
-

- Architecture Overview +

+ 🏗️ Architecture Overview

- This template follows modern React development practices with a clear separation of concerns: + The application follows a modular React architecture focused on performance and + maintainability:

    -
  • Components: Reusable UI components organised by feature
    • -
  • Pages: Route-level components that represent different views
    • -
  • Layouts: Wrapper components that provide consistent structure
    • -
  • Store: Redux Toolkit slices for state management
    • -
  • Router: Centralised routing configuration
    • +
  • + Recursive Renderer: A high-performance component tree that handles + massive JSON objects without blocking the main thread. +
    • +
  • + JSONPath Integration: Standardised path evaluation using the{" "} + jsonpath library, ensuring cross-platform query compatibility. +
    • +
  • + State Management: Efficient use of React hooks and useMemo to ensure + real-time UI updates during text entry. +

- The routing system uses React Router's latest data router approach with createBrowserRouter, - providing better performance and developer experience compared to the legacy BrowserRouter approach. + Hosted on Vercel, this visualiser leverages modern edge deployment whilst strictly + adhering to the local-first data processing principle.

) -} \ No newline at end of file +} diff --git a/src/page/contact/index.tsx b/src/page/contact/index.tsx index 747e3fa..62f4239 100644 --- a/src/page/contact/index.tsx +++ b/src/page/contact/index.tsx @@ -1,130 +1,92 @@ import React from "react" /** - * Contact page component that displays contact information and a contact form. + * Contact page component that encourages manual GitHub Issue submission. */ export default function Contact() { - const handleSubmit = (e: React.FormEvent) => { + const owner = "onixbyte" + const repo = "json-visualiser" + + const handleRedirect = (e: React.FormEvent) => { e.preventDefault() - // Handle form submission logic here - alert("Thank you for your message! This is a demo form.") + const formData = new FormData(e.currentTarget) + + const subject = formData.get("subject") as string + const name = formData.get("name") as string + const email = formData.get("email") as string + const message = formData.get("message") as string + const type = formData.get("type") as string + + // Construct a professional body template for the GitHub issue + const issueBody = ` +### Description +${message} + +--- +*Generated via JSON Visualiser Contact Page* + `.trim() + + const githubUrl = `https://github.com/${owner}/${repo}/issues/new?title=${encodeURIComponent( + `[${type == "help wanted" ? "General Enquiry" : (type == "enhancement" ? "Feature request" : "Bug")}] ${subject}` + )}&body=${encodeURIComponent(issueBody)}&labels=${type}` + + // Open in a new tab so they don't lose their place on your site + window.open(githubUrl, "_blank", "noopener,noreferrer") } return ( -
- {/* Page Header */} -
-

- Get in Touch -

+
+ {/* Header */} +
+

Get in Touch

- Have questions about this template? We'd love to hear from you. + The best way to reach us is via our GitHub repository.

-
- {/* Contact Information */} -
-

- Contact Information -

- -
- {/* Email */} -
-
- - - -
-
-

Email

-

zihlu.wang@outlook.com

-
-
+
+ {/* Left Side: Information */} +
+
+

+ 🤝 Why GitHub Issues? +

+

+ We use GitHub to track all bug reports and feature requests. This ensures our + development process remains **transparent** and that your feedback is properly + prioritised by the community. +

+
- {/* GitHub */} -
-
- - - -
-
-

GitHub

-

github.com/onixbyte/react-template

-
-
+
+

How it works:

+
    +
  1. Fill in the enquiry details in the form provided.
    2. +
  2. + Click "Prepare GitHub Issue". +
    3. +
  3. You will be redirected to GitHub with the data pre-filled.
    4. +
  4. + Simply hit "Submit new issue" on their site. +
    5. +
+
- {/* Documentation */} -
-
- - - -
-
-

Documentation

-

Check the README.md file

-
-
-
- - {/* Quick Links */} - - {/* Contact Form */} -
-

- Send us a Message -

- -
- {/* Name */} -
- - -
- - {/* Email */} -
- - -
- - {/* Subject */} + {/* Right Side: Form */} +
+
- {/* Message */} +
+ +
+ + +
+ + + +
+
+

+ Selecting a type helps us categorise and prioritise your issue. +

+
+