gregor/gregorlohaus.com
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update all deps

Browse Source
This commit is contained in:
Gregor Lohaus
2026-03-10 19:17:15 +01:00
parent 4b1084d826
commit 7a8736d9c5
17 changed files with 173 additions and 201 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
src/app/cv/_components/CvCategory.tsx
View File

@@ -6,24 +6,24 @@ import type { inferProcedureOutput } from "@trpc/server"
import type { RouterOutputs } from "~/server/routers/_app"
import { cn } from "~/lib/utils"
import { Card, CardContent, CardHeader, CardTitle } from "~/components/ui/card"
import type { ArrayElement } from "type-fest"
type CvCategoryProps = {
initialData: RouterOutputs['cv']['category']['get'],
initialData: ArrayElement<RouterOutputs['categoryv2']['listByLayoutPosition']>,
layout: "row"|"col",
children?: React.ReactElement<Parameters<typeof CvEntry>>
}
export default function CvCategory(props:CvCategoryProps) {
const query = trpc.category.select.useQuery({id: props.initialData? props.initialData.id : ""});
if (query.data !== undefined) {
const category = trpc.categoryv2.getById.useQuery(props.initialData? props.initialData.id : "");
return (
<Card className={cn(props.layout == "row" ? "w-full" : "","gsapan")}>
<CardHeader>
<CardTitle>
{query.data[0].name}
{category.data?.name}
</CardTitle>
</CardHeader>
{(query.data?.at(0)?.cvEntry.length ? query.data?.cvEntry.length : 0 ) > 0 ?
<CardContent className={cn(props.layout == "row" ? "flex flex-row flex-wrap justify-center lg:justify-between" : "flex flex-col","gap-[1rem]","overflow-scroll")}>
{query.data?.cvEntry.map((entry) => (
{(category.data?.cvEntry.length ? category.data?.cvEntry.length : 0 ) > 0 ?
<CardContent className={cn(props.layout == "row" ? "flex flex-row flex-wrap justify-center lg:justify-between" : "flex flex-col","gap-4","overflow-scroll")}>
{category.data?.cvEntry.map((entry) => (
<CvEntry className={props.layout == "row" ? "w-full lg:w-fit" : undefined} key={entry.id} initialData={entry}/>
))}
</CardContent>
@@ -32,15 +32,4 @@ export default function CvCategory(props:CvCategoryProps) {
}
</Card>
)
} else {
return (
<Card className="gsapan">
<CardHeader>
<CardTitle>
Loading ...
</CardTitle>
</CardHeader>
</Card>
);
}
}

33
src/app/cv/_components/CvEntry.tsx
View File

@@ -1,25 +1,25 @@
import { trpc } from "~/app/_trpc/Client"
import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "~/components/ui/card"
import { Skeleton } from "~/components/ui/skeleton"
import { cn, type Element } from "~/lib/utils"
import type { CategoryRouterOutputs } from "~/server/routers/cv/category"
import type { EntryRouterOutputs } from "~/server/routers/cv/entry"
import { cn, type Defined } from "~/lib/utils"
import Markdown from 'react-markdown'
import { format } from 'date-fns'
import rehypeHighlight from 'rehype-highlight'
import rehypeRaw from 'rehype-raw'
import type { RouterOutputs } from "~/server/routers/_app"
import type { ArrayElement } from "type-fest"
export default function CvEntry(params: {
initialData: EntryRouterOutputs['get'] | Element<Element<CategoryRouterOutputs['list']>['cvEntry']>
className?: string
initialData: ArrayElement<Defined<RouterOutputs['categoryv2']['getById']>['cvEntry']>,
className?: string
}) {
const query = trpc.cv.entry.get.useQuery({ id: params.initialData?.id ? params.initialData.id : "" })
const { data } = query
const query = trpc.entryv2.getById.useQuery(params.initialData.id);
const { data, isError, error } = query
return (
<>
{
data ?
<>
<Card className={params.className ? cn("w-fit",params.className) : "w-fit"}>
<Card className={params.className ? cn("w-fit", params.className) : "w-fit"}>
{
data.title ?
<CardHeader>
@@ -31,17 +31,17 @@ export default function CvEntry(params: {
data.description ?
<CardContent className="text-sm lg:text-base">
<div>
<Markdown rehypePlugins={[rehypeHighlight,rehypeRaw]}>{data.description}</Markdown>
<Markdown rehypePlugins={[rehypeHighlight, rehypeRaw]}>{data.description}</Markdown>
</div>
</CardContent> :
<></>
}
{
!data.hideDates ?
<CardFooter className="text-sm">
{`von ${format((new Date()).setTime(Date.parse(data.fromTime)), 'M. yyyy')} bis zum ${format((new Date()).setTime(Date.parse(data.toTime)), 'M. yyyy')}`}
</CardFooter> :
<></>
<CardFooter className="text-sm">
{`von ${format((new Date()).setTime(Date.parse(data.fromTime)), 'M. yyyy')} bis zum ${format((new Date()).setTime(Date.parse(data.toTime)), 'M. yyyy')}`}
</CardFooter> :
<></>
}
</Card>
</> :
@@ -55,13 +55,12 @@ export default function CvEntry(params: {
</CardHeader>
<CardContent>
<div>
<Skeleton className="h-4 w-[250px]" />
<Skeleton className="h-4 w-[200px]" />
<Skeleton className="h-4 w-[200px]" />
<Skeleton className="h-4 w-60" />
<Skeleton className="h-4 w-50" />
<Skeleton className="h-4 w-50" />
</div>
</CardContent>
</Card>
</>
}
</>

115
src/app/cv/page.tsx
View File

@@ -2,25 +2,15 @@
import { useGSAP } from "@gsap/react";
import { useGsapContext } from "../_providers/GsapProvicer";
import { trpc } from "../_trpc/Client";
import { useEffect, useRef, useState } from "react";
import { SidebarContent, SidebarProvider, Sidebar } from "~/components/ui/sidebar";
import { useRef } from "react";
import { SidebarContent, SidebarProvider, Sidebar } from "~/components/ui/sidebar";
import SidebarTriggerDisappearsOnMobile from "./_components/SidebarTriggerDisappearsOnMobile";
import CvCategory from "./_components/CvCategory";
import type { CategoryRouterOutputs } from "~/server/routers/cv/category";
export default function CvPage() {
const [sidebarCategories,setSidebarCategories] = useState<CategoryRouterOutputs['list']>([]);
const [headerCategories,setHeaderCategories] = useState<CategoryRouterOutputs['list']>([]);
const [col1Categories,setCol1Categories] = useState<CategoryRouterOutputs['list']>([]);
const [col2Categories,setCol2Categories] = useState<CategoryRouterOutputs['list']>([]);
const categories = trpc.cv.category.list.useQuery();
useEffect(() => {
if (categories.data !== undefined) {
setSidebarCategories(categories.data.filter((cat) => cat.layoutPosition == "sidebar"))
setHeaderCategories(categories.data.filter((cat) => cat.layoutPosition == "header"))
setCol1Categories(categories.data.filter((cat) => cat.layoutPosition == "col1"))
setCol2Categories(categories.data.filter((cat) => cat.layoutPosition == "col2"))
}
},[categories.data])
const sidebarCategories = trpc.categoryv2.listByLayoutPosition.useQuery("sidebar");
const col1Categories = trpc.categoryv2.listByLayoutPosition.useQuery("col1");
const headerCategories = trpc.categoryv2.listByLayoutPosition.useQuery("header");
const col2Categories = trpc.categoryv2.listByLayoutPosition.useQuery("col2");
const gsap = useGsapContext()
const container = useRef<HTMLDivElement>(null)
enum Direction {
@@ -53,66 +43,55 @@ export default function CvPage() {
dir = dir + 1
}
})
}, { scope: container, dependencies: [col1Categories,col2Categories,headerCategories,sidebarCategories], revertOnUpdate: true })
if (categories.data !== undefined) {
return (
<>
<SidebarProvider ref={container}>
{categories.data.filter((cat) => cat.layoutPosition == 'sidebar').length > 0 ?
<>
<SidebarTriggerDisappearsOnMobile />
<Sidebar className="gsapan ">
<SidebarContent className="p-2 lg:pt-[3.2rem]">
{sidebarCategories.map((cat) => {
}, { scope: container, dependencies: [headerCategories.data, sidebarCategories.data], revertOnUpdate: true })
return (
<>
<SidebarProvider ref={container}>
{(sidebarCategories.data?.length ? sidebarCategories.data?.length : 0) > 0 ?
<>
<SidebarTriggerDisappearsOnMobile />
<Sidebar className="gsapan ">
<SidebarContent className="p-2 lg:pt-[3.2rem]">
{sidebarCategories.data?.map((cat) => {
if (cat !== undefined) {
return (
<CvCategory layout="col" initialData={cat} key={cat.id} />
)
})}
</SidebarContent>
</Sidebar>
</> :
<></>
}
<div className="h-full w-full flex flex-wrap flex-row p-[1rem] pt-[2rem] ">
<div id="mainwrap" className="flex w-full flex-col gap-[1rem] lg:px-[15vw]">
<div id="header" className="flex w-full h-fit flex-row gap-[1rem] flex-wrap">
{headerCategories.map((cat) => {
}
})}
</SidebarContent>
</Sidebar>
</> :
<></>
}
<div className="h-full w-full flex flex-wrap flex-row p-4 pt-8 ">
<div id="mainwrap" className="flex w-full flex-col gap-4 lg:px-[15vw]">
<div id="header" className="flex w-full h-fit flex-row gap-4 flex-wrap">
{headerCategories.data?.map((cat) => {
return (
<CvCategory layout="row" initialData={cat} key={cat.id} />
)
})}
</div>
<div id="colwrapper" className="flex flex-col lg:flex-row w-full h-3/4 gap-4">
<div id="col1" className={`flex flex-col w-full ${col1Categories.data?.length ? col1Categories.data?.length : 0 > 0 ? "lg:w-1/2" : ""} h-full gap-4`}>
{col1Categories.data?.map((cat) => {
return (
<CvCategory layout="row" initialData={cat} key={cat.id} />
<CvCategory layout="col" initialData={cat} key={cat.id} />
)
})}
</div>
<div id="colwrapper" className="flex flex-col lg:flex-row w-full h-3/4 gap-[1rem]">
{col1Categories.length > 0 ?
<div id="col1" className={`flex flex-col w-full ${col2Categories.length > 0 ? "lg:w-1/2" : ""} h-full gap-[1rem]`}>
{col1Categories.map((cat) => {
return (
<CvCategory layout="col" initialData={cat} key={cat.id} />
)
})}
</div> :
<></>
}
{col2Categories.length > 0 ?
<div id="col2" className={`flex flex-col w-full ${col1Categories.length > 0 ? "lg:w-1/2" : ""} h-full gap-[1rem]`}>
{col2Categories.map((cat) => {
return (
<CvCategory layout="col" initialData={cat} key={cat.id} />
)
})}
</div> :
<></>
}
<div id="col2" className={`flex flex-col w-full ${col2Categories.data?.length ? col2Categories.data?.length : 0 > 0 ? "lg:w-1/2" : ""} h-full gap-4`}>
{col2Categories.data?.map((cat) => {
return (
<CvCategory layout="col" initialData={cat} key={cat.id} />
)
})}
</div>
</div>
</div>
</SidebarProvider>
</>
)
} else {
return (
<>
</>
)
}
</div>
</SidebarProvider>
</>
)
}