Add new article layout and organize article pages

Introduced a new layout component for articles and reorganized article-related pages for better structure. This includes adding pages for authors, categories, tags, and individual author/tag views, and moving some pages for consistency.

Took 25 seconds

Author: mikepsinn

app/articles/author/[username]/page.tsx

@@ -0,0 +1,56 @@
+import { prisma } from "@/lib/prisma"
+import { notFound } from "next/navigation"
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
+import ArticleSearchAndGrid from "@/components/article/ArticleSearchAndGrid"
+
+export async function generateMetadata({ params }: { params: { username: string } }) {
+  const author = await prisma.user.findUnique({
+    where: { username: params.username }
+  })
+
+  if (!author) {
+    return {
+      title: 'Author Not Found'
+    }
+  }
+
+  return {
+    title: `Articles by ${author.name}`,
+    description: `Browse all articles written by ${author.name}`
+  }
+}
+
+export default async function AuthorPage({ params }: { params: { username: string } }) {
+  const author = await prisma.user.findUnique({
+    where: { username: params.username },
+    include: {
+      _count: {
+        select: { authoredArticles: true }
+      }
+    }
+  })
+
+  if (!author) {
+    notFound()
+  }
+
+  return (
+    <div className="container py-8">
+      <div className="flex items-center gap-4 mb-8">
+        <Avatar className="h-20 w-20">
+          <AvatarImage src={author.image || ''} alt={author.name || ''} />
+          <AvatarFallback>{author.name?.charAt(0) || 'U'}</AvatarFallback>
+        </Avatar>
+        <div>
+          <h1 className="text-3xl font-bold">{author.name}</h1>
+          <p className="text-muted-foreground">@{author.username}</p>
+          {author.bio && <p className="mt-2">{author.bio}</p>}
+          <p className="text-sm text-muted-foreground mt-1">
+            {author._count.authoredArticles} articles published
+          </p>
+        </div>
+      </div>
+      <ArticleSearchAndGrid authorUsername={params.username} />
+    </div>
+  )
+} 

app/articles/authors/page.tsx

@@ -0,0 +1,39 @@
+import { prisma } from "@/lib/prisma"
+import AuthorsList from "@/components/authors/AuthorsList"
+
+export const metadata = {
+  title: 'Article Authors',
+  description: 'Browse all article authors'
+}
+
+async function getAuthors() {
+  const authors = await prisma.user.findMany({
+    where: {
+      authoredArticles: {
+        some: {}
+      }
+    },
+    include: {
+      _count: {
+        select: { authoredArticles: true }
+      }
+    },
+    orderBy: {
+      name: 'asc'
+    }
+  })
+  return authors
+}
+
+export default async function AuthorsPage() {
+  const authors = await getAuthors()
+
+  return (
+    <div className="container py-8">
+      <div className="max-w-4xl mx-auto">
+        <h1 className="text-3xl font-bold mb-8">Browse Authors</h1>
+        <AuthorsList authors={authors} />
+      </div>
+    </div>
+  )
+} 

app/articles/categories/page.tsx

@@ -0,0 +1,33 @@
+import { prisma } from "@/lib/prisma";
+import CategoriesList from "@/components/categories/CategoriesList";
+
+export const metadata = {
+  title: "Article Categories",
+  description: "Browse all article categories",
+}
+
+async function getCategories() {
+  return prisma.articleCategory.findMany({
+    include: {
+      _count: {
+        select: {articles: true},
+      },
+    },
+    orderBy: {
+      name: "asc",
+    },
+  });
+}
+
+export default async function CategoriesPage() {
+  const categories = await getCategories()
+
+  return (
+    <div className="container py-8">
+      <div className="mx-auto max-w-4xl">
+        <h1 className="mb-8 text-3xl font-bold">Browse Categories</h1>
+        <CategoriesList categories={categories} />
+      </div>
+    </div>
+  )
+}

app/researcher/articles/categories/[categorySlug]/page.tsx renamed to app/articles/category/[categorySlug]/page.tsx

@@ -0,0 +1,41 @@
+import React from "react"
+
+import { generalSidebarNav } from "@/config/links"
+import { getCurrentUser } from "@/lib/session"
+import Footer from "@/components/layout/footer"
+import TopNavbar from "@/components/layout/topNavbar"
+import { SidebarNav } from "@/components/sidebar-nav"
+
+interface DashboardLayoutProps {
+  children: React.ReactNode
+}
+
+export default async function DashboardLayout({
+  children,
+}: DashboardLayoutProps) {
+  const user = await getCurrentUser()
+
+  return (
+    <div className="flex min-h-screen flex-col space-y-6">
+      <TopNavbar
+        user={{
+          name: user?.name,
+          image: user?.image,
+          email: user?.email,
+        }}
+      />
+      <div className="container grid flex-1 gap-12 md:grid-cols-[200px_1fr]">
+        <aside className="hidden w-[200px] flex-col md:flex">
+          <SidebarNav items={generalSidebarNav.data} />
+        </aside>
+        <main
+          className="flex w-full flex-1 flex-col"
+          style={{ maxWidth: "90%" }}
+        >
+          {children}
+        </main>
+      </div>
+      <Footer />
+    </div>
+  )
+}

app/articles/layout.tsx

@@ -1,5 +1,3 @@
-'use client'
-
 import ArticleSearchAndGrid from "@/components/article/ArticleSearchAndGrid";
 
 export default function ArticleList() {

app/researcher/articles/page.tsx renamed to app/articles/page.tsx

@@ -0,0 +1,37 @@
+import { prisma } from "@/lib/prisma"
+import { notFound } from "next/navigation"
+import ArticleSearchAndGrid from "@/components/article/ArticleSearchAndGrid"
+
+export async function generateMetadata({ params }: { params: { tagSlug: string } }) {
+  const tag = await prisma.articleTag.findUnique({
+    where: { slug: params.tagSlug }
+  })
+
+  if (!tag) {
+    return {
+      title: 'Tag Not Found'
+    }
+  }
+
+  return {
+    title: `Articles tagged with ${tag.name}`,
+    description: `Browse all articles tagged with ${tag.name}`
+  }
+}
+
+export default async function TagPage({ params }: { params: { tagSlug: string } }) {
+  const tag = await prisma.articleTag.findUnique({
+    where: { slug: params.tagSlug }
+  })
+
+  if (!tag) {
+    notFound()
+  }
+
+  return (
+    <div className="container py-8">
+      <h1 className="text-3xl font-bold mb-8">Articles tagged with &quot;{tag.name}&quot;</h1>
+      <ArticleSearchAndGrid tagSlug={params.tagSlug} />
+    </div>
+  )
+}

app/articles/tag/[tagSlug]/page.tsx

@@ -0,0 +1,31 @@
+import { prisma } from "@/lib/prisma";
+import TagsList from "@/components/tags/TagsList";
+
+export const metadata = {
+  title: "Article Tags",
+  description: "Browse all article tags",
+}
+
+async function getTags() {
+  return prisma.articleTag.findMany({
+    include: {
+      _count: {
+        select: {articles: true},
+      },
+    },
+    orderBy: {
+      name: "asc",
+    },
+  });
+}
+export default async function TagsPage() {
+    const tags = await getTags();
+  return (
+    <div className="container py-8">
+      <div className="mx-auto max-w-4xl">
+        <h1 className="mb-8 text-3xl font-bold">Browse Tags</h1>
+        <TagsList tags={tags} />
+      </div>
+    </div>
+  )
+}