blob: 9606b4030eabc32ef8d853ec33489ba9c036f8fe (
plain) (
blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
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);
```
|
