feat: enhance About and Contact pages with new content and layout updates
- Added GitHub and deployment information to the About page, including links and self-hosting instructions. - Updated the Contact page to emphasize transparency in the development process with improved text styling. - Removed outdated sections to streamline content presentation.
This commit is contained in:
@@ -1,4 +1,4 @@
|
|||||||
import { Outlet, Link } from "react-router-dom"
|
import { Outlet, Link, useLocation } from "react-router-dom"
|
||||||
import { useMemo } from "react"
|
import { useMemo } from "react"
|
||||||
import dayjs from "dayjs"
|
import dayjs from "dayjs"
|
||||||
|
|
||||||
|
|||||||
+41
-93
@@ -13,68 +13,47 @@ export default function About() {
|
|||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Content Sections */}
|
{/* GitHub & Deployment */}
|
||||||
<div className="grid grid-cols-1 gap-8 lg:grid-cols-2">
|
<div className="bg-white shadow rounded-lg p-6 border border-gray-100">
|
||||||
{/* Technology Stack */}
|
<h2 className="text-xl font-semibold text-gray-900 mb-4 flex items-center">
|
||||||
<div className="bg-white shadow rounded-lg p-6 border border-gray-100">
|
<span className="mr-2">📦</span> Open Source & Deployment
|
||||||
<h2 className="text-xl font-semibold text-gray-900 mb-4 flex items-center">
|
</h2>
|
||||||
<span className="mr-2">🛠️</span> Technology Stack
|
<div className="space-y-4 text-gray-700">
|
||||||
</h2>
|
<p>
|
||||||
<ul className="space-y-3">
|
This project is open source and available on GitHub. You can view the source code,
|
||||||
<li className="flex items-center">
|
contribute, or deploy your own instance.
|
||||||
<span className="w-2 h-2 bg-blue-500 rounded-full mr-3"></span>
|
</p>
|
||||||
<span className="text-gray-700">
|
<div className="flex items-center gap-3">
|
||||||
<strong>React 19 & TS</strong> - Type-safe UI components
|
<a
|
||||||
</span>
|
href="https://github.com/onixbyte/json-visualiser"
|
||||||
</li>
|
target="_blank"
|
||||||
<li className="flex items-center">
|
rel="noopener noreferrer"
|
||||||
<span className="w-2 h-2 bg-blue-500 rounded-full mr-3"></span>
|
className="inline-flex items-center gap-2 px-4 py-2 bg-gray-900 text-white rounded-lg hover:bg-gray-800 transition-colours font-medium">
|
||||||
<span className="text-gray-700">
|
<svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
|
||||||
<strong>jsonpath</strong> - Robust query engine for data extraction
|
<path
|
||||||
</span>
|
fillRule="evenodd"
|
||||||
</li>
|
d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"
|
||||||
<li className="flex items-center">
|
clipRule="evenodd"
|
||||||
<span className="w-2 h-2 bg-blue-500 rounded-full mr-3"></span>
|
/>
|
||||||
<span className="text-gray-700">
|
</svg>
|
||||||
<strong>Tailwind CSS</strong> - Modern, responsive styling
|
View on GitHub
|
||||||
</span>
|
</a>
|
||||||
</li>
|
</div>
|
||||||
<li className="flex items-center">
|
<div className="bg-amber-50 border border-amber-200 rounded-lg p-4">
|
||||||
<span className="w-2 h-2 bg-blue-500 rounded-full mr-3"></span>
|
<p className="text-amber-900">
|
||||||
<span className="text-gray-700">
|
<strong>⭐ Star us on GitHub:</strong> If you find this project helpful, we'd greatly
|
||||||
<strong>Vite</strong> - Optimised build pipeline and dev experience
|
appreciate it if you could give us a star on GitHub. It helps others discover the
|
||||||
</span>
|
project and motivates us to keep improving!
|
||||||
</li>
|
</p>
|
||||||
</ul>
|
</div>
|
||||||
</div>
|
<div className="bg-blue-50 border border-blue-100 rounded-lg p-4 mt-4">
|
||||||
|
<p className="text-blue-900">
|
||||||
{/* Features */}
|
<strong>💡 Self-Hosting:</strong> You can deploy this application yourself! The
|
||||||
<div className="bg-white shadow rounded-lg p-6 border border-gray-100">
|
repository includes all necessary configuration files. Simply clone the repository,
|
||||||
<h2 className="text-xl font-semibold text-gray-900 mb-4 flex items-center">
|
install dependencies, and deploy to your preferred hosting platform (Vercel, Netlify,
|
||||||
<span className="mr-2">🚀</span> Key Features
|
or any static hosting service).
|
||||||
</h2>
|
</p>
|
||||||
<ul className="space-y-3">
|
</div>
|
||||||
<li className="flex items-center">
|
|
||||||
<span className="w-2 h-2 bg-green-500 rounded-full mr-3"></span>
|
|
||||||
<span className="text-gray-700">
|
|
||||||
Interactive <strong>collapsible</strong> tree navigation
|
|
||||||
</span>
|
|
||||||
</li>
|
|
||||||
<li className="flex items-center">
|
|
||||||
<span className="w-2 h-2 bg-green-500 rounded-full mr-3"></span>
|
|
||||||
<span className="text-gray-700">
|
|
||||||
Real-time JSONPath field <strong>highlighting</strong>
|
|
||||||
</span>
|
|
||||||
</li>
|
|
||||||
<li className="flex items-center">
|
|
||||||
<span className="w-2 h-2 bg-green-500 rounded-full mr-3"></span>
|
|
||||||
<span className="text-gray-700">One-click copy for matched results</span>
|
|
||||||
</li>
|
|
||||||
<li className="flex items-center">
|
|
||||||
<span className="w-2 h-2 bg-green-500 rounded-full mr-3"></span>
|
|
||||||
<span className="text-gray-700">Zero-latency local processing</span>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -90,37 +69,6 @@ export default function About() {
|
|||||||
server, ensuring that sensitive configuration or user data remains entirely private.
|
server, ensuring that sensitive configuration or user data remains entirely private.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Architecture Overview */}
|
|
||||||
<div className="bg-white shadow rounded-lg p-6">
|
|
||||||
<h2 className="text-xl font-semibold text-gray-900 mb-4 flex items-center">
|
|
||||||
<span className="mr-2">🏗️</span> Architecture Overview
|
|
||||||
</h2>
|
|
||||||
<div className="prose max-w-none text-gray-700">
|
|
||||||
<p className="mb-4">
|
|
||||||
The application follows a modular React architecture focused on performance and
|
|
||||||
maintainability:
|
|
||||||
</p>
|
|
||||||
<ul className="list-disc list-inside space-y-2 mb-4">
|
|
||||||
<li>
|
|
||||||
<strong>Recursive Renderer:</strong> A high-performance component tree that handles
|
|
||||||
massive JSON objects without blocking the main thread.
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<strong>JSONPath Integration:</strong> Standardised path evaluation using the{" "}
|
|
||||||
<code>jsonpath</code> library, ensuring cross-platform query compatibility.
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<strong>State Management:</strong> Efficient use of React hooks and useMemo to ensure
|
|
||||||
real-time UI updates during text entry.
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
<p>
|
|
||||||
Hosted on Vercel, this visualiser leverages modern edge deployment whilst strictly
|
|
||||||
adhering to the local-first data processing principle.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -53,8 +53,8 @@ ${message}
|
|||||||
</h2>
|
</h2>
|
||||||
<p className="text-gray-600 leading-relaxed">
|
<p className="text-gray-600 leading-relaxed">
|
||||||
We use GitHub to track all bug reports and feature requests. This ensures our
|
We use GitHub to track all bug reports and feature requests. This ensures our
|
||||||
development process remains **transparent** and that your feedback is properly
|
development process remains <span className="font-bold">transparent</span> and that
|
||||||
prioritised by the community.
|
your feedback is properly prioritised by the community.
|
||||||
</p>
|
</p>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user