diff --git a/apps/website/app/changelog.md/route.ts b/apps/website/app/changelog.md/route.ts new file mode 100644 index 000000000..b057da52a --- /dev/null +++ b/apps/website/app/changelog.md/route.ts @@ -0,0 +1,41 @@ +import { readFileSync } from "fs"; +import { join } from "path"; +import { parseChangelog } from "@/utils/parse-changelog"; + +const BASE_URL = "https://react-grab.com"; + +export const dynamic = "force-static"; + +export const GET = (): Response => { + const changelogPath = join(process.cwd(), "..", "..", "packages", "react-grab", "CHANGELOG.md"); + const content = readFileSync(changelogPath, "utf-8"); + const entries = parseChangelog(content); + + const lines: string[] = []; + lines.push("# Changelog"); + lines.push(""); + lines.push("> Release notes and version history for React Grab."); + lines.push(""); + lines.push(`See the [HTML changelog](${BASE_URL}/changelog) for the rendered version.`); + lines.push(""); + + for (const entry of entries) { + lines.push(`## ${entry.version}`); + lines.push(""); + if (entry.changeType) { + lines.push(`*${entry.changeType}*`); + lines.push(""); + } + for (const change of entry.changes) { + lines.push(`- ${change}`); + } + lines.push(""); + } + + return new Response(lines.join("\n"), { + headers: { + "Content-Type": "text/markdown; charset=utf-8", + "Cache-Control": "public, max-age=300, s-maxage=300", + }, + }); +}; diff --git a/apps/website/app/changelog/page.tsx b/apps/website/app/changelog/page.tsx index e60b7f656..fd753e7ba 100644 --- a/apps/website/app/changelog/page.tsx +++ b/apps/website/app/changelog/page.tsx @@ -14,6 +14,12 @@ const ogImageUrl = `https://react-grab.com/api/og?title=${encodeURIComponent(tit export const metadata: Metadata = { title: `${title} - React Grab`, description, + alternates: { + canonical: "https://react-grab.com/changelog", + types: { + "text/markdown": "https://react-grab.com/changelog.md", + }, + }, openGraph: { title: `${title} - React Grab`, description, @@ -48,7 +54,7 @@ const ChangelogPage = () => { const entries = getChangelog(); return ( -
+
{
-
Changelog
-
Release notes and version history
+

Changelog

+

Release notes and version history

{entries.map((entry) => ( -
+
- - {entry.version} - - {entry.changeType} +

{entry.version}

+ {entry.changeType && ( +

{entry.changeType}

+ )}
    {entry.changes.map((change, changeIndex) => ( @@ -95,11 +101,11 @@ const ChangelogPage = () => { ))}
-
+ ))}
- + ); }; diff --git a/apps/website/app/layout.tsx b/apps/website/app/layout.tsx index 782295a10..d4c33cdaa 100644 --- a/apps/website/app/layout.tsx +++ b/apps/website/app/layout.tsx @@ -26,6 +26,7 @@ const geistMono = Geist_Mono({ }); export const metadata: Metadata = { + metadataBase: new URL("https://react-grab.com"), title: "React Grab", description: "Select an element → Give it to Cursor, Claude Code, etc → Make a change to your app", @@ -53,6 +54,40 @@ export const metadata: Metadata = { }, }; +const STRUCTURED_DATA = { + "@context": "https://schema.org", + "@graph": [ + { + "@type": "WebSite", + "@id": "https://react-grab.com/#website", + url: "https://react-grab.com", + name: "React Grab", + description: + "Select an element → Give it to Cursor, Claude Code, etc → Make a change to your app", + inLanguage: "en-US", + publisher: { "@id": "https://react-grab.com/#organization" }, + }, + { + "@type": "Organization", + "@id": "https://react-grab.com/#organization", + name: "React Grab", + url: "https://react-grab.com", + logo: "https://react-grab.com/logo.png", + sameAs: ["https://github.com/aidenybai/react-grab"], + }, + { + "@type": "SoftwareApplication", + name: "React Grab", + applicationCategory: "DeveloperApplication", + operatingSystem: "Web", + url: "https://react-grab.com", + description: + "Open-source dev-only script that adds an element picker to React apps so you can copy file paths, components, and HTML source for AI coding agents.", + offers: { "@type": "Offer", price: "0", priceCurrency: "USD" }, + }, + ], +}; + const RootLayout = ({ children, }: Readonly<{ @@ -60,9 +95,27 @@ const RootLayout = ({ }>) => { return ( + + + + + +
+ + + +``` + +### Webpack + +First, install React Grab: + +```bash +npm install react-grab +``` + +Then add this at the top of your main entry file (e.g., `src/index.tsx` or `src/main.tsx`): + +```tsx +if (process.env.NODE_ENV === "development") { + import("react-grab"); +} +``` diff --git a/apps/website/public/llms.txt b/apps/website/public/llms.txt index 817165966..6fa4a72fc 100644 --- a/apps/website/public/llms.txt +++ b/apps/website/public/llms.txt @@ -1,184 +1,31 @@ # React Grab -Grab any element in your app and give it to Cursor, Claude Code, or other AI coding agents. +> React Grab lets you select any element in your app and hand it off to AI coding agents like Cursor, Claude Code, Codex, and Copilot. Press a hotkey, click an element, and the file path, component name, and HTML source get copied to your clipboard for instant pasting into your agent. -## Usage +React Grab is an open-source dev-only script that adds an element picker to React apps in development. It is framework agnostic for React (Next.js, Vite, Webpack, etc.), runs entirely client-side, and is removed from production builds. -Once installed, hover over any UI element in your browser and press: +The default activation is `⌘+C` on macOS and `Ctrl+C` on Windows/Linux. The activation key, mode, and other behavior are configurable via the `grab` CLI. -- **⌘C** (Cmd+C) on Mac -- **Ctrl+C** on Windows/Linux +## Docs -This copies the element's context (file name, React component, and HTML source code) to your clipboard ready to paste into your coding agent. For example: +- [Install guide](https://react-grab.com/install.md): Installation instructions for the CLI, Next.js (App & Pages router), Vite, and Webpack. +- [Full documentation](https://react-grab.com/llms-full.txt): Complete reference covering installation, configuration, usage, and CLI flags. +- [Changelog](https://react-grab.com/changelog.md): Release notes and version history. +- [Privacy policy](https://react-grab.com/privacy.md): How React Grab handles your data (it does not collect any). -``` - - Forgot your password? - -in LoginForm at components/login-form.tsx:46:19 -``` +## Source -## Installation +- [GitHub repository](https://github.com/aidenybai/react-grab): Source code, issues, and discussions. +- [README](https://raw.githubusercontent.com/aidenybai/react-grab/main/README.md): Project overview and quickstart. +- [Primitives reference](https://github.com/aidenybai/react-grab/tree/main?tab=readme-ov-file#primitives): Lower-level building blocks exported by `react-grab`. -### CLI (Recommended) +## Examples -Run this command at your project root. Use the `-y` flag to skip interactive prompts (required for non-interactive environments): +- [Homepage demo](https://react-grab.com/index.md): Interactive demo of the typical "find this button" agent flow. +- [Benchmark](https://react-bench.com): Independent benchmark showing 2× faster code-finding with React Grab context. -```bash -npx grab@latest init -y -``` +## Optional -Init Options: -``` -Options: - -y, --yes Skip confirmation prompts - -f, --force Force overwrite existing config - -k, --key Activation key (e.g., "Meta+K", "Ctrl+Shift+G", "Space") - --skip-install Skip package installation - -c, --cwd Working directory (defaults to current directory) - -Examples: - npx grab@latest init -y # Auto-detect and install without prompts - npx grab@latest init -k "Meta+K" -y # Set activation key to Cmd+K / Win+K -``` - -The CLI will detect your framework and add the necessary scripts automatically. - -### Configuration - -Configure React Grab options (activation key, mode, etc.): - -```bash -npx grab@latest config -``` - -Config Options: -``` -Options: - -y, --yes Skip confirmation prompts - -k, --key Activation key (e.g., "Meta+K", "Ctrl+Shift+G", "Space") - -m, --mode Activation mode (toggle, hold) - --hold-duration Key hold duration in milliseconds (for hold mode) - --allow-input Allow activation inside input fields (true/false) - --context-lines Max context lines to include - --cdn CDN domain (e.g., unpkg.com, custom.react-grab.com) - -c, --cwd Working directory (defaults to current directory) - -Examples: - npx grab@latest config -k "Meta+K" # Set activation key to Cmd+K / Win+K - npx grab@latest config -k "Ctrl+Shift+G" # Set activation key to Ctrl+Shift+G - npx grab@latest config -m hold --hold-duration 150 # Use hold mode with 150ms delay - npx grab@latest config --context-lines 5 # Include 5 lines of context -``` - -To discover all available commands and flags: - -```bash -npx grab@latest --help -npx grab@latest init --help -npx grab@latest config --help -``` - -### Manual Installation - -If you prefer manual installation, use the correct package manager for your project: - -```bash -npm install react-grab@latest -# or -yarn add react-grab@latest -# or -pnpm add react-grab@latest -# or -bun add react-grab@latest -``` - -### Next.js (App router) - -Add this inside of your `app/layout.tsx`: - -```jsx -import Script from "next/script"; - -export default function RootLayout({ children }) { - return ( - - - {process.env.NODE_ENV === "development" && ( - - - -
- - - -``` - -### Webpack - -First, install React Grab: - -```bash -npm install react-grab -``` - -Then add this at the top of your main entry file (e.g., `src/index.tsx` or `src/main.tsx`): - -```tsx -if (process.env.NODE_ENV === "development") { - import("react-grab"); -} -``` +- [Discord community](https://discord.com/invite/G7zxfUzkm7): Questions, feedback, and discussion. +- [npm package](https://www.npmjs.com/package/react-grab): Latest published version. +- [grab CLI on npm](https://www.npmjs.com/package/grab): Init and config CLI. diff --git a/apps/website/public/privacy.md b/apps/website/public/privacy.md new file mode 100644 index 000000000..24bc3bebd --- /dev/null +++ b/apps/website/public/privacy.md @@ -0,0 +1,60 @@ +# Privacy Policy + +> Privacy policy for React Grab browser extension and website. React Grab does not collect, store, or transmit any personal data. + +## Overview + +React Grab is a developer tool that helps you inspect and copy React components from web pages. This privacy policy explains how the React Grab browser extension and website handle your data. + +## Data Collection + +React Grab does **NOT** collect, store, or transmit any personal data. Specifically: + +- We do not collect any personally identifiable information +- We do not track your browsing history +- We do not store any data about the websites you visit +- We do not use analytics or tracking services +- We do not use cookies for tracking purposes + +## How React Grab Works + +React Grab operates entirely locally in your browser. When you use the extension: + +- The extension injects code into web pages to enable element selection +- When you select an element, the HTML/JSX is copied to your clipboard locally +- No data is sent to external servers +- All processing happens on your device + +## Permissions + +The extension requires the following permissions: + +- **Access to all websites:** Required to inject the element selection functionality into any webpage you visit. +- **Storage:** Used only to store your extension preferences locally on your device. +- **Active Tab:** Needed to interact with the currently active tab when you use the keyboard shortcut. + +These permissions are used solely for the core functionality of the extension and are not used to collect or transmit any data. + +## Local Storage + +React Grab may store minimal settings locally on your device using browser storage APIs. This data never leaves your device and can be cleared by uninstalling the extension or clearing your browser data. + +## Third-Party Services + +React Grab does not integrate with any third-party analytics, tracking, or advertising services. The extension operates entirely offline and does not make any external network requests. + +## Open Source + +React Grab is open source software. You can review the complete source code on [GitHub](https://github.com/aidenybai/react-grab) to verify these privacy claims. + +## Changes to This Policy + +We may update this privacy policy from time to time. Any changes will be posted on this page with an updated revision date. + +## Contact + +If you have questions about this privacy policy, open an issue on our [GitHub repository](https://github.com/aidenybai/react-grab/issues) or join our [Discord community](https://discord.com/invite/G7zxfUzkm7). + +## Summary + +React Grab respects your privacy. We don't collect, store, or transmit any of your personal data. The extension works entirely locally on your device. diff --git a/apps/website/utils/discover-page-routes.ts b/apps/website/utils/discover-page-routes.ts new file mode 100644 index 000000000..6ab92a5e7 --- /dev/null +++ b/apps/website/utils/discover-page-routes.ts @@ -0,0 +1,29 @@ +import { readdirSync, statSync } from "fs"; +import { join } from "path"; + +export const SITEMAP_EXCLUDED_PATHS = new Set(["api", "open-file"]); + +export const discoverPageRoutes = (directory: string, basePath = ""): string[] => { + const routes: string[] = []; + const entries = readdirSync(directory); + + for (const entry of entries) { + if (SITEMAP_EXCLUDED_PATHS.has(entry)) continue; + if (entry.includes(".")) continue; + + const fullPath = join(directory, entry); + const stat = statSync(fullPath); + if (!stat.isDirectory()) continue; + + const routePath = basePath ? `${basePath}/${entry}` : entry; + const dirEntries = readdirSync(fullPath); + const hasPage = dirEntries.some((file) => file === "page.tsx" || file === "page.ts"); + + if (hasPage) { + routes.push(routePath); + } + routes.push(...discoverPageRoutes(fullPath, routePath)); + } + + return routes; +};