Merge branch 'projectpage'

bun.lock

@@ -40,6 +40,7 @@
         "@radix-ui/react-toggle-group": "^1.1.11",
         "@radix-ui/react-tooltip": "^1.2.8",
         "@t3-oss/env-nextjs": "^0.13.10",
+        "@tailwindcss/typography": "^0.5.19",
         "@tanstack/react-query": "^5.90.21",
         "@tanstack/react-query-next-experimental": "^5.91.0",
         "@testing-library/user-event": "^14.6.1",
@@ -777,6 +778,8 @@
 
     "@tailwindcss/postcss": ["@tailwindcss/postcss@4.2.1", "", { "dependencies": { "@alloc/quick-lru": "^5.2.0", "@tailwindcss/node": "4.2.1", "@tailwindcss/oxide": "4.2.1", "postcss": "^8.5.6", "tailwindcss": "4.2.1" } }, "sha512-OEwGIBnXnj7zJeonOh6ZG9woofIjGrd2BORfvE5p9USYKDCZoQmfqLcfNiRWoJlRWLdNPn2IgVZuWAOM4iTYMw=="],
 
+    "@tailwindcss/typography": ["@tailwindcss/typography@0.5.19", "", { "dependencies": { "postcss-selector-parser": "6.0.10" }, "peerDependencies": { "tailwindcss": ">=3.0.0 || insiders || >=4.0.0-alpha.20 || >=4.0.0-beta.1" } }, "sha512-w31dd8HOx3k9vPtcQh5QHP9GwKcgbMp87j58qi6xgiBnFFtKEAgCWnDw4qUT8aHwkCp8bKvb/KGKWWHedP0AAg=="],
+
     "@tanstack/query-core": ["@tanstack/query-core@5.90.20", "", {}, "sha512-OMD2HLpNouXEfZJWcKeVKUgQ5n+n3A2JFmBaScpNDUqSrQSjiveC7dKMe53uJUg1nDG16ttFPz2xfilz6i2uVg=="],
 
     "@tanstack/react-query": ["@tanstack/react-query@5.90.21", "", { "dependencies": { "@tanstack/query-core": "5.90.20" }, "peerDependencies": { "react": "^18 || ^19" } }, "sha512-0Lu6y5t+tvlTJMTO7oh5NSpJfpg/5D41LlThfepTixPYkJ0sE2Jj0m0f6yYqujBwIXlId87e234+MxG3D3g7kg=="],
@@ -1903,7 +1906,7 @@
 
     "postcss": ["postcss@8.5.8", "", { "dependencies": { "nanoid": "^3.3.11", "picocolors": "^1.1.1", "source-map-js": "^1.2.1" } }, "sha512-OW/rX8O/jXnm82Ey1k44pObPtdblfiuWnrd8X7GJ7emImCOstunGbXUpp7HdBrFQX6rJzn3sPT397Wp5aCwCHg=="],
 
-    "postcss-selector-parser": ["postcss-selector-parser@7.1.1", "", { "dependencies": { "cssesc": "^3.0.0", "util-deprecate": "^1.0.2" } }, "sha512-orRsuYpJVw8LdAwqqLykBj9ecS5/cRHlI5+nvTo8LcCKmzDmqVORXtOIYEEQuL9D4BxtA1lm5isAqzQZCoQ6Eg=="],
+    "postcss-selector-parser": ["postcss-selector-parser@6.0.10", "", { "dependencies": { "cssesc": "^3.0.0", "util-deprecate": "^1.0.2" } }, "sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w=="],
 
     "postgres": ["postgres@3.4.8", "", {}, "sha512-d+JFcLM17njZaOLkv6SCev7uoLaBtfK86vMUXhW1Z4glPWh4jozno9APvW/XKFJ3CCxVoC7OL38BqRydtu5nGg=="],
 
@@ -2571,6 +2574,8 @@
 
     "shadcn/diff": ["diff@8.0.3", "", {}, "sha512-qejHi7bcSD4hQAZE0tNAawRK1ZtafHDmMTMkrrIGgSLl7hTnQHmKCeB45xAcbfTqK2zowkM3j3bHt/4b/ARbYQ=="],
 
+    "shadcn/postcss-selector-parser": ["postcss-selector-parser@7.1.1", "", { "dependencies": { "cssesc": "^3.0.0", "util-deprecate": "^1.0.2" } }, "sha512-orRsuYpJVw8LdAwqqLykBj9ecS5/cRHlI5+nvTo8LcCKmzDmqVORXtOIYEEQuL9D4BxtA1lm5isAqzQZCoQ6Eg=="],
+
     "shadcn/zod": ["zod@3.25.76", "", {}, "sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ=="],
 
     "sharp/semver": ["semver@7.7.4", "", { "bin": { "semver": "bin/semver.js" } }, "sha512-vFKC2IEtQnVhpT78h1Yp8wzwrf8CM+MzKMHGJZfBtzhZNycRFnXsHk6E5TxIkkMsgNS7mdX3AGB7x2QM2di4lA=="],

package.json

@@ -54,6 +54,7 @@
     "@radix-ui/react-toggle-group": "^1.1.11",
     "@radix-ui/react-tooltip": "^1.2.8",
     "@t3-oss/env-nextjs": "^0.13.10",
+    "@tailwindcss/typography": "^0.5.19",
     "@tanstack/react-query": "^5.90.21",
     "@tanstack/react-query-next-experimental": "^5.91.0",
     "@testing-library/user-event": "^14.6.1",

src/app/admin/project/_components/CreateUpdateProjectForm.tsx

@@ -8,19 +8,23 @@ import type { IterableElement } from 'type-fest'
 import { entitySchemas, makeOnSuccess } from "~/lib/utils";
 import { useEffect, useState } from "react";
 import type { RouterOutputs } from '~/server/routers/_app';
-import { SelectFormField, TextInputFormField } from '~/app/_components/Form/Fields'
+import { SelectFormField, TextInputFormField, MdeFormField } from '~/app/_components/Form/Fields'
 import { FormScaffold } from '~/app/_components/Form/Components';
 import { usePathname, useRouter } from 'next/navigation';
+import { useTheme } from 'next-themes';
 import { makeUseRelationShipWithNameIndex } from '~/lib/hooks';
 import { FormMutationContextProvider } from '~/app/_components/Form/Components/MutationProvider';
 export default function CreateUpdateProjectForm(params: { className?: string, entity?: IterableElement<RouterOutputs['project']['select']> }) {
   const [id, setId] = useState<string | undefined>(params.entity ? params.entity.id : undefined)
+  const { theme } = useTheme()
   const schemas = entitySchemas('project')
   const { data: stacks, id: stackId, name: stackName, success: stacksSuccess, error: stackError } = makeUseRelationShipWithNameIndex('stackItems')(trpc.techStack.select.useQuery({}), id, (items) => { return items ? items.join('-') : "" })
   const form = useForm<z.infer<typeof schemas.insert>>({
     resolver: zodResolver(schemas.insert),
     defaultValues: {
       id: id ? id : crypto.randomUUID(),
+      title: params.entity ? params.entity.title : "",
+      description: params.entity ? params.entity.description : "",
       stackId: params.entity ? params.entity.stackId : stacksSuccess ? stacks?.at(0)?.id : "",
       releaseStatus: params.entity ? params.entity.releaseStatus : "unreleased",
       releaseLink: params.entity ? params.entity.releaseLink : "",
@@ -64,6 +68,7 @@ export default function CreateUpdateProjectForm(params: { className?: string, en
           }
         </SelectFormField>
         <TextInputFormField control={form.control} name='title' label='Title' />
+        <MdeFormField control={form.control} name='description' label='Description' dataColorMode={(theme as "dark" | "light") ?? "dark"} />
         <SelectFormField control={form.control} name='sourceType' label='Source Type' defaultValue={'open'} placeholder='open'  >
           <SelectItem value="open"> open </SelectItem>
           <SelectItem value="closed"> closed </SelectItem>

src/app/projects/page.tsx

@@ -4,6 +4,7 @@ import { trpc } from "~/app/_trpc/Client";
 import * as Card from "~/components/ui/card";
 import { Badge } from "~/components/ui/badge";
 import { StackBadge } from "~/components/StackBadge";
+import Markdown from "react-markdown";
 
 export default function ProjectsPage() {
   const { data: projects, isLoading } = trpc.projectv2.listWithStack.useQuery();
@@ -45,8 +46,13 @@ export default function ProjectsPage() {
               </div>
             </div>
           </Card.CardHeader>
-          {(project.sourceLink || project.releaseLink || project.techStack?.stackItems?.length) && (
+          {(project.description || project.sourceLink || project.releaseLink || project.techStack?.stackItems?.length) && (
             <Card.CardContent className="flex flex-col gap-3">
+              {project.description && (
+                <div className="prose prose-sm dark:prose-invert max-w-none text-muted-foreground">
+                  <Markdown>{project.description}</Markdown>
+                </div>
+              )}
               {(project.sourceLink || project.releaseLink) && (
                 <div className="flex gap-3 flex-wrap">
                   {project.sourceLink && (

src/components/StackBadge.tsx

@@ -118,6 +118,13 @@ const STACK_META: Record<string, { label: string; icon?: SvglIcon }> = {
   },
   debian: { label: "Debian" },
   htmx: { label: "HTMX" },
+  neon: {
+    label: "Neon",
+    icon: {
+      light: "https://svgl.app/library/neon.svg",
+      dark: "https://svgl.app/library/neon.svg",
+    },
+  },
 };
 
 export function StackBadge({ item }: { item: string }) {

src/server/dbschema/schema.ts

@@ -55,13 +55,14 @@ export const cvEntryRelations = relations(cvEntry, ({one}) => ({
 
 export const sourceTypeEnum = pgEnum('source_type',['open','closed'])
 export const releaseStatus = pgEnum('release_status',['released','unreleased'])
-export const stackItemEnum = pgEnum('stack_item',['drizzle','postgres','nextjs','react','servercomponents','php','laravel','reactnative','expo','mysql','nginx','protobuf','grpc','java','graalvm','spring','aws','s3','react-native','linux','debian','htmx'])
+export const stackItemEnum = pgEnum('stack_item',['drizzle','postgres','nextjs','react','servercomponents','php','laravel','reactnative','expo','mysql','nginx','protobuf','grpc','java','graalvm','spring','aws','s3','react-native','linux','debian','htmx','neon'])
 
 export const project = createTable(
 	"project",
 	(d) => ({
 		id: d.uuid().primaryKey().notNull(),
 		title: d.varchar({length: 50}).notNull(),
+		description: d.text(),
 		sourceType: sourceTypeEnum(),
 		sourceLink: d.varchar({length: 200}),
 		releaseStatus: releaseStatus(),

src/tailwind.config.ts

@@ -1,7 +1,8 @@
 import type { Config } from "tailwindcss"
 const config = {
   plugins: [
-    require("tailwindcss-motion")
+    require("tailwindcss-motion"),
+    require("@tailwindcss/typography")
   ]
 } satisfies Config