Skip to content

Update documentation page with comprehensive installation, usage, and demo content #75

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
wants to merge 2 commits into
base: main
Choose a base branch
from
Draft

Update documentation page with comprehensive installation, usage, and demo content #75

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
312d960
Initial plan
Copilot Sep 26, 2025
90bfcb3
Update documentation page with comprehensive content
Copilot Sep 26, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
232 changes: 228 additions & 4 deletions src/app/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,236 @@

export default function Home() {
return (
<main>
<div >
<h1>React Github Permalink</h1>
<main style={{ maxWidth: '1200px', margin: '0 auto', padding: '2rem', fontFamily: 'system-ui, -apple-system, sans-serif' }}>
<div>
<h1 style={{ fontSize: '3rem', marginBottom: '1rem', color: '#333' }}>React Github Permalink</h1>
<p style={{ fontSize: '1.5rem', marginBottom: '2rem', color: '#666' }}>
Display Github permalinks as codeblocks and Github issue links in your React applications.
</p>

{/* Screenshots */}
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))', gap: '1rem', marginBottom: '3rem' }}>
<img src="/screenshot-permalink-dark.png" alt="Github Permalink in dark mode" style={{ width: '100%', borderRadius: '8px', boxShadow: '0 4px 8px rgba(0,0,0,0.1)' }} />
<img src="/screenshot-permalink-light.png" alt="Github Permalink in light mode" style={{ width: '100%', borderRadius: '8px', boxShadow: '0 4px 8px rgba(0,0,0,0.1)' }} />
</div>

See the <a href="/storybook-static/index.html">Storybook</a>
{/* Installation */}
<section style={{ marginBottom: '3rem' }}>
<h2 style={{ fontSize: '2rem', marginBottom: '1rem', color: '#333' }}>📦 Installation</h2>
<div style={{ backgroundColor: '#f6f8fa', padding: '1rem', borderRadius: '8px', border: '1px solid #d0d7de' }}>
<code style={{ fontSize: '1.1rem' }}>npm install react-github-permalink</code>
</div>
<p style={{ marginTop: '0.5rem', color: '#666' }}>
Also install the peer dependency: <code style={{ backgroundColor: '#f6f8fa', padding: '0.2rem 0.4rem', borderRadius: '4px' }}>npm install react</code>
</p>
</section>

{/* RSC Instructions */}
<section style={{ marginBottom: '3rem' }}>
<h2 style={{ fontSize: '2rem', marginBottom: '1rem', color: '#333' }}>⚛️ React Server Components (RSC)</h2>
<p style={{ marginBottom: '1rem', color: '#666' }}>
This package is compatible with Next.js 13+ and offers three variants of each component:
</p>
<ul style={{ listStyle: 'disc', paddingLeft: '2rem', marginBottom: '1.5rem', color: '#666' }}>
<li><strong>GithubPermalink/GithubIssueLink</strong> - Client component that fetches data in useEffect</li>
<li><strong>GithubPermalinkBase/GithubIssueLinkBase</strong> - Base component with no data fetching</li>
<li><strong>GithubPermalinkRsc/GithubIssueLinkRsc</strong> - React Server Component</li>
</ul>

<h3 style={{ fontSize: '1.5rem', marginBottom: '1rem', color: '#333' }}>Client Component Usage</h3>
<div style={{ backgroundColor: '#f6f8fa', padding: '1rem', borderRadius: '8px', border: '1px solid #d0d7de', marginBottom: '1.5rem' }}>
<pre style={{ margin: 0, overflow: 'auto' }}><code>{`import { GithubPermalink } from 'react-github-permalink';
import "react-github-permalink/dist/github-permalink.css";

export function MyApp() {
return (
<GithubPermalink
permalink="https://github.com/dwjohnston/react-github-permalink/blob/main/sample_files/sample1.go#L1-L5"
/>
);
}`}</code></pre>
</div>

<h3 style={{ fontSize: '1.5rem', marginBottom: '1rem', color: '#333' }}>RSC Usage</h3>
<div style={{ backgroundColor: '#f6f8fa', padding: '1rem', borderRadius: '8px', border: '1px solid #d0d7de', marginBottom: '1.5rem' }}>
<pre style={{ margin: 0, overflow: 'auto' }}><code>{`import { GithubPermalinkRsc } from 'react-github-permalink/dist/rsc';
import "react-github-permalink/dist/github-permalink.css";

export function MyApp() {
return (
<GithubPermalinkRsc
permalink="https://github.com/dwjohnston/react-github-permalink/blob/main/sample_files/sample1.go#L1-L5"
/>
);
}`}</code></pre>
</div>

<h3 style={{ fontSize: '1.5rem', marginBottom: '1rem', color: '#333' }}>Base Component with Custom Data</h3>
<div style={{ backgroundColor: '#f6f8fa', padding: '1rem', borderRadius: '8px', border: '1px solid #d0d7de' }}>
<pre style={{ margin: 0, overflow: 'auto' }}><code>{`import { GithubPermalinkBase } from 'react-github-permalink';
import "react-github-permalink/dist/github-permalink.css";

export function MyApp() {
return (
<GithubPermalinkBase
permalink="https://github.com/dwjohnston/react-github-permalink/blob/main/sample_files/sample1.go#L1-L5"
data={{
lines: [
"package main",
"import \\"fmt\\"",
"func main() {",
" fmt.Println(\\"hello world\\")",
"}"
],
lineFrom: 1,
lineTo: 5,
commit: "5b15aa07e60af4e317086f391b28cadf9aae8e1b",
path: "sample_files/sample1.go",
owner: "dwjohnston",
repo: "react-github-permalink",
status: "ok"
}}
/>
);
}`}</code></pre>
</div>
</section>

{/* Demo Usage */}
<section style={{ marginBottom: '3rem' }}>
<h2 style={{ fontSize: '2rem', marginBottom: '1rem', color: '#333' }}>🚀 Demo Usage</h2>
<p style={{ marginBottom: '1rem', color: '#666' }}>
Try out the components in this interactive CodeSandbox demo:
</p>
<a
href="https://codesandbox.io/s/exciting-nova-js5zlk?file=/src/App.js"
target="_blank"
rel="noopener noreferrer"
style={{
display: 'inline-block',
backgroundColor: '#0969da',
color: 'white',
padding: '0.75rem 1.5rem',
borderRadius: '6px',
textDecoration: 'none',
fontWeight: 'bold',
marginBottom: '1.5rem'
}}
>
🔗 Open Interactive Demo
</a>

<h3 style={{ fontSize: '1.5rem', marginBottom: '1rem', color: '#333' }}>Issue Links</h3>
<p style={{ marginBottom: '1rem', color: '#666' }}>
You can also display GitHub issue links with status and reactions:
</p>
<div style={{ backgroundColor: '#f6f8fa', padding: '1rem', borderRadius: '8px', border: '1px solid #d0d7de', marginBottom: '1rem' }}>
<pre style={{ margin: 0, overflow: 'auto' }}><code>{`import { GithubIssueLink } from 'react-github-permalink';

// Block variant (default)
<GithubIssueLink issueLink="https://github.com/dwjohnston/react-github-permalink/issues/2" />

// Inline variant
<GithubIssueLink
issueLink="https://github.com/dwjohnston/react-github-permalink/issues/2"
variant="inline"
/>`}</code></pre>
</div>
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))', gap: '1rem' }}>
<img src="/screenshot-issuelink-dark.png" alt="Issue Link in dark mode" style={{ width: '100%', borderRadius: '8px', boxShadow: '0 4px 8px rgba(0,0,0,0.1)' }} />
<img src="/screenshot-issuelink-light.png" alt="Issue Link in light mode" style={{ width: '100%', borderRadius: '8px', boxShadow: '0 4px 8px rgba(0,0,0,0.1)' }} />
</div>
</section>

{/* Links */}
<section style={{ marginBottom: '3rem' }}>
<h2 style={{ fontSize: '2rem', marginBottom: '1rem', color: '#333' }}>📚 Resources</h2>
<div style={{ display: 'flex', flexWrap: 'wrap', gap: '1rem' }}>
<a
href="/storybook-static/index.html"
style={{
display: 'inline-block',
backgroundColor: '#ff4785',
color: 'white',
padding: '0.75rem 1.5rem',
borderRadius: '6px',
textDecoration: 'none',
fontWeight: 'bold'
}}
>
📖 View Storybook
</a>
<a
href="https://github.com/dwjohnston/ultimate-react-package-template"
target="_blank"
rel="noopener noreferrer"
style={{
display: 'inline-block',
backgroundColor: '#21262d',
color: 'white',
padding: '0.75rem 1.5rem',
borderRadius: '6px',
textDecoration: 'none',
fontWeight: 'bold'
}}
>
🛠️ Package Template
</a>
</div>
</section>

{/* Features */}
<section style={{ marginBottom: '3rem' }}>
<h2 style={{ fontSize: '2rem', marginBottom: '1rem', color: '#333' }}>✨ Features</h2>
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(250px, 1fr))', gap: '1rem' }}>
<div style={{ padding: '1.5rem', backgroundColor: '#f6f8fa', borderRadius: '8px', border: '1px solid #d0d7de' }}>
<h3 style={{ fontSize: '1.25rem', marginBottom: '0.5rem', color: '#333' }}>🎨 Syntax Highlighting</h3>
<p style={{ color: '#666', margin: 0 }}>Beautiful code highlighting with automatic language detection</p>
</div>
<div style={{ padding: '1.5rem', backgroundColor: '#f6f8fa', borderRadius: '8px', border: '1px solid #d0d7de' }}>
<h3 style={{ fontSize: '1.25rem', marginBottom: '0.5rem', color: '#333' }}>🌙 Dark Mode</h3>
<p style={{ color: '#666', margin: 0 }}>Automatic dark/light mode support based on user preference</p>
</div>
<div style={{ padding: '1.5rem', backgroundColor: '#f6f8fa', borderRadius: '8px', border: '1px solid #d0d7de' }}>
<h3 style={{ fontSize: '1.25rem', marginBottom: '0.5rem', color: '#333' }}>📱 Responsive</h3>
<p style={{ color: '#666', margin: 0 }}>Mobile-friendly design that works on all screen sizes</p>
</div>
<div style={{ padding: '1.5rem', backgroundColor: '#f6f8fa', borderRadius: '8px', border: '1px solid #d0d7de' }}>
<h3 style={{ fontSize: '1.25rem', marginBottom: '0.5rem', color: '#333' }}>⚡ RSC Compatible</h3>
<p style={{ color: '#666', margin: 0 }}>Full support for React Server Components in Next.js 13+</p>
</div>
<div style={{ padding: '1.5rem', backgroundColor: '#f6f8fa', borderRadius: '8px', border: '1px solid #d0d7de' }}>
<h3 style={{ fontSize: '1.25rem', marginBottom: '0.5rem', color: '#333' }}>📋 Copy to Clipboard</h3>
<p style={{ color: '#666', margin: 0 }}>One-click copying of code snippets</p>
</div>
<div style={{ padding: '1.5rem', backgroundColor: '#f6f8fa', borderRadius: '8px', border: '1px solid #d0d7de' }}>
<h3 style={{ fontSize: '1.25rem', marginBottom: '0.5rem', color: '#333' }}>🔗 Issue Links</h3>
<p style={{ color: '#666', margin: 0 }}>Display GitHub issues with status, reactions, and metadata</p>
</div>
</div>
</section>

{/* Footer */}
<footer style={{ marginTop: '4rem', paddingTop: '2rem', borderTop: '1px solid #d0d7de', textAlign: 'center', color: '#666' }}>
<p>
Built with ❤️ by{' '}
<a href="https://github.com/dwjohnston" target="_blank" rel="noopener noreferrer" style={{ color: '#0969da' }}>
@dwjohnston
</a>
</p>
<p style={{ marginTop: '0.5rem' }}>
Recommended: Use the{' '}
<a
href="https://marketplace.visualstudio.com/items?itemName=hogashi.vscode-copy-github-permalink"
target="_blank"
rel="noopener noreferrer"
style={{ color: '#0969da' }}
>
vscode-copy-github-permalink
</a>
{' '}plugin for easy permalink generation in VS Code.
</p>
</footer>
</div>
</main>
);
Expand Down