feat: allow users to copyexport a page in the docs #268
Conversation
WalkthroughAdds a new CopyPage React component with styling, several SVG icon components, theme integration (navbar), and small TypeScript config formatting and option changes. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant CopyPage
participant Clipboard
participant Window
User->>CopyPage: Click main "Copy" button
CopyPage->>CopyPage: Read title & content, format as Markdown
CopyPage->>Clipboard: Write Markdown to clipboard
CopyPage-->>User: Show temporary success indicator
User->>CopyPage: Click arrow to toggle dropdown
CopyPage-->>User: Show dropdown menu
User->>CopyPage: Select "View as Markdown"
CopyPage->>Window: Open new tab with Markdown content
User->>CopyPage: Select "Open in ChatGPT/Claude"
CopyPage->>Window: Open AI platform URL with encoded prompt (current page URL)
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Poem
Tip 🔌 Remote MCP (Model Context Protocol) integration is now available!Pro plan users can now connect to remote MCP servers from the Integrations page. Connect with popular remote MCPs such as Notion and Linear to add more context to your reviews and chats. 📜 Recent review detailsConfiguration used: CodeRabbit UI 💡 Knowledge Base configuration:
You can enable these settings in your CodeRabbit configuration. 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)
✨ Finishing Touches🧪 Generate unit tests
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. CodeRabbit Commands (Invoked using PR/Issue comments)Type Other keywords and placeholders
CodeRabbit Configuration File (
|
✅ Deploy Preview for genlayer-docs ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 4
🧹 Nitpick comments (11)
tsconfig.json (2)
4-8:target/libmismatch may require additional polyfills
targetis stilles5whilelibnow includesesnext. The compiler will happily down-level syntax, but the emitted code may rely on built-ins (e.g.Promise.allSettled) that do not exist in an ES5 runtime. Either bumptargetto a more modern baseline (common-practice is ≥es2019) or make sure the runtime ships the necessary polyfills.
20-26: Enable fullstrictmode or drop the redundant flag
Because"strict": false, you are selectively enabling onlystrictNullChecks. If the intention is to harden the codebase, consider flipping"strict": trueand then selectively disabling the few sub-flags that hurt today, rather than the other way round. This usually surfaces more latent bugs and keeps the config simpler.components/icons/github.js (1)
1-6: ExposeclassName/...propsfor styling parity with other icons
All other new icons acceptclassName; onlyGitHubIconhard-codes size and offers no styling hook. For consistency and theme overrides, pass the props through:-export default function GitHubIcon() { - return ( - <svg width="20" height="20" fill="currentColor" viewBox="0 0 24 24"> +export default function GitHubIcon({ className, ...props }) { + return ( + <svg + className={className} + width="16" + height="16" + fill="currentColor" + viewBox="0 0 24 24" + {...props} + >components/icons/anthropic.js (1)
1-6: Type hint theclassNameprop or convert file to.tsx
Since the project is TypeScript-first, leaving this as plain.jsmeans consumers getanytypings. Either:
- Rename to
anthropic.tsxand add({ className = "" }: { className?: string }) => JSX.Element, or- Provide a
d.tsstub exporting the component type.Doing so improves intellisense when importing icons elsewhere.
components/icons/chatgpt.js (1)
1-7: Large inline SVG – wrap withReact.memoto avoid needless re-renders
The SVG path is heavy; when used inside interactive components (e.g. dropdown list), memoising prevents re-parsing on every parent render:-export default function ChatGPTIcon({ className }) { - return ( +import { memo } from "react"; + +function ChatGPTIcon({ className }) { + return ( <svg className={className} ... ); -} +} + +export default memo(ChatGPTIcon);components/copy-page.module.css (1)
16-29: Consider using CSS custom properties for theme consistency.The CSS uses hard-coded color values which could make dark mode or theme customization difficult. Consider using CSS custom properties or theme variables if available in the project.
Example approach:
color: #374151; background-color: white; border: 1px solid #d1d5db; + /* Could be replaced with theme variables like: */ + /* color: var(--text-primary); */ + /* background-color: var(--bg-primary); */ + /* border: 1px solid var(--border-color); */components/copy-page.tsx (5)
1-9: Remove unused import.The
useRouterimport from Next.js is not used anywhere in the component.import React, { useState, useRef, useEffect } from 'react'; -import { useRouter } from 'next/router'; import styles from './copy-page.module.css';
28-48: Consider enhancing error handling and documenting clipboard API requirements.The copy functionality looks solid, but consider these improvements:
- The Clipboard API requires HTTPS or localhost - ensure this limitation is documented
- Error handling could provide user feedback instead of just console logging
- Consider extracting the markdown generation logic to reduce duplication with
viewAsMarkdownconst copyPageAsMarkdown = async () => { try { - // Get the current page content - const pageContent = document.querySelector('main')?.innerText || ''; - const pageTitle = document.title; - - // Create markdown content - const markdownContent = `# ${pageTitle}\n\n${pageContent}`; + const markdownContent = generateMarkdownContent(); await navigator.clipboard.writeText(markdownContent); // Show success feedback setIsCopied(true); setTimeout(() => { setIsCopied(false); }, 2000); } catch (error) { console.error('Failed to copy page:', error); + // Consider showing user-friendly error feedback } setIsOpen(false); };
50-61: LGTM! Good use of Blob API with proper cleanup.The function correctly uses the Blob API to create a viewable markdown file and properly cleans up the object URL. However, note the code duplication with
copyPageAsMarkdownfor generating markdown content.Consider extracting a shared
generateMarkdownContent()helper function to eliminate duplication.
80-154: Well-structured JSX with clean two-button design.The component structure matches the PR objectives perfectly with a clean two-button layout and intuitive dropdown menu. Consider enhancing accessibility:
Add ARIA attributes for better accessibility:
<button onClick={() => setIsOpen(!isOpen)} className={styles.arrowButton} + aria-label="Copy page options" + aria-expanded={isOpen} + aria-haspopup="menu" > {isOpen && ( - <div className={styles.dropdown}> + <div className={styles.dropdown} role="menu"> <div className={styles.dropdownContent}> <button onClick={copyPageAsMarkdown} data-copy-feedback className={styles.dropdownButton} + role="menuitem" >
50-75: Consider adding error handling to other functions.While
copyPageAsMarkdownhas error handling, consider adding try-catch blocks toviewAsMarkdownandopenInAIfunctions to handle potential failures (popup blocking, DOM access issues, etc.).const viewAsMarkdown = () => { + try { const pageContent = document.querySelector('main')?.innerText || ''; const pageTitle = document.title; const markdownContent = `# ${pageTitle}\n\n${pageContent}`; // Open in new window/tab const blob = new Blob([markdownContent], { type: 'text/markdown' }); const url = URL.createObjectURL(blob); window.open(url, '_blank'); URL.revokeObjectURL(url); + } catch (error) { + console.error('Failed to view as markdown:', error); + } setIsOpen(false); };
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (11)
components/copy-page.module.css(1 hunks)components/copy-page.tsx(1 hunks)components/icons/anthropic.js(1 hunks)components/icons/chatgpt.js(1 hunks)components/icons/check.js(1 hunks)components/icons/chevron-down.js(1 hunks)components/icons/copy.js(1 hunks)components/icons/document.js(1 hunks)components/icons/github.js(1 hunks)theme.config.tsx(3 hunks)tsconfig.json(2 hunks)
🧰 Additional context used
📓 Path-based instructions (2)
components/**/*
📄 CodeRabbit Inference Engine (CLAUDE.md)
components/**/*: Custom components go in /components/ directory
Follow existing patterns for icons and cards when developing components
Files:
components/icons/anthropic.jscomponents/icons/document.jscomponents/icons/chevron-down.jscomponents/icons/check.jscomponents/icons/github.jscomponents/copy-page.tsxcomponents/icons/chatgpt.jscomponents/icons/copy.jscomponents/copy-page.module.css
theme.config.tsx
📄 CodeRabbit Inference Engine (CLAUDE.md)
theme.config.tsx: Use theme.config.tsx for top-level navigation changes
All content should support LaTeX in Nextra config
Nextra configuration is in theme.config.tsx, including logos, social links, SEO, and LaTeX support
Use nextra-theme-docs with custom styling as configured
LaTeX support is enabled in Nextra config
Files:
theme.config.tsx
🧠 Learnings (6)
📓 Common learnings
Learnt from: CR
PR: genlayerlabs/genlayer-docs#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-24T07:56:58.272Z
Learning: Applies to theme.config.tsx : Use theme.config.tsx for top-level navigation changes
Learnt from: CR
PR: genlayerlabs/genlayer-docs#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-24T07:56:58.272Z
Learning: Applies to theme.config.tsx : Nextra configuration is in theme.config.tsx, including logos, social links, SEO, and LaTeX support
Learnt from: CR
PR: genlayerlabs/genlayer-docs#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-24T07:56:58.272Z
Learning: Applies to theme.config.tsx : Use nextra-theme-docs with custom styling as configured
Learnt from: CR
PR: genlayerlabs/genlayer-docs#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-24T07:56:58.272Z
Learning: Applies to pages/**/*.mdx : All content is in MDX format supporting React components
Learnt from: epsjunior
PR: genlayerlabs/genlayer-docs#244
File: next-env.d.ts:3-6
Timestamp: 2025-07-09T18:27:44.033Z
Learning: Next.js automatically updates next-env.d.ts file during dependency updates, including adding new type references like "next/navigation-types/compat/navigation" when upgrading versions. These changes are not manual edits and should not be flagged as problematic.
Learnt from: CR
PR: genlayerlabs/genlayer-docs#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-24T07:56:58.272Z
Learning: Applies to pages/**/*.mdx : Import and use custom components within MDX files
Learnt from: CR
PR: genlayerlabs/genlayer-docs#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-24T07:56:58.272Z
Learning: Applies to components/**/* : Follow existing patterns for icons and cards when developing components
Learnt from: CR
PR: genlayerlabs/genlayer-docs#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-24T07:56:58.272Z
Learning: Applies to pages/**/*.mdx : All content should support React components in MDX files
Learnt from: CR
PR: genlayerlabs/genlayer-docs#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-24T07:56:58.272Z
Learning: Applies to theme.config.tsx : All content should support LaTeX in Nextra config
tsconfig.json (6)
Learnt from: epsjunior
PR: #244
File: next-env.d.ts:3-6
Timestamp: 2025-07-09T18:27:44.033Z
Learning: Next.js automatically updates next-env.d.ts file during dependency updates, including adding new type references like "next/navigation-types/compat/navigation" when upgrading versions. These changes are not manual edits and should not be flagged as problematic.
Learnt from: CR
PR: genlayerlabs/genlayer-docs#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-24T07:56:58.272Z
Learning: Applies to theme.config.tsx : Nextra configuration is in theme.config.tsx, including logos, social links, SEO, and LaTeX support
Learnt from: CR
PR: genlayerlabs/genlayer-docs#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-24T07:56:58.272Z
Learning: Applies to next.config.js : Next.js configuration is in next.config.js, including redirect rules for URL migrations
Learnt from: CR
PR: genlayerlabs/genlayer-docs#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-24T07:56:58.272Z
Learning: Applies to theme.config.tsx : Use theme.config.tsx for top-level navigation changes
Learnt from: CR
PR: genlayerlabs/genlayer-docs#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-24T07:56:58.272Z
Learning: Applies to theme.config.tsx : All content should support LaTeX in Nextra config
Learnt from: CR
PR: genlayerlabs/genlayer-docs#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-24T07:56:58.272Z
Learning: Applies to theme.config.tsx : LaTeX support is enabled in Nextra config
components/copy-page.tsx (3)
Learnt from: CR
PR: genlayerlabs/genlayer-docs#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-24T07:56:58.272Z
Learning: Applies to pages/**/*.mdx : All content is in MDX format supporting React components
Learnt from: CR
PR: genlayerlabs/genlayer-docs#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-24T07:56:58.272Z
Learning: Applies to pages/**/*.mdx : Import and use custom components within MDX files
Learnt from: CR
PR: genlayerlabs/genlayer-docs#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-24T07:56:58.272Z
Learning: Applies to pages/**/*.mdx : All content should support React components in MDX files
theme.config.tsx (12)
Learnt from: CR
PR: genlayerlabs/genlayer-docs#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-24T07:56:58.272Z
Learning: Applies to theme.config.tsx : Nextra configuration is in theme.config.tsx, including logos, social links, SEO, and LaTeX support
Learnt from: CR
PR: genlayerlabs/genlayer-docs#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-24T07:56:58.272Z
Learning: Applies to theme.config.tsx : Use theme.config.tsx for top-level navigation changes
Learnt from: CR
PR: genlayerlabs/genlayer-docs#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-24T07:56:58.272Z
Learning: Applies to theme.config.tsx : Use nextra-theme-docs with custom styling as configured
Learnt from: epsjunior
PR: #244
File: next-env.d.ts:3-6
Timestamp: 2025-07-09T18:27:44.033Z
Learning: Next.js automatically updates next-env.d.ts file during dependency updates, including adding new type references like "next/navigation-types/compat/navigation" when upgrading versions. These changes are not manual edits and should not be flagged as problematic.
Learnt from: CR
PR: genlayerlabs/genlayer-docs#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-24T07:56:58.272Z
Learning: Applies to theme.config.tsx : All content should support LaTeX in Nextra config
Learnt from: CR
PR: genlayerlabs/genlayer-docs#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-24T07:56:58.272Z
Learning: Applies to theme.config.tsx : LaTeX support is enabled in Nextra config
Learnt from: CR
PR: genlayerlabs/genlayer-docs#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-24T07:56:58.272Z
Learning: Applies to pages/validators/setup-guide.mdx : Update configuration examples with new contract addresses in setup-guide.mdx when applicable
Learnt from: CR
PR: genlayerlabs/genlayer-docs#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-24T07:56:58.272Z
Learning: Applies to pages/**/*.mdx : All content is in MDX format supporting React components
Learnt from: CR
PR: genlayerlabs/genlayer-docs#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-24T07:56:58.272Z
Learning: Applies to pages/**/*.mdx : Import and use custom components within MDX files
Learnt from: CR
PR: genlayerlabs/genlayer-docs#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-24T07:56:58.272Z
Learning: Applies to next.config.js : Add redirects to next.config.js to maintain SEO and user experience when URL structure changes
Learnt from: CR
PR: genlayerlabs/genlayer-docs#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-24T07:56:58.272Z
Learning: Applies to next.config.js : Redirects are managed in next.config.js for URL structure changes
Learnt from: CR
PR: genlayerlabs/genlayer-docs#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-24T07:56:58.272Z
Learning: Applies to next.config.js : Next.js configuration is in next.config.js, including redirect rules for URL migrations
components/icons/copy.js (1)
Learnt from: CR
PR: genlayerlabs/genlayer-docs#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-24T07:56:58.272Z
Learning: Applies to components/**/* : Follow existing patterns for icons and cards when developing components
components/copy-page.module.css (1)
Learnt from: CR
PR: genlayerlabs/genlayer-docs#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-24T07:56:58.272Z
Learning: Applies to components/**/* : Follow existing patterns for icons and cards when developing components
🧬 Code Graph Analysis (2)
components/copy-page.tsx (6)
components/icons/check.js (1)
CheckIcon(1-7)components/icons/copy.js (1)
CopyIcon(1-7)components/icons/chevron-down.js (1)
ChevronDownIcon(1-7)components/icons/document.js (1)
DocumentIcon(1-7)components/icons/chatgpt.js (1)
ChatGPTIcon(1-7)components/icons/anthropic.js (1)
AnthropicIcon(1-7)
theme.config.tsx (1)
components/icons/github.js (1)
GitHubIcon(1-7)
🔇 Additional comments (9)
tsconfig.json (1)
28-36: Nice: explicitincludelist improves editor performance
Explicitly enumerating**/*.ts(x)and generated.nexttypes avoids scanning MD/asset folders and speeds up incremental type-checking.components/icons/chevron-down.js (1)
1-6: LGTM – icon follows project conventions
AcceptsclassName, usescurrentColor, and minimal path.components/copy-page.module.css (1)
65-76: Good dropdown positioning and z-index management.The dropdown positioning with
right: 0and appropriate z-index ensures proper layering and alignment. The shadow and border radius provide good visual hierarchy.theme.config.tsx (2)
4-9: LGTM! Clean import organization and component integration.The import path updates to use the nested "icons" directory structure and the addition of the new GitHubIcon and CopyPage components are well organized and follow consistent patterns.
29-32: Excellent navbar integration following established patterns.The CopyPage component is properly integrated as the first element in the navbar, and the GitHubIcon is used consistently with the existing social media link pattern. The positioning and styling maintain good visual hierarchy.
components/copy-page.tsx (4)
11-26: LGTM! Clean component setup with proper state management.The component structure follows React best practices with proper TypeScript typing, appropriate hook usage, and correct event listener cleanup in the useEffect.
63-78: Excellent AI integration design!The parameterized approach for AI platform integration is well-designed and future-proof. The prompt includes relevant GenLayer context and properly encodes the current page URL. The helper functions provide a clean API.
58-73: Security considerations look good.The component properly encodes URL parameters and limits DOM access to reading content. Modern browsers handle
window.open(_blank)security automatically, but consider documenting this behavior.
17-26: Excellent performance and resource management.The component demonstrates good performance practices with proper event listener cleanup, appropriate use of refs, URL object cleanup, and efficient state management.
Also applies to: 41-43, 59-59
danieljrc888
left a comment
danieljrc888
left a comment
There was a problem hiding this comment.
👍 Nice work: I appreciate adding this utility, it’s super helpful and increases documentation usability. I have some comments:
- I think the button should disappear on mobile screens.
- Shouldn't be the button color dark to align with the page style ?
Suggestion
It would be helpful to clarify what format "Copy page" uses (Markdown, HTML, or plain text). Could we update the label to say “Copy as Markdown” or add a tooltip explaining the format?
Screenshots
Reference button style
Mobile view
1- Done, now it is not appearing in small screens.
3 (your suggestion) - we already have this text, no? |
epsjunior
deleted the
dxp-504-allow-users-to-copyexport-a-page-in-the-docs
branch
Add Copy Page Dropdown Feature with AI Integration
Summary
Implements a comprehensive "Copy page" dropdown feature for the GenLayer documentation site, allowing users to copy page content as Markdown, view it as plain text, and seamlessly open pages in ChatGPT and Claude for AI-assisted documentation queries. This enhancement includes a modern UI with confirmation states, proper CSS modules architecture, reusable icon components, and follows Nextra best practices to improve developer experience and documentation accessibility.
Changes
🚀 New Features
�� UI/UX Enhancements
🔧 Infrastructure Updates
📁 File Structure
�� Component Features
document.querySelector('main')for page contenthttps://chatgpt.com/?q=...https://claude.ai/new?q=...✨ AI Integration Features
🎯 Icon Component Architecture
components/icons/folder🔗 Dependencies
useState,useRef,useEffectfor state managementnavigator.clipboard,document.querySelectorURL.createObjectURL,Blobfor file handling🛡️ Backward Compatibility
Documentation: ✅ Clear inline documentation and component structure
Architecture: ✅ Follows established component and icon patterns
User Experience: ✅ Intuitive UI with clear visual feedback
Performance: ✅ Efficient DOM queries and event handling
Maintainability: ✅ Clean CSS modules and reusable components
Summary by CodeRabbit
New Features
Style
New Icons
Chores