soconnor/personal-website
1
0
Fork 0
mirror of https://github.com/soconnor0919/personal-website.git synced 2025-12-15 08:14:43 -05:00
Code Issues Packages Projects Releases Wiki Activity

Refactor layout and navigation components; remove theme toggler

Browse Source 
- Updated layout.tsx to remove the ThemeProvider and directly include Analytics, SpeedInsights, and Navigation components.
- Removed ThemeToggler component from Navigation.
- Adjusted global CSS to use media queries for dark theme styles instead of data attributes.
- Cleaned up package.json by removing the next-themes dependency.
This commit is contained in:
Sean O'Connor
2024-12-24 01:34:32 -05:00
parent 40e3ff220c
commit 8a13b5a166
8 changed files with 3263 additions and 1675 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
next-env.d.ts vendored
View File

@@ -2,4 +2,4 @@
/// <reference types="next/image-types/global" /> /// <reference types="next/image-types/global" />
// NOTE: This file should not be edited // NOTE: This file should not be edited
// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information. // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

1
package.json
View File

@@ -33,7 +33,6 @@
"geist": "^1.3.1", "geist": "^1.3.1",
"lucide-react": "^0.454.0", "lucide-react": "^0.454.0",
"next": "^15.0.2", "next": "^15.0.2",
"next-themes": "^0.3.0",
"pdfjs-dist": "^4.9.155", "pdfjs-dist": "^4.9.155",
"radix-ui": "^1.0.1", "radix-ui": "^1.0.1",
"react": "^18.3.1", "react": "^18.3.1",

3091
pnpm-lock.yaml generated
View File

File diff suppressed because it is too large Load Diff

1725
public/stats.html Normal file
View File

File diff suppressed because one or more lines are too long

40
src/app/layout.tsx
View File

@@ -1,6 +1,5 @@
import { Analytics } from "@vercel/analytics/react" import { Analytics } from "@vercel/analytics/react"
import { SpeedInsights } from "@vercel/speed-insights/next" import { SpeedInsights } from "@vercel/speed-insights/next"
import { ThemeProvider } from "next-themes"
import { Footer } from "~/components/Footer" import { Footer } from "~/components/Footer"
import { Navigation } from "~/components/Navigation" import { Navigation } from "~/components/Navigation"
import { Sidebar } from "~/components/Sidebar" import { Sidebar } from "~/components/Sidebar"
@@ -18,30 +17,23 @@ export default function RootLayout({ children }: React.PropsWithChildren) {
return ( return (
<html lang="en" className={inter.className} suppressHydrationWarning> <html lang="en" className={inter.className} suppressHydrationWarning>
<body className="font-sans bg-background text-foreground min-h-screen flex flex-col" suppressHydrationWarning> <body className="font-sans bg-background text-foreground min-h-screen flex flex-col" suppressHydrationWarning>
<ThemeProvider <Analytics />
attribute="data-theme" <SpeedInsights />
defaultTheme="system" <Navigation />
enableSystem <div className="flex-1">
disableTransitionOnChange <div className="max-w-screen-xl mx-auto px-4 sm:px-6 lg:px-8">
> <div className="flex flex-col lg:flex-row lg:gap-12">
<Analytics /> <aside className="lg:sticky lg:top-16 lg:h-[calc(100vh-4rem)] overflow-y-auto">
<SpeedInsights /> <Sidebar />
<Navigation /> </aside>
<div className="flex-1"> <main className="flex-1 overflow-y-auto py-8">
<div className="max-w-screen-xl mx-auto px-4 sm:px-6 lg:px-8"> {children}
<div className="flex flex-col lg:flex-row lg:gap-12"> </main>
<aside className="lg:sticky lg:top-16 lg:h-[calc(100vh-4rem)] overflow-y-auto">
<Sidebar />
</aside>
<main className="flex-1 overflow-y-auto py-8">
{children}
</main>
</div>
</div> </div>
</div> </div>
<Footer /> </div>
</ThemeProvider> <Footer />
</body> </body>
</html> </html >
) )
} }

2
src/components/Navigation.tsx
View File

@@ -4,7 +4,6 @@ import { BookOpenText, FileText, FolderGit2, Home, Menu, Newspaper, Plane, X } f
import { usePathname } from 'next/navigation'; import { usePathname } from 'next/navigation';
import Link from 'next/link'; import Link from 'next/link';
import { useEffect, useState } from 'react'; import { useEffect, useState } from 'react';
import { ThemeToggler } from '~/components/ThemeToggler';
const navItems = [ const navItems = [
{ href: '/', label: 'About', icon: Home }, { href: '/', label: 'About', icon: Home },
@@ -45,7 +44,6 @@ export function Navigation() {
); );
})} })}
</div> </div>
<ThemeToggler />
<button <button
onClick={() => setIsOpen(!isOpen)} onClick={() => setIsOpen(!isOpen)}
className="text-gray-500 hover:text-primary focus:outline-none relative h-6 w-6 lg:hidden" className="text-gray-500 hover:text-primary focus:outline-none relative h-6 w-6 lg:hidden"

31
src/components/ThemeToggler.tsx
View File

@@ -1,31 +0,0 @@
'use client';
import { Sun, Moon, SunMoon } from 'lucide-react';
import { useTheme } from 'next-themes';
import { useEffect, useState } from 'react';
export function ThemeToggler() {
const { theme, setTheme } = useTheme();
const [mounted, setMounted] = useState(false);
// Only show theme switcher after mounting to prevent hydration mismatch
useEffect(() => {
setMounted(true);
}, []);
// Determine the icon to display based on the current theme
const themeIcon = mounted ? (theme === 'dark' ? <Sun size={20} /> : <Moon size={20} />) : <SunMoon size={20} />;
return (
<button
onClick={() => {
const newTheme = theme === 'dark' ? 'light' : 'dark';
setTheme(newTheme);
}}
className="text-sm font-medium text-muted-foreground hover:text-primary flex items-center"
aria-label="Toggle theme"
>
{themeIcon}
</button>
);
}

46
src/styles/globals.css
View File

@@ -28,28 +28,30 @@
--shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06); --shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
} }
[data-theme='dark'] { @media (prefers-color-scheme: dark) {
--background: 0 0% 10%; :root {
--foreground: 0 0% 90%; --background: 0 0% 10%;
--card: 0 0% 12%; --foreground: 0 0% 90%;
--card-foreground: 0 0% 90%; --card: 0 0% 12%;
--popover: 0 0% 20%; --card-foreground: 0 0% 90%;
--popover-foreground: 0 0% 90%; --popover: 0 0% 20%;
--primary: 0 0% 90%; --popover-foreground: 0 0% 90%;
--primary-foreground: 0 0% 10%; --primary: 0 0% 90%;
--secondary: 0 0% 30%; --primary-foreground: 0 0% 10%;
--secondary-foreground: 0 0% 90%; --secondary: 0 0% 30%;
--muted: 0 0% 30%; --secondary-foreground: 0 0% 90%;
--muted-foreground: 0 0% 70%; --muted: 0 0% 30%;
--accent: 0 0% 30%; --muted-foreground: 0 0% 70%;
--accent-foreground: 0 0% 90%; --accent: 0 0% 30%;
--destructive: 0 84% 60%; --accent-foreground: 0 0% 90%;
--destructive-foreground: 0 0% 10%; --destructive: 0 84% 60%;
--border: 0 0% 20%; --destructive-foreground: 0 0% 10%;
--input: 0 0% 20%; --border: 0 0% 20%;
--ring: 0 0% 90%; --input: 0 0% 20%;
--radius: 0.5rem; --ring: 0 0% 90%;
--shadow: 0 1px 3px rgba(255, 255, 255, 0.1), 0 1px 2px rgba(255, 255, 255, 0.06); --radius: 0.5rem;
--shadow: 0 1px 3px rgba(255, 255, 255, 0.1), 0 1px 2px rgba(255, 255, 255, 0.06);
}
} }
} }