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

Fix navbar hydration error/layout shift

Browse Source
This commit is contained in:
Sean O'Connor
2024-10-28 22:24:54 -07:00
parent 40b93fe822
commit fcc9c21fcc
4 changed files with 135 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

120
src/app/projects/page.tsx
View File

@@ -1,11 +1,21 @@
'use client';
import { useEffect, useState } from "react";
import { Card, CardHeader, CardTitle, CardDescription, CardContent } from "~/components/ui/card"; import { Card, CardHeader, CardTitle, CardDescription, CardContent } from "~/components/ui/card";
import { Badge } from "~/components/ui/badge"; import { Badge } from "~/components/ui/badge";
import Link from "next/link"; import Link from "next/link";
import { ArrowUpRight, Sparkles } from "lucide-react"; import { ArrowUpRight } from "lucide-react";
import { projects } from "~/lib/data"; import { projects } from "~/lib/data";
import Image from "next/image"; import Image from "next/image";
import { CardSkeleton } from "~/components/ui/skeletons";
export default function ProjectsPage() { export default function ProjectsPage() {
const [loading, setLoading] = useState(true);
useEffect(() => {
setLoading(false);
}, []);
return ( return (
<div className="space-y-8"> <div className="space-y-8">
<section className="prose prose-zinc dark:prose-invert max-w-none"> <section className="prose prose-zinc dark:prose-invert max-w-none">
@@ -17,57 +27,65 @@ export default function ProjectsPage() {
</section> </section>
<div className="space-y-6"> <div className="space-y-6">
{projects.map((project, index) => ( {loading ? (
<Card key={index}> <>
<div className="flex flex-col lg:flex-row"> <CardSkeleton />
<div className="flex-1"> <CardSkeleton />
<CardHeader className="pb-2"> <CardSkeleton />
<div className="flex items-center justify-between"> </>
<CardTitle>{project.title}</CardTitle> ) : (
{project.link && ( projects.map((project, index) => (
<Link <Card key={index}>
href={project.link} <div className="flex flex-col lg:flex-row">
target="_blank" <div className="flex-1">
rel="noopener noreferrer" <CardHeader className="pb-2">
className="text-muted-foreground hover:text-primary" <div className="flex items-center justify-between">
> <CardTitle>{project.title}</CardTitle>
<ArrowUpRight className="h-5 w-5" /> {project.link && (
</Link> <Link
)} href={project.link}
</div> target="_blank"
<CardDescription className="text-base">{project.description}</CardDescription> rel="noopener noreferrer"
</CardHeader> className="text-muted-foreground hover:text-primary"
<CardContent className="pt-0"> >
<p className="text-sm text-muted-foreground"> <ArrowUpRight className="h-5 w-5" />
{project.longDescription} </Link>
</p> )}
<div className="flex flex-wrap gap-2 mt-4"> </div>
{project.tags.map((tag) => ( <CardDescription className="text-base">{project.description}</CardDescription>
<Badge key={tag} variant="secondary"> </CardHeader>
{tag} <CardContent className="pt-0">
</Badge> <p className="text-sm text-muted-foreground">
))} {project.longDescription}
</div> </p>
</CardContent> <div className="flex flex-wrap gap-2 mt-4">
</div> {project.tags.map((tag) => (
<Badge key={tag} variant="secondary">
{project.image && ( {tag}
<div className="px-6 pb-6 lg:py-6 lg:w-1/3 md:px-24 lg:px-6"> </Badge>
<div className="relative aspect-[4/3] w-full overflow-hidden"> ))}
<Image </div>
src={project.image} </CardContent>
alt={project.title}
width={400}
height={300}
className="object-contain w-full h-full"
priority={index === 0}
/>
</div>
</div> </div>
)}
</div> {project.image && (
</Card> <div className="px-6 pb-6 lg:py-6 lg:w-1/3 md:px-24 lg:px-6">
))} <div className="relative aspect-[4/3] w-full overflow-hidden">
<Image
src={project.image}
alt={project.title}
width={400}
height={300}
className="object-contain w-full h-full"
priority={index === 0}
/>
</div>
</div>
)}
</div>
</Card>
))
)}
</div> </div>
</div> </div>
); );

15
src/app/publications/page.tsx
View File

@@ -6,6 +6,7 @@ import { useEffect, useState } from "react";
import { Badge } from "~/components/ui/badge"; import { Badge } from "~/components/ui/badge";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "~/components/ui/card"; import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "~/components/ui/card";
import { Skeleton } from "~/components/ui/skeleton"; import { Skeleton } from "~/components/ui/skeleton";
import { CardSkeleton } from "~/components/ui/skeletons";
import type { Publication } from "~/lib/bibtex"; import type { Publication } from "~/lib/bibtex";
import { parseBibtex } from "~/lib/bibtex"; import { parseBibtex } from "~/lib/bibtex";
@@ -67,15 +68,11 @@ export default function PublicationsPage() {
<div className="space-y-6"> <div className="space-y-6">
{loading ? ( {loading ? (
<Card> <>
<CardHeader className="pb-2"> <CardSkeleton />
<Skeleton className="h-6 w-1/2" /> <CardSkeleton />
</CardHeader> <CardSkeleton />
<CardContent> </>
<Skeleton className="h-4 w-full" />
<Skeleton className="h-4 w-full mt-2" />
</CardContent>
</Card>
) : ( ) : (
publications.map((pub, index) => ( publications.map((pub, index) => (
<Card key={index}> <Card key={index}>

39
src/components/Navigation.tsx
View File

@@ -4,7 +4,7 @@ import Link from 'next/link';
import { usePathname } from 'next/navigation'; import { usePathname } from 'next/navigation';
import { useTheme } from 'next-themes'; import { useTheme } from 'next-themes';
import { useState, useEffect } from 'react'; import { useState, useEffect } from 'react';
import { Home, FolderGit2, FileText, BookOpenText, Menu, X, Sun, Moon } from 'lucide-react'; import { Home, FolderGit2, FileText, BookOpenText, Menu, X, Sun, Moon, SunMoon } from 'lucide-react';
// Define the nav items without icons // Define the nav items without icons
const navItems = [ const navItems = [
@@ -25,6 +25,10 @@ export function Navigation() {
setMounted(true); setMounted(true);
}, []); }, []);
// Determine the icon to show based on the theme
const themeIcon = theme === 'dark' ? <Sun size={20} /> : <Moon size={20} />;
const defaultThemeIcon = <SunMoon size={20} />; // Default icon for server-side rendering
return ( return (
<> <>
{/* Backdrop overlay - faster fade */} {/* Backdrop overlay - faster fade */}
@@ -44,15 +48,14 @@ export function Navigation() {
<span className="text-lg font-bold">Sean O'Connor</span> <span className="text-lg font-bold">Sean O'Connor</span>
</Link> </Link>
<div className="flex items-center space-x-4"> <div className="flex items-center space-x-4">
{mounted && ( {/* Render the theme icon as a placeholder */}
<button <button
onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')} onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
className="text-sm font-medium text-muted-foreground hover:text-primary flex items-center lg:hidden" className="text-sm font-medium text-muted-foreground hover:text-primary flex items-center lg:hidden"
aria-label="Toggle theme" aria-label="Toggle theme"
> >
{theme === 'dark' ? <Sun size={20} /> : <Moon size={20} />} {mounted ? themeIcon : defaultThemeIcon} {/* Use the default icon for server-side rendering */}
</button> </button>
)}
<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"
@@ -80,15 +83,13 @@ export function Navigation() {
</Link> </Link>
); );
})} })}
{mounted && ( <button
<button onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')} className="ml-4 text-sm font-medium text-muted-foreground hover:text-primary flex items-center"
className="ml-4 text-sm font-medium text-muted-foreground hover:text-primary flex items-center" aria-label="Toggle theme"
aria-label="Toggle theme" >
> {mounted ? themeIcon : defaultThemeIcon} {/* Use the default icon for server-side rendering */}
{theme === 'dark' ? <Sun size={20} /> : <Moon size={20} />} </button>
</button>
)}
</div> </div>
</div> </div>
</div> </div>

40
src/components/ui/skeletons.tsx Normal file
View File

@@ -0,0 +1,40 @@
import { Card, CardContent, CardHeader } from "./card";
import { Skeleton } from "./skeleton";
export function CardSkeleton() {
return (
<Card>
<CardHeader>
<div className="flex items-center justify-between">
<Skeleton className="h-6 w-1/3" />
<Skeleton className="h-5 w-5 rounded-full" />
</div>
<Skeleton className="h-4 w-full mt-2" />
</CardHeader>
<CardContent>
<Skeleton className="h-4 w-full" />
<Skeleton className="h-4 w-5/6 mt-2" />
<div className="flex gap-2 mt-4">
<Skeleton className="h-5 w-16" />
<Skeleton className="h-5 w-16" />
<Skeleton className="h-5 w-16" />
</div>
</CardContent>
</Card>
);
}
export function AboutCardSkeleton() {
return (
<Card>
<CardHeader>
<Skeleton className="h-6 w-1/4" />
</CardHeader>
<CardContent className="space-y-2">
<Skeleton className="h-4 w-full" />
<Skeleton className="h-4 w-full" />
<Skeleton className="h-4 w-3/4" />
</CardContent>
</Card>
);
}