Skip to content

Glossary #15

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
Scc33 merged 4 commits into from
Apr 9, 2025
Merged

Glossary #15

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
1e11b20
Add glossary page and update navigation and sitemap
Scc33 Apr 9, 2025
b58a34b
Add glossary functionality with sorting and grouping utilities, and i…
Scc33 Apr 9, 2025
e681350
Update glossary page styles for improved readability and button capit…
Scc33 Apr 9, 2025
7b58b98
Remove unused sorting utility from glossary page component
Scc33 Apr 9, 2025
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
95 changes: 95 additions & 0 deletions app/glossary/[term]/not-found.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,95 @@
import Link from "next/link";
import PageLayout from "@/components/layout/PageLayout";

export default function TermNotFound() {
return (
<PageLayout title="Glossary Term Not Found">
<div className="flex flex-col items-center justify-center py-12 max-w-4xl mx-auto">
<div className="text-center">
<svg
className="mx-auto h-24 w-24 text-gray-400"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
/>
</svg>
<h2 className="text-4xl font-bold text-red-500 mb-4">
Term Not Found
</h2>
<p className="text-xl text-gray-600 mb-8">
The glossary term you are looking for doesn&apos;t exist or has been
moved.
</p>
<div className="flex flex-col md:flex-row justify-center space-y-4 md:space-y-0 md:space-x-4">
<Link
href="/glossary"
className="btn btn-primary px-6 py-3 rounded-lg shadow-md"
>
Browse Glossary
</Link>
<Link
href="/"
className="btn btn-secondary px-6 py-3 rounded-lg shadow-md"
>
Return Home
</Link>
</div>
</div>

<div className="mt-12 bg-blue-50 p-6 rounded-lg max-w-2xl">
<h3 className="heading-md mb-4 text-blue-800">
Looking for algorithm concepts?
</h3>
<p className="text-blue-700 mb-4">
Our glossary covers key algorithmic concepts like Big O notation,
time complexity, space complexity, and more.
</p>
<div className="grid grid-cols-2 md:grid-cols-3 gap-3">
<Link
href="/glossary/algorithm"
className="badge badge-info text-center py-2"
>
Algorithm
</Link>
<Link
href="/glossary/big-o-notation"
className="badge badge-info text-center py-2"
>
Big O Notation
</Link>
<Link
href="/glossary/time-complexity"
className="badge badge-info text-center py-2"
>
Time Complexity
</Link>
<Link
href="/glossary/space-complexity"
className="badge badge-info text-center py-2"
>
Space Complexity
</Link>
<Link
href="/glossary/sorting-algorithm"
className="badge badge-info text-center py-2"
>
Sorting
</Link>
<Link
href="/glossary/searching-algorithm"
className="badge badge-info text-center py-2"
>
Searching
</Link>
</div>
</div>
</div>
</PageLayout>
);
}
187 changes: 187 additions & 0 deletions app/glossary/[term]/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,187 @@
import { notFound } from "next/navigation";
import PageLayout from "@/components/layout/PageLayout";
import Link from "next/link";
import {
getGlossaryTermBySlug,
getRelatedTerms,
} from "@/lib/glossary/glossary";
import { Metadata } from "next";

type TermPageProps = {
params: {
term: string;
};
};

export async function generateMetadata({
params,
}: TermPageProps): Promise<Metadata> {
const term = getGlossaryTermBySlug(params.term);

if (!term) {
return {
title: "Term Not Found | Algorithm Visualizer Glossary",
description: "The requested glossary term could not be found.",
};
}

return {
title: `${term.term} - Algorithm Glossary`,
description: term.shortDefinition,
keywords: [
term.term.toLowerCase(),
"algorithm",
term.category,
"computer science",
"programming",
"algorithm terminology",
...(term.keywords || []),
],
};
}

export default function GlossaryTermPage({ params }: TermPageProps) {
const term = getGlossaryTermBySlug(params.term);

if (!term) {
notFound();
}

const relatedTerms = getRelatedTerms(term.slug);

return (
<PageLayout title={term.term} subtitle={term.shortDefinition}>
<div className="max-w-4xl mx-auto">
<nav className="mb-8 text-sm">
<ol className="flex items-center space-x-2">
<li>
<Link href="/" className="text-gray-500 hover:text-gray-700">
Home
</Link>
</li>
<li className="text-gray-500">/</li>
<li>
<Link
href="/glossary"
className="text-gray-500 hover:text-gray-700"
>
Glossary
</Link>
</li>
<li className="text-gray-500">/</li>
<li className="text-blue-600 font-medium">{term.term}</li>
</ol>
</nav>

<div className="card p-8 mb-8">
<div className="flex justify-between items-start mb-6">
<div>
<span className="badge badge-info capitalize">
{term.category}
</span>
<h1 className="heading-xl mt-2">{term.term}</h1>
</div>

<Link
href="/glossary"
className="btn btn-secondary flex items-center"
>
<svg
className="w-4 h-4 mr-2"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M15 19l-7-7 7-7"
/>
</svg>
Back to Glossary
</Link>
</div>

<div className="prose prose-lg max-w-none">
<div
dangerouslySetInnerHTML={{ __html: term.fullDefinition }}
className="text-gray-700"
/>
</div>

{term.examples && (
<div className="mt-8">
<h2 className="heading-lg mb-4">Examples</h2>
<div className="bg-gray-50 border border-gray-200 rounded-lg p-6">
<ul className="list-disc pl-6 space-y-3 text-gray-700">
{term.examples.map((example, index) => (
<li key={index}>{example}</li>
))}
</ul>
</div>
</div>
)}

{term.codeExample && (
<div className="mt-8">
<h2 className="heading-lg mb-4">Code Example</h2>
<div className="bg-gray-900 text-white rounded-lg p-6 overflow-x-auto">
<pre className="text-sm">
<code>{term.codeExample}</code>
</pre>
</div>
</div>
)}

{term.visualAid && (
<div className="mt-8">
<h2 className="heading-lg mb-4">Visual Explanation</h2>
<div className="bg-white border border-gray-200 rounded-lg p-6">
<div dangerouslySetInnerHTML={{ __html: term.visualAid }} />
</div>
</div>
)}
</div>

{relatedTerms.length > 0 && (
<div className="card p-6 mb-8">
<h2 className="heading-md mb-4">Related Terms</h2>
<div className="grid md:grid-cols-2 gap-4">
{relatedTerms.map((relatedTerm) => (
<Link
key={relatedTerm.slug}
href={`/glossary/${relatedTerm.slug}`}
className="bg-gray-50 border border-gray-200 rounded-lg p-4 hover:bg-gray-100 hover:border-gray-300 transition duration-200"
>
<h3 className="heading-sm">{relatedTerm.term}</h3>
<p className="text-sm text-gray-600 line-clamp-2 mt-1">
{relatedTerm.shortDefinition}
</p>
</Link>
))}
</div>
</div>
)}

<div className="card p-6 mb-8">
<h2 className="heading-md mb-4">Further Learning</h2>
<p className="text-gray-600 mb-4">
Want to see these concepts in action?
</p>
<div className="flex flex-wrap gap-4">
<Link href="/sorting" className="btn btn-primary">
Explore Sorting Algorithms
</Link>
<Link href="/searching" className="btn btn-primary">
Explore Searching Algorithms
</Link>
<Link href="/graph" className="btn btn-primary">
Explore Graph Algorithms
</Link>
</div>
</div>
</div>
</PageLayout>
);
}
Loading
Loading