Skip to content

Commit a549ee0

Browse files
hammayohammayo
authored
Merge pull request #6 from hammayo/develop
Fixed scripts issues. Also tweaked 404 page.
2 parents 1636170 + d94c30a commit a549ee0

File tree

4 files changed

+115
-78
lines changed

4 files changed

+115
-78
lines changed

‎src/app/layout.tsx‎

Lines changed: 16 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,8 @@ import { SITE, THEME } from "@/lib/constants";
99
import { RouteProgress } from "@/components/route-progress";
1010
import { Footer } from "@/components/footer";
1111
import { ErrorBoundary } from "@/components/error-boundary";
12-
import Script from "next/script";
13-
import { env } from "@/lib/env";
12+
import { Analytics } from "@/components/analytics";
13+
import Script from 'next/script'
1414

1515
const jetbrainsMono = JetBrains_Mono({
1616
subsets: ["latin"],
@@ -75,26 +75,19 @@ export default function RootLayout({
7575
}>) {
7676
return (
7777
<html lang="en" suppressHydrationWarning>
78-
<head>
79-
{env.GA_MEASUREMENT_ID && (
80-
<>
81-
<Script
82-
src={`https://www.googletagmanager.com/gtag/js?id=${env.GA_MEASUREMENT_ID}`}
83-
strategy="afterInteractive"
84-
/>
85-
<Script id="google-analytics" strategy="afterInteractive">
86-
{`
87-
window.dataLayer = window.dataLayer || [];
88-
function gtag(){dataLayer.push(arguments);}
89-
gtag('js', new Date());
90-
gtag('config', '${env.GA_MEASUREMENT_ID}', {
91-
page_path: window.location.pathname,
92-
});
93-
`}
94-
</Script>
95-
</>
96-
)}
97-
</head>
78+
<Script
79+
src={`https://www.googletagmanager.com/gtag/js?id=${process.env.GA_MEASUREMENT_ID}`}
80+
strategy="afterInteractive"
81+
/>
82+
<Script id="google-analytics" strategy="afterInteractive">
83+
{`
84+
window.dataLayer = window.dataLayer || [];
85+
function gtag(){dataLayer.push(arguments);}
86+
gtag('js', new Date());
87+
88+
gtag('config', '${process.env.GA_MEASUREMENT_ID}');
89+
`}
90+
</Script>
9891
<body className={`${jetbrainsMono.variable} font-mono antialiased`}>
9992
<ThemeProvider attribute="class" defaultTheme={THEME.defaultTheme} enableSystem disableTransitionOnChange>
10093
<ErrorBoundary>
@@ -109,6 +102,7 @@ export default function RootLayout({
109102
</div>
110103
</ErrorBoundary>
111104
</ThemeProvider>
105+
<Analytics />
112106
</body>
113107
</html>
114108
);

‎src/app/not-found.tsx‎

Lines changed: 35 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,62 +1,53 @@
11
"use client";
22

33
import { Container } from "@/components/container";
4-
import Link from "next/link";
5-
import { PageTransitionWrapper } from "@/components/page-transition-wrapper";
64
import { Suspense } from "react";
5+
import Link from "next/link";
76

8-
// Separate the content into a client component
9-
const NotFoundContent = () => {
7+
function NotFoundContent() {
108
return (
119
<Container className="flex flex-col items-center justify-center text-center min-h-[calc(100vh-144px)]">
1210
<div className="mb-8 relative">
13-
<div className="text-9xl font-bold opacity-10 absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-transparent bg-clip-text bg-gradient-to-r from-purple-800 via-cyan-800 to-green-800 select-none" style={{ fontSize: "240px" }}>
11+
<div
12+
className="text-9xl font-bold opacity-10 absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-transparent bg-clip-text bg-gradient-to-r from-purple-800 via-cyan-800 to-green-800 select-none"
13+
style={{ fontSize: "240px" }}
14+
>
1415
404
1516
</div>
16-
17-
<div className="mb-12 relative z-10">
18-
<h1 className="text-4xl font-bold mb-4 bg-clip-text text-transparent bg-gradient-to-r from-purple-500 via-cyan-500 to-green-500 tracking-tight opacity-100 transition-none pointer-events-auto">
19-
Page Not Found
20-
</h1>
21-
<p className="text-muted-foreground tracking-tight opacity-100 transition-none pointer-events-auto">
22-
Sorry, the page you're looking for doesn't exist or has been moved.
23-
</p>
24-
</div>
25-
</div>
26-
27-
<div className="relative mx-auto max-w-2xl p-6 rounded-2xl backdrop-blur-lg border dark:border-zinc-800/30 border-zinc-200/30 dark:bg-black/10 bg-white/10 group hover:shadow-lg hover:shadow-purple-500/10 transition-all duration-500 mb-10">
28-
<div className="absolute inset-0 bg-gradient-to-br opacity-0 from-purple-500/10 via-cyan-500/5 transition-opacity duration-700 group-hover:opacity-100 rounded-2xl -z-10" />
29-
30-
<p className="text-lg text-muted-foreground leading-relaxed tracking-tight mb-6">
31-
It seems like you've ventured into uncharted territory. Don't worry, you can easily navigate back to explore my portfolio.
32-
</p>
33-
34-
<div className="flex flex-col sm:flex-row gap-4 justify-center">
35-
<Link
36-
href="/"
37-
className="px-6 py-3 text-sm font-medium text-white rounded-md bg-gradient-to-r from-purple-500 via-cyan-500 to-green-500 hover:from-purple-600 hover:via-cyan-600 hover:to-green-600 transition-all duration-300 hover:shadow-lg hover:shadow-purple-500/20 tracking-tight"
38-
>
39-
Return Home
40-
</Link>
41-
<Link
42-
href="/contact"
43-
className="px-6 py-3 text-sm font-medium text-white rounded-md bg-gradient-to-r from-purple-500 via-cyan-400 to-green-400 hover:from-purple-600 hover:via-cyan-600 hover:to-green-600 transition-all duration-300 backdrop-blur-md tracking-tight hover:shadow-lg hover:shadow-purple-500/20 tracking-tight"
44-
>
45-
Contact Me
46-
</Link>
17+
<div>
18+
<h2 className="text-4xl font-bold mb-4 bg-clip-text text-transparent bg-gradient-to-r from-purple-500 via-cyan-500 to-green-500 tracking-tight">
19+
Captain&apos;s Log, Supplement - Stardate 40400.0
20+
</h2>
21+
<div className="space-y-6">
22+
<p className="text-lg text-muted-foreground leading-relaxed tracking-tight">
23+
Alert: You&apos;ve entered an uncharted sector of the codebase.
24+
</p>
25+
<p className="text-lg text-muted-foreground leading-relaxed tracking-tight">
26+
Sensors indicate this spatial anomaly corresponds to a 404 Error — no quantum signature detected.
27+
</p>
28+
<p className="text-lg text-muted-foreground leading-relaxed tracking-tight">
29+
Starfleet Command is standing by to assist.
30+
</p>
31+
</div>
32+
<div className="mt-8 flex flex-col sm:flex-row gap-4 justify-center">
33+
<Link
34+
href="/"
35+
replace
36+
className="px-6 py-3 text-sm font-medium text-white rounded-md bg-gradient-to-r from-purple-500 via-cyan-500 to-green-500 hover:from-purple-600 hover:via-cyan-600 hover:to-green-600 transition-all duration-300 hover:shadow-lg hover:shadow-purple-500/20 tracking-tight z-50 relative"
37+
>
38+
Return to Main Bridge
39+
</Link>
40+
</div>
4741
</div>
4842
</div>
4943
</Container>
5044
);
51-
};
45+
}
5246

53-
// Main component with Suspense wrapper
54-
export default function NotFoundPage() {
47+
export default function NotFound() {
5548
return (
56-
<PageTransitionWrapper>
57-
<Suspense fallback={null}>
58-
<NotFoundContent />
59-
</Suspense>
60-
</PageTransitionWrapper>
49+
<Suspense fallback={<div className="min-h-screen flex items-center justify-center">Loading...</div>}>
50+
<NotFoundContent />
51+
</Suspense>
6152
);
6253
}

‎src/components/analytics-event.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,9 @@ export function PageViewEvent({ page }: PageViewEventProps) {
1313
action: 'page_view',
1414
category: 'navigation',
1515
label: page,
16+
page_title: page,
17+
page_location: window.location.href,
18+
page_path: window.location.pathname,
1619
});
1720
}, [page]);
1821

‎src/components/analytics.tsx‎

Lines changed: 61 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,74 @@
11
'use client';
22

3+
import { usePathname, useSearchParams } from 'next/navigation';
4+
import Script from 'next/script';
5+
import { Suspense, useEffect } from 'react';
36
import { env } from '@/lib/env';
4-
import { logger } from '@/lib/logger';
57

6-
// Analytics event types
7-
type AnalyticsEvent = {
8+
// Analytics event interface
9+
interface AnalyticsEvent {
810
action: string;
9-
category: string;
11+
category?: string;
1012
label?: string;
1113
value?: number;
12-
};
14+
[key: string]: any;
15+
}
1316

14-
// Send a custom event to Google Analytics
15-
export const sendAnalyticsEvent = ({ action, category, label, value }: AnalyticsEvent) => {
16-
if (typeof window !== 'undefined' && typeof window.gtag !== 'undefined' && env.GA_MEASUREMENT_ID) {
17+
// Analytics utility function
18+
export function sendAnalyticsEvent({ action, category, label, value, ...rest }: AnalyticsEvent) {
19+
if (env.GA_MEASUREMENT_ID && window.gtag) {
1720
window.gtag('event', action, {
1821
event_category: category,
1922
event_label: label,
20-
value: value,
21-
send_to: env.GA_MEASUREMENT_ID,
23+
value,
24+
...rest,
2225
});
23-
logger.debug(`📊 Event sent: ${action} - ${category}${label ? ` - ${label}` : ''}`);
2426
}
25-
};
27+
}
28+
29+
function AnalyticsTracking() {
30+
const pathname = usePathname();
31+
const searchParams = useSearchParams();
32+
33+
useEffect(() => {
34+
if (!env.GA_MEASUREMENT_ID || !window.gtag || !pathname) return;
35+
36+
const search = searchParams?.toString();
37+
const fullPath = search ? `${pathname}?${search}` : pathname;
38+
39+
window.gtag('config', env.GA_MEASUREMENT_ID, {
40+
page_path: fullPath,
41+
});
42+
}, [pathname, searchParams]);
43+
44+
return null;
45+
}
46+
47+
export function Analytics() {
48+
if (!env.GA_MEASUREMENT_ID) {
49+
return null;
50+
}
51+
52+
return (
53+
<>
54+
<Script
55+
src={`https://www.googletagmanager.com/gtag/js?id=${env.GA_MEASUREMENT_ID}`}
56+
strategy="afterInteractive"
57+
/>
58+
<Script id="google-analytics" strategy="afterInteractive">
59+
{`
60+
window.dataLayer = window.dataLayer || [];
61+
function gtag(){window.dataLayer.push(arguments);}
62+
gtag('js', new Date());
63+
gtag('config', '${env.GA_MEASUREMENT_ID}', {
64+
page_path: window.location.pathname,
65+
send_page_view: true
66+
});
67+
`}
68+
</Script>
69+
<Suspense fallback={null}>
70+
<AnalyticsTracking />
71+
</Suspense>
72+
</>
73+
);
74+
}

0 commit comments

Comments
 (0)