Remix
Use Insightcn in Remix applications.
Setup
Install insightcn:
npm install insightcnUsage
Resource Route
// app/routes/api.registry.$slug.ts
import type { LoaderFunctionArgs } from "@remix-run/node";
import { json } from "@remix-run/node";
import { captureRegistryEvent } from "@insightcn/sdk";
export const loader = async ({ params, request }: LoaderFunctionArgs) => {
const slug = params.slug;
const registryUrl = `https://your-registry.com/r/${slug}.json`;
const registryResponse = await fetch(registryUrl);
const data = await registryResponse.json();
await captureRegistryEvent(request, "your-api-key", "installed");
return json(data);
};RSS Feed Route
// app/routes/api.rss.ts
import type { LoaderFunctionArgs } from "@remix-run/node";
import { generateRegistryRssFeed } from "@insightcn/sdk";
export const loader = async ({ request }: LoaderFunctionArgs) => {
const rssFeed = await generateRegistryRssFeed({
baseUrl: "https://your-registry.com",
rss: {
title: "My Shadcn Registry",
description: "Custom components for shadcn/ui",
endpoint: "/api/rss",
},
github: {
owner: "your-org",
repo: "your-registry",
token: process.env.GITHUB_TOKEN,
},
});
if (!rssFeed) {
return new Response("No items found", { status: 404 });
}
return new Response(rssFeed, {
headers: {
"Content-Type": "application/rss+xml",
"Cache-Control": "public, max-age=3600",
},
});
};Client-Side Usage
import { captureRegistryEvent } from "@insightcn/sdk";
export default function InstallButton() {
const handleInstall = async () => {
const request = new Request("https://your-registry.com/r/ui/button.json", {
method: "GET",
headers: { "user-agent": "node-fetch" },
});
await captureRegistryEvent(request, "your-api-key", "installed");
};
return <button onClick={handleInstall}>Install Button</button>;
}Custom Hook
// app/hooks/useRegistryTracker.ts
import { useCallback } from "react";
import { captureRegistryEvent, generateRegistryRssFeed } from "@insightcn/sdk";
export function useRegistryTracker(apiKey: string) {
const trackEvent = useCallback(
async (
registryUrl: string,
type: "installed" | "viewed" | "downloaded" = "installed"
) => {
const request = new Request(registryUrl, {
method: "GET",
headers: { "user-agent": "node-fetch" },
});
await captureRegistryEvent(request, apiKey, type);
},
[apiKey]
);
const generateRss = useCallback(
async (options: Parameters<typeof generateRegistryRssFeed>[0]) => {
return generateRegistryRssFeed(options);
},
[]
);
return { trackEvent, generateRss };
}Usage in Component
import { useRegistryTracker } from "~/hooks/useRegistryTracker";
export default function RegistryTracker() {
const { trackEvent, generateRss } = useRegistryTracker("your-api-key");
return (
<div>
<button
onClick={() => trackEvent("https://your-registry.com/r/ui/button.json")}
>
Install Button
</button>
<button
onClick={() =>
generateRss({
baseUrl: "https://your-registry.com",
rss: {
title: "My Shadcn Registry",
description: "Custom components for shadcn/ui",
},
})
}
>
Generate RSS
</button>
</div>
);
}Environment Variables
INSIGHTCN_API_KEY=your-api-key
GITHUB_TOKEN=your-github-token