Insightcn

Remix

Use Insightcn in Remix applications.

Setup

Install insightcn:

npm install insightcn

Usage

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

On this page