@fayz-ai/plugin-blog 0.1.0

package/dist/types.d.ts

@@ -0,0 +1,38 @@
+/** Medium-inspired author byline shown on cards and article pages. */
+export interface BlogAuthor {
+    name: string;
+    /** Avatar image URL; a name-initial is shown as fallback. */
+    avatarUrl?: string;
+    /** Short role/handle under the name (e.g. "Cirurgião-Dentista"). */
+    role?: string;
+    /** One-line bio for the "about the author" block on the article page. */
+    bio?: string;
+}
+export interface BlogPost {
+    /** URL-safe identifier used for the /blog/:slug detail route. */
+    slug: string;
+    title: string;
+    /** Short summary shown on cards / list. */
+    excerpt: string;
+    /** Full article body. Plain text or lightweight markdown (paragraphs split on blank lines). */
+    body: string;
+    /** Category / topic label (e.g. "Periodontia"). */
+    tag: string;
+    /** Human-readable reading time (e.g. "5 min"). */
+    readTime: string;
+    /** Human-readable publish date (e.g. "Janeiro 2025"). */
+    date: string;
+    /** Machine date (ISO 8601) for SEO/JSON-LD datePublished. Optional. */
+    publishedAt?: string;
+    /** Cover image URL. */
+    image: string;
+    /** Byline author. Filled from the plugin's defaultAuthor when a post omits it. */
+    author: BlogAuthor;
+}
+export interface BlogListQuery {
+    /** Cap the number of posts returned (e.g. the home teaser shows 3). */
+    limit?: number;
+    /** Filter by tag. */
+    tag?: string;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAMA,sEAAsE;AACtE,MAAM,WAAW,UAAU;IACzB,IAAI,EAAE,MAAM,CAAA;IACZ,6DAA6D;IAC7D,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,oEAAoE;IACpE,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,yEAAyE;IACzE,GAAG,CAAC,EAAE,MAAM,CAAA;CACb;AAED,MAAM,WAAW,QAAQ;IACvB,iEAAiE;IACjE,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,EAAE,MAAM,CAAA;IACb,2CAA2C;IAC3C,OAAO,EAAE,MAAM,CAAA;IACf,+FAA+F;IAC/F,IAAI,EAAE,MAAM,CAAA;IACZ,mDAAmD;IACnD,GAAG,EAAE,MAAM,CAAA;IACX,kDAAkD;IAClD,QAAQ,EAAE,MAAM,CAAA;IAChB,yDAAyD;IACzD,IAAI,EAAE,MAAM,CAAA;IACZ,uEAAuE;IACvE,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,uBAAuB;IACvB,KAAK,EAAE,MAAM,CAAA;IACb,kFAAkF;IAClF,MAAM,EAAE,UAAU,CAAA;CACnB;AAED,MAAM,WAAW,aAAa;IAC5B,uEAAuE;IACvE,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,qBAAqB;IACrB,GAAG,CAAC,EAAE,MAAM,CAAA;CACb"}

package/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "@fayz-ai/plugin-blog",
+  "version": "0.1.0",
+  "description": "[experimental] Fayz SDK — blog / articles plugin (website surface)",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "source": "./src/index.ts",
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0",
+    "react-router-dom": "^6.0.0 || ^7.0.0"
+  },
+  "dependencies": {
+    "lucide-react": "^0.400.0",
+    "@fayz-ai/core": "^0.7.1"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.0",
+    "react": "^18.3.0",
+    "react-dom": "^18.3.0",
+    "react-router-dom": "^6.30.1",
+    "tsup": "^8.2.0",
+    "typescript": "^5.5.0",
+    "@types/react-dom": "^18.3.0"
+  },
+  "license": "MIT",
+  "keywords": [
+    "fayz",
+    "fayz-plugin",
+    "fayz-sdk"
+  ],
+  "scripts": {
+    "build": "tsup && tsc --emitDeclarationOnly --declaration --declarationMap --noEmit false",
+    "dev": "tsup --watch",
+    "typecheck": "tsc --noEmit",
+    "clean": "rm -rf dist"
+  }
+}

package/src/components/AuthorAvatar.tsx

@@ -0,0 +1,20 @@
+import type { BlogAuthor } from '../types'
+
+/** Round author avatar with a name-initial fallback (token-only). */
+export function AuthorAvatar({ author, className = 'h-8 w-8 text-xs' }: { author: BlogAuthor; className?: string }) {
+  if (author.avatarUrl) {
+    return (
+      <img
+        src={author.avatarUrl}
+        alt={author.name}
+        loading="lazy"
+        className={`shrink-0 rounded-full object-cover ${className}`}
+      />
+    )
+  }
+  return (
+    <span className={`flex shrink-0 items-center justify-center rounded-full bg-accent font-semibold text-primary ${className}`}>
+      {author.name.charAt(0).toUpperCase()}
+    </span>
+  )
+}

package/src/components/BlogList.tsx

@@ -0,0 +1,54 @@
+import { useBlogPosts } from '../hooks/useBlogPosts'
+import { useBlogContext } from '../context'
+import { PostCard } from './PostCard'
+import { useSeo, blogJsonLd } from '../seo'
+
+/**
+ * Full /blog list screen. Rendered inside the host's chrome (Header/Footer),
+ * so it only owns the section body — token-only for theme inheritance.
+ */
+export function BlogList() {
+  const { config } = useBlogContext()
+  const { posts, loading, error } = useBlogPosts()
+
+  const listTitle = config.labels.listSubtitle || config.labels.listTitle
+  useSeo({
+    title: `${listTitle}${config.siteName ? ` · ${config.siteName}` : ''}`,
+    description: config.labels.listSubtitle || `Artigos do blog${config.siteName ? ` da ${config.siteName}` : ''}.`,
+    canonical: `${typeof window !== 'undefined' ? window.location.origin : ''}${config.basePath}`,
+    type: 'website',
+    siteName: config.siteName,
+    jsonLd: posts.length ? blogJsonLd(posts, { basePath: config.basePath, siteName: config.siteName, title: listTitle }) : undefined,
+  })
+
+  return (
+    <section className="py-20 bg-background">
+      <div className="container mx-auto px-6">
+        <div className="mb-12 max-w-2xl">
+          <span className="inline-block rounded-full bg-accent px-4 py-1 text-xs font-semibold uppercase tracking-widest text-primary mb-4">
+            {config.labels.listTitle}
+          </span>
+          {config.labels.listSubtitle ? (
+            <h1 className="font-heading text-4xl md:text-5xl font-bold text-foreground">
+              {config.labels.listSubtitle}
+            </h1>
+          ) : null}
+        </div>
+
+        {loading ? (
+          <p className="text-muted-foreground">Carregando artigos…</p>
+        ) : error ? (
+          <p className="text-muted-foreground">Não foi possível carregar os artigos.</p>
+        ) : posts.length === 0 ? (
+          <p className="text-muted-foreground">Nenhum artigo publicado ainda.</p>
+        ) : (
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+            {posts.map((post) => (
+              <PostCard key={post.slug} post={post} basePath={config.basePath} />
+            ))}
+          </div>
+        )}
+      </div>
+    </section>
+  )
+}

package/src/components/PostCard.tsx

@@ -0,0 +1,44 @@
+import { Link } from 'react-router-dom'
+import { Clock } from 'lucide-react'
+import type { BlogPost } from '../types'
+import { AuthorAvatar } from './AuthorAvatar'
+
+/**
+ * Default post card — token-only so it inherits the host theme. Optional: a host
+ * with bespoke card markup can ignore this and map `useBlogPosts()` itself.
+ */
+export function PostCard({ post, basePath = '/blog' }: { post: BlogPost; basePath?: string }) {
+  return (
+    <Link
+      to={`${basePath}/${post.slug}`}
+      className="group flex flex-col rounded-2xl border border-border bg-card overflow-hidden shadow-sm hover:shadow-lg hover:-translate-y-1 transition-all duration-300"
+    >
+      <div className="overflow-hidden h-48">
+        <img
+          src={post.image}
+          alt={post.title}
+          loading="lazy"
+          className="h-full w-full object-cover transition-transform duration-500 group-hover:scale-105"
+        />
+      </div>
+      <div className="flex flex-col flex-1 p-6">
+        <span className="inline-block rounded-full bg-accent px-3 py-0.5 text-xs font-semibold text-primary mb-3 w-fit">
+          {post.tag}
+        </span>
+        <h3 className="font-heading text-lg font-semibold text-foreground leading-snug mb-3 group-hover:text-primary transition-colors duration-200">
+          {post.title}
+        </h3>
+        <p className="text-muted-foreground text-sm leading-relaxed flex-1 mb-4">{post.excerpt}</p>
+        <div className="flex items-center gap-2.5 pt-4 border-t border-border">
+          <AuthorAvatar author={post.author} className="h-7 w-7 text-xs" />
+          <div className="min-w-0">
+            <p className="truncate text-xs font-semibold text-foreground">{post.author.name}</p>
+            <p className="flex items-center gap-1 text-[11px] text-muted-foreground">
+              {post.date}<span aria-hidden>·</span><Clock className="h-3 w-3" />{post.readTime}
+            </p>
+          </div>
+        </div>
+      </div>
+    </Link>
+  )
+}

package/src/components/PostDetail.tsx

@@ -0,0 +1,108 @@
+import { Link, useParams } from 'react-router-dom'
+import { Clock } from 'lucide-react'
+import { usePost } from '../hooks/usePost'
+import { useBlogContext } from '../context'
+import { AuthorAvatar } from './AuthorAvatar'
+import { useSeo, articleJsonLd, postUrl } from '../seo'
+
+/**
+ * /blog/:slug detail screen. Reads the slug from the router and renders the
+ * article inside the host chrome. Token-only for theme inheritance. Sets rich
+ * SEO/JSON-LD per article (BlogPosting + BreadcrumbList).
+ */
+export function PostDetail() {
+  const { config } = useBlogContext()
+  const { slug } = useParams<{ slug: string }>()
+  const { post, loading, error } = usePost(slug)
+
+  useSeo(
+    post
+      ? {
+          title: `${post.title}${config.siteName ? ` · ${config.siteName}` : ''}`,
+          description: post.excerpt,
+          canonical: postUrl(config.basePath, post.slug),
+          image: post.image,
+          type: 'article',
+          siteName: config.siteName,
+          jsonLd: articleJsonLd(post, { basePath: config.basePath, siteName: config.siteName }),
+        }
+      : { title: config.siteName || 'Blog' },
+  )
+
+  const paragraphs = post?.body ? post.body.split(/\n\s*\n/).map((p) => p.trim()).filter(Boolean) : []
+
+  return (
+    <article className="py-16 bg-background">
+      <div className="container mx-auto px-6 max-w-3xl">
+        <Link to={config.basePath} className="text-sm font-medium text-primary hover:underline">
+          {config.labels.backToList}
+        </Link>
+
+        {loading ? (
+          <p className="mt-10 text-muted-foreground">Carregando…</p>
+        ) : error || !post ? (
+          <div className="mt-10">
+            <h1 className="font-heading text-3xl font-bold text-foreground">Artigo não encontrado</h1>
+            <p className="mt-2 text-muted-foreground">Este artigo pode ter sido movido ou removido.</p>
+          </div>
+        ) : (
+          <>
+            <h1 className="mt-8 font-heading text-4xl md:text-5xl font-bold text-foreground leading-tight">
+              {post.title}
+            </h1>
+
+            {/* Medium-style byline */}
+            <div className="mt-6 flex items-center gap-3">
+              <AuthorAvatar author={post.author} className="h-11 w-11 text-base" />
+              <div>
+                <p className="font-semibold text-foreground">{post.author.name}</p>
+                <p className="flex flex-wrap items-center gap-1.5 text-sm text-muted-foreground">
+                  {post.author.role ? <span>{post.author.role}<span aria-hidden> · </span></span> : null}
+                  <time dateTime={post.publishedAt}>{post.date}</time>
+                  <span className="flex items-center gap-1"><Clock className="h-3 w-3" />{post.readTime} de leitura</span>
+                </p>
+              </div>
+            </div>
+
+            <div className="mt-8 overflow-hidden rounded-2xl">
+              <img src={post.image} alt={post.title} className="w-full object-cover" loading="lazy" />
+            </div>
+
+            <div className="mt-8 space-y-5">
+              <p className="text-lg text-foreground/90 leading-relaxed font-medium">{post.excerpt}</p>
+              {paragraphs.map((para, i) => (
+                <p key={i} className="text-muted-foreground leading-relaxed">
+                  {para}
+                </p>
+              ))}
+            </div>
+
+            {/* Category tag — at the bottom, Medium-style */}
+            <div className="mt-10 flex flex-wrap items-center gap-2 border-t border-border pt-6">
+              <span className="text-sm text-muted-foreground">Categoria:</span>
+              <Link
+                to={config.basePath}
+                className="rounded-full bg-accent px-3 py-1 text-xs font-semibold text-primary transition-colors hover:bg-accent/70"
+              >
+                {post.tag}
+              </Link>
+            </div>
+
+            {/* About the author */}
+            {post.author.bio ? (
+              <div className="mt-8 flex items-start gap-4 rounded-2xl border border-border bg-muted/40 p-6">
+                <AuthorAvatar author={post.author} className="h-14 w-14 text-lg" />
+                <div>
+                  <p className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">Escrito por</p>
+                  <p className="font-heading text-lg font-bold text-foreground">{post.author.name}</p>
+                  {post.author.role ? <p className="text-sm text-primary">{post.author.role}</p> : null}
+                  <p className="mt-2 text-sm text-muted-foreground leading-relaxed">{post.author.bio}</p>
+                </div>
+              </div>
+            ) : null}
+          </>
+        )}
+      </div>
+    </article>
+  )
+}

package/src/config.ts

@@ -0,0 +1,50 @@
+import type { PluginScope, VerticalId } from '@fayz-ai/core'
+import type { BlogDataProvider } from './data/types'
+import type { BlogSeed } from './data/mock'
+import type { BlogAuthor } from './types'
+
+export interface BlogPluginOptions {
+  /** Base path the plugin mounts its public routes under. Default '/blog'. */
+  basePath?: string
+  /** Seed posts for the mock provider (used until a real backend is wired). */
+  seed?: BlogSeed
+  /** Default byline author, applied to any post that doesn't specify its own. */
+  defaultAuthor?: BlogAuthor
+  /** Publisher/brand name — used for SEO (og:site_name, JSON-LD publisher). */
+  siteName?: string
+  /** Inject a custom provider (e.g. a CMS). Overrides the safe mock/Supabase resolver. */
+  dataProvider?: BlogDataProvider
+  /** Section eyebrow / labels for the default list screen. */
+  labels?: {
+    /** Title shown at the top of the /blog list screen. */
+    listTitle?: string
+    /** Subtitle under the list title. */
+    listSubtitle?: string
+    /** "Back to blog" link label on the detail screen. */
+    backToList?: string
+  }
+  scope?: PluginScope
+  verticalId?: VerticalId
+}
+
+export interface ResolvedBlogConfig {
+  basePath: string
+  siteName: string
+  labels: {
+    listTitle: string
+    listSubtitle: string
+    backToList: string
+  }
+}
+
+export function resolveConfig(options?: BlogPluginOptions): ResolvedBlogConfig {
+  return {
+    basePath: options?.basePath ?? '/blog',
+    siteName: options?.siteName ?? '',
+    labels: {
+      listTitle: options?.labels?.listTitle ?? 'Blog',
+      listSubtitle: options?.labels?.listSubtitle ?? '',
+      backToList: options?.labels?.backToList ?? '← Voltar ao blog',
+    },
+  }
+}

package/src/context.tsx

@@ -0,0 +1,23 @@
+import { createContext, useContext, type ReactNode } from 'react'
+import type { BlogDataProvider } from './data/types'
+import type { ResolvedBlogConfig } from './config'
+
+export interface BlogContextValue {
+  provider: BlogDataProvider
+  config: ResolvedBlogConfig
+}
+
+const BlogContext = createContext<BlogContextValue | null>(null)
+
+export function BlogProvider({ value, children }: { value: BlogContextValue; children: ReactNode }) {
+  return <BlogContext.Provider value={value}>{children}</BlogContext.Provider>
+}
+
+/** Read the blog provider + config. Throws if used outside a BlogProvider. */
+export function useBlogContext(): BlogContextValue {
+  const ctx = useContext(BlogContext)
+  if (!ctx) {
+    throw new Error('[plugin-blog] useBlogContext must be used within <BlogProvider>. Mount the plugin Provider at the app root.')
+  }
+  return ctx
+}

package/src/data/index.ts

@@ -0,0 +1,4 @@
+export type { BlogDataProvider } from './types'
+export { createMockBlogProvider } from './mock'
+export type { BlogSeed, BlogSeedPost, MockBlogProviderOptions } from './mock'
+export { createSupabaseBlogProvider } from './supabase'

package/src/data/mock.ts

@@ -0,0 +1,71 @@
+import type { BlogDataProvider } from './types'
+import type { BlogPost, BlogListQuery, BlogAuthor } from '../types'
+
+/** Slugify a title when a seed post omits an explicit slug. */
+function slugify(input: string): string {
+  return input
+    .normalize('NFD')
+    // Drop combining accent marks (and any other non-ASCII) so "saúde" -> "saude".
+    .replace(/[^\x00-\x7f]/g, '')
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, '-')
+    .replace(/(^-|-$)/g, '')
+    .slice(0, 80)
+}
+
+/** Seed post — same shape as BlogPost but slug/body/author may be derived. */
+export type BlogSeedPost = Omit<BlogPost, 'slug' | 'body' | 'author'> & {
+  slug?: string
+  body?: string
+  author?: BlogAuthor
+}
+
+export interface BlogSeed {
+  posts: BlogSeedPost[]
+}
+
+export interface MockBlogProviderOptions {
+  seed?: BlogSeed
+  /** Fallback byline used for posts without their own author. */
+  defaultAuthor?: BlogAuthor
+}
+
+const FALLBACK_AUTHOR: BlogAuthor = { name: 'Equipe' }
+
+function normalize(post: BlogSeedPost, defaultAuthor: BlogAuthor): BlogPost {
+  return {
+    ...post,
+    slug: post.slug ?? slugify(post.title),
+    body: post.body ?? post.excerpt,
+    author: post.author ?? defaultAuthor,
+  }
+}
+
+/** A built-in fallback post so an unseeded plugin still renders something. */
+const FALLBACK: BlogSeedPost[] = [
+  {
+    title: 'Bem-vindo ao blog',
+    excerpt: 'Este é um artigo de exemplo servido pelo plugin de blog do Fayz.',
+    tag: 'Novidades',
+    readTime: '2 min',
+    date: 'Hoje',
+    image: 'https://images.unsplash.com/photo-1499750310107-5fef28a66643?w=800&q=80',
+  },
+]
+
+export function createMockBlogProvider(options?: MockBlogProviderOptions): BlogDataProvider {
+  const defaultAuthor = options?.defaultAuthor ?? FALLBACK_AUTHOR
+  const posts: BlogPost[] = (options?.seed?.posts ?? FALLBACK).map((p) => normalize(p, defaultAuthor))
+
+  return {
+    async listPosts(query?: BlogListQuery): Promise<BlogPost[]> {
+      let result = posts
+      if (query?.tag) result = result.filter((p) => p.tag === query.tag)
+      if (query?.limit != null) result = result.slice(0, query.limit)
+      return result
+    },
+    async getPost(slug: string): Promise<BlogPost | null> {
+      return posts.find((p) => p.slug === slug) ?? null
+    },
+  }
+}

package/src/data/supabase.ts

@@ -0,0 +1,28 @@
+import type { BlogDataProvider } from './types'
+import type { BlogPost, BlogListQuery } from '../types'
+
+// ---------------------------------------------------------------------------
+// Supabase-backed blog provider — STUB.
+//
+// Deferred (Phase 2): read from a `blog_posts` table (tenant-scoped, RLS) with
+// columns mirroring BlogPost (slug, title, excerpt, body, tag, read_time, date,
+// image, author). Wiring this up is a pure provider swap — no hook/component
+// change — because everything downstream depends only on BlogDataProvider.
+//
+// Until then this throws, which makes createSafeDataProvider fall back to the
+// mock provider whenever no Supabase client is configured. If a client IS
+// configured but this is still a stub, surface a clear error.
+// ---------------------------------------------------------------------------
+
+export function createSupabaseBlogProvider(): BlogDataProvider {
+  const notImplemented = (): never => {
+    throw new Error(
+      '[plugin-blog] Supabase provider not implemented yet — deferred to Phase 2. ' +
+        'Run on the mock/seed provider (no Supabase client configured) for now.',
+    )
+  }
+  return {
+    listPosts: (_query?: BlogListQuery): Promise<BlogPost[]> => notImplemented(),
+    getPost: (_slug: string): Promise<BlogPost | null> => notImplemented(),
+  }
+}

package/src/data/types.ts

@@ -0,0 +1,10 @@
+import type { BlogPost, BlogListQuery } from '../types'
+
+/**
+ * The data seam for the blog plugin. A mock/seed implementation powers the POC;
+ * a Supabase (or CMS) implementation swaps in later with no component change.
+ */
+export interface BlogDataProvider {
+  listPosts(query?: BlogListQuery): Promise<BlogPost[]>
+  getPost(slug: string): Promise<BlogPost | null>
+}

package/src/hooks/index.ts

@@ -0,0 +1,4 @@
+export { useBlogPosts } from './useBlogPosts'
+export type { UseBlogPostsResult } from './useBlogPosts'
+export { usePost } from './usePost'
+export type { UsePostResult } from './usePost'

package/src/hooks/useBlogPosts.ts

@@ -0,0 +1,47 @@
+import { useEffect, useState } from 'react'
+import { useBlogContext } from '../context'
+import type { BlogPost, BlogListQuery } from '../types'
+
+export interface UseBlogPostsResult {
+  posts: BlogPost[]
+  loading: boolean
+  error: Error | null
+}
+
+/**
+ * Fetch the post list from the active blog provider. The host maps `posts` into
+ * its own card markup; the plugin never dictates presentation.
+ */
+export function useBlogPosts(query?: BlogListQuery): UseBlogPostsResult {
+  const { provider } = useBlogContext()
+  const [posts, setPosts] = useState<BlogPost[]>([])
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<Error | null>(null)
+
+  const limit = query?.limit
+  const tag = query?.tag
+
+  useEffect(() => {
+    let active = true
+    setLoading(true)
+    provider
+      .listPosts({ limit, tag })
+      .then((result) => {
+        if (!active) return
+        setPosts(result)
+        setError(null)
+      })
+      .catch((err) => {
+        if (!active) return
+        setError(err instanceof Error ? err : new Error(String(err)))
+      })
+      .finally(() => {
+        if (active) setLoading(false)
+      })
+    return () => {
+      active = false
+    }
+  }, [provider, limit, tag])
+
+  return { posts, loading, error }
+}

package/src/hooks/usePost.ts

@@ -0,0 +1,46 @@
+import { useEffect, useState } from 'react'
+import { useBlogContext } from '../context'
+import type { BlogPost } from '../types'
+
+export interface UsePostResult {
+  post: BlogPost | null
+  loading: boolean
+  error: Error | null
+}
+
+/** Fetch a single post by slug from the active blog provider. */
+export function usePost(slug: string | undefined): UsePostResult {
+  const { provider } = useBlogContext()
+  const [post, setPost] = useState<BlogPost | null>(null)
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<Error | null>(null)
+
+  useEffect(() => {
+    let active = true
+    if (!slug) {
+      setPost(null)
+      setLoading(false)
+      return
+    }
+    setLoading(true)
+    provider
+      .getPost(slug)
+      .then((result) => {
+        if (!active) return
+        setPost(result)
+        setError(null)
+      })
+      .catch((err) => {
+        if (!active) return
+        setError(err instanceof Error ? err : new Error(String(err)))
+      })
+      .finally(() => {
+        if (active) setLoading(false)
+      })
+    return () => {
+      active = false
+    }
+  }, [provider, slug])
+
+  return { post, loading, error }
+}