[WIP] Copy Button Fix by gbarros · Pull Request #2364 · celestiaorg/docs

gbarros · 2025-12-17T20:05:52Z

This pull request enhances the Node API documentation page by improving the user experience around copying method specifications and refining the layout for better readability. The most significant change is the addition of a dedicated "Copy Spec" button that allows users to copy the full OpenRPC method specification, along with UI adjustments and the suppression of a conflicting default copy button.

User experience improvements:

Added a "Copy Spec" button to each RPC method, allowing users to copy the full OpenRPC method specification as JSON, with visual feedback when copied. (app/build/rpc/components/RPCMethod.tsx, app/build/rpc/lib/types.ts, app/build/rpc/components/NodeAPIContent.tsx) [1] [2] [3]
Passed the full raw spec for each method through the Method type and component props to support the new copy functionality. (app/build/rpc/lib/types.ts, app/build/rpc/components/NodeAPIContent.tsx) [1] [2]
Added a custom style block to hide the default Nextra copy button, which did not work well with the dynamic content on the Node API page. (app/build/rpc/node-api/page.mdx)

UI and accessibility enhancements:

Improved layout and responsiveness of the method header and action buttons, including better handling of long method names and button alignment. (app/build/rpc/components/RPCMethod.tsx) [1] [2] [3] [4]
Ensured the "Try it out" and "Copy Spec" buttons are visually distinct and responsive to different screen sizes. (app/build/rpc/components/RPCMethod.tsx)

github-actions · 2025-12-17T20:08:12Z

🚀 Preview Deployment

Your preview is ready: https://celestiaorg.github.io/docs-preview/pr-2364/

jcstein · 2025-12-17T22:54:18Z

for me, when i copy, it doesnt show request and response:

[...]
GrantFee(grantee state.AccAddress, amount state.Int, config \*state.TxConfig)\*state.TxResponseperms: write

No comment exists yet for this method.

Request

Response

QueryDelegation(valAddr state.ValAddress)\*types.QueryDelegationResponseperms: read

QueryDelegation retrieves the delegation information between a delegator and a validator.

Request

Response

QueryRedelegations(srcValAddr state.ValAddress, dstValAddr state.ValAddress)\*types.QueryRedelegationsResponseperms: read

QueryRedelegations retrieves the status of the redelegations between a delegator and a validator.

Request

Response

QueryUnbonding(valAddr state.ValAddress)\*types.QueryUnbondingDelegationResponseperms: read

QueryUnbonding retrieves the unbonding status between a delegator and a validator.

Request

Response

RevokeGrantFee(grantee state.AccAddress, config \*state.TxConfig)\*state.TxResponseperms: write

No comment exists yet for this method.

Request

Response

SubmitPayForBlob(blobs \[\]\*libshare.Blob, config \*state.TxConfig)\*state.TxResponseperms: write

SubmitPayForBlob builds, signs and submits a PayForBlob transaction.

Request

Response

Transfer(to state.AccAddress, amount state.Int, config \*state.TxConfig)\*state.TxResponseperms: write

Transfer sends the given amount of coins from default wallet of the node to the given account address.

Request

Response

Undelegate(delAddr state.ValAddress, amount state.Int, config \*state.TxConfig)\*state.TxResponseperms: write

Undelegate undelegates a user's delegated tokens, unbonding them from the current validator.

Request

Response

### Feel stuck? [Go to our Discord!](https://discord.com/invite/YsnTPcSfWQ)

[OP alt DA](/build/stacks/op-alt-da/ "OP alt DA")[Clients](/build/rpc/clients/ "Clients")

jcstein · 2025-12-17T23:13:48Z

gemini seems onto something tbh

Copilot

Pull request overview

Copilot reviewed 4 out of 4 changed files in this pull request and generated 3 comments.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2025-12-18T20:51:44Z

+  article button:has(svg):has(*:is(:contains("Copy page"), :contains("Copied"))) {
+    display: none !important;
+  }
+  /* Fallback: hide the container if :has() or :contains() not supported */


The CSS selectors :contains() and :has() combined in this way are not standard CSS. The :contains() pseudo-class doesn't exist in CSS (it's a jQuery selector), and while :has() is valid, this specific usage won't work. Consider using a more reliable approach such as adding a data attribute to the button you want to hide, or using JavaScript to hide the button based on its text content.

Suggested change

article button:has(svg):has(*:is(:contains("Copy page"), :contains("Copied"))) {

display: none !important;

}

/* Fallback: hide the container if :has() or :contains() not supported */

Copilot · 2025-12-18T20:51:44Z


+{/* Hide Nextra's copy button - doesn't work well with dynamic content on this page */}
+<style>{`
+  article button:has(svg):has(*:is(:contains("Copy page"), :contains("Copied"))) {
+    display: none !important;
+  }
+  /* Fallback: hide the container if :has() or :contains() not supported */
+  article div[class*="border"][class*="inline-flex"][class*="float-end"] {
+    display: none !important;
+  }
+`}</style>


This fallback selector is fragile and may hide unintended elements or break when CSS class names change. Consider targeting the button more specifically through a custom class name or data attribute, or use a more robust JavaScript-based solution to identify and hide the correct button.

Suggested change

{/* Hide Nextra's copy button - doesn't work well with dynamic content on this page */}

<style>{`

article button:has(svg):has(*:is(:contains("Copy page"), :contains("Copied"))) {

display: none !important;

}

/* Fallback: hide the container if :has() or :contains() not supported */

article div[class*="border"][class*="inline-flex"][class*="float-end"] {

display: none !important;

}

`}</style>

import Script from "next/script";

{/* Hide Nextra's copy button - doesn't work well with dynamic content on this page */}

<style>{`

article button:has(svg):has(*:is(:contains("Copy page"), :contains("Copied"))) {

display: none !important;

}

`}</style>

<Script id="hide-nextra-copy-button-fallback" strategy="afterInteractive">

{`

(function() {

try {

var buttons = document.querySelectorAll('article button');

buttons.forEach(function(btn) {

var text = (btn.textContent || '').toLowerCase();

if (text.indexOf('copy page') !== -1 || text.indexOf('copied') !== -1) {

var container = btn.closest('div');

if (container) {

container.style.display = 'none';

} else {

btn.style.display = 'none';

}

}

});

} catch (e) {

// Fail silently if the environment doesn't support querySelectorAll/closest

}

})();

`}

</Script>

jcstein

lgtm

gbarros requested review from Copilot and jcstein December 17, 2025 20:05

This comment was marked as outdated.

Sign in to view

jcstein assigned gbarros Dec 17, 2025

gbarros added 3 commits December 18, 2025 17:06

docs: hide Nextra's copy button for dynamic content compatibility

cb0e3dc

feat: add copy functionality for RPC method specifications

d68ed72

fix: correct white space bar on the node api page

1b499b1

gbarros force-pushed the gb/copy-button branch from fd5d2ea to 1b499b1 Compare December 18, 2025 20:49

gbarros requested a review from Copilot December 18, 2025 20:50

Copilot AI reviewed Dec 18, 2025

View reviewed changes

jcstein approved these changes Dec 18, 2025

View reviewed changes

jcstein merged commit 93dcafa into main Dec 19, 2025
6 checks passed

jcstein deleted the gb/copy-button branch December 19, 2025 16:46

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[WIP] Copy Button Fix#2364

[WIP] Copy Button Fix#2364
jcstein merged 3 commits intomainfrom
gb/copy-button

gbarros commented Dec 17, 2025 •

edited

Loading

Uh oh!

This comment was marked as outdated.

This comment was marked as outdated.

Uh oh!

github-actions bot commented Dec 17, 2025 •

edited

Loading

Uh oh!

This comment was marked as outdated.

Uh oh!

jcstein commented Dec 17, 2025

Uh oh!

jcstein commented Dec 17, 2025

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Dec 18, 2025

Uh oh!

Copilot AI Dec 18, 2025

Uh oh!

Uh oh!

jcstein left a comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

-{/* Hide Nextra's copy button - doesn't work well with dynamic content on this page */}
-<style>{`
-  article button:has(svg):has(*:is(:contains("Copy page"), :contains("Copied"))) {
-    display: none !important;
-  }
-  /* Fallback: hide the container if :has() or :contains() not supported */
-  article div[class*="border"][class*="inline-flex"][class*="float-end"] {
-    display: none !important;
-  }
-`}</style>
+import Script from "next/script";
+{/* Hide Nextra's copy button - doesn't work well with dynamic content on this page */}
+<style>{`
+  article button:has(svg):has(*:is(:contains("Copy page"), :contains("Copied"))) {
+    display: none !important;
+  }
+`}</style>
+<Script id="hide-nextra-copy-button-fallback" strategy="afterInteractive">
+{`
+  (function() {
+    try {
+      var buttons = document.querySelectorAll('article button');
+      buttons.forEach(function(btn) {
+        var text = (btn.textContent || '').toLowerCase();
+        if (text.indexOf('copy page') !== -1 || text.indexOf('copied') !== -1) {
+          var container = btn.closest('div');
+          if (container) {
+            container.style.display = 'none';
+          } else {
+            btn.style.display = 'none';
+          }
+        }
+      });
+    } catch (e) {
+      // Fail silently if the environment doesn't support querySelectorAll/closest
+    }
+  })();
+`}
+</Script>

Conversation

gbarros commented Dec 17, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

This comment was marked as outdated.

This comment was marked as outdated.

Uh oh!

github-actions bot commented Dec 17, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

This comment was marked as outdated.

Uh oh!

jcstein commented Dec 17, 2025

Uh oh!

jcstein commented Dec 17, 2025

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Copilot AI Dec 18, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 18, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

jcstein left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

gbarros commented Dec 17, 2025 •

edited

Loading

github-actions bot commented Dec 17, 2025 •

edited

Loading