Skip to content

fix(website): comprehensive audit fixes for UX, accessibility, security, and correctness #440

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ajitpratap0 merged 2 commits into from
Mar 27, 2026
Merged

fix(website): comprehensive audit fixes for UX, accessibility, security, and correctness #440

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c231b7b
fix(website): comprehensive audit fixes for UX, accessibility, securi…
claude Mar 26, 2026
ccfc604
fix(website): add AbortController to GitHub API fetch and 404 meta de…
claude Mar 26, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 6 additions & 1 deletion website/next.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,11 @@ const withAnalyzer = withBundleAnalyzer({

const nextConfig: NextConfig = {
trailingSlash: true,
images: {
remotePatterns: [
{ protocol: 'https', hostname: 'img.shields.io' },
],
},
async headers() {
return [
{
Expand All @@ -24,7 +29,7 @@ const nextConfig: NextConfig = {
headers: [
{
key: 'Content-Security-Policy',
value: "default-src 'self'; script-src 'self' 'unsafe-inline' 'wasm-unsafe-eval'; style-src 'self' 'unsafe-inline'; font-src 'self'; img-src 'self' https://img.shields.io https://goreportcard.com https://*.shields.io data:; connect-src 'self' https://*.sentry.io https://vitals.vercel-insights.com; worker-src 'self' blob:; frame-ancestors 'none'; base-uri 'self'; form-action 'self'",
value: "default-src 'self'; script-src 'self' 'unsafe-inline' 'wasm-unsafe-eval' https://va.vercel-scripts.com; style-src 'self' 'unsafe-inline'; font-src 'self'; img-src 'self' https://img.shields.io https://goreportcard.com https://*.shields.io data:; connect-src 'self' https://*.sentry.io https://vitals.vercel-insights.com https://va.vercel-scripts.com; worker-src 'self' blob:; frame-ancestors 'none'; base-uri 'self'; form-action 'self'",
},
{
key: 'Strict-Transport-Security',
Expand Down
16 changes: 5 additions & 11 deletions website/src/app/benchmarks/BenchmarksContent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
'use client';

import Link from 'next/link';
import { FadeIn } from '@/components/ui/FadeIn';
import { GlassCard } from '@/components/ui/GlassCard';
import { Button } from '@/components/ui/Button';

const metrics = [
{ label: 'Sustained Ops/sec', value: '1.38M+' },
Expand Down Expand Up @@ -207,18 +207,12 @@ export function BenchmarksContent() {
<div className="text-center">
<p className="text-zinc-400 mb-4">Ready to use GoSQLX in your project?</p>
<div className="flex gap-3 justify-center">
<Link
href="/docs/getting-started/"
className="inline-flex items-center rounded-lg bg-indigo-600 px-5 py-2.5 text-sm font-medium text-white hover:bg-indigo-500 transition-colors"
>
<Button href="/docs/getting-started/" variant="primary">
Get Started
</Link>
<Link
href="/playground/"
className="inline-flex items-center rounded-lg border border-white/10 bg-white/5 px-5 py-2.5 text-sm font-medium text-zinc-300 hover:bg-white/10 hover:text-white transition-colors"
>
</Button>
<Button href="/playground/" variant="ghost">
Try Playground
</Link>
</Button>
</div>
</div>
</FadeIn>
Expand Down
4 changes: 2 additions & 2 deletions website/src/app/global-error.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,8 +14,8 @@ export default function GlobalError({
}, [error]);

return (
<html>
<body>
<html lang="en">
<body className="bg-[#09090b] text-white">
<NextError statusCode={0} />
</body>
</html>
Expand Down
5 changes: 3 additions & 2 deletions website/src/app/not-found.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,13 @@ import Link from 'next/link';

export const metadata: Metadata = {
title: '404 - Page Not Found',
description: 'The page you are looking for does not exist. Return to the GoSQLX homepage.',
robots: { index: false, follow: false },
};

export default function NotFound() {
return (
<main id="main-content" className="min-h-screen flex items-center justify-center">
<div className="min-h-screen flex items-center justify-center">
<div className="text-center">
<p className="text-sm font-semibold text-emerald-400 uppercase tracking-wider mb-4">404</p>
<h1 className="text-4xl font-bold tracking-tight text-white mb-4">
Expand All @@ -24,6 +25,6 @@ export default function NotFound() {
Back to Home
</Link>
</div>
</main>
</div>
);
}
4 changes: 2 additions & 2 deletions website/src/app/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import { CtaBanner } from '@/components/home/CtaBanner';

export default function Home() {
return (
<main>
<>
<Hero />
<StatsBar />
<FeatureGrid />
Expand All @@ -18,6 +18,6 @@ export default function Home() {
<VscodeSection />
<SocialProof />
<CtaBanner />
</main>
</>
);
}
8 changes: 4 additions & 4 deletions website/src/components/home/CodeExamples.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ const tabs: { label: string; lines: CodeLine[] }[] = [
lines: [
[{ text: 'package', cls: 'text-accent-indigo' }, { text: ' main', cls: 'text-white' }],
[],
[{ text: 'import', cls: 'text-accent-indigo' }, { text: ' ', cls: '' }, { text: '"github.com/gosqlx/gosqlx/pkg/gosqlx"', cls: 'text-accent-green' }],
[{ text: 'import', cls: 'text-accent-indigo' }, { text: ' ', cls: '' }, { text: '"github.com/ajitpratap0/GoSQLX/pkg/gosqlx"', cls: 'text-accent-green' }],
[],
[{ text: 'func', cls: 'text-accent-indigo' }, { text: ' main', cls: 'text-accent-orange' }, { text: '() {', cls: 'text-zinc-300' }],
[{ text: ' ', cls: '' }, { text: '// Parse SQL into an AST', cls: 'text-zinc-500' }],
Expand All @@ -31,7 +31,7 @@ const tabs: { label: string; lines: CodeLine[] }[] = [
lines: [
[{ text: 'package', cls: 'text-accent-indigo' }, { text: ' main', cls: 'text-white' }],
[],
[{ text: 'import', cls: 'text-accent-indigo' }, { text: ' ', cls: '' }, { text: '"github.com/gosqlx/gosqlx/pkg/gosqlx"', cls: 'text-accent-green' }],
[{ text: 'import', cls: 'text-accent-indigo' }, { text: ' ', cls: '' }, { text: '"github.com/ajitpratap0/GoSQLX/pkg/gosqlx"', cls: 'text-accent-green' }],
[],
[{ text: 'func', cls: 'text-accent-indigo' }, { text: ' main', cls: 'text-accent-orange' }, { text: '() {', cls: 'text-zinc-300' }],
[{ text: ' ', cls: '' }, { text: '// Format messy SQL', cls: 'text-zinc-500' }],
Expand All @@ -48,7 +48,7 @@ const tabs: { label: string; lines: CodeLine[] }[] = [
lines: [
[{ text: 'package', cls: 'text-accent-indigo' }, { text: ' main', cls: 'text-white' }],
[],
[{ text: 'import', cls: 'text-accent-indigo' }, { text: ' ', cls: '' }, { text: '"github.com/gosqlx/gosqlx/pkg/gosqlx"', cls: 'text-accent-green' }],
[{ text: 'import', cls: 'text-accent-indigo' }, { text: ' ', cls: '' }, { text: '"github.com/ajitpratap0/GoSQLX/pkg/gosqlx"', cls: 'text-accent-green' }],
[],
[{ text: 'func', cls: 'text-accent-indigo' }, { text: ' main', cls: 'text-accent-orange' }, { text: '() {', cls: 'text-zinc-300' }],
[{ text: ' ', cls: '' }, { text: '// Validate SQL syntax', cls: 'text-zinc-500' }],
Expand All @@ -64,7 +64,7 @@ const tabs: { label: string; lines: CodeLine[] }[] = [
lines: [
[{ text: 'package', cls: 'text-accent-indigo' }, { text: ' main', cls: 'text-white' }],
[],
[{ text: 'import', cls: 'text-accent-indigo' }, { text: ' ', cls: '' }, { text: '"github.com/gosqlx/gosqlx/pkg/gosqlx"', cls: 'text-accent-green' }],
[{ text: 'import', cls: 'text-accent-indigo' }, { text: ' ', cls: '' }, { text: '"github.com/ajitpratap0/GoSQLX/pkg/gosqlx"', cls: 'text-accent-green' }],
[],
[{ text: 'func', cls: 'text-accent-indigo' }, { text: ' main', cls: 'text-accent-orange' }, { text: '() {', cls: 'text-zinc-300' }],
[{ text: ' ', cls: '' }, { text: '// Lint SQL for best practices', cls: 'text-zinc-500' }],
Expand Down
4 changes: 3 additions & 1 deletion website/src/components/home/Hero.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,10 +12,12 @@ function GitHubStarButton() {
const [stars, setStars] = useState<number | null>(null);

useEffect(() => {
fetch('https://api.github.com/repos/ajitpratap0/GoSQLX')
const controller = new AbortController();
fetch('https://api.github.com/repos/ajitpratap0/GoSQLX', { signal: controller.signal })
.then((r) => r.json())
.then((d) => { if (typeof d.stargazers_count === 'number') setStars(d.stargazers_count); })
.catch(() => {});
return () => controller.abort();
}, []);

return (
Expand Down
6 changes: 4 additions & 2 deletions website/src/components/home/SocialProof.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
'use client';

import Image from 'next/image';
import { FadeIn } from '@/components/ui/FadeIn';

const badges = [
Expand Down Expand Up @@ -36,14 +37,15 @@ export function SocialProof() {
<FadeIn>
<div className="flex flex-wrap items-center justify-center gap-4">
{badges.map((badge) => (
<img
<Image
key={badge.alt}
src={badge.src}
alt={badge.alt}
width={badge.width}
height={badge.height}
className="h-5"
className="h-5 w-auto"
loading="lazy"
unoptimized
/>
))}
</div>
Expand Down
2 changes: 1 addition & 1 deletion website/src/components/home/StatsBar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ const stats = [
{ value: 1380000, suffix: '+', label: 'ops/sec', color: 'text-accent-orange' },
{ value: 1, suffix: 'μs', label: 'latency', color: 'text-accent-indigo', prefix: '<' },
{ value: 85, suffix: '%', label: 'SQL-99', color: 'text-accent-green' },
{ value: 7, suffix: '', label: 'Dialects', color: 'text-accent-purple' },
{ value: 8, suffix: '', label: 'Dialects', color: 'text-accent-purple' },
];

export function StatsBar() {
Expand Down
6 changes: 4 additions & 2 deletions website/src/components/layout/Navbar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,8 @@ export function Navbar() {
const { scrollY } = useScroll();
const bgOpacity = useTransform(scrollY, [0, 100], [0.6, 0.9]);
const blurAmount = useTransform(scrollY, [0, 100], [8, 16]);
const bgColor = useTransform(bgOpacity, (v) => `rgba(9, 9, 11, ${v})`);
const blur = useTransform(blurAmount, (v) => `blur(${v}px)`);

// Close mobile menu on resize
useEffect(() => {
Expand All @@ -55,8 +57,8 @@ export function Navbar() {
<motion.header
className="fixed top-0 left-0 right-0 z-50 border-b border-white/[0.06]"
style={{
backgroundColor: useTransform(bgOpacity, (v) => `rgba(9, 9, 11, ${v})`),
backdropFilter: useTransform(blurAmount, (v) => `blur(${v}px)`),
backgroundColor: bgColor,
backdropFilter: blur,
}}
>
<nav aria-label="Main navigation" className="mx-auto max-w-7xl flex items-center justify-between px-4 sm:px-6 lg:px-8 h-16">
Expand Down
4 changes: 2 additions & 2 deletions website/src/components/playground/AnalyzeTab.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -81,7 +81,7 @@ export default function AnalyzeTab({ data }: AnalyzeTabProps) {
<div className="p-4">
<div className="bg-red-500/10 border border-red-500/30 rounded-lg p-4">
<div className="flex items-center gap-2 text-red-400 font-medium mb-1">
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
Analysis Error
Expand Down Expand Up @@ -153,7 +153,7 @@ export default function AnalyzeTab({ data }: AnalyzeTabProps) {
key={i}
className="flex items-start gap-2 bg-slate-800/50 border border-slate-700 rounded-lg p-3"
>
<svg className="w-4 h-4 text-blue-400 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<svg className="w-4 h-4 text-blue-400 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
</svg>
<span className="text-sm text-slate-300">{text}</span>
Expand Down
4 changes: 2 additions & 2 deletions website/src/components/playground/LintTab.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -81,7 +81,7 @@ export default function LintTab({ data }: LintTabProps) {
<div className="p-4">
<div className="bg-red-500/10 border border-red-500/30 rounded-lg p-4">
<div className="flex items-center gap-2 text-red-400 font-medium mb-1">
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
Lint Error
Expand Down Expand Up @@ -156,7 +156,7 @@ export default function LintTab({ data }: LintTabProps) {
</p>
{(v.suggestion || v.fix || v.hint) && (
<p className="text-xs text-blue-400 flex items-center gap-1">
<svg className="w-3 h-3 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<svg className="w-3 h-3 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
{v.suggestion || v.fix || v.hint}
Expand Down
7 changes: 4 additions & 3 deletions website/src/components/playground/WasmLoader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -196,10 +196,11 @@ export function useWasm(): UseWasmResult {
.catch((err) => {
setError(err instanceof Error ? err : new Error(String(err)));
setLoading(false);
})
.finally(() => {
progressListeners = progressListeners.filter((l) => l !== setProgress);
});

return () => {
progressListeners = progressListeners.filter((l) => l !== setProgress);
};
}, []);

return { loading, ready, error, api, progress };
Expand Down
Loading