diff --git a/src/app/page.tsx b/src/app/page.tsx index 77ec7d0..634f638 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -1,12 +1,236 @@ export default function Home() { return ( -
-
-

React Github Permalink

+
+
+

React Github Permalink

+

+ Display Github permalinks as codeblocks and Github issue links in your React applications. +

+ {/* Screenshots */} +
+ Github Permalink in dark mode + Github Permalink in light mode +
- See the Storybook + {/* Installation */} +
+

📦 Installation

+
+ npm install react-github-permalink +
+

+ Also install the peer dependency: npm install react +

+
+ + {/* RSC Instructions */} +
+

⚛️ React Server Components (RSC)

+

+ This package is compatible with Next.js 13+ and offers three variants of each component: +

+
    +
  • GithubPermalink/GithubIssueLink - Client component that fetches data in useEffect
    • +
  • GithubPermalinkBase/GithubIssueLinkBase - Base component with no data fetching
    • +
  • GithubPermalinkRsc/GithubIssueLinkRsc - React Server Component
    • +
+ +

Client Component Usage

+
+ 
{`import { GithubPermalink } from 'react-github-permalink';
+import "react-github-permalink/dist/github-permalink.css";
+
+export function MyApp() {
+  return (
+    
+  );
+}`}
+
+ +

RSC Usage

+
+ 
{`import { GithubPermalinkRsc } from 'react-github-permalink/dist/rsc';
+import "react-github-permalink/dist/github-permalink.css";
+
+export function MyApp() {
+  return (
+    
+  );
+}`}
+
+ +

Base Component with Custom Data

+
+ 
{`import { GithubPermalinkBase } from 'react-github-permalink';
+import "react-github-permalink/dist/github-permalink.css";
+
+export function MyApp() {
+  return (
+    
+  );
+}`}
+
+
+ + {/* Demo Usage */} +
+

🚀 Demo Usage

+

+ Try out the components in this interactive CodeSandbox demo: +

+ + 🔗 Open Interactive Demo + + +

Issue Links

+

+ You can also display GitHub issue links with status and reactions: +

+
+ 
{`import { GithubIssueLink } from 'react-github-permalink';
+
+// Block variant (default)
+
+
+// Inline variant
+`}
+
+
+ Issue Link in dark mode + Issue Link in light mode +
+
+ + {/* Links */} +
+

📚 Resources

+ +
+ + {/* Features */} +
+

✨ Features

+
+
+

🎨 Syntax Highlighting

+

Beautiful code highlighting with automatic language detection

+
+
+

🌙 Dark Mode

+

Automatic dark/light mode support based on user preference

+
+
+

📱 Responsive

+

Mobile-friendly design that works on all screen sizes

+
+
+

⚡ RSC Compatible

+

Full support for React Server Components in Next.js 13+

+
+
+

📋 Copy to Clipboard

+

One-click copying of code snippets

+
+
+

🔗 Issue Links

+

Display GitHub issues with status, reactions, and metadata

+
+
+
+ + {/* Footer */} +
);