From c68e5099797d5b49ed6441ce04d7c77105327f73 Mon Sep 17 00:00:00 2001
From: MohamedBassem <me@mbassem.com>
Date: Sun, 3 Aug 2025 23:35:06 -0700
Subject: feat(web): Add special cards for specific websites. Fixes #1344

---
 .../dashboard/preview/content-renderers/README.md  | 55 ++++++++++++++++++++++
 1 file changed, 55 insertions(+)
 create mode 100644 apps/web/components/dashboard/preview/content-renderers/README.md

(limited to 'apps/web/components/dashboard/preview/content-renderers/README.md')

diff --git a/apps/web/components/dashboard/preview/content-renderers/README.md b/apps/web/components/dashboard/preview/content-renderers/README.md
new file mode 100644
index 00000000..9606b403
--- /dev/null
+++ b/apps/web/components/dashboard/preview/content-renderers/README.md
@@ -0,0 +1,55 @@
+# Content-Aware Renderers
+
+This directory contains the content-aware rendering system for LinkContentPreview. It allows for special rendering of different types of links based on their URL patterns.
+
+## Architecture
+
+The system consists of:
+
+1. **Types** (`types.ts`): Defines the `ContentRenderer` interface
+2. **Registry** (`registry.ts`): Manages registration and retrieval of renderers
+3. **Individual Renderers**: Each renderer handles a specific type of content
+
+## Creating a New Renderer
+
+To add support for a new website or content type:
+
+1. Create a new file (e.g., `MyWebsiteRenderer.tsx`)
+2. Implement the `ContentRenderer` interface:
+
+```typescript
+import { ContentRenderer } from "./types";
+import { BookmarkTypes, ZBookmark } from "@karakeep/shared/types/bookmarks";
+import { MyIcon } from "lucide-react";
+
+function canRenderMyWebsite(bookmark: ZBookmark): boolean {
+  if (bookmark.content.type !== BookmarkTypes.LINK) {
+    return false;
+  }
+
+  // Add your URL pattern matching logic here
+  return bookmark.content.url.includes("mywebsite.com");
+}
+
+function MyWebsiteRendererComponent({ bookmark }: { bookmark: ZBookmark }) {
+  // Your custom rendering logic here
+  return <div>Custom content for MyWebsite</div>;
+}
+
+export const myWebsiteRenderer: ContentRenderer = {
+  id: "mywebsite",
+  name: "My Website",
+  icon: MyIcon,
+  canRender: canRenderMyWebsite,
+  component: MyWebsiteRendererComponent,
+  priority: 10, // Higher priority = appears first in dropdown
+};
+```
+
+3. Register your renderer in `index.ts`:
+
+```typescript
+import { myWebsiteRenderer } from "./MyWebsiteRenderer";
+
+contentRendererRegistry.register(myWebsiteRenderer);
+```
-- 
cgit v1.2.3-70-g09d2