Skip to content

Commit 51e9b79

Browse files
bgravenorstbgravenorst
committed
Enhance extraContent component.
Signed-off-by: bgravenorst <byron.gravenorst@consensys.net>
1 parent 7bed5bd commit 51e9b79

File tree

4 files changed

+184
-53
lines changed

4 files changed

+184
-53
lines changed

‎services/reference/linea/json-rpc-methods/eth_getlogs.mdx‎

Lines changed: 69 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -5,51 +5,77 @@ hide_title: true
55
hide_table_of_contents: true
66
---
77

8-
import ParserOpenRPC from "@site/src/components/ParserOpenRPC"
9-
import { NETWORK_NAMES } from "@site/src/plugins/plugin-json-rpc"
8+
import ParserOpenRPC from '@site/src/components/ParserOpenRPC'
9+
import { NETWORK_NAMES } from '@site/src/plugins/plugin-json-rpc'
10+
import Heading from '@theme/Heading'
11+
import CodeBlock from '@theme/CodeBlock'
1012

1113
<ParserOpenRPC
1214
network={NETWORK_NAMES.linea}
1315
method="eth_getLogs"
16+
extraContent={{
17+
'after-returns': (
18+
<>
19+
<Heading as="h2" className="padding-top--lg padding-bottom--md">
20+
Constraints
21+
</Heading>
22+
<div className="padding-bottom--lg">
23+
<p>The following constraints apply:</p>
24+
<p>
25+
To prevent queries from consuming too many resources, <code>eth_getLogs</code> requests
26+
are currently limited by three constraints:
27+
</p>
28+
<ul>
29+
<li>A maximum of 5,000 parameters can be included in a single request.</li>
30+
<li>A maximum of 10,000 results can be returned by a single query.</li>
31+
<li>Query duration must not exceed 10 seconds.</li>
32+
</ul>
33+
<p>
34+
If a query returns too many results or exceeds the max query duration, one of the
35+
following errors is returned:
36+
</p>
37+
<CodeBlock language="json">
38+
{JSON.stringify(
39+
{
40+
jsonrpc: '2.0',
41+
id: 1,
42+
error: {
43+
code: -32005,
44+
message: 'query returned more than 10000 results',
45+
},
46+
},
47+
null,
48+
2
49+
)}
50+
</CodeBlock>
51+
<p>or</p>
52+
<CodeBlock language="json">
53+
{JSON.stringify(
54+
{
55+
jsonrpc: '2.0',
56+
id: 1,
57+
error: {
58+
code: -32005,
59+
message: 'query timeout exceeded',
60+
},
61+
},
62+
null,
63+
2
64+
)}
65+
</CodeBlock>
66+
<p>If this happens:</p>
67+
<ul>
68+
<li>
69+
Limit your query to a smaller number of blocks using <code>fromBlock</code> and{' '}
70+
<code>toBlock</code>.
71+
</li>
72+
<li>
73+
If querying for commonly used <code>topics</code>, consider limiting to a single smart
74+
contract <code>address</code>.
75+
</li>
76+
</ul>
77+
</div>
78+
</>
79+
),
80+
}}
1481
/>
15-
16-
## Constraints
17-
18-
The following constraints apply:
19-
20-
To prevent queries from consuming too many resources, `eth_getLogs` requests are currently limited by three constraints:
21-
22-
- A maximum of 5,000 parameters can be included in a single request.
23-
- A maximum of 10,000 results can be returned by a single query.
24-
- Query duration must not exceed 10 seconds.
25-
26-
If a query returns too many results or exceeds the max query duration, one of the following errors is returned:
27-
28-
```json
29-
{
30-
"jsonrpc": "2.0",
31-
"id": 1,
32-
"error": {
33-
"code": -32005,
34-
"message": "query returned more than 10000 results"
35-
}
36-
}
37-
```
38-
39-
or
40-
41-
```json
42-
{
43-
"jsonrpc": "2.0",
44-
"id": 1,
45-
"error": {
46-
"code": -32005,
47-
"message": "query timeout exceeded"
48-
}
49-
}
50-
```
51-
52-
If this happens:
53-
54-
- Limit your query to a smaller number of blocks using `fromBlock` and `toBlock`.
55-
- If querying for commonly used `topics`, consider limiting to a single smart contract `address`.

‎src/components/ParserOpenRPC/DetailsBox/index.tsx‎

Lines changed: 32 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ interface DetailsBoxProps {
2020
components: SchemaComponents
2121
result: any
2222
tags: TagItem[]
23-
extraContent?: JSX.Element
23+
extraContent?: JSX.Element | Record<string, JSX.Element>
2424
}
2525

2626
export default function DetailsBox({
@@ -33,6 +33,16 @@ export default function DetailsBox({
3333
tags,
3434
extraContent,
3535
}: DetailsBoxProps) {
36+
// Helper function to render extraContent at specific positions
37+
const renderExtraContent = (position: string) => {
38+
if (React.isValidElement(extraContent)) {
39+
// Backward compatibility - old syntax only renders at after-description
40+
return position === 'after-description' ? extraContent : null
41+
}
42+
// New syntax - render at specified position
43+
return extraContent?.[position] || null
44+
}
45+
3646
return (
3747
<>
3848
{tags.length > 0 && (
@@ -52,16 +62,23 @@ export default function DetailsBox({
5262
<strong>Summary: </strong>
5363
<span className={styles.summaryText}>
5464
<MDContent content={summary} />
65+
{/* after-summary content is inline appended */}
66+
{renderExtraContent('after-summary')}
5567
</span>
5668
</p>
5769
)}
70+
{/* after-summary content when summary is null */}
71+
{summary === null && renderExtraContent('after-summary')}
5872
{description !== null && (
5973
<div className={clsx('padding-top--md', styles.methodDescription)}>
6074
<MDContent content={description} />
6175
</div>
6276
)}
63-
{extraContent && (
64-
<div className={clsx('padding-top--lg', styles.extraContent)}>{extraContent}</div>
77+
{/* after-description content */}
78+
{renderExtraContent('after-description') && (
79+
<div className={clsx('padding-top--lg', styles.extraContent)}>
80+
{renderExtraContent('after-description')}
81+
</div>
6582
)}
6683
<Heading
6784
as="h2"
@@ -77,6 +94,12 @@ export default function DetailsBox({
7794
params && renderParamSchemas(params, components)
7895
)}
7996
</div>
97+
{/* after-parameters content */}
98+
{renderExtraContent('after-parameters') && (
99+
<div className={clsx('padding-top--lg', styles.extraContent)}>
100+
{renderExtraContent('after-parameters')}
101+
</div>
102+
)}
80103
<Heading
81104
as="h2"
82105
className={clsx(styles.secondaryHeading, 'padding-top--lg padding-vert--md')}>
@@ -85,6 +108,12 @@ export default function DetailsBox({
85108
<div className={styles.paramContainer}>
86109
{result && renderResultSchemas(result, components)}
87110
</div>
111+
{/* after-returns content */}
112+
{renderExtraContent('after-returns') && (
113+
<div className={clsx('padding-top--lg', styles.extraContent)}>
114+
{renderExtraContent('after-returns')}
115+
</div>
116+
)}
88117
</>
89118
)
90119
}

‎src/components/ParserOpenRPC/DetailsBox/styles.module.scss‎

Lines changed: 65 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -216,6 +216,22 @@
216216
}
217217
}
218218

219+
// High specificity override for extraContent h2 to override global type-heading-sm
220+
:global(.colContentWrap_src-components-ParserOpenRPC-global-module) {
221+
.extraContent {
222+
h2 {
223+
font-size: calc(var(--parser-font-size) * 1.64) !important;
224+
font-family: var(--ifm-font-family-base) !important;
225+
font-weight: 500 !important;
226+
line-height: 140% !important;
227+
228+
@include bp('desktop') {
229+
line-height: 125% !important;
230+
}
231+
}
232+
}
233+
}
234+
219235
// Target utility classes that might be overriding
220236
:global(.type-paragraph-m) {
221237
h1 {
@@ -404,20 +420,51 @@
404420
p {
405421
font-size: inherit;
406422
line-height: inherit;
407-
margin-bottom: 1rem;
423+
margin: 0 0 0.5rem 0;
424+
}
425+
426+
// Ensure lists match with proper bullet styling
427+
ul {
428+
font-size: inherit !important;
429+
line-height: inherit;
430+
margin: 0.5rem 0 1rem 0;
431+
padding-left: 1.5rem;
432+
list-style-type: disc;
433+
list-style-position: outside;
408434
}
409435

410-
// Ensure lists match
411-
ul,
412436
ol {
413437
font-size: inherit !important;
414438
line-height: inherit;
415-
margin: 0.5rem 0;
439+
margin: 0.5rem 0 1rem 0;
440+
padding-left: 1.5rem;
441+
list-style-type: decimal;
442+
list-style-position: outside;
416443
}
417444

418445
li {
419446
font-size: inherit !important;
420447
line-height: inherit;
448+
margin-bottom: 0.25rem;
449+
padding-left: 0.25rem;
450+
list-style: inherit;
451+
}
452+
453+
// Nested lists
454+
ul ul,
455+
ol ol,
456+
ul ol,
457+
ol ul {
458+
margin-top: 0.25rem;
459+
margin-bottom: 0.25rem;
460+
}
461+
462+
ul ul {
463+
list-style-type: circle;
464+
}
465+
466+
ul ul ul {
467+
list-style-type: square;
421468
}
422469

423470
// Ensure headings are proportional
@@ -432,8 +479,8 @@
432479
margin-bottom: 0.5rem;
433480
}
434481

435-
// Ensure code blocks match
436-
code {
482+
// Ensure inline code blocks match, but don't interfere with CodeBlock components
483+
code:not(.codeBlockLines_e6Vv):not([class*='codeBlock']) {
437484
font-family: var(--font-mm-sans-mono);
438485
font-size: var(--parser-code-font-size);
439486
padding-left: 0.5rem;
@@ -442,6 +489,18 @@
442489
border-radius: 0.4rem;
443490
}
444491

492+
// Ensure CodeBlock components maintain their original styling
493+
div[class*='codeBlockContainer'] {
494+
margin: 1rem 0;
495+
}
496+
497+
pre[class*='codeBlock'] code {
498+
background: none !important;
499+
padding: 0 !important;
500+
border-radius: 0 !important;
501+
font-size: inherit !important;
502+
}
503+
445504
// Ensure links match
446505
a {
447506
color: var(--ifm-link-color);

‎src/components/ParserOpenRPC/index.tsx‎

Lines changed: 18 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import ErrorsBox from '@site/src/components/ParserOpenRPC/ErrorsBox'
88
import { ModalDrawer } from '@site/src/components/ParserOpenRPC/ModalDrawer'
99
import global from './global.module.scss'
1010
import modalDrawerStyles from './ModalDrawer/styles.module.scss'
11+
import detailsBoxStyles from './DetailsBox/styles.module.scss'
1112
import clsx from 'clsx'
1213
import { useColorMode } from '@docusaurus/theme-common'
1314
import { trackClickForSegment, trackInputChangeForSegment } from '@site/src/lib/segmentAnalytics'
@@ -25,7 +26,7 @@ import localLineaSpec from '@site/src/specs/linea/openrpc.json'
2526
interface ParserProps {
2627
network: NETWORK_NAMES
2728
method?: string
28-
extraContent?: JSX.Element
29+
extraContent?: JSX.Element | Record<string, JSX.Element>
2930
src?: 'local' | 'remote'
3031
}
3132

@@ -61,6 +62,17 @@ export default function ParserOpenRPC({
6162
const [defExampleResponse, setDefExampleResponse] = useState(undefined)
6263
const [isLoading, setIsLoading] = useState(false)
6364
const { colorMode } = useColorMode()
65+
66+
// Helper function to render extraContent at specific positions
67+
const renderExtraContent = (position: string) => {
68+
if (React.isValidElement(extraContent)) {
69+
// Backward compatibility - old syntax doesn't support after-errors
70+
return null
71+
}
72+
// New syntax - render at specified position
73+
return extraContent?.[position] || null
74+
}
75+
6476
const trackAnalyticsForRequest = response => {
6577
trackClickForSegment({
6678
eventName: 'Request Sent',
@@ -299,6 +311,11 @@ export default function ParserOpenRPC({
299311
extraContent={extraContent}
300312
/>
301313
<ErrorsBox errors={currentMethodData.errors} />
314+
{renderExtraContent('after-errors') && (
315+
<div className={clsx('padding-top--lg', detailsBoxStyles.extraContent)}>
316+
{renderExtraContent('after-errors')}
317+
</div>
318+
)}
302319
</div>
303320
<ModalDrawer
304321
title={

0 commit comments

Comments
 (0)