refactor: add marble sdk for types

Author: mezotv

apps/docs/app/(home)/blog/[slug]/page.tsx

@@ -15,7 +15,8 @@ import { SciFiButton } from '@/components/landing/scifi-btn';
 import { Prose } from '@/components/prose';
 import { SciFiCard } from '@/components/scifi-card';
 import { getPosts, getSinglePost } from '@/lib/blog-query';
-import type { Post } from '@/types/post';
+import type { Post } from '@usemarble/core';
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
 
 const STRIP_HTML_REGEX = /<[^>]+>/g;
 const WORD_SPLIT_REGEX = /\s+/;
@@ -107,7 +108,6 @@ export default async function PostPage({
 		return (
 			<>
 				<div className="relative flex min-h-[60vh] w-full items-center justify-center overflow-hidden px-4 pt-10 sm:px-6 sm:pt-12 lg:px-8">
-					{/* Main Content */}
 					<div className="relative z-10 mx-auto w-full max-w-lg text-center">
 						<SciFiCard>
 							<div className="relative rounded border border-border bg-card/50 p-8 backdrop-blur-sm transition-all duration-300 hover:border-border/80 hover:bg-card/70 sm:p-12">
@@ -163,32 +163,30 @@ export default async function PostPage({
 						Back to blog
 					</Link>
 				</div>
-				{/* Title */}
+
 				<h1 className="mb-3 text-balance font-semibold text-3xl leading-tight tracking-tight sm:text-4xl md:text-5xl">
 					{post.title}
 				</h1>
 
-				{/* Metadata */}
 				<div className="mb-4 flex flex-wrap items-center gap-4 text-muted-foreground text-xs sm:text-sm">
 					<div className="flex items-center gap-2">
 						<UserIcon className="h-4 w-4" weight="duotone" />
 						<div className="-space-x-2 flex">
 							{post.authors.slice(0, 3).map((author) => (
-								<Image
-									alt={author.name}
-									className="h-6 w-6 rounded border-2 border-background"
-									height={24}
-									key={author.id}
-									src={author.image}
-									width={24}
-								/>
+              <Avatar className="size-6 rounded border-2 border-background" key={author.id}>
+                <AvatarImage src={author.image ?? undefined} alt={author.name} />
+                <AvatarFallback>{author.name[0]}</AvatarFallback>
+              </Avatar>
 							))}
 						</div>
-						<span>
-							{post.authors.length === 1
-								? post.authors[0].name
-								: `${post.authors[0].name} +${post.authors.length - 1}`}
-						</span>
+						<Link href={post.authors[0]?.socials[0]?.url ?? undefined} target='_blank' rel='noopener noreferrer'>
+							<span>
+								{post.authors[0].name}
+							</span>
+						</Link>
+						{post.authors.length > 1 && (
+							<span> +{post.authors.length - 1}</span>
+						)}
 					</div>
 					<div className="flex items-center gap-2">
 						<CalendarIcon className="h-4 w-4" weight="duotone" />

apps/docs/app/(home)/blog/page.tsx

@@ -14,7 +14,8 @@ import { Spotlight } from '@/components/landing/spotlight';
 import { SciFiCard } from '@/components/scifi-card';
 import { StructuredData } from '@/components/structured-data';
 import { getPosts } from '@/lib/blog-query';
-import type { Post } from '@/types/post';
+import type { Post } from '@usemarble/core';
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
 
 export const revalidate = 3600;
 
@@ -131,14 +132,10 @@ function BlogPostCard({ post }: { post: Post }) {
 							/>
 							<div className="-space-x-2 flex">
 								{post.authors.slice(0, 2).map((author) => (
-									<Image
-										alt={author.name}
-										className="h-6 w-6 rounded-full border-2 border-background"
-										height={24}
-										key={author.id}
-										src={author.image}
-										width={24}
-									/>
+									<Avatar className="size-6 rounded border-2 border-background" key={author.id}>
+      								  <AvatarImage src={author.image ?? undefined} alt={author.name} />
+      								  <AvatarFallback>{author.name[0]}</AvatarFallback>
+      								</Avatar>
 								))}
 							</div>
 							<span className="text-muted-foreground text-xs">

apps/docs/lib/blog-query.ts

@@ -1,12 +1,11 @@
-import { cache } from 'react';
-
 import type {
-	MarbleAuthorList,
-	MarbleCategoryList,
-	MarblePost,
-	MarblePostList,
-	MarbleTagList,
-} from '@/types/post';
+  MarbleAuthorList,
+  MarbleCategoryList,
+  MarblePost,
+  MarblePostList,
+  MarbleTagList,
+} from "@usemarble/core";
+import { cache } from "react";
 
 type FetchError = { error: true; status: number; statusText: string };
 

apps/docs/package.json

@@ -42,6 +42,7 @@
     "@radix-ui/react-tooltip": "^1.2.7",
     "@radix-ui/react-use-controllable-state": "^1.2.2",
     "@shikijs/transformers": "^3.9.2",
+    "@usemarble/core": "^0.1.3",
     "class-variance-authority": "catalog:",
     "clsx": "catalog:",
     "cmdk": "^1.1.1",

apps/docs/types/post.ts

@@ -225,6 +225,7 @@
         "@radix-ui/react-tooltip": "^1.2.7",
         "@radix-ui/react-use-controllable-state": "^1.2.2",
         "@shikijs/transformers": "^3.9.2",
+        "@usemarble/core": "^0.1.3",
         "class-variance-authority": "catalog:",
         "clsx": "catalog:",
         "cmdk": "^1.1.1",
@@ -1435,6 +1436,8 @@
 
     "@upstash/redis": ["@upstash/[email protected]", "", { "dependencies": { "uncrypto": "^0.1.3" } }, "sha512-aSEIGJgJ7XUfTYvhQcQbq835re7e/BXjs8Janq6Pvr6LlmTZnyqwT97RziZLO/8AVUL037RLXqqiQC6kCt+5pA=="],
 
+    "@usemarble/core": ["@usemarble/[email protected]", "", { "dependencies": { "zod": "^4.1.11" } }, "sha512-ofcprXlIDTfEEGKmLd8Ph8eQ4Z0OoNhQHkE0wfM7O6SadxbhZzKxVS1F+YaladqlEqD696s7AwKIW53bMU0g4g=="],
+
     "@vercel/oidc": ["@vercel/[email protected]", "", {}, "sha512-yNEQvPcVrK9sIe637+I0jD6leluPxzwJKx/Haw6F4H77CdDsszUn5V3o96LPziXkSNE2B83+Z3mjqGKBK/R6Gg=="],
 
     "@vitejs/plugin-react": ["@vitejs/[email protected]", "", { "dependencies": { "@babel/core": "^7.28.4", "@babel/plugin-transform-react-jsx-self": "^7.27.1", "@babel/plugin-transform-react-jsx-source": "^7.27.1", "@rolldown/pluginutils": "1.0.0-beta.38", "@types/babel__core": "^7.20.5", "react-refresh": "^0.17.0" }, "peerDependencies": { "vite": "^4.2.0 || ^5.0.0 || ^6.0.0 || ^7.0.0" } }, "sha512-La0KD0vGkVkSk6K+piWDKRUyg8Rl5iAIKRMH0vMJI0Eg47bq1eOxmoObAaQG37WMW9MSyk7Cs8EIWwJC1PtzKA=="],