Enhance layout and project components; improve accessibility and content
- Added BreadcrumbWrapper to the layout for better navigation. - Updated ProjectsPage to include CardFooter with conditional rendering for project links. - Improved image alt text for better accessibility in travel and project sections. - Added new project details and alt text in data.ts for enhanced content clarity.
This commit is contained in:
+5
-2
@@ -3,6 +3,8 @@ import { SpeedInsights } from "@vercel/speed-insights/next"
|
||||
import { Footer } from "~/components/Footer"
|
||||
import { Navigation } from "~/components/Navigation"
|
||||
import { Sidebar } from "~/components/Sidebar"
|
||||
import { BreadcrumbWrapper } from "~/components/BreadcrumbWrapper"
|
||||
|
||||
import { inter } from "~/lib/fonts"
|
||||
import { description, name } from "~/lib/data";
|
||||
import "~/styles/globals.css"
|
||||
@@ -27,13 +29,14 @@ export default function RootLayout({ children }: React.PropsWithChildren) {
|
||||
<Sidebar />
|
||||
</aside>
|
||||
<main className="flex-1 overflow-y-auto py-8">
|
||||
<BreadcrumbWrapper />
|
||||
{children}
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Footer />
|
||||
</body>
|
||||
</html >
|
||||
</body>
|
||||
</html>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -0,0 +1,16 @@
|
||||
import Link from 'next/link'
|
||||
|
||||
export default function NotFound() {
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-center min-h-[calc(100vh-200px)]">
|
||||
<h2 className="text-3xl font-bold mb-4">404 - Not Found</h2>
|
||||
<p className="mb-6">Could not find the requested resource</p>
|
||||
<Link
|
||||
href="/"
|
||||
className="px-4 py-2 bg-primary text-primary-foreground rounded-md hover:bg-primary/90"
|
||||
>
|
||||
Return Home
|
||||
</Link>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,81 @@
|
||||
import { Metadata } from "next";
|
||||
import { projects } from "~/lib/data";
|
||||
import { Badge } from "~/components/ui/badge";
|
||||
import { AccessibleVideo } from "~/components/AccessibleVideo";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "LaTeX Introduction Tutorial",
|
||||
description: "A comprehensive 5-minute introduction to LaTeX document preparation system for beginners.",
|
||||
};
|
||||
|
||||
const transcript = `
|
||||
<p>Hello, and welcome to getting started with LaTeX. This tutorial will walk you through creating your first document using the LaTeX system.</p>
|
||||
<p>LaTeX is a typesetting system commonly used for technical and scientific documents. It's widely used throughout the world of academia specifically in engineering and science fields.</p>
|
||||
<p>This is due to how easy LaTeX makes it for someone to include complex mathematical equations, models and more. Most documents written in math or physics courses here at Bucknell are written using LaTeX.</p>
|
||||
<p>Throughout this tutorial we'll be utilizing a free LaTeX editor called Overleaf which is available online at overleaf.com.</p>
|
||||
<p>We'll go through:</p>
|
||||
<ul>
|
||||
<li>Setting up the editor</li>
|
||||
<li>Commonly used tags and formatting</li>
|
||||
<li>Working with math equations</li>
|
||||
<li>Creating a complete document</li>
|
||||
</ul>
|
||||
<p>By the end of this tutorial, you'll be able to create your own professional-looking documents with proper formatting and mathematical notation.</p>
|
||||
`;
|
||||
|
||||
export default function LatexTutorialPage() {
|
||||
// Find the LaTeX project data
|
||||
const project = projects.find((p) => p.title === "LaTeX Introduction Tutorial");
|
||||
|
||||
return (
|
||||
<div className="container pt-0 pb-6">
|
||||
<div className="space-y-6">
|
||||
<div>
|
||||
<h1 className="text-4xl font-bold tracking-tight mb-4">{project?.title}</h1>
|
||||
<p className="text-lg text-muted-foreground">{project?.longDescription}</p>
|
||||
<div className="mt-4 flex flex-wrap gap-2">
|
||||
{project?.tags.map((tag) => (
|
||||
<Badge key={tag} variant="secondary">
|
||||
{tag}
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-8">
|
||||
<AccessibleVideo
|
||||
src="/videos/latex-intro.mp4"
|
||||
poster="/latex-thumbnail.jpg"
|
||||
captionSrc="/videos/latex-intro.vtt"
|
||||
title="LaTeX Introduction Tutorial"
|
||||
description="A 5-minute introduction to LaTeX, covering basic syntax, document structure, and common use cases."
|
||||
transcript={transcript}
|
||||
posterAlt="Decorative thumbnail showing LaTeX code and formatting example"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="mt-8 space-y-6">
|
||||
<h2 className="text-2xl font-bold tracking-tight">Why Learn LaTeX?</h2>
|
||||
<p>LaTeX is a document preparation system widely used in academia, especially in fields like mathematics, computer science, physics, and engineering. It excels at:</p>
|
||||
|
||||
<ul className="list-disc pl-6 space-y-2">
|
||||
<li>Professional typesetting of mathematical equations</li>
|
||||
<li>Consistent document formatting</li>
|
||||
<li>Automated handling of citations and references</li>
|
||||
<li>Version control compatibility</li>
|
||||
<li>Cross-platform document creation</li>
|
||||
</ul>
|
||||
|
||||
<p>This tutorial provides a gentle introduction to get you started with your first LaTeX document.</p>
|
||||
|
||||
<h2 className="text-2xl font-bold tracking-tight">Key Resources</h2>
|
||||
<ul className="list-disc pl-6 space-y-2">
|
||||
<li><a href="https://www.overleaf.com" className="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Overleaf</a> - A popular online LaTeX editor</li>
|
||||
<li><a href="https://www.latex-project.org/get/" className="text-primary hover:underline" target="_blank" rel="noopener noreferrer">LaTeX Project</a> - Official downloads for local installation</li>
|
||||
<li><a href="https://en.wikibooks.org/wiki/LaTeX" className="text-primary hover:underline" target="_blank" rel="noopener noreferrer">LaTeX Wikibook</a> - Comprehensive reference guide</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
+47
-13
@@ -1,10 +1,11 @@
|
||||
'use client';
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import { Card, CardHeader, CardTitle, CardDescription, CardContent } from "~/components/ui/card";
|
||||
import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from "~/components/ui/card";
|
||||
import { Badge } from "~/components/ui/badge";
|
||||
import { Button } from "~/components/ui/button";
|
||||
import Link from "next/link";
|
||||
import { ArrowUpRight } from "lucide-react";
|
||||
import { ArrowUpRight, Play, BookOpen } from "lucide-react";
|
||||
import { projects } from "~/lib/data";
|
||||
import Image from "next/image";
|
||||
import { CardSkeleton } from "~/components/ui/skeletons";
|
||||
@@ -41,7 +42,7 @@ export default function ProjectsPage() {
|
||||
<CardHeader className="pb-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<CardTitle>{project.title}</CardTitle>
|
||||
{project.link && (
|
||||
{project.link && !project.link.startsWith('/') && (
|
||||
<Link
|
||||
href={project.link}
|
||||
target="_blank"
|
||||
@@ -66,20 +67,53 @@ export default function ProjectsPage() {
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
|
||||
{project.link && project.link.startsWith('/') && (
|
||||
<CardFooter className="pt-0">
|
||||
<Link href={project.link}>
|
||||
<Button
|
||||
variant="default"
|
||||
size="sm"
|
||||
className="mt-0"
|
||||
>
|
||||
{project.title === "LaTeX Introduction Tutorial" ? (
|
||||
<>
|
||||
<Play className="mr-2 h-4 w-4" />
|
||||
Watch the LaTeX tutorial
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<BookOpen className="mr-2 h-4 w-4" />
|
||||
View project details
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
</Link>
|
||||
</CardFooter>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{project.image && (
|
||||
<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>
|
||||
<Link href={project.link?.startsWith('/') ? project.link : project.link || '#'}>
|
||||
<div className="relative aspect-[4/3] w-full overflow-hidden rounded-md transition-all hover:opacity-90">
|
||||
<Image
|
||||
src={project.image}
|
||||
alt={project.imageAlt || project.title}
|
||||
width={400}
|
||||
height={300}
|
||||
className="object-cover w-full h-full"
|
||||
priority={index === 0}
|
||||
/>
|
||||
{project.title === "LaTeX Introduction Tutorial" && (
|
||||
<div className="absolute inset-0 flex items-center justify-center bg-black/30">
|
||||
<div className="rounded-full bg-white/80 p-3">
|
||||
<Play className="h-8 w-8 text-primary" fill="currentColor" />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@@ -45,7 +45,7 @@ export default function TripsPage() {
|
||||
<div key={imgIndex} className="flex-shrink-0">
|
||||
<Image
|
||||
src={image}
|
||||
alt={trip.title}
|
||||
alt={trip.alts && trip.alts[imgIndex] ? trip.alts[imgIndex] : `${trip.title} - image ${imgIndex + 1}`}
|
||||
width={250}
|
||||
height={200}
|
||||
className="object-cover min-h-[200px] max-h-[200px]"
|
||||
|
||||
Reference in New Issue
Block a user