added seed data; image uploads via server actions; infinite article grid

src/app/(PAGES)/_components/category/category-card.tsx

@@ -1,18 +0,0 @@
-import { appRoutes } from "@/config";
-import { Category } from "@/server/db/schema";
-import Link from "next/link";
-import React from "react";
-
-function CategoryCard({
-  name,
-  slug,
-  createdAt,
-}: Pick<Category, "name" | "slug" | "createdAt">) {
-  return (
-    <Link href={appRoutes.category(slug)}>
-      <div className="rounded-md border p-4">{name}</div>
-    </Link>
-  );
-}
-
-export default CategoryCard;

src/app/(PAGES)/_components/category/create-category-dialog.tsx

@@ -1,81 +0,0 @@
-"use client";
-import React from "react";
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from "@/components/ui/dialog";
-
-import { zodResolver } from "@hookform/resolvers/zod";
-import { useForm } from "react-hook-form";
-import { z } from "zod";
-
-import { Button } from "@/components/ui/button";
-import {
-  Form,
-  FormControl,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from "@/components/ui/form";
-import { Input } from "@/components/ui/input";
-import { categorySchema } from "@/lib/validation/zod/category";
-import { createCategory } from "@/server/actions/category";
-
-const formSchema = categorySchema.pick({
-  name: true,
-});
-
-function CreateCategoryDialog() {
-  const [open, setOpen] = React.useState<boolean>(false);
-  const form = useForm<z.infer<typeof formSchema>>({
-    resolver: zodResolver(formSchema),
-    defaultValues: {
-      name: "",
-    },
-  });
-
-  // 2. Define a submit handler.
-  async function onSubmit(values: z.infer<typeof formSchema>) {
-    setOpen(false);
-    await createCategory(values);
-  }
-  return (
-    <Dialog open={open} onOpenChange={setOpen}>
-      <Button asChild>
-        <DialogTrigger className="w-full">Kategorie Erstellen</DialogTrigger>
-      </Button>
-      <DialogContent>
-        <DialogHeader>
-          <DialogTitle>Neue Kategorie Erstellen</DialogTitle>
-          <DialogDescription></DialogDescription>
-        </DialogHeader>
-        <Form {...form}>
-          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
-            <FormField
-              control={form.control}
-              name="name"
-              render={({ field }) => (
-                <FormItem>
-                  <FormLabel>Name</FormLabel>
-                  <FormControl>
-                    <Input placeholder="Kategorie Name" {...field} />
-                  </FormControl>
-
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
-            <Button type="submit">Artikel Erstellen</Button>
-          </form>
-        </Form>
-      </DialogContent>
-    </Dialog>
-  );
-}
-
-export default CreateCategoryDialog;

src/app/(PAGES)/_components/main-page.tsx

@@ -0,0 +1,79 @@
+"use client";
+import React from "react";
+import CategoriesGrid, {
+  CategoriesGridSkeleton,
+} from "@/components/category/categories-grid";
+import ArticleGrid, {
+  ArticleGridSkeleton,
+} from "@/components/article/grid/article-grid";
+import { Article, Category } from "@/server/db/schema";
+import ArrowLink from "@/components/arrow-link";
+import { appRoutes } from "@/config";
+import GlobalSearchWidget from "@/components/global-search-widget";
+import { api } from "@/trpc/react";
+import { useInfiniteQuery } from "@tanstack/react-query";
+
+const ITEMS_PER_PAGE = 10;
+
+function MainPage({
+  initialData,
+}: {
+  initialData: { categories: Array<Category>; articles: Array<Article> };
+}) {
+  // const [query, setQuery] = React.useState<string>("");
+
+  // // const {} = useInfiniteQuery();
+
+  // const { data: searchResults, isLoading } = api.app.searchContent.useQuery(
+  //   {
+  //     query,
+  //   },
+  //   {
+  //     enabled: !!query,
+  //   },
+  // );
+
+  // const data = query?.length ? searchResults : initialData;
+
+  return (
+    <>
+      main page xD
+      {/* <GlobalSearchWidget
+        onDebouncedSearch={
+          (q) => setQuery(q)
+          // q.length ? setQuery(q) : setQuery(undefined)
+        }
+        className="sticky top-0"
+      /> */}
+      {/* <div className="w-full space-y-1">
+        <div className="flex items-center justify-between">
+          <h2 className="text-2xl font-medium">Kategorien</h2>
+          <ArrowLink href={appRoutes.allCategories}>Alle Kategorien</ArrowLink>
+        </div>
+        {isLoading ? (
+          <CategoriesGridSkeleton />
+        ) : data?.categories?.length ? (
+          <CategoriesGrid categories={data.categories} />
+        ) : (
+          <p>Keine Kategorien gefunden</p>
+        )}
+      </div>
+
+      <div className="min-h-screen w-full space-y-1">
+        <div className="flex items-center justify-between">
+          <h2 className="text-2xl font-medium">Artikel</h2>
+          <ArrowLink href={appRoutes.allArticles}>Alle Artikel</ArrowLink>
+        </div>
+        {isLoading ? (
+          <ArticleGridSkeleton />
+        ) : data?.articles?.length ? (
+          <ArticleGrid articles={data.articles as Article[]} />
+        ) : (
+          <p>Keine Artikel gefunden</p>
+        )}
+      </div> */}
+    </>
+  );
+}
+
+export default MainPage;

src/app/(PAGES)/artikel/page.tsx

@@ -1,9 +1,8 @@
-import React from 'react'
+import React from "react";
+import InfiniteArticlesGrid from "@/components/article/grid/infinite-article-grid";
 
 function Page() {
-  return (
-    <div>Alle Artikel Page</div>
-  )
+  return <InfiniteArticlesGrid />;
 }
 
-export default Page
+export default Page;

src/app/(PAGES)/kategorie/[name]/page.tsx

@@ -1,62 +0,0 @@
-import BreadNavigator from "@/components/bread-navigator";
-import { Button } from "@/components/ui/button";
-import { hasPermission, Role } from "@/lib/validation/permissions";
-import { auth } from "@/server/auth";
-import { api } from "@/trpc/server";
-import { Edit } from "lucide-react";
-import { notFound } from "next/navigation";
-import React from "react";
-import ArticleCard from "../../../../components/article/article-card";
-import { appRoutes } from "@/config";
-
-async function Page({ params }: { params: Promise<{ name: string }> }) {
-  const { name } = await params;
-  const category = await api.category.get({ slug: name });
-  if (!category) return notFound();
-  const articles = await api.article.getAll({ categoryId: category.id });
-  const session = await auth();
-  const isEditor = session?.user
-    ? hasPermission(session.user.role, Role.EDITOR)
-    : false;
-  return (
-    <>
-      <div className="flex items-center justify-between">
-        <BreadNavigator
-          links={[
-            { label: "Kategorie", href: appRoutes.allCategories },
-            {
-              label: name,
-              href: appRoutes.category(name),
-            },
-          ]}
-        />
-
-        {isEditor && (
-          <Button>
-            <Edit className="size-4" />
-            <span>Bearbeiten</span>
-          </Button>
-        )}
-      </div>
-      <h1 className="text-3xl font-bold capitalize">{name}</h1>
-      <p className="text-muted-foreground">keine Beschreibung</p>
-
-      <h3 className="text-2xl font-bold">Artikel</h3>
-      {articles.length ? (
-        <menu>
-          {articles.map((article) => (
-            <li key={article.slug}>
-              <ArticleCard {...article} />
-            </li>
-          ))}
-        </menu>
-      ) : (
-        <p className="text-muted-foreground">
-          Noch keine Artikel in dieser Kategorie.
-        </p>
-      )}
-    </>
-  );
-}
-
-export default Page;

src/app/(PAGES)/kategorie/[slug]/bearbeiten/page.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+import { CategoryPageProps } from "../page";
+import { api } from "@/trpc/server";
+import { auth } from "@/server/auth";
+import { hasPermission, Role } from "@/lib/validation/permissions";
+import { notFound } from "next/navigation";
+import CategoryForm from "@/components/category/category-form";
+import ImageUploadButton from "@/components/image-upload-form";
+
+async function Page({ params }: CategoryPageProps) {
+  const { slug } = await params;
+  const session = await auth();
+  const category = await api.category.get({
+    slug,
+  });
+  const isEditor = session?.user
+    ? hasPermission(session.user.role, Role.EDITOR)
+    : false;
+  if (!category || !isEditor) return notFound();
+  return (
+    <>
+      <CategoryForm server_category={category} />
+    </>
+  );
+}
+
+export default Page;

src/app/(PAGES)/kategorie/[slug]/page.tsx

@@ -0,0 +1,86 @@
+import BreadNavigator from "@/components/bread-navigator";
+import { Button } from "@/components/ui/button";
+import { hasPermission, Role } from "@/lib/validation/permissions";
+import { auth } from "@/server/auth";
+import { api } from "@/trpc/server";
+import { Edit } from "lucide-react";
+import { notFound } from "next/navigation";
+import React from "react";
+
+import { appRoutes } from "@/config";
+import Link from "next/link";
+import { AspectRatio } from "@/components/ui/aspect-ratio";
+import { CATEGORY_BANNER_ASPECT_RATIO } from "@/components/category/category-form";
+import Image from "next/image";
+import ArticleGrid from "@/components/article/grid/article-grid";
+
+export type CategoryPageProps = { params: Promise<{ slug: string }> };
+
+async function Page({ params }: CategoryPageProps) {
+  const { slug } = await params;
+  const category = await api.category.get({
+    slug,
+    with: {
+      articles: true,
+    },
+  });
+
+  if (!category) return notFound();
+
+  const session = await auth();
+  const isEditor = session?.user
+    ? hasPermission(session.user.role, Role.EDITOR)
+    : false;
+  return (
+    <>
+      <div className="flex w-full items-center justify-between">
+        <BreadNavigator
+          className="w-full"
+          links={[
+            { label: "Kategorie", href: appRoutes.allCategories },
+            {
+              label: category.name!,
+              href: appRoutes.category(category.name!),
+            },
+          ]}
+        />
+
+        {isEditor && (
+          <Button asChild>
+            <Link href={appRoutes.editCategory(slug)}>
+              <Edit className="size-4" />
+              <span>Bearbeiten</span>
+            </Link>
+          </Button>
+        )}
+      </div>
+      {category.image?.length ? (
+        <AspectRatio
+          ratio={CATEGORY_BANNER_ASPECT_RATIO}
+          className="w-full bg-muted"
+        >
+          <Image
+            src={category.image}
+            alt="Kategorie-bild"
+            fill
+            className="h-full w-full rounded-md object-cover"
+          />
+        </AspectRatio>
+      ) : null}
+      <h1 className="text-3xl font-bold capitalize">{category.name}</h1>
+      <p className="text-muted-foreground">
+        {category.description ?? "keine Beschreibung"}
+      </p>
+
+      {category?.articles?.length ? (
+        <ArticleGrid articles={category.articles} />
+      ) : (
+        <p className="text-muted-foreground">
+          Noch keine Artikel in dieser Kategorie.
+        </p>
+      )}
+    </>
+  );
+}
+
+export default Page;

src/app/(PAGES)/kategorie/page.tsx

@@ -1,7 +1,15 @@
+import CategoriesGrid from "@/components/category/categories-grid";
+import { api } from "@/trpc/server";
 import React from "react";
 
-function Page() {
-  return <div>Alle Kategorien</div>;
+async function Page() {
+  const categories = await api.category.getAll();
+  return (
+    <>
+      <h1 className="text-2xl font-bold">Kategorien</h1>
+      <CategoriesGrid categories={categories} />
+    </>
+  );
 }
 
 export default Page;

src/app/(PAGES)/layout.tsx

@@ -1,4 +1,4 @@
-import { AppSidebar } from "@/components/layout/app-sidebar";
+import { WikiSidebar } from "@/components/layout/wiki-sidebar";
 import Navbar from "@/components/layout/navbar";
 import { SidebarProvider } from "@/components/ui/sidebar";
 import React from "react";
@@ -6,7 +6,7 @@ import React from "react";
 function Layout({ children }: { children: React.ReactNode }) {
   return (
     <SidebarProvider>
-      <AppSidebar />
+      <WikiSidebar />
       <div className="w-full">
         <Navbar />
         <main className="space-y-4 p-4">{children}</main>

src/app/(PAGES)/page.tsx

@@ -1,43 +1,13 @@
-import { auth } from "@/server/auth";
 import { api } from "@/trpc/server";
-import Link from "next/link";
-import GlobalStats from "./_components/global-stats";
-import ArticleCard from "../../components/article/article-card";
-import CategoryCard from "./_components/category/category-card";
+import MainPage from "./_components/main-page";
+import { Article } from "@/server/db/schema";
 
 export default async function Home() {
-  const session = await auth();
-  const articles = await api.article.getAllPreviews();
-  const categories = await api.category.getAll();
+  const articles = await api.article.getAll({ limit: 12 });
+  const categories = await api.category.getAll({ limit: 6 });
   return (
     <>
-      <div className="w-full space-y-1">
-        <h2 className="text-2xl font-medium">Kategorien</h2>
-        <menu className="grid grid-cols-1 gap-2 lg:grid-cols-2 xl:grid-cols-3">
-          {categories.map((category) => (
-            <li key={category.slug}>
-              <CategoryCard {...category} />
-            </li>
-          ))}
-        </menu>
-      </div>
-      {/* <h1 className="text-4xl font-bold">Anti Rechts Wiki</h1> */}
-      <div className="flex h-64 w-full items-center justify-center rounded-md bg-muted">
-        <span>Artikel Suche</span>
-      </div>
-
-      {/* <GlobalStats /> */}
-
-      <div className="w-full space-y-1">
-        <h2 className="text-2xl font-medium">Artikel</h2>
-        <menu className="grid grid-cols-1 gap-2 lg:grid-cols-2">
-          {articles.map((article) => (
-            <li key={article.slug}>
-              <ArticleCard {...article} />
-            </li>
-          ))}
-        </menu>
-      </div>
+      <MainPage initialData={{ articles: articles as Article[], categories }} />
     </>
   );
 }

src/app/api/url-preview/route.ts

@@ -0,0 +1,56 @@
+import * as cheerio from "cheerio";
+import { NextApiRequest } from "next";
+import { NextResponse } from "next/server";
+
+export async function GET(req: NextApiRequest) {
+  if (req.method !== "GET") {
+    return NextResponse.json({ error: "Method not allowed" });
+  }
+  try {
+    const { searchParams } = new URL(req.url!);
+    const url = searchParams.get("url");
+
+    if (!url) {
+      return NextResponse.json({
+        success: false,
+        error: "URL parameter is required",
+      });
+    }
+
+    const response = await fetch(url, {
+      headers: { "User-Agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64)" },
+    });
+
+    if (!response.ok) {
+      return NextResponse.json({
+        error: "Failed to fetch the URL",
+        success: false,
+      });
+    }
+
+    const html = await response.text();
+    const $ = cheerio.load(html);
+
+    // Extract metadata using cheerio
+    const title = $("title").text() || "No title found";
+    const description =
+      $('meta[name="description"]').attr("content") ||
+      $('meta[property="og:description"]').attr("content") ||
+      "No description available";
+    const image = $('meta[property="og:image"]').attr("content") || null;
+
+    console.log(title, description, image);
+
+    return NextResponse.json({
+      success: true,
+      url,
+      meta: { title, description, image },
+    });
+  } catch (error) {
+    console.error("Error fetching URL:", error);
+    return NextResponse.json({
+      error: "Failed to fetch URL metadata",
+      success: false,
+    });
+  }
+}